/* Mobile artwork is the baseline; desktop changes composition, not scale. */
.phone-page{width:min(100%,1200px)}
.prototype-notice{position:relative;inset:auto;width:min(100%,1200px);margin:0 auto;border-radius:0;text-align:center;box-shadow:none}
.bottom-bar{width:min(100%,1200px)}
.voice-director-launch[hidden]{display:none}
@media(min-width:768px){
  body{padding-bottom:0}
  .site-head{height:88px;padding:16px 48px;justify-content:space-between}
  .site-head img{width:140px;height:56px}
  .site-head span{position:static;font-size:16px}
  .hero{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto auto 1fr;column-gap:32px;min-height:550px;padding:32px 48px 40px;background-size:cover}
  .hero-area{grid-column:1/-1;justify-self:start;white-space:normal;font-size:16px;border-radius:6px}
  .hero-overline{grid-column:1;margin:32px 0 12px;font-size:clamp(20px,2.4vw,28px)}
  .hero h1{grid-column:1;line-height:1.12;position:relative;z-index:2}
  .hero h1 span{font-size:clamp(34px,4.3vw,54px)}
  .hero h1 strong{font-size:clamp(64px,7vw,88px)}
  .hero-mascot{width:130px;height:130px;top:10px;right:36px}
  .hero-points{grid-column:1;align-self:end;gap:12px;max-width:400px;margin-top:24px}
  .hero-points article{height:120px;padding-top:16px}
  .hero-points b{font-size:20px}
  .hero-photos{grid-column:2;grid-row:2/5;align-self:end;height:350px;margin:28px 0 0;padding:0;gap:14px}
  .hero-photos img{min-width:0;border-radius:80px 80px 12px 12px;object-fit:cover}
  .hero-photos img:last-child{transform:translateY(-24px)}
  .contact-band{padding:28px 32px}
  .contact-band p{font-size:16px}
  .contact-band h2{font-size:23px;margin:8px 0}
  .contact-band strong{font-size:48px}
  .contact-band small{font-size:13px}
  .section-pad{padding:72px 64px}
  .section-kicker{font-size:20px}
  .worries h2,.items>h2,.services>h2,.cases>h2{font-size:40px;margin-bottom:32px}
  .worry-people{width:300px;margin:0 auto 24px}
  .worry-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .worry-grid article{padding:22px 12px}
  .worry-grid p{font-size:16px}
  .worry-grid b{font-size:20px}
  .speed{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;align-items:center}
  .speed-title{grid-column:1;gap:12px}
  .speed-title img{width:90px;height:110px}
  .speed-title h2{font-size:26px}
  .speed-title em{font-size:clamp(23px,2.5vw,32px)}
  .speed>p{grid-column:1;font-size:16px;margin:0}
  .speed-truck{grid-column:2;grid-row:1/3;width:100%;margin:0}
  .speed .unverified{grid-column:1/-1}
  .work-example{padding:56px 64px}
  .staff-pair{width:440px;max-width:100%;height:290px;margin:0 auto}
  .work-example h2{font-size:36px;margin:16px 0 28px}
  .ba{gap:20px}
  .ba img{height:240px}
  .ba figcaption,.case-images figcaption{font-size:16px;padding-bottom:8px}
  .truck{height:220px;max-width:450px}
  .anything{font-size:40px}
  .items{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .items>h2{grid-column:1/-1;margin-bottom:12px}
  .items article{margin:0;padding:28px 20px 28px 84px}
  .items h3{font-size:22px}
  .items p{font-size:15px}
  .service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .service-grid article{padding:22px}
  .service-grid img{height:140px}
  .service-grid h3{font-size:22px}
  .service-grid p{font-size:15px}
  .staff{width:500px;max-width:100%;height:300px;object-fit:contain;margin:36px auto -72px}
  .case-card{max-width:800px;margin:auto}
  .case-card>header{padding:24px}
  .case-card h3{font-size:24px}
  .case-images img{height:250px}
  .case-card dl{padding:24px}
  .case-card dt,.case-card dd{font-size:16px}
  .figma-long-sections{display:grid;grid-template-columns:1fr 1fr}
  .figma-long-sections article{padding:48px 32px;border:8px solid white;min-width:0}
  .source-placeholder,.source-placeholder.tall{min-height:280px}
  .contact-band.last{padding:32px}
  .miraie-instagram{padding:64px}
  .miraie-instagram h2{font-size:36px}
  .social-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .social-grid img{height:200px}
  .social-grid h3{font-size:20px}
  .miraie-voice-note{padding:28px 64px}
  footer{padding:40px 64px 120px}
  footer img{width:150px;height:60px}
  footer a{font-size:15px}
  .bottom-bar{height:76px;grid-template-columns:1fr 1fr 100px}
  .bottom-bar b{font-size:24px}
  .bottom-bar small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}