/* ============================================================
   HALIFAXCHILDCARE.CA — GLOBAL STYLES
   Ayeshah's Childcare Services, Bedford NS
   ============================================================ */

/* --- CSS VARIABLES --- */
:root {
  --primary: #4a7f8f;
  --primary-dark: #3a6878;
  --accent: #82b4c0;
  --bg: #f7f3ed;
  --gold: #c8a96e;
  --forest: #3a6878;
  --cream: #f7f3ed;
  --sage-light: #e4eef2;
  --pale-fill: #cce0e8;
  --pastel-fill: #e4eef2;
  --text-dark: #2a1f0e;
  --body-text: #2e261e;
  --muted: #5a4f44;
  --border: #d8d0c4;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.25s ease;
  --trans: 0.25s ease;
  --shadow: 0 4px 18px rgba(74,127,143,0.13);
  --shadow-lg: 0 8px 32px rgba(74,127,143,0.18);
  --green: #4a7f8f;
  --green-d: #3a6878;
  --green-light: #82b4c0;
  --pastel-green: #e4eef2;
  --white: #fffef9;
  --cream-dark: #ece5d8;
  --gold-light: #dcc79a;
  --btn: #c8a96e;
  --peach: #e8c9a0;
  --text-body: #2e261e;
  --text-muted: #5a4f44;
  --shadow-md: 0 4px 18px rgba(74,127,143,0.13);
  --beige: #f7f3ed;
  --body: #2e261e;
  --forest-mid: #43727f;
  --gold-pale: #e8dcc0;
  --green-pale: #d4e4ea;
  --sage: #82b4c0;
  --shadow-sm: 0 2px 10px rgba(74,127,143,0.10);
  --text: #2a1f0e;
}

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
  background: var(--bg);
  color: var(--body-text);
  line-height: 1.7;
  font-size: 16px;
}

/* CRITICAL: body must NOT have display:flex */

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--text-dark);
  margin-bottom: 0.5em;
  line-height: 1.3;
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.4em; }
li { margin-bottom: 0.35em; }

/* --- COPY PROTECTION --- */
body { user-select: none; -webkit-user-select: none; }
input, textarea, select, [contenteditable] { user-select: text; -webkit-user-select: text; }
img { -webkit-user-drag: none; pointer-events: none; }
@media print { body { display: none !important; } }

/* --- LABEL CLASS --- */
.label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

/* --- CONTAINER --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   NAVIGATION — BEM structure
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--primary-dark);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav__logo img {
  height: 44px;
  width: auto;
  pointer-events: none;
}

.nav__logo-name {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.3;
  font-weight: 400;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.nav__links li { white-space: nowrap; }

.nav__links a {
  color: rgba(255,255,255,0.88);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a.active { color: var(--gold); }

.nav__cta {
  background: var(--gold);
  color: var(--text-dark) !important;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600 !important;
}
.nav__cta:hover { background: #b8995e; color: #fff !important; }

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}
.nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
.nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--primary-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  padding: 14px 24px;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-decoration: none;
}
.nav__mobile a:hover { background: rgba(255,255,255,0.08); color: var(--gold); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 68px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('images/FC33A82C-16B5-4B39-AB72-EF4E52E7FBEF.jpeg');
  background-size: cover;
  background-position: 30% center;
  background-repeat: no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(58,104,120,0.82) 0%, rgba(74,127,143,0.55) 60%, rgba(0,0,0,0.2) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 60px 24px;
  margin-left: 8%;
}

.hero__label {
  display: inline-block;
  background: var(--gold);
  color: var(--text-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 18px;
}

.hero__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: #fff;
  font-family: Georgia, serif;
  line-height: 1.18;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 36px;
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  border: 2px solid transparent;
  font-family: 'Segoe UI', sans-serif;
}

.btn--primary {
  background: var(--gold);
  color: var(--text-dark);
  border-color: var(--gold);
}
.btn--primary:hover {
  background: #b8995e;
  border-color: #b8995e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,169,110,0.4);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.btn--outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--primary-dark);
  color: #fff;
  border-color: var(--primary-dark);
}
.btn--dark:hover {
  background: var(--forest);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn--gold {
  background: var(--gold);
  color: var(--text-dark);
  border-color: var(--gold);
}
.btn--gold:hover {
  background: #b8995e;
  border-color: #b8995e;
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline-dark {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}
.btn--outline-dark:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

.btn--lg {
  padding: 16px 34px;
  font-size: 1.05rem;
}

/* ============================================================
   STATS BAR — 3 blocks only
   ============================================================ */
