/* Piccolo Studios responsive stabilization layer */

/* Global resilience */
html{overflow-x:clip}
body{min-width:0}
img,video,svg,canvas{max-width:100%;height:auto}
.wrap{width:100%;min-width:0}

/* Prevent grid/flex children from forcing horizontal overflow */
.wrap > *,
.split-2 > *,
.hero-sub-row > *,
.wchart-row > *,
.appr > *,
.contact-grid > *,
.work-hero-row > *,
.wp-hero-grid > *,
.wp-feature > *,
.lb-card > *{min-width:0}

/* Tablet/mobile navigation: actually switch to the menu UI */
@media (max-width: 900px){
  .nav-in{gap:14px;padding-block:12px}
  .nav-logo img{height:30px}
  .nav-links{display:none !important}
  .menu-btn{display:flex}
  .nav-in > .btn{margin-left:auto}
}

@media (max-width: 560px){
  .nav-in > .btn{display:none}
  .nav-logo img{height:28px}
  .menu-btn{width:42px;height:42px}
  .mnav{padding-bottom:max(8vh,32px)}
  .mnav-links{width:100%;gap:8px}
  .mnav-links a{font-size:clamp(30px,10vw,48px);overflow-wrap:anywhere}
  .mnav-links .btn{font-size:12px}
}

/* Hero: viewport-safe type and spacing */
@media (max-width: 900px){
  .hero{min-height:100svh}
  .hero-in{padding-left:var(--pad);padding-right:var(--pad);padding-bottom:28px}
  .hero h1{max-width:100%}
  .h-hero{font-size:clamp(42px,9.5vw,82px);line-height:.94}
  .hero-sub-row{align-items:flex-start}
  .hero .lead{max-width:58ch}
  .hero-scroll{display:none}
}

@media (max-width: 560px){
  :root{--pad:clamp(18px,5vw,24px)}
  body{font-size:16px}
  .section{padding:72px 0}
  .sec-head{margin-bottom:36px}
  .h-hero{font-size:clamp(38px,11.8vw,58px);line-height:.93}
  .h-lg{font-size:clamp(34px,10.2vw,52px);line-height:.96}
  .h-md{font-size:clamp(25px,7.6vw,38px)}
  .lead{font-size:17px;line-height:1.5}
  .hero-in{padding-top:112px;padding-bottom:22px}
  .hero-sub-row{gap:18px;margin-top:16px}
  .hero-cta{width:100%}
  .hero-cta .btn{justify-content:center}
  .marq-t span{padding-block:12px;font-size:12px}
}

/* Workflow chart: avoid oversized pills and clipping */
@media (max-width: 1060px){
  .wchart-row{gap:0}
  .wcol{max-width:100%}
  .wchip{white-space:normal;text-align:left;line-height:1.25;max-width:100%}
  .wcore,.wgate{width:min(100%,720px);justify-self:center}
}

@media (max-width: 560px){
  .wcol{display:grid;grid-template-columns:1fr;width:100%}
  .wchip{width:100%;justify-content:flex-start;padding:11px 14px;border-radius:18px}
  .wcore,.wgate{border-radius:20px}
  .wcore{padding:24px 20px 58px}
  .wgate{padding:20px}
  .wtag{left:18px;right:auto;bottom:16px}
}

/* Compact pipeline: make the flow readable on phones */
@media (max-width: 700px){
  .pipe-strip{width:100%;padding:20px;border-radius:22px}
  .pipe-flow{display:grid;grid-template-columns:1fr;width:100%;gap:10px}
  .pstep{white-space:normal;width:100%}
  .parrow{transform:rotate(90deg);justify-self:start;margin-left:4px}
}

/* Cards / comparisons */
@media (max-width: 760px){
  .cmp-card{min-height:0}
  .cmp-card.good{transform:none}
  .step{column-gap:16px}
}


/* Horizontal gallery: desktop pin model.
   GSAP owns the pin spacing and the exact scroll runway. Do not add manual
   padding/margins here or the page will contain a blank section after the gallery. */
@media (min-width: 821px){
  .hgal{
    position:relative;
    padding-bottom:0 !important;
    overflow:visible;
  }
  .hgal-pin{
    position:relative;
    top:auto;
    height:100vh;
    height:100svh;
    min-height:0;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    z-index:3;
    background:var(--bg,#fff);
  }
  .hgal-track{
    align-items:flex-start;
    padding-top:clamp(22px,3.2vh,42px);
    padding-bottom:clamp(76px,10vh,110px);
    will-change:transform;
  }
  .gcard .media{
    max-height:min(52vh,590px);
    max-height:min(52svh,590px);
  }
  #who{
    margin-top:0 !important;
    position:relative;
    z-index:1;
  }
}

