.elementor-12731 .elementor-element.elementor-element-9a6bf2d{--display:flex;}body.elementor-page-12731:not(.elementor-motion-effects-element-type-background), body.elementor-page-12731 > .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-b7e8d0f *//* ==========================================================================
   ONTARIO BIOLOGY ONLINE TUITION — PREMIUM STYLESHEET
   Concept: "The Herbarium Sheet" — a naturalist's field-journal aesthetic:
   kraft specimen paper, deep botanical-ink type, a rust accession-stamp
   accent, growth-ring texture, and a hero styled as a taped-down mounted
   specimen sheet. Built to stand entirely apart from a lab-bench/molecular
   identity (teal + amber + hex lattice) — this page is paper, pressed
   leaves and field notes, not glassware.

   SCOPING NOTE
   Every rule is anchored to this page's own markup via
   [class*="ontario-biology-"] (section wrappers) or the shared component
   suffixes already in the HTML — [class$="-grid"], [class$="-card"],
   .section-note, .eyebrow, .btn — plus the few one-off classes that don't
   follow the suffix pattern (.cellular-biology-block, .biology-process,
   .biology-process-step, .step-number, .faq-item). No bare tag .elementor-12731 .elementor-element.elementor-element-b7e8d0fs
   are left unscoped, and the native <details>/<summary> FAQ markup is
   scoped under .ontario-biology-faq. Alternating section backgrounds are
   assigned by explicit class name, never by :nth-of-type. No HTML changes
   required.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  --bio-bg:        #F4EFE1;
  --bio-bg-alt:    #EAE1C8;
  --bio-card:      #FFFEF8;
  --bio-ink:       #20301B;
  --bio-ink-soft:  #56624A;
  --bio-green:     #365A2C;
  --bio-green-soft:#A9C29A;
  --bio-rust:      #A2491F;
  --bio-rust-dark: #7C3612;
  --bio-gold:      #C4922F;
  --bio-line:      #DCD2B4;
  --bio-shadow:    0 12px 28px rgba(32,48,27,0.14);

  --bio-font-display: 'Fraunces', Georgia, serif;
  --bio-font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --bio-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --bio-measure: 65ch;
  --bio-radius: 4px;
}

/* ---------- Scoped reset & base ---------- */
[class*="ontario-biology-"],
[class*="ontario-biology-"] *{
  box-sizing: border-box;
}