.stats-bar {
  background: var(--primary-dark);
  padding: 28px 0;
}

.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 0;
}

.stat-block {
  text-align: center;
  padding: 12px 16px;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.stat-block:last-child { border-right: none; }

.stat-number {
  font-family: Georgia, serif;
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 400;
  line-height: 1.1;
  display: block;
}

.stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  display: block;
}

/* ============================================================
   ABOUT STRIP (homepage float layout)
   ============================================================ */
.about-strip {
  padding: 80px 0;
  background: var(--bg);
}

.about-strip__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.about-strip__photo {
  float: left;
  width: 280px;
  height: 320px;
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: var(--radius);
  margin-right: 36px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.about-strip__name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
  display: block;
}

.about-strip h2 { font-size: 2rem; margin-bottom: 14px; }
.about-strip p { color: var(--muted); line-height: 1.8; }
.clearfix::after { content: ''; display: table; clear: both; }

@media (max-width: 600px) {
  .about-strip__photo {
    width: 130px;
    height: 150px;
    margin-right: 18px;
  }
}

/* ============================================================
   GALLERY STRIP
   ============================================================ */
.gallery-strip {
  padding: 40px 0 60px;
  background: var(--bg);
  overflow: hidden;
}

.gallery-strip__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 24px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.gallery-strip__scroll::-webkit-scrollbar { height: 6px; }
.gallery-strip__scroll::-webkit-scrollbar-track { background: transparent; }
.gallery-strip__scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.gallery-strip__item {
  flex: 0 0 calc(33.333% - 12px);
  min-width: 260px;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: var(--shadow);
}

.gallery-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  pointer-events: none;
}
.gallery-strip__item:hover img { transform: scale(1.04); }

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--pastel-fill) 100%);
}

.section-header { text-align: center; margin-bottom: 48px; }
.section-header .label { display: block; margin-bottom: 10px; }
.section-header h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-header p { color: var(--muted); max-width: 560px; margin: 12px auto 0; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.feature-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(212,200,188,0.4);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--pastel-fill);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.7; }

/* ============================================================
   TESTIMONIALS — tcard-grid click-to-expand modal
   ============================================================ */
.testimonials {
  padding: 80px 0;
  background: var(--primary);
}

