/* Responsive system shared by every page — desktop styles remain unchanged. */
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,a,input,textarea,select{touch-action:manipulation}
.mobile-menu-toggle,.mobile-menu-panel{display:none}

@media (pointer:coarse){
  body{cursor:auto!important}
  #custom-cursor,.cursor-trail-square{display:none!important}
  a,button{cursor:pointer}
}

@media (max-width:1024px){
  .shell{padding-inline:clamp(24px,4.5vw,46px)}
  .case-head,.works-head{gap:clamp(34px,5vw,58px)}
  .collection-triptych,.product-grid,.outcome-grid,.rhythm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .collection-triptych>.primary,.product-grid>:last-child:nth-child(odd),.outcome-grid>:last-child:nth-child(odd),.rhythm-grid>:last-child:nth-child(odd){grid-column:1/-1}
  .lifestyle-portrait,.bucket-model{min-height:clamp(480px,68vw,700px)!important}
}

@media (max-width:880px){
  :root{--responsive-nav-height:69px}
  html{scroll-padding-top:calc(var(--responsive-nav-height) + 18px)}
  body.mobile-menu-open{overflow:hidden!important}

  .site-nav .nav-inner,.responsive-nav-root{
    min-height:var(--responsive-nav-height)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
  }
  body>nav.responsive-nav-root{padding:8px 20px!important}
  .responsive-logo-link{width:auto!important;flex:0 1 auto!important;min-width:0!important}
  .responsive-logo-link img,.site-logo{width:auto!important;max-width:122px!important;height:auto!important;max-height:48px!important}
  .responsive-source-links,.responsive-contact-wrap,.site-nav .nav-links,.site-nav .nav-contact{display:none!important}
  .mobile-menu-toggle{
    position:relative;z-index:32110;display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex:0 0 46px;margin:0;padding:0;border:0;background:transparent;
    color:var(--ink,#171717);font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  }
  .mobile-menu-toggle::before,.mobile-menu-toggle::after{
    content:"";position:absolute;left:10px;width:26px;height:1.5px;background:currentColor;
    transition:transform .28s cubic-bezier(.16,1,.3,1),top .28s cubic-bezier(.16,1,.3,1);
  }
  .mobile-menu-toggle::before{top:17px}.mobile-menu-toggle::after{top:28px}
  .mobile-menu-toggle[aria-expanded="true"]::before{top:22px;transform:rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"]::after{top:22px;transform:rotate(-45deg)}
  .mobile-menu-toggle span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .mobile-menu-panel{
    position:fixed;z-index:32050;display:flex;inset:var(--responsive-nav-height) 0 0;
    flex-direction:column;justify-content:center;align-items:flex-start;gap:0;
    padding:28px max(24px,6vw) max(36px,env(safe-area-inset-bottom));
    background:rgba(250,248,244,.985);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    visibility:hidden;opacity:0;transform:translateY(-12px);pointer-events:none;
    transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility 0s linear .38s;
  }
  .mobile-menu-panel.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .mobile-menu-panel a{
    display:flex;align-items:center;width:100%;min-height:58px;padding:9px 0;
    border-bottom:1px solid var(--line,#dcd8d2);color:var(--ink,#171717);
    font-family:zeitung,"Zeitung",Inter,Arial,sans-serif;font-size:clamp(28px,8vw,46px);
    font-weight:650;line-height:1;letter-spacing:-.035em;text-transform:none;text-decoration:none;
  }
  .mobile-menu-panel a:last-child{margin-top:20px;color:var(--pink,#e06e8d);border-bottom-color:currentColor}
  .mobile-menu-panel a:focus-visible,.mobile-menu-toggle:focus-visible{outline:2px solid var(--pink,#e06e8d);outline-offset:3px}

  .case-main{padding-top:clamp(108px,16vw,132px)!important}
  .case-head,.works-head,.section-grid,.story-intro,.cta-grid,.feed-layout,.membership-layout,.detail-layout,.lifestyle-layout,.bucket-layout,.accessories-top,.split{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .case-title{font-size:clamp(48px,13vw,96px)!important;line-height:.86!important;letter-spacing:-.06em!important;max-width:100%}
  body.responsive-page-chip .case-title{font-size:clamp(86px,27vw,150px)!important}
  .case-subtitle{font-size:clamp(21px,4.8vw,31px)!important;line-height:1.12!important}
  .case-summary,.section-copy{font-size:clamp(17px,2.5vw,21px)!important}
  .section{padding-block:clamp(72px,10vw,105px)!important}
  .brief-words,.concept-words{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .story-grid,.product-grid,.outcome-grid,.rhythm-grid,.profile-notes,.collection-triptych{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-stage,.hero-media{min-height:0!important;height:auto!important;padding:clamp(24px,5vw,46px)!important}
  .hero-stage img,.hero-media img{width:auto!important;max-width:100%!important;height:auto!important;max-height:min(72svh,690px)!important;min-height:0!important;object-fit:contain!important}
  .editorial-media,.visual,.media-tile{min-height:0!important}
  .tote-360-media,.mug-viewer{height:clamp(460px,92vw,680px)!important}
  .global-footer-title,.closing-line{overflow-wrap:anywhere}

  #hero{min-height:auto!important;padding:clamp(112px,18vw,138px) 24px 72px!important}
  #hero .hero-display{font-size:clamp(44px,13.5vw,104px)!important;line-height:.84!important;letter-spacing:-.06em!important}
  #hero .hero-display>span{display:block;max-width:100%}
  #hero h1+div{margin-top:clamp(44px,9vw,72px)!important}
  .vision-section,.about-section,.services-section,.contact-section{padding-block:clamp(76px,12vw,115px)!important}
  .vision-grid,.about-grid,.services-layout{grid-template-columns:minmax(0,1fr)!important;gap:clamp(38px,7vw,62px)!important}
  .intro-scene{width:min(88vw,68svh)!important}
  .intro-skip{right:max(20px,env(safe-area-inset-right))!important;bottom:max(20px,env(safe-area-inset-bottom))!important;min-height:44px}
}

@media (max-width:600px){
  .shell{padding-inline:20px!important}
  .case-head{padding-bottom:clamp(54px,13vw,74px)!important}
  .case-kicker,.eyebrow{font-size:9px!important;line-height:1.45!important;letter-spacing:.14em!important}
  .case-title{font-size:clamp(44px,13.2vw,74px)!important}
  body.responsive-page-chip .case-title{font-size:clamp(82px,28vw,130px)!important}
  .case-facts,.brief-words,.concept-words,.story-grid,.product-grid,.outcome-grid,.rhythm-grid,.profile-notes,.collection-triptych,.scarf-grid,.duo-wide,.bucket-products,.image-pair,.video-grid,.language-panel,.editorial-pair,.baby-grid,.word-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .collection-triptych>*,.product-grid>*,.outcome-grid>*,.rhythm-grid>*{grid-column:auto!important}
  .brief-word,.concept-word,.word-card{min-height:92px!important}
  .hero-stage,.hero-media{padding:20px!important}
  .hero-stage img,.hero-media img{max-height:66svh!important}
  .lifestyle-portrait,.bucket-model{min-height:0!important;aspect-ratio:4/5}
  .tote-360-media,.mug-viewer{height:clamp(390px,122vw,590px)!important}
  .tote-360-caption,.mug-caption{display:block!important}
  .tote-360-controls,.mug-controls{margin-top:16px;flex-wrap:wrap}
  .global-footer{padding-left:20px!important;padding-right:20px!important}
  .global-footer-title{font-size:clamp(58px,18.5vw,98px)!important;line-height:.84!important;white-space:normal!important}
  .global-footer-bottom{align-items:flex-start!important;flex-direction:column!important;gap:12px!important}
  .global-footer-bottom span:last-child{text-align:left!important}

  #hero{padding-left:20px!important;padding-right:20px!important}
  #hero .hero-display{font-size:clamp(42px,13.2vw,72px)!important;line-height:.86!important}
  #hero p{font-size:17px!important;line-height:1.55!important}
  .vision-section,.about-section,.services-section,.contact-section{padding-block:72px!important}
  .vision-label,.about-label{font-size:clamp(26px,8vw,36px)!important}
  .vision-intro,.vision-statement,.vision-close{overflow-wrap:break-word}
  .intro-scene{width:min(94vw,64svh)!important}
}

@media (max-width:390px){
  .mobile-menu-panel{padding-left:20px;padding-right:20px}
  .responsive-logo-link img,.site-logo{max-width:108px!important}
  .case-title{font-size:clamp(40px,12.8vw,58px)!important}
  body.responsive-page-chip .case-title{font-size:clamp(76px,27vw,112px)!important}
  #hero .hero-display{font-size:clamp(39px,12.9vw,54px)!important}
}

@media (max-height:520px) and (orientation:landscape){
  .mobile-menu-panel{justify-content:flex-start;overflow-y:auto;padding-top:18px}
  .mobile-menu-panel a{min-height:48px;font-size:28px}
  .intro-scene{width:min(72vw,72svh)!important}
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu-panel,.mobile-menu-toggle::before,.mobile-menu-toggle::after{transition:none!important}
}