/* ==========================================================================
   custom-style.css - per-page styles moved out of each page's inline <style>
   block (go-live checklist, 2026-10-08). Every rule is page-prefixed
   (idx- abt- svc- svd- blg- bld- cnt- dka- dkb- dkc- thx- err-), and no selector
   appears on two pages, so one shared file changes nothing on any page.
   Loaded where each inline block used to sit (after custom.css), so the
   cascade order is unchanged. Edit HERE now, not in the page files.
   ========================================================================== */

/* ---------- index.php ---------- */
/* ==========================================================================
   Page-scoped - index.html  (prefix idx-)
   Shared design-system classes live in custom.css. Only rules unique to the
   homepage belong here (D42 split).
   ========================================================================== */

/* ---- Keyframes (homepage-only: marquee band + hero star field) ---------- */
@keyframes stl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stl-twinkle { 0%, 100% { opacity: .12; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes stl-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes stl-streak  { 0% { opacity: 0; transform: translate(-34px, 14px) scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -8px) scale(1); } }

/* ---- Band 1 - Hero (FULL-BLEED variant) --------------------------------- */
.idx-hero { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.idx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idx-hero-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(42,33,64,.62), rgba(78,45,134,.36)); }
.idx-hero-inner { position: relative; z-index: 2; max-width: 1040px; padding: 80px 32px; display: flex; align-items: center; gap: 48px; flex-wrap: wrap; justify-content: center; }
.idx-hero-copy { flex: 1; min-width: 320px; max-width: 600px; }
.idx-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.idx-logo-wrap { position: relative; flex: none; animation: stl-float 7.5s ease-in-out infinite; }
.idx-logo { height: 320px; width: auto; display: block; position: relative; z-index: 2; }
.idx-star { position: absolute; top: var(--t); left: var(--l); z-index: var(--z, 3); font-size: var(--s); color: var(--c); animation: var(--a); }

/* ---- Band 2 - Intro ----------------------------------------------------- */
.idx-intro-inner { max-width: 900px; margin: 0 auto; padding: 78px 32px; text-align: center; }
.idx-intro-copy { font-size: 19px; line-height: 1.7; color: var(--stl-body); max-width: 64ch; margin: 0 auto; }
/* Intro Photo variant (Task 37): same layout as the DJ & Khai story band.
   Applied only when intro_image is set, so the text-only band above is untouched. */
.idx-intro-inner--photo { max-width: 1100px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; text-align: left; }
.idx-intro-inner--photo .idx-intro-copy { margin: 0; }
.idx-intro-frame { border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(78,45,134,.45); }
.idx-intro-frame img { width: 100%; display: block; }

/* ---- Band 3 - Challenges (MARQUEE variant) ------------------------------ */
.idx-marquee-band { padding: 82px 0; overflow: hidden; }
.idx-marquee-head { max-width: 900px; margin: 0 auto 48px; padding: 0 32px; text-align: center; }
.idx-marquee-mask {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.idx-marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; padding: 6px 10px; animation: stl-marquee 34s linear infinite; }
.idx-marquee-mask:hover .idx-marquee-track { animation-play-state: paused; }
.idx-marquee-item { flex: none; display: inline-flex; align-items: center; gap: 34px; }
.idx-marquee-text { font-family: var(--stl-serif); font-size: 32px; font-weight: 500; line-height: 1; color: var(--stl-purple); white-space: nowrap; }
.idx-marquee-star { font-size: 20px; color: var(--stl-gold); }

/* ---- Band 4 - Services (ALL - INDEX variant) ---------------------------- */
.idx-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.idx-service-row { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--stl-border); color: var(--stl-navy); }
.idx-service-row:hover { color: var(--stl-purple); }
.idx-service-bullet { color: var(--stl-gold); font-size: 16px; }
.idx-service-title { display: block; font-family: var(--stl-serif); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--stl-purple); }
.idx-service-desc { display: block; font-size: 14.5px; line-height: 1.5; color: var(--stl-body-soft); margin-top: 5px; }
.idx-service-arrow { font-size: 18px; color: var(--stl-gold-dark); }

/* ---- Band 5 - Reviews slider ------------------------------------------- */
.idx-reviews-band { overflow: hidden; }
.idx-reviews-inner { max-width: 1000px; margin: 0 auto; padding: 88px 32px; }
.idx-reviews-stage { position: relative; }
.idx-reviews-window { overflow: hidden; }
.idx-reviews-track { display: flex; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.idx-review-slide { flex: 0 0 100%; box-sizing: border-box; padding: 6px; }
.idx-review-card {
  background: #fff; border: 1px solid var(--stl-border); border-radius: 22px;
  padding: 44px 44px 38px; text-align: center;
  box-shadow: 0 30px 60px -42px rgba(78,45,134,.55);
  min-height: 300px; display: flex; flex-direction: column; justify-content: center;
}
.idx-review-stars { display: flex; justify-content: center; gap: 5px; margin: 0 0 22px; color: var(--stl-gold); font-size: 19px; }
.idx-review-quote { font-family: var(--stl-serif); font-style: italic; font-size: 21px; line-height: 1.6; color: #3b3450; max-width: 58ch; margin: 0 auto 26px; text-wrap: pretty; }
.idx-review-name { font-size: 16px; font-weight: 700; color: var(--stl-purple); }
.idx-review-meta { font-size: 12.5px; letter-spacing: .04em; color: var(--stl-body-faint); margin-top: 4px; }
.idx-review-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--stl-border);
  box-shadow: 0 8px 20px -10px rgba(42,33,64,.5);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--stl-purple); z-index: 2;
}
.idx-review-nav:hover { border-color: var(--stl-purple); color: var(--stl-purple-hover); }
.idx-review-nav--prev { left: -6px; }
.idx-review-nav--next { right: -6px; }
.idx-review-dots { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 28px; }
.idx-review-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--stl-dot); transition: background .2s ease, transform .2s ease;
}
.idx-review-dot[aria-current="true"] { background: var(--stl-purple); transform: scale(1.35); }

/* ---- Band 6 - Mindfulness ---------------------------------------------- */
.idx-mind { position: relative; overflow: hidden; }
.idx-mind-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idx-mind-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(42,33,64,.68), rgba(78,45,134,.46)); }
.idx-mind-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 92px 32px; text-align: center; }
.idx-mind-copy { font-size: 19px; line-height: 1.7; color: var(--stl-on-dark-soft); max-width: 60ch; margin: 0 auto 32px; }

/* ---- Band 7 - Approach ------------------------------------------------- */
.idx-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.idx-approach-list { display: grid; gap: 16px; }
.idx-approach-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 16px; padding: 24px 26px; display: flex; gap: 18px; align-items: flex-start; }
.idx-approach-title { font-size: 17px; font-weight: 600; color: var(--stl-navy); margin-bottom: 4px; }
.idx-approach-desc { font-size: 15px; line-height: 1.55; color: var(--stl-body-soft); }

/* ---- Band 8 - Live-map CTA ---------------------------------------------
   CSS PROMOTED OUT of this page-scoped block at batch (b), to custom.css section 8
   as .stl-map-* / .stl-btn--outline-dark. The band is genuinely shared with
   contact.php (Contact.html lines 108-127 is the same markup), and the project
   CSS architecture puts cross-page rules in custom.css. Two copies behind a
   keep-in-sync comment is what drifts, so there is now exactly ONE definition.
   The markup below carries the promoted class names.
   -------------------------------------------------------------------- */