[class*="ontario-biology-"]{
  background-color: var(--bio-bg);
  color: var(--bio-ink);
  font-family: var(--bio-font-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* growth-ring texture — concentric arcs anchored to the top-right corner
   of every section, like a cross-section through a stem or a trunk,
   applied uniformly rather than a different motif per section */
section[class*="ontario-biology-"]{
  background-image:
    repeating-radial-gradient(circle at 102% -6%,
      rgba(54,90,44,0.06) 0 1px, transparent 1px 34px);
}

[class*="ontario-biology-"] h1,
[class*="ontario-biology-"] h2,
[class*="ontario-biology-"] h3{
  font-family: var(--bio-font-display);
  color: var(--bio-ink);
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

[class*="ontario-biology-"] h1{ font-size: clamp(2.3rem, 4.1vw, 3.3rem); font-weight: 700; }
[class*="ontario-biology-"] h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
[class*="ontario-biology-"] h3{ font-size: 1.16rem; font-weight: 600; }

[class*="ontario-biology-"] p{ margin: 0 0 1em; max-width: var(--bio-measure); color: var(--bio-ink-soft); }

[class*="ontario-biology-"] p a,
[class*="ontario-biology-"] li a{
  color: var(--bio-green);
  text-decoration-color: var(--bio-green-soft);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
[class*="ontario-biology-"] p a:hover,
[class*="ontario-biology-"] li a:hover{
  color: var(--bio-rust-dark);
  text-decoration-color: var(--bio-rust);
}

section[class*="ontario-biology-"] > .container{
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

section[class*="ontario-biology-"]{
  padding: 92px 0;
  border-bottom: 1px solid var(--bio-line);
  position: relative;
}

/* explicit alternating stock — assigned by section name, never by
   sibling position, so it reads as a deliberate rhythm */
.ontario-biology-learning-areas,
.ontario-biology-genetics,
.ontario-biology-schoolwork,
.ontario-biology-why-pdo,
.ontario-biology-skills,
.ontario-biology-faq{
  background-color: var(--bio-bg-alt);
}

/* ==========================================================================
   EYEBROW — a specimen accession label, not a tracked-out caption
   ========================================================================== */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bio-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bio-rust-dark);
  margin: 0 0 1rem;
}
.eyebrow::before{
  content: "";
  width: 16px;
  height: 1px;
  background: var(--bio-rust);
  flex-shrink: 0;
}

.section-heading{ max-width: 640px; margin: 0 0 3.2rem; }
.section-heading p:last-child{ margin-bottom: 0; }

/* ==========================================================================
   NOTE CALLOUTS — dashed like a pressed-specimen mounting tag
   ========================================================================== */
.section-note{
  margin-top: 2.8rem;
  padding: 22px 26px;
  border: 1px dashed var(--bio-line);
  border-left: 3px solid var(--bio-rust);
  background: rgba(162,73,31,0.05);
  border-radius: 0 var(--bio-radius) var(--bio-radius) 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.section-note:hover{
  background: rgba(162,73,31,0.08);
  border-left-color: var(--bio-green);
}
.section-note h3{
  font-family: var(--bio-font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--bio-rust-dark);
  letter-spacing: 0.01em;
  margin-bottom: 0.5em;
}
.section-note p{ margin: 0; font-size: 0.98rem; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
[class*="ontario-biology-"] .btn{
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--bio-font-body);
  font-weight: 600;
  font-size: 0.97rem;
  padding: 0.85em 1.7em;
  border-radius: var(--bio-radius);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
              color 0.15s ease, border-color 0.15s ease;
}

[class*="ontario-biology-"] .btn-primary{
  background: var(--bio-green);
  color: #FBFAF2;
  box-shadow: var(--bio-shadow);
}
[class*="ontario-biology-"] .btn-primary:hover{
  background: #294621;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(32,48,27,0.22);
}
[class*="ontario-biology-"] .btn-primary:active{ transform: translateY(0); }

[class*="ontario-biology-"] .btn-secondary{
  background: transparent;
  color: var(--bio-ink);
  border-color: var(--bio-green-soft);
}
[class*="ontario-biology-"] .btn-secondary:hover{
  background: var(--bio-green);
  border-color: var(--bio-green);
  color: #FBFAF2;
}

[class*="ontario-biology-"] .btn:focus-visible{
  outline: 2px solid var(--bio-rust);
  outline-offset: 3px;
}

.hero-actions, .final-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.1rem;
}

/* ==========================================================================
   HERO — styled as a mounted, taped-down specimen sheet
   ========================================================================== */
.ontario-biology-hero{
  padding: 108px 0 96px;
  overflow: hidden;
}

.ontario-biology-hero > .container{ position: relative; }

.hero-content{
  position: relative;
  max-width: 660px;
  background: var(--bio-card);
  border: 1px solid var(--bio-line);
  padding: 44px 46px 40px;
  box-shadow: var(--bio-shadow);
}

/* two pieces of "washi tape" holding the sheet down */
.hero-content::before,
.hero-content::after{
  content: "";
  position: absolute;
  width: 64px;
  height: 22px;
  background: rgba(196,146,47,0.55);
  border: 1px solid rgba(124,54,18,0.18);
  box-shadow: 0 3px 6px rgba(32,48,27,0.12);
}
.hero-content::before{ top: -12px; left: 34px; transform: rotate(-6deg); }
.hero-content::after{ top: -12px; right: 46px; transform: rotate(4deg); }

.ontario-biology-hero h1{ margin-top: 0.1em; }

.hero-intro{ font-size: 1.08rem; color: var(--bio-ink); }

/* large growth-ring cross-section bleeding off the right edge behind
   the sheet — the page's one big illustrative gesture */
.ontario-biology-hero::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -180px;
  width: 520px;
  height: 520px;
  transform: translateY(-50%);
  background-image: repeating-radial-gradient(circle,
    rgba(54,90,44,0.14) 0 2px, transparent 2px 22px);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 76%);
          mask-image: radial-gradient(circle, #000 55%, transparent 76%);
  pointer-events: none;
}

/* ==========================================================================
   SHARED CARD-GRID SYSTEM
   ========================================================================== */
[class$="-grid"]{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 2rem;
}

.biology-course-grid,
.biology-genetics-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

article[class$="-card"]{
  position: relative;
  background: var(--bio-card);
  border: 1px solid var(--bio-line);
  border-radius: var(--bio-radius);
  padding: 30px 26px 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* a small rust "pin" marking the specimen — scales in on hover, as if
   pinning the card to a board */
article[class$="-card"]::before{
  content: "";
  position: absolute;
  top: -6px; left: 22px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bio-rust);
  box-shadow: 0 2px 4px rgba(124,54,18,0.35);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

article[class$="-card"]:hover{
  border-color: var(--bio-green-soft);
  transform: translateY(-4px);
  box-shadow: var(--bio-shadow);
}
article[class$="-card"]:hover::before{
  opacity: 1;
  transform: scale(1);
}

article[class$="-card"] h3{
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-size: 1.1rem;
  margin-bottom: 0.55em;
}
article[class$="-card"] h3::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--bio-rust);
  transition: width 0.25s ease;
}
article[class$="-card"]:hover h3::after{ width: 100%; }

article[class$="-card"] p{ font-size: 0.96rem; margin-bottom: 0; }

/* ==========================================================================
   COURSE CARDS — herbarium accession tiles, deckled top edge, stamped
   catalogue number
   ========================================================================== */
.biology-course-grid{ counter-reset: spectile; }

.biology-course-card{
  counter-increment: spectile;
  padding-top: 44px;
  border-top: none;
  position: relative;
  overflow: visible;
}

/* torn/deckled top edge, like a sheet pulled from a specimen pad */
.biology-course-card::after{
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 8px;
  background-color: var(--bio-card);
  background-image:
    linear-gradient(135deg, var(--bio-bg) 50%, transparent 50%),
    linear-gradient(45deg, var(--bio-bg) 50%, transparent 50%);
  background-size: 14px 14px;
  background-repeat: repeat-x;
  background-position: top left;
}

.biology-course-card::before{
  content: "No. " counter(spectile, decimal-leading-zero);
  position: absolute;
  top: 16px; left: 22px;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--bio-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bio-rust);
  transform: rotate(-2deg);
  opacity: 1;
}
.biology-course-card:hover::before{ color: var(--bio-rust-dark); transform: rotate(0deg) scale(1); }

