/* =========================================================
   WOHAOS — Responsive hardening v4
   Loaded last on every page. Keeps the existing visual system,
   while preventing image cropping/overflow and improving layout
   across small phones, tablets, laptops, desktops and ultrawide.
   ========================================================= */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
main,section,header,footer,nav,article,aside,form,div{min-width:0}
img,video,svg,canvas{
  display:block;
  max-width:100%;
}
img{
  height:auto;
}
input,select,textarea,button{max-width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}
h1,h2,h3,h4,p,a,span,strong,small{overflow-wrap:break-word}

/* Safe areas on devices with notches / rounded display corners */
.site-header{
  padding-left:max(clamp(22px,4vw,66px),env(safe-area-inset-left));
  padding-right:max(clamp(22px,4vw,66px),env(safe-area-inset-right));
}

/* Editorial / portfolio imagery should stay fully visible.
   Product photography deliberately remains cropped to its square cards. */
.home-case-media,
.seo-proof-media,
.brina-feature-media,
.case-hero-media,
.direction-grid{
  min-width:0;
}
.home-case-media img,
.seo-proof-media img,
.brina-feature-media img,
.case-hero-media img,
.direction-grid img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.brina-feature-media,
.case-hero-media{
  min-height:0;
  background:#071522;
}

/* Prevent media from ever escaping cards */
.home-case-media,
.seo-proof-media,
.brina-feature-media,
.case-hero-media,
.direction-grid img,
.product-card,
.brina-product-card,
.modal-card,
.manager-shell,
.checkout-demo,
.home-diagnostic-panel,
.seo-hero-card{
  max-width:100%;
}

/* Fluid line lengths and controls */
.hero-copy,.home-case-copy,.seo-hero>div,.portfolio-hero-copy,.case-hero-copy{min-width:0}
.btn,.nav-cta,.mobile-header-cta,.seo-mini-links a{
  max-width:100%;
  text-align:center;
}

/* Large desktop / ultrawide: keep major reading areas from feeling stretched */
@media (min-width:1800px){
  .hero,.home-intro,.home-solutions,.home-case,.home-diagnostic,.home-about,
  .portfolio-hero,.selected-work,.portfolio-value,.portfolio-cta,
  .case-hero,.case-overview,.case-direction,.experience-section,.checkout-section,.manager-section,.commercial-section,.case-cta,
  .seo-hero,.seo-section{
    padding-left:max(96px,calc((100vw - 1700px)/2));
    padding-right:max(96px,calc((100vw - 1700px)/2));
  }
  .hero h1,.portfolio-hero-copy h1,.seo-hero h1{max-width:1200px}
}

/* Laptops and tablets */
@media (max-width:1100px){
  .home-case-media img,.seo-proof-media img,.brina-feature-media img,.case-hero-media img{height:auto!important}
  .brina-feature-media,.case-hero-media,.seo-proof-media{min-height:0!important}
  .direction-grid img{height:auto!important}

  .home-case,.seo-proof,.brina-feature,.case-hero{align-items:start}
  .home-diagnostic-panel{gap:32px}
  .portfolio-hero,.seo-hero,.case-hero{column-gap:36px}

  .manager-shell,.brina-app,.checkout-demo{overflow:hidden}
}

/* Tablet portrait and compact laptops */
@media (max-width:900px){
  .section,.seo-section{
    padding-left:clamp(20px,4.5vw,40px);
    padding-right:clamp(20px,4.5vw,40px);
  }
  .portfolio-hero,.case-hero,.seo-hero{
    padding-left:clamp(20px,4.5vw,40px);
    padding-right:clamp(20px,4.5vw,40px);
  }
  .home-intro-grid,.home-case,.home-diagnostic-panel,.portfolio-value-grid,.portfolio-cta-card,.case-overview-grid,.commercial-grid,.case-cta-card{
    gap:32px;
  }
  .home-case-media img,.brina-feature-media img,.case-hero-media img,.seo-proof-media img{
    border-radius:20px;
  }
  .footer-links,.footer-seo-links{row-gap:12px}
}

