/*!
 * Walnut Early Supports — Homepage template styles
 * Scoped to .walnut-home so it can never leak into the Elementor header/footer.
 *
 * NOTE: every selector below is prefixed. Do not add unprefixed/global rules here.
 */

/* ─── FONTS ─── */
@font-face {
  font-family: 'brandon';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://walnutearlysupports.com/wp-content/uploads/2022/09/Brandon-Grot-W01-Light.ttf') format('truetype');
}

/* ─── FULL-BLEED MAIN (neutralises Hello Elementor's content container) ─── */
#content.walnut-home-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ─── TOKENS + LOCAL RESET ─── */
.walnut-home {
  --blue:        #5AADD4;
  --blue-mid:    #3D8FB5;
  --blue-dark:   #1E5F7A;
  --blue-deep:   #163F52;
  --blue-pale:   #E8F5FB;
  --blue-light:  #C4E4F3;
  --green:       #7DC44E;
  --green-mid:   #5EA332;
  --green-dark:  #3A6B1E;
  --green-pale:  #EDF7E4;
  --green-light: #C9E9B0;
  --amber:       #D4821A;
  --amber-mid:   #B56A0C;
  --amber-pale:  #FDF0E0;
  --amber-light: #F5CEAB;
  --charcoal:    #1A1A1A;
  --mid:         #444;
  --muted:       #777;
  --border:      #E2EDE8;
  --cream:       #FAFAF7;
  --white:       #FFFFFF;
  --red:         #E14B4B;
  --red-dark:    #C23B3B;

  --ff-head:  'Fredoka One', 'Fredoka', Poppins, system-ui, sans-serif;
  --ff-body:  'brandon', 'Fredoka', Poppins, system-ui, sans-serif;
  --ff-sub:   'Fredoka', Poppins, system-ui, sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --section-v: 5.5rem;
  --section-h: 5%;

  /* Height of your sticky Elementor header. Tune this one value if anchor
     links land slightly under the header. */
  --wh-header-offset: 100px;

  /* Room reserved on the right for the fixed "For Speech Therapy" tab, which
     is vertically centred and floats over whichever section is mid-screen.
     Only applied on narrow screens — see the 640px block at the bottom, where
     the default 5% gutter is nowhere near enough to clear it. */
  --wh-tab-clear: 44px;

  font-family: var(--ff-body);
  background: var(--white);
  color: var(--charcoal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Safety net: nothing in this page may produce a page-level horizontal
     scrollbar. `clip` rather than `hidden` on purpose — hidden would force
     overflow-y to `auto` and turn this into a scroll container, which breaks
     position:sticky and can nest a second vertical scrollbar. The
     `hidden` line above it is the fallback for Safari < 16.
     The original HTML did this with body{overflow-x:hidden}, which we cannot
     use here without also constraining the Elementor header and footer. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* box-sizing is the one reset property the layout cannot afford to lose, so it
   gets a plain selector every engine parses — and it covers the widget too. */
.walnut-home,
.walnut-home *,
.walnut-home *::before,
.walnut-home *::after { box-sizing: border-box; }

/* The rules below carve out `.reviews-embed` — the Trustindex review widget
   ships its own stylesheet and a blanket `margin:0/padding:0/color:inherit`
   wipe would flatten it. `:not(:where(…))` is used rather than plain `:not(…)`
   on purpose: :where() contributes zero specificity, so these selectors weigh
   exactly what they did before the carve-out and nothing else in this file
   shifts in the cascade. */
.walnut-home *:not(:where(.reviews-embed *)),
.walnut-home *:not(:where(.reviews-embed *))::before,
.walnut-home *:not(:where(.reviews-embed *))::after { margin: 0; padding: 0; }

.walnut-home img:not(:where(.reviews-embed *)),
.walnut-home svg:not(:where(.reviews-embed *)) { display: block; max-width: 100%; }

.walnut-home a:not(:where(.reviews-embed *)) { text-decoration: none; color: inherit; }

.walnut-home button:not(:where(.reviews-embed *)) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  /* Themes and plugins routinely ship `button { white-space: nowrap }`. Every
     FAQ question sits inside a button, and without this a long one refuses to
     wrap — it runs off on a single line and pushes its chevron out of sight. */
  white-space: normal;
}

/* Anchor targets clear the sticky header */
.walnut-home [id] { scroll-margin-top: var(--wh-header-offset); }

/* Visually hidden but announced (Hello Elementor ships this too — repeated here
   so the template does not depend on the parent theme's version). */
.walnut-home .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ─── SCROLL REVEAL ─── */
.walnut-home .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.walnut-home .reveal.visible { opacity: 1; transform: none; }
.walnut-home .reveal-delay-1 { transition-delay: 0.1s; }
.walnut-home .reveal-delay-2 { transition-delay: 0.2s; }
.walnut-home .reveal-delay-3 { transition-delay: 0.3s; }
.walnut-home .reveal-delay-4 { transition-delay: 0.4s; }

/* icon pop-in on reveal */
@keyframes wh-icon-pop {
  0%   { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.walnut-home .reveal.visible .module-icon-wrap,
.walnut-home .reveal.visible .why-icon-wrap {
  animation: wh-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .walnut-home .reveal { opacity: 1; transform: none; transition: none; }
  .walnut-home * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ─── SIDE TAB (Affiliate Clinic) ─── */
.walnut-home .side-tab-right {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 350;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 10px;
  background: var(--red);
  color: white;
  font-family: var(--ff-sub);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translateY(-50%) rotate(180deg);
  transition: background 0.2s, padding 0.2s;
}
.walnut-home .side-tab-right:hover { background: var(--red-dark); padding-left: 14px; }
.walnut-home .side-tab-right svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .walnut-home .side-tab-right { font-size: 0.72rem; padding: 10px 8px; }
}

/* ─── ANNOUNCE BAR ─── */
.walnut-home .announce {
  background: var(--blue-dark);
  color: white;
  text-align: center;
  padding: 9px var(--section-h);
  font-family: var(--ff-sub);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
}
.walnut-home .announce a { color: var(--blue-light); text-decoration: underline; }
.walnut-home .announce strong { color: var(--amber-light); }

/* ─── HERO ─── */
.walnut-home .hero {
  background: var(--cream);
  padding: 5.5rem var(--section-h) 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.walnut-home .hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.walnut-home .hero-blob-1 {
  position: absolute; top: -120px; right: -80px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-light) 0%, transparent 68%);
  opacity: 0.5; pointer-events: none;
  animation: wh-blob-drift-1 18s ease-in-out infinite;
}
.walnut-home .hero-blob-2 {
  position: absolute; bottom: -80px; left: -60px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, var(--green-light) 0%, transparent 68%);
  opacity: 0.5; pointer-events: none;
  animation: wh-blob-drift-2 22s ease-in-out infinite;
}
@keyframes wh-blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-35px, 30px) scale(1.08); }
}
@keyframes wh-blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.06); }
}
.walnut-home .hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; border: 1.5px solid var(--border);
  color: var(--blue-dark);
  font-family: var(--ff-sub);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px; margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.walnut-home .badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: wh-pulse-dot 2.2s ease-in-out infinite;
}
@keyframes wh-pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.75); }
}
.walnut-home .hero-h1 {
  font-family: var(--ff-head);
  font-size: clamp(2.4rem, 4.5vw, 3.7rem);
  line-height: 1.12;
  color: var(--charcoal);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}
