/* CALYNEVO 0.8.17 — Section roles: one colour system, two clearly separate modes.
   Roles: base · alt · raised (cards) · showcase (project galleries) · accent (CTA) · footer.
   Loaded last; only colours change, never layout. */
html:root:not([data-theme="dark"]) {
  --bg: #F6F3ED; --bg-soft: #EEE8DE; --surface: #FFFDF9; --surface-2: #F1ECE3; --surface-3: #E6DFD3;
  --border: #E2DACD; --border-strong: #C9BFB0;
  --header-bg: rgba(246, 243, 237, .88);
  --role-base: #F6F3ED; --role-alt: #EEE8DE; --role-raised: #FFFDF9; --role-showcase: #E9E2D6;
  --role-footer: #EEE8DE; --role-line: #E2DACD;
  --role-card-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 18px 40px -26px rgba(60, 40, 20, .28);
  --role-media-frame: 0 1px 2px rgba(60, 40, 20, .05), 0 26px 60px -30px rgba(60, 40, 20, .38);
  --role-cta-bg: #FF5A1F; --role-cta-text: #111;
}
html[data-theme="dark"]:root {
  --bg: #0F0E0D; --bg-soft: #161513; --surface: #1F1D1A; --surface-2: #1A1917; --surface-3: #2A2723;
  --border: #2F2B27; --border-strong: #4A443D;
  --header-bg: rgba(15, 14, 13, .86);
  --role-base: #0F0E0D; --role-alt: #161513; --role-raised: #1F1D1A; --role-showcase: #1A1917;
  --role-footer: #0A0909; --role-line: #2F2B27;
  --role-card-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 22px 44px -26px rgba(0, 0, 0, .85);
  --role-media-frame: 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 70px -30px rgba(0, 0, 0, .9);
  --role-cta-bg: #E8541F; --role-cta-text: #111;
}

/* ---------- base ---------- */
html:is(.js,:not(.js)) body { background: var(--role-base); }

/* ---------- alt: rhythm bands ---------- */
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body :is(.section-white, .proof-results, .related-service-links, .case-clean-story, .section-dark, .studio-band) {
  background: var(--role-alt) !important;
  border-top: 1px solid var(--role-line); border-bottom: 1px solid var(--role-line);
}
/* Bands that were "dark in both modes": they now follow the active mode. */
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.section-dark, .studio-band) {
  --bg: #EEE8DE; --bg-soft: #EEE8DE; --surface: #FFFDF9; --surface-2: #F1ECE3; --surface-3: #E6DFD3;
  --text: #151412; --text-2: #3A3632; --text-secondary: #3A3632; --muted: #5B564E;
  --border: #E2DACD; --border-strong: #C9BFB0; --accent-2: #B93A0B;
  --inverse-bg: #EEE8DE; --inverse-surface: #FFFDF9; --inverse-text: #151412; --inverse-muted: #5B564E; --inverse-border: #E2DACD;
  background-image: none !important; color: var(--text) !important;
}
html[data-theme="dark"]:is(.js,:not(.js)) body :is(.section-dark, .studio-band) {
  --bg: #161513; --surface: #1F1D1A; --border: #2F2B27;
}
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body :is(.section-dark, .studio-band) :is(h1, h2, h3, h4, strong) { color: var(--text) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body :is(.section-dark, .studio-band) p:not(.eyebrow) { color: var(--muted) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body :is(.section-dark, .studio-band) .eyebrow { color: var(--accent-2) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .studio-band .simple-card {
  background: var(--role-raised) !important; border-color: var(--role-line) !important; box-shadow: var(--role-card-shadow);
}

/* ---------- showcase: project galleries ---------- */
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .case-gallery-clean {
  --inverse-text: var(--text); --inverse-muted: var(--muted);
  background: var(--role-showcase) !important; color: var(--text) !important;
  border-top: 1px solid var(--role-line); border-bottom: 1px solid var(--role-line);
}
html[data-theme="dark"] body .case-gallery-clean {
  background: radial-gradient(1200px 600px at 85% 0%, rgba(255, 106, 46, .07), transparent 60%), var(--role-showcase) !important;
}
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .case-gallery-clean :is(h2, h3) { color: var(--text) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .case-gallery-clean .section-head p,
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .case-gallery-clean .cs-chapter-lead { color: var(--muted) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .case-gallery-clean .eyebrow { color: var(--accent-2) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .case-gallery-clean .case-gallery-label { border-top-color: var(--role-line) !important; }
.cs-open { box-shadow: var(--role-media-frame) !important; }

/* ---------- raised: cards and media frames ---------- */
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body :is(.portfolio-card-clean, .project-card, .simple-card, .process-step, .proof-result, .cal-testimonial, .case-story-grid-clean > section, .case-proof-strip > div) {
  background: var(--role-raised) !important; border-color: var(--role-line) !important; box-shadow: var(--role-card-shadow) !important;
}
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body :is(.portfolio-card-media, .project-media, .case-clean-visual, .service-proof-media) {
  background: var(--role-alt) !important; border-color: var(--role-line) !important;
}
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .v8-family-media img { box-shadow: var(--role-media-frame); border-color: var(--role-line) !important; }

/* ---------- accent: the orange call to action, in both modes ---------- */
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .prefooter-cta { background: var(--role-cta-bg) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .prefooter-cta :is(h2, p, .eyebrow) { color: var(--role-cta-text) !important; }
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .prefooter-cta :is(.button, a.button) { background: #111 !important; color: #fff !important; border-color: #111 !important; }

/* ---------- footer ---------- */
html:is(.js,:not(.js)):is([data-theme],:not([data-theme])) body .site-footer { background: var(--role-footer) !important; border-top: 1px solid var(--role-line); }

/* Help boxes in guides and glossary: were black in light mode, now follow the mode. */
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) {
  --inverse-bg: #EEE8DE; --inverse-surface: #FFFDF9; --inverse-text: #151412; --inverse-muted: #5B564E; --inverse-border: #E2DACD;
  background: var(--role-alt) !important; color: var(--text) !important; border: 1px solid var(--role-line) !important;
}
html[data-theme="dark"]:is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) {
  background: var(--role-raised) !important; border: 1px solid var(--role-line) !important;
}
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) :is(h2, h3, strong) { color: var(--text) !important; }
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) p:not(.eyebrow) { color: var(--muted) !important; }
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) .eyebrow { color: var(--accent-2) !important; }
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) .button-secondary { color: var(--text) !important; border-color: var(--text) !important; background: transparent !important; }
html:root:not([data-theme="dark"]):is(.js,:not(.js)) body :is(.resource-help, .resource-mobile-note, .glossary-help) .button-secondary:is(:hover, :focus-visible) { background: var(--text) !important; color: var(--bg) !important; }