/* Little Tyvy Montessori - homepage
   Hand-authored. Scoped under .ty-page so nothing here leaks into the rest of the site. */

/* Fonts are loaded from the page markup (preconnect + stylesheet link). */

.ty-page {
  --cream: #fbf8f3;
  --cream-2: #f2eee5;
  --cream-3: #ede7db;
  --white: #fff;
  --ink: #2c2c27;
  --ink-2: #45443d;
  --body: #6f6b62;
  --muted: #8d887d;
  --green: #5a6b47;
  --green-dk: #4a5a3a;
  --gold: #ab8850;
  --line: #e5ded1;
  --line-2: #efe9de;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 40px;
  --hdr: 84px;

  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip (not hidden) avoids the implicit overflow-y:auto pairing that breaks position:sticky on .ty-header */
}

/* --- reset, kept inside .ty-page ---
   Only the margin reset uses :where(): at normal specificity it out-ranked the
   component margins below and silently flattened the page's vertical rhythm.
   Everything else stays at real specificity so the parent theme cannot win. */
.ty-page *, .ty-page *::before, .ty-page *::after { box-sizing: border-box; }
.ty-page img, .ty-page svg { display: block; max-width: 100%; }
.ty-page img { height: auto; }
:where(.ty-page) :where(h1, h2, h3, h4, p, ul, figure, address) { margin: 0; }
.ty-page ul { list-style: none; padding: 0; }
/* the parent theme sets a left margin on every ul; pin the horizontal side only,
   so the vertical margins above stay under the components' control. */
.ty-page ul { margin-left: 0; margin-right: 0; }
.ty-page a, .ty-page a:hover, .ty-page a:focus, .ty-page a:active { text-decoration: none; }
.ty-page a { color: inherit; }
.ty-page button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ty-page :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.ty-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* visually hidden, still announced by screen readers */
.ty-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ty-page h1, .ty-page h2, .ty-page h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.14;
}

.ty-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.ty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  white-space: nowrap;
}
/* icon inside any pill button: sized here (not per-page) so it renders at the
   correct size on every page, on desktop, tablet and mobile alike, regardless
   of which optional stylesheet a given page happens to load */
.ty-btn svg { width: 16px; height: 16px; flex: none; }
.ty-page .ty-btn--primary { background: var(--green); color: #fff; }
.ty-page .ty-btn--primary:hover,
.ty-page .ty-btn--primary:focus { background: var(--green-dk); color: #fff; }
.ty-page .ty-btn--ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.ty-page .ty-btn--ghost:hover,
.ty-page .ty-btn--ghost:focus { border-color: var(--green); color: var(--green); }
.ty-page .ty-btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- header */
.ty-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  isolation: isolate;
}
.ty-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 248, 243, .88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.ty-header.is-stuck::before { border-bottom-color: var(--line-2); }
.ty-header__inner {
  height: var(--hdr);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
}

.ty-logo { display: flex; align-items: center; gap: 11px; margin-right: auto; flex: none; }
.ty-page .ty-logo__img { display: block; height: 60px; width: auto; flex: none; }
.ty-logo__name {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.17em;
  color: var(--ink);
}
.ty-logo__sub {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.ty-nav { display: flex; align-items: center; gap: 34px; }
.ty-nav a {
  position: relative;
  font-size: 14px;
  color: var(--ink-2);
  padding: 6px 0;
  transition: color .2s ease;
}
.ty-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s ease;
}
.ty-nav a:hover { color: var(--green); }
.ty-nav a:hover::after { transform: scaleX(1); }

.ty-header__cta { margin-left: 6px; height: 44px; padding: 0 24px; flex: none; }

.ty-burger { display: none; flex-direction: column; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none; box-shadow: none; border-radius: 6px; }
.ty-burger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.ty-burger span + span { margin-top: 5px; }
.ty-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ty-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ty-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.ty-hero {
  position: relative;
  background: linear-gradient(168deg, #fdfbf8 0%, #faf6ef 55%, #f7f1e7 100%);
  overflow: hidden;
}
.ty-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: 56px;
  padding-top: 74px;
  padding-bottom: 74px;
  padding-right: 0; /* restored below 981px, see the tablet block */
  position: relative;
  z-index: 2;
}
.ty-hero__copy { max-width: 470px; }
.ty-hero__copy .ty-eyebrow { margin-bottom: 20px; }
.ty-hero h1 { font-size: clamp(44px, 5.1vw, 66px); line-height: 1.08; }
.ty-lead {
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--body);
  max-width: 380px;
}
.ty-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.ty-trust { display: flex; align-items: center; gap: 14px; margin-top: 44px; }
.ty-trust__avatars { display: flex; }
.ty-trust__avatars img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cream);
  background: var(--cream-2);
}
.ty-trust__avatars img + img { margin-left: -11px; }
.ty-trust__text { font-size: 12.5px; line-height: 1.5; color: var(--body); }