.walnut-home .hero-h1 .accent-blue { color: var(--blue-mid); }
.walnut-home .hero-h1 .accent-green { color: var(--green-mid); }
.walnut-home .hero-h1 .accent-amber { color: var(--amber); }
.walnut-home .hero-sub {
  font-family: var(--ff-body);
  font-size: 1.05rem; color: var(--mid);
  max-width: 600px;
  margin: 0 auto 2.25rem;
  line-height: 1.75;
}
.walnut-home .hero-ctas {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.walnut-home .btn-hero-main {
  font-family: var(--ff-sub); font-size: 1rem; font-weight: 700;
  background: var(--amber); color: white;
  border: none; padding: 0.82rem 2.2rem; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.walnut-home .btn-hero-main:hover { background: var(--amber-mid); color: white; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,130,26,0.3); }
.walnut-home .btn-hero-outline {
  font-family: var(--ff-sub); font-size: 1rem; font-weight: 600;
  background: white; color: var(--blue-dark);
  border: 1.5px solid var(--blue);
  padding: 0.8rem 2rem; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.walnut-home .btn-hero-outline:hover { border-color: var(--blue-dark); color: var(--blue-dark); transform: translateY(-2px); background: var(--blue-pale); }
.walnut-home .hero-trust {
  display: flex; gap: 1.75rem; flex-wrap: wrap;
  justify-content: center;
}
.walnut-home .trust-pill {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ff-sub);
  font-size: 0.8rem; color: var(--muted); font-weight: 500;
}
.walnut-home .trust-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-pale); border: 1.5px solid var(--green-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.walnut-home .trust-check svg { width: 10px; height: 10px; }

/* ─── STATS BAR ─── */
.walnut-home .stats-bar {
  background: var(--blue-dark);
  padding: 1.1rem var(--section-h);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.walnut-home .stat-block {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.4rem 2.8rem;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.walnut-home .stat-block:last-child { border-right: none; }
.walnut-home .stat-num {
  font-family: var(--ff-head);
  font-size: 1.75rem; color: white; line-height: 1;
}
.walnut-home .stat-num .stat-accent { color: var(--amber-light); }
.walnut-home .stat-lbl {
  font-family: var(--ff-sub);
  font-size: 0.72rem; color: rgba(255,255,255,0.58);
  margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ─── SECTION HELPERS ─── */
.walnut-home .section-eyebrow {
  font-family: var(--ff-sub);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 0.65rem;
  color: var(--green-mid);
}
.walnut-home .section-h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15; color: var(--charcoal); margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}
.walnut-home .section-lead {
  font-family: var(--ff-body);
  font-size: 1rem; color: var(--mid); max-width: 560px; margin: 0 auto; line-height: 1.75;
}
.walnut-home .section-header { text-align: center; margin-bottom: 3.5rem; }

/* ─── MODULES CAROUSEL ─── */
.walnut-home .modules-section {
  padding: var(--section-v) 0;
  background: white;
  overflow: hidden;
}
.walnut-home .modules-section .section-header { padding: 0 var(--section-h); max-width: 1400px; margin: 0 auto 3.5rem; }
.walnut-home .modules-track-wrap {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 1400px;
  padding: 0 var(--section-h);
}
.walnut-home .modules-track {
  display: flex;
  gap: 1.4rem;
  padding: 0.5rem 0 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.walnut-home .modules-track::-webkit-scrollbar { display: none; }
.walnut-home .module-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: white;
  border-radius: 20px;
  border: 2px solid var(--border);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
  display: flex; flex-direction: column;
  position: relative;
}
.walnut-home .module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.10);
  border-color: var(--mc);
}
.walnut-home .module-card-top {
  padding: 2rem 2rem 1.6rem;
  display: flex; flex-direction: column; align-items: flex-start;
  border-bottom: 2px solid var(--mb);
  background: var(--mb);
}
.walnut-home .module-icon-wrap {
  width: 80px; height: 80px;
  border-radius: 18px;
  background: white;
  border: 2.5px solid var(--mc);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.walnut-home .module-card:hover .module-icon-wrap {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.walnut-home .module-icon-wrap svg { width: 46px; height: 46px; }
.walnut-home .module-num {
  font-family: var(--ff-sub);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mc);
  background: white; border: 1.5px solid var(--mc);
  padding: 3px 11px; border-radius: 100px;
  margin-bottom: 0.9rem;
}
.walnut-home .module-name {
  font-family: var(--ff-head);
  font-size: 1.35rem; color: var(--charcoal); line-height: 1.2;
  margin-bottom: 0;
}
.walnut-home .module-card-body { padding: 1.5rem 2rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.walnut-home .module-desc {
  font-family: var(--ff-body);
  font-size: 0.87rem; color: var(--mid); line-height: 1.75;
  margin-bottom: 1.4rem; flex: 1;
}
.walnut-home .module-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.5rem;
}
.walnut-home .module-tag {
  font-family: var(--ff-sub);
  font-size: 0.68rem; font-weight: 600; color: var(--mc);
  background: var(--mb); border: 1.5px solid var(--mc);
  padding: 3px 11px; border-radius: 100px;
  opacity: 0.85;
}
.walnut-home .btn-module {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-sub); font-size: 0.86rem; font-weight: 700;
  background: var(--mc); color: white;
  padding: 0.7rem 1.4rem; border-radius: 10px;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s; width: 100%; justify-content: center;
}
.walnut-home .btn-module:hover { opacity: 0.88; color: white; transform: translateY(-1px); }
/* carousel nav */
.walnut-home .modules-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; padding: 0 var(--section-h);
  margin-top: 0.5rem;
}
.walnut-home .modules-nav-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: white; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.walnut-home .modules-nav-btn:hover { background: var(--green-pale); border-color: var(--green-light); }
.walnut-home .modules-nav-btn svg { width: 18px; height: 18px; stroke: var(--charcoal); fill: none; }
.walnut-home .modules-dots { display: flex; gap: 7px; }
.walnut-home .modules-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  border: none; padding: 0; transition: all 0.3s;
}
.walnut-home .modules-dot.active {
  background: var(--green-mid); width: 24px; border-radius: 4px;
}
.walnut-home .modules-dot:hover { background: var(--green-light); }
.walnut-home .same-library-note {
  text-align: center; margin-top: 2.5rem; padding: 0 var(--section-h);
  font-family: var(--ff-sub);
  font-size: 0.8rem; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.walnut-home .same-library-note::before,
.walnut-home .same-library-note::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--border); }

