:root{
  --cream:#FBF6F0;
  --cream-deep:#F4E9DB;
  --white:#FFFFFF;
  --ink:#2B1620;
  --ink-soft:#6B5563;
  /* 2026-10-20: Carolyn asked for the whole site's pink/magenta accent to
     become sage green — not just buttons. Rather than touch every rule
     that uses --magenta/--magenta-deep/--magenta-tint (nav hover states,
     badges, gradients, icons, etc.), the variables themselves now hold
     sage values, so every one of those rules follows automatically. The
     --sage/--sage-deep aliases below are kept (and kept equal) since
     .btn-primary already names them directly. */
  --magenta:#7C9070;
  --magenta-deep:#5F7355;
  --magenta-tint:#E8EDE3;
  --gold:#EFBB50;
  --gold-deep:#C98F1F;
  --gold-tint:#FCF2DD;
  --plum:#94325C;
  --plum-deep:#3A1830;
  --sage:#7C9070; /* same value as --magenta now — kept as its own name since .btn-primary refers to it directly */
  --sage-deep:#5F7355;
  --line:#E9DCCB;
  --success:#3F7A5C;
  --success-tint:#E7F3EC;
  --danger:#B3261E;
  --danger-tint:#FBEAE9;
  --shadow: 0 12px 32px -16px rgba(58,24,48,0.25);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:300;
  font-style:italic; /* Carolyn asked (2026-10-20) for headings to feel "slightly more italicy" — originally Fraunces's own 500 italic cut; the heading font was swapped to Cormorant Garamond on 2026-10-28, and she asked for its light 300 italic specifically rather than matching the old weight. */
  line-height:1.1;
  margin:0 0 0.5em 0;
  color:var(--ink);
}
p{margin:0 0 1em 0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}
.container{max-width:1160px;margin:0 auto;padding:0 32px;}
section{padding:96px 0;}
.eyebrow{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--magenta-deep); font-weight:600; margin-bottom:14px;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:18px;height:2px;background:var(--gold);display:inline-block;border-radius:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; border-radius:999px; font-weight:600; font-size:15px;
  cursor:pointer; border:2px solid transparent; transition:all .2s ease; font-family:'Work Sans',sans-serif;
}
.btn-primary{ background:var(--sage); color:#fff; }
.btn-primary:hover{ background:var(--sage-deep); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }
.btn-gold{ background:var(--gold); color:var(--plum-deep); }
.btn-gold:hover{ background:var(--gold-deep); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:13.5px; }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(251,246,240,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo img{ height:38px; width:auto; }
nav.main-nav > ul{ display:flex; list-style:none; gap:36px; align-items:center; }
nav.main-nav a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); position:relative; padding:4px 0; }
nav.main-nav a:hover{ color:var(--magenta-deep); }
nav.main-nav a.active{ color:var(--ink); }
nav.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--magenta); border-radius:2px;
}

/* Courses nav dropdown — categories flyout, each category flies out again
   to its courses. Two-level hover menu, same pattern as competitor sites
   (e.g. Integrate Academy).

   Each level is an OUTER wrapper (positioned flush against its trigger,
   no gap) that contains an INNER visual card offset with padding/margin
   instead of a gap on the outer box. Hovering the gap between the nav
   link and the dropdown (or between a category and its submenu) is still
   hovering the outer wrapper, so the menu doesn't close before the mouse
   reaches it — a plain margin-top/margin-left on the visible box (the
   original approach) creates a dead zone that breaks exactly that. */
li.has-dropdown{ position:relative; }
.nav-dropdown{
  display:none; position:absolute; top:100%; left:0; padding-top:14px; z-index:200;
}
li.has-dropdown:hover .nav-dropdown{ display:block; }
.nav-dropdown-inner{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); min-width:220px; padding:8px;
}
.nav-dropdown ul{ display:block; list-style:none; margin:0; padding:0; }
.nav-dropdown li.has-submenu{ position:relative; }
.nav-dropdown-label{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; font-size:14px; font-weight:600; color:var(--ink); border-radius:8px; cursor:default;
}
.nav-dropdown-label::after{ content:'›'; color:var(--ink-soft); }
li.has-submenu:hover > .nav-dropdown-label{ background:var(--cream-deep); color:var(--magenta-deep); }
.nav-submenu{
  display:none; position:absolute; top:0; left:100%; padding-left:8px;
}
li.has-submenu:hover .nav-submenu{ display:block; }
.nav-submenu-inner{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); min-width:240px; padding:8px; list-style:none;
}
.nav-submenu-inner li a{ display:block; padding:9px 14px; font-size:13.5px; font-weight:500; color:var(--ink-soft); border-radius:8px; white-space:nowrap; }
.nav-submenu-inner li a:hover{ background:var(--magenta-tint); color:var(--magenta-deep); }

