/* Shared mobile navigation */
.mnav-btn{
  display:none;
  margin-right:4px;
  margin-left:-10px;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-direction:column;
  gap:5px;
  color:#ffffff;
}
.mnav-btn span{
  display:block;
  width:22px;
  height:2px;
  background:#ffffff;
  transition:transform .3s ease,opacity .2s ease;
}
.mnav-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mnav-btn.open span:nth-child(2){opacity:0;}
.mnav-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mnav-right{display:flex;align-items:center;gap:8px;justify-self:end;margin-left:auto;}

.mnav-overlay{
  position:fixed;
  inset:0;
  z-index:400;
  padding-top:64px;
  background:#080808;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.mnav-overlay.open{opacity:1;pointer-events:auto;}
.mnav-overlay a{
  font-family:Barlow,Helvetica,Arial,sans-serif;
  font-size:clamp(30px,7vw,44px);
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  line-height:1.15;
  color:#f0ece4;
  text-decoration:none;
  padding:8px 16px;
}
.mnav-overlay a:hover,
.mnav-overlay a.current{color:#ffffff;opacity:0.55;}

@media (max-width: 900px){
  nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px 20px !important;
  }
  nav ul,
  nav .nav-links{display:none !important;}
  .mnav-btn{display:flex;flex:0 0 auto;}
  nav .nav-logo img,
  nav a img[alt="Adam Jenkins"]{height:12px;}
  .mnav-right{margin-left:auto;}
}

@media (min-width: 901px){
  .mnav-overlay{display:none;}
}

nav{z-index:500 !important;}

/* ── Nav appearance as real CSS: does not depend on inline style attributes,
      and survives high-contrast / forced-colors mode ── */
nav ul a, nav .nav-links a{font-family:Barlow,Helvetica,Arial,sans-serif;font-size:15px;font-weight:400;color:#ffffff;text-decoration:none;}
nav .nav-cta, nav .nav-cta-inv{color:#ffffff;text-decoration:none;}
nav .nav-cta-inv{font-family:Barlow,Helvetica,Arial,sans-serif;font-size:15px;font-weight:500;border:1px solid rgba(240,236,228,0.35);padding:10px 14px;}

@media (forced-colors: active){
  nav, nav *, .mnav-overlay, .mnav-overlay a, .mnav-btn, .mnav-btn span{forced-color-adjust:none;}
  nav{background:#080808 !important;}
  nav ul a, nav .nav-links a, nav .nav-cta, nav .nav-cta-inv{color:#ffffff !important;text-decoration:none !important;}
  nav .nav-cta, nav .nav-cta-inv{border:1px solid rgba(240,236,228,0.5) !important;background:transparent !important;}
  .mnav-overlay{background:#080808 !important;}
  .mnav-overlay a{color:#f0ece4 !important;}
  .mnav-btn span{background:#ffffff !important;}
}

/* ── Case-study header: class-based, mirrors the main pages. No inline styles,
      so nothing in a deploy pipeline can mangle it. Font stack falls back to
      Helvetica (not Times) if Google Fonts is blocked. ── */
nav.cs-nav{
  position:fixed;top:0;left:0;right:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:16px 48px;
  background:rgba(8,8,8,0.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(240,236,228,0.09);
  box-sizing:border-box;
}
nav.cs-nav .nav-logo{display:flex;align-items:center;text-decoration:none;}
nav.cs-nav .nav-logo img{height:15px;width:auto;display:block;}
nav.cs-nav .nav-links{display:flex;gap:40px;list-style:none;margin:0;padding:0;}
nav.cs-nav .nav-links a{font-family:Barlow,Helvetica,Arial,sans-serif;font-size:15px;font-weight:400;color:#ffffff;text-decoration:none;transition:color .2s;cursor:pointer;}
nav.cs-nav .nav-cta{
  white-space:nowrap;justify-self:end;
  display:inline-flex;align-items:center;
  font-family:Barlow,Helvetica,Arial,sans-serif;font-size:15px;font-weight:500;
  color:#ffffff;text-decoration:none;
  border:1px solid rgba(240,236,228,0.35);padding:10px 14px;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;
}
nav.cs-nav .nav-cta:hover{background:#ffffff;color:#080808;border-color:#ffffff;}

/* Body copy +2px on small screens (main pages) */
@media (max-width: 900px){
  .hero-desc{font-size:19px !important;}
  .project-desc{font-size:18px !important;}
  .statement-right p{font-size:20px !important;}
  .contact-right p{font-size:18px !important;}
  .about-copy p{font-size:20px !important;}
  .ab-cap p{font-size:20px !important;}
  .exp-points li{font-size:20px !important;}
  .edu-item p{font-size:20px !important;}
  .tool-name{font-size:18px !important;}
}

/* Section header: left-aligned with tighter vertical padding on small screens.
   (A later non-media rule was overriding align-items and centring it.) */
@media (max-width: 900px){
  .work-header{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left !important;
    gap:18px !important;
  }
  .work-header-left{text-align:left !important;width:100% !important;}
  .work-header-title{text-align:left !important;}
}

/* Case-study banners: fit the visible viewport, allowing for the fixed header
   and the browser's own bar, so the title isn't cut off. 100vh first as a
   fallback for older mobile browsers, then svh where supported. */
@media (max-width: 900px){
  .cs-banner{height:calc(100vh - 72px) !important;min-height:400px !important;}
  .cs-banner{height:calc(100svh - 72px) !important;}
}

/* ── Buttons: 4px corners, every page and every width. Circular media controls
      (video play / fullscreen / close, hamburger) are deliberately excluded.
      !important so it also wins over the gate's inline styles. ── */
.nav-cta, .nav-cta-inv,
.btn-primary, .btn-solid, .btn-outline,
.wf-cta-btn, .wf-cta-outline,
.exp-tab,
#pw-btn, #pw-input,
.section-view-all,
#view-cursor > div,
button:not(#wb-play-btn):not(#wb-fs-btn):not(#wb-fs-close):not(.mnav-btn){
  border-radius:4px !important;
}

/* Buttons get a 36px minimum height and roomier side padding on small screens */
@media (max-width: 900px){
  .btn-primary, .btn-solid, .btn-outline,
  .section-view-all, .nav-cta, .nav-cta-inv,
  .wf-cta-btn, .wf-cta-outline, #pw-btn{
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    padding-left:18px !important;
    padding-right:18px !important;
    box-sizing:border-box !important;
  }
  #pw-btn{justify-content:center !important;}
}