/* Phase 2 additions. The reference's style.css, refinement.css and pages.css
   stay untouched; everything new or overridden for the multi-page site
   lives here so changes are easy to audit. */

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Current page and section in the header (the reference forces white on all
   header links, so the current state needs the same specificity). */
body>header.header nav a[aria-current]{color:#69b7ff!important;-webkit-text-fill-color:#69b7ff}
body>header.header .nav-group[data-current]>summary{color:#69b7ff;-webkit-text-fill-color:#69b7ff}
.nav-dropdown a[aria-current=page]{background:#253748;border-radius:3px}

/* Breadcrumbs: now a <nav> with linked ancestors. The reference styles every
   bare `nav` as the mobile menu panel (absolute, dark, column), so reset that. */
nav.breadcrumbs{position:static;inset:auto;z-index:auto;display:flex;flex-direction:row;background:none;padding:0;border-radius:0;box-shadow:none;max-height:none;overflow:visible}
.breadcrumbs{flex-wrap:wrap;row-gap:8px}
.breadcrumbs [aria-current=page]{color:#e4ebf0}

/* Two-column list in the clean-list style */
.split-list{columns:2;column-gap:48px}
.split-list li{break-inside:avoid}

/* Experience notes beneath scope rows */
.experience-note{font-size:13px;color:#64717a;margin-top:18px;max-width:760px}

/* Customer evidence on industry pages (same logo treatment as the portfolio) */
.sector-customers{margin-top:35px}
.sector-customers .customer-logo-grid{margin-top:0}

/* Section intro paragraph under an eyebrow + h2 */
.section-intro{max-width:720px;color:#52616e;line-height:1.8;margin:18px 0 0}

/* Grouped FAQ page */
.faq-group+.faq-group{margin-top:70px}
.faq-group h2{margin-bottom:6px}

/* Definition rows (maintenance guide, government) */
.definition-rows{margin-top:30px;border-top:1px solid #cbd1d6}
.definition-rows>div{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:40px;padding:26px 0;border-bottom:1px solid #cbd1d6}
.definition-rows dt{font-size:20px;font-weight:500;letter-spacing:-.3px}
.definition-rows dd{margin:0;color:#52616e;line-height:1.75}
.definition-rows dd ul{margin:10px 0 0;padding-left:18px}
.definition-rows dd li{margin:6px 0}

/* Facts block on the government page */
.fact-list{margin:25px 0 0;padding:0;list-style:none;border-top:1px solid #cbd1d6}
.fact-list li{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid #cbd1d6}
.fact-list span{color:#64717a;font-size:13px;letter-spacing:.6px;text-transform:uppercase}

/* Overflow present in the reference build, fixed here:
   - long hero words ("environments.") widened the hero column past 320px
   - the office render bleeds 115% wide and poked past the viewport at ~600-800px */
main{overflow-x:clip}
.page-hero-grid>*{min-width:0}

@media(max-width:650px){
  .page-hero h1{font-size:clamp(34px,11vw,46px);overflow-wrap:break-word}
  .split-list{columns:1}
  .definition-rows>div{grid-template-columns:1fr;gap:10px}
  .fact-list li{flex-direction:column;gap:4px}
}

@media(prefers-reduced-motion:reduce){
  .page-section,.soft-section{animation:none}
  html{scroll-behavior:auto}
}

/* Contrast (WCAG 1.4.3 AA) for reference colours, smallest visual change.
   Header CTA: the reference forced white text on #288ff7 (3.3:1); it now uses
   the same dark text as every other blue button (5.6:1). */
body>header.header .header-cta,body>header.header .header-cta span{color:#071827!important;-webkit-text-fill-color:#071827}
.customer-tabs button[aria-selected=true]{background:#1473d3;border-color:#1473d3}
.customer-tabs button[aria-selected=true] span{opacity:1}
.micro,.number{color:#666}
#about.about>div:first-child>.eyebrow{color:#1170c8}
.contact-big{color:#1170c8}