.elementor-12811 .elementor-element.elementor-element-327bd62{--display:flex;}body.elementor-page-12811:not(.elementor-motion-effects-element-type-background), body.elementor-page-12811 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://pdotuitionservices.com/wp-content/uploads/2025/08/ChatGPT-Image-Aug-14-2025-11_00_39-AM-1.png");}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-3c8a3f0 *//* ==========================================================
   PDO Tuition Services — Ontario History Online Tuition
   Concept: "the archive" — charcoal ink, stone paper, and
   verdigris (the green of aged bronze plaques). Cards behave
   like catalogue cards: the corner folds back on hover.

   SCOPING: this page uses generic class names (.content-section,
   .hero-section, .container…) so every rule is locked to pages
   that contain #ontario-history-hero via body:has(). It won't
   leak into your theme or other pages.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root {
  --oh-ink: #1f1c19;          /* charcoal ink — hero, headings */
  --oh-ink-2: #2b2723;
  --oh-verdigris: #2e6e68;    /* aged bronze — the single accent */
  --oh-verdigris-2: #3f8d85;
  --oh-verdigris-soft: #e3efed;
  --oh-stone: #f4f2ee;        /* alternate section wash */
  --oh-paper: #ffffff;
  --oh-line: #e0dbd3;
  --oh-fold: #d6cec2;
  --oh-text: #3a3632;
  --oh-muted: #6b645c;

  --oh-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --oh-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --oh-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --oh-ease: cubic-bezier(.2, .85, .25, 1);
  --oh-lift: 0 20px 40px -22px rgba(31, 28, 25, .38), 0 2px 6px rgba(31, 28, 25, .06);
}

/* ---------- Base ---------- */

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) {
  --oh-bg: var(--oh-paper);
  position: relative;
  font-family: var(--oh-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--oh-text);
  background: var(--oh-bg);
  padding: clamp(64px, 9vw, 116px) 0;
  -webkit-font-smoothing: antialiased;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) *,
body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) *::before,
body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) *::after {
  box-sizing: border-box;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* Alternating stone wash */
body:has(#ontario-history-hero) :is(#ontario-history-curriculum, #grade-level-history, #world-history,
       #history-research-writing, #personalised-history-tuition,
       #how-history-tuition-works, #history-faq) {
  --oh-bg: var(--oh-stone);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) p { margin: 0 0 16px; }
body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) p:last-child { margin-bottom: 0; }

/* ---------- Section heading ---------- */

body:has(#ontario-history-hero) .section-heading {
  max-width: 780px;
  margin-bottom: 48px;
}

body:has(#ontario-history-hero) .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px !important;
  font-family: var(--oh-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--oh-verdigris);
}

body:has(#ontario-history-hero) .section-eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: currentColor;
  transition: width .45s var(--oh-ease);
}

body:has(#ontario-history-hero) .section-heading:hover .section-eyebrow::before {
  width: 48px;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) h2 {
  font-family: var(--oh-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--oh-ink);
  margin: 0 0 20px;
  scroll-margin-top: 110px;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) h3 {
  font-family: var(--oh-serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--oh-ink);
  margin: 0 0 12px;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) h4 {
  font-family: var(--oh-sans);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--oh-ink);
  margin: 0 0 8px;
}

body:has(#ontario-history-hero) .section-intro {
  font-size: 1.12rem;
  color: var(--oh-muted);
  margin: 0 !important;
}

/* ==========================================================
   HERO — dark archive with a timeline ruler
   ========================================================== */