.biology-course-card h3{
  font-family: var(--bio-font-mono);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--bio-green);
  letter-spacing: 0.005em;
}
.biology-course-card:hover h3{ color: var(--bio-rust-dark); }

/* ==========================================================================
   CELLULAR BIOLOGY — margin-note blocks, not cards
   ========================================================================== */
.cellular-biology-content{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px 46px;
  margin-top: 2rem;
}

.cellular-biology-block{
  padding-left: 18px;
  border-left: 2px solid var(--bio-line);
  transition: border-color 0.25s ease;
}
.cellular-biology-block:hover{ border-left-color: var(--bio-rust); }

.cellular-biology-block h3{
  font-size: 1.06rem;
  transition: color 0.2s ease;
}
.cellular-biology-block:hover h3{ color: var(--bio-rust-dark); }
.cellular-biology-block p{ font-size: 0.96rem; }

/* ==========================================================================
   LITERAL BIOLOGY-WORLD WATERMARKS
   Each of these sections gets one faint, hand-drawn-style illustration
   tied to what it's actually about — a cell, a helix, a leaf, a pulse
   trace, a magnifying glass, a branching tree — rather than an abstract
   pattern repeated everywhere. Kept faint (≤18% opacity) and set behind
   the content (z-index:0, container sits at z-index:1) so it reads as a
   watermark on the page, not decoration competing with the copy.
   ========================================================================== */

