/* Colour compatibility for the existing Astro pages. Layout and behaviour stay in global.css. */
body[data-cinematic-shell] {
  --etopia-red: #c10f1a;
  --etopia-red-dark: #ff8173;
  --etopia-red-soft: #301317;
  --cloud-blue: #c3ccd7;
  --cloud-blue-soft: #20252e;
  --cloud-blue-wash: #15181f;
  --ink: #f4f4f6;
  --ink-950: #f4f4f6;
  --ink-800: #dadce1;
  --ink-650: #bdc0c8;
  --ink-500: #a0a6b0;
  --surface: #08090b;
  --surface-soft: #111318;
  --surface-muted: #1a1d24;
  --line: #363a43;
  --line-strong: #68707e;
  --focus: #ff8b7b;
  --success: #88dcb3;
  --error: #ffa09b;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 14px 30px rgba(0, 0, 0, 0.22);
  background: var(--surface);
  color: var(--ink-800);
  color-scheme: dark;
}

body[data-cinematic-shell] :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

body[data-cinematic-shell]::selection,
body[data-cinematic-shell] ::selection {
  background: var(--etopia-red);
  color: #fff;
}

body[data-cinematic-shell] .skip-link {
  background: #22262f;
  color: var(--ink-950);
}

body[data-cinematic-shell] .site-header {
  background: rgba(8, 9, 11, 0.96);
  border-bottom-color: var(--line);
}