/* Horizontal gallery: use native horizontal scrolling on touch widths. */
@media (max-width: 820px){
  .hgal{padding-bottom:0 !important}
  .hgal-pin{position:relative !important;top:auto !important;height:auto !important;min-height:0 !important;overflow:visible !important}
  .hgal-track{transform:none !important;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-right:var(--pad);padding-bottom:28px}
  .gcard{flex:0 0 min(84vw,520px);scroll-snap-align:start}
  .hgal-progress,.hgal-nav{display:none !important}
}

/* Work page */
@media (max-width: 820px){
  .work-hero,.wp-hero{padding-top:112px}
  .work-bar{top:0}
  .work-bar-in{align-items:flex-start}
  .chips{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .pf-media{border-radius:20px}
}

@media (max-width: 600px){
  .work-grid-sec{padding-top:28px}
  .pf-editorial{gap:34px}
  .pf-card{gap:12px}
  .pf-media,.pf-poster{border-radius:18px}
  .pf-badges{top:10px;right:10px;max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:flex-end}
  .pf-play{right:12px;bottom:12px;width:46px;height:46px}
  .lb{padding:10px}
  .lb-card{border-radius:20px}
  .lb-side{padding:22px 18px}
  .lb-title{font-size:clamp(28px,9vw,42px)}
  .lb-spec{grid-template-columns:1fr;gap:4px}
}

/* Why Piccolo */
@media (max-width: 900px){
  .wp-hero-visual{order:0}
}

@media (max-width: 760px){
  .wp-thesis .wrap{align-items:flex-start}
  .wp-thesis p{max-width:none}
  .wp-row{border:1px solid rgba(16,16,20,.12);border-radius:18px;overflow:hidden;margin-bottom:14px}
  .wp-c{padding:14px 16px}
  .wp-c.pic{background:rgba(87,6,143,.06)}
}

@media (max-width: 560px){
  .wp-hero{padding-top:104px;padding-bottom:56px}
  .wp-hero-visual{aspect-ratio:4/3;border-radius:20px}
  .fork-card,.in-card,.wp-feat-media{border-radius:20px}
  .wp-pipe .step{grid-template-columns:48px 48px 1fr;gap:12px}
  .wp-pipe .step .body-t{grid-column:1/-1}
  .wp-feat-media{aspect-ratio:4/3}
}

/* Legal */
@media (max-width: 560px){
  .legal-sec{padding:56px 0}
  .legal-list{gap:42px}
  .legal-item{grid-template-columns:1fr;gap:12px}
  .legal-num{font-size:34px}
}

/* Fixed CTA should not cover content on narrow screens */
@media (max-width: 700px){
  .sticky-cta{display:none}
}

/* Short landscape screens */
@media (max-height: 620px) and (orientation: landscape){
  .hero{min-height:620px}
  .hero-in{padding-top:92px}
  .h-hero{font-size:clamp(34px,7.2vw,64px)}
  .mnav{padding-bottom:24px}
  .mnav-links a{font-size:clamp(26px,6.5vh,42px)}
}

/* v7 — mobile/tablet horizontal gallery must be a real native touch scroller. */
@media (max-width: 820px){
  .hgal{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .hgal-pin{
    width:100%;
    max-width:100%;
    overflow:visible !important;
    cursor:auto !important;
    touch-action:auto !important;
  }
  .hgal-track{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
    display:flex;
    flex-wrap:nowrap;
    gap:clamp(14px,4vw,22px);
    overflow-x:auto !important;
    overflow-y:visible !important;
    touch-action:pan-x pan-y !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    padding-left:var(--pad);
    padding-right:var(--pad);
    scrollbar-width:none;
    transform:none !important;
    will-change:auto;
  }
  .hgal-track::-webkit-scrollbar{display:none}
  .gcard{
    flex:0 0 calc(100vw - (var(--pad) * 2) - 28px);
    width:auto !important;
    max-width:520px;
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    cursor:pointer;
  }
  .gcard:last-child{margin-right:0}
  .gcard .media video,.gcard .media img{pointer-events:none}
}

@media (max-width: 520px){
  .gcard{flex-basis:calc(100vw - (var(--pad) * 2) - 18px)}
}