/* ==============================================================
   FAAYAH · Responsive — desktop first, then tablet, then mobile.
   Mobile is re-composed, not compressed.
   ============================================================== */

@media (max-width:1280px){
  .fgrid{grid-template-columns:repeat(6,1fr);}
  .strip{grid-template-columns:repeat(4,1fr);}
  .offset__b{margin-bottom:0;}
}

@media (max-width:1080px){
  .wall{grid-template-columns:repeat(4,1fr);}
  .tilerow{grid-template-columns:repeat(2,1fr);}
  .brandline{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);}
  .foot__top{grid-template-columns:1.6fr 1fr 1fr;}
  .mainnav{display:none;}
  .hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:.75rem;}
  .menu{order:-1;justify-self:start;}
  .logo{justify-self:center;}
  .emplogin{justify-self:end;}
  .iconrow{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);}
  .iconrow__i{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
  .iconrow--dark{border-left-color:rgba(245,242,236,.16);}
  .iconrow--dark .iconrow__i{border-bottom-color:rgba(245,242,236,.16);}
  .drawer__grid{grid-template-columns:1fr;}
  .drawer__aside{align-self:start;}
}

@media (max-width:900px){
  .statrow{grid-template-columns:repeat(2,1fr);}
  .statrow__i:nth-child(2n){border-right:0;}
  .statrow__i:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .fgrid{grid-template-columns:repeat(4,1fr);}
  :root{--nav-h:56px;--sec:clamp(3rem,6.5vw,5rem);}
  .split,.split--60,.split--40,.split--textLead,.split--imgLg,.split--imgSm,.split--imgSmR{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.5rem);}
  .collage-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .split__m{order:-1;}
  .split--mediaLast .split__m{order:0;}
  .cols-3{grid-template-columns:1fr 1fr;}
  .cols-4{grid-template-columns:1fr 1fr;}
  .tript{grid-template-columns:1fr;}
  .tript__m{aspect-ratio:16/9;}
  .offset{display:block;}
  .offset__b{margin-top:1rem;}
  .foot__brand{grid-column:1/-1;}
  .bar{grid-template-columns:auto 1fr;row-gap:1.25rem;}
  .bar .btn{grid-column:1/-1;justify-self:start;}
  .hero h1{max-width:14ch;}
  .modal__m{aspect-ratio:16/9;}

  /* Career pages: the job-info box is sticky so it stays beside the long
     description on a two-column desktop layout. Below 900px that layout
     collapses to one column, so "beside" no longer applies — the box just
     pins to the top of the screen for the entire scroll through the job
     description, blocking most of a small screen. Inline styles need
     !important to be overridden from a stylesheet. */
  [style*="sticky"]{position:static !important;top:auto !important;}
}

@media (max-width:900px){
  .hero{min-height:340px;}
  .pdetail{grid-template-columns:1fr;gap:2rem;}
  .pdetail__gal{position:static;}
  .phero--split .phero__in{grid-template-columns:1fr;align-items:start;}
  .phero--split .phero__r{border-left:0;padding-left:0;border-top:1px solid rgba(244,239,230,.2);padding-top:1.1rem;margin-top:.25rem;}
}
@media (max-width:680px){
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;aspect-ratio:auto;}
  .mosaic__big{grid-row:auto;grid-column:1/3;aspect-ratio:4/3;}
  .mosaic button{aspect-ratio:1/1;}
  .reels{gap:.4rem;}
  .reel{width:74px;}
  .rlb{grid-template-columns:1fr;grid-template-rows:1fr auto;padding-bottom:1rem;}
  .rlb__stage{grid-row:1;}
  .rlb__nav{position:absolute;bottom:1.1rem;}
  .rlb__prev{left:22%;} .rlb__next{right:22%;}
  .rlb__stage video{max-height:74svh;}
  .wall{grid-template-columns:repeat(2,1fr);}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;}
  .pdetail__specs div{grid-template-columns:1fr;gap:.2rem;}
  .tilerow{grid-template-columns:1fr;}
  .tilerow__i{min-height:200px;}
  .brandline{grid-template-columns:repeat(2,1fr);}
  .brandline__i{border-bottom:1px solid var(--line);}
  .foot__top{grid-template-columns:1fr 1fr;}
  .logo__img{height:34px;}
  .fgrid{grid-template-columns:repeat(3,1fr);}
  .fgrid__c{aspect-ratio:3/2;}
  :root{--gut:1.25rem;--sec:2.75rem;--sec-sm:2rem;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .strip__c{aspect-ratio:2/1;}
  .iconrow{grid-template-columns:repeat(2,1fr);}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr 1fr;gap:.7rem;}
  .fg2{grid-template-columns:1fr;}
  .kv{grid-template-columns:1fr;gap:.3rem;}
  .num-list li{grid-template-columns:1fr;gap:.5rem;}
  .job{grid-template-columns:1fr;gap:1.1rem;}
  .job .go{justify-self:start;}
  .foot__top{grid-template-columns:1fr;}
  .foot__bot{flex-direction:column;align-items:flex-start;}
  .btn{width:100%;justify-content:center;}
  .hero .btn,.bar .btn,.job .btn{width:auto;}
  .acc__b{gap:1.25rem;}
  .cap__tabs{width:100%;}
  .cap__tab{flex:1;text-align:center;}
  .r-21x9{aspect-ratio:16/9;}
  .r-2x1{aspect-ratio:4/3;}
  .drawer__list a{font-size:1.45rem;}
  .drawer{
    inset:auto;top:var(--nav-h);left:0;right:0;
    max-height:calc(100svh - var(--nav-h));
    padding:1.1rem var(--gut) 1.75rem;
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 34px rgba(20,16,12,.2);
  }
  .drawer__list a{font-size:1.05rem;padding:.4rem 0;}
  .drawer__list a span{font-size:.55rem;}
  .drawer__aside{padding-top:.5rem;}
  .drawer__aside p{font-size:.76rem;}
  .hero{height:auto;min-height:0;aspect-ratio:1600/658;position:relative;}
  .hero__img{position:relative;inset:auto;aspect-ratio:1600/658;}
  .hero__img video{object-fit:cover;object-position:center;}

  /* Photo/video capture — phone cameras shoot portrait, not the 4:3 /
     16:9 boxes sized for a desktop webcam. A forced landscape box left
     most of a portrait stream cropped out, which is what looked like
     "only part of the screen visible" while recording. */
  .cap__stage{aspect-ratio:3/4;}
  [data-video-modal] .modal__p{width:100%;max-height:94svh;}
  [data-video-modal] .modal__b{padding:1.25rem;}
  .video-capture__stage{aspect-ratio:3/4;margin:1rem 0;}
  .video-capture__controls{gap:.6rem;}
  [data-record-btn],[data-stop-btn],[data-retake-btn],[data-submit-video-btn]{flex:1 1 auto;text-align:center;}
}

@media (max-width:420px){
  .logo__s{letter-spacing:.2em;}
  .logo__img{height:30px;}
}

@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 2.5rem) 3rem;}
  .drawer{padding-top:calc(var(--nav-h) + 1rem);}
  .drawer__list a{font-size:1.2rem;padding:.45rem 0;}
}

@media print{
  .hdr,.drawer,.prog,.foot,.modal,.lb{display:none !important;}
  body{background:#fff;color:#000;}
  .sec{padding-block:1.5rem;}
  [data-r],[data-s]>*{opacity:1 !important;transform:none !important;}
  [data-img] img{opacity:1 !important;transform:none !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;}
}