/* Mobile header: readable logo + hamburger menu (shared by all pages with a full nav) */
.nav-burger{display:none}
@media (max-width:768px){
  header nav{flex-wrap:nowrap}
  header .logo,header .logo[class]{font-size:1rem!important;white-space:nowrap;letter-spacing:.5px}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;margin-left:auto;padding:9px;background:transparent;border:0;cursor:pointer;color:var(--text-dark)}
  .nav-burger span{display:block;height:1.5px;background:currentColor;transition:transform .25s,opacity .25s}
  .nav-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-open .nav-burger span:nth-child(2){opacity:0}
  .nav-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  /* panel spans the full viewport width just under the fixed header (top set by nav-mobile.js) */
  header nav ul{position:fixed;left:0;right:0;top:var(--nav-top,64px);flex-direction:column;align-items:stretch;gap:0!important;padding:.5rem 0;background:var(--bg-light);border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(0,0,0,.08);display:none;max-height:calc(100vh - var(--nav-top,64px));overflow-y:auto}
  .nav-open header nav ul{display:flex}
  header nav ul li{display:block}
  header nav ul a{display:block;padding:.85rem 1.5rem;font-size:.95rem!important}
  header nav ul li:last-child{padding:.6rem 1.5rem}
}

/* Clients grid was wider than the phone screen (logo images forced the columns open) */
@media (max-width:768px){
  .clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .client-item{min-width:0}
  .client-item img{max-width:100%;height:auto}
}

/* Specialist Sites section had no padding (flush to the screen edge) */
#specialist{padding:var(--spacing-xxl) var(--spacing-lg);max-width:1200px;margin:0 auto}

/* BSP mark next to the name in the header */
header .logo{display:inline-flex!important;align-items:center;gap:.65rem}
header .logo .bsp-logo{height:22px;width:auto;display:block;flex:none}
@media (max-width:768px){header .logo .bsp-logo{height:18px}}

/* Soft cross-fade between main-site pages (Chrome, Edge, Safari 18+; ignored elsewhere) */
@view-transition{navigation:auto}
::selection{background:#2B4A6F;color:#F5F3EE}

/* Monochrome off-white + one complementary blue, same palette as the homepage (home2-mono.css).
   Applied to both theme states, so the old dark/light toggle is hidden. */
:root,[data-theme="dark"]{--bg-light:#F5F3EE;--text-dark:#1B1B19;--text-light:#64615B;--border:rgba(27,27,25,.14);--primary:#1B1B19}
body,[data-theme="dark"] body{background:#F5F3EE}
header .logo .bsp-logo{filter:none}
.theme-toggle{display:none!important}
/* blocks that were painted with --white */
#brand-index,#gallery,.portfolio-item,.work-item,.gallery-item{background:#EAE7E0}
/* closing call-to-action stays a dark band: flip the text variables inside it */
#cta,#final-cta{background:#1B1B19;color:#F5F3EE;border-top:0;--text-dark:#F5F3EE;--text-light:#C9C6BF;--bg-light:#1B1B19;--border:rgba(245,243,238,.2)}
#cta .cta-button:not(.secondary),#final-cta .cta-button:not(.secondary){background:#F5F3EE;color:#1B1B19}

/* footer was a translucent dark strip; on off-white it turned muddy grey */
footer{background:#F5F3EE!important;border-top:1px solid rgba(27,27,25,.14)}

/* blue scroll-progress line (added by nav-mobile.js) */
.page-progress{position:fixed;top:0;left:0;right:0;height:2px;background:#2B4A6F;transform-origin:0 50%;transform:scaleX(0);z-index:3000;pointer-events:none}