/* GIH: midnight navy foundation, amethyst accent, cool porcelain surfaces.
   Proposed web palette: navy #13213E, purple #7151C8, porcelain #F8F9FD. */
:root {
  --brand-navy: oklch(0.2522 0.0584 263.36);
  --brand-purple: oklch(0.5313 0.1769 291.62);
  --brand-purple-hover: oklch(0.4472 0.1700 291.07);
  --brand-lavender: oklch(0.7805 0.1041 295.85);
  --accent: var(--brand-purple);
  --accent-hover: var(--brand-purple-hover);
  --red: var(--accent);
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-soft: oklch(0.9579 0.0099 267.36);
  --surface-tinted: #e9eaf5;
  --ink: var(--brand-navy);
  --muted: oklch(0.5104 0.0352 266.88);
  --line: #13213e24;
  --focus: var(--brand-purple);
  --on-dark: #f6f7fc;
  --on-dark-muted: #c0c9dd;
  --on-dark-faint: #b0bdd8;
  --action-bg: var(--brand-purple);
  --action-hover: var(--brand-purple-hover);
  --photo-surface: #f4f5fa;
  color-scheme: only light;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--brand-purple); color: white; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline-color: var(--focus);
}
input:focus, textarea:focus, select:focus {
  outline-color: var(--focus);
}
.concept-bar { background: var(--surface-soft); color: var(--muted); }
.preview-tools { display: flex; align-items: center; gap: 24px; }
/* Hide legacy theme controls before JavaScript removes them. */
[data-theme-toggle] { display: none; }
header {
  background: #ffffffeb;
  transition: background-color .2s ease, box-shadow .2s ease;
}
@supports ((backdrop-filter: blur(22px)) or (-webkit-backdrop-filter: blur(22px))) {
  header {
    background: rgb(255 255 255 / 68%);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }
  header.is-scrolled { background: rgb(255 255 255 / 80%); }
}
header.is-scrolled { box-shadow: 0 4px 20px #13213e0d; }
@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
}
.brand { color: var(--ink); }
.brand > span { color: var(--muted); }
.button { background: var(--action-bg); color: white; }
.button:hover { background: var(--action-hover); }
.button.light { background: #f0ecfc; color: var(--brand-navy); }
.button.light:hover { background: #ddd3f9; }
.hero { background: var(--brand-navy); color: var(--on-dark); }
.hero-shade {
  background: linear-gradient(90deg, #13213efc 0%, #13213eed 24%, #13213e88 49%, #13213e21 78%, #13213e12 100%);
}
.hero h1 span { color: #c9b8f2; }
.hero p { color: #d2d9ea; }
.hero .eyebrow, .hero-next { color: var(--on-dark-muted); }
.hero .red-dot { background: var(--brand-lavender); }
.hero-source { color: #ddd5f4; }
.hero-bottom { color: var(--on-dark-faint); border-color: #d3ddf333; }
.image-note { color: #d1d9eb; background: #13213eb3; }
.portfolio, .capabilities { background: var(--surface-soft); }
.company-photo { background: var(--surface-soft); }
.company-photo figcaption { background: var(--surface-soft); color: var(--muted); }
.product-image { background: var(--photo-surface); }
.product-image img { mix-blend-mode: multiply; }
.portfolio-filters button { color: var(--ink); border-color: var(--line); }
.portfolio-filters button[aria-pressed='true'] {
  background: var(--action-bg);
  color: white;
  border-color: var(--action-bg);
}
.service-tags span { color: var(--muted); background: var(--surface-soft); }
.review-note, .example, .example-label { color: var(--muted); }
.inline-source { text-decoration-color: var(--line); }
.nav-dropdown { background: var(--surface); box-shadow: 0 16px 36px #13213e1f; }
.engineering-milestones li { border-left-color: var(--line); }
.engineering-milestones li:last-child { border-left-color: transparent; }
.engineering-milestones .milestone-planned { border-top-color: var(--line); }
.approach, .strategy-banner {
  background: var(--brand-navy);
  color: var(--on-dark);
}
.approach { border-top: 1px solid #8d71ca4a; }
.strategy-banner { border-left: 3px solid var(--brand-purple); }
.strategy-year { color: #c9b8f2; }
.strategy-banner .eyebrow, .approach .eyebrow { color: var(--brand-lavender); }
.strategy-banner p, .approach-title p, .steps p { color: var(--on-dark-muted); }
.steps article { border-color: #d3ddf32b; }
.steps article > span { color: var(--brand-lavender); }
.approach .inline-source { color: #d9cef5; }
.approach .button:focus-visible { outline-color: var(--brand-lavender); }
footer, .contact { border-color: var(--line); }
dialog { background: var(--paper); color: var(--ink); }
dialog::backdrop { background: #09142bcc; }
.close:hover { background: var(--surface-tinted); }
input, textarea, select { background: var(--surface); color: var(--ink); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.result-label { color: var(--accent); }
.skip { background: var(--surface); color: var(--ink); }
@media(max-width:1100px) {
  .hero-shade { background: linear-gradient(90deg, #13213efc 0%, #13213ede 36%, #13213e40 70%, #13213e18 100%); }
}
@media(max-width:760px) {
  .concept-bar { align-items: center; }
  .preview-tools { gap: 14px; }
  .preview-tools > a { max-width: 125px; }
  .hero-image {
    mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 88%, transparent 100%);
  }
  .hero-shade {
    background: linear-gradient(180deg, #13213e 0%, #13213e 34%, #13213ea6 53%, #13213e0d 73%, #13213e1a 100%);
  }
  .nav-dropdown { background: transparent; box-shadow: none; }
}
.brand-logo {
  display: block;
  height: 54px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 760px) {
  .brand-logo {
    height: 32px;
  }
}

.footer-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .footer-logo {
    height: 24px;
    max-width: 105px;
  }
}