.ty-hero__media { position: relative; }
.ty-hero__media img {
  width: 100%;
  aspect-ratio: 1.1 / 1;
  object-fit: cover;
  object-position: 52% 46%;
  border-radius: 22px 0 0 110px;
}
@media (min-width: 981px) {
  /* let the photo run off the right edge of the viewport, as in the mockup */
  .ty-hero__media { margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2) - var(--gutter)); }

  /* The photo fills the hero band top to bottom, as in the mockup. The band itself
     is sized to the viewport so the whole hero still lands above the fold; the copy
     column carries its own padding and stays vertically centred. */
  .ty-hero__inner {
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
    min-height: clamp(520px, calc(100vh - var(--hdr) - 1px), 820px);
  }
  .ty-hero__copy {
    align-self: center;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  /* The photo is taken out of flow so it cannot feed its own portrait aspect ratio
     back into the row height; it simply fills whatever the hero band ends up being. */
  .ty-hero__media { align-self: stretch; min-height: 0; }
  /* fade the photo in, but never slide it: it is flush with the band's edges */
  .ty-page .ty-hero__media[data-reveal] { transform: none; }
  .ty-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Soft dissolve on the left edge so the photo melts into the cream beside the
     headline, rather than meeting it at a hard vertical line. */
  .ty-hero__media img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 7%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.95) 25%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 7%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.95) 25%, #000 34%);
  }
}

.ty-hero__leaf {
  position: absolute;
  left: -46px;
  bottom: -30px;
  width: 210px;
  color: #cfd6c0;
  opacity: .75;
  z-index: 1;
  pointer-events: none;
}

/* -------------------------------------------------------------- features */
.ty-features { background: var(--white); }
.ty-features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding-top: 62px; padding-bottom: 66px;
}
.ty-feature { text-align: center; }
.ty-feature__icon {
  width: 74px; height: 74px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #f7f3ea;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--green);
}
.ty-feature__icon svg { width: 30px; height: 30px; }
.ty-feature h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.ty-feature p { margin-top: 9px; font-size: 13px; line-height: 1.62; color: var(--body); }

/* ----------------------------------------------------------------- about */
.ty-about { background: var(--cream-2); }
.ty-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 78px;
  padding-top: 96px; padding-bottom: 100px;
}
.ty-about .ty-eyebrow { margin-bottom: 20px; }
.ty-about h2 { font-size: clamp(32px, 3.5vw, 42px); }
.ty-about__text { margin-top: 24px; font-size: 14.5px; line-height: 1.82; max-width: 430px; }
.ty-checks { margin-top: 34px; display: grid; gap: 14px; }
.ty-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ink-2); }
.ty-checks svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--green); }
.ty-about .ty-btn { margin-top: 36px; }