/* WhatsApp link in the header — moved back here from a floating
   bottom-right button (2026-10-26; it had briefly moved out to a float on
   2026-10-20 to make room for "Host a course" in the nav — Blog moved to
   the footer-only instead, to make room this time). */
.whatsapp-link{
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; background:#25D366; color:#fff;
  font-size:13.5px; font-weight:700; white-space:nowrap;
  transition:transform .15s ease, background .15s ease;
}
.whatsapp-link:hover{ transform:scale(1.04); background:#1fb959; }
.whatsapp-link span{ color:#fff; }
.header-actions{ display:flex; align-items:center; gap:18px; }
.header-actions a.account-link{ font-size:14px; font-weight:600; color:var(--ink-soft); }
.header-actions a.account-link:hover{ color:var(--magenta-deep); }

/* ---------- Mobile nav toggle + panel ---------- */
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:transparent; cursor:pointer; padding:0; border-radius:8px; flex-shrink:0;
}
.nav-toggle:hover{ background:var(--cream-deep); }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ display:none; }

/* ---------- Hero (home) ---------- */
.hero{ padding:88px 0 72px 0; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }
.hero h1{ font-size:52px; letter-spacing:-0.01em; }
.hero .lede{ font-size:18px; color:var(--ink-soft); max-width:480px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-visual{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 30% 25%, rgba(239,187,80,0.9), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(215,50,102,0.85), transparent 55%),
    linear-gradient(135deg, var(--plum) 0%, var(--magenta) 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transform:translateZ(0); /* see .course-card comment re: scroll repaint seam fix */
}
.hero-visual::after{
  content:'Photo placeholder — Carolyn teaching';
  position:absolute; bottom:20px; left:20px; right:20px;
  background:rgba(43,22,32,0.55); color:#fff; font-size:12px; text-align:center;
  padding:8px 12px; border-radius:8px; backdrop-filter:blur(4px);
}
.hero-visual svg{ width:46%; opacity:0.9; }
.hero-visual.has-image{ background:none; }
.hero-visual.has-image::after{ display:none; }
.hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }

.credential-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; background:var(--white); }
.credential-strip ul{ display:flex; flex-wrap:wrap; gap:28px 44px; list-style:none; justify-content:center; text-align:center; }
.credential-strip li{ font-size:13.5px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.credential-strip li .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-deep); }

/* ---------- Generic interior page hero ---------- */
.page-hero{ padding:64px 0 56px; text-align:center; }
.page-hero .section-head{ margin-left:auto; margin-right:auto; }
.page-hero.left{ text-align:left; }
.page-hero.left .section-head{ margin-left:0; }

/* ---------- Section headings ---------- */
.section-head{ max-width:1040px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:38px; }
.section-head p{ color:var(--ink-soft); font-size:16.5px; }

/* ---------- Why cards ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.why-card{ background:var(--white); border-radius:var(--radius-md); padding:36px 30px; border:1px solid var(--line); }
.why-card .icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:20px; }
.why-card:nth-child(1) .icon{ background:var(--magenta-tint); color:var(--magenta-deep); }
.why-card:nth-child(2) .icon{ background:var(--gold-tint); color:var(--gold-deep); }
.why-card:nth-child(3) .icon{ background:#EFE3ED; color:var(--plum); }
.why-card h3{ font-size:20px; margin-bottom:10px; }
.why-card p{ color:var(--ink-soft); font-size:15px; margin-bottom:0; }

/* ---------- Courses ---------- */
.courses-section{ background:var(--cream-deep); }
.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:44px; }
.course-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
  /* transform:translateZ(0) below (and on .about-photo/.hero-visual/
     .cta-band-inner) forces each gradient+rounded-corner+overflow:hidden box
     onto its own stable GPU layer — without it, Chrome/Safari can show a
     brief seam of the gradient's unclipped colour at the element's top edge
     while scrolling, which is what was showing as a "pink flash" at the top
     of the Courses/Testimonials/footer sections (2026-10-28). */
  transform:translateZ(0);
}
.course-card:hover{ transform:translateY(-4px) translateZ(0); box-shadow:var(--shadow); }
.course-card .thumb{ height:150px; position:relative; overflow:hidden; }
.course-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.course-detail-image{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:36px; aspect-ratio:16/7; }
.course-detail-image img{ width:100%; height:100%; object-fit:cover; display:block; }
/* These used to be hardcoded pink/gold hex values, so they didn't pick up
   the sage-green swap (which works by redefining the --magenta variables —
   see the :root comment above). Written in terms of the actual palette
   variables now, so any future colour change updates these too. */