/* ---- Responsive ------------------------------------------------------
   Class-targeted replacements for the comp's inline-style attribute selectors.
   See custom.css section 7 for why these cannot stay as [style*="..."] rules.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .idx-services-grid,
  .idx-intro-inner--photo,
  .idx-approach { grid-template-columns: 1fr !important; }
  .idx-services-grid > *,
  .idx-intro-inner--photo > *,
  .idx-approach > * { grid-column: auto !important; }
  .idx-intro-inner--photo { padding-left: 22px; padding-right: 22px; }
  .idx-hero-inner { padding-left: 22px; padding-right: 22px; }
  .idx-logo { height: 220px; }
}

@media (max-width: 600px) {
  .idx-logo { height: 170px; }
  .idx-marquee-text { font-size: 24px; }
  .idx-review-card { padding: 32px 22px 28px; }
  .idx-review-quote { font-size: 18px; }
  .idx-review-nav--prev { left: -2px; }
  .idx-review-nav--next { right: -2px; }
}

/* ---------- about.php ---------- */
/* ==========================================================================
   Page-scoped - About.html  (prefix abt-)
   Shared design-system classes live in custom.css. Only rules unique to the
   About page belong here (D42 split).
   ========================================================================== */

/* ---- Keyframes (About-only: core-values comets + orb twinkle) ------------ */
@keyframes stl-comet     { 0% { opacity: 0; transform: translate(0,0) rotate(-26deg); } 6% { opacity: 1; } 42% { opacity: 1; } 62%, 100% { opacity: 0; transform: translate(560px,-280px) rotate(-26deg); } }
@keyframes stl-vtwinkle  { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---- Section 1 - Hero --------------------------------------------------- */
.abt-hero { position: relative; overflow: hidden; }
.abt-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abt-hero-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(42,33,64,.64), rgba(78,45,134,.38)); }
.abt-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.abt-hero-copy { font-size: 19px; line-height: 1.6; color: var(--stl-on-dark-soft); max-width: 60ch; margin: 0 auto; }

/* ---- Section 2 - Vision / Mission -------------------------------------- */
/* This band has NO heading, which is why template-catalog.json recorded only 5
   sections for About.html when there are 6 - its cues were heading-derived. */
.abt-vm { max-width: 1100px; margin: 0 auto; padding: 84px 32px; }
.abt-vm-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 20px; padding: 40px; }
.abt-vm-card--purple { background: var(--stl-purple); border-color: var(--stl-purple); }
.abt-vm-copy { font-size: 18px; line-height: 1.7; color: var(--stl-body); margin: 0; }
.abt-vm-copy--on-dark { font-size: 17px; color: var(--stl-on-dark-soft); }

/* ---- Section 3 - Counselor bios ---------------------------------------- */
.abt-bios-inner { max-width: 1100px; margin: 0 auto; padding: 84px 32px; }
.abt-bio-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 20px; overflow: hidden; }
.abt-bio-img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: center top; display: block; }
.abt-bio-body { padding: 34px; }
.abt-bio-name { font-family: var(--stl-serif); font-weight: 600; font-size: 24px; color: var(--stl-purple); margin: 0 0 4px; }
.abt-bio-creds { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--stl-gold-dark); margin-bottom: 16px; }
.abt-bio-copy { font-size: 15.5px; line-height: 1.7; color: var(--stl-body); margin: 0; }

/* ---- Section 4 - Why families choose us -------------------------------- */
.abt-why { max-width: 1100px; margin: 0 auto; padding: 84px 32px; }
.abt-why-head { max-width: 620px; margin: 0 0 44px; }
.abt-reason-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 16px; padding: 26px 28px; display: flex; gap: 16px; align-items: flex-start; }
.abt-reason-tile { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--stl-tint); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--stl-gold); }
.abt-reason-title { font-size: 17px; font-weight: 600; color: var(--stl-navy); margin-bottom: 4px; }
.abt-reason-desc { font-size: 15px; line-height: 1.55; color: var(--stl-body-soft); }

/* ---- Section 5 - Core values (dark band) ------------------------------- */
.abt-values { position: relative; overflow: hidden; }
.abt-values-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: blur(5px); }
.abt-values-scrim { position: absolute; inset: 0; background: radial-gradient(120% 120% at 80% 0%, #3a2d5e, #231b3a 60%, #1c1531); }
.abt-comet {
  position: absolute; z-index: 1; border-radius: 2px;
  top: var(--t); left: calc(0px - var(--l)); width: var(--l); height: var(--h);
  background: linear-gradient(90deg, var(--c0), var(--c1));
  box-shadow: 8px 0 12px 1px var(--g);
  animation: stl-comet var(--d) ease-in-out infinite var(--delay);
}
.abt-values-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 96px 32px; }
.abt-values-head { text-align: center; max-width: 620px; margin: 0 auto 52px; }
.abt-values-sub { font-size: 17px; line-height: 1.65; color: #c9c1dd; margin: 0; }
.abt-value-card {
  position: relative; overflow: hidden;
  border: 1px solid #574978; border-radius: 20px; padding: 40px 32px 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  transition: border-color .2s ease;
}
.abt-value-glow { position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(226,176,70,.28), transparent 70%); }
.abt-value-orb {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFE39A, #E2B046 70%);
  box-shadow: 0 0 22px rgba(226,176,70,.55); margin-bottom: 20px;
}
.abt-vstar { font-size: 24px; color: var(--stl-navy); animation: stl-vtwinkle 3s ease-in-out infinite; }
.abt-value-title { font-family: var(--stl-serif); font-weight: 600; font-size: 23px; color: var(--stl-on-dark); margin: 0 0 10px; }
.abt-value-desc { font-size: 15px; line-height: 1.6; color: #c9c1dd; margin: 0; }

/* ---- Section 6 - CTA --------------------------------------------------- */
.abt-cta { max-width: 760px; margin: 0 auto; padding: 84px 32px; text-align: center; }
.abt-cta-copy { font-size: 18px; line-height: 1.7; color: var(--stl-body); max-width: 54ch; margin: 0 auto 30px; }
.abt-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Hover states - converted from style-hover="" (3 in this comp) ------
   support.js is dropped on conversion, so without these the hover states vanish
   silently. Scoped to classes, never a global a:hover (custom.css section 6).
   ---------------------------------------------------------------------- */
.abt-value-card:hover { border-color: var(--stl-gold); }

/* ---- Responsive -------------------------------------------------------
   Class-targeted replacements for the comp's inline-style attribute selectors.
   See custom.css section 7 for why these cannot stay as [style*="..."] rules.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .abt-comet { display: none !important; }
  .abt-hero-inner,
  .abt-vm,
  .abt-bios-inner,
  .abt-why,
  .abt-values-inner,
  .abt-cta { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .abt-vm-card { padding: 30px; }
  .abt-bio-body { padding: 26px; }
  .abt-value-card { padding: 32px 26px 28px; }
}

/* ---------- services.php ---------- */
/* ==========================================================================
   Page-scoped — Services.html  (prefix svc-)
   ⚠️ svc- is the LISTING page. svd- is the service DETAIL page. One character apart.
   Shared design-system classes live in custom.css. Only rules unique to the
   Services listing belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 · Hero --------------------------------------------------- */
.svc-hero { max-width: 900px; margin: 0 auto; padding: 72px 32px 40px; text-align: center; }
.svc-hero-lead { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 60ch; margin: 0 auto 16px; }
.svc-hero-copy { font-size: 16px; line-height: 1.65; color: var(--stl-body-soft); max-width: 64ch; margin: 0 auto; }

/* ---- Section 2 · Services index ----------------------------------------
   The comp used CSS MULTI-COLUMN here (columns:3), not grid — cards flow down
   each column and `break-inside:avoid` keeps one card intact. Kept as multi-column
   so the visual result matches the comp exactly.
   ---------------------------------------------------------------------- */
.svc-index { max-width: 1180px; margin: 0 auto; padding: 24px 32px 80px; }
.svc-cols { columns: 3; column-gap: 22px; }
.svc-card {
  display: block; break-inside: avoid;
  padding: 22px 24px; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--stl-border); border-radius: 16px;
  color: var(--stl-navy);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* Task 45 (2026-10-07): the comp's star tile became a full-width photo across the top of the
   card - the service's hero_image thumb, else /images/nophoto.png. Negative margins pull it to
   the card edges; the radius is the card's 16px minus its 1px border. */
.svc-card-photo { display: block; margin: -22px -24px 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px 15px 0 0; background: var(--stl-tint); }
.svc-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-card-title { display: block; font-family: var(--stl-serif); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--stl-purple); margin-bottom: 6px; }
/* Task 45: every summary renders exactly 2 lines - clamped at 2, and min-height (2 x 1.5em)
   holds a 1-line summary open to 2 so every card lines up. */
.svc-card-desc { display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--stl-body-soft); margin-bottom: 12px; }
.svc-card-more { display: block; font-size: 13px; font-weight: 600; color: var(--stl-gold-dark); }