/* Phones */
@media (max-width:680px){
  .site-header{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  .section,.seo-section{
    padding-left:clamp(16px,5vw,22px);
    padding-right:clamp(16px,5vw,22px);
  }
  .hero,.portfolio-hero,.case-hero,.seo-hero{
    padding-left:clamp(16px,5vw,22px)!important;
    padding-right:clamp(16px,5vw,22px)!important;
  }

  .hero h1,
  .seo-hero h1,
  .portfolio-hero-copy h1{
    font-size:clamp(38px,12vw,58px)!important;
    line-height:.98;
    letter-spacing:-.045em;
  }
  .case-hero-copy h1{
    font-size:clamp(66px,22vw,88px)!important;
    line-height:.82;
  }
  .case-hero-copy h2{font-size:clamp(20px,6vw,28px)}
  .case-tagline{font-size:clamp(18px,5vw,22px)}

  .hero-lead,.lead,.case-lead,.portfolio-hero-copy>p:last-child{
    font-size:15px!important;
    line-height:1.65;
  }

  .home-case-media,.seo-proof-media,.brina-feature-media,.case-hero-media{
    width:100%;
    min-height:0!important;
    border-radius:20px;
    overflow:hidden;
  }
  .home-case-media img,.seo-proof-media img,.brina-feature-media img,.case-hero-media img{
    width:100%;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  .direction-grid{gap:12px}
  .direction-grid img{
    width:100%;
    height:auto!important;
    object-fit:contain!important;
    border-radius:18px;
  }

  .home-diagnostic-panel,.seo-hero-card,.seo-cta,.portfolio-cta-card,.case-cta-card{
    border-radius:20px;
  }
  .home-diagnostic-panel{padding:22px}
  .home-diagnostic-action{padding:24px;min-height:210px}

  .home-solution-card,.home-process-grid article,.problem-card,.seo-feature,.seo-step{
    min-height:auto;
  }

  /* Brina app */
  .app-topbar,.manager-head{
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
  }
  .category-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-left:16px;
    padding-right:16px;
  }
  .category-tabs::-webkit-scrollbar{display:none}
  .category-tabs button{flex:0 0 auto}
  .brina-product-copy p{min-height:0}

  .case-cart{
    left:12px!important;
    right:12px!important;
    top:max(12px,env(safe-area-inset-top))!important;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:auto!important;
    max-height:none!important;
    border-radius:20px;
  }
  .product-modal{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
  .modal-card{
    width:100%!important;
    max-height:100%!important;
    border-radius:20px;
  }
  .modal-media{min-height:0!important}
  .modal-media img{
    width:100%;
    height:auto!important;
    max-height:42vh;
    object-fit:cover;
  }
  .modal-content{padding:22px!important}
  .modal-content h3{font-size:clamp(30px,9vw,42px)}

  .manager-body>div,.manager-metrics article,.checkout-options,.checkout-summary{padding:20px}
  .manager-head{padding:20px}
  .fake-bars{height:180px;gap:7px}

  .footer-bottom{gap:8px}
}

/* Small phones (320–390px) */
@media (max-width:390px){
  .site-header{height:68px}
  .brand{font-size:10px;letter-spacing:.09em}
  .brand-mark-img,.brand img{width:21px!important;height:21px!important}
  .mobile-header-cta{padding:0 8px!important;font-size:8px!important}

  .section,.seo-section{padding-left:16px;padding-right:16px}
  .hero,.portfolio-hero,.case-hero,.seo-hero{padding-left:16px!important;padding-right:16px!important}
  .hero h1,.seo-hero h1,.portfolio-hero-copy h1{font-size:clamp(36px,11.7vw,46px)!important}
  .case-hero-copy h1{font-size:clamp(62px,21vw,76px)!important}

  .home-diagnostic-panel,.seo-hero-card{padding:18px}
  .home-solution-card{padding:24px 20px}
  .home-solution-card small{left:20px;right:20px}
  .btn{padding:15px 18px;gap:14px}

  .brina-wordmark strong{font-size:26px}
  .manager-head h3{font-size:21px}
  .modal-footer{gap:10px}
  .modal-footer button{width:100%}
  .size-options{gap:6px}
  .size-options button{padding:10px 8px}
}

/* Landscape phones and short browser windows */
@media (max-height:620px) and (orientation:landscape){
  .site-header{height:62px}
  .hero,.home-hero,.portfolio-hero,.case-hero,.seo-hero{
    min-height:auto!important;
    padding-top:92px!important;
    padding-bottom:60px!important;
  }
  .hero-visual{min-height:460px}
  .case-cart{top:8px!important;bottom:8px!important;max-height:none!important}
  .modal-card{max-height:calc(100vh - 16px)!important}
  .modal-media{min-height:0!important}
  .modal-media img{height:100%!important;max-height:none;object-fit:cover}
  .modal-content{padding:20px!important}
}

/* Touch devices: avoid hover-only movement and maintain comfortable targets */
@media (hover:none){
  .home-solution-card:hover,.brina-product-card:hover img,.btn:hover{transform:none}
  button,.btn,.nav a,.category-tabs button{min-height:40px}
}