* Montessori page — XD 2026
 * The page uses the same dynamic Gutenberg architecture as the Homepage.
 * All desktop measurements below are taken from the 1920px XD artboard;
 * mobile follows the separate 430px Montessori artboard instead of merely
 * shrinking the desktop composition.
 * ======================================================================== */
.to-montessori { overflow-x: clip; }
.to-montessori > .wp-block-teddy-oak-montessori,
.to-montessori > .wp-block-html { margin: 0 !important; padding: 0 !important; }
.to-montessori > .wp-block-teddy-oak-montessori { display: contents; }
.to-montessori > .wp-block-teddy-oak-montessori > .wp-block-teddy-oak-montessori-hero,
.to-montessori > .wp-block-teddy-oak-montessori > .wp-block-teddy-oak-montessori-intro,
.to-montessori > .wp-block-teddy-oak-montessori > .wp-block-teddy-oak-montessori-principles,
.to-montessori > .wp-block-teddy-oak-montessori > .wp-block-teddy-oak-montessori-practice,
.to-montessori > .wp-block-teddy-oak-montessori > .wp-block-teddy-oak-montessori-why,
.to-montessori > .wp-block-teddy-oak-montessori > .wp-block-teddy-oak-montessori-cta { margin: 0 !important; padding: 0 !important; }
.to-mont-container { width: min(calc(100% - 200px), 1720px); margin-inline: auto; }

/* Desktop: header is supplied by the shared theme. Content starts at y=180. */
.to-mont-hero { position: relative; height: 899px; overflow: hidden; background: var(--to-sand-dark); }
.to-mont-hero__image { position: absolute; inset: -1px 0 0; height: 1113px; overflow: hidden; }
.to-mont-hero__image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
.to-mont-hero__panel { position: absolute; left: 0; top: 198px; width: 925px; height: 700px; padding: 249px 100px 60px; background: rgba(253,253,248,.96); border-radius: 0 200px 0 0; }
.to-mont-hero__panel h1 { width: 629px; max-width: 100%; font-size: 60px; line-height: 70px; color: var(--to-text); }
.to-mont-hero__panel p { width: 629px; max-width: 100%; margin: 35px 0 0; font: 400 18px/31px var(--to-font-ui, "Montserrat"), Arial, sans-serif; color: var(--to-black); }

.to-mont-intro { position: relative; height: 523px; background: var(--to-bg); }
.to-mont-intro__copy { width: 715px; margin: 0 auto; padding-top: 170px; text-align: center; }
.to-mont-intro h2 { width: 484px; margin: 0 auto; text-align: center; font-size: 50px; line-height: 59px; color: var(--to-text); }
.to-mont-intro p { width: 715px; margin: 46px auto 0; text-align: center; font: 400 18px/21px var(--to-font-body, "Raleway"), Arial, sans-serif; color: var(--to-text); }
.to-mont-intro__mobile { display: none; }

.to-mont-principles { height: 1453px; background: var(--to-sand); position: relative; overflow: hidden; }
.to-mont-principles__inner { position: relative; height: 100%; }
.to-mont-principles__heading { position: absolute; left: 0; top: 110px; }
.to-mont-principles__heading h2 { font-size: 40px; line-height: 47px; color: var(--to-text); }
.to-mont-principles__image { position: absolute; right: -100px; top: 0; width: 860px; height: 1453px; overflow: hidden; }
.to-mont-principles__image img { width: 100%; height: 100%; object-fit: cover; }
.to-mont-principles__cards { position: absolute; left: 0; top: 181px; width: 805px; display: grid; gap: 28px; }
.to-mont-principle-card { width: 805px; height: 240px; padding: 85px 41px 35px; margin: 0; }
.to-mont-principle-card h3 { margin: 0; font-size: 40px; line-height: 47px; }
.to-mont-principle-card p { margin: 24px 0 0; font: 400 18px/21px var(--to-font-body, "Raleway"), Arial, sans-serif; }
.to-mont-principle-card--1 { background: var(--to-bg); color: var(--to-text); }
.to-mont-principle-card--2 { background: var(--to-primary); color: var(--to-bg); }
.to-mont-principle-card--3 { background: var(--to-text); color: var(--to-bg); }
.to-mont-principle-card--4 { background: var(--to-sand-dark); color: var(--to-text); }