/* ---- Section 3 · "Not sure which service" CTA band --------------------- */
.svc-unsure { background: var(--stl-purple); }
.svc-unsure-inner { max-width: 760px; margin: 0 auto; padding: 82px 32px; text-align: center; }
.svc-unsure-copy { font-size: 17px; line-height: 1.7; color: var(--stl-on-purple); max-width: 56ch; margin: 0 auto 30px; }
.svc-unsure-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Hover states — converted from style-hover="" (3 in this comp) ------
   support.js is dropped on conversion, so without these the hover states vanish
   silently. The two CTA hovers are already covered by custom.css §6
   (.stl-btn--gold:hover / .stl-btn--ghost:hover); only the card needs a rule here.
   Scoped to a class, never a global a:hover — this card sits on cream, but the
   band-3 CTAs sit on purple and a global rule would paint brand-on-brand.
   ---------------------------------------------------------------------- */
.svc-card:hover {
  border-color: var(--stl-purple);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -20px rgba(78,45,134,.5);
}

/* ---- Responsive -------------------------------------------------------
   Class-targeted replacement for the comp's [style*="columns:3"] selector.
   See custom.css §7 for why these cannot stay as [style*="..."] rules.
   ⚠️ This is a MULTI-COLUMN collapse (columns), not a grid collapse — the shared
   .stl-grid-* rules in custom.css §7 do not cover it.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .svc-cols { columns: 1 !important; }
  .svc-hero,
  .svc-index,
  .svc-unsure-inner { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .svc-card { padding: 20px 20px; }
  .svc-card-photo { margin: -20px -20px 14px; }
}

/* ---------- service-detail.php ---------- */
/* ==========================================================================
   Page-scoped — ServicePage.dc.html  (prefix svd-)
   ⚠️ svd- is the service DETAIL page. svc- is the LISTING page. One character apart.
   Shared design-system classes live in custom.css; the breadcrumb strip this page
   uses is custom.css §10 (.stl-crumb), promoted out of §9 in this batch because
   ServicePage carries the identical strip. Only rules unique to the detail page
   belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 · Hero (copy left, blurred portrait right) --------------- */
.svd-hero {
  max-width: 1220px; margin: 0 auto; padding: 44px 32px 72px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
/* 46px, against the shared .stl-h1's 52px — this hero sits under a breadcrumb
   rather than at the top of the page, so the comp runs it smaller. */
.svd-h1 { font-family: var(--stl-serif); font-weight: 600; font-size: 46px; line-height: 1.1; letter-spacing: -.01em; color: var(--stl-purple); margin: 0 0 20px; }
.svd-sub { font-size: 18.5px; line-height: 1.6; color: var(--stl-body); max-width: 52ch; margin: 0 0 32px; }
.svd-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.svd-hero-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 5/6; box-shadow: 0 30px 60px -30px rgba(78,45,134,.4); }
/* The portrait is deliberately scaled and blurred — it is atmosphere behind the
   copy, not a photo of a real client. Kept exactly as the comp specifies it. */
.svd-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.svd-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(78,45,134,.06), rgba(78,45,134,.26)); }

/* ---- Section 2 · Lead (lilac band) -------------------------------------- */
.svd-lead-inner { max-width: 820px; margin: 0 auto; padding: 74px 32px; text-align: center; }
.svd-lead-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--stl-purple); margin: 0 0 20px; }
.svd-lead-copy { font-size: 18px; line-height: 1.7; color: var(--stl-body); max-width: 64ch; margin: 0 auto; }

/* ---- Section 3 · What we help with -------------------------------------- */
.svd-help { max-width: 1000px; margin: 0 auto; padding: 78px 32px; }
.svd-help-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.svd-help-intro { font-size: 17px; line-height: 1.6; color: var(--stl-body); margin: 0; }
/* Reuses the shared .stl-grid-2 so §7's mobile collapse applies; the comp runs a
   tighter gap and a narrower container than the shared default. */
.svd-help-grid { gap: 14px; max-width: 820px; margin: 0 auto; }
.svd-help-item { background: #fff; border: 1px solid var(--stl-border); border-radius: 14px; padding: 20px 22px; display: flex; gap: 14px; align-items: center; }
.svd-help-icon { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--stl-tint); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--stl-gold); }
.svd-help-label { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--stl-navy); }

/* ---- Section 4 · Closing card ------------------------------------------- */
.svd-close { max-width: 1220px; margin: 0 auto; padding: 0 32px 78px; }
.svd-close-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 22px; padding: 56px; max-width: 900px; margin: 0 auto; text-align: center; }
.svd-close-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 30px; line-height: 1.18; color: var(--stl-purple); margin: 0 0 16px; }

/* ---- Section 5 · Related support (lilac band) --------------------------- */
.svd-related-inner { max-width: 1100px; margin: 0 auto; padding: 72px 32px; }
.svd-related-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 28px; color: var(--stl-purple); margin: 0 0 28px; text-align: center; }
.svd-related-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 10px; color: var(--stl-navy); transition: border-color .2s ease, transform .2s ease; }
.svd-related-title { font-family: var(--stl-serif); font-weight: 600; font-size: 19px; color: var(--stl-purple); }
.svd-related-more { font-size: 14px; font-weight: 600; color: var(--stl-gold-dark); }

