/* CALYNEVO THEME SYSTEM v20260912.8
   Rebuilt from zero as the single colour/contrast authority.
   Layout remains in styles.css/redesign.css/business.css.
   This file is loaded last and owns every light/dark colour decision. */

/* ---------- 1. Semantic tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f7f4ee;
  --bg-soft: #efeae2;
  --surface: #fffdf9;
  --surface-2: #f3efe8;
  --surface-3: #e8e2d9;
  --text: #181b1a;
  --text-2: #3f4541;
  --muted: #5d635f;
  --border: #d5cfc5;
  --border-strong: #b9b2a7;
  --accent: #f05a35;
  --accent-2: #bd3e1c;
  --accent-soft: #fff0ea;
  --on-accent: #151817;
  --inverse-bg: #171b19;
  --inverse-surface: #202522;
  --inverse-text: #f5f1e9;
  --inverse-muted: #b9beb9;
  --inverse-border: #38403b;
  --control-bg: #1a1e1c;
  --control-text: #faf7f0;
  --focus: #f05a35;
  --success-bg: #eaf5ee;
  --success-text: #1e633e;
  --success-border: #78aa8d;
  --error-bg: #fff0ed;
  --error-text: #8a3025;
  --error-border: #c77d72;
  --logo-plate: #fffdf9;
  --logo-plate-border: #ded7cc;
  --shadow-1: 0 12px 34px rgba(29, 27, 23, .07);
  --shadow-2: 0 20px 55px rgba(29, 27, 23, .11);
  --overlay: rgba(23, 27, 25, .72);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141816;
  --bg-soft: #1a1f1c;
  --surface: #1d231f;
  --surface-2: #232a26;
  --surface-3: #2c342f;
  --text: #f1eee7;
  --text-2: #d5d7d2;
  --muted: #aeb4af;
  --border: #38413c;
  --border-strong: #56615a;
  --accent: #ff7857;
  --accent-2: #ff9a80;
  --accent-soft: #34231f;
  --on-accent: #151817;
  --inverse-bg: #0c100e;
  --inverse-surface: #121714;
  --inverse-text: #f6f2eb;
  --inverse-muted: #b8beb9;
  --inverse-border: #2a322d;
  --control-bg: #f0ede6;
  --control-text: #151917;
  --focus: #ff8667;
  --success-bg: #173024;
  --success-text: #bde5cc;
  --success-border: #397352;
  --error-bg: #34201d;
  --error-text: #ffd0c7;
  --error-border: #8f5148;
  --logo-plate: #f7f2e9;
  --logo-plate-border: #d3cabe;
  --shadow-1: 0 14px 36px rgba(0, 0, 0, .22);
  --shadow-2: 0 22px 64px rgba(0, 0, 0, .32);
  --overlay: rgba(5, 8, 6, .78);
}

/* Legacy variable bridge. No legacy component gets to invent theme colours. */
:root, html[data-theme="dark"] {
  --paper: var(--bg);
  --white: var(--surface);
  --ink: var(--text);
  --ink-2: var(--surface-3);
  --line: var(--border);
  --orange: var(--accent);
  --orange-dark: var(--accent-2);
  --soft: var(--surface-2);
  --soft-2: var(--bg-soft);
  --surface-elevated: var(--surface);
  --shadow-card: var(--shadow-1);
}

/* ---------- 2. Document and typography ---------- */
html, body { background: var(--bg) !important; color: var(--text) !important; }
body { color: var(--text) !important; }
main { background: var(--bg); color: var(--text); }
h1, h2, h3, h4, h5, h6, strong, b { color: inherit; }
p, .lead, .micro { color: var(--muted); }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 72%, transparent); outline-offset: 3px; }
.eyebrow, .role-label, .row-number, .service-index, .offer-index, .credential-kicker,
.capability-matrix article > span, .journey-date, .footer-kicker, .footer-heading { color: var(--accent-2) !important; }
.text-link { color: var(--text); }
.text-link:hover { color: var(--accent-2); }

