/* Usability layer — loaded last on every page.
   Touch comfort, keyboard focus, form ergonomics and print. It does not change
   colours, content, alignment or animation. */

/* Faster, more reliable taps; no double-tap zoom delay on controls */
a,button,summary,label,select,input,textarea,[role=button]{touch-action:manipulation}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Bigger invisible tap areas for small controls (layout is untouched) */
a.link,.journey-arrow{position:relative}
a.link::before,.journey-arrow::before{content:"";position:absolute;inset:-12px -6px}

/* Visible keyboard focus on whole cards */
.blog-card:has(h2 a:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.blog-card h2 a:focus-visible{outline:0}
.blog-read:focus-visible,.share a:focus-visible,.share button:focus-visible,.faq-item summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Touch screens: comfortable minimum sizes */
@media(pointer:coarse){
  .share a,.share button{width:44px;height:44px}
  .share{gap:2px}
  .blog-filters button{min-height:44px}
  .blog-back{min-height:44px}
  .toc-links a{min-height:44px;display:inline-flex;align-items:center}
  .faq-item summary,.sources summary{min-height:52px}
  .blog-read{width:44px;height:44px}
  .journey-arrow{min-width:44px;min-height:44px}
  input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
}

/* Phones and small tablets: stop iOS from zooming into fields, easier-to-hit fields */
@media(max-width:820px){
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select{min-height:48px}
}

/* Print: clean article / information pages for patients */
@media print{
  .emerg,.hd,.ft,.to-top,.scroll-progress,.menu-btn,.blog-sidebar,.share,.blog-tools,.blog-cta,.side-cta,.blog-back{display:none!important}
  *{box-shadow:none!important;text-shadow:none!important}
  body{background:#fff!important;color:#000!important}
  .reveal{opacity:1!important;transform:none!important}
  details>*{display:block!important}
  details[open] summary~*,details summary~*{display:block}
  .blog-content-layout{display:block!important}
  .blog-article,.blog-article *{max-width:none!important}
  .art-sec,.step,.faq-item,.callout,.tbl-wrap{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .blog-article a[href^=http]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  .bottom{background:#fff!important;color:#000!important;border:1px solid #999}
  .bottom *{color:#000!important}
}

/* Laptop widths: with 8 menu items the header was wider than the screen
   (Book a Visit pushed off the edge). Spacing only; looks the same on large screens. */
@media(min-width:1181px) and (max-width:1480px){
  .nav{gap:clamp(8px,1.2vw,22px)}
  .nav a{font-size:clamp(13px,1.06vw,15px)}
  .hd-in{gap:clamp(8px,1.2vw,16px)}
}


/* Global hero eyebrow standardisation: longer shared positioning statement. */
main#main > .hero .eyebrow,
main#main > .phero .eyebrow,
main#main > .expertise-hero-wide .eyebrow,
main#main > .blog-index-hero .eyebrow,
main#main > .meet-hero .eyebrow{
  max-width:min(100%, 920px);
  font-size:clamp(0.6825rem, calc(.82vw + 1px), 0.8225rem);
  letter-spacing:.085em;
  line-height:1.55;
  text-wrap:balance;
  overflow-wrap:anywhere;
}


/* =====================================================================
   SHARED MOBILE HERO SYSTEM  (max-width: 700px)
   Applies to the four photographic heroes: Home, Expertise, Health Care
   Leadership and Thought Leadership. Desktop is untouched.
   Layout: portrait zone on top (height scales with viewport width, so the
   crop is the same at 320-700px), copy flows underneath on a dark fade.
   No fixed hero height, so wrapped text is never clipped.
   Per-page focal point: --mh-x (horizontal) and --mh-y (vertical).
   ===================================================================== */
@media (max-width: 700px) {
  body.home main#main > .hero,
  main#main > .expertise-hero-wide,
  main#main > .phero.photo.tl-hero-right {
    --mh-img-h: clamp(400px, 118vw, 560px);
    --mh-overlap: 70px;
    --mh-pad-x: 18px;
    --mh-bg: #111517;
    --mh-x: 50%;
    --mh-y: 0%;
    --mh-fade: linear-gradient(180deg, rgba(17,21,23,0) 0%, rgba(17,21,23,.12) 42%, rgba(17,21,23,.78) 78%, #111517 100%);
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--mh-bg) !important;
  }

  /* Per-page focal points (chosen from each image, not copied between pages). */
  body.home main#main > .hero { --mh-x: 50%; --mh-y: 0%; }
  main#main > .expertise-hero-wide { --mh-x: 86%; }
  main#main > .expertise-hero-wide.leadership-hero-wide { --mh-x: 90%; }
  main#main > .phero.photo.tl-hero-right { --mh-x: 50%; --mh-y: 0%; }

  /* ---- Image zone: Expertise + Leadership use a CSS background image ---- */
  main#main > .expertise-hero-wide {
    background-size: auto var(--mh-img-h) !important;
    background-repeat: no-repeat !important;
    background-position: var(--mh-x) 0 !important;
  }
  main#main > .expertise-hero-wide .expertise-hero-shade {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: var(--mh-img-h) !important;
    background: var(--mh-fade) !important;
  }

  /* ---- Image zone: Home ---- */
  body.home main#main > .hero .hero-media {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: var(--mh-img-h) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.home main#main > .hero .hero-media picture,
  body.home main#main > .hero .hero-img,
  body.home main#main > .hero .hero-shade {
    height: 100% !important;
  }
  body.home main#main > .hero .hero-img {
    object-fit: cover !important;
    object-position: var(--mh-x) var(--mh-y) !important;
    transform: none !important;
  }
  body.home main#main > .hero .hero-shade { background: var(--mh-fade) !important; }

  /* ---- Image zone: Thought Leadership (<picture>) ---- */
  main#main > .phero.photo.tl-hero-right::before { display: none !important; }
  main#main > .phero.photo.tl-hero-right .ph-bg-picture {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: var(--mh-img-h) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  main#main > .phero.photo.tl-hero-right .ph-bg-picture .ph-bg {
    opacity: 1 !important;
    object-fit: cover !important;
    object-position: var(--mh-x) var(--mh-y) !important;
  }

  /* ---- Copy block: same padding, rhythm and type scale on every page ---- */
  body.home main#main > .hero .hero-in,
  main#main > .expertise-hero-wide .expertise-hero-content,
  main#main > .phero.photo.tl-hero-right > .wrap {
    position: relative !important;
    z-index: 2;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: calc(var(--mh-img-h) - var(--mh-overlap)) var(--mh-pad-x) 32px !important;
    background: transparent !important;
  }
  main#main > .phero.photo.tl-hero-right .tl-hero-copy { width: 100%; }

  body.home main#main > .hero .hero-in .eyebrow,
  main#main > .expertise-hero-wide .expertise-hero-content > .eyebrow,
  main#main > .phero.photo.tl-hero-right .eyebrow {
    margin: 0 0 10px !important;
    font-size: 0.7625rem;
    letter-spacing: .1em;
    line-height: 1.5;
  }
  body.home main#main > .hero .hero-in h1,
  main#main > .expertise-hero-wide .expertise-hero-content > h1,
  main#main > .phero.photo.tl-hero-right h1 {
    max-width: 100% !important;
    margin: 0 0 12px !important;
    font-size: clamp(30px, 8.6vw, 38px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
  }
  body.home main#main > .hero .hero-in .strap,
  main#main > .expertise-hero-wide .expertise-hero-content > h2 {
    max-width: 100% !important;
    margin: 0 0 14px !important;
    font-size: clamp(20px, 5.8vw, 25px) !important;
    line-height: 1.22 !important;
  }
  main#main > .expertise-hero-wide .expertise-hero-content > p:not(.eyebrow),
  main#main > .phero.photo.tl-hero-right .lead {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 16.5px !important;
    line-height: 1.65 !important;
  }
  main#main > .expertise-hero-wide .expertise-hero-content .hero-cta,
  main#main > .phero.photo.tl-hero-right .hero-cta { margin-top: 20px !important; }

  /* Expertise hero statistic flows under the copy instead of floating. */
  main#main > .expertise-hero-wide .expertise-hero-stat {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    padding: 0 var(--mh-pad-x) 30px !important;
  }
}