.ontario-biology-cellular::before,
.ontario-biology-genetics::before,
.ontario-biology-ecology::before,
.ontario-biology-investigation::before,
.ontario-biology-skills::before,
.ontario-biology-learning-areas::before{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* Cellular Biology — a cell with nucleus and scattered organelles */
.ontario-biology-cellular::before{
  top: 8%; right: 4%;
  width: 260px; height: 260px;
  opacity: 0.16;
  animation: bio-cell-spin 50s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='95' fill='none' stroke='%23365A2C' stroke-width='2'/%3E%3Ccircle cx='95' cy='105' r='32' fill='none' stroke='%23365A2C' stroke-width='2'/%3E%3Ccircle cx='150' cy='155' r='7' fill='%23365A2C'/%3E%3Ccircle cx='165' cy='95' r='5' fill='%23365A2C'/%3E%3Ccircle cx='80' cy='165' r='5' fill='%23365A2C'/%3E%3Ccircle cx='60' cy='90' r='4' fill='%23365A2C'/%3E%3C/svg%3E");
  background-size: contain;
}

/* Genetics — a double helix with rungs */
.ontario-biology-genetics::before{
  top: 6%; right: 6%;
  width: 150px; height: 340px;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 320'%3E%3Cpath d='M20 0 C60 30 -20 70 20 100 C60 130 -20 170 20 200 C60 230 -20 270 20 300' fill='none' stroke='%23A2491F' stroke-width='2'/%3E%3Cpath d='M100 0 C60 30 140 70 100 100 C60 130 140 170 100 200 C60 230 140 270 100 300' fill='none' stroke='%23A2491F' stroke-width='2'/%3E%3Cline x1='22' y1='15' x2='98' y2='15' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='55' x2='98' y2='55' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='95' x2='98' y2='95' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='135' x2='98' y2='135' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='175' x2='98' y2='175' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='215' x2='98' y2='215' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='255' x2='98' y2='255' stroke='%23A2491F' stroke-width='1.5'/%3E%3Cline x1='22' y1='295' x2='98' y2='295' stroke='%23A2491F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: contain;
}

/* Ecology — a leaf with a center vein and side veins */
.ontario-biology-ecology::before{
  bottom: 4%; right: 5%;
  width: 220px; height: 280px;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260'%3E%3Cpath d='M100 10 C165 45 185 130 100 250 C15 130 35 45 100 10 Z' fill='none' stroke='%23365A2C' stroke-width='2'/%3E%3Cline x1='100' y1='25' x2='100' y2='235' stroke='%23365A2C' stroke-width='1.5'/%3E%3Cline x1='100' y1='70' x2='60' y2='100' stroke='%23365A2C' stroke-width='1.2'/%3E%3Cline x1='100' y1='70' x2='140' y2='100' stroke='%23365A2C' stroke-width='1.2'/%3E%3Cline x1='100' y1='120' x2='55' y2='155' stroke='%23365A2C' stroke-width='1.2'/%3E%3Cline x1='100' y1='120' x2='145' y2='155' stroke='%23365A2C' stroke-width='1.2'/%3E%3Cline x1='100' y1='170' x2='70' y2='200' stroke='%23365A2C' stroke-width='1.2'/%3E%3Cline x1='100' y1='170' x2='130' y2='200' stroke='%23365A2C' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: contain;
}

/* Scientific Investigation & Skills — a magnifying glass over data points */
.ontario-biology-investigation::before,
.ontario-biology-skills::before{
  top: 10%; right: 6%;
  width: 210px; height: 210px;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='85' cy='85' r='55' fill='none' stroke='%23A2491F' stroke-width='2'/%3E%3Cline x1='124' y1='124' x2='175' y2='175' stroke='%23A2491F' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='65' cy='70' r='4' fill='%23A2491F'/%3E%3Ccircle cx='100' cy='95' r='3' fill='%23A2491F'/%3E%3Ccircle cx='75' cy='105' r='3' fill='%23A2491F'/%3E%3C/svg%3E");
  background-size: contain;
}

/* Explore Key Areas — a branching tree of life, since this section
   surveys every biological topic on the page */
.ontario-biology-learning-areas::before{
  bottom: 2%; left: 3%;
  width: 220px; height: 240px;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 260'%3E%3Cline x1='120' y1='260' x2='120' y2='190' stroke='%23365A2C' stroke-width='2'/%3E%3Cline x1='120' y1='190' x2='70' y2='140' stroke='%23365A2C' stroke-width='2'/%3E%3Cline x1='120' y1='190' x2='170' y2='140' stroke='%23365A2C' stroke-width='2'/%3E%3Cline x1='70' y1='140' x2='40' y2='90' stroke='%23365A2C' stroke-width='1.5'/%3E%3Cline x1='70' y1='140' x2='90' y2='90' stroke='%23365A2C' stroke-width='1.5'/%3E%3Cline x1='170' y1='140' x2='150' y2='90' stroke='%23365A2C' stroke-width='1.5'/%3E%3Cline x1='170' y1='140' x2='200' y2='90' stroke='%23365A2C' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='90' r='4' fill='%23365A2C'/%3E%3Ccircle cx='90' cy='90' r='4' fill='%23365A2C'/%3E%3Ccircle cx='150' cy='90' r='4' fill='%23365A2C'/%3E%3Ccircle cx='200' cy='90' r='4' fill='%23365A2C'/%3E%3C/svg%3E");
  background-size: contain;
}

/* Anatomy & Physiology — a heartbeat / pulse trace running as a band,
   since this is the only motif that reads better as a line than an icon */
.ontario-biology-anatomy::before{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 22%;
  left: 0; right: 0;
  height: 64px;
  opacity: 0.16;
  background-repeat: repeat-x;
  background-size: 300px 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cpath d='M0 55 L70 55 L85 20 L100 85 L115 10 L130 55 L400 55' fill='none' stroke='%23A2491F' stroke-width='2'/%3E%3C/svg%3E");
}

@media (max-width: 860px){
  .ontario-biology-cellular::before,
  .ontario-biology-genetics::before,
  .ontario-biology-ecology::before,
  .ontario-biology-investigation::before,
  .ontario-biology-skills::before,
  .ontario-biology-learning-areas::before{
    opacity: 0.09;
    width: 160px; height: 160px;
  }
  .ontario-biology-anatomy::before{ opacity: 0.1; }
}

/* slow, continuous spin — the cell turns steadily around its own
   nucleus, the one piece of ambient motion on this page. (The hero's
   growth-ring graphic is radially symmetric, so spinning it wouldn't
   actually be visible — the cell's off-center nucleus and organelles
   are what make the rotation read.) */
@keyframes bio-cell-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ==========================================================================
   HOW IT WORKS — a field-journal spine
   Steps alternate left and right of a running vertical spine, each
   connected by a short stitch, like marginal notes pinned along the
   binding of a field notebook. A genuine sequence, so the alternation
   encodes order rather than decorating at random.
   ========================================================================== */
.ontario-biology-how-it-works .biology-process{
  position: relative;
  margin-top: 3.2rem;
  padding: 4px 0;
}

.biology-process::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to bottom, var(--bio-green) 0 6px, transparent 6px 12px
  );
  opacity: 0.55;
}