.testimonials .section-header h2 { color: #fff; }
.testimonials .section-header .label { color: var(--gold); background: rgba(200,169,110,0.15); padding: 5px 14px; border-radius: 50px; }
.testimonials .section-header p { color: rgba(255,255,255,0.8); }

.tcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.tcard {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
}
.tcard:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.tcard__quote {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tcard__author {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.tcard__expand {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  margin-top: 10px;
}

/* Testimonial Modal */
.tmodal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(30,20,10,0.65);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tmodal.open { display: flex; }

.tmodal__box {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px;
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: fadeInUp 0.25s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.tmodal__close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.tmodal__close:hover { color: var(--text-dark); }

.tmodal__quote {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--body-text);
  margin-bottom: 20px;
  font-style: italic;
}

.tmodal__author {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.95rem;
}

/* About page testimonials (white bg) */
.testimonials-full {
  padding: 80px 0;
  background: var(--bg);
}

.testimonials-full .tcard {
  background: #fff;
  border-color: var(--border);
}
.testimonials-full .tcard:hover { background: var(--pastel-fill); }
.testimonials-full .tcard__quote { color: var(--muted); }
.testimonials-full .tcard__author { color: var(--primary); }
.testimonials-full .tcard__expand { color: var(--muted); }
.testimonials-full .section-header h2 { color: var(--text-dark); }
.testimonials-full .section-header .label { color: var(--primary); background: var(--pastel-fill); padding: 5px 14px; border-radius: 50px; }
.testimonials-full .tmodal__quote { color: var(--body-text); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  padding: 80px 0;
  background: var(--primary-dark);
  text-align: center;
}

.cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.cta-banner p { color: rgba(255,255,255,0.8); max-width: 540px; margin: 0 auto 32px; font-size: 1.05rem; }
.cta-banner .hero__actions { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--forest);
  color: rgba(255,255,255,0.75);
  padding: 48px 0 24px;
}

.footer .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 36px;
}

.footer__brand-name {
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.footer__brand-tag {
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.footer__desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 320px;
}

.footer__heading {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__links li { margin-bottom: 10px; }
.footer__links a {
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  transition: color var(--transition);
}
.footer__links a:hover { color: var(--gold); }

/* Contact links — always rgba(255,255,255,0.55) NOT default blue */
.footer a[href^="tel:"],
.footer a[href^="mailto:"] {
  color: rgba(255,255,255,0.55);
}
.footer a[href^="tel:"]:hover,
.footer a[href^="mailto:"]:hover {
  color: var(--gold);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
}

.footer__contact-item svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============================================================
   ABOUT PAGE — about-intro, philosophy, daily, credentials, banner
   ============================================================ */
.about-intro { padding: 80px 0; background: var(--bg); }
.about-intro__inner { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.pull-quote {
  border-left: 4px solid var(--gold);
  padding: 16px 24px;
  background: var(--pastel-fill);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 28px 0;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--primary-dark);
  line-height: 1.7;
}

.philosophy { padding: 80px 0; background: var(--primary); }
.philosophy .section-header h2 { color: #fff; }
.philosophy .section-header p { color: rgba(255,255,255,0.8); }

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.philosophy-item {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.15);
}

.philosophy-item__number {
  font-family: Georgia, serif;
  font-size: 3rem;
  color: var(--gold); /* MUST be var(--gold), not pale */
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.philosophy-item h3 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.philosophy-item p { color: rgba(255,255,255,0.78); font-size: 0.92rem; }

.daily { padding: 80px 0; background: var(--bg); }
.daily__inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.schedule-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.schedule-table th {
  background: var(--primary-dark);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
}
.schedule-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--body-text);
}
.schedule-table td:first-child {
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
  width: 140px;
}
.schedule-table tr:nth-child(even) td { background: var(--pastel-fill); }

.credentials { padding: 80px 0; background: var(--pastel-fill); }
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.cred-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(212,200,188,0.4);
}

.cred-card__icon {
  width: 56px;
  height: 56px;
  background: var(--pastel-fill);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.cred-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--primary);
  fill: none;
  stroke-width: 1.8;
}

.cred-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
.cred-card p { font-size: 0.85rem; color: var(--muted); }

.cred-view {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--primary);
  padding: 4px 12px;
  border-radius: 50px;
  transition: all var(--transition);
}
.cred-view:hover { background: var(--primary); color: #fff; }

/* Banner */
.banner {
  padding: 80px 0;
  background: var(--primary-dark);
  text-align: center;
}
.banner h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 12px; }
.banner p { color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto 28px; }

/* ============================================================
   WHY PRIVATE PAGE
   ============================================================ */
.why-hero {
  padding: 120px 0 80px;
  background: var(--primary);
  text-align: center;
}
.why-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.why-hero p { color: rgba(255,255,255,0.85); max-width: 580px; margin: 14px auto 0; font-size: 1.1rem; }