/* ---- Section 6 · CTA (purple band) -------------------------------------- */
.svd-cta { background: var(--stl-purple); }
.svd-cta-inner { max-width: 760px; margin: 0 auto; padding: 82px 32px; text-align: center; }
.svd-cta-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 36px; line-height: 1.14; color: var(--stl-on-dark); margin: 0 0 16px; }
.svd-cta-copy { font-size: 17px; line-height: 1.65; color: var(--stl-on-purple); max-width: 52ch; margin: 0 auto 30px; }

/* ---- Hover states — converted from style-hover="" (5 in this comp) ------
   support.js is dropped on conversion, so without real CSS these vanish silently.
   Two of the five (the breadcrumb links) reuse .stl-crumb-link:hover from
   custom.css §10; two more (the hero buttons) reuse .stl-btn--purple:hover and
   .stl-btn--outline:hover from §6. Only the related card is unique to this page,
   so only it is declared here. No global a:hover was added. Verify by HOVERING.
   ---------------------------------------------------------------------- */
.svd-related-card:hover { border-color: var(--stl-purple); transform: translateY(-3px); }

/* ---- Responsive -------------------------------------------------------
   Class-targeted replacements for the comp's inline-style attribute selectors.
   See custom.css §7 for why these cannot stay as [style*="..."] rules.

   Grid diff against the comp's own collapse list (NOT assumed — Blog's featured
   grid was missing from the sibling set, so every grid is checked): this comp uses
   1.05fr/.95fr (hero), 1fr 1fr (help) and repeat(3,1fr) (related). All three ARE
   in the comp's selector list, so nothing is missing here. The help and related
   grids collapse via the shared .stl-grid-2 / .stl-grid-3 rules in §7; only the
   hero grid needs a rule of its own.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .svd-hero { grid-template-columns: 1fr !important; }
  /* E-74 span audit reset — an explicit multi-track span on a child makes CSS
     generate an implicit second column and defeats the collapse above. */
  .svd-hero > * { grid-column: auto !important; }

  .svd-hero,
  .svd-lead-inner,
  .svd-help,
  .svd-close,
  .svd-related-inner,
  .svd-cta-inner { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  /* Replaces h1[style*="font-size:4"] — this h1 is 46px, so it matched the comp's
     "font-size:4" attribute selector, not the "font-size:5" one. */
  .svd-h1 { font-size: 32px !important; line-height: 1.12 !important; }
  .svd-lead-h2 { font-size: 28px; }
  .svd-cta-h2 { font-size: 30px; }
  .svd-close-card { padding: 40px 26px; }
}

/* ---------- blog.php ---------- */
/* ==========================================================================
   Page-scoped — Blog.html  (prefix blg-)
   Shared design-system classes live in custom.css. Only rules unique to the
   Blog page belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 · Hero --------------------------------------------------- */
.blg-hero { max-width: 900px; margin: 0 auto; padding: 72px 32px 32px; text-align: center; }
.blg-hero-copy { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 58ch; margin: 0 auto; }

/* ---- Section 2 · Category pills ---------------------------------------- */
.blg-cats { max-width: 1100px; margin: 0 auto; padding: 8px 32px 24px; }
.blg-cats-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.blg-cat-pill {
  display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--stl-purple);
  background: var(--stl-lilac); border: 1px solid #e3dcef;
  padding: 9px 18px; border-radius: 999px;
}

/* ---- Section 3 · Featured post ----------------------------------------- */
.blg-featured-section { max-width: 1100px; margin: 0 auto; padding: 24px 32px 20px; }
.blg-featured {
  display: grid; grid-template-columns: 1.1fr .9fr;
  background: #fff; border: 1px solid var(--stl-border); border-radius: 22px;
  overflow: hidden; color: var(--stl-navy);
  transition: border-color .2s ease;
}
/* Striped placeholder tile — the comp shipped no real featured image. Task 13
   replaces this with the post's CMS upload. */
.blg-featured-img {
  min-height: 300px;
  background: repeating-linear-gradient(135deg, #efe7f6, #efe7f6 16px, #e6ddf0 16px, #e6ddf0 32px);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #a99ec2; font-weight: 700;
}
.blg-featured-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.blg-meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.blg-meta-cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stl-gold-dark); }
.blg-meta-read { font-size: 13px; color: var(--stl-body-faint); }
.blg-featured-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 30px; line-height: 1.2; color: var(--stl-purple); margin: 0 0 14px; }
.blg-featured-copy { font-size: 16px; line-height: 1.65; color: var(--stl-body); margin: 0 0 18px; }
.blg-more { font-size: 14px; font-weight: 600; color: var(--stl-gold-dark); }

/* ---- Section 4 · Post grid --------------------------------------------- */
/* The grid itself is the shared .stl-grid-3 (repeat(3,1fr) / gap 22px) — an exact
   match for the comp's inline values, so no page-scoped grid is declared here and
   its mobile collapse comes from custom.css §7. */
.blg-grid-section { max-width: 1100px; margin: 0 auto; padding: 20px 32px 40px; }
.blg-post {
  background: #fff; border: 1px solid var(--stl-border); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column; color: var(--stl-navy);
  transition: border-color .2s ease, transform .2s ease;
}
.blg-post-img {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg, #f3eef8, #f3eef8 14px, #eae2f2 14px, #eae2f2 28px);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #b0a6c6; font-weight: 700;
}
.blg-post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blg-post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.blg-post-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stl-gold-dark); }
.blg-post-read { font-size: 12.5px; color: var(--stl-body-faint); }
.blg-post-h3 { font-family: var(--stl-serif); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--stl-purple); margin: 0 0 10px; }
.blg-post-copy { font-size: 14.5px; line-height: 1.55; color: var(--stl-body-soft); margin: 0 0 16px; }
.blg-post-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--stl-gold-dark); }

/* ---- Section 5 · CTA (dark purple band) -------------------------------- */
.blg-cta { background: var(--stl-purple); }
.blg-cta-inner { max-width: 760px; margin: 0 auto; padding: 78px 32px; text-align: center; }
.blg-cta-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 34px; line-height: 1.14; color: var(--stl-on-dark); margin: 0 0 16px; }
.blg-cta-copy { font-size: 17px; line-height: 1.65; color: var(--stl-on-purple); max-width: 54ch; margin: 0 auto 30px; }

/* ---- Hover states — converted from style-hover="" (3 in this comp) ------
   support.js is dropped on conversion, so without real CSS the hover states vanish
   silently. The two card hovers live in custom.css §6 (.blg-featured / .blg-post)
   because they pair with the shared no-global-a:hover rule; the CTA button reuses
   .stl-btn--gold:hover. Nothing hover-related is left in this file.
   ---------------------------------------------------------------------- */