.biology-process-step{
  position: relative;
  width: 45%;
  padding: 22px 24px;
  margin-bottom: 34px;
  background: var(--bio-card);
  border: 1px solid var(--bio-line);
  border-radius: var(--bio-radius);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.biology-process-step:nth-child(odd){ margin-right: 55%; text-align: right; }
.biology-process-step:nth-child(even){ margin-left: 55%; text-align: left; }

/* stitch connecting the card to the spine */
.biology-process-step::after{
  content: "";
  position: absolute;
  top: 30px;
  width: 26px;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right, var(--bio-rust) 0 3px, transparent 3px 6px
  );
}
.biology-process-step:nth-child(odd)::after{ right: -26px; }
.biology-process-step:nth-child(even)::after{ left: -26px; }

.biology-process-step:hover{
  transform: translateY(-3px);
  border-color: var(--bio-green-soft);
  box-shadow: var(--bio-shadow);
}

.step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 2px solid var(--bio-green);
  color: var(--bio-green);
  font-family: var(--bio-font-mono);
  font-weight: 600;
  font-size: 0.76rem;
  background: var(--bio-card);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.biology-process-step:nth-child(even) .step-number{ order: -1; }
.biology-process-step:hover .step-number{
  border-color: var(--bio-rust);
  color: var(--bio-rust-dark);
  transform: scale(1.08);
}