body[data-cinematic-shell] .site-header.has-scrolled,
body[data-cinematic-shell] .site-header.is-open {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

body[data-cinematic-shell] .language-switcher,
body[data-cinematic-shell] .mobile-menu-button,
body[data-cinematic-shell] .mobile-nav-panel {
  background: var(--surface-soft);
}

body[data-cinematic-shell] .language-switcher button:hover {
  color: var(--ink-950);
}

body[data-cinematic-shell] .language-switcher button[aria-pressed="true"] {
  background: #e6e7eb;
  color: #101114;
}

body[data-cinematic-shell] .button--primary {
  background: var(--etopia-red);
  border-color: var(--etopia-red);
  color: #fff;
}

body[data-cinematic-shell] .button--primary:hover {
  background: #a50c16;
  border-color: #a50c16;
  color: #fff;
}

body[data-cinematic-shell] .button--secondary {
  background: var(--surface-muted);
  border-color: var(--line-strong);
  color: var(--ink-950);
}

body[data-cinematic-shell] .button--secondary:hover {
  background: #252932;
  border-color: var(--focus);
  color: var(--ink-950);
}

body[data-cinematic-shell] .button:disabled {
  background: #30343d;
  border-color: var(--line-strong);
  color: #c6cad2;
  cursor: wait;
}

body[data-cinematic-shell] .section-band {
  background:
    linear-gradient(90deg, rgba(220, 224, 232, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(220, 224, 232, 0.035) 1px, transparent 1px),
    var(--surface-soft);
  background-size: 44px 44px;
}

body[data-cinematic-shell] .page-hero {
  background:
    linear-gradient(90deg, rgba(220, 224, 232, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(193, 15, 26, 0.08) 1px, transparent 1px),
    #0d0f13;
  background-size: 52px 52px;
}

body[data-cinematic-shell] .hero,
body[data-cinematic-shell] .capability-showcase {
  background:
    radial-gradient(circle at 12% 18%, rgba(193, 15, 26, 0.1), transparent 32%),
    linear-gradient(180deg, #111318, #08090b);
}

body[data-cinematic-shell] .solution-pathways {
  background: var(--surface);
}

body[data-cinematic-shell] .hero-illustration__frame {
  border-color: var(--line-strong);
  background: linear-gradient(145deg, #1a1d24, #111318);
  box-shadow: var(--shadow-soft);
}

body[data-cinematic-shell] .hero-illustration__frame::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 34%);
}

body[data-cinematic-shell] .audience-strip,
body[data-cinematic-shell] .proof-strip,
body[data-cinematic-shell] .info-card,
body[data-cinematic-shell] .pathway-card,
body[data-cinematic-shell] .capability-card,
body[data-cinematic-shell] .quote-form {
  background: var(--surface-soft);
}

body[data-cinematic-shell] .pathway-card,
body[data-cinematic-shell] .capability-card {
  box-shadow: var(--shadow-card);
}

body[data-cinematic-shell] .pathway-card:hover,
body[data-cinematic-shell] .pathway-card:focus-within,
body[data-cinematic-shell] .capability-card:hover,
body[data-cinematic-shell] .capability-card:focus-within {
  box-shadow: var(--shadow-soft);
}

body[data-cinematic-shell] .process-steps__node {
  background: var(--surface-soft);
  border-color: var(--etopia-red-dark);
  box-shadow: 0 0 0 10px var(--surface);
}

body[data-cinematic-shell] .text-link span {
  color: var(--etopia-red-dark);
}

body[data-cinematic-shell] .system-capability {
  background: #101319;
}

body[data-cinematic-shell] .system-capability__link {
  color: var(--ink-950);
}

body[data-cinematic-shell] .system-capability__link:focus-visible {
  outline-color: var(--focus);
  outline-offset: -3px;
}

body[data-cinematic-shell] .system-capability__action {
  background: #15181e;
  border-top-color: #424853;
  color: var(--ink-800);
}

body[data-cinematic-shell] .system-capability__link:hover .system-capability__action,
body[data-cinematic-shell] .system-capability__link:focus-visible .system-capability__action {
  background: #242933;
  color: var(--ink-950);
}

body[data-cinematic-shell] .form-field input,
body[data-cinematic-shell] .form-field select,
body[data-cinematic-shell] .form-field textarea {
  background: #0b0d11;
  border-color: var(--line-strong);
  color: var(--ink-950);
  caret-color: var(--ink-950);
  accent-color: var(--etopia-red);
}

body[data-cinematic-shell] .form-field input::placeholder,
body[data-cinematic-shell] .form-field textarea::placeholder {
  color: var(--ink-500);
  opacity: 1;
}

body[data-cinematic-shell] .form-field select option {
  background: #111318;
  color: var(--ink-950);
}

body[data-cinematic-shell] .form-field input:autofill,
body[data-cinematic-shell] .form-field input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #0b0d11 inset;
  -webkit-text-fill-color: var(--ink-950);
  caret-color: var(--ink-950);
}

body[data-cinematic-shell] .form-field input::file-selector-button {
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  color: var(--ink-950);
}

body[data-cinematic-shell] .form-field input:disabled,
body[data-cinematic-shell] .form-field select:disabled,
body[data-cinematic-shell] .form-field textarea:disabled {
  background: #1a1d24;
  color: var(--ink-500);
}

body[data-cinematic-shell] .form-field input[aria-invalid="true"],
body[data-cinematic-shell] .form-field select[aria-invalid="true"],
body[data-cinematic-shell] .form-field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

body[data-cinematic-shell] .legal-copy a,
body[data-cinematic-shell] .contact-aside a:not(.button),
body[data-cinematic-shell] .form-note a {
  color: var(--etopia-red-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-cinematic-shell] .legal-copy a:hover,
body[data-cinematic-shell] .contact-aside a:not(.button):hover,
body[data-cinematic-shell] .form-note a:hover {
  color: var(--ink-950);
}

body[data-cinematic-shell] .site-footer {
  background: #060709;
  color: var(--ink-950);
  border-top: 1px solid var(--line);
}

body[data-cinematic-shell] .site-footer p,
body[data-cinematic-shell] .site-footer a,
body[data-cinematic-shell] .site-footer dt,
body[data-cinematic-shell] .site-footer dd {
  color: var(--ink-650);
}

body[data-cinematic-shell] .site-footer a:hover {
  color: var(--ink-950);
}

body[data-cinematic-shell] .site-footer__bottom {
  border-top-color: var(--line);
}