/* Shared controls and the separate, persistent navigation bar. */
:root {
  --site-header-height: 76px;
  --control-top: #293247;
  --control-bottom: #202634;
  --control-hover-top: #303d56;
  --control-hover-bottom: #273348;
  --control-text: #dfe6f4;
  --control-border: #a9bcdf1c;
  --control-edge: #c8d8f52b;
  --control-selected: #24385f;
  --control-selected-border: #6a8df273;
}

html { scroll-padding-top: calc(var(--site-header-height) + 24px); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--graphite);
  color: var(--control-text);
  border-bottom: 1px solid #a9bcdf21;
  transition: box-shadow 180ms ease;
}
.site-header[data-scrolled="true"] { box-shadow: 0 6px 22px #10172524; }
.site-header .header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: min(1320px, calc(100% - 48px));
  height: var(--site-header-height);
  gap: 28px;
}
.site-header .brand { flex-shrink: 0; justify-self: start; }
.site-header .nav {
  position: relative;
  align-self: stretch;
  align-items: center;
  gap: 26px;
  margin-left: 0;
  justify-self: center;
}
.site-header .nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--control-text);
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  transition: color 150ms ease;
}
.site-header .nav > a::after {
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  scale: 1;
  transform: scaleX(.65);
  transform-origin: center;
  transition: transform 180ms var(--ease), opacity 140ms ease;
}
.site-header .nav > a:hover { color: #fff; }
.site-header .nav > a:hover::after { opacity: .38; transform: scaleX(1); }
.site-header .nav > a[aria-current="location"] { color: #98b4ff; }
.site-header .nav > a[aria-current="location"]::after { opacity: 0; }
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: calc((var(--site-header-height) - 44px) / 2 + 3px);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #7199ff;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 240ms var(--ease), width 240ms var(--ease), opacity 140ms ease;
}
.site-header .mobile-menu {
  top: calc(100% + 1px);
  max-height: calc(100dvh - var(--site-header-height) - 16px);
  padding: 12px 24px;
  border: 1px solid #a9bcdf21;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--graphite);
}
.site-header .mobile-menu > a {
  position: relative;
  min-height: 44px;
  padding: 13px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--control-text);
  font-size: 15px;
  transition: color 150ms ease;
}
.site-header .mobile-menu > a:hover,
.site-header .mobile-menu > a[aria-current="location"] { color: #98b4ff; background: none; }
.site-header .mobile-menu > a::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 18px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: #7199ff;
  opacity: 0;
  transform: scaleY(.6);
  transition: opacity 140ms ease, transform 180ms ease;
}
.site-header .mobile-menu > a[aria-current="location"]::after { opacity: 1; transform: scaleY(1); }
.hero { margin-top: 16px; }

