/* Load after page styles so shared accessibility rules remain consistent. */
:root { --prime-focus: #173e55; --prime-muted: #526b78; }
body { overflow-wrap: break-word; }
button, input, select, textarea { font-family: inherit; }
.main-nav { color: #526b78; }
.main-nav a { padding-block: 6px; }
.menu-toggle { min-width: 44px; min-height: 44px; color: var(--prime-blue); }

/* White inner ring on petrol, dark outer ring on light backgrounds. */
:root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--prime-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}
.skip-link {
  position: fixed; z-index: 1000; top: 12px; left: 12px;
  max-width: calc(100% - 24px); padding: 12px 18px;
  border: 2px solid var(--prime-blue); border-radius: 6px;
  background: #fff; color: var(--prime-blue); font-weight: 700;
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { top: 12px; left: 12px; transform: none; }
main[tabindex="-1"]:focus { outline: none; }
[id] { scroll-margin-top: 24px; }

.monthly-price { color: #45677b; }
.offer-photo > span { color: var(--prime-light); }
.button-secondary, .service-cta .button, .about-stage-button { color: var(--prime-focus); }
.about-kicker { color: #c9ecff; }
.about-principle-grid span, .about-experience b { color: var(--prime-green-ink); }
.references-grid .reference-card span { color: var(--reference-label, var(--prime-green-ink)); }
.references-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.references-grid .reference-card { min-width: 0; overflow-wrap: anywhere; }
.reference-card.rrl { --reference-label: #9e3028; }
.reference-card.flybike { --reference-label: #3d711b; }
.reference-card.holistic { --reference-label: #865064; --reference-strong: #3b6662; }
.reference-card.startup { --reference-label: #276953; }
.reference-card.mediaworld { --reference-label: #bf0613; }
.reference-card.jeroen { --reference-label: #2f6670; }
.reference-card.projektkontor { --reference-label: #48634d; }
.reference-card.takta { --reference-label: #226e58; --reference-strong: #196c56; }
.references-grid .reference-card:is(:hover, :focus-visible) span { color: var(--reference-highlight, var(--prime-green)); }

.inquiry-form :is(input, select, textarea), .request-change, .request-retry { border-color: #68818d; }
.inquiry-form :is(input, textarea)::placeholder { color: #526b78; opacity: 1; }
.inquiry-form .optional, .inquiry-actions small, .inquiry-upload small { color: #526b78; }
.inquiry-form .inquiry-card-head :is(h2, h3) {
  margin: 10px 0 8px; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.22; hyphens: none;
}
.request-page-title { margin: 0 0 24px; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.2; }
.request-detail-page, .inquiry-grid > *, .contact-grid > *, .main-nav { min-width: 0; }
.service-columns > *, .service-points > *, .about-manifesto-grid > *, .about-principle-grid > * { min-width: 0; }
.request-detail-page .inquiry-form { max-width: 100%; }
.inquiry-upload input[type="file"] { max-width: 100%; }
.inquiry-form :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--prime-blue); }
.inquiry-privacy input[type="checkbox"] { min-width: 20px; min-height: 20px; }
.inquiry-privacy span { min-width: 0; overflow-wrap: anywhere; }
.request-filter summary { min-height: 24px; }
.prime-consumer-rights a, .site-footer a { overflow-wrap: anywhere; }
.article-content pre, .article-content table { max-width: 100%; overflow-x: auto; }

@media (max-width: 1000px) {
  .nav-wrap { position: relative; }
  .menu-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    max-height: 75vh; overflow-y: auto; padding: 20px 24px; background: #fff;
    box-shadow: 0 12px 18px rgba(0,0,0,.08); flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { display: block; width: 100%; min-height: 36px; padding-block: 8px; }
  .main-nav .is-active { padding-bottom: 8px; border-bottom-width: 2px; }
}
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .about-stage h1 { font-size: clamp(2.3rem, 10vw, 4rem); }
  .article-heading h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .price-card { padding: 24px; }
  .references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) { .references-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; box-shadow: none; }
  .request-choice:has(input:checked) { border: 2px solid Highlight; }
}