.course-card .thumb.grad-1{ background:linear-gradient(135deg,var(--sage),var(--plum)); }
.course-card .thumb.grad-2{ background:linear-gradient(135deg,var(--gold),var(--sage-deep)); }
.course-card .thumb.grad-3{ background:linear-gradient(135deg,var(--plum),var(--plum-deep)); }
.course-card .thumb.grad-4{ background:linear-gradient(135deg,var(--gold-deep),var(--sage)); }
.course-card .tag{
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.92); color:var(--ink);
  font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px;
}
.course-card .body{ padding:26px 24px 24px; display:flex; flex-direction:column; flex:1; }
.course-card h3{ font-size:20px; margin-bottom:8px; }
.course-card .desc{ color:var(--ink-soft); font-size:14.5px; margin-bottom:18px; flex:1; }
.prose p{ color:var(--ink-soft); font-size:16px; margin-bottom:1.1em; }
.prose-list{ list-style:none; margin:0 0 1.4em 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.prose-list li{ position:relative; padding-left:26px; color:var(--ink-soft); font-size:16px; }
.prose-list li::before{ content:'—'; position:absolute; left:0; color:var(--magenta-deep); font-weight:700; }
/* Bullet lists typed into the admin rich-text editor (tula_render_rich_text,
   class added in config/data.php) — same flush-left-marker/indented-text
   treatment as .prose-list above, instead of the browser default marker
   which sits further left than surrounding paragraph text (the global
   ul{padding:0} reset leaves no room for an outside-position marker). */
.rich-list{ list-style:none; margin:0 0 1.4em 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rich-list li{ position:relative; padding-left:22px; }
.rich-list li::before{ content:'—'; position:absolute; left:0; color:var(--magenta-deep); font-weight:700; }

.card-dates{ margin-bottom:18px; padding:12px 14px; background:var(--bg-soft, #FAF7F2); border-radius:10px; }
.card-date-row{ font-size:12.5px; padding:6px 0; }
.card-date-row + .card-date-row{ border-top:1px solid var(--line); }
.card-date-row .v{ font-weight:700; color:var(--ink); margin-bottom:2px; }
.card-date-row .d{ color:var(--ink-soft); }
.card-date-more{ font-size:11.5px; font-weight:600; color:var(--magenta-deep); padding-top:4px; }
.course-card .meta{ display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--line); padding-top:16px; }
.course-card .price{ font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--magenta-deep); }
.course-card .price small{ display:block; font-family:'Work Sans',sans-serif; font-size:11.5px; color:var(--ink-soft); font-weight:600; }
.course-card .arrow{ font-size:14px; font-weight:700; color:var(--ink); }
.courses-cta{ text-align:center; }

.blog-date{ display:block; font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--magenta-deep); margin-bottom:6px; }
.blog-card .meta{ align-items:center; }

.category-block{ margin-bottom:56px; }
.category-block:last-child{ margin-bottom:0; }
.category-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:26px; }
.category-head h3{ font-size:22px; margin-bottom:0; }
.category-head span{ font-size:13px; color:var(--ink-soft); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:center; }
.about-photo{
  aspect-ratio:4/5; border-radius:var(--radius-lg); position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 60% 20%, rgba(239,187,80,0.85), transparent 50%),
    linear-gradient(160deg, var(--plum) 10%, var(--magenta) 100%);
  transform:translateZ(0); /* see .course-card comment re: scroll repaint seam fix */
}
.about-photo::after{
  content:'Photo placeholder — Carolyn Bailey';
  position:absolute; bottom:18px; left:18px; right:18px; background:rgba(43,22,32,0.55); color:#fff;
  font-size:12px; text-align:center; padding:8px 12px; border-radius:8px;
}
.about-photo.has-image{ background:none; }
.about-photo.has-image::after{ display:none; }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Homepage founder photo only (section#about, index.php) — made smaller
   2026-10-28 per request; tutor-detail.php and the old about.php founder
   section (now removed) both used the same .about-photo at full size, so
   this is scoped to #about rather than changed globally. */
#about .about-photo{ max-width:300px; }
.about-credentials{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.about-credentials li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.about-credentials li b{ color:var(--ink); }
.about-credentials li::before{ content:'✓'; position:absolute; left:0; top:1px; color:var(--magenta-deep); font-weight:700; }

.timeline{ list-style:none; display:flex; flex-direction:column; gap:0; margin-top:8px; }
.timeline li{ display:flex; gap:24px; padding:20px 0; border-top:1px solid var(--line); }
.timeline li:first-child{ border-top:none; }
.timeline .year{ font-family:'Cormorant Garamond',serif; color:var(--gold-deep); font-size:17px; min-width:90px; flex-shrink:0; }
.timeline .desc{ color:var(--ink-soft); font-size:15px; }
.timeline .desc b{ color:var(--ink); }

.pull-quote{
  background:var(--magenta-tint); border-radius:var(--radius-md); padding:40px;
  font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1.4; color:var(--ink); text-align:center;
  margin:0;
}
.pull-quote span{ display:block; margin-top:16px; font-family:'Work Sans',sans-serif; font-size:13px; font-weight:700; color:var(--magenta-deep); }

/* ---------- Testimonials ---------- */
/* Light cream-deep background (2026-10-28, replacing the earlier dark
   plum) — colours below flipped from light-on-dark to dark-on-light to
   match: white cards instead of translucent white-on-dark overlays, ink
   text instead of cream/white text. */
.testimonial-section{ background:var(--cream-deep); color:var(--ink); }
.testimonial-section .section-head h2{ color:var(--ink); }
.testimonial-section .section-head p{ color:var(--ink-soft); }
.t-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; }
.t-card .quote-mark{ font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--gold-deep); line-height:0.5; display:block; margin-bottom:14px; }
.t-card p.quote{ font-size:15px; color:var(--ink); margin-bottom:18px; }
.t-card .who{ font-size:13px; font-weight:700; color:var(--magenta-deep); }
.t-card .what{ font-size:12px; color:var(--ink-soft); }

