/* Phone layouts are composed separately; desktop keeps its approved layout. */
.mobile-rail-controls{display:none}
@media(max-width:760px){
  body>header{top:max(8px,env(safe-area-inset-top));width:calc(100% - 24px)}
  body>header nav.wrap{height:auto;min-height:58px;padding-inline:12px}
  body>header .brand-name{font-size:25px}
  body>header .navcta .btn{min-height:44px;font-size:12px;padding-inline:13px;gap:14px}
  body>header .burger{width:44px;height:44px}
  .wrap{padding-inline:22px}
  main>section:not(.hero){padding-block:58px;border-top:0}
  .sec-head{gap:16px;margin-bottom:28px}
  .sec-head h2{font-size:clamp(30px,8vw,40px);line-height:1.13;letter-spacing:-.04em;margin-top:0;max-width:19ch}
  .sec-head p{font-size:15px;line-height:1.65}

  /* A full opening scene, with less empty space above the message. */
  .hero-stage{min-height:max(580px,74svh);padding:112px 0 32px}
  .hero-stage>.wrap{width:calc(100% - 44px);gap:56px}
  .hero-stage .hero-meta{font-size:10px}
  .hero-stage .hero-meta>span{max-width:none}
  .hero-stage h1{font-size:clamp(40px,11.7vw,66px);line-height:1.04;max-width:14ch;letter-spacing:-.05em}
  .hero-stage .trust-badge{margin-bottom:22px;font-size:12px}
  .hero-stage .hero-support{font-size:15px;line-height:1.6;text-wrap:pretty;max-width:31ch;margin-top:20px}
  .hero-stage .cta{margin-top:26px;gap:10px}
  .hero-stage .cta .btn{min-height:48px;font-size:13px;padding-inline:18px;gap:20px}
  .hero .clients{width:100%;padding:12px 0 30px}
  .hero .marquee-ready .clients-group{width:740px}

  /* One open scorecard instead of four heavy panels. Numbers stay static. */
  main>.results-section{padding-block:20px 38px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
  .metric,.metric.feat,.metric:hover{border:0;border-top:1px solid #b9d2c22b;border-radius:0;background:none;box-shadow:none;padding:22px 0;transform:none;min-height:0}
  .metric:before,.metric:after{display:none}
  .metric-label{font-size:10px;letter-spacing:.12em}
  .metric .n{font-size:clamp(34px,10.6vw,48px);line-height:1.1;margin:12px 0 14px;letter-spacing:-.055em}
  .metric .l{font-size:13px;line-height:1.55;max-width:none;margin-top:0}
  .metric-client{font-size:9px;line-height:1.5;letter-spacing:.035em;border:0;padding:14px 0 0;margin-top:auto}

  /* Native horizontal scrolling: visible next item, no scroll interception. */
  #work .work,#pricing .tiers{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - 58px);gap:16px;max-width:none;margin:0 -22px;padding:4px 22px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch}
  #work .work::-webkit-scrollbar,#pricing .tiers::-webkit-scrollbar{display:none}
  #work .work .film:nth-child(n){grid-column:auto;margin:0;scroll-snap-align:start;padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-width:0}
  #work .film .poster{aspect-ratio:4/3;border-radius:8px}
  #work .film .meta{padding:16px 0 8px}
  #work .film .meta h3{font-size:17px}
  #work .film .meta p{font-size:13px;line-height:1.5}
  #work .film .work-card-overlay{inset:auto 16px 18px;gap:12px}
  #work .film .work-count{font-size:34px}
  #work .film .work-brand{width:42%}
  #work .film .work-project-cta{min-height:36px}
  .mobile-rail-controls:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px;color:#b2c4b7}
  .mobile-rail-caption{font-size:11px;letter-spacing:.025em}
  .mobile-rail-buttons{display:flex;align-items:center;gap:8px}
  .mobile-rail-count{font-size:11px;font-variant-numeric:tabular-nums;min-width:42px;text-align:center}
  .mobile-rail-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #b9d2c230;border-radius:50%;background:transparent;color:#dfebdb;font-size:20px}
  .mobile-rail-controls button:disabled{opacity:.3}
  .mobile-rail-controls button:focus-visible{outline:2px solid #c4dbbc;outline-offset:3px}
  #work .portfolio-row{margin-top:30px}
  .portfolio-mini-grid{margin-inline:-22px;padding-inline:22px;scroll-padding-inline:22px;grid-auto-columns:72%;gap:14px;scrollbar-width:none}
  .portfolio-mini-grid::-webkit-scrollbar{display:none}
  .portfolio-mini-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .portfolio-mini-card:after{display:none}
  .portfolio-mini-copy{padding:12px 0 6px}
  .portfolio-mini-copy h4{font-size:14px}
  .portfolio-mini-copy p{font-size:12px}
  .portfolio-watch{min-height:36px;font-size:10px}
  .portfolio-row-controls button{width:40px;height:40px}

  /* Packages sit alongside one another, so prices are easy to compare. */
  #pricing .sec-head{margin-bottom:26px}
  #pricing .tier,#pricing .tier.feat{padding:20px;scroll-snap-align:start;border-radius:12px;border-color:#b9d2c22e;box-shadow:none;transform:none}
  #pricing .tier-film{height:100px;margin:-20px -20px 18px;border-radius:11px 11px 0 0}
  #pricing .tier-heading{min-height:50px}
  #pricing .tier h3{font-size:24px;max-width:17ch}
  #pricing .tier-summary{font-size:13px;min-height:40px;margin:8px 0 16px}
  #pricing .tier-topline{margin-bottom:12px}
  #pricing .tier .price,#pricing .tier.feat .price{font-size:48px;margin:8px 0}
  #pricing .price-caption,#pricing .tier-detail{font-size:12px}
  #pricing .tier li{font-size:13px;line-height:1.5}
  #pricing .tier .btn{min-height:46px;font-size:13px;margin-top:auto}
  #pricing .tier:hover .tier-film img{transform:none}

  /* Shorter transitions between voices, studio and questions. */
  #testimonials .quotes-heading{margin-bottom:24px}
  #testimonials .quotes-viewport{margin-inline:-22px;mask-image:none}
  #testimonials .is-moving .founder-quote{width:min(310px,80vw)}
  #testimonials .founder-quote{padding:22px}
  .founder{display:block}
  .founder .photo{float:right;width:32%;max-width:150px;margin:0 0 20px 18px;border-radius:8px;aspect-ratio:4/5}
  .founder .photo img{height:100%;object-fit:cover}
  .founder h2{font-size:34px;line-height:1.08;margin-top:14px}
  .founder .role{font-size:10px;padding-top:10px}
  .founder p{font-size:15px;line-height:1.7}
  .founder .socials{clear:both;padding-top:12px}
  .founder .socials a{display:inline-flex;align-items:center;min-height:44px}
  #faq>.wrap{gap:26px}
  .q button{font-size:16px;line-height:1.5;padding-block:20px}

  /* Shared secondary pages: lighter framing and comfortable phone type. */
  .case-page .case-hero{padding-block:48px 32px}
  .case-hero h1{font-size:15vw;white-space:normal}
  .case-study{gap:22px;padding-block:32px}
  .case-media{padding:0;border:0;background:none;box-shadow:none}
  .case-caption{padding:12px 0 0}
  .case-details h2{white-space:normal;font-size:30px}
  .case-description{font-size:15px}
  .case-facts dt{font-size:10px}
  .case-facts dd{font-size:13px}
  .cspage .csh{padding-top:36px}
  .csh-grid{margin-bottom:28px}
  .csh-title{font-size:clamp(48px,15vw,96px)}
  .csh-film{padding:0;border:0;box-shadow:none}
  .slate dd{font-size:13px}
  .cs-lab{font-size:13px}
  .cs-next{padding:0;border:0;background:none;gap:20px}
  .act-nav{max-width:calc(100% - 24px);bottom:max(10px,env(safe-area-inset-bottom))}
  .act-nav a{width:36px;height:44px}
  .booking-page #main-content{padding-inline:12px}
  .booking-intake{padding:22px}
  .booking-step-copy{font-size:14px;line-height:1.6}
  .booking-step h2{font-size:36px}

  /* Keep the garden continuous, with its existing two-stage logo reveal. */
  .butterfly-close{--closing-height:max(100svh,800px)}
  .butterfly-copy{padding:90px 22px 28px}
  .butterfly-copy h2{font-size:clamp(42px,12vw,72px)}
  .butterfly-close .butterfly-footer{width:calc(100% - 44px);padding-bottom:24px}
  .butterfly-footer-grid{gap:16px;padding-bottom:30px}
  .butterfly-footer nav{gap:0;font-size:13px}
  .butterfly-footer nav a{display:inline-flex;align-items:center;min-height:44px}
  .butterfly-footer nav .closing-label{margin-bottom:4px}
  .closing-wordmark{font-size:20vw}
}
@media(max-width:360px){
  .hero-stage .cta .btn{padding-inline:14px;gap:14px}
  .metrics{column-gap:20px}
  #work .work,#pricing .tiers{grid-auto-columns:calc(100% - 42px)}
  .portfolio-row-head h3{letter-spacing:0;font-size:8px}
}