.ty-about__media { position: relative; }
.ty-about__media img {
  width: 100%;
  aspect-ratio: 1.18 / 1;
  object-fit: cover;
  border-radius: 128px 30px 128px 30px;
}
.ty-badge {
  position: absolute;
  left: -40px;
  bottom: -34px;
  width: 142px; height: 142px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(70, 60, 40, .07);
  display: grid;
  place-items: center;
}
.ty-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ty-badge__ring text { font-family: var(--sans); font-size: 8.4px; font-weight: 500; letter-spacing: 0.16em; fill: var(--muted); text-transform: uppercase; }
.ty-badge__core { text-align: center; line-height: 1; }
.ty-badge__since { font-size: 8px; font-weight: 500; letter-spacing: 0.26em; color: var(--muted); }
.ty-badge__year { font-family: var(--serif); font-size: 27px; color: var(--ink); margin-top: 5px; }
.ty-badge__leaf { width: 26px; height: 15px; margin: 8px auto 0; color: #adb996; }

/* -------------------------------------------------------------- programs */
.ty-programs { background: var(--white); padding: 96px 0 100px; }
.ty-head { text-align: center; max-width: 620px; margin: 0 auto; }
.ty-head .ty-eyebrow { margin-bottom: 18px; }
.ty-head h2 { font-size: clamp(30px, 3.4vw, 40px); }
.ty-head p { margin-top: 18px; font-size: 14.5px; line-height: 1.75; }

.ty-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 58px;
}
.ty-card {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ty-card:hover { border-color: var(--line); box-shadow: 0 16px 40px rgba(70, 60, 40, .08); transform: translateY(-3px); }
.ty-card__media { position: relative; }
.ty-card__media img { width: 100%; aspect-ratio: 1.34 / 1; object-fit: cover; }
.ty-card__icon {
  position: absolute;
  left: 22px;
  bottom: -25px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--green);
}
.ty-card__icon svg { width: 22px; height: 22px; }
.ty-card__body { padding: 44px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.ty-card h3 { font-size: 20px; }
.ty-card__ages { margin-top: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--gold); }
.ty-card p { margin-top: 14px; font-size: 13.5px; line-height: 1.68; }
.ty-more {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  align-self: flex-start;
}
.ty-more svg { width: 15px; height: 15px; transition: transform .25s ease; }
.ty-more:hover { color: var(--green); }
.ty-more:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------ montessori */
.ty-way { background: var(--cream-2); }
.ty-way__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 0.86fr) minmax(0, 0.86fr);
  gap: 56px;
  align-items: center;
  padding-top: 96px; padding-bottom: 100px;
}
.ty-way .ty-eyebrow { margin-bottom: 20px; }
.ty-way h2 { font-size: clamp(30px, 3.3vw, 38px); }
.ty-way__text { margin-top: 22px; font-size: 14.5px; line-height: 1.8; }
.ty-way .ty-btn { margin-top: 32px; }

.ty-points { display: grid; gap: 30px; }
.ty-point {
  display: flex;
  gap: 16px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  transition: transform .2s ease;
}
.ty-point:hover { transform: translateX(3px); }
.ty-point:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.ty-point__icon { flex: none; width: 34px; height: 34px; color: var(--green); }
.ty-point__icon svg { width: 100%; height: 100%; }
.ty-point h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: 0; transition: color .2s ease; }
.ty-point:hover h3 { color: var(--green); }
.ty-point p { margin-top: 7px; font-size: 13px; line-height: 1.65; }

.ty-way__media img { width: 100%; aspect-ratio: 0.86 / 1; object-fit: cover; object-position: 50% 42%; border-radius: 18px; }

/* ------------------------------------------------------------------- cta */
.ty-cta {
  position: relative;
  background: var(--cream-3);
  overflow: hidden;
  text-align: center;
}
.ty-cta__inner { padding-top: 88px; padding-bottom: 92px; position: relative; z-index: 2; }
.ty-cta .ty-eyebrow { margin-bottom: 18px; }
.ty-cta h2 { font-size: clamp(30px, 3.4vw, 40px); }
.ty-cta p { margin: 18px auto 0; max-width: 430px; font-size: 14.5px; line-height: 1.75; }
.ty-cta .ty-btn { margin-top: 32px; }
.ty-cta__plant { position: absolute; left: 4%; bottom: 0; width: 132px; z-index: 1; pointer-events: none; }
.ty-cta__toys { position: absolute; right: 4%; bottom: 0; width: 210px; z-index: 1; pointer-events: none; }