/* homepage testimonial slideshow */
.testimonial-slider{ position:relative; }
.testimonial-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 12px; margin:0 -4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-track .t-card{ scroll-snap-align:start; flex:0 0 auto; width:calc(33.333% - 16px); display:flex; flex-direction:column; }
.testimonial-track .quote{ flex-grow:1; }
.slider-controls{ display:flex; justify-content:center; gap:12px; margin-top:28px; }
.slider-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); color:var(--ink); font-size:19px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.slider-arrow:hover{ background:var(--magenta-tint); }

/* light variant, used on the dedicated Testimonials page */
.t-card-light{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; }
.t-card-light .quote-mark{ font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--magenta); line-height:0.5; display:block; margin-bottom:14px; }
.t-card-light p.quote{ font-size:15px; color:var(--ink); margin-bottom:18px; }
.t-card-light .who{ font-size:13px; font-weight:700; color:var(--magenta-deep); }
.t-card-light .what{ font-size:12px; color:var(--ink-soft); }
.testimonial-grid-light{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band-inner{
  background:linear-gradient(120deg, var(--magenta) 0%, var(--plum) 100%);
  border-radius:var(--radius-lg); padding:72px 40px; color:#fff; position:relative; overflow:hidden;
  transform:translateZ(0); /* see .course-card comment re: scroll repaint seam fix */
}
.cta-band-inner h2{ color:#fff; font-size:36px; }
.cta-band-inner p{ color:rgba(255,255,255,0.85); max-width:480px; margin:0 auto 30px; }

/* ---------- Footer ---------- */
/* Light cream-deep background (2026-10-28, replacing the earlier dark
   ink) — colours below flipped from light-on-dark to dark-on-light to
   match. */
footer.site{ background:var(--cream-deep); color:var(--ink-soft); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
footer.site .logo-mark{ height:32px; margin-bottom:14px; }
footer.site p.tag{ font-size:13.5px; color:var(--ink-soft); max-width:260px; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.06); color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.footer-social a:hover{ background:var(--magenta); color:#fff; }
footer.site h4{ font-family:'Work Sans',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink); margin-bottom:16px; }
footer.site ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
footer.site a{ font-size:14px; color:var(--ink-soft); }
footer.site a:hover{ color:var(--magenta-deep); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; gap:12px; }

/* Accreditation body logos in the footer (added 2026-10-28, moved into the
   bottom bar — replacing the location text there — 2026-10-28) —
   admin-uploaded at Site settings → Accreditation logos; shown bottom-right
   when set, falling back to the plain location text when neither is set. */
.footer-accred-logos{ display:inline-flex; align-items:center; gap:14px; }
/* 35px is CIMSPA's minimum logo display height per their brand guidelines
   (bumped up from 26px, 2026-10-28). */
.footer-accred-logos img{ height:35px; width:auto; max-width:100px; object-fit:contain; }

/* ================= COURSE PAGE ================= */
.breadcrumb{ font-size:13px; color:var(--ink-soft); margin-bottom:18px; }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--magenta-deep); }
.course-hero{ padding:52px 0 0; }
.course-hero-top{ display:flex; justify-content:space-between; gap:40px; align-items:flex-start; flex-wrap:wrap; margin-bottom:36px; }
.course-hero h1{ font-size:42px; max-width:640px; }
.course-hero .lede{ color:var(--ink-soft); font-size:16.5px; max-width:600px; }
.fact-row{ display:flex; gap:36px; flex-wrap:wrap; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:56px; }
.fact .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-weight:700; margin-bottom:6px; }
.fact .value{ font-family:'Cormorant Garamond',serif; font-size:19px; }

