/* Bond & Play R36 — canonical Unit shell */
:root { --bp-nav-bg: rgba(8,8,7,.94); }
.unit-page .site-header.is-scrolled,
.james-page .site-header.is-scrolled {
  height: 70px;
  background: var(--bp-nav-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  color: #fff;
}
.unit-page .site-header.is-scrolled .desktop-nav > a,
.unit-page .site-header.is-scrolled .nav-dropdown-trigger,
.james-page .site-header.is-scrolled .desktop-nav > a,
.james-page .site-header.is-scrolled .nav-dropdown-trigger { color:#fff; opacity:1; }
.unit-page .site-header.is-scrolled .desktop-nav > a[aria-current="page"],
.james-page .site-header.is-scrolled .desktop-nav > a[aria-current="page"] { color:var(--gold,#d7a24c); }
.unit-page .site-header.is-scrolled .menu-toggle,
.james-page .site-header.is-scrolled .menu-toggle { color:#fff; border-color:rgba(255,255,255,.5); }
.unit-page .site-header.is-scrolled .menu-toggle span,
.james-page .site-header.is-scrolled .menu-toggle span { background:currentColor; }

/* Mobile menu hardening: independent of page-specific CSS */
.mobile-menu { pointer-events:none; }
.mobile-menu.is-open { visibility:visible !important; opacity:1 !important; pointer-events:auto; }
body.menu-open { overflow:hidden; }
.mobile-units .mobile-unit-links { overflow:hidden; }
.mobile-units.is-open .mobile-unit-links { opacity:1; }

@media (max-width: 767px) {
  .unit-page .site-header.is-scrolled,
  .james-page .site-header.is-scrolled { height:62px; }
  .mobile-menu { inset:0; }
  .mobile-menu-inner { max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
  .menu-toggle { touch-action:manipulation; }
  .mobile-units-toggle { touch-action:manipulation; }
}

/* R36 V7 — Unit hero image breathing room (expanded)
   Unit pages only. Widens the gap between the subhead ("proposition")
   and the .unit-hero-deck (body copy + CTA group) so the hero photograph
   holds a larger uninterrupted visual field. Scaled up proportionally
   from V6 across every breakpoint — desktop, tablet, mobile, small phone —
   so the ratio of image-to-copy stays consistent at every screen size.
   Homepage and Barnaby 6:00 remain unchanged. V4 deterministic
   visibility remains intact. */
.unit-page .unit-hero-subhead + .unit-hero-deck {
  margin-top: clamp(148px, 16vh, 180px);
}
@media (max-width: 1100px) {
  .unit-page .unit-hero-subhead + .unit-hero-deck { margin-top: 112px; }
}
@media (max-width: 767px) {
  .unit-page .unit-hero-subhead + .unit-hero-deck { margin-top: 74px; }
}
@media (max-width: 390px) {
  .unit-page .unit-hero-subhead + .unit-hero-deck { margin-top: 62px; }
}

/* R36 V7 — short-viewport safeguard
   Prevents the expanded desktop gap from pushing CTA rows too close to
   the fold on short-but-wide laptop and landscape viewports. The 112px
   floor preserves at least the V6 desktop breathing room while keeping
   the full V7 expansion on taller screens. */
@media (max-height: 800px) and (min-width: 768px) {
  .unit-page .unit-hero-subhead + .unit-hero-deck { margin-top: 112px; }
}
@media (max-height: 500px) {
  .unit-page .unit-hero-subhead + .unit-hero-deck { margin-top: 56px; }
}

/* R36 V4 — deterministic Unit content visibility
   Never allow optional reveal animation state to hide editorial content. */
.unit-page .reveal,
.james-page .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}