/* ---------------------------------------------------------------- footer */
.ty-footer { background: var(--cream); border-top: 1px solid var(--line-2); }
.ty-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 48px;
  padding: 62px 0 44px;
}
.ty-footer__about { max-width: 300px; font-size: 13.5px; line-height: 1.7; }
.ty-footer .ty-logo { margin: 0 0 18px; }
.ty-page .ty-footer .ty-logo__img { height: 70px; }
.ty-footer h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.ty-footer ul { display: grid; gap: 10px; }
.ty-footer li a, .ty-footer address a { font-size: 13.5px; color: var(--ink-2); transition: color .2s ease; }
.ty-footer li a:hover, .ty-footer address a:hover { color: var(--green); }
.ty-footer address { font-style: normal; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.6; }
.ty-footer__bar {
  border-top: 1px solid var(--line-2);
  padding: 20px 0 26px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* footer explore column: only the top-level parent items are shown —
   the chevron toggle and nested sub-list are switched off entirely. */
.ty-footer__parent { display: flex; align-items: center; gap: 6px; }
.ty-footer__chev { display: none; }
.ty-footer__sub { display: none; }

/* ------------------------------------------------------------ motion in */
.ty-page [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.ty-page [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ty-page [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ty-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ========================================================== responsive == */

@media (max-width: 1180px) {
  .ty-page { --gutter: 32px; }
  .ty-nav { gap: 24px; }
  .ty-about__inner { gap: 52px; }
  .ty-way__inner { gap: 40px; }
}

/* tablet */
@media (max-width: 980px) {
  .ty-page { --hdr: 74px; --gutter: 28px; }

  .ty-nav {
    position: fixed;
    inset: var(--hdr) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 18px 40px rgba(70, 60, 40, .09);
    padding: 8px 28px 22px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
  }
  .ty-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .ty-nav a { padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
  .ty-nav a::after { display: none; }
  .ty-burger { display: flex; }
  .ty-header__cta { margin-left: 0; height: 40px; padding: 0 18px; font-size: 13px; }

  .ty-hero__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 54px;
    padding-bottom: 60px;
    padding-right: var(--gutter); /* photo no longer bleeds, so give the gutter back */
  }
  .ty-hero__copy { max-width: 560px; }
  .ty-lead { max-width: 480px; }
  .ty-hero__media img { aspect-ratio: 1.5 / 1; border-radius: 20px 20px 20px 88px; }
  .ty-hero__leaf { width: 150px; left: -40px; bottom: -24px; opacity: .5; }

  .ty-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; padding-top: 52px; padding-bottom: 56px; }

  .ty-about__inner { grid-template-columns: 1fr; gap: 56px; padding-top: 72px; padding-bottom: 76px; }
  .ty-about__text, .ty-about__copy { max-width: 560px; }
  .ty-about__media img { aspect-ratio: 1.4 / 1; border-radius: 96px 26px 96px 26px; }
  .ty-badge { left: auto; right: 18px; bottom: -26px; width: 118px; height: 118px; }
  .ty-badge__year { font-size: 23px; }

  .ty-programs { padding: 72px 0 78px; }
  .ty-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }

  .ty-way__inner { grid-template-columns: 1fr 1fr; gap: 44px; padding-top: 72px; padding-bottom: 78px; }
  .ty-way__copy { grid-column: 1 / -1; }
  .ty-way__media img { aspect-ratio: 1.1 / 1; }

  .ty-cta__inner { padding-top: 70px; padding-bottom: 74px; }
  .ty-cta__plant { width: 96px; left: 2%; opacity: .9; }
  .ty-cta__toys { width: 150px; right: 2%; opacity: .9; }

  .ty-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; padding: 52px 0 36px; }

  /* keep touch targets at or above the 24px minimum */
  .ty-more { padding: 5px 0; }
  .ty-footer li a, .ty-footer address a { display: inline-block; padding: 4px 0; }
  .ty-footer__about { grid-column: 1 / -1; max-width: 480px; }
}

/* phone */
@media (max-width: 640px) {
  .ty-page { --gutter: 20px; font-size: 14.5px; }

  .ty-page .ty-logo__img { height: 50px; }
  .ty-logo__name { font-size: 18px; }
  .ty-logo__sub { font-size: 7.5px; }

  .ty-hero__inner { padding-top: 40px; padding-bottom: 46px; gap: 36px; }
  .ty-hero h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .ty-lead { margin-top: 20px; font-size: 14.5px; }
  .ty-hero__actions { margin-top: 28px; }
  .ty-hero__actions .ty-btn { flex: 1 1 auto; min-width: 140px; }
  .ty-trust { margin-top: 34px; }
  .ty-hero__media img { aspect-ratio: 1.24 / 1; border-radius: 16px 16px 16px 64px; }
  .ty-hero__leaf { width: 110px; bottom: -18px; left: -32px; }

  .ty-features__grid { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; padding-bottom: 46px; text-align: left; }
  .ty-feature { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .ty-feature__icon { width: 58px; height: 58px; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .ty-feature h3 { grid-column: 2; grid-row: 1; }
  .ty-feature p { grid-column: 2; grid-row: 2; }
  .ty-feature__icon svg { width: 24px; height: 24px; }
  .ty-feature p { margin-top: 6px; }

  .ty-about__inner { padding-top: 60px; padding-bottom: 64px; gap: 46px; }
  .ty-about__media img { aspect-ratio: 1.15 / 1; border-radius: 70px 20px 70px 20px; }
  .ty-badge { width: 100px; height: 100px; right: 8px; bottom: -22px; }
  .ty-badge__ring { display: none; }
  .ty-badge__year { font-size: 21px; }
  .ty-badge__leaf { width: 16px; margin-top: 5px; }

  .ty-programs { padding: 60px 0 64px; }
  .ty-cards { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; }
  .ty-card__body { padding: 40px 22px 26px; }

  .ty-way__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; padding-bottom: 64px; }
  .ty-way__media { order: 3; }
  .ty-way__media img { aspect-ratio: 1.3 / 1; }

  .ty-cta__inner { padding-top: 58px; padding-bottom: 62px; }
  .ty-cta p { max-width: 320px; }
  .ty-cta__plant { width: 66px; left: 0; opacity: .8; }
  .ty-cta__toys { width: 100px; right: 0; opacity: .8; }

  .ty-footer__inner { grid-template-columns: 1fr; gap: 34px; padding: 44px 0 30px; }
  .ty-footer__about { max-width: none; }
  .ty-footer__bar { flex-direction: column; gap: 6px; padding: 18px 0 24px; }
}

@media (max-width: 400px) {
  .ty-hero__actions .ty-btn { width: 100%; flex: none; }
  .ty-trust { flex-wrap: wrap; }
}


/* --------------------------------------------- parent-theme bits on this page */
#ast-scroll-top {
  background-color: #5a6b47 !important;
  color: #fff !important;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(70, 60, 40, .18);
}
#ast-scroll-top:hover { background-color: #4a5a3a !important; }


/* --------------------------------------------- hero eyebrow: sentence case */
.ty-hero .ty-eyebrow {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 13px;
}


/* =========================================
   STATISTICS
========================================= */

.ty-stats {
    padding: 72px 0;
    background: var(--cream);
}

.ty-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ty-stat {
    min-height: 150px;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.ty-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.ty-stat__number {
    margin-bottom: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(38px, 4vw, 52px);
    line-height: 1;
    font-weight: 700;
    color: var(--green);
}

.ty-stat p {
    max-width: 220px;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--body);
}


/* TABLET */

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


/* MOBILE */

@media (max-width: 600px) {
    .ty-stats {
        padding: 52px 0;
    }

    .ty-stats__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ty-stat {
        min-height: 130px;
        padding: 24px 20px;
    }

    .ty-stat__number {
        font-size: 42px;
    }
}


/* ==========================================================
   TESTIMONIALS  (home page, under Programs)
   ========================================================== */

.ty-tms-section { background: var(--cream); padding: 92px 0 72px; }

.ty-tms__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 44px;
}
.ty-tms__intro { max-width: 640px; }
.ty-tms__head .ty-eyebrow { margin-bottom: 18px; }
.ty-tms__head h2 { font-size: clamp(30px, 3.4vw, 40px); }
.ty-tms__lead { margin-top: 20px; font-size: 14.5px; line-height: 1.78; max-width: 560px; }