.course-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:flex-start; }
.course-main h2{ font-size:26px; margin-top:0; }
.course-main .block{ margin-bottom:48px; }
.curriculum-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.curriculum-list li{ display:flex; gap:12px; font-size:15px; color:var(--ink-soft); padding:12px 16px; background:var(--white); border-radius:10px; border:1px solid var(--line); }
.curriculum-list li .num{ font-family:'Cormorant Garamond',serif; color:var(--gold-deep); font-weight:600; min-width:20px; }

.tutor-card{ display:flex; gap:20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; align-items:center; }
/* .tutor-card is an <a> on about.php (added 2026-10-28, each card links to
   tutor-detail.php) — reset link styling and add a hover cue so it still
   reads as a clickable card, not a link. */
a.tutor-card{ text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; }
a.tutor-card:hover{ box-shadow:0 8px 20px rgba(43,22,32,0.08); transform:translateY(-2px); }
.tutor-photo{ width:76px; height:76px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--plum),var(--magenta)); overflow:hidden; }
.tutor-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tutor-card h4{ font-family:'Cormorant Garamond',serif; font-size:18px; margin-bottom:4px; }
.tutor-card p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:0; }

/* Meet-the-team grid on about.php — wraps one or more .tutor-card */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15.5px; }
.faq-q .plus{ font-size:20px; color:var(--magenta-deep); transition:transform .2s ease; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:14.5px; color:var(--ink-soft); }
.faq-item.open .faq-a{ max-height:240px; padding-top:12px; }

/* Sticky pricing card */
.price-card{ position:sticky; top:148px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.price-card .headline-price{ font-family:'Cormorant Garamond',serif; font-size:38px; color:var(--ink); margin-bottom:2px; }
.price-card .headline-price small{ font-size:14px; font-family:'Work Sans',sans-serif; color:var(--ink-soft); font-weight:500; }
.pay-options{ display:flex; flex-direction:column; gap:10px; margin:20px 0 24px; }
.pay-option{ border:2px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; transition:all .15s ease; }
.pay-option.selected{ border-color:var(--magenta); background:var(--magenta-tint); }
.pay-option .row{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14.5px; }
.pay-option .sub{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.cohort-box{ background:var(--cream-deep); border-radius:12px; padding:16px 18px; margin-bottom:20px; font-size:13.5px; }
.cohort-box .row{ display:flex; justify-content:space-between; padding:5px 0; }
.cohort-box .row span:first-child{ color:var(--ink-soft); }
.cohort-box .row span:last-child{ font-weight:600; text-align:right; }
.venue-tbc{ color:var(--magenta-deep); }
.days-badge{ display:inline-block; background:var(--cream-deep); color:var(--ink); font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.reassure{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:14px; margin-bottom:0; }

/* ================= FORMS (contact, login) ================= */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow); }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--line);
  font-family:'Work Sans',sans-serif; font-size:14.5px; color:var(--ink); background:var(--cream);
  transition:border-color .15s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:var(--magenta); background:var(--white); }