/* ---------- 3. Header, navigation and controls ---------- */
.site-header {
  background: color-mix(in srgb, var(--bg) 94%, transparent) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.site-header.is-scrolled { box-shadow: 0 8px 26px color-mix(in srgb, var(--text) 8%, transparent) !important; }
.brand, .site-nav a:not(.nav-cta) { color: var(--text) !important; }
.site-nav a[aria-current="page"] { color: var(--accent-2) !important; }
.site-nav .nav-cta[aria-current="page"] { background: var(--control-bg) !important; border-color: var(--control-bg) !important; color: var(--control-text) !important; }
.site-nav .nav-cta, .button-primary {
  background: var(--control-bg) !important;
  border-color: var(--control-bg) !important;
  color: var(--control-text) !important;
}
.site-nav .nav-cta:hover, .button-primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.menu-toggle, .skip-link {
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
}
html.js .site-nav {
  background: var(--inverse-bg) !important;
  color: var(--inverse-text) !important;
}
html.js .site-nav a:not(.nav-cta) { color: var(--inverse-text) !important; }
html.js .site-nav a { border-color: var(--inverse-border) !important; }
html.js .site-nav .nav-cta {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.theme-toggle, .language-switch {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.theme-toggle:hover, .language-switch:hover { border-color: var(--accent) !important; }
.theme-thumb { background: var(--accent) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 20%, transparent) !important; }
.theme-icon-sun, .theme-icon-moon { color: var(--text-2) !important; }
.language-option { color: var(--text-2) !important; }
.language-option.is-active { background: var(--control-bg) !important; color: var(--control-text) !important; }

/* ---------- 4. Surface rules ---------- */
.section, .page-hero, .brand-hero, .legal-layout { background: var(--bg) !important; color: var(--text) !important; }
.section-white, .case-capability-section { background: var(--surface) !important; color: var(--text) !important; }
.section-head > p, .project-body p, .service-line p, .value p, .capability-matrix p,
.case-content p, .article-copy p, .legal-copy p, .legal-layout p { color: var(--muted) !important; }

/* Explicit inverse sections. Nothing inside can inherit dark text accidentally. */
.section-dark, .cta, .discipline-strip, .abstract-project, .case-gallery-section {
  background: var(--inverse-bg) !important;
  color: var(--inverse-text) !important;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark strong,
.cta h1, .cta h2, .cta h3, .cta h4, .cta strong,
.case-gallery-section h1, .case-gallery-section h2, .case-gallery-section h3, .case-gallery-section strong,
.discipline-strip, .abstract-project { color: var(--inverse-text) !important; }
.section-dark p, .cta p, .case-gallery-section p, .case-gallery-section .section-head > p { color: var(--inverse-muted) !important; }
.section-dark .eyebrow, .cta .eyebrow, .case-gallery-section .eyebrow { color: var(--accent) !important; }
.statement-quote { color: var(--inverse-text) !important; }
.statement-list, .statement-item { border-color: var(--inverse-border) !important; }

/* Legacy bands are normal theme surfaces, not forced black blocks. */
.studio-band, .founder-band, .service-proof, .contact-direct, .closing {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.studio-band h1, .studio-band h2, .studio-band h3,
.founder-band h1, .founder-band h2, .founder-band h3,
.service-proof h1, .service-proof h2, .service-proof h3,
.contact-direct h1, .contact-direct h2, .contact-direct h3,
.closing h1, .closing h2, .closing h3 { color: var(--text) !important; }
.studio-band p, .founder-band p, .service-proof p, .contact-direct p, .closing p { color: var(--muted) !important; }
.studio-band .text-link, .founder-band .text-link, .contact-direct a { color: var(--text) !important; }
.studio-monogram { color: var(--accent) !important; }
.closing h2 em { color: var(--accent-2) !important; }

/* ---------- 5. Cards, grids and project surfaces ---------- */
.proof-results, .collaborations { background: var(--bg-soft) !important; color: var(--text) !important; }
.proof, .value, .proof-result, .service, .service-line, .offer, .deliverable-card,
.capability-matrix article, .case-capability, .credential-card, .testimonial-business-card,
.journal-card, .contact-form, .notice, .project-body, .case-fact {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.proof p, .value p, .proof-result p, .service p, .offer p, .deliverable-card p,
.capability-matrix article p, .case-capability p, .testimonial-business-card p,
.journal-card p, .case-fact p { color: var(--muted) !important; }
.credential-card, .testimonial-business-card, .contact-form, .notice { box-shadow: var(--shadow-1); }
.testimonial-business-card blockquote, .testimonial-person strong, .testimonial-person h3, .credential-card > strong { color: var(--text) !important; }
.testimonial-person span { color: var(--muted) !important; }
.testimonial-tags span, .credential-tags span, .tag {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
.proof-result:hover {
  background: var(--inverse-bg) !important;
  color: var(--inverse-text) !important;
}
.proof-result:hover h3, .proof-result:hover strong, .proof-result:hover p { color: inherit !important; }
.project-media, .service-proof-media { border-color: var(--border) !important; box-shadow: var(--shadow-1); }
.project-index { background: var(--inverse-bg) !important; color: var(--inverse-text) !important; }
.project-card:hover .project-index { background: var(--accent) !important; color: var(--on-accent) !important; }
.project-card:hover .tag { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.case-shot a { background: var(--surface-2) !important; }
.case-shot figcaption { color: var(--inverse-muted) !important; }
.case-shot figcaption span { color: var(--accent) !important; }

/* Collaboration logos always use a light neutral plate, including dark mode. */
.client-logo-grid { background: var(--border) !important; border-color: var(--border) !important; }
.client-logo-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.client-logo-card:hover { background: var(--surface-2) !important; }
.client-logo-card img {
  box-sizing: content-box;
  width: auto;
  max-width: min(190px, 72%);
  max-height: 86px;
  padding: 13px 17px;
  border: 1px solid var(--logo-plate-border) !important;
  border-radius: 8px;
  background: var(--logo-plate) !important;
  filter: none !important;
  opacity: 1 !important;
}
.client-logo-card span { color: var(--muted) !important; }

/* ---------- 6. Forms, feedback and filters ---------- */
.field label, .service-checks legend { color: var(--text) !important; }
.field input, .field textarea, .field select, .service-checks label {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent) !important; }
.field input:hover, .field textarea:hover, .field select:hover, .service-checks label:hover { border-color: var(--border-strong) !important; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent) !important;
}
.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid {
  background: var(--error-bg) !important;
  color: var(--error-text) !important;
  border-color: var(--error-border) !important;
}
.form-feedback, .form-status.error, .form-feedback.is-error {
  background: var(--error-bg) !important;
  color: var(--error-text) !important;
  border-color: var(--error-border) !important;
}
.form-status.success, .form-feedback.is-success {
  background: var(--success-bg) !important;
  color: var(--success-text) !important;
  border-color: var(--success-border) !important;
}
.form-progress li { color: var(--muted) !important; }
.form-progress li span { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.form-progress li.active span, .form-progress li.current span { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.service-checks label:has(input:checked) { background: var(--accent-soft) !important; border-color: var(--accent) !important; }
.project-filters button { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.project-filters button:hover { border-color: var(--accent) !important; color: var(--accent-2) !important; }
.project-filters button[aria-pressed="true"] { background: var(--control-bg) !important; color: var(--control-text) !important; border-color: var(--control-bg) !important; }

/* ---------- 7. Buttons ---------- */
.button { color: var(--text); border-color: var(--text); box-shadow: none; }
.button-secondary { background: transparent !important; color: var(--text) !important; border-color: var(--text) !important; }
.button-secondary:hover { background: var(--control-bg) !important; color: var(--control-text) !important; border-color: var(--control-bg) !important; }
.button-orange { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.button-orange:hover { background: transparent !important; color: var(--text) !important; border-color: var(--accent) !important; }
.button-light, .contact-direct .button-light { background: var(--control-bg) !important; color: var(--control-text) !important; border-color: var(--control-bg) !important; }
.button-light:hover, .contact-direct .button-light:hover { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }

/* ---------- 8. Timeline, legal and editorial ---------- */
.journey-list::before { background: var(--border) !important; }
.journey-item { border-color: var(--border) !important; }
.journey-item::before { background: var(--bg) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 7px var(--bg) !important; }
.journey-date { color: var(--accent-2) !important; }
.journey-date span, .journey-item p { color: var(--muted) !important; }
.legal-nav a { color: var(--muted) !important; border-color: var(--border) !important; }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--text) !important; }
.legal-copy, .article-copy { color: var(--text) !important; }
.legal-copy a, .article-copy a { color: var(--text) !important; text-decoration-color: var(--accent); }

/* ---------- 9. Back to top ---------- */
.back-to-top {
  width: 48px !important;
  height: 48px !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 2px solid var(--surface) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent) !important;
}
.back-to-top:hover { background: var(--accent-2) !important; color: var(--on-accent) !important; transform: translateY(-3px); }

/* ---------- 10. Footer is intentionally inverse in both modes ---------- */
.site-footer {
  padding: 0 !important;
  background: var(--inverse-bg) !important;
  color: var(--inverse-text) !important;
  border-top: 1px solid var(--inverse-border) !important;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer strong, .site-footer .footer-brand, .site-footer .footer-prompt { color: var(--inverse-text) !important; }
.site-footer p, .site-footer span { color: var(--inverse-muted) !important; }
.site-footer a { color: var(--inverse-text) !important; }
.site-footer .footer-heading, .site-footer .footer-kicker { color: var(--accent) !important; }
.site-footer .footer-topline, .site-footer .footer-bottom { border-color: var(--inverse-border) !important; }
.site-footer .footer-button-primary {
  background: var(--inverse-text) !important;
  color: var(--inverse-bg) !important;
  border-color: var(--inverse-text) !important;
}
.site-footer .footer-button-primary:hover { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.footer-text-link, .footer-email { color: var(--inverse-text) !important; }
.footer-column a:hover { color: var(--accent) !important; }
.footer-bottom { color: var(--inverse-muted) !important; }

/* ---------- 11. Lightbox is always inverse ---------- */
.case-lightbox { color: #fff !important; }
.case-lightbox p { color: #fff !important; }
.case-lightbox img { background: #111 !important; }
.case-lightbox-close { background: rgba(15,15,15,.78) !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
.case-lightbox-close:hover { background: var(--accent) !important; color: #111 !important; }

/* ---------- 12. Responsive ---------- */
@media (max-width: 959px) {
  .site-header { background: var(--bg) !important; }
}
@media (max-width: 700px) {
  .client-logo-card { min-height: 150px !important; padding: 24px !important; }
  .client-logo-card img { max-width: min(175px,78%); max-height: 74px; padding: 10px 14px; }
  .back-to-top { width: 44px !important; height: 44px !important; right: 14px !important; bottom: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top, .client-logo-card, .client-logo-card img { transition: none !important; }
}

/* Case-study gallery lives on an inverse section. The figure shell must not
   re-introduce the page background underneath inverse captions. */
.case-gallery-section .case-shot {
  background: transparent !important;
  border-color: var(--inverse-border) !important;
}
.case-gallery-section .case-shot figcaption { color: var(--inverse-muted) !important; }
.case-gallery-section .case-shot figcaption span { color: var(--accent) !important; }

/* ===== CALYNEVO v5 hover/footer contract =====
   Final-state rules loaded last. Hover never inverts text blindly; every state
   uses semantic theme tokens so light and dark modes remain readable. */

/* Hover-safe cards */
.proof-result,
.service,
.proof,
.value,
.case-fact,
.capability-matrix article,
.deliverable-card,
.offer,
.testimonial-business-card,
.client-logo-card {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.proof-result:hover {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-2px) !important;
}
.proof-result:hover strong { color: var(--text) !important; }
.proof-result:hover span,
.proof-result:hover p { color: var(--muted) !important; }
.service:hover,
.proof:hover,
.value:hover,
.case-fact:hover,
.capability-matrix article:hover,
.deliverable-card:hover,
.offer:hover,
.testimonial-business-card:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
.service:hover h1,.service:hover h2,.service:hover h3,.service:hover h4,
.proof:hover h1,.proof:hover h2,.proof:hover h3,.proof:hover h4,
.value:hover h1,.value:hover h2,.value:hover h3,.value:hover h4,
.case-fact:hover strong,.capability-matrix article:hover h3,
.deliverable-card:hover h3,.offer:hover h3,.testimonial-business-card:hover strong {
  color: var(--text) !important;
}
.service:hover p,.proof:hover p,.value:hover p,.case-fact:hover p,
.capability-matrix article:hover p,.deliverable-card:hover p,.offer:hover p,
.testimonial-business-card:hover p { color: var(--muted) !important; }

/* Keep legacy orange edge animation, but never use a full overlay to create contrast. */
.service::before,.proof::before,.value::before { background: var(--accent) !important; }

/* Links, filters and controls */
.text-link:hover { color: var(--accent-2) !important; }
.service-line:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.service-line:hover h3,.service-line:hover strong { color: var(--text) !important; }
.service-line:hover p { color: var(--muted) !important; }
.service-line:hover .row-arrow { color: var(--accent) !important; }
.service-jump a:hover,.service-jump a[aria-current="true"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
.project-filters button:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--accent) !important; }
.client-logo-card:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.client-logo-card:hover span { color: var(--muted) !important; }

/* Buttons: explicit text/background pairs for every state */
.button-primary:hover,.site-nav .nav-cta:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.button-secondary:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
.button-light:hover,.contact-direct .button-light:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.button-orange:hover {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* Compact, separate pre-footer CTA */
.prefooter-cta {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 42px 0 !important;
}
.prefooter-grid {
  display: grid;
  grid-template-columns: minmax(260px,.85fr) minmax(360px,1.15fr);
  gap: clamp(36px,6vw,90px);
  align-items: center;
}
.prefooter-cta .eyebrow { margin: 0 0 10px; color: var(--accent-2) !important; }
.prefooter-cta h2 {
  margin: 0;
  max-width: 15ch;
  color: var(--text) !important;
  font-size: clamp(1.85rem,3.2vw,3.15rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}
.prefooter-copy { display: grid; gap: 18px; }
.prefooter-copy > p { margin: 0; max-width: 62ch; color: var(--muted) !important; }
.prefooter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.prefooter-actions .button { min-height: 48px; padding: 12px 18px; }

/* Compact professional footer */
.site-footer { padding: 0 !important; background: var(--inverse-bg) !important; color: var(--inverse-text) !important; }
.footer-shell-v5 { padding-top: 0; }
.footer-main-v5 {
  display: grid;
  grid-template-columns: minmax(280px,1.4fr) repeat(3,minmax(130px,.62fr));
  gap: clamp(28px,4vw,54px);
  padding: 38px 0 32px;
  align-items: start;
}
.footer-brand-v5 { max-width: 410px; }
.footer-brand-v5 .footer-brand-v5,
.footer-brand-v5.brand { color: var(--inverse-text) !important; }
a.footer-brand-v5 {
  display: inline-block;
  margin: 0 0 14px;
  font-size: clamp(2rem,3.1vw,3rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: 1;
}
.footer-brand-v5 > p { margin: 0 0 16px; max-width: 42ch; color: var(--inverse-muted) !important; font-size: .91rem; line-height: 1.55; }
.footer-contact-v5 { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: .82rem; line-height: 1.45; }
.footer-contact-v5 a,.footer-contact-v5 span { color: var(--inverse-muted) !important; }
.footer-contact-v5 a:hover { color: var(--accent) !important; }
.footer-column-v5 { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-column-v5 .footer-heading { margin: 0 0 5px; color: var(--accent) !important; font-size: .69rem !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 850; }
.footer-column-v5 a { color: var(--inverse-text) !important; font-size: .82rem; line-height: 1.35; }
.footer-column-v5 a:hover { color: var(--accent) !important; }
.footer-bottom-v5 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0 21px;
  border-top: 1px solid var(--inverse-border);
  color: var(--inverse-muted) !important;
  font-size: .72rem;
}
.footer-bottom-v5 span { color: inherit !important; }

/* Back-to-top remains visible over both the pre-footer and footer. */
.back-to-top {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 2px solid var(--surface) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}
.back-to-top:hover,.back-to-top:focus-visible { background: var(--accent-2) !important; color: var(--on-accent) !important; }

@media (max-width: 959px) {
  .prefooter-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-main-v5 { grid-template-columns: 1.25fr 1fr; gap: 30px 42px; }
  .footer-brand-v5 { grid-column: 1 / -1; max-width: 620px; }
}
@media (max-width: 700px) {
  .prefooter-cta { padding: 34px 0 !important; }
  .prefooter-grid { grid-template-columns: 1fr; gap: 20px; }
  .prefooter-cta h2 { font-size: clamp(1.8rem,9vw,2.6rem); }
  .prefooter-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .prefooter-actions .button { width: 100%; text-align: center; }
  .footer-main-v5 { grid-template-columns: 1fr 1fr; gap: 28px 22px; padding: 32px 0 26px; }
  .footer-brand-v5 { grid-column: 1 / -1; }
  .footer-contact-v5 { display: grid; gap: 6px; }
  .footer-bottom-v5 { flex-direction: column; gap: 6px; padding: 15px 0 19px; }
}
@media (max-width: 420px) {
  .footer-main-v5 { grid-template-columns: 1fr; }
  .footer-brand-v5 { grid-column: auto; }
}
@media (hover:none) {
  .proof-result:hover,.service:hover,.proof:hover,.value:hover,.case-fact:hover,
  .capability-matrix article:hover,.deliverable-card:hover,.offer:hover,.testimonial-business-card:hover {
    transform: none !important;
  }
}



/* ===== CALYNEVO v6 natural text flow =====
   Prevents words/compound terms from breaking mid-word.
   Paragraphs use browser "pretty" wrapping; headings remain balanced. */
:where(h1,h2,h3,h4,p,li,dt,dd,figcaption) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
:where(p,li,dt,dd,figcaption) { text-wrap: pretty; }
:where(h1,h2,h3,h4) { text-wrap: balance; }
/* Long technical strings keep their existing dedicated wrapping rules. */

/* CALYNEVO SHARED FOOTER SOCIAL CONTROLS · 2026-09-18
   Used by resource/legal templates that do not load the consolidated site.css. */
.footer-social-v5{
  display:flex;
  flex:0 0 100%;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.footer-social-v5 .social-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  padding:0;
  border:1px solid var(--inverse-border);
  border-radius:50%;
  color:var(--inverse-muted) !important;
  line-height:1;
  overflow:hidden;
}
.footer-social-v5 .social-icon-link svg{
  display:block;
  width:14px !important;
  height:14px !important;
  max-width:14px;
  max-height:14px;
  flex:0 0 14px;
  fill:currentColor;
  color:inherit;
}
.footer-social-v5 .social-icon-link:hover,
.footer-social-v5 .social-icon-link:focus-visible{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--on-accent) !important;
  outline:none;
}
@media(max-width:700px){
  .footer-contact-v5 .footer-social-v5{display:flex;width:100%;gap:8px;margin-top:6px}
  .footer-social-v5 .social-icon-link{width:36px;height:36px;flex-basis:36px}
  .footer-social-v5 .social-icon-link svg{width:15px !important;height:15px !important;max-width:15px;max-height:15px}
}

/* W3C validation badge in the compact footer strip. */
.footer-validation-v5 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.footer-validation-v5 img {
  display: block;
  width: 88px;
  height: 31px;
  border: 0;
}
@media (max-width: 700px) {
  .footer-validation-v5 { align-self: flex-start; margin-top: 4px; }
}

/* CALYNEVO wordmark logo — shared Resources/Legal header/footer */
.brand-logo-link{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}
.site-header .brand-logo{
  display:block;
  width:150px;
  height:auto;
  max-width:none;
}
.site-header .brand-logo--dark{display:none;}
html[data-theme="dark"] .site-header .brand-logo--light{display:none;}
html[data-theme="dark"] .site-header .brand-logo--dark{display:block;}
.site-footer .brand-logo-link--footer{
  display:inline-flex;
  margin:0 0 14px;
  line-height:0;
}
.site-footer .footer-logo{
  display:block;
  width:230px;
  height:auto;
  max-width:100%;
}
@media(max-width:700px){
  .site-header .brand-logo{width:128px;}
  .site-footer .footer-logo{width:210px;}
}
@media(max-width:359px){
  .site-header .brand-logo{width:118px;}
}