.to-mont-practice { height: 634px; background: var(--to-bg); }
.to-mont-practice__inner { position: relative; height: 100%; }
.to-mont-practice__copy { position: absolute; left: 50%; top: 145px; width: 715px; transform: translateX(-50%); text-align: center; }
.to-mont-practice__copy h2 { width: 100%; margin: 0 auto; text-align: center; font-size: 50px; line-height: 59px; color: var(--to-text); }
.to-mont-practice__copy ul { width: 715px; margin: 46px auto 0; text-align: center; padding: 0; list-style: none; }
.to-mont-practice__copy li { position: relative; margin: 0 0 29px; padding-left: 0; font: 400 18px/21px var(--to-font-body, "Raleway"), Arial, sans-serif; color: var(--to-text); }
.to-mont-practice__copy li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 16px 3px 0; border-radius: 50%; background: var(--to-primary); }
.to-mont-practice__media { display: none; }

.to-mont-why { min-height: 0; height: auto; margin-bottom: 40px; background: var(--to-bg); }
.to-mont-why__inner { position: relative; min-height: 0; display: grid; grid-template-columns: 836px 805px; column-gap: 79px; align-items: stretch; }
.to-mont-why__image { position: relative; width: 100%; min-height: 0; height: auto; align-self: stretch; overflow: hidden; }
.to-mont-why__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.to-mont-why__copy { position: relative; width: 100%; min-height: 0; height: auto; box-sizing: border-box; padding: 117px 88px 60px; background: var(--to-sand); }
.to-mont-why__copy h2 { width: 629px; max-width: 100%; margin: 0; font-size: 60px; line-height: 70px; font-weight: 600; color: var(--to-text); }
.to-mont-why__copy p { width: 715px; max-width: 100%; margin: 41px 0 0; font: 400 25px/35px var(--to-font-body, "Raleway"), Arial, sans-serif; color: var(--to-text); }
.to-mont-why__mobile-title, .to-mont-why__mobile-text { display: none; }

.to-mont-cta { height: 664px; display: grid; grid-template-columns: 1fr 1fr; background: var(--to-primary); }
.to-mont-cta__copy { padding: 156px clamp(40px, calc((100vw - 1546px) / 2), 187px) 80px; color: var(--to-bg); }
.to-mont-cta__copy h2 { width: 624px; max-width: 100%; margin: 0; font-size: 50px; line-height: 59px; font-weight: 400; }
.to-mont-cta__copy p { width: 624px; max-width: 100%; margin: 33px 0 0; color: var(--to-sand); font: 400 18px/21px var(--to-font-body, "Raleway"), Arial, sans-serif; }
.to-mont-cta__copy .to-small-button { margin-top: 74px; color: var(--to-text); }
.to-mont-cta__image { min-height: 664px; overflow: hidden; }
.to-mont-cta__image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.to-mont-cta + * { margin-top: 0; }

@media (min-width: 901px) and (max-width: 1760px) {
  .to-mont-container { width: calc(100% - 64px); }
  .to-mont-hero__panel { width: min(925px, 55vw); }
  .to-mont-hero__panel h1, .to-mont-hero__panel p { width: min(629px, calc(100% - 40px)); }
  .to-mont-intro__copy { margin-left: auto; margin-right: auto; }
  .to-mont-principles__image { width: 50%; }
  .to-mont-principles__cards { width: 47%; }
  .to-mont-principle-card { width: 100%; }
  .to-mont-why__inner { grid-template-columns: 49% 47%; column-gap: 4%; }
  .to-mont-why__image, .to-mont-why__copy { width: 100%; min-height: 0; }
  .to-mont-why__image { align-self: stretch; }
  .to-mont-why__copy { padding-left: 5%; padding-right: 5%; }
  .to-mont-why__copy p { width: 100%; }
}