/* ─── WHY WALNUT ─── */
.walnut-home .why-section { background: var(--cream); padding: var(--section-v) var(--section-h); }
.walnut-home .why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-top: 2.5rem;
}
.walnut-home .why-card {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: 1.75rem;
  display: flex; gap: 1.1rem; align-items: flex-start;
  transition: box-shadow 0.25s, transform 0.25s;
}
.walnut-home .why-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08); transform: translateY(-3px); }
.walnut-home .why-card.wide { grid-column: 1 / -1; }
.walnut-home .why-card.wide.cta-card {
  background: var(--blue-dark); border-color: var(--blue-dark);
  align-items: center; gap: 2.5rem; padding: 2.4rem;
  flex-wrap: wrap;
}
.walnut-home .why-icon-wrap {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.walnut-home .why-card:hover .why-icon-wrap { transform: scale(1.1) rotate(-6deg); }
.walnut-home .why-icon-wrap svg { width: 26px; height: 26px; }
.walnut-home .bg-green-pale  { background: var(--green-pale); }
.walnut-home .bg-blue-pale   { background: var(--blue-pale); }
.walnut-home .bg-amber-pale  { background: var(--amber-pale); }
.walnut-home .bg-blue-faint  { background: rgba(255,255,255,0.12); }
.walnut-home .why-text h4 {
  font-family: var(--ff-head);
  font-weight: 400; font-size: 1rem; color: var(--charcoal); margin-bottom: 0.35rem;
}
.walnut-home .why-card.cta-card .why-text h4 { color: white; font-size: 1.4rem; }
.walnut-home .why-text p {
  font-family: var(--ff-body);
  font-size: 0.85rem; color: var(--mid); line-height: 1.68;
}
.walnut-home .why-card.cta-card .why-text p { color: rgba(255,255,255,0.7); font-size: 0.94rem; max-width: 460px; }
.walnut-home .btn-why-cta {
  font-family: var(--ff-sub); font-size: 0.9rem; font-weight: 700;
  background: var(--amber); color: white;
  border: none; padding: 0.75rem 2rem; border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: all 0.2s; margin-left: auto;
}
.walnut-home .btn-why-cta:hover { background: var(--amber-mid); color: white; transform: translateY(-1px); }

/* ─── CREDIBILITY ─── */
.walnut-home .cred-section { background: var(--blue-dark); padding: var(--section-v) var(--section-h); }
.walnut-home .cred-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.walnut-home .cred-eyebrow {
  font-family: var(--ff-sub);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--green-light); margin-bottom: 0.75rem;
}
.walnut-home .cred-h2 {
  font-family: var(--ff-sub);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem); color: rgba(255,255,255,0.94);
  margin-bottom: 1rem; line-height: 1.38; letter-spacing: -0.01em;
}
.walnut-home .cred-lead {
  font-family: var(--ff-body);
  font-size: 0.95rem; color: rgba(255,255,255,0.8);
  line-height: 1.72; margin-bottom: 1.75rem; max-width: 420px;
}
.walnut-home .cred-quote {
  background: rgba(125,196,78,0.12); border-left: 3px solid var(--green);
  padding: 1.25rem 1.5rem; border-radius: 0 11px 11px 0;
}
.walnut-home .cred-quote p {
  font-family: var(--ff-head);
  font-style: normal; font-size: 1.05rem; color: white; line-height: 1.65;
  font-weight: 400;
}
.walnut-home .cred-quote cite {
  display: block; margin-top: 0.65rem;
  font-family: var(--ff-sub);
  font-size: 0.75rem; color: var(--green-light); font-style: normal;
}