/* =====================================================================
   SHARED MOVING-SECTION RULES (Home expertise rows, My Story milestones,
   Expertise statistics band) - the only three auto-moving sections.
   ===================================================================== */
/* Phones: one calm, matching speed (~40px/s) for every moving section. */
@media (max-width: 700px) {
  .client-milestones-track { animation-duration: 50s; }
  .expertise-stats-track { animation-duration: 38s; }
}
/* Touch screens have no real hover: a tap leaves :hover stuck and froze the loop. Keep moving. */
@media (hover: none) {
  .m-track, .client-milestones-track, .expertise-stats-track { animation-play-state: running !important; }
}
/* Reduced motion: stop moving, show each card once and let people swipe/scroll through them. */
@media (prefers-reduced-motion: reduce) {
  .m-track > li[aria-hidden="true"],
  .client-milestone[aria-hidden="true"],
  .expertise-stats-track > [aria-hidden="true"] { display: none !important; }
  .client-milestones-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .expertise-stats-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* =====================================================================
   SHARED STATISTICS TICKERS (Home and Health Care Leadership).
   These bands intentionally move right-to-left at ALL viewport widths.
   Each track contains two identical copies; translating by -50% loops
   exactly one copy. Other sections/pages are not affected.
   ===================================================================== */
@keyframes statsTickerLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cred,
.expertise-stats-band.leadership-stats-band {
  display: block !important;
  overflow: hidden !important;
}
.cred .wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.cred .cred-track,
.leadership-stats-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: max-content !important;
  max-width: none !important;
  animation: statsTickerLoop var(--ticker-dur, 36s) linear infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}
