/* Readable content and keyboard navigation, shared by all dark pages. */
html {color-scheme: dark;}
body {font-size: 1rem;}
*, *::before, *::after {box-sizing: border-box;}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid #80d4c9;
  outline-offset: 4px;
}
::selection {background: #80d4c9; color: #102536;}
.skip {color: #102536;}
.eyebrow, .career-label {color: #b4c7d1;}
.eyebrow {display: block; overflow-wrap: anywhere;}
.eyebrow::before {display: inline-block; vertical-align: middle; margin-right: 9px;}
.brand small {font-size: .75rem; line-height: 1.4;}
.hero-description, .intro-copy>p:not(.eyebrow), .value-card p,
.service-info p:not(.eyebrow), .section-heading>p, .featured-copy>p:not(.eyebrow),
.project-caption p, .project-details-content, .case-study dd,
.package-intro, .package-list li, .package-guidance p,
.about-copy>p:not(.eyebrow), .step p, .process-top p, .contact-copy>p:not(.eyebrow),
.project-form>p:not(.form-note):not(.form-status),
.detail-grid li, .tech-flow p, .detail-wide p, .detail-cta p, .faq-group details p {
  font-size: 1rem;
  line-height: 1.7;
}
.field-label, .footer-top p, .footer-bottom, .footer, .page-end {font-size: .875rem;}
.footer-bottom>span {white-space: normal;}
.footer-links {gap: 14px 22px; line-height: 1.7;}
.hero-person p, .hero-person b {font-size: .875rem;}
.credential, .career-item span {color: #b4c7d1;}
.credential b {color: #edf6f8;}
.photo-caption {color: #102536; background: #f0f7f5;}
html[data-theme="dark"] .art-label {
  color: #edf6f8;
  background: #0b1927f2;
  font-size: .75rem;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 5px;
  max-width: calc(100% - 24px);
}
.experience-stamp {width: 7rem; height: 7rem; color: #102536;}
.experience-stamp span {font-size: .75rem; letter-spacing: 0; line-height: 1.35;}
.experience-stamp b {font-size: 1.625rem;}
.quality-kpis>div {min-width: 0;}
.quality-kpis :is(span,small) {overflow-wrap: anywhere;}
.price-card strong {overflow-wrap: anywhere;}
.demo-tag {max-width: 100%; white-space: normal; overflow-wrap: anywhere;}
.breadcrumbs, .summary-list div {flex-wrap: wrap;}
.faq-group summary, .notice span, .result-card strong {overflow-wrap: anywhere;}
.panel {min-width: 0;}
.summary-list b {min-width: 0; overflow-wrap: anywhere;}
@media (max-width: 900px) {
  .demo-layout {grid-template-columns: minmax(0,1fr);}
}
.quality-table-wrap {outline-offset: 3px;}

/* The toggle precedes the navigation in the document and the tab sequence. */
.site-header .nav {height: auto; min-height: 5.5rem; padding-block: .75rem; flex-wrap: wrap;}
.site-header .brand {max-width: 100%;}
.site-header .brand-wordmark span {white-space: normal;}
.hero h1, .section-heading h2, .intro-copy h2, .about-copy h2, .contact-copy h2 {overflow-wrap: anywhere;}
h1,h2,h3,h4 {overflow-wrap: anywhere;}
p,li,dd {overflow-wrap: anywhere;}
.case-study>div {min-width: 0;}
.section-heading, .services-foot {flex-wrap: wrap;}
.section-heading>*, .services-foot>*, .intro-grid>*, .process-top>* {min-width: 0; max-width: 100%;}
.header .brand, .topbar .brand {min-width: 0; max-width: 100%;}
.brand>span {min-width: 0;}
.links {flex-wrap: wrap;}
.footer-bottom, .footer-links {min-width: 0;}
.steps {grid-template-columns: repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.menu-label {overflow-wrap: anywhere;}
@media (min-width: 1101px) {
  .site-header .nav, .site-header .nav-links {flex-wrap: wrap;}
}
.menu-button {display: none; align-items: center; justify-content: center; gap: 8px; font-size: .875rem;}
.nav-links {margin-left: auto;}
.nav-links>a {min-height: 44px;}
@media (max-width: 1100px) {
  .site-header .nav {gap: 16px;}
  .site-header .menu-button {display: inline-flex; flex: none; margin-left: auto; min-height: 48px; padding: 10px 12px; font-size: .875rem;}
  .nav-links {display: none; position: absolute; inset: 100% 0 auto; margin: 0; padding: 16px max(24px, calc((100vw - 1000px)/2)); background: #0b1927; border-bottom: 1px solid #365165; flex-direction: column; align-items: stretch; gap: 6px; max-height: calc(100dvh - 6rem); overflow-y: auto;}
  .nav-links.is-open {display: flex;}
  .nav-links>a:not(.button) {font-size: 1rem; padding: 10px 0;}
  .nav-links .button {align-self: flex-start;}
}
@media (max-width: 620px) {
  .site-header .nav {width: calc(100% - 32px); gap: 12px;}
  .site-header .brand {min-width: min(100%,10rem); gap: 8px; flex: 1;}
  .brand-wordmark {min-width: 0;}
  .site-header .brand-wordmark span {white-space: normal; max-width: 140px; font-size: .75rem; line-height: 1.35;}
  .site-header .menu-button {width: 8.5rem; max-width: 100%; padding: 9px 10px; line-height: 1.25; white-space: normal;}
  .menu-icon {display: none;}
  .experience-stamp {right: -5px; top: -5px;}
  .quality-bar>div:first-child {flex-wrap: wrap;}
  .quality-kpis {grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr));}
}

/* Persistent field messages complement the server validation. */
.project-form :is(input,select,textarea) {font-size: 1rem; scroll-margin-top: 7rem;}
.project-form .field-label {font-size: .875rem;}
.field-hint, .field-error {font-size: .875rem; line-height: 1.6; margin: 8px 0 0;}
.field-hint {color: #b4c7d1;}
.field-error {color: #ffcdbe;}
.project-form [aria-invalid="true"] {border: 2px solid #ffcdbe;}
.form-errors {border: 1px solid #ffcdbe; background: #30292c; border-radius: 12px; padding: 16px; margin-bottom: 22px; color: #ffcdbe; font-size: .875rem; line-height: 1.6;}
.form-errors p {margin: 0 0 8px; font-weight: 600;}
.form-errors ul {margin: 0; padding-left: 20px;}
.form-errors a {text-decoration: underline; text-underline-offset: 3px;}
.form-note {font-size: .875rem !important;}
[hidden] {display: none !important;}