body:has(#ontario-history-hero) #ontario-history-hero {
  overflow: hidden;
  color: #d9d3ca;
  padding: clamp(100px, 14vw, 170px) 0 clamp(72px, 9vw, 110px);
  background:
    radial-gradient(60% 70% at 88% 18%, rgba(46, 110, 104, .38), transparent 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(46, 110, 104, .18), transparent 70%),
    var(--oh-ink);
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-content {
  max-width: 860px;
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  font-family: var(--oh-mono);
  font-size: .82rem;
  letter-spacing: .05em;
  color: #9fd0c9;
  animation: oh-rise .7s var(--oh-ease) .1s both;
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-eyebrow::before {
  content: "";
  width: 36px;
  height: 1.5px;
  background: currentColor;
}

body:has(#ontario-history-hero) #ontario-history-hero h1 {
  font-family: var(--oh-serif);
  font-weight: 600;
  font-size: clamp(2.9rem, 7.5vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fbf8f3;
  max-width: 13ch;
  margin: 0 0 30px;
  animation: oh-rise .8s var(--oh-ease) .2s both;
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-intro {
  max-width: 56ch;
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  line-height: 1.65;
  color: #f1ece4;
  margin: 0 0 18px;
  animation: oh-rise .8s var(--oh-ease) .3s both;
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-description {
  max-width: 66ch;
  font-size: 1rem;
  line-height: 1.75;
  color: #a9a196;
  margin: 0 0 40px;
  animation: oh-rise .8s var(--oh-ease) .38s both;
}

/* Hero highlights — three catalogue entries */
body:has(#ontario-history-hero) #ontario-history-hero .hero-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 68px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  counter-reset: oh-hl;
  animation: oh-rise .8s var(--oh-ease) .56s both;
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 26px 28px 8px 0;
  counter-increment: oh-hl;
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight + .hero-highlight {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}

/* verdigris line that draws along the top edge */
body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: #9fd0c9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--oh-ease);
}

body:has(#ontario-history-hero) #ontario-history-hero .highlight-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--oh-serif);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.3;
  color: #fbf8f3;
  transition: color .3s var(--oh-ease);
}

body:has(#ontario-history-hero) #ontario-history-hero .highlight-title::before {
  content: counter(oh-hl, decimal-leading-zero);
  font-family: var(--oh-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: #9fd0c9;
  transition: letter-spacing .35s var(--oh-ease);
}

body:has(#ontario-history-hero) #ontario-history-hero .highlight-text {
  font-size: .95rem;
  line-height: 1.6;
  color: #a9a196;
  transition: color .3s var(--oh-ease);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight:hover::before {
    transform: scaleX(1);
  }
  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight:hover .highlight-title {
    color: #9fd0c9;
  }
  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight:hover .highlight-title::before {
    letter-spacing: .16em;
  }
  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight:hover .highlight-text {
    color: #d9d3ca;
  }
}

body:has(#ontario-history-hero) #ontario-history-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  animation: oh-rise .8s var(--oh-ease) .44s both;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.hero-btn, .cta-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 30px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  font-family: var(--oh-sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background-color .3s var(--oh-ease),
    color .3s var(--oh-ease),
    border-color .3s var(--oh-ease),
    transform .25s var(--oh-ease),
    box-shadow .3s var(--oh-ease);
}

/* arrow that slides in */
body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.primary-btn, .hero-btn-primary, .cta-btn-primary)::after {
  content: "→";
  display: inline-block;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-6px);
  transition: width .3s var(--oh-ease), opacity .3s, transform .3s var(--oh-ease);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.primary-btn, .hero-btn-primary, .cta-btn-primary) {
  background: #f4efe7;
  color: var(--oh-ink);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .7);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.primary-btn, .hero-btn-primary, .cta-btn-primary):hover {
  background: var(--oh-verdigris-2);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(46, 110, 104, .9);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.primary-btn, .hero-btn-primary, .cta-btn-primary):hover::after {
  width: 1em;
  opacity: 1;
  transform: translateX(0);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.secondary-btn, .hero-btn-secondary, .cta-btn-secondary) {
  background: transparent;
  color: #f4efe7;
  border-color: rgba(244, 239, 231, .3);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.secondary-btn, .hero-btn-secondary, .cta-btn-secondary):hover {
  color: #ffffff;
  border-color: #9fd0c9;
  background: rgba(159, 208, 201, .08);
  transform: translateY(-2px);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.hero-btn, .cta-btn):active {
  transform: translateY(0) scale(.98);
  transition-duration: .08s;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.hero-btn, .cta-btn):focus-visible {
  outline: 3px solid #9fd0c9;
  outline-offset: 3px;
}

/* ==========================================================
   INTRO TEXT BLOCKS — set in two columns like a book page
   ========================================================== */

body:has(#ontario-history-hero) :is(.history-intro-content, .history-update-intro, .canadian-history-intro, .world-history-intro, .inquiry-intro, .writing-intro, .assessment-intro, .personalised-history-intro) {
  columns: 2 320px;
  column-gap: clamp(32px, 5vw, 64px);
  column-rule: 1px solid var(--oh-line);
  margin: 0 0 52px;
}

body:has(#ontario-history-hero) :is(.history-intro-content, .history-update-intro, .canadian-history-intro, .world-history-intro, .inquiry-intro, .writing-intro, .assessment-intro, .personalised-history-intro) p {
  break-inside: avoid;
}

body:has(#ontario-history-hero) :is(.history-intro-content, .history-update-intro, .canadian-history-intro, .world-history-intro, .inquiry-intro, .writing-intro, .assessment-intro, .personalised-history-intro) p:first-child::first-letter {
  float: left;
  font-family: var(--oh-serif);
  font-weight: 600;
  font-size: 3.4em;
  line-height: .9;
  margin: 6px 10px 0 0;
  color: var(--oh-verdigris);
}

/* Curriculum overview — a framed feature panel */
body:has(#ontario-history-hero) .curriculum-overview {
  margin-bottom: 48px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--oh-paper);
  box-shadow: inset 0 0 0 1px var(--oh-line);
  border-top: 4px solid var(--oh-verdigris);
}

body:has(#ontario-history-hero) .curriculum-overview-content {
  max-width: 78ch;
}

/* ==========================================================
   CARD GRIDS
   ========================================================== */

body:has(#ontario-history-hero) :is(.history-focus-grid, .curriculum-support-grid, .history-update-grid, .history-topic-grid, .world-history-grid, .historical-thinking-grid, .history-writing-grid, .assessment-support-grid, .personalised-history-grid, .history-students-grid, .why-pdo-history-grid, .inquiry-process) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

body:has(#ontario-history-hero) :is(.world-history-skill-grid, .source-analysis-grid, .writing-support-list, .assessment-method-grid, .learning-process-grid, .history-online-benefits-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

/* ---------- Catalogue card ---------- */

body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step),
body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card) {
  position: relative;
  padding: 28px 26px 26px;
  background: var(--oh-paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--oh-line);
  transition:
    transform .35s var(--oh-ease),
    box-shadow .35s var(--oh-ease);
}

/* white sections get stone-tinted cards */
body:has(#ontario-history-hero) :is(#history-support, #canadian-history, #historical-inquiry,
       #history-assessment, #who-can-benefit, #why-pdo-history)
  :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step, .world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card) {
  background: #faf9f6;
}

body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card) {
  padding: 22px 22px 20px;
}

body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step, .world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card) p {
  font-size: .97rem;
  line-height: 1.66;
  color: var(--oh-muted);
  transition: color .3s var(--oh-ease);
}

