/* responsive.css — adjustments for narrower screens. Everything above is mobile-safe by default. */
@media (max-width:900px){
  .facts{grid-template-columns:1fr;gap:var(--s5)}
  .cols{grid-template-columns:1fr;gap:var(--s6)}
  .timeline li{grid-template-columns:1fr;gap:var(--s3)}
  .tl-when{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline}
  .dates{margin-bottom:0}
}
/* Nav collapse point, re-measured 2 September 2026 with the real IBM Plex Sans installed
   rather than a metric substitute. Five items (Book a call has gone) now measure 429px at
   1rem, so with the 274px wordmark and a 24px gap the row needs 727px against 1072px of
   content width. It fits comfortably down to a 768px viewport, so the collapse moved from
   900px back to 768px and tablets keep the horizontal nav.
   top:100% rather than a fixed height, so the dropdown follows the header. */
@media (max-width:767px){
  .nav-toggle{display:block}
  .nav-list{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--rule);padding:var(--s3) var(--s5) var(--s5)}
  .nav-list.is-open{display:flex}
  .nav-list li{padding-block:var(--s3);border-bottom:1px solid var(--rule)}
  .nav-list li:last-child{border-bottom:0}
  .nav-list a{font-size:1rem}
}
@media (max-width:640px){
  .band{padding-block:var(--s7)}
  .contact-list li{grid-template-columns:1fr;gap:var(--s1)}
}

/* Mobile: stack rather than overlay. The picture is served as a dedicated centre-cropped
   7:5 file, and the words sit below it on solid background, so contrast is guaranteed
   rather than calculated and the type never lands on the subject. */
@media (max-width:768px){
  .imgband img{aspect-ratio:7/5}
  .imgband::after{display:none}
  .imgband-copy{position:static;display:block;background:var(--surface);
    padding:var(--s6) 0 var(--s7)}
  .imgband-copy .kicker{font-size:1.02rem;letter-spacing:.14em}
  .imgband-head{font-size:1.32rem;max-width:22ch}
}
@media (max-width:640px){
  .hero-cta{gap:var(--s3)}
  .hero-cta .btn{flex:1 1 100%;text-align:center}
}


/* MOBILE HERO: stacked, not overlaid. Measured on a 375x812 phone, the copy block is
   631px tall inside an 812px hero, so there is no "bottom third" to sit it in: it started
   27% down, on his face, above where the gradient began to darken at 38%. Overlaying only
   works when the copy is short enough to leave the subject clear, and this copy is not.
   So the photograph becomes a band at the top and the words sit below it on solid
   background. Contrast is then guaranteed rather than calculated, and his face is never
   covered at any phone size. Do not reintroduce the overlay here. */
@media (max-width: 767px){
  /* wordmark, so height only — 26px gives a 198px width beside the Menu button */
  .brand-logo{height:26px;width:auto}
  .hero .kicker{font-size:.82rem;letter-spacing:.14em}
  /* 1.7rem is the biggest that still breaks in four lines in a 327px column */
  .hero-tag{font-size:1.7rem;max-width:none}
  .proof{font-size:1.08rem}
  .hero-cta .btn{font-size:.98rem}

  .hero{min-height:0;display:block;padding-block:0;overflow:visible}
  .hero-media{position:relative;inset:auto;z-index:0;height:46svh;min-height:280px}
  .hero-media img{height:100%;object-position:center 18%}
  .hero::before{display:none}          /* no gradient needed once nothing overlaps */
  .hero-inner{display:block;padding-block:var(--s6) var(--s7)}
  .hero-copy{max-width:none;margin-left:0}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}
}

/* Between tablet and desktop the frame narrows, so soften the left edge of the copy
   column to keep the subject clear of the text. */
/* The copy column is 24rem here, not 30rem, so the H1 has to be held back or it breaks
   into five lines with "leadership." orphaned. 2.1rem is the ceiling that keeps four. */
@media (min-width: 768px) and (max-width: 1280px){
  .hero-copy{max-width:24rem}
  .hero-tag{font-size:clamp(1.9rem,2.6vw,2.1rem)}
  /* the discipline line runs ~429px and the column is 384px here, so tighten it in */
  .hero .kicker{font-size:.82rem;letter-spacing:.15em}
}

@media (prefers-reduced-motion: no-preference){
  .hero-media img{will-change:auto}
}


/* Very wide screens: the wrap stops growing but the photograph keeps scaling, so the
   subject creeps rightward. Hold the copy off him with a little more room. */
@media (min-width: 1600px){
  .hero-copy{max-width:30rem}
}

/* ---------- very small phones ----------
   A 198px wordmark plus the Menu button overruns a 320px viewport, so step both down. */
@media (max-width:400px){
  .brand-logo{height:22px}
  .nav-toggle{font-size:.86rem;padding:var(--s2) var(--s3)}
}