/* ─── APPROACH VISUAL ─── */
@keyframes wh-ap-card-enter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.walnut-home .approach-infographic {
  display: flex; align-items: flex-start; justify-content: center;
  align-self: stretch;
}
.walnut-home .approach-visual {
  display: flex; flex-direction: column; gap: 1.1rem;
  width: 100%; max-width: 460px;
}
.walnut-home .approach-hub {
  width: 100%;
  background: white; border-radius: 20px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; align-items: flex-start;
  animation: wh-ap-card-enter 0.55s ease both;
}
.walnut-home .hub-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.8rem;
}
.walnut-home .hub-icon svg { width: 22px; height: 22px; }
.walnut-home .hub-num {
  font-family: var(--ff-head); font-size: 2.6rem; line-height: 1;
  color: var(--blue-dark); margin-bottom: 0.3rem;
}
.walnut-home .hub-lbl {
  font-family: var(--ff-sub); font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
}
.walnut-home .hub-divider { width: 100%; height: 1px; background: var(--border); margin: 1rem 0; }
.walnut-home .hub-mini { display: flex; align-items: center; gap: 1rem; width: 100%; }
.walnut-home .hub-mini-item { display: flex; flex-direction: column; gap: 0.15rem; }
.walnut-home .hub-mini-item strong {
  font-family: var(--ff-head); font-size: 1.25rem; color: var(--charcoal); line-height: 1;
}
.walnut-home .hub-mini-item span {
  font-family: var(--ff-sub); font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.walnut-home .hub-mini-sep { width: 1px; height: 24px; background: var(--border); }
.walnut-home .ap-badges-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
}
.walnut-home .ap-badge {
  background: white; border-radius: 16px;
  padding: 1rem 1rem 0.9rem;
  box-shadow: 0 6px 22px rgba(0,0,0,0.11);
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: wh-ap-card-enter 0.55s ease both;
}
.walnut-home .ap-badge:nth-child(1) { animation-delay: 0.1s; }
.walnut-home .ap-badge:nth-child(2) { animation-delay: 0.18s; }
.walnut-home .ap-badge:nth-child(3) { animation-delay: 0.26s; }
.walnut-home .ap-badge:nth-child(4) { animation-delay: 0.34s; }
.walnut-home .ap-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 0 0 2px var(--pc);
}
.walnut-home .ap-badge-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pc-bg);
}
.walnut-home .ap-badge-icon svg { width: 20px; height: 20px; }
.walnut-home .ap-badge-title {
  font-family: var(--ff-sub); font-size: 0.78rem; font-weight: 600;
  color: var(--charcoal); line-height: 1.35;
}
.walnut-home .ap-badge-tag {
  font-family: var(--ff-sub); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--pc); line-height: 1;
}

/* ─── GOOGLE REVIEWS (Trustindex widget) ─── */
/* Only the frame is styled here. The widget's own stylesheet owns everything
   from .ti-widget inwards — see the reset carve-out at the top of this file. */
.walnut-home .reviews-section {
  background: white;
  padding: var(--section-v) var(--section-h);
  overflow-x: hidden;
  overflow-x: clip;
}
.walnut-home .reviews-section .section-header { margin-bottom: 2.75rem; }
.walnut-home .reviews-embed {
  max-width: 1240px;
  margin: 0 auto;
}
/* Trustindex renders a horizontal slider on wide screens; keep any overshoot
   contained rather than letting it widen the page. */
.walnut-home .reviews-embed .ti-widget { max-width: 100%; }

/* ─── GAMES CAROUSEL ─── */
/* The games track scrolls horizontally inside itself, so its off-screen cards
   must be clipped by the section — exactly what .modules-section already does
   for the modules track. Without this the cards leak into the page's scroll
   width and produce a horizontal scrollbar. */