body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step, .world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card) :is(h3, h4) {
  transition: color .3s var(--oh-ease);
}

body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step) h3 {
  font-size: 1.28rem;
}

/* the folded corner */
body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step)::after,
body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: linear-gradient(225deg, var(--oh-bg) 50%, var(--oh-fold) 50%);
  box-shadow: -2px 2px 5px rgba(31, 28, 25, .12);
  transition: width .35s var(--oh-ease), height .35s var(--oh-ease);
}

/* verdigris underline that draws across the bottom */
body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step)::before,
body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--oh-verdigris);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--oh-ease);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step):hover,
  body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card):hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px #cfc6ba, var(--oh-lift);
  }

  body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step):hover::after,
  body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card):hover::after {
    width: 26px;
    height: 26px;
  }

  body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step):hover::before,
  body:has(#ontario-history-hero) :is(.world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card):hover::before {
    transform: scaleX(1);
  }

  body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step, .world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card):hover :is(h3, h4) {
    color: var(--oh-verdigris);
  }

  body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step, .world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card):hover p {
    color: var(--oh-text);
  }
}

/* ---------- Catalogue numbers ---------- */

body:has(#ontario-history-hero) :is(.history-focus-icon, .why-pdo-history-icon, .inquiry-number,
       .assessment-number, .learning-step) {
  display: inline-block;
  margin-bottom: 16px;
  padding-bottom: 4px;
  font-family: var(--oh-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--oh-verdigris);
  border-bottom: 1px solid currentColor;
  transition: letter-spacing .35s var(--oh-ease);
}

