/* Mobile compositions share one screen; desktop art direction stays intact. */
@media(max-width:720px){
 .header.directory-header{height:64px;padding:0 6%;gap:12px}
 .header.directory-header .brand img{width:86px;height:54px;object-fit:contain}
 .header.directory-header .nav-contact{padding:9px 13px;font-size:11px}
 .header.directory-header nav{top:100%;max-height:calc(100vh - 64px);max-height:calc(100svh - 64px)}
 .header.directory-header .menu-toggle{font-size:22px;padding:6px}

 /* Home: the title and complete phone share the large central grid cell. */
 .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto;gap:8px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:480px;max-height:none;padding:14px 6% 18px;overflow:visible}
 .hero-top{grid-area:1/1;position:relative;z-index:5}
 .hero-top .eyebrow{font-size:7px;letter-spacing:.1em}
 .hero-copy{display:contents;width:auto;margin:0}
 .hero h1{grid-area:2/1;align-self:start;z-index:5;position:relative;max-width:none;font-size:clamp(43px,12.4vw,65px);line-height:.94;margin:12px 0 0;letter-spacing:-.06em;text-shadow:0 2px 22px #0b1021aa;pointer-events:none}
 .hero .hero-title-line,.hero .hero-title-em{text-indent:0}
 .hero-copy p{grid-area:3/1;align-self:end;margin:0;font-size:12px;line-height:1.55;z-index:5}
 .hero-copy>.button{grid-area:4/1;justify-self:start;padding:13px 22px;font-size:12px;min-height:43px;z-index:5}
 .hero-copy>.hero-note{grid-area:5/1;margin:0;font-size:9px;line-height:1.4;z-index:5}
 .hero-copy>.replay-intro{grid-area:6/1;margin:0;font-size:8px;justify-self:start;z-index:5}
 .hero-bottom{grid-area:7/1;position:static;display:flex;margin:0;padding-top:9px;font-size:6px;z-index:5}
 .hero-bottom>span{display:none}
 .hero .pro-phone-stage{grid-area:2/1;position:relative;inset:auto;align-self:end;justify-self:end;width:65%;min-width:190px;height:100%;min-height:0;max-height:365px;z-index:2}
 .hero .hero-phone-slot{inset:0 0 28px}
 .hero .hero-first-frame{object-fit:contain}
 .hero .orbit{inset:12% -10%;width:auto;height:auto}
 .hero .pro-phone-stage .explore-button{bottom:0;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:115%;font-size:8px;gap:8px}
 .hero .explore-button .plus{width:24px;height:24px;font-size:17px}

 /* Brand pages: the picture and headline occupy the same generous row. */
 .has-product-story .brand-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(170px,1fr) auto auto auto;gap:8px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:480px;padding:14px 6% 18px;overflow:visible;align-items:stretch}
 .has-product-story .brand-hero-copy{display:contents!important}
 .has-product-story .brand-breadcrumb{grid-area:1/1;margin:0;gap:7px;font-size:9px;line-height:1.4;z-index:5}
 .has-product-story .brand-signature{grid-area:2/1;margin:0;gap:12px;z-index:5}
 .has-product-story .brand-signature .brand-mark{width:60px;height:23px}
 .has-product-story .brand-signature>span{font-size:7px;padding-left:12px}
 .has-product-story .brand-hero h1{grid-area:3/1;align-self:start;position:relative;z-index:5;font-size:clamp(34px,10.5vw,48px);line-height:.98;letter-spacing:-.05em;margin:3px 0 0!important;text-shadow:0 2px 22px #0b1021aa;pointer-events:none}
 .has-product-story .brand-hero-copy>.brand-lead{grid-area:4/1;margin:0;font-size:17px!important;line-height:1.3!important;z-index:5}
 .has-product-story .brand-hero-copy>p:not(.brand-lead){grid-area:5/1;margin:0;max-width:none;font-size:11px;line-height:1.5;z-index:5}
 .has-product-story .brand-actions{grid-area:6/1;margin:0!important;gap:12px;z-index:5}
 .has-product-story .brand-actions .button{padding:12px 17px;font-size:10px;min-height:40px}
 .has-product-story .brand-actions .text-link{font-size:10px;padding-block:10px}
 .has-product-story .brand-artwork{grid-area:3/1;position:relative;align-self:stretch;width:100%;height:100%;min-height:0;margin:0!important;z-index:2}
 .brand-hero .product-experience{height:100%;min-height:0}
 .brand-hero .product-viewport{height:100%;min-height:0!important;aspect-ratio:auto!important}
 .brand-hero .product-sculpture,.brand-hero .motion-joycon-release.product-paper .product-sculpture,.brand-hero .motion-joycon-release .product-sculpture{inset:25% 12% 9%!important}
 .brand-hero .product-optics{opacity:.6}
 .brand-hero .product-control-bar{right:2px;bottom:0}
 .has-product-story .brand-hero .iphone-view-toggle{bottom:0;font-size:8px;padding:8px 12px}
 .brand-hero [data-brand-iphone]{width:90%;height:73%;top:20%;margin-inline:auto}
 .brand-hero [data-brand-iphone] .product-sculpture{inset:0 7% 9%!important}

 /* Repair pages, including the MacBook, use the same complete-device frame. */
 .detail-main{padding-top:0;overflow-x:clip}
 .detail-main .detail-hero,.mac-branded-page .detail-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(190px,1fr) auto auto;gap:10px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:480px;padding:14px 6% 18px;overflow:visible;align-items:stretch}
 .detail-hero>.detail-breadcrumb{grid-area:1/1;margin:0;font-size:9px;line-height:1.4;z-index:5}
 .detail-hero>.detail-intro-v2{display:contents}
 .detail-intro-v2>.eyebrow{grid-area:2/1;font-size:7px;line-height:1.5;z-index:5}
 .detail-intro-v2 h1{grid-area:3/1;align-self:start;font-size:clamp(35px,10.8vw,51px);line-height:1;letter-spacing:-.055em;margin:3px 0 0;z-index:5;position:relative;text-shadow:0 2px 22px #0b1021aa;pointer-events:none}
 .detail-intro-v2>p{grid-area:4/1;font-size:12px;line-height:1.55;margin:0;z-index:5}
 .detail-intro-v2 .button-row{grid-area:5/1;margin:0;gap:8px;z-index:5}
 .detail-intro-v2 .button-row .button{padding:12px 14px;font-size:10px;min-height:40px}
 .detail-hero>.detail-visual-v2{grid-area:3/1;width:100%;height:100%;min-height:0;padding:66px 5% 0;margin:0;align-self:stretch;z-index:2}
 .detail-hero>.detail-visual-v2 img{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
 .detail-hero>.detail-visual-v2 figcaption{display:none}
 .detail-hero>.mac-product-hero{grid-area:3/1;height:100%;min-height:0;margin:0;padding-top:60px;z-index:2}
 .mac-product-hero .product-experience,.mac-product-hero .product-viewport{height:100%;min-height:0!important;aspect-ratio:auto!important}
 .mac-product-hero .product-sculpture{inset:5% 8% 9%!important}
 .mac-product-hero .product-control-bar{right:2px;bottom:0}
 /* Keep readable copy and actions clear of the persistent contact circles. */
 .hero-copy p,.has-product-story .brand-hero-copy>p:not(.brand-lead),.detail-intro-v2>p{padding-right:50px}
 .has-product-story .brand-actions,.detail-intro-v2 .button-row{padding-right:50px}
}
@media(max-width:720px) and (max-height:640px){
 .hero,.has-product-story .brand-hero,.detail-main .detail-hero{gap:6px;padding-top:10px;padding-bottom:12px;min-height:440px}
 .hero h1{font-size:clamp(39px,11.8vw,55px);margin-top:8px}
 .hero-copy p{font-size:11px}
 .hero-bottom{padding-top:6px}
 .has-product-story .brand-hero h1{font-size:clamp(31px,10vw,41px)}
 .has-product-story .brand-hero-copy>.brand-lead{font-size:15px!important}
 .has-product-story .brand-hero-copy>p:not(.brand-lead){font-size:10px;line-height:1.4}
 .has-product-story .brand-hero{grid-template-rows:auto auto minmax(150px,1fr) auto auto auto}
 .detail-main .detail-hero{grid-template-rows:auto auto minmax(160px,1fr) auto auto}
 .detail-intro-v2 h1{font-size:clamp(32px,10.3vw,44px)}
 .detail-intro-v2>p{font-size:11px;line-height:1.45}
}