.walnut-home .games-section {
  background: var(--cream);
  padding: var(--section-v) var(--section-h);
  overflow-x: hidden;
  overflow-x: clip;
}
.walnut-home .carousel-wrapper { position: relative; }
.walnut-home .carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.walnut-home .carousel-track::-webkit-scrollbar { display: none; }
.walnut-home .game-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  background: white;
  border: 1.5px solid var(--border);
  overflow: hidden;
  transition: transform 0.28s, box-shadow 0.28s;
}
.walnut-home .game-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,0.1); }
.walnut-home .game-thumb {
  width: 100%; height: 188px;
  object-fit: cover; display: block;
  background: var(--blue-pale);
}
.walnut-home .game-info { padding: 1.2rem 1.3rem 1.4rem; }
.walnut-home .game-badges { display: flex; gap: 0.4rem; margin-bottom: 0.65rem; flex-wrap: wrap; }
.walnut-home .game-badge {
  font-family: var(--ff-sub);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 3px 9px; border-radius: 100px;
}
.walnut-home .badge-age { background: var(--green-pale); color: var(--green-dark); border: 1px solid var(--green-light); }
.walnut-home .badge-skill { background: var(--blue-pale); color: var(--blue-dark); border: 1px solid var(--blue-light); }
.walnut-home .game-name {
  font-family: var(--ff-head);
  font-size: 1.05rem; color: var(--charcoal); margin-bottom: 0.3rem;
  font-weight: 400;
}
.walnut-home .game-desc {
  font-family: var(--ff-body);
  font-size: 0.8rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.9rem;
}
.walnut-home .btn-play {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-sub); font-size: 0.82rem; font-weight: 700;
  background: var(--blue-dark); color: white;
  border: none; padding: 0.5rem 1.1rem; border-radius: 7px;
  cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.walnut-home .btn-play:hover { background: var(--blue-mid); color: white; }
.walnut-home .carousel-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 0.75rem; margin-top: 1.8rem;
}
.walnut-home .car-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: white; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  color: var(--mid);
}
.walnut-home .car-btn:hover { background: var(--blue-dark); color: white; border-color: var(--blue-dark); }
.walnut-home .car-btn svg { width: 18px; height: 18px; }

/* ─── THERAPY RESOURCES (long-form content) ─── */
/* This block carries a lot of copy, so the layout does the heavy lifting:
   short measures, one idea per card, and plenty of air between groups. */
.walnut-home .resources-section {
  background: white;
  padding: var(--section-v) var(--section-h);
}
.walnut-home .res-wrap { max-width: 1180px; margin: 0 auto; }
.walnut-home .resources-section .section-header { margin-bottom: 2.5rem; }
.walnut-home .res-block { margin-top: 4.5rem; }
.walnut-home .res-block-head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.walnut-home .res-block-head .section-lead { max-width: 680px; }

.walnut-home .res-h3 {
  font-family: var(--ff-head);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.22; color: var(--charcoal);
  letter-spacing: -0.01em; margin-bottom: 0.85rem;
}
.walnut-home .res-h3-center { text-align: center; }

/* Opening: the two paths */
.walnut-home .paths-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1rem; align-items: stretch;
  max-width: 900px; margin: 0 auto;
}
.walnut-home .path-card {
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.walnut-home .path-wait { background: var(--cream); border: 1.5px dashed #D8D8D0; }
.walnut-home .path-go { background: var(--green-pale); border: 1.5px solid var(--green-light); }
.walnut-home .path-tag {
  font-family: var(--ff-sub);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em;
}
.walnut-home .path-wait .path-tag { color: var(--muted); }
.walnut-home .path-go .path-tag { color: var(--green-mid); }
.walnut-home .path-card p { font-family: var(--ff-body); font-size: 0.92rem; line-height: 1.7; }
.walnut-home .path-wait p { color: var(--muted); }
.walnut-home .path-go p { color: var(--charcoal); }
.walnut-home .path-or {
  align-self: center; justify-self: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: white; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-sub);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.walnut-home .res-statement {
  max-width: 800px; margin: 2.1rem auto 0; text-align: center;
  font-family: var(--ff-sub);
  font-size: 1.02rem; font-weight: 500; line-height: 1.72; color: var(--charcoal);
}

/* What is Walnut Early Supports */
.walnut-home .res-split {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem; align-items: start; margin-top: 4.5rem;
}
.walnut-home .res-lead {
  font-family: var(--ff-body);
  font-size: 1.02rem; color: var(--mid); line-height: 1.78;
}
.walnut-home .res-points { list-style: none; display: flex; flex-direction: column; gap: 1.15rem; }
.walnut-home .res-point { display: flex; gap: 0.9rem; align-items: flex-start; }
.walnut-home .res-point-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--green-pale); color: var(--green-mid);
  display: flex; align-items: center; justify-content: center;
}
.walnut-home .res-point:nth-child(2) .res-point-ico { background: var(--blue-pale); color: var(--blue-mid); }
.walnut-home .res-point:nth-child(3) .res-point-ico { background: var(--amber-pale); color: var(--amber-mid); }
.walnut-home .res-point-ico svg { width: 19px; height: 19px; }
.walnut-home .res-point p { font-family: var(--ff-body); font-size: 0.88rem; color: var(--mid); line-height: 1.72; }

/* Card grids */
.walnut-home .res-cards { display: grid; gap: 1.1rem; }
.walnut-home .res-cards-3 { grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.walnut-home .res-cards-areas { grid-template-columns: repeat(3, 1fr); }
.walnut-home .res-cards-2 { grid-template-columns: repeat(2, 1fr); margin-top: 1.1rem; }
.walnut-home .res-card-wide { grid-column: span 2; }

.walnut-home .res-card {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.walnut-home .res-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.07);
  border-color: var(--rc);
}
.walnut-home .res-card-sm { padding: 1.4rem 1.4rem 1.5rem; }
.walnut-home .res-card-plain { background: var(--cream); }
.walnut-home .res-card-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--rc-bg); color: var(--rc);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.4rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.walnut-home .res-card:hover .res-card-ico { transform: scale(1.08) rotate(-6deg); }
.walnut-home .res-card-ico svg { width: 22px; height: 22px; }
.walnut-home .res-card-title {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 1.02rem; line-height: 1.3; color: var(--charcoal);
}
.walnut-home .res-card-title-lg { font-size: 1.15rem; }
.walnut-home .res-card p { font-family: var(--ff-body); font-size: 0.85rem; color: var(--mid); line-height: 1.72; }