body:has(#ontario-history-hero) :is(.history-focus-icon, .why-pdo-history-icon, .inquiry-number,
       .assessment-number, .learning-step)::before {
  content: "No. ";
  opacity: .65;
}

@media (hover: hover) {
  body:has(#ontario-history-hero) :is(.history-focus-card, .curriculum-support-card, .history-update-card, .grade-history-card, .history-topic-card, .world-history-card, .historical-thinking-card, .history-writing-card, .assessment-support-card, .personalised-history-card, .history-student-card, .why-pdo-history-card, .inquiry-step, .world-history-skill, .source-analysis-card, .writing-support-item, .assessment-method-card, .learning-process-card, .history-online-benefit-card):hover
    :is(.history-focus-icon, .why-pdo-history-icon, .inquiry-number,
        .assessment-number, .learning-step) {
    letter-spacing: .14em;
  }
}

/* ---------- Lists inside cards and panels ---------- */

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.grade-history-card, .personalised-history-features, .history-learning-format) ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.grade-history-card, .personalised-history-features, .history-learning-format) li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: .96rem;
  line-height: 1.55;
  border-top: 1px dashed var(--oh-line);
  transition: color .25s, padding-left .3s var(--oh-ease);
}

body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.grade-history-card, .personalised-history-features, .history-learning-format) li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--oh-verdigris);
  transform: rotate(45deg);
  transition: background-color .25s;
}

@media (hover: hover) {
  body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.grade-history-card, .personalised-history-features, .history-learning-format) li:hover {
    color: var(--oh-ink);
    padding-left: 28px;
  }
  body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) :is(.grade-history-card, .personalised-history-features, .history-learning-format) li:hover::before {
    background: var(--oh-verdigris);
  }
}

/* ==========================================================
   2026–27 UPDATE — the dark "new acquisitions" section
   ========================================================== */

body:has(#ontario-history-hero) #ontario-history-updates {
  --oh-bg: var(--oh-ink-2);
  color: #cfc8be;
}

body:has(#ontario-history-hero) #ontario-history-updates :is(h2, h3) {
  color: #fbf8f3;
}

body:has(#ontario-history-hero) #ontario-history-updates .section-eyebrow {
  color: #9fd0c9;
}