.cred .cred-track > ul,
.cred .cred-track > ul.cred-dup,
.leadership-stats-track > .leadership-stats-grid,
.leadership-stats-track > .leadership-stats-grid[aria-hidden="true"] {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
}
.cred .cred-track > ul > li {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  box-sizing: border-box !important;
}
.cred .cred-track > ul > li.cred-tagline { justify-content: center; }
.leadership-stats-viewport { width: 100%; overflow: hidden !important; }
.leadership-stats-band .leadership-stats-grid { padding: 8px 0 !important; }
.leadership-stats-track > .leadership-stats-grid > .expertise-stat {
  display: flex !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: none !important;
  grid-column: auto !important;
  box-sizing: border-box !important;
}
.cred .rv, .cred .rv:not(.rv-in),
.leadership-stats-band .rv, .leadership-stats-band .rv:not(.rv-in) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (hover: hover) {
  .cred .cred-track:hover,
  .leadership-stats-track:hover { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cred .cred-track,
  .leadership-stats-track { animation: none !important; transform: none !important; }
  .cred .wrap,
  .leadership-stats-viewport { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* Leadership hero: override the generic expertise mobile rule, which was
   incorrectly pulling this page's statistic out of the hero on wide screens. */
main#main > section.leadership-hero-wide > .leadership-hero-stat {
  position: absolute !important;
  z-index: 3 !important;
  right: clamp(18px, 8%, 130px) !important;
  left: auto !important;
  bottom: 12% !important;
  top: auto !important;
  inset-inline-start: auto !important;
  width: min(300px, 28vw) !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff;
}
@media (max-width: 760px) {
  main#main > section.leadership-hero-wide > .leadership-hero-stat {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 22px 30px !important;
    margin: 0 !important;
  }
}