/* All action controls share the same capsule, edge and pressed state. */
.pill, .hero-demo-link, .scenario-tabs > button, .booking-slots > button,
.demo-action, .demo-reset, .solution-link, .site-header .menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 17px;
  border: 1px solid var(--control-border);
  border-top-color: var(--control-edge);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
  color: var(--control-text);
  box-shadow: inset 0 1px 0 #dce8ff07;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms var(--ease), color 150ms ease;
}
.pill::before { content: none; }
.pill .icon, .hero-demo-link .icon, .scenario-tabs > button .icon,
.demo-action .icon, .demo-reset .icon, .solution-link .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pill:not(.pill-ghost), .demo-action:not(:disabled) {
  background: linear-gradient(180deg, #3b6ef3, var(--accent));
  border-color: #366af0;
  border-top-color: #8caafa80;
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff16, 0 2px 5px #12378d14;
}
.scenario-tabs > button[aria-selected="true"], .booking-slots > button[aria-pressed="true"] {
  background: linear-gradient(180deg, #2b406d, var(--control-selected));
  border-color: var(--control-selected-border);
  color: #fff;
}
.demo-action:disabled {
  cursor: default;
  background: #2c3953;
  color: #c2cfe4;
  border-color: #3a4861;
  box-shadow: none;
}
.demo-reset { font-size: 13px; flex-shrink: 1; }
#solutions .solution-link {
  display: flex;
  align-self: flex-start;
  flex-shrink: 0;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  min-height: 36px;
  margin-top: 16px;
  padding: 6px 4px 6px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
  line-height: 22px;
  text-align: left;
}
#solutions .solution-link:hover { color: var(--accent-hover); }
#solutions .solution-link:active { transform: translateY(1px); }
.site-header .header-contact { justify-self: end; min-height: 44px; padding: 10px 17px; font-size: 13px; white-space: nowrap; }
.header-contact[aria-current="location"] { border-color: #b7cafd; box-shadow: inset 0 1px 0 #ffffff26, 0 0 0 3px #2f63ed26; }
.site-header .menu-button { display: none; width: 44px; height: 44px; padding: 10px; color: #dfe6f4; }
.site-header .menu-button .icon { width: 18px; height: 18px; }
.hero-demo-link { font-size: 14px; }

/* Direction cards stay still; only their action links react to interaction. */
#solutions .solution-card {
  transition: none;
  transform: none;
  translate: none;
  border-color: #e3e7ee;
  box-shadow: none;
}
#solutions .solution-photo > img {
  transition: none;
  transform: none;
}

/* Headings no longer need the gap below removed section labels. */
#engine h2:first-child,
#solutions h2:first-child,
.founder-copy > h2:first-child,
#principles h2:first-child,
#faq h2:first-child,
.contact-inner > h2:first-child { margin-top: 0; }

/* Cards in one row share tracks for titles, descriptions, results and actions. */
@media (min-width: 901px) {
  #solutions .solution-grid {
    grid-template-rows: auto auto auto 1fr auto auto;
    row-gap: 0;
  }
  #solutions .solution-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    row-gap: 0;
  }
  #solutions .solution-copy {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
  }
  #solutions .solution-copy > h3,
  #solutions .solution-copy > p { min-height: 0; }
  #solutions .service-result { margin-top: 0; }
  #solutions .solution-link { grid-row: 4; }
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover, .hero-demo-link:hover, .scenario-tabs > button:hover,
  .booking-slots > button:hover, .demo-reset:hover, .solution-link:hover,
  .site-header .menu-button:hover {
    translate: none;
    background: linear-gradient(180deg, var(--control-hover-top), var(--control-hover-bottom));
    border-color: var(--control-selected-border);
    color: #fff;
    box-shadow: inset 0 1px 0 #dce8ff0c;
  }
  .pill:not(.pill-ghost):hover, .demo-action:not(:disabled):hover {
    background: linear-gradient(180deg, #4276fa, var(--accent-hover));
    border-color: #648cfa;
    color: #fff;
    box-shadow: inset 0 1px 0 #ffffff16, 0 2px 5px #12378d14;
  }
  .scenario-tabs > button[aria-selected="true"]:hover, .booking-slots > button[aria-pressed="true"]:hover {
    background: linear-gradient(180deg, #304b80, #2b406d);
  }
  .pill:hover .icon, .solution-link:hover .icon, .hero-demo-link:hover .icon { transform: translateX(2px); }
}
.pill:active, .hero-demo-link:active, .scenario-tabs > button:active,
.booking-slots > button:active, .demo-action:not(:disabled):active,
.demo-reset:active, .solution-link:active, .site-header .menu-button:active {
  transform: scale(.98);
  translate: none;
  box-shadow: inset 0 1px 3px #101b3730;
}
@media (max-width: 1100px) {
  .site-header .header { gap: 18px; width: calc(100% - 40px); }
  .site-header .nav { gap: 18px; }
  .site-header .header-contact { font-size: 12px; }
  .site-header .brand img { width: 123px; }
  .site-header .header-contact { padding-inline: 13px; }
}
@media (max-width: 900px) {
  .site-header .header { grid-template-columns: 1fr auto; }
  .site-header .nav, .site-header .header-contact { display: none; }
  .site-header .menu-button { display: inline-flex; }
}
@media (max-width: 700px) {
  :root { --site-header-height: 68px; }
  .site-header .header { width: calc(100% - 32px); }
  .site-header .brand img { width: 137px; }
  .hero { margin-top: 12px; }
  .scenario-tabs > button { justify-content: flex-start; }
  .demo-reset { margin-left: 25px; padding: 10px 15px; }
  .hero-demo-link { font-size: 13px; padding-inline: 15px; }
}
@media (pointer: coarse) {
  #solutions .solution-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #solutions .solution-link:active { transform: none; }
  html { scroll-behavior: auto; }
  .nav-indicator, .site-header, .site-header .nav > a::after, .site-header .mobile-menu > a::after { transition: none; }
  .pill:active, .hero-demo-link:active, .scenario-tabs > button:active, .booking-slots > button:active,
  .demo-action:not(:disabled):active, .demo-reset:active, .solution-link:active, .site-header .menu-button:active,
  .pill:hover .icon, .solution-link:hover .icon, .hero-demo-link:hover .icon { transform: none; }
}