body:has(#ontario-history-hero) #ontario-history-updates .section-intro {
  color: #b3aba0;
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-intro {
  column-rule-color: rgba(255, 255, 255, .12);
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-intro p:first-child::first-letter {
  color: #9fd0c9;
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-card {
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-card p {
  color: #b3aba0;
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-card::after {
  background: linear-gradient(225deg, var(--oh-ink-2) 50%, #4a453f 50%);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) #ontario-history-updates .history-update-card:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(159, 208, 201, .4), 0 20px 40px -22px rgba(0, 0, 0, .8);
  }
  body:has(#ontario-history-hero) #ontario-history-updates .history-update-card:hover h3 {
    color: #9fd0c9;
  }
  body:has(#ontario-history-hero) #ontario-history-updates .history-update-card:hover p {
    color: #ddd6cc;
  }
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-note {
  background: rgba(255, 255, 255, .04);
  border-left-color: #9fd0c9;
}

body:has(#ontario-history-hero) #ontario-history-updates .history-update-note p {
  color: #cfc8be;
}

/* ==========================================================
   GRADE LEVELS
   ========================================================== */

body:has(#ontario-history-hero) .grade-history-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 56px;
}

body:has(#ontario-history-hero) .grade-history-card .grade-label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  font-family: var(--oh-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--oh-verdigris);
  background: var(--oh-verdigris-soft);
  border-radius: 2px;
  transition: background-color .3s var(--oh-ease), color .3s var(--oh-ease);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) .grade-history-card:hover .grade-label {
    background: var(--oh-verdigris);
    color: #ffffff;
  }
}

/* Grade detail — a vertical timeline */
body:has(#ontario-history-hero) .grade-history-detail {
  position: relative;
  max-width: 860px;
  margin: 0 0 8px;
  padding-left: 40px;
}

body:has(#ontario-history-hero) .grade-history-detail::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--oh-verdigris), var(--oh-line));
}

body:has(#ontario-history-hero) .grade-history-detail-block {
  position: relative;
  padding: 0 0 36px;
}

body:has(#ontario-history-hero) .grade-history-detail-block:last-child {
  padding-bottom: 0;
}

body:has(#ontario-history-hero) .grade-history-detail-block::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--oh-bg);
  border: 2px solid var(--oh-verdigris);
  transition: background-color .3s var(--oh-ease), transform .3s var(--oh-ease);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) .grade-history-detail-block:hover::before {
    background: var(--oh-verdigris);
    transform: scale(1.25);
  }
  body:has(#ontario-history-hero) .grade-history-detail-block:hover h3 {
    color: var(--oh-verdigris);
  }
}

body:has(#ontario-history-hero) .grade-history-detail-block h3 {
  transition: color .3s var(--oh-ease);
}

/* ==========================================================
   PANELS WITH INNER GRIDS (skills, source analysis, methods…)
   ========================================================== */

body:has(#ontario-history-hero) :is(.world-history-skills, .source-analysis-section, .history-writing-process, .history-writing-support, .assessment-method-section, .personalised-learning-process, .history-online-benefits, .history-learning-skills, .assessment-skills, .personalised-history-features, .history-learning-format) {
  margin-top: 56px;
}

body:has(#ontario-history-hero) :is(.world-history-skills, .source-analysis-section, .history-writing-process, .history-writing-support, .assessment-method-section, .personalised-learning-process, .history-online-benefits, .history-learning-skills, .assessment-skills, .personalised-history-features, .history-learning-format) > h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

body:has(#ontario-history-hero) :is(.world-history-skills, .source-analysis-section, .history-writing-process, .history-writing-support, .assessment-method-section, .personalised-learning-process, .history-online-benefits, .history-learning-skills, .assessment-skills, .personalised-history-features, .history-learning-format) > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--oh-line);
}

body:has(#ontario-history-hero) .source-analysis-section > p {
  max-width: 70ch;
  color: var(--oh-muted);
  margin-bottom: 22px;
}

/* Writing process — six steps along a line */
body:has(#ontario-history-hero) .writing-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

body:has(#ontario-history-hero) .writing-process-grid::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 19px;
  height: 2px;
  background: var(--oh-line);
}

body:has(#ontario-history-hero) .writing-process-step {
  position: relative;
}

body:has(#ontario-history-hero) .writing-process-step .process-number {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--oh-bg);
  border: 2px solid var(--oh-verdigris);
  font-family: var(--oh-mono);
  font-size: .8rem;
  color: var(--oh-verdigris);
  transition: background-color .3s var(--oh-ease), color .3s, transform .3s var(--oh-ease);
}

body:has(#ontario-history-hero) .writing-process-step p {
  font-size: .93rem;
  color: var(--oh-muted);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) .writing-process-step:hover .process-number {
    background: var(--oh-verdigris);
    color: #ffffff;
    transform: translateY(-3px);
  }
  body:has(#ontario-history-hero) .writing-process-step:hover h4 {
    color: var(--oh-verdigris);
  }
}

/* ---------- Skill tags ---------- */

body:has(#ontario-history-hero) :is(.skills-list, .assessment-skill-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body:has(#ontario-history-hero) :is(.skills-list, .assessment-skill-list) span {
  display: inline-block;
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--oh-ink);
  background: var(--oh-paper);
  box-shadow: inset 0 0 0 1px var(--oh-line);
  border-radius: 2px;
  cursor: default;
  transition:
    background-color .25s var(--oh-ease),
    color .25s var(--oh-ease),
    box-shadow .25s var(--oh-ease),
    transform .25s var(--oh-ease);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) :is(.skills-list, .assessment-skill-list) span:hover {
    background: var(--oh-verdigris);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--oh-verdigris), 0 8px 16px -10px rgba(46, 110, 104, .8);
    transform: translateY(-2px) rotate(-1deg);
  }
}

body:has(#ontario-history-hero) :is(.history-learning-skills, .assessment-skills) {
  margin-top: 56px;
}

/* ---------- List panels ---------- */

body:has(#ontario-history-hero) :is(.personalised-history-features, .history-learning-format) {
  margin-top: 56px;
  padding: clamp(26px, 4vw, 40px);
  background: var(--oh-paper);
  box-shadow: inset 0 0 0 1px var(--oh-line);
}

body:has(#ontario-history-hero) :is(.personalised-history-features, .history-learning-format) ul {
  columns: 2 280px;
  column-gap: 40px;
}

body:has(#ontario-history-hero) :is(.personalised-history-features, .history-learning-format) li {
  break-inside: avoid;
}

/* ==========================================================
   NOTES / CLOSING BLOCKS
   ========================================================== */

body:has(#ontario-history-hero) :is(.curriculum-note, .history-update-note, .grade-history-note, .history-topic-note, .world-history-note, .inquiry-note, .history-writing-note, .assessment-note, .personalised-history-note, .history-students-closing, .history-learning-note, .why-pdo-history-approach, .why-pdo-history-note) {
  position: relative;
  margin-top: 48px;
  padding: 28px 32px 28px 36px;
  background: var(--oh-verdigris-soft);
  border-left: 4px solid var(--oh-verdigris);
  border-radius: 0 2px 2px 0;
}

body:has(#ontario-history-hero) :is(.curriculum-note, .history-update-note, .grade-history-note, .history-topic-note, .world-history-note, .inquiry-note, .history-writing-note, .assessment-note, .personalised-history-note, .history-students-closing, .history-learning-note, .why-pdo-history-approach, .why-pdo-history-note) h3 {
  font-size: 1.28rem;
}

body:has(#ontario-history-hero) :is(.curriculum-note, .history-update-note, .grade-history-note, .history-topic-note, .world-history-note, .inquiry-note, .history-writing-note, .assessment-note, .personalised-history-note, .history-students-closing, .history-learning-note, .why-pdo-history-approach, .why-pdo-history-note) p {
  max-width: 76ch;
  color: #2f3a38;
}

/* The approach block in "Why PDO" is the argument — make it bold */
body:has(#ontario-history-hero) .why-pdo-history-approach {
  background: var(--oh-ink);
  border-left-color: #9fd0c9;
}

body:has(#ontario-history-hero) .why-pdo-history-approach h3 {
  color: #fbf8f3;
}

body:has(#ontario-history-hero) .why-pdo-history-approach p {
  color: #cfc8be;
}

/* ==========================================================
   HOW IT WORKS — two-column timeline (1–4, then 5–8)
   ========================================================== */

body:has(#ontario-history-hero) .history-learning-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 5vw, 72px);
}

body:has(#ontario-history-hero) .history-learning-step {
  position: relative;
  padding: 0 0 34px 64px;
}

body:has(#ontario-history-hero) .history-learning-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--oh-line);
  transition: background-color .35s var(--oh-ease);
}

body:has(#ontario-history-hero) .history-learning-step:nth-child(4)::before,
body:has(#ontario-history-hero) .history-learning-step:nth-child(8)::before {
  display: none;
}

body:has(#ontario-history-hero) .history-learning-step .step-number {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oh-paper);
  border: 2px solid var(--oh-verdigris);
  font-family: var(--oh-mono);
  font-size: .82rem;
  color: var(--oh-verdigris);
  transition: background-color .3s var(--oh-ease), color .3s, transform .35s var(--oh-ease);
}

body:has(#ontario-history-hero) .history-learning-step h3 {
  font-size: 1.24rem;
  padding-top: 6px;
  transition: color .3s var(--oh-ease);
}

body:has(#ontario-history-hero) .history-learning-step p {
  font-size: .97rem;
  color: var(--oh-muted);
}

@media (hover: hover) {
  body:has(#ontario-history-hero) .history-learning-step:hover .step-number {
    background: var(--oh-verdigris);
    color: #ffffff;
    transform: scale(1.08);
  }
  body:has(#ontario-history-hero) .history-learning-step:hover::before {
    background: var(--oh-verdigris);
  }
  body:has(#ontario-history-hero) .history-learning-step:hover h3 {
    color: var(--oh-verdigris);
  }
}

/* ==========================================================
   FINAL CTA
   ========================================================== */

body:has(#ontario-history-hero) .ontario-history-final-cta {
  --oh-bg: var(--oh-ink);
  overflow: hidden;
  color: #cfc8be;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(46, 110, 104, .35), transparent 65%),
    var(--oh-ink);
}

body:has(#ontario-history-hero) .ontario-history-final-cta .final-cta-content {
  max-width: 800px;
}

body:has(#ontario-history-hero) .ontario-history-final-cta .cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--oh-mono);
  font-size: .82rem;
  letter-spacing: .05em;
  color: #9fd0c9;
}

body:has(#ontario-history-hero) .ontario-history-final-cta .cta-eyebrow::before {
  content: "";
  width: 36px;
  height: 1.5px;
  background: currentColor;
}

body:has(#ontario-history-hero) .ontario-history-final-cta h2 {
  color: #fbf8f3;
}

body:has(#ontario-history-hero) .ontario-history-final-cta p {
  max-width: 64ch;
  color: #bdb5aa;
}

body:has(#ontario-history-hero) .ontario-history-final-cta .final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ==========================================================
   FAQ — catalogued questions
   ========================================================== */

body:has(#ontario-history-hero) #history-faq .faq-list {
  max-width: 920px;
  counter-reset: oh-q;
  border-top: 1px solid var(--oh-line);
}

body:has(#ontario-history-hero) #history-faq .faq-item {
  counter-increment: oh-q;
  border-bottom: 1px solid var(--oh-line);
  transition: background-color .3s var(--oh-ease);
}

body:has(#ontario-history-hero) #history-faq .faq-item[open] {
  background: var(--oh-paper);
}

body:has(#ontario-history-hero) #history-faq summary {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: baseline;
  padding: 24px 64px 24px 18px;
  cursor: pointer;
  font-family: var(--oh-serif);
  font-weight: 600;
  font-size: clamp(1.12rem, 1.8vw, 1.28rem);
  line-height: 1.45;
  color: var(--oh-ink);
  transition: color .25s var(--oh-ease);
}

body:has(#ontario-history-hero) #history-faq summary::-webkit-details-marker {
  display: none;
}

body:has(#ontario-history-hero) #history-faq summary::before {
  content: "Q." counter(oh-q, decimal-leading-zero);
  font-family: var(--oh-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--oh-verdigris);
}

body:has(#ontario-history-hero) #history-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--oh-line);
  font-family: var(--oh-sans);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--oh-verdigris);
  transition: transform .35s var(--oh-ease), background-color .3s, color .3s, box-shadow .3s;
}

body:has(#ontario-history-hero) #history-faq .faq-item[open] summary::after {
  transform: rotate(45deg);
  background: var(--oh-verdigris);
  color: #ffffff;
  box-shadow: none;
}

@media (hover: hover) {
  body:has(#ontario-history-hero) #history-faq summary:hover {
    color: var(--oh-verdigris);
  }
  body:has(#ontario-history-hero) #history-faq .faq-item:not([open]) summary:hover::after {
    box-shadow: inset 0 0 0 1.5px var(--oh-verdigris);
  }
}

body:has(#ontario-history-hero) #history-faq summary:focus-visible {
  outline: 3px solid var(--oh-verdigris);
  outline-offset: -3px;
}

body:has(#ontario-history-hero) #history-faq .faq-answer {
  padding: 0 64px 26px 82px;
}

body:has(#ontario-history-hero) #history-faq .faq-item[open] .faq-answer {
  animation: oh-open .4s var(--oh-ease) both;
}

body:has(#ontario-history-hero) #history-faq .faq-answer p {
  max-width: 70ch;
  color: var(--oh-text);
}

/* ==========================================================
   MOTION
   ========================================================== */

@keyframes oh-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes oh-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes oh-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) *,
  body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) *::before,
  body:has(#ontario-history-hero) :is(.ontario-history-hero, .hero-section, .content-section, .ontario-history-final-cta, .faq-section) *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {
  body:has(#ontario-history-hero) .grade-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(#ontario-history-hero) .writing-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  body:has(#ontario-history-hero) .writing-process-grid::before {
    display: none;
  }
}

@media (max-width: 760px) {
  body:has(#ontario-history-hero) :is(.history-intro-content, .history-update-intro, .canadian-history-intro, .world-history-intro, .inquiry-intro, .writing-intro, .assessment-intro, .personalised-history-intro) {
    columns: 1;
  }

  body:has(#ontario-history-hero) :is(.history-focus-grid, .curriculum-support-grid, .history-update-grid, .history-topic-grid, .world-history-grid, .historical-thinking-grid, .history-writing-grid, .assessment-support-grid, .personalised-history-grid, .history-students-grid, .why-pdo-history-grid, .inquiry-process, .world-history-skill-grid, .source-analysis-grid, .writing-support-list, .assessment-method-grid, .learning-process-grid, .history-online-benefits-grid),
  body:has(#ontario-history-hero) .grade-history-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body:has(#ontario-history-hero) .writing-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(#ontario-history-hero) .history-learning-steps {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  body:has(#ontario-history-hero) .history-learning-step:nth-child(4)::before {
    display: block;
  }

  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlights {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight,
  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight + .hero-highlight {
    padding: 22px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  body:has(#ontario-history-hero) #ontario-history-hero .hero-highlight:last-child {
    border-bottom: 0;
  }

  body:has(#ontario-history-hero) #ontario-history-hero .hero-btn,
  body:has(#ontario-history-hero) .ontario-history-final-cta .cta-btn {
    flex: 1 1 100%;
  }

  body:has(#ontario-history-hero) #history-faq summary {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 20px 58px 20px 16px;
  }

  body:has(#ontario-history-hero) #history-faq .faq-answer {
    padding: 0 20px 22px 16px;
  }

  body:has(#ontario-history-hero) :is(.curriculum-note, .history-update-note, .grade-history-note, .history-topic-note, .world-history-note, .inquiry-note, .history-writing-note, .assessment-note, .personalised-history-note, .history-students-closing, .history-learning-note, .why-pdo-history-approach, .why-pdo-history-note) {
    padding: 24px 22px 24px 24px;
  }
}/* End custom CSS */
/* Start custom CSS *//* ===========================
   SAFE FULL-WIDTH OVERRIDE
   (NO 100vw, NO OVERFLOW)
=========================== */

/* Allow theme to stretch */
.site,
.site-content,
.content-area,
.wrap,
.page-wrap {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Elementor root */
.elementor {
  max-width: 100% !important;
}

/* Elementor sections full width */
.elementor-section {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===========================
   HERO – FULL SCREEN, CENTERED
=========================== */

.hero {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  box-sizing: border-box;
}

/* Keep hero content aligned */
.hero > * {
  max-width: 1200px;
  margin: auto;
}

/* ===========================
   MOBILE SAFETY
=========================== */

@media (max-width: 768px) {
  .hero {
    min-height: 90vh;
    padding: 50px 16px;
    text-align: center;
  }
}




/* ===========================
   MOBILE VISIBILITY FIX
=========================== */

@media (max-width: 768px) {

  /* Restore section spacing */
  section {
    padding: 40px 16px !important;
    margin: 0 !important;
  }

  /* Ensure all sections show fully */
  section,
  .elementor-section {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Fix grids stacking visibility */
  .stats,
  .features-grid,
  .subject-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Prevent text from shrinking */
  p, li {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Ensure background sections are visible */
  .subjects,
  .trust,
  .national-cbse,
  .global-cbse,
  .national-icse,
  .global-icse,
  .national-igcse,
  .global-igcse {
    background-clip: padding-box;
    padding: 40px 16px !important;
  }
}/* End custom CSS */