/* Small additions on top of the design's inline styles. */
#cookie-banner:not(.is-open) { display: none !important; }
.team-photo {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #f1ede6; color: #141210; font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.04em; user-select: none;
}
/* <picture> is only a wrapper for the WebP <source>; display:contents keeps
   it out of the layout so the circular frame sizes the <img> as before. */
picture { display: contents; }

img.team-photo {
  display: block; object-fit: cover; object-position: center top;
  /* The headshots come from different sources -- a B&W studio shot, a cutout,
     an outdoor snapshot -- so in colour the row reads as a mistake. Grayscale
     unifies them and suits the black/cream/orange palette. Delete this one
     declaration to show them in colour. */
  filter: grayscale(1);
}
/* :user-invalid only matches after the visitor has actually interacted. The old
   :invalid:not(:placeholder-shown) pair flagged every required field in red on
   first paint, because a field with no placeholder never matches
   :placeholder-shown. */
#contact-form :user-invalid { border-color: #cf3c0d !important; }

/* Tap targets. The design sets no minimum hit area, so nav links rendered about
   15px tall and footer links about 18px -- fine with a mouse, a poor target with
   a thumb. Scoped to coarse pointers so the desktop header keeps its original
   proportions; on touch the header already wraps, so the extra height costs
   nothing that matters. */
@media (pointer: coarse) {
  header nav a,
  header > a:first-child,
  footer a,
  a[href^="mailto:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* short labels were 33px wide; the height fix alone leaves a narrow target */
  header nav a,
  footer a { min-width: 44px; justify-content: center; }
  /* the header CTA is the last child, not part of nav */
  header > a[href="#contact"],
  #cookie-banner a,
  #cookie-banner button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Contrast, per background.
   The palette was retuned against the cream page background, which fixed most of
   the site but not the three places that sit on something else: the dark
   security band, the dark footer, the orange contact block, and the slightly
   darker panel fill. Each needs its own value -- a single muted grey cannot
   clear 4.5:1 against both #faf8f5 and #141210.
   These have to be !important because the design carries its colours in inline
   style attributes, which outrank any selector. */
/* the footer sets the muted colour on itself and the copyright line inherits it,
   so the element has to be in the selector, not just its descendants */
#security [style*="color: rgb(119, 112, 103)"],
footer[style*="color: rgb(119, 112, 103)"],
footer [style*="color: rgb(119, 112, 103)"] { color: #857d73 !important; }
                                                   /* 3.82:1 -> 4.61:1 on #141210 */

#security [style*="color: rgb(207, 60, 13)"] { color: #e6430e !important; }
                                                   /* 3.83:1 -> 4.60:1 on #141210 */

#contact p[style*="color: rgb(255, 224, 211)"] { color: #fff7f3 !important; }
                                                   /* 3.91:1 -> 4.61:1 on the orange */

#engage [style*="color: rgb(119, 112, 103)"] { color: #706961 !important; }
                                                   /* 4.19:1 -> 4.64:1 on #f1ede6 */