/* Why structure matters */
.walnut-home .res-highlight {
  margin-top: 4.5rem;
  background: var(--blue-dark);
  border-radius: 22px;
  padding: 2.8rem 3rem;
  position: relative; overflow: hidden;
}
.walnut-home .res-highlight::before {
  content: ""; position: absolute; top: -90px; right: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(125,196,78,0.22) 0%, transparent 68%);
  pointer-events: none;
}
.walnut-home .res-highlight-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,0.12); color: white;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; position: relative; z-index: 1;
}
.walnut-home .res-highlight-ico svg { width: 26px; height: 26px; }
.walnut-home .res-highlight .res-h3 { color: white; position: relative; z-index: 1; }
.walnut-home .res-highlight p {
  font-family: var(--ff-body);
  font-size: 0.97rem; color: rgba(255,255,255,0.78); line-height: 1.8;
  max-width: 860px; position: relative; z-index: 1;
}

/* Closing statement */
.walnut-home .res-closing { background: white; padding: 4rem var(--section-h) 4.5rem; }
.walnut-home .res-closing-inner {
  max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.walnut-home .res-closing-rule {
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--green); margin-bottom: 1.3rem;
}
.walnut-home .res-closing h3 {
  font-family: var(--ff-head);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.22; color: var(--charcoal);
  margin-bottom: 0.9rem; letter-spacing: -0.01em;
}
.walnut-home .res-closing p {
  font-family: var(--ff-body);
  font-size: 0.98rem; color: var(--mid); line-height: 1.8;
}

/* ─── FAQ ACCORDION ─── */
.walnut-home .faq-section { background: var(--green-pale); padding: var(--section-v) var(--section-h); }
.walnut-home .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; align-items: start; }
.walnut-home .faq-item {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow 0.25s;
}
.walnut-home .faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.walnut-home .faq-item.open { border-color: var(--green-light); }
/* The question heading only exists to give the accordion a document outline —
   the button inside it carries all the styling. */
.walnut-home .faq-item > h3 { margin: 0; font: inherit; }
.walnut-home .faq-q-btn {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--ff-sub);
  font-size: 0.92rem; font-weight: 600; color: var(--charcoal);
  transition: color 0.2s;
  white-space: normal;
}
/* The question is wrapped in its own span so it can be told to shrink.
   min-width:0 overrides the flex default (min-width:auto), which otherwise
   refuses to let the text narrow past its longest word — that is what pushes
   the chevron off the card on a narrow screen. */
.walnut-home .faq-q-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
.walnut-home .faq-item.open .faq-q-btn { color: var(--blue-dark); }
.walnut-home .faq-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--muted);
}
.walnut-home .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--blue-dark); }
/* Grid-rows collapse rather than a fixed max-height, so long answers are never
   clipped. visibility keeps a closed answer out of the accessibility tree. */
.walnut-home .faq-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.walnut-home .faq-item.open .faq-body { grid-template-rows: 1fr; }
.walnut-home .faq-body > .faq-body-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.35s;
}
.walnut-home .faq-item.open .faq-body > .faq-body-inner { visibility: visible; }
.walnut-home .faq-body-inner {
  font-family: var(--ff-body);
  font-size: 0.84rem; color: var(--mid); line-height: 1.7;
}
.walnut-home .faq-body-inner > p { padding: 0 1.5rem 1.3rem; }
.walnut-home .faq-body-inner a { color: var(--blue-mid); text-decoration: underline; }

/* ─── FINAL CTA ─── */
.walnut-home .final-cta {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-deep) 100%);
  padding: 6rem var(--section-h); text-align: center;
}
.walnut-home .final-cta .section-eyebrow { color: var(--blue-light); }
.walnut-home .final-cta .section-h2 { color: white; max-width: 620px; margin: 0 auto 1rem; }
.walnut-home .final-cta .section-lead { color: rgba(255,255,255,0.68); max-width: 500px; margin: 0 auto 2.5rem; }
.walnut-home .final-cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.walnut-home .btn-final-amber {
  font-family: var(--ff-sub); font-size: 1rem; font-weight: 700;
  background: var(--amber); color: white;
  border: none; padding: 0.9rem 2.6rem; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.walnut-home .btn-final-amber:hover { background: var(--amber-mid); color: white; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,130,26,0.35); }
.walnut-home .btn-final-ghost {
  font-family: var(--ff-sub); font-size: 1rem; font-weight: 600;
  background: rgba(255,255,255,0.1); color: white;
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 0.88rem 2.2rem; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; transition: all 0.25s;
}
.walnut-home .btn-final-ghost:hover { background: rgba(255,255,255,0.2); color: white; transform: translateY(-2px); }
.walnut-home .final-note {
  margin-top: 1.75rem;
  font-family: var(--ff-sub); font-size: 0.8rem; color: rgba(255,255,255,0.42);
}
.walnut-home .final-note a { color: var(--blue-light); }

/* ─── AUDIENCE LANES ─── */
.walnut-home .lanes-section { background: white; padding: var(--section-v) var(--section-h); }
.walnut-home .lanes-header { text-align: center; max-width: 680px; margin: 0 auto 3.5rem; }
.walnut-home .lanes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; max-width: 1320px; margin: 0 auto;
}
.walnut-home .lane-card {
  display: flex; flex-direction: column;
  background: white; border: 2px solid var(--border);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}