.form-group textarea{ resize:vertical; min-height:120px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:16px; }
.form-note a{ color:var(--magenta-deep); font-weight:600; }
.form-error{ font-size:13.5px; color:var(--danger); background:var(--danger-tint); border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:16px; }

.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; }
.contact-info-list{ list-style:none; display:flex; flex-direction:column; gap:22px; }
.contact-info-list li{ display:flex; gap:16px; }
.contact-info-list .icon{ width:42px; height:42px; border-radius:12px; background:var(--magenta-tint); color:var(--magenta-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:17px; }
.contact-info-list .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); font-weight:700; margin-bottom:3px; }
.contact-info-list .value{ font-size:15px; font-weight:600; }
.contact-info-list .value.tbc{ color:var(--magenta-deep); font-weight:600; }

/* ================= POLICIES & DOCUMENTS ================= */
.doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.doc-card{ display:flex; gap:18px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; transition:transform .2s ease, box-shadow .2s ease; }
.doc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.doc-card .icon{ width:44px; height:44px; border-radius:12px; background:var(--magenta-tint); color:var(--magenta-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
.doc-card h3{ font-size:18px; margin-bottom:6px; }
.doc-card p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:0; }

.notice-box{ background:var(--gold-tint); border:1px solid var(--gold); border-radius:var(--radius-md); padding:20px 24px; font-size:14px; color:var(--ink); margin-bottom:44px; }
.notice-box b{ color:var(--gold-deep); }
.notice-box p:last-child{ margin-bottom:0; }

.policy-content{ max-width:760px; }
.policy-content .updated{ font-size:13px; color:var(--ink-soft); margin-bottom:32px; }
.policy-content h2{ font-size:23px; margin-top:44px; }
.policy-content h2:first-of-type{ margin-top:0; }
.policy-content h3{ font-size:17px; margin-top:28px; }
.policy-content p, .policy-content li{ color:var(--ink-soft); font-size:15.5px; }
.policy-content ul{ padding-left:22px; margin-bottom:1em; }
.policy-content li{ list-style:disc; margin-bottom:8px; }
.policy-content .placeholder{ color:var(--magenta-deep); font-weight:600; }

/* auth (login/register) */
.auth-wrap{ max-width:440px; margin:0 auto; }
.auth-tabs{ display:flex; background:var(--cream-deep); border-radius:999px; padding:5px; margin-bottom:32px; }
.auth-tabs button{ flex:1; border:none; background:transparent; padding:11px; border-radius:999px; font-family:'Work Sans',sans-serif; font-weight:700; font-size:14px; color:var(--ink-soft); cursor:pointer; transition:all .15s ease; }
.auth-tabs button.active{ background:var(--white); color:var(--ink); box-shadow:var(--shadow); }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }
.forgot-link{ text-align:right; margin:-10px 0 20px; }
.forgot-link a{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.forgot-link a:hover{ color:var(--magenta-deep); }

/* ================= ACCOUNT DASHBOARD ================= */
.account-layout{ display:grid; grid-template-columns:0.9fr 2.1fr; gap:48px; align-items:flex-start; }
.account-side{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; text-align:center; }
.account-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--plum),var(--magenta)); }
.account-side h4{ font-family:'Cormorant Garamond',serif; font-size:18px; margin-bottom:2px; }
.account-side p{ font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
.account-nav{ list-style:none; display:flex; flex-direction:column; gap:4px; text-align:left; }
.account-nav a{ display:block; padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.account-nav a.active{ background:var(--magenta-tint); color:var(--magenta-deep); }
.account-nav a:hover{ background:var(--cream-deep); }

.booking-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; margin-bottom:20px; }
.booking-card .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px; flex-wrap:wrap; }
.booking-card h4{ font-family:'Cormorant Garamond',serif; font-size:19px; margin-bottom:6px; }
.booking-card .sub{ font-size:13px; color:var(--ink-soft); }
.status-pill{ font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap; }
.status-pill.paid{ background:var(--success-tint); color:var(--success); }
.status-pill.progress{ background:var(--gold-tint); color:var(--gold-deep); }
.payment-progress{ background:var(--cream-deep); border-radius:12px; padding:16px 18px; }
.payment-progress .row{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.payment-progress .row:last-child{ margin-bottom:0; }
.payment-progress .bar{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; margin:10px 0; }
.payment-progress .bar-fill{ height:100%; background:var(--magenta); border-radius:6px; }

@media (max-width: 880px){
  .hero-grid, .about-grid, .course-layout, .contact-layout, .account-layout{ grid-template-columns:1fr; }
  .why-grid, .course-grid, .testimonial-grid-light, .doc-grid, .team-grid{ grid-template-columns:1fr; }
  .testimonial-track .t-card{ width:80%; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  nav.main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{
    display:block; max-height:0; overflow:hidden; background:var(--white);
    border-top:0 solid var(--line); transition:max-height .25s ease;
  }
  .mobile-nav.open{ max-height:420px; border-top-width:1px; }
  .mobile-nav ul{ list-style:none; padding:8px 0; }
  .mobile-nav a{ display:block; padding:14px 20px; font-size:15.5px; font-weight:600; color:var(--ink); }
  .mobile-nav a:hover{ background:var(--cream-deep); }
  .mobile-nav a.active{ color:var(--magenta-deep); background:var(--magenta-tint); }
  .mobile-nav-divider{ height:1px; background:var(--line); margin:8px 20px; }
  .hero h1{ font-size:38px; }
  section{ padding:64px 0; }
  .price-card{ position:static; }
  .container{ padding:0 20px; }
  .form-row-2{ grid-template-columns:1fr; }
  .account-side{ text-align:left; }
}
@media (max-width: 600px){
  .site-header-inner{ padding:12px 0; }
  .logo img{ height:30px; }
  .header-actions{ gap:10px; }
  .header-actions .account-link{ display:none; }
  .header-actions .btn-sm{ padding:9px 16px; font-size:13px; }
  /* The top bar's only room left at this width is one button + the menu
     icon — "WhatsApp us" moves into the slide-out mobile menu instead (see
     partials/header.php's mobile-nav list) rather than competing with
     "View courses" here. */
  .header-actions .whatsapp-link{ display:none; }
  .nav-toggle{ width:34px; height:34px; }
  .hero{ padding:44px 0 48px; }
  .hero h1{ font-size:30px; }
  .hero .lede{ font-size:15.5px; }
  .credential-strip ul{ gap:16px 24px; }
  .credential-strip li{ font-size:12.5px; }
  .section-head h2{ font-size:28px; }
  .fact-row{ gap:20px 32px; }
  .cta-band-inner{ padding:48px 24px; }
  .cta-band-inner h2{ font-size:28px; }
  .form-card{ padding:26px; }
  .category-head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .cookie-consent-inner{ flex-direction:column; align-items:stretch; gap:14px; }
  .cookie-consent-actions{ justify-content:flex-end; }
}

/* ---------- Cookie consent banner ---------- */
/* Added 2026-10-28 alongside Google Analytics (see partials/footer.php,
   assets/js/cookie-consent.js) — only appears on the page at all once an
   Analytics ID is set in admin, and only shows to a visitor who hasn't yet
   accepted or declined (tracked in localStorage, not a cookie). */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--plum-deep); color:#fff;
  transform:translateY(100%); transition:transform .3s ease;
  box-shadow:0 -4px 24px rgba(0,0,0,0.15);
}
.cookie-consent.is-visible{ transform:translateY(0); }
.cookie-consent-inner{
  max-width:1160px; margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.cookie-consent p{ margin:0; font-size:14px; color:rgba(255,255,255,0.88); }
.cookie-consent a{ color:#fff; text-decoration:underline; }
.cookie-consent-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-consent .btn-outline{ border-color:rgba(255,255,255,0.5); color:#fff; }
.cookie-consent .btn-outline:hover{ background:rgba(255,255,255,0.12); color:#fff; }