/* ---- Responsive -------------------------------------------------------
   ⛔ Blog.html is the ONE comp in the set that ships NO @media block at all —
   verified with a probe that fired on the sibling comps. It still lays out a
   1.1fr/.9fr featured grid and a repeat(3,1fr) post grid, so the comp is DEFECTIVE
   on mobile, not merely different. Clay approved (2026-08-04) applying the sibling
   comps' established collapse block — Reuse Cascade rung 4, the template's own CSS
   — rather than shipping a knowingly broken page.

   ⚠️ Note the featured grid needed its OWN rule: the sibling block's selector list
   covers 1.05fr/.95fr, 1.15fr/.85fr, .85fr/1.15fr and .9fr/1.1fr but NOT the
   1.1fr/.9fr this comp uses, so a blind copy of the sibling set would have left the
   featured card uncollapsed on phones. Flagged to plan Task 22 (eod).
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .blg-featured { grid-template-columns: 1fr !important; }
  /* E-74 span audit reset — an explicit multi-track span on a child makes CSS
     generate an implicit second column and defeats the collapse above. */
  .blg-featured > * { grid-column: auto !important; }

  .blg-hero,
  .blg-cats,
  .blg-featured-section,
  .blg-grid-section,
  .blg-cta-inner { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .blg-featured-body { padding: 30px; }
  .blg-featured-h2 { font-size: 26px; }
  .blg-cta-h2 { font-size: 28px; }
}

/* ---------- blog-detail.php ---------- */
/* ==========================================================================
   Page-scoped - blog post detail  (prefix bld-)
   bld- is the DETAIL page; blg- is the LISTING page in blog.php. One character
   apart. Shared design-system classes live in custom.css; the breadcrumb strip
   is custom.css section 10 (.stl-crumb), the same one service-detail.php uses.
   Only rules unique to this page belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 - Hero (centred, matches the Blog listing hero rhythm) ---- */
.bld-hero { max-width: 820px; margin: 0 auto; padding: 40px 32px 26px; text-align: center; }
.bld-h1 { font-family: var(--stl-serif); font-weight: 600; font-size: 42px; line-height: 1.14; letter-spacing: -.01em; color: var(--stl-purple); margin: 0 0 18px; }
.bld-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; }
.bld-meta-cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stl-gold-dark); }
.bld-meta-read, .bld-meta-date { font-size: 13px; color: var(--stl-body-faint); }
.bld-lead { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 58ch; margin: 0 auto; }

/* ---- Section 2 - Post image, or the comp's striped placeholder ---------- */
.bld-media { max-width: 1000px; margin: 0 auto; padding: 10px 32px 0; }
.bld-media-inner {
  aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--stl-border);
  background: repeating-linear-gradient(135deg, #efe7f6, #efe7f6 16px, #e6ddf0 16px, #e6ddf0 32px);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #a99ec2; font-weight: 700;
}
.bld-media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Section 3 - Article body (wysiwyg output, so descendants are styled) */
.bld-article { max-width: 760px; margin: 0 auto; padding: 44px 32px 10px; font-size: 17.5px; line-height: 1.75; color: var(--stl-body); }
.bld-article p { margin: 0 0 20px; }
.bld-article h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--stl-purple); margin: 34px 0 14px; }
.bld-article h3 { font-family: var(--stl-serif); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--stl-purple); margin: 28px 0 12px; }
.bld-article ul, .bld-article ol { margin: 0 0 20px; padding-left: 22px; }
.bld-article li { margin: 0 0 8px; }
.bld-article blockquote { margin: 26px 0; padding: 18px 24px; border-left: 3px solid var(--stl-gold); background: var(--stl-lilac); border-radius: 0 12px 12px 0; }
.bld-article img { max-width: 100%; height: auto; border-radius: 14px; }
.bld-article a { color: var(--stl-gold-dark); font-weight: 600; }
/* Scoped, never global - brand.css section 5 bans a blanket a:hover. */
.bld-article a:hover { text-decoration: underline; }

/* ---- Section 4 - Back link closer --------------------------------------- */
.bld-back { max-width: 760px; margin: 0 auto; padding: 26px 32px 76px; }

/* ---- Section 5 - CTA (purple band) -------------------------------------- */
.bld-cta { background: var(--stl-purple); }
.bld-cta-inner { max-width: 760px; margin: 0 auto; padding: 78px 32px; text-align: center; }
.bld-cta-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 34px; line-height: 1.14; color: var(--stl-on-dark); margin: 0 0 16px; }
.bld-cta-copy { font-size: 17px; line-height: 1.65; color: var(--stl-on-purple); max-width: 54ch; margin: 0 auto 30px; }

/* ---- Responsive --------------------------------------------------------
   This page declares no multi-column grid of its own, so there is no grid to
   collapse - only container padding and heading scale. Kept consistent with
   the sibling detail page's breakpoints (860 / 600).
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .bld-hero,
  .bld-media,
  .bld-article,
  .bld-back,
  .bld-cta-inner { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .bld-h1 { font-size: 30px; line-height: 1.14; }
  .bld-cta-h2 { font-size: 28px; }
  .bld-article { font-size: 16.5px; }
}

/* ---------- contact.php ---------- */
/* ==========================================================================
   Page-scoped — Contact.html  (prefix cnt-)
   Shared design-system classes live in custom.css. Only rules unique to the
   Contact page belong here (D42 split).

   NOTE: the live-map CTA band at the bottom of this page uses the SHARED
   .stl-map-* classes in custom.css §8 — no map CSS is duplicated here. Stage 1
   had that band page-scoped in index.php as .idx-map-* behind a keep-in-sync
   comment; batch (b) promoted it to custom.css so there is one definition.
   ========================================================================== */

/* ---- Section 1 · Hero --------------------------------------------------- */
.cnt-hero { max-width: 820px; margin: 0 auto; padding: 72px 32px 40px; text-align: center; }
.cnt-hero-copy { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 56ch; margin: 0 auto; }

/* ---- Section 2 · Form + info two-column --------------------------------- */
.cnt-layout {
  max-width: 1100px; margin: 0 auto; padding: 24px 32px 84px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start;
}

/* Form card */
.cnt-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 22px; padding: 40px; }
.cnt-form-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 26px; color: var(--stl-purple); margin: 0 0 8px; }
.cnt-form-intro { font-size: 15px; line-height: 1.6; color: var(--stl-body-soft); margin: 0 0 28px; }
.cnt-fields { display: grid; gap: 18px; }
.cnt-label { display: block; }
.cnt-label-text { display: block; font-size: 13px; font-weight: 600; color: var(--stl-navy); margin-bottom: 7px; }
.cnt-input {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--stl-border); border-radius: 11px;
  font-size: 15px; color: var(--stl-navy); background: var(--stl-cream);
}
.cnt-input--area { resize: vertical; }
.cnt-note { font-size: 12.5px; line-height: 1.5; color: var(--stl-body-faint); margin: 0; }
.cnt-note a { font-weight: 600; }

/* Form control base styling — lifted from the comp's <style> preamble. Kept
   page-scoped because Contact is the only page with form controls until Task 14
   builds the real CMSB Form Generator form; promote to custom.css if that changes. */