.walnut-home .lane-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.10);
  border-color: var(--lc);
}
.walnut-home .lane-header {
  padding: 1.9rem 1.8rem 1.5rem;
  background: var(--lb);
  border-bottom: 2px solid var(--lb-line);
}
.walnut-home .lane-icon {
  width: 56px; height: 56px; border-radius: 15px;
  background: white; border: 2px solid var(--lc);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--lc);
}
.walnut-home .lane-card:hover .lane-icon { transform: scale(1.1) rotate(-6deg); }
.walnut-home .lane-icon svg { width: 30px; height: 30px; display: block; }
.walnut-home .lane-icon svg .f { fill: var(--lb); }
.walnut-home .lane-tag {
  display: inline-block;
  font-family: var(--ff-sub);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--lc);
  background: white; border: 1.5px solid var(--lc);
  padding: 3px 11px; border-radius: 100px; margin-bottom: 0.9rem;
}
.walnut-home .lane-title {
  font-family: var(--ff-head);
  font-size: 1.3rem; line-height: 1.2; color: var(--charcoal);
  margin-bottom: 0.4rem;
}
.walnut-home .lane-subtitle {
  font-family: var(--ff-sub);
  font-size: 0.78rem; color: var(--muted); font-weight: 500;
}
.walnut-home .lane-body { padding: 1.5rem 1.8rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.walnut-home .lane-desc {
  font-family: var(--ff-body);
  font-size: 0.86rem; color: var(--mid); line-height: 1.72; margin-bottom: 1.3rem;
}
.walnut-home .lane-for-label,
.walnut-home .lane-modules-label {
  font-family: var(--ff-sub);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); margin-bottom: 0.6rem;
}
.walnut-home .lane-for-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.4rem; }
.walnut-home .lane-for-pill {
  font-family: var(--ff-sub);
  font-size: 0.68rem; font-weight: 600; color: var(--lc);
  background: var(--lb); border: 1.5px solid var(--lb-line);
  padding: 3px 10px; border-radius: 100px;
}
.walnut-home .lane-modules { margin-bottom: 1.6rem; }
.walnut-home .lane-module-row {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ff-body);
  font-size: 0.82rem; color: var(--mid); padding: 4px 0;
}
.walnut-home .lane-module-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lc); flex-shrink: 0;
}
.walnut-home .btn-lane {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-sub); font-size: 0.86rem; font-weight: 700;
  background: var(--lc); color: white;
  padding: 0.72rem 1.4rem; border-radius: 10px;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s; width: 100%;
}
.walnut-home .btn-lane:hover { opacity: 0.9; color: white; transform: translateY(-1px); }
.walnut-home .same-lanes-note {
  text-align: center; margin-top: 2.5rem;
  font-family: var(--ff-sub);
  font-size: 0.8rem; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.walnut-home .same-lanes-note::before,
.walnut-home .same-lanes-note::after { content: ""; flex: 1; max-width: 160px; height: 1px; background: var(--border); }

/* ─── RECOGNITION (DEPUTY CM) ─── */
.walnut-home .recognition-section { background: var(--cream); padding: var(--section-v) var(--section-h); }
.walnut-home .recognition-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem;
  align-items: center; max-width: 1200px; margin: 0 auto;
}
.walnut-home .recognition-eyebrow {
  font-family: var(--ff-sub);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--amber); margin-bottom: 0.75rem;
}
.walnut-home .recognition-h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.18;
  color: var(--charcoal); margin-bottom: 1rem; letter-spacing: -0.01em;
}
.walnut-home .recognition-lead {
  font-family: var(--ff-body);
  font-size: 0.95rem; color: var(--mid); line-height: 1.72;
  margin-bottom: 1.75rem; max-width: 460px;
}
.walnut-home .recognition-quote {
  background: white; border-left: 3px solid var(--amber);
  padding: 1.3rem 1.5rem; border-radius: 0 12px 12px 0;
  box-shadow: 0 6px 22px rgba(0,0,0,0.05);
}
.walnut-home .recognition-quote p {
  font-family: var(--ff-head); font-weight: 400;
  font-size: 1.02rem; color: var(--charcoal); line-height: 1.6;
}
.walnut-home .recognition-quote cite {
  display: block; margin-top: 0.7rem;
  font-family: var(--ff-sub); font-size: 0.75rem;
  color: var(--amber-mid); font-style: normal;
}
.walnut-home .recognition-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.walnut-home .recognition-photo {
  border-radius: 14px; overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--blue-pale);
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.walnut-home .recognition-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.walnut-home .recognition-photo:hover img { transform: scale(1.05); }

/* ─── INSTITUTIONAL CTA ─── */
.walnut-home .institutional-section { background: var(--cream); padding: var(--section-v) var(--section-h); }

/* .games-section is cream too, so the two sections merge into one continuous
   band and their paddings STACK: 88px + 88px = 176px of cream above the card,
   against only 88px below it (the FAQ's green starts right after). The card
   reads as pushed down. Collapsing the seam gives an even 88px on both sides.
   Only this pair needs it — every other section boundary has a colour change
   that visually splits the two paddings. */