.why-content { padding: 80px 0; background: var(--bg); }
.why-content__inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.compare-table { width: 100%; border-collapse: collapse; margin: 32px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.compare-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare-table th:first-child { background: var(--primary-dark); color: #fff; }
.compare-table th:nth-child(2) { background: var(--primary); color: #fff; }
.compare-table th:nth-child(3) { background: var(--muted); color: #fff; }
.compare-table td { padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 0.93rem; }
.compare-table td:first-child { font-weight: 600; color: var(--text-dark); }
.compare-table td.yes { color: #2a7a3b; font-weight: 600; }
.compare-table td.no { color: #c0392b; }
.compare-table tr:nth-child(even) td { background: var(--pastel-fill); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-header {
  padding: 120px 0 60px;
  background: var(--primary);
  text-align: center;
}
.contact-header h1 { color: #fff; }
.contact-header p { color: rgba(255,255,255,0.85); max-width: 520px; margin: 14px auto 0; }

.contact-body { padding: 80px 0; background: var(--bg); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

.contact-form-card h2 { font-size: 1.5rem; margin-bottom: 24px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: 'Segoe UI', sans-serif;
  color: var(--body-text);
  background: #fff;
  transition: border-color var(--transition);
  user-select: text;
  -webkit-user-select: text;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,127,143,0.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.contact-info-card {
  background: var(--primary-dark);
  border-radius: var(--radius);
  padding: 32px;
  color: rgba(255,255,255,0.85);
}

.contact-info-card h3 { color: #fff; margin-bottom: 20px; }

.info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.info-item__icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.info-item__icon svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; }

.info-item__text { font-size: 0.92rem; line-height: 1.6; }
.info-item__text strong { color: #fff; display: block; margin-bottom: 2px; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.info-item__text a { color: rgba(255,255,255,0.55); }
.info-item__text a:hover { color: var(--gold); }

/* ============================================================
   APPLY PAGE
   ============================================================ */
.apply-header {
  padding: 120px 0 60px;
  background: var(--primary);
  text-align: center;
}
.apply-header h1 { color: #fff; }
.apply-header p { color: rgba(255,255,255,0.85); max-width: 540px; margin: 14px auto 0; }

.apply-body { padding: 80px 0; background: var(--bg); }
.apply-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.apply-form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}

.form-section { margin-bottom: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.form-section:last-child { border-bottom: none; }
.form-section h3 {
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section h3::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--gold);
  border-radius: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .apply-form-card { padding: 24px 18px; }
  .contact-form-card { padding: 24px 18px; }
}

/* Day picker */
.day-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.day-pill {
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition);
  background: #fff;
  color: var(--muted);
  user-select: none;
}
.day-pill.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Questions card */
.questions-card {
  background: var(--pastel-fill);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 24px;
  text-align: center;
}
.questions-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.questions-card p { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; }
.questions-card .btn { margin: 4px; }

/* ============================================================
   ARTICLES
   ============================================================ */
.articles-header {
  padding: 120px 0 60px;
  background: var(--primary-dark);
  text-align: center;
}
.articles-header h1 { color: #fff; }
.articles-header p { color: rgba(255,255,255,0.8); max-width: 520px; margin: 14px auto 0; }

.articles-body { padding: 60px 0 80px; background: var(--bg); }
.articles-body__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.filter-btn {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Segoe UI', sans-serif;
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

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

.article-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(212,200,188,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.article-card__cat {
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  display: inline-block;
}

.article-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.article-card__title {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.45;
}
.article-card__excerpt { font-size: 0.88rem; color: var(--muted); line-height: 1.65; flex: 1; }
.article-card__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--primary);
}
.article-card__link:hover { color: var(--primary-dark); }

/* ============================================================
   ARTICLE PAGE LAYOUT
   ============================================================ */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

@media (max-width: 768px) { .article-layout { grid-template-columns: 1fr; } }

.article-main { min-width: 0; }
.article-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.article-cat {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.article-title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text-dark); margin-bottom: 28px; }
.article-body { line-height: 1.85; color: var(--body-text); }
.article-body h2 { font-size: 1.3rem; margin-top: 32px; margin-bottom: 12px; color: var(--primary-dark); }
.article-body h3 { font-size: 1.1rem; margin-top: 24px; margin-bottom: 10px; }
.article-body ul, .article-body ol { margin-bottom: 1em; }
.article-body li { margin-bottom: 0.4em; }

/* Article sidebar */
.article-sidebar {}
.sidebar-author {
  background: var(--primary);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 20px;
}

.sidebar-author__photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 8%;
  display: block;
  margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,0.3);
  pointer-events: none;
}

.sidebar-author__name {
  font-family: Georgia, serif;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.sidebar-author__title { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-bottom: 16px; }
.sidebar-author .btn { width: 100%; justify-content: center; font-size: 0.88rem; }

.sidebar-related {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.sidebar-related h4 { font-size: 0.9rem; color: var(--primary-dark); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.sidebar-related ul { list-style: none; padding: 0; }
.sidebar-related li { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; }
.sidebar-related li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sidebar-related a { font-size: 0.88rem; color: var(--primary); line-height: 1.5; }
.sidebar-related a:hover { color: var(--primary-dark); }

.article-header-bar {
  background: var(--primary-dark);
  padding: 68px 0 0;
}

/* ============================================================
   PORTAL STYLES (also see portal.php inline)
   ============================================================ */
.portal-hero {
  background: var(--primary-dark);
  padding: 100px 24px 50px;
  text-align: center;
}
.portal-hero h1 { color: #fff; font-size: 2rem; }
.portal-hero p { color: rgba(255,255,255,0.8); margin-top: 8px; }

/* ============================================================
   RESPONSIVE — GLOBAL
   ============================================================ */
@media (max-width: 768px) {
  .tcard-grid { grid-template-columns: 1fr 1fr; }
  .hero__content { margin-left: 0; padding: 40px 24px; }
  .gallery-strip__item { flex: 0 0 80%; }
}

@media (max-width: 560px) {
  .tcard-grid { grid-template-columns: 1fr; }
  .stats-bar__inner { grid-template-columns: 1fr; }
  .stat-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .stat-block:last-child { border-bottom: none; }
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   PAGE HEADERS (non-hero)
   ============================================================ */
.page-header {
  background: var(--primary-dark);
  padding: 110px 24px 60px;
  text-align: center;
}
.page-header h1 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.page-header p { color: rgba(255,255,255,0.82); max-width: 560px; margin: 12px auto 0; font-size: 1.05rem; }

/* ============================================================
   HOMEPAGE HERO — photo background + readable overlay
   (restores the Image-1 look: playground photo behind hero,
    cream wash on left so dark heading reads, lighter toward
    right so the white "What Sets Us Apart" card reads)
   ============================================================ */
.home-hero {
  position: relative;
  background-image: url('images/FC33A82C-16B5-4B39-AB72-EF4E52E7FBEF.jpeg');
  background-size: cover;
  background-position: 30% center;
  background-repeat: no-repeat;
  min-height: 0;
}
.home-hero > .container { position: relative; z-index: 1; }
.home-hero .hero__bg-pattern,
.home-hero .hero__leaf { display: none; }
/* Strengthen the card so white text reads over the photo.
   NOTE: index.html carries its own .home-hero__card rule in a <style> block
   that comes AFTER this file, so its background/border win on equal
   specificity. Keep the two in step — this one only supplies the blur. */
.home-hero__card {
  background: rgba(26,56,66,0.88);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Keep hero text legible over the clear photo without washing it out */
.home-hero h1 {
  text-shadow: 0 1px 10px rgba(247,243,237,0.85), 0 1px 3px rgba(247,243,237,0.9);
}
.home-hero .hero__kicker {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 1px 10px rgba(0,0,0,0.35);
}
.home-hero .hero__deck {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 1px 10px rgba(0,0,0,0.35);
}
.home-hero__card-title,
.home-hero__card .home-hero__feature-text,
.home-hero__card strong {
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* Outline button reads poorly over the light hero photo — add a scrim */
.home-hero .btn--outline {
  background: rgba(58,104,120,0.55);
  border-color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}
.home-hero .btn--outline:hover {
  background: rgba(58,104,120,0.75);
  border-color: #fff;
}

/* Inner-page hero: clear the fixed 68px nav so titles aren't hidden.
   contact.html defines its own .page-hero inline (dark) which overrides this. */
.page-hero { padding: 120px 0 60px; }

/* Nav: make Parents Portal link + location subtitle visible on the teal bar
   (per-page inline styles set these to teal-on-teal; override sitewide) */
.nav__links .nav__portal { color: rgba(255,255,255,0.9) !important; }
.nav__links .nav__portal:hover { color: var(--gold) !important; }
.nav__logo-text { display: flex; flex-direction: column; line-height: 1.2; }
/* The subtitle line under the company name.

   There are TWO nav backgrounds on this site and this one file was trying to
   colour both with one value. The five pages that take .nav straight from this
   stylesheet get the dark teal bar (--primary-dark, #3a6878): about, apply,
   index, reviews, why-private. The other eight override .nav to cream
   (rgba(255,254,249,.97)): contact, portal and the six form-*.php pages.

   The old value here was rgba(20,30,34,0.85) !important -- near-black charcoal.
   On cream that is right. On the teal bar it measures 2.45:1, well under the
   4.5:1 floor, while the white company name directly above it measures 6.12:1.
   The !important was forcing the cream-page colour onto the dark pages.

   So: this rule now carries the DARK-BAR colour, and the !important is dropped
   from the colour only. The eight cream pages each declare their own
   .nav__logo-sub colour in a <style> block that comes AFTER the link to this
   file, so at equal specificity theirs wins and they keep var(--muted) on
   cream. font-size keeps its !important -- without it those pages fall back to
   a 9px subtitle, which is a separate legibility problem, not a fix.

   (articles/index.php and the selective-mutism article carry a matching rule
   but do not link this stylesheet at all, so they are untouched either way.)

   White at 85% on the teal bar measures 4.95:1: over the floor, and still
   clearly secondary to the name above it. */
.nav__logo-sub { color: rgba(255,255,255,0.85); font-size: 0.72rem !important; font-weight: 500; }