.biology-process-step h3{ font-size: 1.02rem; }
.biology-process-step p{ font-size: 0.94rem; margin-left: auto; margin-right: auto; }
.biology-process-step:nth-child(odd) p{ margin-right: 0; }
.biology-process-step:nth-child(even) p{ margin-left: 0; }

@media (max-width: 820px){
  .biology-process::before{ left: 10px; }
  .biology-process-step,
  .biology-process-step:nth-child(odd),
  .biology-process-step:nth-child(even){
    width: auto;
    margin-left: 34px;
    margin-right: 0;
    text-align: left;
  }
  .biology-process-step::after,
  .biology-process-step:nth-child(odd)::after,
  .biology-process-step:nth-child(even)::after{ left: -26px; right: auto; }
  .biology-process-step:nth-child(even) .step-number{ order: 0; }
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.ontario-biology-final-cta{
  background-color: var(--bio-ink);
  border-bottom: none;
  overflow: hidden;
}

.ontario-biology-final-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(circle at 100% 0%,
    rgba(244,239,225,0.07) 0 1px, transparent 1px 30px);
  pointer-events: none;
}

.ontario-biology-final-cta > .container{ position: relative; }
.final-cta-content{ max-width: 660px; }

.ontario-biology-final-cta h2{ color: #F7F4E9; }
.ontario-biology-final-cta p{ color: rgba(247,244,233,0.78); }
.ontario-biology-final-cta .eyebrow{ color: var(--bio-gold); }
.ontario-biology-final-cta .eyebrow::before{ background: var(--bio-gold); }

.ontario-biology-final-cta .btn-primary{
  background: var(--bio-rust);
  color: #FBF3EA;
}
.ontario-biology-final-cta .btn-primary:hover{
  background: #B85826;
  box-shadow: 0 16px 32px rgba(162,73,31,0.3);
}

/* ==========================================================================
   FAQ — native <details>/<summary>, scoped explicitly
   ========================================================================== */
.ontario-biology-faq > .container{ max-width: 800px; }

.faq-list{ border-top: 1px solid var(--bio-line); }

.ontario-biology-faq .faq-item{
  border-bottom: 1px solid var(--bio-line);
  padding: 2px 0;
}

.ontario-biology-faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  font-family: var(--bio-font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--bio-ink);
  padding: 18px 4px;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.ontario-biology-faq summary::-webkit-details-marker{ display: none; }
.ontario-biology-faq summary::marker{ content: ""; }

.ontario-biology-faq summary:hover{ color: var(--bio-green); padding-left: 8px; }
.ontario-biology-faq summary:focus-visible{
  outline: 2px solid var(--bio-rust);
  outline-offset: 4px;
}

/* toggle: a small square specimen-tag flap that rotates open */
.ontario-biology-faq summary::after{
  content: "";
  flex-shrink: 0;
  position: relative;
  width: 20px; height: 20px;
  border: 1.5px solid var(--bio-green-soft);
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.ontario-biology-faq summary::before{
  content: "";
  position: absolute;
  right: 27px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--bio-rust);
  border-bottom: 1.5px solid var(--bio-rust);
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ontario-biology-faq summary:hover::after{ border-color: var(--bio-rust); }

.ontario-biology-faq .faq-item[open] summary::after{
  background: var(--bio-rust);
  border-color: var(--bio-rust);
  transform: rotate(0deg);
}
.ontario-biology-faq .faq-item[open] summary::before{
  transform: rotate(225deg);
  border-color: #fff;
}

.faq-answer p{ padding: 0 4px 20px; margin: 0; font-size: 0.98rem; max-width: 62ch; }

/* ==========================================================================
   ACCESSIBILITY & MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  [class*="ontario-biology-"],
  [class*="ontario-biology-"] *{
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .ontario-biology-cellular::before{ animation: none; }
}

[class*="ontario-biology-"] a:focus-visible,
[class*="ontario-biology-"] button:focus-visible{
  outline: 2px solid var(--bio-rust);
  outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px){
  section[class*="ontario-biology-"]{ padding: 64px 0; }
  section[class*="ontario-biology-"] > .container{ padding: 0 22px; }

  .ontario-biology-hero{ padding: 76px 0 60px; }
  .hero-content{ padding: 32px 26px 30px; }
  .hero-content::before, .hero-content::after{ display: none; }
  .ontario-biology-hero::after{ right: -240px; opacity: 0.5; }

  [class$="-grid"]{ grid-template-columns: 1fr; }
  .cellular-biology-content{ grid-template-columns: 1fr; }

  .hero-actions, .final-cta-actions{ flex-direction: column; align-items: stretch; }
  [class*="ontario-biology-"] .btn{ justify-content: center; }
}

@media (max-width: 480px){
  [class*="ontario-biology-"] h1{ font-size: 2rem; }
  [class*="ontario-biology-"] h2{ font-size: 1.4rem; }
}

/* ==================================================
   PDO TUITION SERVICES
   ONTARIO BIOLOGY ONLINE TUITION
   SUBJECT + INTERNATIONAL CURRICULUM CROSS-LINKS
================================================== */

/* 1. Shared section styling */

.ontario-physics-subject-links-section,
.physics-curriculum-cross-links-section {
  position: relative;
  padding: 60px 20px;
  background: #f5f8fc;
  font-family: inherit;
  isolation: isolate;
}

.ontario-physics-subject-links-section *,
.physics-curriculum-cross-links-section *,
.ontario-physics-subject-links-section *::before,
.physics-curriculum-cross-links-section *::before,
.ontario-physics-subject-links-section *::after,
.physics-curriculum-cross-links-section *::after {
  box-sizing: border-box;
}

/* 2. Containers */

.ontario-physics-subject-links-section .container,
.physics-curriculum-cross-links-section .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 3. Section headings */

.ontario-physics-subject-links-section .section-heading,
.physics-curriculum-cross-links-section .section-heading {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}

.ontario-physics-subject-links-section .section-heading h2,
.physics-curriculum-cross-links-section .section-heading h2 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #12315b !important;
  -webkit-text-fill-color: #12315b !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: clamp(25px, 3vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.4px;
  text-transform: none !important;
  text-shadow: none !important;
}

.ontario-physics-subject-links-section .section-heading p,
.physics-curriculum-cross-links-section .section-heading p {
  margin: 0;
  color: #52647b;
  font-size: 16px;
  line-height: 1.8;
}

/* 4. Responsive card grids */

.ontario-physics-subject-links-grid,
.physics-curriculum-cross-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* 5. Subject and curriculum cards */

.ontario-physics-subject-link-card,
.physics-curriculum-cross-link-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 225px;
  padding: 25px 24px;
  background: #ffffff;
  border: 1px solid #e0e8f2;
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(24, 57, 97, 0.05);
  text-decoration: none !important;
  overflow-wrap: anywhere;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* 6. Card titles */

.ontario-physics-subject-link-card h3,
.physics-curriculum-cross-link-card h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #172b4d !important;
  -webkit-text-fill-color: #172b4d !important;
  background: transparent !important;
  background-image: none !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

/* 7. Card descriptions */

.ontario-physics-subject-link-card p,
.physics-curriculum-cross-link-card p {
  margin: 0 0 20px;
  padding: 0;
  color: #596b80;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.8;
}

/* 8. Card action links */

.ontario-physics-subject-link-card span,
.physics-curriculum-cross-link-card span {
  display: inline-block;
  margin-top: auto;
  padding-top: 4px;
  color: #1765c1;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* 9. Hover effects */

.ontario-physics-subject-link-card:hover,
.physics-curriculum-cross-link-card:hover {
  transform: translateY(-5px);
  border-color: #8ab8ed;
  box-shadow: 0 12px 28px rgba(24, 76, 139, 0.11);
  text-decoration: none !important;
}

.ontario-physics-subject-link-card:hover h3,
.physics-curriculum-cross-link-card:hover h3 {
  color: #0d47a1 !important;
  -webkit-text-fill-color: #0d47a1 !important;
}

.ontario-physics-subject-link-card:hover span,
.physics-curriculum-cross-link-card:hover span {
  color: #0b4fa8;
}

/* 10. Keyboard accessibility */

.ontario-physics-subject-link-card:focus-visible,
.physics-curriculum-cross-link-card:focus-visible {
  outline: 3px solid #1765c1;
  outline-offset: 4px;
}

/* ==================================================
   TABLET LAYOUT
================================================== */

@media (max-width: 900px) {
  .ontario-physics-subject-links-section,
  .physics-curriculum-cross-links-section {
    padding: 50px 18px;
  }

  .ontario-physics-subject-links-grid,
  .physics-curriculum-cross-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .ontario-physics-subject-link-card,
  .physics-curriculum-cross-link-card {
    min-height: 215px;
    padding: 23px 21px;
  }

  .ontario-physics-subject-link-card h3,
  .physics-curriculum-cross-link-card h3 {
    font-size: 17px !important;
  }
}

/* ==================================================
   MOBILE LAYOUT
================================================== */

@media (max-width: 600px) {
  .ontario-physics-subject-links-section,
  .physics-curriculum-cross-links-section {
    padding: 38px 16px;
  }

  .ontario-physics-subject-links-section .section-heading,
  .physics-curriculum-cross-links-section .section-heading {
    margin-bottom: 25px;
    text-align: left;
  }

  .ontario-physics-subject-links-section .section-heading h2,
  .physics-curriculum-cross-links-section .section-heading h2 {
    font-size: 25px !important;
    line-height: 1.4 !important;
  }

  .ontario-physics-subject-links-section .section-heading p,
  .physics-curriculum-cross-links-section .section-heading p {
    font-size: 15px;
    line-height: 1.75;
  }

  .ontario-physics-subject-links-grid,
  .physics-curriculum-cross-links-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .ontario-physics-subject-link-card,
  .physics-curriculum-cross-link-card {
    min-height: auto;
    padding: 22px 20px;
    border-radius: 12px;
  }

  .ontario-physics-subject-link-card h3,
  .physics-curriculum-cross-link-card h3 {
    margin-bottom: 9px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .ontario-physics-subject-link-card p,
  .physics-curriculum-cross-link-card p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.75;
  }

  .ontario-physics-subject-link-card span,
  .physics-curriculum-cross-link-card span {
    font-size: 14px;
  }

  .ontario-physics-subject-link-card:hover,
  .physics-curriculum-cross-link-card:hover {
    transform: translateY(-2px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .ontario-physics-subject-link-card,
  .physics-curriculum-cross-link-card,
  .ontario-physics-subject-link-card span,
  .physics-curriculum-cross-link-card span {
    transition: none;
  }

  .ontario-physics-subject-link-card:hover,
  .physics-curriculum-cross-link-card:hover {
    transform: none;
  }
}/* End custom CSS */