/* ==========================================================================
   Laila Hassaballa — ADHD Coaching & Education
   Design tokens
   -------------------------------------------------------------------------
   Palette:
     --cream   #FBF4E8  page ground, warm ivory
     --forest  #3C4A2E  deep olive-forest — headings, nav, buttons, footer
     --sage    #8FA06E  mid green — decorative icons, borders, backgrounds
     --sage-text #61714B  darkened sage — meets 4.5:1 for text/meaningful icons on cream
     --peach   #F3D9BE  pastel card 1
     --rose    #F1D7D6  pastel card 2
     --sky     #D9E4DD  pastel card 3 (cool green-blue)
   Type:
     Display: Fraunces (warm, organic serif — headlines only)
     Body/UI: Work Sans (clean humanist sans)
   Signature: brain + growth-sprig motif, used once boldly (hero, Meet Laila,
   parent program) and echoed quietly as a leaf bullet throughout.
   ========================================================================== */

:root{
  --cream: #FBF4E8;
  --cream-2: #F5EBDA;
  --forest: #3C4A2E;
  --forest-2: #2E3A22;
  --sage: #8FA06E;
  --sage-text: #61714B;
  --sage-pale: #E9EEDD;
  --peach: #F3D9BE;
  --rose: #F1D7D6;
  --sky: #D9E4DD;
  --ink: #2A2A22;
  --ink-soft: #55584A;
  --white: #FFFFFF;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --shadow-soft: 0 20px 40px -20px rgba(60, 74, 46, 0.25);
  --shadow-card: 0 12px 30px -16px rgba(60, 74, 46, 0.22);

  --wrap: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  zoom: 1.1;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{ margin: 0; font-family: var(--font-display); color: var(--forest); font-weight: 600; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input{ font-family: inherit; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.skip-link{
  position: absolute; left: 12px; top: -60px;
  background: var(--forest); color: var(--cream);
  padding: 10px 16px; border-radius: var(--radius-sm);
  z-index: 200; transition: top 0.2s ease;
}
.skip-link:focus{ top: 12px; }

:focus-visible{
  outline: 2.5px solid var(--forest);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On dark (forest/forest-2) backgrounds, a forest outline is invisible against
   its own surroundings — swap to a light color that keeps 3:1+ contrast. */
.parent-program :focus-visible,
.contact-card :focus-visible,
.site-footer :focus-visible,
.mini-cta :focus-visible{
  outline-color: var(--sage-pale);
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}
.wrap--wide{ max-width: 1360px; }
.wrap--medium{ max-width: 760px; }

.icon{ display: inline-block; vertical-align: middle; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Grid-type reveal containers (card grids, testimonial grids, numbered lists)
   don't fade as one flat block — each item settles in with a slight stagger,
   so the section feels assembled rather than a single generic fade-up. */
.card-grid.reveal,
.testi-grid.reveal,
.track-grid.reveal,
.approach-grid.reveal,
.why-grid.reveal,
.process-list.reveal,
.session-list.reveal,
.session-detail-list.reveal{
  opacity: 1;
  transform: none;
  transition: none;
}
.card-grid.reveal > *,
.testi-grid.reveal > *,
.track-grid.reveal > *,
.approach-grid.reveal > *,
.why-grid.reveal > *,
.process-list.reveal > *,
.session-list.reveal > *,
.session-detail-list.reveal > *{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.card-grid.reveal.is-visible > *,
.testi-grid.reveal.is-visible > *,
.track-grid.reveal.is-visible > *,
.approach-grid.reveal.is-visible > *,
.why-grid.reveal.is-visible > *,
.process-list.reveal.is-visible > *,
.session-list.reveal.is-visible > *,
.session-detail-list.reveal.is-visible > *{
  opacity: 1;
  transform: none;
}
.card-grid.reveal > *:nth-child(1), .testi-grid.reveal > *:nth-child(1), .track-grid.reveal > *:nth-child(1), .approach-grid.reveal > *:nth-child(1), .why-grid.reveal > *:nth-child(1), .process-list.reveal > *:nth-child(1), .session-list.reveal > *:nth-child(1), .session-detail-list.reveal > *:nth-child(1){ transition-delay: 0ms; }
.card-grid.reveal > *:nth-child(2), .testi-grid.reveal > *:nth-child(2), .track-grid.reveal > *:nth-child(2), .approach-grid.reveal > *:nth-child(2), .why-grid.reveal > *:nth-child(2), .process-list.reveal > *:nth-child(2), .session-list.reveal > *:nth-child(2), .session-detail-list.reveal > *:nth-child(2){ transition-delay: 70ms; }
.card-grid.reveal > *:nth-child(3), .testi-grid.reveal > *:nth-child(3), .track-grid.reveal > *:nth-child(3), .approach-grid.reveal > *:nth-child(3), .why-grid.reveal > *:nth-child(3), .process-list.reveal > *:nth-child(3), .session-list.reveal > *:nth-child(3), .session-detail-list.reveal > *:nth-child(3){ transition-delay: 140ms; }
.card-grid.reveal > *:nth-child(4), .testi-grid.reveal > *:nth-child(4), .track-grid.reveal > *:nth-child(4), .approach-grid.reveal > *:nth-child(4), .why-grid.reveal > *:nth-child(4), .process-list.reveal > *:nth-child(4), .session-list.reveal > *:nth-child(4), .session-detail-list.reveal > *:nth-child(4){ transition-delay: 210ms; }
.card-grid.reveal > *:nth-child(5), .testi-grid.reveal > *:nth-child(5), .session-list.reveal > *:nth-child(5), .session-detail-list.reveal > *:nth-child(5){ transition-delay: 280ms; }
.card-grid.reveal > *:nth-child(6){ transition-delay: 350ms; }

/* Signature hero moments: the photo settles in with a scale rather than the
   generic slide-up (text and image shouldn't move identically), and the
   brain badge — the site's one recurring motif — gets its own delayed pop. */
.hero-visual.reveal{
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-visual.reveal.is-visible{
  opacity: 1;
  transform: scale(1);
}
.brain-badge{
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.45s ease 0.35s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.hero-visual.reveal.is-visible .brain-badge{
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  .card-grid.reveal > *,
  .testi-grid.reveal > *,
  .track-grid.reveal > *,
  .approach-grid.reveal > *,
  .why-grid.reveal > *,
  .process-list.reveal > *,
  .session-list.reveal > *,
  .session-detail-list.reveal > *,
  .brain-badge{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--forest);
  color: var(--cream);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover{ background: var(--forest-2); transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}
.btn-outline:hover{ background: var(--forest); color: var(--cream); transform: translateY(-2px); }
.btn-light{
  background: var(--cream);
  color: var(--forest);
}
.btn-light:hover{ background: var(--white); transform: translateY(-2px); }
.btn-block{ width: 100%; justify-content: center; }
.btn:active{ transform: scale(0.97); transition-duration: 0.08s; }

/* ---------- Eyebrow label ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sage-text);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow--light{ color: var(--sage-pale); }
.eyebrow.center{ justify-content: center; width: 100%; }
.icon-leaf-sm{ color: var(--sage-text); flex-shrink: 0; }
.eyebrow--light .icon-leaf-sm{ color: var(--sage-pale); }

.section-title{
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.section-title.center{ text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.section-title.light{ color: var(--cream); }

.section{ padding: 96px 0; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 244, 232, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(60, 74, 46, 0.08);
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
/* Brand and nav-actions share an equal flex-grow (basis 0) so leftover space
   splits evenly on both sides of main-nav, keeping it centered on the bar
   regardless of the brand/actions content being different widths. */
.brand{ display: flex; align-items: center; line-height: 1.2; min-width: 0; flex: 1 0 0; margin-left: -87px; }
.brand-logo{ height: 60px; width: auto; display: block; }
.brand-name{
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 1vw, 1.35rem);
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
}
.brand-name.light{ color: var(--cream); }
.brand-sub{
  font-size: clamp(0.56rem, 0.5rem + 0.3vw, 0.68rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-text);
  font-weight: 600;
  white-space: nowrap;
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 1 auto;
}
.nav-actions{ display: flex; align-items: center; gap: 24px; flex: 1 0 0; justify-content: flex-end; }
.nav-link{
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.is-active{ color: var(--forest); }
.nav-link.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--sage);
  border-radius: 2px;
}

.btn-nav{ flex-shrink: 0; padding: 12px 20px; }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  padding: 10px;
  margin: -10px;
  color: var(--forest);
}
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: inline-block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  overflow: hidden;
  padding: 72px 0 96px;
}
.hero-doodles{ position: absolute; inset: 0; pointer-events: none; }
.doodle{ position: absolute; color: var(--sage); opacity: 0.55; }
.doodle-leaf-1{ top: 14%; left: 6%; transform: rotate(-18deg); }
.doodle-leaf-2{ bottom: 10%; left: 3%; transform: rotate(12deg); opacity: 0.4; }
.doodle-dot{
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose);
}
.doodle-dot-1{ top: 20%; right: 10%; }
.doodle-dot-2{ bottom: 18%; right: 4%; background: var(--sky); width: 12px; height: 12px; }
.doodle-plus{
  font-family: var(--font-body); font-weight: 700; font-size: 1.4rem;
  color: var(--sage); opacity: 0.5;
}
.doodle-plus-1{ top: 8%; right: 22%; }
.doodle-plus-2{ bottom: 30%; left: 14%; }

.hero-inner{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
  position: relative;
}

.hero-title{
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}
.hero-sub{
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 34px;
}
.btn-row{ display: flex; gap: 16px; flex-wrap: wrap; }

.hero-visual{ position: relative; display: flex; justify-content: center; }
.hero-photo-frame{ position: relative; width: min(360px, 100%); }
.photo-frame{
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
  background: var(--peach);
}
.photo-frame--round{ aspect-ratio: 1 / 1; border-radius: 50%; }
.frame-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.brain-badge{
  position: absolute;
  top: -14px;
  right: 6%;
  width: 82px; height: 82px;
  background: var(--sage-pale);
  border: 1.5px solid var(--sage);
  color: var(--forest);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Who I Help / Resources — shared card grid
   ========================================================================== */
.card-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.who-card{
  border-radius: var(--radius-md);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.who-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.who-card--peach{ background: var(--peach); }
.who-card--sage{ background: var(--sage-pale); }
.who-card--rose{ background: var(--rose); }
.who-card--sky{ background: var(--sky); }
.who-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  color: var(--forest);
  margin-bottom: 6px;
  transition: transform 0.3s ease;
}
.who-card:hover .who-icon{ transform: rotate(-6deg) scale(1.08); }
.who-card h3{ font-size: 1.15rem; }
.who-card p{ color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.card-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--forest);
  margin-top: 4px;
  transition: gap 0.15s ease;
}
.card-link:hover{ gap: 10px; }

/* ==========================================================================
   Why-it-works strip
   ========================================================================== */
.why-strip{ padding-top: 0; }
.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  background: var(--sage-pale);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
}
.why-item{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.why-item svg{ color: var(--forest); margin-bottom: 6px; }
.why-item h3{ font-size: 1.1rem; }
.why-item p{ color: var(--ink-soft); font-size: 0.92rem; max-width: 30ch; }

/* ==========================================================================
   Meet Laila
   ========================================================================== */
.meet-laila{ background: var(--peach); position: relative; overflow: hidden; }
.meet-inner{
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  align-items: center;
  gap: 56px;
  position: relative;
}
.meet-photo .photo-frame{ width: min(320px, 100%); margin: 0 auto; }
.meet-photo .frame-img{
  object-position: center 25%;
  transform: scale(1.2);
  transform-origin: 50% 35%;
}
.meet-copy p{ color: var(--ink-soft); font-size: 1.05rem; margin: 18px 0 30px; max-width: 52ch; }
.meet-copy .section-title{ margin-bottom: 0; }
.meet-brain-bg{
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--forest);
  opacity: 0.08;
  pointer-events: none;
}

/* ==========================================================================
   Parent Program
   ========================================================================== */
.parent-program{ background: var(--forest); color: var(--cream); }
.program-inner{ max-width: 760px; }
.program-desc{ color: rgba(251,244,232,0.82); font-size: 1.05rem; max-width: 52ch; margin-bottom: 34px; }

.session-list{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.session-list li{
  background: rgba(251,244,232,0.08);
  border: 1px solid rgba(251,244,232,0.18);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
}
.session-num{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.session-detail-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}
.session-detail-list li{
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: rgba(251,244,232,0.08);
  border: 1px solid rgba(251,244,232,0.18);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.session-detail-list .session-num{ flex-shrink: 0; width: 34px; height: 34px; font-size: 1rem; }
.session-detail-list h3{ color: var(--cream); font-size: 1.05rem; margin-bottom: 6px; }
.session-detail-list p{ color: rgba(251,244,232,0.78); font-size: 0.92rem; margin: 0; }

.testi-single{ max-width: 640px; margin: 0 auto; }

.narrow-center{ max-width: 680px; margin: 0 auto; text-align: center; }
.narrow-center .eyebrow{ justify-content: center; }
.narrow-center .btn-row{ justify-content: center; }
.narrow-center p{ margin-bottom: 24px; }
.section-title--gap{ margin-bottom: 40px; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.testi-grid--2{
  max-width: 780px;
  margin: 0 auto;
}
.testi-card{
  background: var(--white);
  border: 1px solid rgba(60,74,46,0.08);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-card);
  text-align: center;
  flex: 1 1 320px;
  max-width: 360px;
}
.testi-card--wide{
  max-width: 760px;
  width: 100%;
  margin: 40px auto 0;
  padding: 36px 48px;
}
.testi-card blockquote{
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.65;
  text-align: center;
}
.testi-card blockquote::before{ content: '"'; }
.testi-card blockquote::after{ content: '"'; }
.testi-card blockquote[dir="rtl"]{
  text-align: right;
  line-height: 1.9;
  font-size: 1rem;
}
.testi-card figcaption{ font-size: 0.88rem; color: var(--forest); }

/* ==========================================================================
   Contact / Final CTA
   ========================================================================== */
.contact-inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.contact-copy .section-title{ margin-bottom: 16px; }
.contact-copy > p{ color: var(--ink-soft); font-size: 1.05rem; max-width: 46ch; margin-bottom: 28px; }
.fact-row{
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.fact-row li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--forest);
}
.fact-row svg{ color: var(--sage-text); }

.contact-card{
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-soft);
}
.contact-card h3{ color: var(--cream); font-size: 1.3rem; margin-bottom: 22px; }
.contact-details{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.contact-details li{ display: flex; align-items: center; gap: 12px; font-size: 0.95rem; }
.contact-details svg{ color: var(--sage); flex-shrink: 0; }
.contact-details a{ transition: color 0.15s ease; }
.contact-details a:hover{ color: var(--sage-pale); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--forest-2); color: rgba(251,244,232,0.85); padding-top: 72px; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(251,244,232,0.14);
}
.footer-logo{ height: 52px; width: auto; display: block; }
.footer-brand p{ margin-top: 14px; font-size: 0.92rem; max-width: 34ch; color: rgba(251,244,232,0.7); }
.footer-col h4{
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col a{
  display: block;
  font-size: 0.92rem;
  color: rgba(251,244,232,0.75);
  margin-bottom: 10px;
  transition: color 0.15s ease;
}
.footer-col a:hover{ color: var(--cream); }
.footer-note{ font-size: 0.88rem; color: rgba(251,244,232,0.65); margin-bottom: 14px; }

.social-row{ display: flex; gap: 10px; }
.social-row a{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(251,244,232,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
}
.social-row a:hover{ background: var(--sage); color: var(--forest-2); }
.social-row--center{ justify-content: center; }
.social-row--onlight a{ background: var(--sage-pale); color: var(--forest); }
.social-row--onlight a:hover{ background: var(--sage); color: var(--forest-2); }

.contact-card .response-note{ color: rgba(251,244,232,0.75); font-size: 0.9rem; margin-bottom: 24px; }

.footer-form{ display: flex; gap: 8px; }
.footer-form input{
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251,244,232,0.25);
  background: rgba(251,244,232,0.08);
  color: var(--cream);
  font-size: 1rem;
}
.footer-form input::placeholder{ color: rgba(251,244,232,0.5); }
.footer-form button{
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--sage);
  color: var(--forest-2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.footer-form button:hover{ background: var(--sage-pale); }
.footer-form-msg{ font-size: 0.82rem; color: var(--sage-pale); margin-top: 10px; min-height: 1.2em; }

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 28px;
  font-size: 0.82rem;
  color: rgba(251,244,232,0.55);
}
.footer-legal{ display: flex; gap: 20px; }

/* ==========================================================================
   Subpages — shared components
   ========================================================================== */
.page-hero{ padding: 60px 0 76px; text-align: center; }
.page-hero .eyebrow{ justify-content: center; }
.page-hero h1{
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.page-hero-sub{
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 62ch;
  margin: 0 auto;
}
.page-hero .btn-row{ justify-content: center; margin-top: 28px; }
.section--tight{ padding-top: 0; }

/* A full-bleed colored section (like the dark parent-program panel) needs some
   breathing room even when "tight" — zero padding puts text flush against the
   hard color edge, unlike section--tight's usual case of an inset card. */
.parent-program.section--tight{ padding-top: 56px; }
.page-hero--peach{ background: var(--peach); }
.page-hero--sage{ background: var(--sage-pale); }
.page-hero--sky{ background: var(--sky); }
.page-hero--rose{ background: var(--rose); }

.intro-text{
  max-width: 70ch;
  margin: 0 auto 56px;
  text-align: center;
  font-size: 1.08rem;
  color: var(--ink-soft);
}

/* Two-track cards (coaching) */
.track-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.track-card{
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.track-card--peach{ background: var(--peach); }
.track-card--sky{ background: var(--sky); }
.track-card h3{ font-size: 1.4rem; margin-bottom: 6px; }
.track-card > p{ color: var(--ink-soft); margin-bottom: 20px; }
.track-list{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.track-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.track-list svg{ color: var(--forest); flex-shrink: 0; margin-top: 3px; }

/* Process steps (legitimate ordered sequence) */
.process-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.process-list li{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  box-shadow: var(--shadow-card);
}
.process-num{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 16px;
}
.process-list h3{ font-size: 1.05rem; margin-bottom: 8px; }
.process-list p{ color: var(--ink-soft); font-size: 0.9rem; }

/* Focus-area chips */
.chip-row{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip{
  background: var(--sage-pale);
  color: var(--forest);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* FAQ (native details/summary — no JS needed) */
.faq-list{ max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 4px 26px;
  box-shadow: var(--shadow-card);
}
.faq-item summary{
  cursor: pointer;
  padding: 20px 0;
  font-weight: 600;
  color: var(--forest);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-size: 1.4rem;
  color: var(--sage-text);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ padding: 0 0 22px; color: var(--ink-soft); font-size: 0.95rem; }

/* Mini CTA band */
.mini-cta{
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 52px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.mini-cta h2{ color: var(--cream); margin-bottom: 6px; }
.mini-cta p{ color: rgba(251,244,232,0.8); }

/* Resource categories (resources.html) */
.resource-category{ margin-bottom: 56px; }
.resource-category:last-child{ margin-bottom: 0; }
.resource-category h2{
  font-size: 1.25rem;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Contact form (contact.html) */
.contact-page-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.form-field{ margin-bottom: 18px; }
.form-field label{
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 6px;
}
.required-mark{ color: var(--sage-text); }
.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(60,74,46,0.18);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.form-field textarea{ resize: vertical; min-height: 130px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ border-color: var(--sage-text); }
.contact-form-msg{ font-size: 0.88rem; color: var(--forest); margin-top: 6px; min-height: 1.2em; }

/* About page */
.approach-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.approach-card{
  background: var(--sage-pale);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.approach-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.approach-card svg{ color: var(--forest); margin-bottom: 14px; transition: transform 0.3s ease; }
.approach-card:hover svg{ transform: scale(1.12); }
.approach-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.approach-card p{ color: var(--ink-soft); font-size: 0.92rem; }

.about-photo-copy{
  display: grid;
  grid-template-columns: 0.7fr 1fr 0.8fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 80px;
}
.about-photo-copy .photo-frame{ width: min(320px, 100%); margin: 0 auto; align-self: center; }
.about-photo-copy .frame-img{
  object-position: center 25%;
  transform: scale(1.12);
  transform-origin: 50% 35%;
}
.about-photo-copy p{ color: var(--ink-soft); font-size: 1.05rem; margin: 16px 0 24px; }

.cert-panel{
  background: var(--cream-2);
  border: 1px solid rgba(60,74,46,0.1);
  border-radius: var(--radius-md);
  padding: 34px 30px;
  text-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 38px;
  height: 100%;
}
.about-photo-copy .cert-panel-title{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.cert-panel-title svg{ color: var(--sage-text); flex-shrink: 0; }
.cert-list{ display: flex; flex-direction: column; gap: 14px; }
.cert-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(60,74,46,0.12);
}
.cert-item:last-child{ padding-bottom: 0; border-bottom: none; }
.cert-item svg{ color: var(--forest); flex-shrink: 0; margin-top: 2px; }
.cert-item strong{ display: block; font-size: 0.9rem; color: var(--forest); font-weight: 600; line-height: 1.4; }
.cert-item span{ display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: 1fr; gap: 32px; }
  .meet-inner{ grid-template-columns: 1fr; text-align: center; }
  .meet-copy p{ margin-left: auto; margin-right: auto; }
  .meet-brain-bg{ display: none; }
  .session-list{ grid-template-columns: repeat(3, 1fr); }
  .testi-grid{ max-width: 520px; margin: 0 auto; }
  .testi-card{ flex-basis: 100%; max-width: 100%; }
  .contact-inner{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1480px){
  .header-inner{ justify-content: space-between; gap: 12px; }
  .main-nav{ display: none; }
  .btn-nav{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .brand{ flex: 1 1 auto; margin-left: 0; margin-right: 0; }
  .brand-logo{ width: auto; max-width: 100%; height: auto; max-height: 60px; object-fit: contain; }
  .nav-actions{ display: flex; flex: 0 0 auto; gap: 12px; }
  .nav-actions > button{ flex-shrink: 0; }

  .main-nav.is-open{
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--cream);
    padding: 16px 28px 24px;
    border-bottom: 1px solid rgba(60,74,46,0.1);
  }
  .main-nav.is-open .nav-link{ padding: 10px 0; width: 100%; }
}

@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .hero-sub{ margin-left: auto; margin-right: auto; }
  .btn-row{ justify-content: center; }
  .hero-visual{ margin-top: 24px; }

  .card-grid{ grid-template-columns: 1fr; }
  .session-list{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .section{ padding: 64px 0; }
  .wrap{ padding: 0 20px; }
  .btn-row{ flex-direction: column; align-items: stretch; }
  .btn{ justify-content: center; }
  .fact-row{ flex-direction: column; gap: 12px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .session-list{ grid-template-columns: 1fr 1fr; }
  .doodle-plus, .doodle-dot{ display: none; }
}

/* ---------- Subpage components ---------- */
@media (max-width: 1024px){
  .process-list{ grid-template-columns: repeat(2, 1fr); }
  .approach-grid{ grid-template-columns: 1fr; }
  .about-photo-copy{ grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .about-photo-copy p{ margin-left: auto; margin-right: auto; }
  .contact-page-grid{ grid-template-columns: 1fr; }
}

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

@media (max-width: 640px){
  .process-list{ grid-template-columns: 1fr; }
  .mini-cta{ flex-direction: column; text-align: center; }
  .faq-item summary{ font-size: 0.95rem; }
  .session-detail-list li{ flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   i18n / Language toggle / RTL (Arabic)
   ========================================================================== */

/* Hide content until JS has applied the saved language, avoiding a flash
   of the wrong language/direction on load. Removed the moment i18n.js runs
   (which happens on DOMContentLoaded, before the user can perceive layout). */
html:not([data-i18n-ready]) body{ visibility: hidden; }

.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--forest);
  background: transparent;
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.lang-toggle:hover{ background: var(--sage-pale); }
.lang-toggle svg{ flex-shrink: 0; }

.footer-legal button.lang-toggle{
  padding: 4px 12px;
  font-size: 0.8rem;
}

/* ---- RTL (Arabic) ---- */
html[dir="rtl"]{
  --font-display: "Cairo", "Tahoma", sans-serif;
  --font-body: "Cairo", "Tahoma", sans-serif;
}

/* Letter-spacing and uppercase transforms are a Latin-script convention;
   applied to Arabic they add gaps that break the script's letter joining. */
html[dir="rtl"] *{
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Keyboard skip-link should land in the correct reading-direction corner */
html[dir="rtl"] .skip-link{ left: auto; right: 12px; }

/* nav-link active underline and a couple of hand-positioned decorative
   elements read oddly mirrored; keep them harmless in RTL rather than
   fighting CSS Grid/Flexbox's automatic direction handling everywhere else */
html[dir="rtl"] .brain-badge{ right: auto; left: 6%; }
html[dir="rtl"] .meet-brain-bg{ right: auto; left: -40px; }

/* .brand's negative margin-left pulls the logo toward the header's outer
   edge to offset whitespace baked into the logo image; in RTL the outer
   edge is the right side, so mirror the margin or it overlaps the nav */
html[dir="rtl"] .brand{ margin-left: 0; margin-right: -87px; }

@media (max-width: 1480px){
  html[dir="rtl"] .brand{ margin-right: 0; }
}

@media (max-width: 860px){
  .lang-toggle{ padding: 8px 12px; }
  .lang-toggle span{ display: none; }
}

/* ==========================================================================
   Mobile CTA bar
   -------------------------------------------------------------------------
   Below 1480px the header's "Book a Free Consultation" button is hidden
   (there isn't room for it next to the nav), so without this, mobile and
   tablet visitors would lose the primary CTA entirely once the hamburger
   menu takes over. A persistent bottom bar is a mobile-specific decision,
   not the desktop layout compressed — desktop never sees this element.
   ========================================================================== */
.mobile-cta-bar{ display: none; }

@media (max-width: 1480px){
  .mobile-cta-bar{
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(251,244,232,0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(60,74,46,0.12);
    box-shadow: 0 -10px 24px -14px rgba(60,74,46,0.3);
  }
  .mobile-cta-bar .btn{ width: 100%; }
  body{ padding-bottom: 72px; }
}

@media (max-width: 1480px) and (prefers-reduced-motion: no-preference){
  .mobile-cta-bar{ animation: cta-bar-in 0.3s ease both; }
}
@keyframes cta-bar-in{
  from{ transform: translateY(100%); }
  to{ transform: translateY(0); }
}