.cnt-card input,
.cnt-card textarea,
.cnt-card select { font-family: var(--stl-sans); }
.cnt-card input:focus,
.cnt-card textarea:focus,
.cnt-card select:focus { outline: none; border-color: var(--stl-purple) !important; }
.cnt-card input::placeholder,
.cnt-card textarea::placeholder { color: #a99ec2; }

/* Info column */
.cnt-info { display: grid; gap: 20px; }
.cnt-info-card { background: var(--stl-lilac); border-radius: 18px; padding: 32px; }
.cnt-info-copy { font-size: 15px; line-height: 1.65; color: var(--stl-body); margin: 0 0 18px; }
.cnt-info-list { font-size: 15px; line-height: 2; color: var(--stl-navy); }
.cnt-info-row { margin-top: 12px; }
.cnt-info-label { color: var(--stl-purple); }
.cnt-info-link { color: var(--stl-navy); }   /* :hover lives in custom.css §6 */

/* Client-portal card (dark navy band) */
.cnt-portal-card { background: var(--stl-navy); border-radius: 18px; padding: 32px; }
.cnt-portal-eyebrow { color: var(--stl-gold-hover); letter-spacing: .18em; margin-bottom: 14px; }
.cnt-portal-copy { font-size: 15px; line-height: 1.6; color: #c9c1dd; margin: 0 0 18px; }
.cnt-portal-btn { font-size: 14px; padding: 12px 24px; }

/* ---- Hover states — converted from style-hover="" (6 in this comp) ------
   support.js is dropped on conversion, so without real CSS every hover state on
   this page vanishes silently. Five reuse shared rules from custom.css §6
   (.stl-btn--purple, .stl-btn--gold ×2, .stl-btn--outline-dark) and the two info
   anchors use .cnt-info-link:hover, also in §6 so it sits with the other scoped
   hovers rather than being re-declared per page. Nothing is left unconverted, and
   no global a:hover was introduced.
   ---------------------------------------------------------------------- */

/* ---- Responsive -------------------------------------------------------
   Class-targeted replacements for the comp's inline-style attribute selectors.
   See custom.css §7 for why these cannot stay as [style*="..."] rules.
   The Name/Phone pair inside the form is the shared .stl-grid-2 .stl-grid--tight,
   so its collapse comes from §7 rather than being repeated here.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .cnt-layout { grid-template-columns: 1fr !important; }
  /* E-74 span audit reset — an explicit multi-track span on a child makes CSS
     generate an implicit second column and defeats the collapse above. */
  .cnt-layout > * { grid-column: auto !important; }

  .cnt-hero,
  .cnt-layout { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .cnt-card { padding: 28px; }
  .cnt-info-card,
  .cnt-portal-card { padding: 26px; }
}

/* ---------- dj-khai-adventures.php ---------- */
/* ==========================================================================
   Page-scoped — DJKaiAdventures.html  (prefix dka-)
   Shared design-system classes live in custom.css; the DJ & Khai sub-brand tokens
   and shared band/button/frame classes live in custom.css §9. Only rules unique
   to this page belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 · Hero (violet-to-gold gradient) ------------------------- */
/* 3-stop gradient running into gold — unique to this hero, so it is NOT the
   shared .dk-band (which is the 2-stop violet used by the CTA bands). */
.dka-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--dk-grad-from), var(--dk-grad-to) 55%, var(--stl-gold)); }
.dka-hero-inner {
  position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 88px 32px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.dka-hero-h1 { font-family: var(--stl-serif); font-weight: 700; font-size: 54px; line-height: 1.05; color: #fff; margin: 0 0 20px; }
.dka-hero-copy { font-size: 18px; line-height: 1.55; color: var(--dk-on-grad); max-width: 46ch; margin: 0 0 32px; }
.dka-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* Thicker, brighter frame than the shared .dk-frame — this is the hero showpiece. */
.dka-hero-cover { border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(0,0,0,.5); border: 6px solid rgba(255,255,255,.6); }
.dka-hero-cover img { width: 100%; display: block; }

/* ---- Section 2 · Story ------------------------------------------------- */
.dka-story { max-width: 820px; margin: 0 auto; padding: 82px 32px; text-align: center; }
.dka-story-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 36px; line-height: 1.14; color: var(--stl-purple); margin: 0 0 20px; }
.dka-story-copy { font-size: 18px; line-height: 1.7; color: var(--stl-body); max-width: 64ch; margin: 0 auto; }
/* Story Photo variant (Task 35): same grid + frame vocabulary as the activity band.
   Applied only when story_image is set, so the text-only band above is untouched. */
.dka-story--photo { max-width: 1100px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; text-align: left; }
.dka-story--photo .dka-story-copy { margin: 0; }
.dka-story-frame { border-radius: 22px; }

/* ---- Section 3 · Video ------------------------------------------------- */
.dka-video-inner { max-width: 960px; margin: 0 auto; padding: 78px 32px; text-align: center; }
.dka-video-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--stl-purple); margin: 0 0 28px; }
.dka-video-frame { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--stl-border); box-shadow: 0 24px 50px -30px rgba(78,45,134,.45); }
.dka-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Section 4 · Activity book ----------------------------------------- */
.dka-activity {
  max-width: 1100px; margin: 0 auto; padding: 82px 32px;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center;
}
/* The comp used a 22px radius here vs the shared .dk-frame's 20px — a 2px
   difference, kept faithful rather than harmonized, as a class not an inline style. */
.dka-activity-frame { border-radius: 22px; }
.dka-activity-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--stl-purple); margin: 0 0 18px; }
.dka-activity-copy { font-size: 17px; line-height: 1.7; color: var(--stl-body); margin: 0 0 26px; }

/* ---- Section 5 · CTA (shared .dk-band) --------------------------------- */
.dka-cta-inner { max-width: 760px; margin: 0 auto; padding: 80px 32px; text-align: center; }
.dka-cta-h2 { font-family: var(--stl-serif); font-weight: 700; font-size: 38px; line-height: 1.12; color: #fff; margin: 0 0 16px; }
.dka-cta-copy { font-size: 18px; line-height: 1.65; color: var(--dk-on-grad); max-width: 50ch; margin: 0 auto 30px; }

/* ---- Hover states — converted from style-hover="" (4 in this comp) ------
   support.js is dropped on conversion, so without real CSS these vanish silently.
   All 4 reuse shared rules: .dk-btn-white, .dk-btn-glass, .stl-btn--purple, and
   .dk-band .stl-btn--gold (pale-gold hover on a gradient band) — all in custom.css
   §6/§9. Nothing hover-related is declared here, and no global a:hover was added.
   ---------------------------------------------------------------------- */

/* ---- Responsive -------------------------------------------------------
   Class-targeted replacements for the comp's inline-style attribute selectors.
   See custom.css §7 for why these cannot stay as [style*="..."] rules.
   This comp carries the standard 11-selector sibling set; the two grids it
   actually uses are 1.05fr/.95fr (hero) and .9fr/1.1fr (activity), BOTH of which
   are in that set — unlike Blog's featured grid, which was not.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .dka-hero-inner,
  .dka-story--photo,
  .dka-activity { grid-template-columns: 1fr !important; }
  /* E-74 span audit reset — an explicit multi-track span on a child makes CSS
     generate an implicit second column and defeats the collapse above. */
  .dka-hero-inner > *,
  .dka-story--photo > *,
  .dka-activity > * { grid-column: auto !important; }

  .dka-hero-inner,
  .dka-story,
  .dka-video-inner,
  .dka-activity,
  .dka-cta-inner { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  /* Replaces h1[style*="font-size:5"] — this h1 is 54px. */
  .dka-hero-h1 { font-size: 34px !important; line-height: 1.12 !important; }
  .dka-story-h2 { font-size: 28px; }
  .dka-cta-h2 { font-size: 30px; }
}

/* ---------- dj-khai-books.php ---------- */
/* ==========================================================================
   Page-scoped — DJKaiBooks.html  (prefix dkb-)
   Shared design-system classes live in custom.css; the DJ & Khai sub-brand tokens
   and shared band/button/crumb/frame classes live in custom.css §9. Only rules
   unique to this page belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 · Hero --------------------------------------------------- */
.dkb-hero { max-width: 900px; margin: 0 auto; padding: 44px 32px 40px; text-align: center; }
.dkb-h1 { font-family: var(--stl-serif); font-weight: 700; font-size: 46px; line-height: 1.12; color: var(--stl-purple); margin: 0 0 18px; }
.dkb-hero-copy { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 60ch; margin: 0 auto; }

/* ---- Sections 2-5 · Alternating book bands ------------------------------ */
.dkb-band {
  max-width: 1080px; margin: 0 auto;
  display: grid; gap: 44px; align-items: center;
}
.dkb-band--img-left  { grid-template-columns: .85fr 1.15fr; }
.dkb-band--img-right { grid-template-columns: 1.15fr .85fr; }
.dkb-band--first { padding: 24px 32px 40px; }
.dkb-band--rest  { padding: 20px 32px 50px; }
.dkb-band-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--stl-purple); margin: 0 0 16px; }
.dkb-band-copy { font-size: 16px; line-height: 1.7; color: var(--stl-body); margin: 0 0 16px; }
.dkb-band-copy--last { margin: 0; }
.dkb-band-copy--pre-cta { margin: 0 0 24px; }
.dkb-eyebrow { letter-spacing: .2em; margin-bottom: 14px; }
.dkb-btn-buy { font-size: 14.5px; font-weight: 700; padding: 13px 28px; }