.walnut-home .games-section + .institutional-section { padding-top: 0; }
.walnut-home .institutional-card {
  max-width: 880px; margin: 0 auto;
  background: var(--blue-dark); border-radius: 24px;
  padding: 3.2rem 3rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  position: relative; overflow: hidden;
}
.walnut-home .institutional-card::before {
  content: ""; position: absolute; top: -90px; right: -70px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(125,196,78,0.22) 0%, transparent 68%);
  pointer-events: none;
}
.walnut-home .institutional-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.3rem; position: relative; z-index: 1;
}
.walnut-home .institutional-icon svg { width: 30px; height: 30px; }
.walnut-home .institutional-card h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2;
  color: white; margin-bottom: 0.8rem; max-width: 600px;
  position: relative; z-index: 1;
}
.walnut-home .institutional-card p {
  font-family: var(--ff-body); font-size: 0.98rem;
  color: rgba(255,255,255,0.74); max-width: 500px; margin-bottom: 1.9rem;
  position: relative; z-index: 1;
}
.walnut-home .btn-institutional {
  font-family: var(--ff-sub); font-size: 1rem; font-weight: 700;
  background: var(--amber); color: white; border: none;
  padding: 0.85rem 2.4rem; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.walnut-home .btn-institutional:hover { background: var(--amber-mid); color: white; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,130,26,0.3); }

/* ─── CREDIBILITY STRIP ─── */
.walnut-home .cred-strip {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 1.9rem var(--section-h);
  text-align: center;
}
.walnut-home .cred-strip-eyebrow {
  font-family: var(--ff-sub);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted);
  margin-bottom: 1.15rem;
}
.walnut-home .cred-strip-items {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1.3rem 2.4rem;
  max-width: 1140px; margin: 0 auto;
}
.walnut-home .cred-strip-item { display: flex; align-items: center; gap: 0.9rem; }
.walnut-home .cred-strip-logo {
  width: 62px; height: 62px; border-radius: 13px;
  background: white; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.walnut-home .cred-strip-item:hover .cred-strip-logo { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
.walnut-home .cred-strip-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.walnut-home .cred-strip-text { text-align: left; display: flex; flex-direction: column; gap: 3px; }
.walnut-home .cred-strip-rel {
  font-family: var(--ff-sub); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--blue-mid);
}
.walnut-home .cred-strip-name {
  font-family: var(--ff-head); font-size: 0.95rem; color: var(--charcoal);
  line-height: 1.22; font-weight: 400;
}
.walnut-home .cred-strip-divider { width: 1px; height: 44px; background: var(--border); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .walnut-home .hero { padding-top: 3.5rem; }
  .walnut-home .lanes-grid { grid-template-columns: 1fr; max-width: 540px; }
  .walnut-home .recognition-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .walnut-home .why-grid { grid-template-columns: 1fr; }
  .walnut-home .why-card.wide { grid-column: 1; }
  .walnut-home .cred-inner { grid-template-columns: 1fr; gap: 3rem; }
  .walnut-home .faq-grid { grid-template-columns: 1fr; }
  .walnut-home .res-split { grid-template-columns: 1fr; gap: 2rem; }
  .walnut-home .res-cards-3 { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
  .walnut-home .res-cards-2 { grid-template-columns: 1fr; }
  /* Two columns: the wide card drops back to one so auto-placement doesn't
     leave a hole beside the card before it. */
  .walnut-home .res-cards-areas { grid-template-columns: 1fr 1fr; }
  .walnut-home .res-card-wide { grid-column: span 1; }
  .walnut-home .res-highlight { padding: 2.4rem 2rem; }
}
@media (max-width: 640px) {
  .walnut-home .hero { padding: 2rem 4% 3rem; }
  .walnut-home .stats-bar { flex-direction: column; gap: 0.5rem; }
  .walnut-home .stat-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 0.5rem 0; width: 100%; }
  .walnut-home .stat-block:last-child { border-bottom: none; }
  .walnut-home .final-cta-btns { flex-direction: column; align-items: center; }
  .walnut-home .why-card.wide.cta-card { flex-direction: column; }
  .walnut-home .btn-why-cta { margin-left: 0; }
  .walnut-home .approach-hub { padding: 1.1rem 1.15rem; }
  .walnut-home .hub-num { font-size: 2.1rem; }
  .walnut-home .ap-badges-grid { gap: 0.65rem; }
  .walnut-home .ap-badge { padding: 0.8rem; }
  .walnut-home .ap-badge-title { font-size: 0.72rem; }
  .walnut-home .ap-badge-tag { font-size: 0.55rem; }
  .walnut-home .institutional-card { padding: 2.2rem 1.5rem; }
  .walnut-home .cred-strip-divider { display: none; }
  .walnut-home .cred-strip-items { gap: 1.1rem; }
  .walnut-home .cred-strip-item { width: 100%; max-width: 300px; }
  .walnut-home .paths-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .walnut-home .res-cards-areas { grid-template-columns: 1fr; }
  .walnut-home .res-card-wide { grid-column: span 1; }
  .walnut-home .res-highlight { padding: 2rem 1.4rem; border-radius: 18px; }
  .walnut-home .res-block,
  .walnut-home .res-split,
  .walnut-home .res-highlight { margin-top: 3.25rem; }

  /* Tighter FAQ rows so a wrapped question still reads as one tidy block. */
  .walnut-home .faq-q-btn { padding: 1.05rem 1.1rem; font-size: 0.87rem; gap: 0.7rem; }
  .walnut-home .faq-chevron { width: 18px; height: 18px; }
  .walnut-home .faq-body-inner > p { padding: 0 1.1rem 1.1rem; }

  /* ── Clearance for the fixed affiliate tab ──
     The tab is pinned to the right edge at top:50%, so it sits over whichever
     section happens to be mid-screen. Every boxed section gets the extra right
     gutter so nothing ever lands underneath it.
     .modules-section and .games-section are deliberately excluded — their
     tracks scroll horizontally and are meant to bleed to the edge. */
  .walnut-home .faq-section{ padding-right: var(--wh-tab-clear); }
}