/* Responsive usability and device QA layer */
html{scroll-padding-top:96px}
[id]{scroll-margin-top:96px}
body{min-width:320px}
.skip-link{position:fixed;z-index:1000;left:16px;top:-70px;padding:12px 16px;border-radius:999px;background:#fff;color:#071316;font-size:.72rem;font-weight:600;transition:top .2s}
.skip-link:focus{top:16px}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.worlds button:focus-visible,.objects a:focus-visible,.reflection-lab button:focus-visible{outline-color:#071316}
.site-header nav a[aria-current="true"]{opacity:1}
.site-header nav a[aria-current="true"]:after{right:0}
.menu{min-width:44px;min-height:44px;display:none;place-items:center;border-radius:14px}
.mobile-panel{max-height:calc(100dvh - 98px);overflow-y:auto;overscroll-behavior:contain}
.mobile-panel a{min-height:52px}
.world-tabs button,.reflection-options button,.copy-reflection,.pies-controls button{min-height:44px}
.world-tabs{scrollbar-width:none}
.world-tabs::-webkit-scrollbar,.object-flow::-webkit-scrollbar{display:none}
.object-card,.origin-visual,.world-image,.process-image{background:linear-gradient(145deg,#dceeed,#d8bdd3 55%,#d9c66d)}
.object-card.image-error:after,.origin-visual.image-error:after,.world-image.image-error:after,.process-image.image-error:after{content:'GOOZEL · QURANIC ART';position:absolute;inset:auto 18px 18px;padding:12px 15px;border-radius:16px;background:rgba(7,19,22,.66);backdrop-filter:blur(16px);color:#fff;font:.8rem var(--body);letter-spacing:.12em;text-transform:uppercase}
.image-error>img{opacity:0!important}
.qa-warning{position:fixed;z-index:999;right:12px;bottom:12px;max-width:280px;padding:12px 14px;border-radius:16px;background:rgba(123,42,42,.92);color:#fff;font-size:.7rem;line-height:1.5;display:none}

@media(max-width:1180px){
  .section-shell{width:min(100% - 48px,1100px)}
  .hero{padding-left:3vw;padding-right:3vw}
  .site-header nav{gap:1.2rem}
}

@media(max-width:980px){
  html{scroll-padding-top:82px}[id]{scroll-margin-top:82px}
  .menu{display:grid}
  .site-header{width:min(720px,94vw)}
  .hero{min-height:auto;padding-bottom:54px}
  .hero-copy{min-height:0}
  .hero-portrait{height:auto;aspect-ratio:5/4;max-height:620px}
  .origin-visual{height:auto;aspect-ratio:5/4;max-height:590px}
  .world-card{min-height:auto}
  .world-image{height:auto;aspect-ratio:5/4;max-height:560px}
  .object-flow{grid-template-rows:520px 340px 340px}
  .process-image{height:auto;aspect-ratio:5/4;max-height:590px}
  .testimonial{padding-block:86px}
}

@media(max-width:650px){
  html{scroll-padding-top:76px}[id]{scroll-margin-top:76px}
  .section-shell{width:calc(100% - 32px)}
  .site-header{top:max(8px,env(safe-area-inset-top));width:calc(100% - 24px);height:54px;padding:0 12px;border-radius:17px}
  .brand{font-size:1.16rem;letter-spacing:.2em}.brand i{width:12px;height:12px}
  .menu{font-size:1.25rem;min-width:42px;min-height:42px}
  .mobile-panel{top:calc(max(8px,env(safe-area-inset-top)) + 62px);width:calc(100% - 24px);max-height:calc(100dvh - 86px);border-radius:22px}
  .mobile-panel-inner{padding:18px}.mobile-panel a{padding:13px 2px;font-size:1.38rem}
  .hero{padding:82px 16px 38px;gap:16px}
  .hero h1{font-size:clamp(5.2rem,21vw,7rem);margin-bottom:1.5rem}
  .hero-note{grid-template-columns:42px 1fr;gap:12px}.hero-note span{font-size:2.65rem}.hero-note p{font-size:.76rem;line-height:1.65}
  .hero-portrait{height:auto;aspect-ratio:4/5;max-height:none;margin-top:10px}.hero-portrait img{width:96%;height:96%}.hero-portrait figcaption{padding:12px 14px;bottom:2%;right:0}.scroll-cue{display:none}
  .origin{padding:72px 0 78px}.origin-grid{gap:34px}.origin-visual{height:auto;aspect-ratio:4/5;max-height:none}.origin-visual>img{width:84%;height:88%}.origin-place{font-size:1.65rem}.origin-copy h2{font-size:clamp(4.6rem,17vw,6.3rem);margin-bottom:20px}.origin-copy>p:not(.section-kicker){font-size:.82rem;line-height:1.72}.origin-copy blockquote{margin-top:28px;font-size:2rem}
  .belief{min-height:auto;padding:88px 18px}.belief-pre{font-size:1.75rem}.belief h2{font-size:clamp(4.8rem,18vw,6.2rem)}.belief small{margin-top:1.6rem}
  .worlds-intro{padding:72px 0 34px}.worlds-intro h2{font-size:clamp(4.6rem,17vw,6.2rem)}.worlds-intro>p{font-size:.8rem;line-height:1.7;margin-top:16px}
  .world-stage{min-height:auto}.world-tabs{position:sticky;top:70px;left:auto;right:auto;margin:0 12px;padding:8px 10px;border:1px solid rgba(255,255,255,.38);border-radius:18px;background:rgba(255,255,255,.34);backdrop-filter:blur(20px);z-index:8;overflow-x:auto}.world-tabs button{padding:8px 10px 9px;flex:0 0 auto}
  .world-card{padding:28px 16px 50px;gap:26px}.world-image{height:auto;aspect-ratio:1/1.05;max-height:none}.world-copy h3{font-size:clamp(4.2rem,17vw,5.8rem);margin:14px 0 20px}.world-verse{font-size:1.55rem;margin-bottom:24px}.world-explain{gap:16px;padding-top:20px}.world-explain p{font-size:.72rem;line-height:1.6}
  .principle{padding:70px 0 78px}
  .reflection-lab{padding:72px 0}.reflection-grid{gap:28px}.reflection-copy h2{font-size:clamp(4.2rem,16vw,5.8rem);margin-bottom:18px}.reflection-copy>p:last-child{font-size:.8rem}.reflection-console{padding:14px;border-radius:24px}.reflection-options{gap:7px}.reflection-options button{padding:10px 8px}.reflection-card{padding:22px 4px 4px}.reflection-card blockquote{font-size:2.05rem;line-height:1.02;margin-block:14px 22px}
  .objects{padding:72px 0 82px;overflow:hidden}.objects-head{display:block;margin-bottom:22px}.objects-head h2{font-size:clamp(4.5rem,17vw,6rem);margin-bottom:18px}.objects-head>p{font-size:.8rem;line-height:1.7;margin:0;max-width:none}
  .object-flow{display:flex;grid-template:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:24px -16px 0;padding:0 16px 12px}
  .object-card,.object-wear{flex:0 0:min(82vw,360px);height:auto;min-height:0;aspect-ratio:4/5;grid-row:auto;scroll-snap-align:center;border-radius:26px}
  .object-copy{left:12px;right:12px;bottom:12px;border-radius:18px;padding:14px 15px;grid-template-columns:42px 1fr}.object-copy h3{font-size:1.8rem}
  .process{min-height:auto;padding:72px 16px;gap:34px}.process-copy h2{font-size:clamp(4.6rem,17vw,6rem);margin-bottom:20px}.process-copy>p:last-child{font-size:.8rem;line-height:1.7}.process-image{height:auto;aspect-ratio:4/5;max-height:none}
  .testimonial{min-height:auto;padding:88px 18px 118px}.testimonial blockquote{font-size:clamp(3.2rem,12vw,4.5rem)}.testimonial cite{bottom:54px;left:20px;right:20px}
  .contact{min-height:auto;padding:78px 0}.contact h2{font-size:clamp(4.8rem,17vw,6.3rem)}.contact-copy>p{font-size:.8rem;margin-bottom:26px}.contact-links a{min-height:52px;font-size:1.35rem;padding:14px 0}
  footer{padding:68px 16px 26px}.footer-wordmark{font-size:23vw}.footer-bottom{margin-top:48px}
  .reveal-image{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
}

@media(max-width:380px){
  .section-shell{width:calc(100% - 26px)}
  .hero{padding-inline:13px}.hero h1{font-size:20vw}.hero-note p{font-size:.72rem}
  .world-card{padding-inline:13px}.object-flow{margin-inline:-13px;padding-inline:13px}.object-card{flex-basis:86vw}
  .reflection-options{grid-template-columns:1fr 1fr}
}

@media(min-width:651px) and (max-width:820px){
  .section-shell{width:calc(100% - 56px)}
  .hero h1{font-size:16vw}.hero-portrait{aspect-ratio:16/11}
  .object-flow{grid-template-rows:480px 320px 320px}
}

@media(max-height:680px) and (min-width:700px){
  .hero{min-height:760px}.hero-portrait{max-height:560px}.belief{min-height:640px}.world-card{min-height:720px}.process{min-height:720px}
}

@media(prefers-reduced-motion:reduce){
  .reveal-image,.reveal-up{opacity:1!important;transform:none!important;clip-path:none!important}
}