.ty-tms__score {
  flex: none;
  min-width: 244px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(70, 60, 40, .05);
}
.ty-tms__score-top { display: flex; align-items: center; gap: 11px; }
.ty-tms__score-value { font-family: var(--serif); font-size: 23px; line-height: 1; color: var(--ink); }
.ty-tms__score-note { margin-top: 11px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.ty-stars { display: flex; gap: 3px; }
.ty-stars svg { width: 15px; height: 15px; color: var(--gold); }
.ty-stars .ty-star--off { color: var(--line); }

/* ---- carousel ---- */
.ty-tms { position: relative; margin-top: 54px; }
.ty-tms__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -8px;
  padding: 8px;
}
.ty-tms__viewport::-webkit-scrollbar { display: none; }
.ty-tms__track { display: flex; gap: 30px; align-items: stretch; }
.ty-tms__item { flex: 0 0 calc((100% - 60px) / 3); scroll-snap-align: start; display: flex; }

.ty-tm {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 26px 26px 26px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ty-tm:hover { border-color: var(--line); box-shadow: 0 16px 40px rgba(70, 60, 40, .08); transform: translateY(-3px); }
.ty-tm__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ty-tm__name { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.ty-tm__meta { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ty-tm__mark { flex: none; width: 26px; height: 26px; color: #dad0bb; }
.ty-tm .ty-stars { margin-top: 15px; }
.ty-tm__quote {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ty-tm__quote.is-open { display: block; overflow: visible; }
.ty-page .ty-tm__more {
  margin-top: 16px;
  align-self: flex-start;
  background: none;
  border-radius: 0;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.ty-page .ty-tm__more:hover { color: var(--green); border-color: var(--green); }
.ty-page .ty-tm__more[hidden] { display: none; }

/* arrows float beside the track, half in the card row half in the gutter.
   Every property Astra's own base button rule also sets (border, radius,
   background, padding, color) is pinned with !important below: that rule
   has lower specificity than ours but was still winning on the properties
   we never redeclared ourselves, since Astra was the only source for them. */
.ty-tms__navs { position: static; }
.ty-page .ty-tms__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  flex: none;
  box-sizing: border-box !important;
  width: 44px !important; height: 44px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  display: grid;
  place-items: center;
  overflow: visible;
  box-shadow: 0 8px 22px rgba(70, 60, 40, .10);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.ty-page .ty-tms__nav svg { width: 17px !important; height: 17px !important; flex: none; color: inherit; fill: none; }
.ty-page .ty-tms__nav--prev { left: -32px; }
.ty-page .ty-tms__nav--next { right: -32px; }
.ty-page .ty-tms__nav:hover:not(:disabled) { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.ty-page .ty-tms__nav:disabled { opacity: .34; cursor: default; box-shadow: none; }
.ty-page .ty-tms__nav[hidden] { display: none; }

/* TABLET */
@media (max-width: 980px) {
  .ty-tms-section { padding: 72px 0 60px; }
  .ty-tms__head { grid-template-columns: 1fr; gap: 28px; }
  .ty-tms__score { justify-self: start; }
  .ty-tms { margin-top: 42px; }
  .ty-tms__track { gap: 24px; }
  .ty-tms__item { flex-basis: calc((100% - 24px) / 2); }
  .ty-page .ty-tms__nav--prev { left: -24px; }
  .ty-page .ty-tms__nav--next { right: -24px; }
}

/* MOBILE */
@media (max-width: 640px) {
  .ty-tms-section { padding: 60px 0 48px; }
  .ty-tms { margin-top: 34px; }
  .ty-tms__track { gap: 18px; }
  .ty-tms__item { flex-basis: min(86%, 340px); }
  .ty-tm { padding: 24px 22px; }
  .ty-tms__score { min-width: 0; width: 100%; }

  /* below-viewport width, arrows drop below the track so they never sit on top of a card */
  .ty-tms__navs { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
  .ty-page .ty-tms__nav { position: static; transform: none; width: 40px !important; height: 40px !important; }
}