@media (max-width: 900px) {
  .page-template-page-montessori .site-header__inner { width: 100%; min-height: 99px; padding: 0 6px 0 61px; }
  .page-template-page-montessori .site-brand__logo,
  .page-template-page-montessori .site-brand .custom-logo { width: 137px; }
  .page-template-page-montessori .menu-toggle { width: 31px; height: 31px; padding: 0; margin: 0; }
  .page-template-page-montessori .menu-toggle svg { width: 31px; height: 31px; }
  .page-template-page-montessori .site-footer .footer-top,
  .page-template-page-montessori .site-footer .footer-canvas { height: 1407px; }

  .to-mont-container { width: auto; margin: 0; }
  .to-montessori::after { height: 0; }

  /* Mobile XD: hero image is 430x702 beginning directly below the 99px header. */
  .to-mont-hero { height: 702px; overflow: visible; background: transparent; }
  .to-mont-hero__image { inset: 0; width: 100%; height: 702px; }
  .to-mont-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
  .to-mont-hero__panel { left: 0; top: 262px; width: calc(100% - 72px); height: 338px; padding: 112px 39px 35px; border-radius: 0 90px 0 0; background: rgba(240,238,231,.962); }
  .to-mont-hero__panel h1 { width: 260px; max-width: 100%; font-size: 40px; line-height: 47px; }
  .to-mont-hero__panel p { display: none; }

  .to-mont-intro { height: 220px; background: var(--to-bg); position: relative; }
  .to-mont-intro__copy { width: auto; margin: 0; padding: 0 40px; }
  .to-mont-intro h2 { position: relative; top: -58px; width: 100%; margin: 0; text-align: center; font-size: 30px; line-height: 35px; }
  .to-mont-intro__desktop { display: none; }
  .to-mont-intro__mobile { display: block; width: 100%; margin: 2px 0 0; text-align: center; font: 400 18px/21px var(--to-font-body, "Raleway"), Arial, sans-serif; color: var(--to-text); }

  /* The desktop principles and practice sections are intentionally absent from
     the 430px Montessori artboard. The next section starts with the interior
     photo and then the mobile-specific 'Waarom' copy. */
  .to-mont-principles, .to-mont-practice { display: none; }

  .to-mont-why { height: 814px; min-height: 814px; margin-bottom: 40px; background: var(--to-bg); }
  .to-mont-why__inner { height: 100%; min-height: 0; display: block; }
  .to-mont-why__image { position: absolute; left: 0; top: 0; width: 100%; min-height: 0; height: 351px; }
  .to-mont-why__copy { position: absolute; left: 0; top: 351px; width: 100%; min-height: 0; height: auto; padding: 71px 39px 0; background: var(--to-bg); }
  .to-mont-why__desktop-title, .to-mont-why__desktop-text { display: none; }
  .to-mont-why__mobile-title { display: block; width: 351px; max-width: 100%; margin: 0; font-size: 30px; line-height: 35px; font-weight: 400; color: var(--to-text); }
  .to-mont-why__mobile-text { display: block; width: 350px; max-width: 100%; margin: 41px 0 0; font: 400 18px/21px var(--to-font-body, "Raleway"), Arial, sans-serif; color: var(--to-text); }

  .to-mont-cta { height: 1037px; display: block; background: var(--to-primary); }
  .to-mont-cta__copy { height: 714px; padding: 156px 39px 35px; }
  .to-mont-cta__copy h2 { width: 350px; max-width: 100%; font-size: 40px; line-height: 47px; }
  .to-mont-cta__copy p { width: 350px; max-width: 100%; margin-top: 34px; font-size: 18px; line-height: 21px; }
  .to-mont-cta__copy .to-small-button { margin-top: 17px; }
  .to-mont-cta__image { width: 100%; height: 323px; min-height: 323px; }
  .to-mont-cta__image img { width: 100%; height: 323px; object-fit: cover; }
}

@media (max-width: 480px) {
  .to-mont-hero__panel { width: calc(100% - 72px); }
  .to-mont-intro__copy { padding-left: 40px; padding-right: 40px; }
  .to-mont-why__copy, .to-mont-cta__copy { padding-left: 39px; padding-right: 39px; }
}

/* Gutenberg editor placeholders stay compact and never introduce layout
   margins into the frontend. */
.to-mont-cms-root .block-editor-inner-blocks,
.to-mont-cms-root .block-editor-block-list__layout { max-width: none !important; }
.to-mont-cms-editor { padding: 18px 20px; margin: 0 !important; border: 1px dashed #c9c1b5; background: #faf9f5; }
.to-mont-cms-editor strong { display: block; margin-bottom: 6px; font-size: 16px; }
.to-mont-cms-editor p { margin: 0 0 12px; font-size: 13px; }
.to-mont-cta-emphasis { font-family: var(--to-font-body, "Raleway"), Arial, sans-serif; font-style: italic; font-weight: 600; }