/* ---- Section 6 · More in the series ------------------------------------- */
.dkb-more { max-width: 1080px; margin: 0 auto; padding: 8px 32px 56px; }
.dkb-more-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.dkb-more-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 30px; line-height: 1.18; color: var(--stl-purple); margin: 0 0 12px; }
.dkb-more-sub { font-size: 16px; line-height: 1.65; color: var(--stl-body-soft); margin: 0; }
.dkb-more-list { display: grid; grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 34px; }
.dkb-more-card { background: #fff; border: 1px solid var(--stl-border); border-radius: 20px; padding: 24px; display: flex; gap: 24px; align-items: center; }
.dkb-more-tile {
  flex: none; width: 120px; aspect-ratio: 3 / 4; border-radius: 12px;
  border: 1px solid var(--stl-border);
  background: repeating-linear-gradient(135deg, var(--stl-lilac), var(--stl-lilac) 9px, #E7DEF3 9px, #E7DEF3 18px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.dkb-more-tile-label { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: var(--stl-body-faint); line-height: 1.4; padding: 0 8px; }
.dkb-more-flag { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stl-gold-dark); margin-bottom: 8px; }
.dkb-more-title { font-family: var(--stl-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--stl-purple); margin: 0 0 8px; }
.dkb-more-desc { font-size: 14.5px; line-height: 1.6; color: var(--stl-body-soft); margin: 0; }

/* ---- Section 7 · Where to buy (shared .dk-band) ------------------------- */
.dkb-buy-inner { max-width: 760px; margin: 0 auto; padding: 80px 32px; text-align: center; }
.dkb-buy-eyebrow { font-weight: 800; letter-spacing: .18em; color: var(--stl-gold-pale); margin-bottom: 18px; }
.dkb-buy-h2 { font-family: var(--stl-serif); font-weight: 700; font-size: 36px; line-height: 1.14; color: #fff; margin: 0 0 16px; }
.dkb-buy-copy { font-size: 17px; line-height: 1.65; color: var(--dk-on-grad); max-width: 52ch; margin: 0 auto 30px; }
.dkb-buy-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.dkb-buy-row .stl-btn { font-size: 15px; font-weight: 700; padding: 16px 32px; }

/* ---- Section 8 · Back link ---------------------------------------------- */
.dkb-back { max-width: 760px; margin: 0 auto; padding: 70px 32px; text-align: center; }
.dkb-back-copy { font-size: 17px; line-height: 1.6; color: var(--stl-body); margin: 0 0 22px; }
.dkb-back-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 860px) {
  .dkb-band--img-left,
  .dkb-band--img-right { grid-template-columns: 1fr !important; }
  .dkb-band > * { grid-column: auto !important; }
  .dkb-hero,
  .dkb-band,
  .dkb-more,
  .dkb-buy-inner,
  .dkb-back { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .dkb-h1 { font-size: 32px !important; line-height: 1.12 !important; }
  .dkb-band-h2 { font-size: 24px; }
  .dkb-buy-h2 { font-size: 29px; }
  .dkb-more-card { flex-direction: column; text-align: center; }
}

/* ---------- dj-khai-characters.php ---------- */
/* ==========================================================================
   Page-scoped — DJKaiCharacters.html  (prefix dkc-)
   Shared design-system classes live in custom.css; the DJ & Khai sub-brand tokens
   and shared crumb/button classes live in custom.css §9. Only rules unique to this
   page belong here (D42 split).
   ========================================================================== */

/* ---- Section 1 · Hero --------------------------------------------------- */
.dkc-hero { max-width: 900px; margin: 0 auto; padding: 44px 32px 34px; text-align: center; }
/* 46px / weight 700, same as the Books page h1 — see the 600px note below. */
.dkc-h1 { font-family: var(--stl-serif); font-weight: 700; font-size: 46px; line-height: 1.12; color: var(--stl-purple); margin: 0 0 18px; }
.dkc-hero-copy { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 58ch; margin: 0 auto; }

/* ---- Shared character-card pieces -------------------------------------- */
/* Two-column, gap 30 — wider than the shared .stl-grid-2 (gap 24), so this page
   declares its own rather than fighting the shared class with an override. */
.dkc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.dkc-head-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
/* Avatar. The photo comes from the record as a CSS custom property, and the ring
   colour on the kid cards is per-character data (--dkc-ring). */
.dkc-avatar {
  width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0;
  background-image: var(--dkc-photo);
  background-size: cover; background-position: center;
}
.dkc-role { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* ---- Section 2 · The kids (light cards) --------------------------------- */
.dkc-kids { max-width: 1080px; margin: 0 auto; padding: 20px 32px 10px; }
.dkc-kid-card {
  background: #fff; border: 1px solid var(--dk-card-border); border-radius: 24px;
  padding: 34px 32px 32px; box-shadow: 0 26px 50px -34px rgba(78,45,134,.45);
}
.dkc-kid-avatar { background-color: var(--dk-card-border); border: 3px solid var(--dkc-ring); }
.dkc-kid-name { font-family: var(--stl-serif); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--stl-purple); margin: 0 0 4px; }
.dkc-kid-role { color: var(--stl-gold-dark); }
.dkc-kid-copy { font-size: 16.5px; line-height: 1.72; color: var(--stl-body); margin: 0 0 18px; }
.dkc-kid-copy--mid { margin: 0 0 14px; }
.dkc-kid-copy--last { margin: 0; }
.dkc-kid-strong { color: var(--stl-navy); }
.dkc-favcolor { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--stl-cream); margin-bottom: 18px; }
.dkc-favcolor-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--dkc-ring); flex-shrink: 0; }
.dkc-favcolor-label { font-size: 14px; font-weight: 600; color: var(--stl-navy); }

