/* Mediators accessibility & responsive refinements — Version 2.1.0.
   Loaded last on every page; preserves the established editorial visual system. */

/* WCAG-friendly bypass link: revealed only on keyboard focus. */
.skip-link {
  position:fixed; z-index:10000; left:18px; top:12px;
  transform:translateY(-160%); opacity:0; pointer-events:none;
  padding:14px 18px; color:#fff; background:#111923;
  border:2px solid #fff; border-radius:2px;
  font:700 15px/1.25 Inter,"Helvetica Neue",Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.skip-link:focus,.skip-link:focus-visible {
  transform:none;opacity:1;pointer-events:auto;
  outline:3px solid #d11c31; outline-offset:3px;
}

/* Strong focus indication on mixed dark/light backgrounds. */
:where(a,button,input,textarea,select):focus-visible {outline:3px solid #b71429;outline-offset:3px}
:where(.hero,.svc-hero,.svc-final-cta,.interior-hero--dark,.team-origin,.legacy,.footer,.mpl-panel--dark,.contact) :where(a,button,input,textarea,select):focus-visible {
  outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 6px #a51628;
}
:where(main,section,[id]):target {scroll-margin-top:108px}

/* Comfortable, perceivable navigation and touch controls. */
.mobile-btn {min-width:46px;min-height:46px;display:none;align-items:center;justify-content:center;color:#10151d;border-radius:2px}
@media(max-width:970px) {
  .site-header .mobile-btn{display:flex;flex:0 0 46px}
  .site-header .mobile-nav{max-height:calc(100dvh - 76px);overscroll-behavior:contain}
  .site-header .mobile-nav a{min-height:44px;display:flex;align-items:center}
}
.nav a, .footer-col a {text-underline-offset:4px}
.nav a:focus-visible, .footer-col a:focus-visible {text-decoration:underline}

/* Small-text contrast adjustments: artwork, typography and large titles remain unchanged. */
.section-label, .mpl-section-label, .mpl-card-index, .svc-content .svc-section-eyebrow,
.svc-label, .svc-offering-no, .svc-process-item .svc-step, .svc-related-no,
.mpl-other-table td:first-child {color:#bd182d}
.expert-bottom .tags, .expert-no, .expert-desc, .work-caption, .logo-note,
.people-card .person-role, .mpl-note, .svc-disclaimer {color:#586572}
.expertise .expert-bottom .tags{color:#5a6570}
.mpl-client-card-tag{color:#566372}
.svc-related-card .svc-related-no{color:#bf182c}

/* White text on bright branded buttons previously missed 4.5:1 contrast. */
.btn-red, .nav .nav-cta, .mpl-message-form button, .svc-primary-cta {background:#cc162b;color:#fff}
.btn-red:hover,.nav .nav-cta:hover,.mpl-message-form button:hover,.svc-primary-cta:hover{background:#a91025;color:#fff}
.contact{background:#ce172c}
.contact :is(.section-label,.btn-white){color:#111923}

/* Buttons and links must remain comfortably operable. */
.svc-primary-cta,.btn,.mpl-message-form button {min-height:44px}
.expertise .service-arrow,.group-card .group-cta{min-height:44px}
.svc-secondary-cta{min-height:44px;align-items:center}
.svc-progress a{min-height:44px;display:inline-flex;align-items:center}
.mpl-message-form :is(input,select,textarea){font-size:16px;min-height:44px}
.mpl-message-form textarea{min-height:150px}
.mpl-message-form .honeypot{display:none}

/* Give every page's content a safe wrapping path at high zoom / small widths. */
.wrap, .interior-editor-content, .generic-page-content, .svc-hero-content,
.svc-section-heading, .svc-related-heading, .team-hero-inner{min-width:0}
:where(.generic-page,.interior-page,.service-detail) p{overflow-wrap:break-word}
:where(.interior-hero-text,.svc-hero-content,.team-hero) h1{overflow-wrap:break-word}
.mpl-group-row,.mpl-grid,.mpl-other-clients,.mpl-major-clients{min-width:0}

/* The client-logo marquee is a long-running animation: allow anyone to pause it. */
.marquee-toggle {
  display:inline-flex; align-items:center;justify-content:center;
  min-height:44px; margin-top:3px; padding:8px 0;
  background:transparent;border:0;border-bottom:1px solid #9aabb7;
  color:#273747;font-weight:700;font-size:12px;letter-spacing:.015em;
}
.marquee-toggle:hover{color:#b71429;border-color:#b71429}
.client-marquee.is-paused .marquee-track{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.marquee-toggle{display:none}.marquee-track{animation:none!important;transform:none!important}}

/* Small screens: protect long editorial words and prevent zoom-based clipping. */
@media(max-width:530px){
  .generic-page-content{font-size:16px;line-height:1.75}
  .interior-editor-content{font-size:15px}
  .mpl-contact-entry a{overflow-wrap:anywhere}
  .svc-hero-content h1{overflow-wrap:anywhere}
  .svc-progress>.wrap{gap:10px 18px}
  .svc-progress a{padding:12px 0;font-size:12px}
  .client-heading-side{gap:9px}
  .marquee-toggle{font-size:12px}
}
@media(max-width:390px){
  .hero h1{font-size:clamp(43px,12vw,58px);letter-spacing:-.064em}
  .team-hero h1{font-size:clamp(42px,12vw,56px)}
  .interior-hero-text h1{font-size:clamp(39px,11.5vw,53px)}
  .svc-hero-content h1{font-size:clamp(38px,10.5vw,49px);letter-spacing:-.052em}
  .svc-hero-actions{gap:12px}
  .svc-primary-cta{width:100%;justify-content:center}
  .mpl-card h3,.mpl-group-row h3{overflow-wrap:break-word}
}
@media(max-width:350px){
  .wrap{padding-inline:16px}
  .interior-main,.svc-content{overflow-wrap:break-word}
  .clients .client-marquee .major-client-logo-unit{min-width:192px}
}

/* Percentage columns plus a fixed gap made two homepage grids wider than the viewport
   at intermediate tablet widths. Fractional tracks account for the gap correctly. */
.intro-grid{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
.people-layout{grid-template-columns:minmax(0,35fr) minmax(0,65fr)}
@media(min-width:791px) and (max-width:1130px){
  .people-layout{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
}
@media(max-width:790px){
  .intro-grid{grid-template-columns:1fr}
  .people-layout{display:block}
}

/* Keep article links identifiable without relying on color alone. */
.interior-editor-content p a:not(.btn):not(.text-link),.generic-page-content p a {text-decoration:underline;text-underline-offset:3px}
.mpl-card:focus-within,.group-card:focus-within,.expert-card:focus-within{border-color:#ba1a2e}

/* Work panels visually indicate navigation; make the entire card an accessible link. */
.work-grid a.work-card {color:inherit;text-decoration:none;cursor:pointer}
.work-grid a.work-card:focus-visible {outline:4px solid #d11c31;outline-offset:4px}
