/* UCS shared navigation and responsive corrections, 16 October 2026.
   Deliberate accessibility test fixtures do not load this stylesheet. */
:root { --ucs-header-height: 126px; }
html { scroll-padding-top: calc(var(--ucs-header-height) + 16px); }
body { overflow-wrap: anywhere; }
main [id] { scroll-margin-top: 0; }
.contact-anchor { top: 0; }
.ucs-header, .ucs-header * { box-sizing: border-box; }
.ucs-header {
  position: sticky; top: 0; z-index: 100; width: 100%;
  margin: 0; padding: 0; border: 0; border-bottom: 1px solid #dbe4ee;
  background: #fff; color: #12233d; font: 14px/1.4 Inter,Arial,sans-serif;
  box-shadow: 0 3px 16px #10243e0a; backdrop-filter: none;
}
.ucs-header-inner { position: relative; max-width: 1220px; margin: auto; padding: 16px 20px 10px; }
.ucs-header .ucs-brand { display: inline-flex; align-items: center; min-height: 44px; max-width: calc(100% - 90px); }
.ucs-header .ucs-brand img { display: block; width: 264px; max-width: 100%; height: auto; }
.ucs-header .ucs-navigation { display: block; }
.ucs-header .ucs-links { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin: 8px 0 0; padding: 0; }
.ucs-header a { text-decoration: none; font-weight: 600; letter-spacing: normal; }
.ucs-header .ucs-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; color: #344560; border-radius: 8px; text-align: center; }
.ucs-header .ucs-links a:hover, .ucs-header .ucs-links a[aria-current="page"] { color: #163f7a; background: #eef4fb; }
.ucs-header .ucs-actions { position: absolute; right: 20px; top: 16px; display: flex; align-items: center; gap: 12px; }
.ucs-header .ucs-actions a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; background: #a94808; color: #fff; border: 1px solid #a94808; border-radius: 999px; }
.ucs-header .ucs-actions a + a { color: #163f7a; border-color: #bacadd; background: #fff; }
.ucs-header .ucs-menu-toggle { display: none; }
.ucs-header a:focus-visible, .ucs-header button:focus-visible { outline: 3px solid #075fcc; outline-offset: 3px; }
.ucs-playground-hero { background: #0f2747; color: #fff; }
.ucs-playground-hero .hero { background: transparent; }
/* Avoid stacked sticky controls covering one another or the test results. */
.promo-strip { position: static; }
.filters { top: var(--ucs-header-height); }
/* Grid and flex items must be allowed to shrink to their available width. */
:where(.hero__inner,.global-grid,.cta-shell,.hero-grid,.grid-4,.grid-3,.workflow,.split,.cta-box,.resource-card,.layout,.checklist,.next-grid,.grid,.filters) > * { min-width: 0; }
:where(.btn,.chrome-cta,.hero-btn) { max-width: 100%; white-space: normal; text-align: center; }
:where(.eyebrow,.eyebrow-pill) { max-width: 100%; }
:where(input,select,textarea) { min-width: 0; max-width: 100%; }
:where(main,footer) :where(a,p,li) { overflow-wrap: anywhere; }
@media (min-width:1181px) {
  /* Three contact columns squeeze both the heading and the form. */
  .cta-shell { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .cta-shell .contact-cards { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:1099px) {
  :root { --ucs-header-height: 80px; }
  .ucs-header-inner { padding: 14px 20px; }
  .ucs-header .ucs-brand { min-height: 50px; }
  .ucs-header .ucs-brand img { width: 240px; }
  .ucs-header .ucs-links { flex-wrap: wrap; justify-content: flex-start; }
  .ucs-header .ucs-actions { position: static; margin-top: 12px; flex-wrap: wrap; }
  .ucs-header.ucs-enhanced .ucs-menu-toggle { position: absolute; right: 20px; top: 17px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #bacadd; border-radius: 10px; background: #fff; color: #163f7a; font: 700 14px/1.4 Inter,Arial,sans-serif; cursor: pointer; }
  .ucs-header.ucs-enhanced .ucs-navigation { display: none; }
  .ucs-header.ucs-enhanced.ucs-open .ucs-navigation { display: block; max-height: calc(100dvh - var(--ucs-header-height) - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 10px; }
  .ucs-header.ucs-open .ucs-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ucs-header .ucs-links a { justify-content: flex-start; text-align: left; }
}
@media (max-width:720px) {
  .hero h1 { font-size: clamp(2rem,8.5vw,3rem); }
  .hero__inner { grid-template-columns: minmax(0,1fr); }
  .cta-copy { padding: 24px; }
  .contact-form { padding: 20px; }
  .contact-form__intro h3 { font-size: clamp(24px,7vw,30px); }
  .pillar-card__header { flex-wrap: wrap; }
  .pillar-card__header h3 { min-width: 0; }
  .logo-strip__items img { max-width: 100%; height: auto; max-height: 34px; }
  .chrome-arrow { flex-shrink: 0; }
  .cta-box,.resource-card,.product { padding: 24px; }
  .filters { position: static; }
  .grid { grid-template-columns: minmax(0,1fr); }
  .footer__brand-mark { max-width: 100%; }
}
@media (max-width:380px) {
  .ucs-header-inner { padding-inline: 14px; }
  .ucs-header .ucs-brand img { width: 190px; }
  .ucs-header.ucs-enhanced .ucs-menu-toggle { right: 14px; }
  .ucs-header .ucs-actions { gap: 8px; }
  .ucs-header .ucs-actions a { padding-inline: 12px; }
  .stat-card,.info-card,.pillar-card,.step-card,.service-card,.mini-card,.case-card,.dark-card { padding: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}
/* Long CTA labels must wrap instead of setting a minimum page width. */
.btn,.resource-card .btn { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
:where(.split-grid,.card-grid,.stats-grid,.steps-grid,.footer__grid,.form-grid,.outcome-banner,.contact-form__footer) > * { min-width: 0; }
/* Author display:flex otherwise overrides the browser's hidden attribute. */
#cases .card[hidden] { display: none; }

.ucs-header .ucs-actions .ucs-chrome-store { background:#0756a8; border-color:#0756a8; color:#fff; gap:8px; }
.ucs-header .ucs-actions .ucs-chrome-store:hover { background:#064789; border-color:#064789; }

.ucs-skip {position:absolute;left:12px;top:-100px;z-index:200;background:#fff;color:#163f7a;padding:12px}
.ucs-skip:focus {top:12px}
.ucs-service-links nav {display:flex;flex-wrap:wrap;gap:12px 24px}
.ucs-service-links a {color:#163f7a;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.ucs-service-links h2 {font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2}

/* Preserve intrinsic aspect ratios when max-width constrains an image. */
img { height: auto; }