/* Shared production: a11y, overflow, focus — no visual rebrand */
.skip-link{
  position:absolute;
  left:0.75rem;
  top:-120%;
  z-index:1000;
  padding:0.65rem 1rem;
  background:#0f1f17;
  color:#fff;
  border-radius:0 0 0.5rem 0.5rem;
  font-weight:700;
  font-size:0.875rem;
  text-decoration:none;
}
.skip-link:focus{
  top:0.75rem;
  outline:2px solid #22c55e;
  outline-offset:2px;
}
footer{overflow-x:clip}
/* Header + footer lockup (pages may override in inline CSS — keep in sync) */
.brand-logo{height:3.25rem;width:auto;display:block}
footer .brand-logo{height:3.85rem}
.nav-shell.nav-scrolled .brand-logo{height:2.85rem}
@media (max-width:575.98px){.brand-logo{height:2.5rem}}
.portfolio-tabs.nav{flex-wrap:nowrap!important}
.portfolio-tabs .nav-item{flex:0 0 auto}
@media (min-width:992px) and (max-width:1320px){
  .portfolio-tabs .tab-btn,
  .portfolio-tabs .tab-btn.nav-link{padding:7px 11px;font-size:12.5px}
}
@media (max-width:991.98px){
  .visual-chip,.visual-stat{display:none!important}
}
/* Responsive: nothing may widen the page sideways (clip keeps position:sticky working) */
.page{overflow-x:clip}
/* Desktop header: links + phone sit a little in from the right edge */
@media (min-width:1200px){.nav-shell #mainNav{padding-right:2.5rem}}
@media (min-width:992px) and (max-width:1199.98px){.nav-shell #mainNav{padding-right:1rem}}
/* Small laptops / landscape tablets (992–1199px): fit logo, links and contact pill on one row */
@media (min-width:992px) and (max-width:1199.98px){
  .nav-shell .navbar .navbar-brand .brand-logo{height:2.6rem}
  .nav-shell .navbar-nav .nav-link{padding:.5rem .5rem!important;font-size:.92rem}
  .nav-shell #mainNav .navbar-nav{transform:none}
  .nav-shell .nav-right-group{gap:.75rem}
  .nav-shell .nav-right-group .nav-contacts{gap:.65rem}
  .nav-shell .nav-contact{font-size:.78rem;gap:.35rem}
}
/* Pricing category bar on phones: start from the left so the first categories can be scrolled to (centering hid them) */
@media (max-width:575.98px){
  .pricing-nav-wrap .pricing-nav{justify-content:flex-start}
}
/* About bento: long labels wrap inside their card instead of being cut off */
.visual-stage .portfolio-card .card-label{white-space:normal;max-width:calc(100% - 22px)}
.page img:not([width]){
  max-width:100%;
  height:auto;
}
@media (max-width:480px){
  .footer-giant{
    font-size:clamp(2.4rem,10.5vw,12.6vw);
    white-space:normal;
    text-wrap:balance;
    overflow-wrap:anywhere;
  }
}
@media (max-width:360px){
  .wrap{width:min(94%,100% - 1rem)}
}
:focus-visible{
  outline:2px solid #16a34a;
  outline-offset:2px;
}
.navbar-toggler:focus-visible,
.nav-link:focus-visible,
.pc-btn:focus-visible,
.btn-fire:focus-visible,
.footer-cta-btn:focus-visible,
.footer-link:focus-visible{
  outline:2px solid #16a34a;
  outline-offset:2px;
}
.contact-form .form-control,
.contact-form .form-select{
  min-height:2.75rem;
}
.brief-field:focus-visible,
.brief-nav:focus-visible,
.brief-industry-trigger:focus-visible,
.brief-industry-option:focus-visible,
.brief-progress-dot:focus-visible{
  outline:2px solid #16a34a;
  outline-offset:2px;
}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}