/* ---- Section 3 · The grandparents (dark cards) -------------------------- */
.dkc-grands { max-width: 1080px; margin: 0 auto; padding: 34px 32px 20px; }
.dkc-grands-head { text-align: center; margin-bottom: 30px; }
.dkc-grands-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--stl-purple); margin: 0; }
.dkc-grand-card {
  background: linear-gradient(160deg, var(--stl-purple), var(--dk-deep));
  border-radius: 24px; padding: 36px 34px 34px; color: #fff;
  box-shadow: 0 30px 60px -34px rgba(42,33,64,.7);
}
.dkc-grand-avatar { background-color: rgba(255,255,255,.14); border: 3px solid var(--stl-gold); }
/* Heading colour is INHERITED from the card (color:#fff) rather than set here — the
   E-25 dark-band trap. A direct colour rule on a heading beats an inherited band
   colour regardless of specificity, so brand-css must never blanket-colour h1-h6. */
.dkc-grand-name { font-family: var(--stl-serif); font-weight: 700; font-size: 30px; line-height: 1.1; margin: 0 0 4px; }
.dkc-grand-role { color: var(--stl-gold-hover); }
.dkc-grand-copy { font-size: 16.5px; line-height: 1.72; color: var(--dk-on-deep); margin: 0 0 22px; }
.dkc-facts { display: grid; gap: 14px; }
.dkc-fact { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.dkc-fact-label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stl-gold-hover); }
.dkc-fact-value { font-size: 15.5px; line-height: 1.6; color: var(--dk-on-deep); }

/* ---- Section 4 · CTA card ----------------------------------------------- */
.dkc-cta { max-width: 1080px; margin: 0 auto; padding: 56px 32px 70px; }
.dkc-cta-card {
  background: #fff; border: 1px solid var(--dk-card-border); border-radius: 26px;
  padding: 52px 40px; text-align: center; box-shadow: 0 26px 50px -34px rgba(78,45,134,.4);
}
.dkc-cta-h2 { font-family: var(--stl-serif); font-weight: 700; font-size: 34px; line-height: 1.14; color: var(--stl-purple); margin: 0 0 16px; }
.dkc-cta-copy { font-size: 17px; line-height: 1.65; color: var(--stl-body); max-width: 50ch; margin: 0 auto 28px; }
.dkc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.dkc-cta-row .stl-btn { font-size: 15px; padding: 16px 32px; }

/* ---- Hover states — converted from style-hover="" (3 in this comp) ------
   support.js is dropped on conversion, so without real CSS these vanish silently.
   All 3 reuse shared rules from custom.css §6/§9: .stl-crumb-link, .stl-btn--purple,
   .stl-btn--outline. Nothing hover-related is declared here, and no global a:hover
   was added.
   ---------------------------------------------------------------------- */

/* ---- Responsive -------------------------------------------------------
   Class-targeted replacements for the comp's inline-style attribute selectors.
   See custom.css §7 for why these cannot stay as [style*="..."] rules.

   ⚠️ This comp carries the SHORTER 6-selector @media variant, not the 11-selector
   set the other comps use. Two of its selectors — [style*="200px 1fr"] and
   [style*="1fr 200px"] — match NOTHING in its own markup: they are dead rules left
   over from an earlier revision of the design. Dead rules are not ported.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .dkc-pair { grid-template-columns: 1fr !important; }
  /* E-74 span audit reset — an explicit multi-track span on a child makes CSS
     generate an implicit second column and defeats the collapse above. */
  .dkc-pair > * { grid-column: auto !important; }

  .dkc-hero,
  .dkc-kids,
  .dkc-grands,
  .dkc-cta { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  /* Replaces this comp's own h1[style*="font-size:46px"] rule -> 33px.
     ⚠️ DJKaiBooks.html has an IDENTICAL 46px h1 but collapses it to 32px, because it
     matched the generic h1[style*="font-size:4"] selector instead. The 1px
     disagreement is in the comps, not introduced here; each page keeps its own
     value rather than being silently harmonized. Flagged to Task 22. */
  .dkc-h1 { font-size: 33px !important; line-height: 1.12 !important; }
  .dkc-kid-card { padding: 28px 24px 26px; }
  .dkc-grand-card { padding: 30px 26px 28px; }
  .dkc-cta-card { padding: 38px 26px; }
  .dkc-grands-h2 { font-size: 28px; }
  .dkc-cta-h2 { font-size: 28px; }
}

/* ---------- thanks.php ---------- */
/* ==========================================================================
   Page-scoped — thanks.php (prefix thx-)
   Shared design-system classes live in custom.css. Only rules unique to this
   page belong here (D42 split).
   ========================================================================== */
.thx-hero { max-width: 720px; margin: 0 auto; padding: clamp(80px, 12vw, 160px) 32px; text-align: center; }
.thx-lead { font-size: 19px; line-height: 1.6; color: var(--stl-body); max-width: 56ch; margin: 24px auto 0; }
.thx-cta { margin-top: 40px; }

/* ---------- 404.php ---------- */
/* ==========================================================================
   Page-scoped — 404  (prefix err-)
   No comp exists for this page; these rules are the canonical 404 layout built
   on the shared design system. Shared classes live in custom.css (D42 split).
   ========================================================================== */

.err-wrap {
  max-width: 900px; margin: 0 auto; padding: 96px 32px 104px;
  text-align: center;
}

/* The 404 artwork. Two files ship: 404-CDG.png for normal viewports and
   404-sm.png for narrow ones, swapped by <picture> rather than by CSS so the
   browser never downloads both. */
.err-art { max-width: 420px; width: 100%; height: auto; margin: 0 auto 40px; display: block; }

.err-h1 {
  font-family: var(--stl-serif); font-weight: 600; font-size: 46px; line-height: 1.1;
  letter-spacing: -.01em; color: var(--stl-purple); margin: 0 0 20px;
}
.err-copy { font-size: 18px; line-height: 1.7; color: var(--stl-body); max-width: 56ch; margin: 0 auto 36px; }

.err-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Secondary "or try one of these" links under the buttons. */
.err-links { margin: 44px auto 0; padding-top: 32px; border-top: 1px solid var(--stl-border); max-width: 640px; }
.err-links-head { font-size: 15px; font-weight: 600; color: var(--stl-navy); margin: 0 0 16px; }
.err-links-list { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.err-link { font-size: 15px; font-weight: 500; color: var(--stl-body-soft); }

/* ---- Hover states ------------------------------------------------------
   No style-hover="" to convert here — this page has no comp. The buttons reuse
   .stl-btn--purple:hover and .stl-btn--outline:hover from custom.css §6; only the
   quick-links need a rule, and it is class-scoped, never a global a:hover.
   ---------------------------------------------------------------------- */
.err-link:hover { color: var(--stl-purple); }

/* ---- Responsive --------------------------------------------------------
   No inline-style attribute selectors to replace here (no comp), and no grids —
   the layout is a single centered column, so it needs only type and padding steps.
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  .err-wrap { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 600px) {
  .err-wrap { padding-top: 64px; padding-bottom: 72px; }
  .err-h1 { font-size: 32px !important; line-height: 1.12 !important; }
  .err-art { max-width: 280px; margin-bottom: 32px; }
}