/* OptiWork midnight identity — shared by every public page. */
:root {
  color-scheme: dark;
  --navy: #101f45;
  --surface: #162950;
  --raised: #1c335e;
  --blue: #ffffff;
  --blue-dark: #dce7ff;
  --ink: #f7f9ff;
  --muted: #b9c8e3;
  --line: #ffffff24;
  --pale: #203861;
}
body, .hero, .approach, .faq-section, .announcement { background: var(--navy); color: var(--ink); }
::selection { background: #c5d7ff; color: #101f45; }
.header, .header.scrolled { background: #101f45f2; border-color: var(--line); box-shadow: 0 8px 32px #060f2526; }
.hero { border-color: var(--line); }
.hero-aura { background: radial-gradient(ellipse at 50% 110%,#315ab266,transparent 65%),radial-gradient(ellipse at 100% 35%,#284cad30,transparent 55%); }
.orbit-line { stroke: #7699e0; opacity: .28; }
.orbit-dot { fill: #b6ccff; filter: drop-shadow(0 0 6px #a7c4ff80); }
.hero h1 em { color: #b9cfff; }
.hero-label, .eyebrow { background: #ffffff06; color: #d3dfff; border-color: #ffffff2a; box-shadow: none; }
.hero-description, .hero-assurances, .hero-scroll, .hero-call-note, .tool-brand { color: var(--muted); }
.hero-assurances>span+span { border-color: var(--line); }
.nav-logo, .footer-logo, .brand-mark, .connection-hub img { filter: brightness(0) invert(1); }
.button, .nav-cta, .project-invite .button, .skip-link { background: #fff; color: #101f45; border-color: #fff; }
.button:hover, .nav-cta:hover, .project-invite .button:hover { background: #dce7ff; color: #101f45; box-shadow: 0 10px 28px #03091e30; }
.button-outline { background: transparent; color: #fff; border-color: #ffffff50; }
.button-outline:hover { background: #ffffff10; color: #fff; border-color: #ffffff90; }
.button:after, .nav-cta:after { background: linear-gradient(110deg,transparent 25%,#86aaff30 50%,transparent 75%); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline-color: #c7daff; }
.dropdown-panel, .dropdown-panel>a:hover { background: var(--raised); color: #fff; }
.dropdown-panel { border-color: var(--line); box-shadow: 0 18px 50px #0004; }
.dropdown-panel>a:hover { background: #ffffff0c; }
.expertise-card, .value-card, .resource-card, .agency-cta, .calculator, .editorial-cta, .service-example, .service-summary { background: var(--surface); border-color: var(--line); }
.expertise-card::before { background: radial-gradient(450px circle at var(--card-x,50%) var(--card-y,50%),#4e78cd24,transparent 65%); }
.expertise-card:hover, .resource-card:hover { border-color: #8aacec80; box-shadow: 0 18px 45px #0002; }
.icon-box, .card-arrow, .scenario-icon, .node-icon, .result-icon { background: #ffffff0b; color: #d8e5ff; border-color: var(--line); box-shadow: none; }
.expertise-card:hover .card-arrow, .resource-card:hover .card-arrow { background: #fff; color: #101f45; }
.expertise-bottom, .benefit-row>div { border-color: var(--line); color: var(--muted); }
.section-next { background: linear-gradient(110deg,#1c335e,#162950); border-color: var(--line); }
.capability-band { background: #192e55; border-color: var(--line); }
.capability-band span { color: #dae5fc; }
.capability-band b { color: #a1bdf5; }
.connected-section { background: radial-gradient(ellipse at 50% 55%,#345ba63d,transparent 60%),#12234a; border-color: var(--line); }
.connection-rings>span { border-color: #a5c3ff30; }
.connection-node, .connection-hub { background: var(--surface); border-color: #ffffff30; color: #e0e9ff; box-shadow: 0 8px 30px #0002; }
.project-invite { background: radial-gradient(ellipse at 95% 40%,#375fa454,transparent 60%),#162950; border-color: #ffffff30; }
.panel-section { background: #12234a; }
.terminal-demo, .scenario-node, .dashboard, .automation-list, .stat, .calc-result { background: var(--surface); border-color: var(--line); }
.terminal-tabs, .terminal-output, .browser-bar, .dashboard-main { background: #13254b; border-color: var(--line); }
.terminal-tabs button, .dashboard-tabs button { color: var(--muted); }
.terminal-tabs button[aria-selected=true], .dashboard-tabs button[aria-selected=true], .dashboard-tabs button>span { background: #ffffff12; color: #fff; border-color: #ffffff30; }
.terminal-output button, .run-button { background: #fff; color: #101f45; border-color: #fff; }
.terminal-output button:hover, .run-button:hover { background: #dce7ff; color: #101f45; }
.scenario-node.processing, .scenario-node.complete { background: #24436b; border-color: #97b9f6; }
#run-scenario { background: #fff; color: #101f45; }
.scenario-node strong, .scenario-heading h3 { color: var(--ink); }
.scenario-node small, .code-comment, .terminal-label, .terminal-output, .demo-disclaimer, .demo-badge, .panel-intro p, .panel-features { color: var(--muted); }
.connector { color: #91afea; }
.demo-badge, .demo-label { background: #ffffff0a; border-color: var(--line); }
.browser-bar, .workspace-name, .sidebar-bottom, .demo-profile small, .dash-heading p, .stat-top, .stat small.neutral, .list-heading>span, .automation-row small, .dash-footnote, .activity-entry small { color: var(--muted); }
.dash-date, .demo-profile>span { background: #ffffff08; color: var(--muted); border-color: var(--line); }
.list-heading, .automation-row, .demo-profile { border-color: var(--line); }
.stat small { color: #94dfc4; }
.node-icon.violet { background: #b8a1ff18; color: #d1bfff; }
.node-icon.green, .automation-row .row-status, .activity-entry>span:first-child { background: #51d6a918; color: #98e9cd; }
.calculator-copy p, .calc-note, .calc-assumption, .range-heading, .calc-result div>span, .calc-result small, .faq-layout p { color: var(--muted); }
.range-heading output { background: #ffffff0a; color: #e1eaff; border-color: var(--line); }
input[type=range] { accent-color: #b8d0ff; }
.resource-symbol { background: radial-gradient(circle at 75% 75%,#345b9b,#203860); color: #e2ebff; }
.faq-list details, .faq-list details:first-child { border-color: var(--line); }
.faq-list summary>span { color: #b2c8f2; }
.booking-section .contact-copy>p { color: var(--muted); }
.booking-facts>span, .booking-steps li>span { background: #1a3159; color: #e5edff; border-color: #ffffff26; }
.booking-steps:before { background: #ffffff26; }
.booking-embed-card { background: var(--surface); border-color: #ffffff30; box-shadow: 0 16px 60px #0002; }
.booking-heading { background: linear-gradient(115deg,#1d345d,#162950); }
.booking-heading-label { color: #bacdf0; }
.booking-duration { background: #ffffff0b; color: #fff; border-color: var(--line); }
.booking-embed-card .booking-notice, .booking-embed-card .booking-external-note { background: #14264b; border-color: var(--line); color: var(--muted); }
.booking-card .booking-status { background: #20365d; color: var(--muted); border-color: var(--line); }
footer { background: #0d1b3c; border-color: var(--line); }
.footer-bottom { border-color: var(--line); }
.footer-bottom .motion-control { background: #ffffff09; border-color: var(--line); color: #fff; }
.mobile-booking:not([hidden]) { background: #162950f5; border-color: #ffffff35; box-shadow: 0 8px 40px #0005; }
dialog { background: var(--surface); color: var(--ink); border-color: #ffffff35; }
dialog::backdrop { background: #030916b3; }
.dialog-close { color: #d4e1fc; }
.service-hero, .service-content, .guide-body, .editorial-page { color: var(--ink); }
.service-cta { background: var(--surface); border-color: var(--line); }
.guide-table th, .guide-table td { background: var(--surface); border-color: var(--line); }
@media(max-width:800px) { .nav-links { background: #14264b; border-color: var(--line); box-shadow: 0 12px 25px #0003; } }

/* Floating navigation, with a light glass panel and a distinct contact action. */
.header, .header.scrolled {
  --ink: #101f45;
  --muted: #53627d;
  --blue: #153263;
  --pale: #dfe8f7;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.header .nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  max-width: 1600px;
  height: 72px;
  gap: 24px;
  padding: 0 28px;
  color: #101f45;
  background: #e9effaeb;
  border: 1px solid #ffffffb3;
  border-radius: 14px;
  backdrop-filter: blur(24px);
  box-shadow: 0 6px 24px #030d2026, inset 0 1px 0 #ffffff70;
  transition: background .25s, box-shadow .25s;
}
.header.scrolled .nav { background: #e9effaf5; box-shadow: 0 10px 32px #030d2040; }
.header .nav-brand { justify-self: start; margin: 0; }
.header .nav-logo { width: 164px; height: 52px; filter: none; }
.header .nav-links { margin: 0; gap: 30px; color: #172747; font-size: 14px; font-weight: 600; }
.header .nav-links>a, .header .nav-dropdown>a { text-transform: none; letter-spacing: -.25px; }
.header .dropdown-toggle { color: #172747; width: 30px; }
.header .dropdown-toggle:after { width: 6px; height: 6px; border-width: 1.5px; }
.header .nav-cta {
  justify-self: end;
  margin: 0;
  padding: 14px 20px;
  border: 1px solid #7187be;
  border-radius: 9px;
  background: #101f45;
  color: #fff;
  text-transform: none;
  letter-spacing: -.2px;
  font-size: 13px;
  line-height: 1.5;
}
.header .nav-cta:hover { background: #203b6d; color: #fff; box-shadow: 0 4px 14px #101f4526; }
.header .dropdown-panel { top: calc(100% + 18px); background: #edf2fc; color: #101f45; border-color: #ccd7eb; box-shadow: 0 14px 40px #030d2033; }
.header .dropdown-panel>a:hover { background: #dfe8f7; color: #101f45; }
.header .menu-button span { background: #101f45; }
.header a:focus-visible, .header button:focus-visible { outline-color: #2452d6; }
@media(min-width:801px) and (max-width:1100px) {
  .header .nav { gap: 16px; padding-inline: 20px; }
  .header .nav-links { gap: 18px; font-size: 12px; }
  .header .nav-logo { width: 140px; }
  .header .nav-cta { padding: 12px 15px; font-size: 12px; }
}
@media(max-width:800px) {
  .header .nav { display: flex; height: 68px; padding-inline: 18px; gap: 14px; }
  .header .nav-logo { width: 140px; height: 46px; }
  .header .nav-cta { margin-left: auto; padding: 11px 14px; font-size: 12px; }
  .header .nav-links { top: calc(100% + 9px); left: -1px; right: -1px; padding: 20px; gap: 14px; border: 1px solid #ffffff99; border-radius: 14px; background: #edf2fc; color: #101f45; box-shadow: 0 14px 32px #030d2040; max-height: calc(100dvh - 160px); overflow-y: auto; }
  .header .dropdown-panel { background: #e2eafa; box-shadow: none; border-color: #c9d6ec; }
  .header .dropdown-toggle { width: 40px; }
}
@media(max-width:540px) {
  .header, .header.scrolled { padding: 8px; }
  .header .nav { height: 64px; padding-inline: 12px; gap: 10px; border-radius: 12px; }
  .header .nav-logo { width: 120px; height: 42px; }
  .header .nav-cta { padding: 10px 12px; font-size: 10px; border-radius: 8px; }
  .header .menu-button { width: 30px; height: 40px; }
  .header .nav-links { font-size: 14px; }
}
@media(max-width:360px) {
  .header .nav { padding-inline: 10px; gap: 8px; }
  .header .nav-logo { width: 102px; }
  .header .nav-cta { padding: 10px; font-size: 9px; }
}

/* Prospecting agency positioning: a documented internal project and clear controls. */
.origin-note { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; margin-top: 28px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #12234a; }
.origin-note > .eyebrow { align-self: start; line-height: 1.7; }
.origin-note h3 { margin: 0 0 12px; font-size: 24px; font-weight: 550; line-height: 1.3; letter-spacing: -.6px; }
.origin-note p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.origin-note small { display: block; color: #a9bddf; font-size: 11px; line-height: 1.7; }
.hero-label { text-wrap: balance; }
.expertise-bottom > span:first-child { min-width: 0; }
.automation-row > div { min-width: 0; }
.automation-row small { overflow-wrap: anywhere; }
.calc-assumption { line-height: 1.7; }
@media(max-width:800px) {
  .origin-note { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  /* Keep the embedded calendar usable when its virtual slot list reports a very tall page. */
  #booking-calendar iframe { max-height: 760px; }
}
@media(max-width:540px) {
  .hero-description br { display: none; }
  .origin-note { padding: 24px; }
  .origin-note h3 { font-size: 23px; }
  .terminal-tabs button { padding-inline: 8px; font-size: 10px; }
  .range-heading { flex-wrap: wrap; gap: 6px; }
}