/* =========================================================
   PROJECT (case study) + ALL PROJECTS pages
   ========================================================= */
.curtain--cover i{transform:scaleY(1)}

/* ---------- media slot ---------- */
.media{position:relative;aspect-ratio:var(--r,16/9);overflow:hidden;border-radius:4px;background:var(--ink-2);margin:0}
.media__inner{position:absolute;inset:0;will-change:transform}
.media__inner>img,.media__inner>.cover,.media__inner>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph{display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--pbg);color:var(--pfg);overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 60% at 30% 20%,rgba(255,255,255,.07),transparent 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 80px)}
.ph__mark{position:relative;font-family:var(--serif);font-style:italic;font-size:clamp(34px,5vw,90px);opacity:.28;text-align:center;padding:0 6%}
.ph__file{position:absolute;left:16px;bottom:14px;opacity:.55;font-size:10px}
.has-img>.ph,.has-img>.cover{visibility:hidden}

/* ---------- HERO ---------- */
.pj-hero{padding:120px var(--pad) clamp(40px,6vw,80px);position:relative}
.pj-hero__top{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:clamp(50px,10vh,120px)}
.pj-back{display:inline-flex;gap:10px;align-items:center;transition:color .3s}
.pj-back span{transition:transform .5s var(--ease)}
.pj-back:hover{color:var(--bone)}
.pj-back:hover span{transform:translateX(-6px)}
.pj-hero__cat{color:var(--muted);margin-bottom:18px}
.pj-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--p-ac);margin-right:10px;vertical-align:1px}
.pj-hero__title{font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.05em;
  font-size:clamp(58px,13vw,230px);font-variation-settings:"wdth" 70;margin-bottom:clamp(40px,7vw,90px)}
.pj-meta{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:24px}
.pj-meta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(var(--ml,1));transform-origin:left}
.pj-meta .mono{color:var(--muted);margin-bottom:10px}
.pj-meta .reveal-line{font-size:clamp(15px,1.2vw,18px);line-height:1.45}

.pj-cover{padding:0 var(--pad)}
.media--cover{border-radius:6px}

/* ---------- INTRO ---------- */
.pj-intro{padding:clamp(100px,14vw,200px) var(--pad) clamp(60px,8vw,120px)}
.pj-statement{font-size:clamp(28px,4.2vw,66px);line-height:1.08;letter-spacing:-.025em;font-weight:500;max-width:23ch;font-variation-settings:"wdth" 92}
.pj-statement .word{opacity:.14}
.pj-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(60px,9vw,130px);padding-left:clamp(0px,25vw,420px)}
.pj-col h4{color:var(--p-ac);font-weight:400;margin-bottom:18px;filter:saturate(1.2)}
.pj-col p{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--soft,#c9c3b7)}

/* ---------- GALLERY ---------- */
.pj-gallery{padding:clamp(40px,6vw,80px) var(--pad);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,36px)}
.pj-gallery>.label{margin-bottom:clamp(20px,4vw,50px)}
.blk--duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,36px)}
.blk--trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.blk--duo .media:nth-child(2){margin-top:clamp(40px,8vw,140px)}
.blk--trio .media:nth-child(2){margin-top:clamp(30px,5vw,90px)}
.blk--offset{display:grid;grid-template-columns:5fr 7fr;gap:clamp(18px,2.4vw,36px);align-items:end}
.blk__cap{color:var(--muted)}
.blk--offset .blk__cap{padding-bottom:10px}
.blk--text{display:grid;grid-template-columns:5fr 7fr;gap:clamp(18px,4vw,60px);padding:clamp(70px,10vw,150px) 0}
.blk__title{font-weight:800;font-size:clamp(36px,4.6vw,76px);letter-spacing:-.04em;line-height:.95;font-variation-settings:"wdth" 80}
.blk__body{font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:var(--soft,#c9c3b7);max-width:34ch;align-self:end}

.blk--palette{padding:clamp(60px,9vw,130px) 0}
.blk--palette .blk__cap{margin-bottom:24px}
.sw-row{display:flex;gap:clamp(10px,1.4vw,20px);height:clamp(260px,34vw,480px)}
.sw{flex:1;background:var(--c);border-radius:4px;padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:flex-grow .7s var(--ease)}
.sw:hover{flex-grow:1.8}
.sw__name{font-weight:700;font-size:clamp(18px,1.8vw,28px);letter-spacing:-.02em}
.sw__hex{opacity:.75}

.blk--type{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,80px);align-items:center;padding:clamp(60px,9vw,130px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.type__aa{font-family:var(--tf);font-size:clamp(160px,24vw,420px);line-height:.8;color:var(--p-ac);text-align:center}
.type__info h3{font-family:var(--tf);font-weight:400;font-size:clamp(40px,5vw,84px);line-height:1;margin:18px 0 8px}
.type__role{color:var(--muted)}
.type__glyphs{font-family:var(--tf);font-size:clamp(18px,1.8vw,28px);line-height:1.35;margin-top:30px;color:var(--soft,#c9c3b7);word-break:break-all}

/* ---------- DELIVERABLES ---------- */
.pj-deliver{padding:clamp(80px,12vw,180px) var(--pad)}
.dl{border-top:1px solid var(--line)}
.dl li{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:20px;padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid var(--line)}
.dl li .mono{color:var(--p-ac)}
.dl__name{font-weight:700;font-size:clamp(26px,3.4vw,54px);letter-spacing:-.03em;font-variation-settings:"wdth" 85;transition:translate .6s var(--ease)}
.dl__arrow{font-size:28px;color:var(--muted);transition:transform .6s var(--ease),color .3s}
.dl li:hover .dl__name{translate:16px 0}
.dl li:hover .dl__arrow{transform:rotate(45deg);color:var(--accent)}

/* ---------- NEXT PROJECT ---------- */
.pj-next{padding:0 var(--pad) clamp(60px,8vw,100px)}
.pj-next__link{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"lbl media" "title media" "cat media";
  gap:16px 40px;align-items:end;padding:clamp(30px,4vw,60px);border:1px solid var(--line);border-radius:6px;overflow:hidden;isolation:isolate;transition:color .6s var(--ease),border-color .6s}
.pj-next__fill{position:absolute;inset:0;background:var(--n-bg);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease)}
.pj-next__link:hover .pj-next__fill{transform:scaleY(1)}
.pj-next__link:hover{color:var(--n-fg);border-color:transparent}
.pj-next__lbl{grid-area:lbl;color:var(--muted);transition:color .6s}
.pj-next__link:hover .pj-next__lbl,.pj-next__link:hover .pj-next__cat{color:inherit;opacity:.7}
.pj-next__title{grid-area:title;font-weight:900;text-transform:uppercase;font-size:clamp(48px,9vw,160px);line-height:.85;letter-spacing:-.05em;font-variation-settings:"wdth" 70}
.pj-next__cat{grid-area:cat;color:var(--muted)}
.pj-next__media{grid-area:media;position:relative;width:clamp(180px,22vw,340px);aspect-ratio:4/5;border-radius:4px;overflow:hidden;transition:transform .8s var(--ease)}
.pj-next__media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-next__media .cover span{font-size:clamp(40px,5vw,80px)!important}
.pj-next__link:hover .pj-next__media{transform:rotate(-3deg) scale(1.03)}

.page-project .footer,.page-work .footer{padding-top:20px}

/* =========================================================
   ALL PROJECTS
   ========================================================= */
.wk__head{padding:130px var(--pad) clamp(30px,5vw,60px)}
.wk__title{display:flex;align-items:flex-start;font-weight:900;text-transform:uppercase;font-size:clamp(70px,17vw,300px);line-height:.84;letter-spacing:-.055em;font-variation-settings:"wdth" 68}
.wk__count{font-size:clamp(12px,1.2vw,16px);letter-spacing:.05em;color:var(--accent);margin:.6em 0 0 .6em;font-weight:500}
.wk__filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(30px,5vw,60px)}
.wk__filters button{font:inherit;color:var(--bone);background:none;border:1px solid var(--line);border-radius:99px;padding:10px 18px;cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.wk__filters button:hover{border-color:var(--bone)}
.wk__filters button.is-active{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.wk__list{padding:0 var(--pad) clamp(80px,12vw,160px);border-top:0}
.row{position:relative;display:grid;grid-template-columns:70px 1fr 200px 120px 40px;align-items:center;gap:20px;padding:clamp(18px,2.2vw,32px) 0;border-bottom:1px solid var(--line)}
.row>*{transition:opacity .4s}
.row:first-child{border-top:1px solid var(--line)}
.wk__list:hover .row>*{opacity:.3}
.wk__list:hover .row:hover>*{opacity:1}
.row__thumb{display:none}
.row__no,.row__cat,.row__year{color:var(--muted)}
.row__title{position:relative;overflow:hidden;display:block;height:1em;font-weight:800;font-size:clamp(34px,5.6vw,96px);line-height:1;letter-spacing:-.04em;font-variation-settings:"wdth" 80}
.row__t{display:block;transition:transform .7s var(--ease)}
.row__t--hover{position:absolute;inset:0;transform:translateY(100%);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent);font-variation-settings:normal}
.row:hover .row__t{transform:translateY(-100%)}
.row:hover .row__t--hover{transform:translateY(0)}
.row__arrow{font-size:26px;justify-self:end;transition:transform .6s var(--ease)}
.row:hover .row__arrow{transform:rotate(-45deg);color:var(--accent)}

.wk__preview{position:fixed;left:0;top:0;width:clamp(240px,22vw,360px);aspect-ratio:4/5;margin:calc(clamp(240px,22vw,360px) * -.625) 0 0 70px;
  pointer-events:none;z-index:80;overflow:hidden;border-radius:6px;opacity:0;transform:scale(.4)}
.wk__preview-inner{position:absolute;inset:0}
.wk__slide{position:relative;width:100%;height:100%}
.wk__slide>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk__slide .cover span{font-size:clamp(46px,5vw,84px)!important}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pj-meta{grid-template-columns:1fr 1fr;row-gap:30px}
  .pj-cols{grid-template-columns:1fr;padding-left:0}
  .blk--duo,.blk--text,.blk--offset,.blk--type{grid-template-columns:1fr}
  .blk--trio{grid-template-columns:1fr 1fr}
  .blk--trio .media:nth-child(3){grid-column:1/-1}
  .blk--duo .media:nth-child(2),.blk--trio .media:nth-child(2){margin-top:0}
  .sw-row{flex-direction:column;height:auto}
  .sw{min-height:110px}
  .pj-next__link{grid-template-columns:1fr;grid-template-areas:"media" "lbl" "title" "cat"}
  .pj-next__media{width:60%}
  .row{grid-template-columns:1fr auto;grid-template-areas:"thumb thumb" "title arrow" "cat year";row-gap:10px;padding:26px 0}
  .row__thumb{grid-area:thumb;display:block;position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden}
  .row__thumb-in{position:absolute;inset:0}
  .row__thumb-in>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .row__no{display:none}
  .row__title{grid-area:title;height:auto}
  .row__t--hover{display:none}
  .row__cat{grid-area:cat}.row__year{grid-area:year;justify-self:end}
  .row__arrow{grid-area:arrow}
  .wk__list:hover .row>*{opacity:1}
  .wk__title{font-size:16.5vw}
  .wk__count{margin-left:.3em}
  .wk__preview{display:none}
}

/* ---------- presentation images (no crop) ---------- */
.media--fit .media__inner>img{object-fit:contain;background:var(--ink-2)}
.blk--duo.is-flat .media:nth-child(2),.blk--trio.is-flat .media:nth-child(2){margin-top:0}
.blk--offset .media--fit{max-width:620px;justify-self:end;width:100%}

/* ---------- pills ---------- */
.blk--pills{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,20px);justify-content:center;padding:clamp(30px,5vw,70px) 0}
.pill{font-family:var(--pf,var(--display));display:inline-flex;align-items:center;gap:.4em;padding:.35em .9em .4em;border-radius:999px;background:var(--accent);color:#fff;
  font-weight:800;font-size:clamp(28px,5vw,84px);letter-spacing:-.03em;text-transform:uppercase;font-variation-settings:"wdth" 80;
  transition:rotate .6s cubic-bezier(.34,1.56,.64,1),scale .6s cubic-bezier(.34,1.56,.64,1);cursor:default}
.pill i{font-style:normal;font-size:.5em}
.pill:nth-child(2){background:var(--bone);color:var(--ink)}
.pill:nth-child(3){background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px currentColor}
.pill:hover{rotate:calc((var(--d) - 1) * -6deg);scale:1.06}

/* ---------- video ---------- */
.blk--video{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center;padding:clamp(40px,7vw,110px) 0}
.vid{position:relative;aspect-ratio:var(--r);border-radius:6px;overflow:hidden;margin:0;background:var(--ink-2)}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__txt .blk__title{margin:18px 0 26px}

/* ---------- themed (light) pages ---------- */
.is-themed .grain{opacity:.05;mix-blend-mode:multiply}
.is-themed .pj-statement .word{opacity:.12}
.is-themed .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* generated cover for Uncle Zein (used only if image missing) */
.cover--zein{background:#fef7f0;color:#dc1c4f}
.cover--zein span{font-weight:900;font-size:clamp(70px,8vw,130px);line-height:.85;letter-spacing:-.03em}
.cover--zein small{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#5b2614;margin-top:14px}

@media (max-width:900px){
  .blk--video{grid-template-columns:1fr}
  .blk--offset .media--fit{max-width:none}
}

/* =========================================================
   RICH CASE STUDY COMPONENTS (Giant Fitness)
   ========================================================= */
@font-face{font-family:"Qatar2022";src:url(../fonts/Qatar2022Arabic-Bold.otf) format("opentype");font-weight:700;font-display:swap}
.gx-ar{font-family:"Qatar2022",var(--ar);font-weight:700;color:var(--accent);font-size:clamp(26px,2.6vw,42px);line-height:1.35;margin-top:10px}

/* stats */
.gx-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:clamp(30px,5vw,70px) 0}
.gx-stat{padding:clamp(26px,3vw,46px) clamp(14px,2vw,30px);border-right:1px solid var(--line)}
.gx-stat:last-child{border-right:0}
.gx-stat__n{display:block;font-weight:900;font-size:clamp(70px,9vw,150px);line-height:.85;letter-spacing:-.05em;font-variation-settings:"wdth" 70;color:var(--accent);font-variant-numeric:tabular-nums}
.gx-stat p{margin-top:12px;font-size:clamp(14px,1.2vw,18px);color:var(--soft);max-width:18ch;line-height:1.4}

/* rules */
.gx-rules{padding:clamp(70px,9vw,140px) 0}
.gx-rules .blk__title{margin:18px 0 clamp(36px,5vw,70px)}
.gx-rules__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.gx-rule{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3vw,42px);overflow:hidden}
.gx-rule::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.gx-rule__no{display:block;font-weight:900;font-size:clamp(64px,7vw,110px);line-height:.8;letter-spacing:-.05em;font-variation-settings:"wdth" 70;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.gx-rule h4{font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;margin:22px 0 12px;font-variation-settings:"wdth" 88}
.gx-rule p{font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:var(--soft)}

/* anatomy */
.gx-anat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center;padding:clamp(60px,8vw,120px) 0}
.gx-anat__img{position:relative}
.gx-anat__img img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.gx-pin{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:0 0 0 7px rgba(224,0,16,.28)}
.gx-anat .blk__title{margin:16px 0 30px}
.gx-anat__list{list-style:none;display:flex;flex-direction:column;gap:22px}
.gx-anat__list li{display:grid;grid-template-columns:40px 1fr;gap:16px}
.gx-anat__list li>span{width:32px;height:32px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:14px}
.gx-anat__list h4{font-weight:700;font-size:20px;margin-bottom:4px}
.gx-anat__list p{font-size:15.5px;line-height:1.6;color:var(--soft)}

/* before / after */
.gx-bas{padding:clamp(60px,8vw,120px) 0}
.gx-bas .blk__title{margin:16px 0 18px}
.gx-bas__lead{max-width:46ch}
.gx-bas__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px);margin-top:clamp(36px,5vw,70px)}
.gx-ba{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;--p:50%;user-select:none;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.gx-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gx-ba__raw{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.gx-ba__line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.gx-ba__line i{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-style:normal;font-size:20px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.gx-ba__lbl{position:absolute;top:16px;padding:6px 12px;border-radius:99px;font-size:10.5px;background:rgba(0,0,0,.6);color:#fff;pointer-events:none}
.gx-ba__lbl.l{left:16px}.gx-ba__lbl.r{right:16px;background:var(--accent)}
.gx-ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.gx-ba-wrap h4{font-weight:800;font-size:clamp(20px,1.8vw,26px);margin:22px 0 8px;letter-spacing:-.02em}
.gx-ba-wrap p{font-size:16px;line-height:1.65;color:var(--soft);max-width:44ch}

/* chapter band */
.gx-chapter{margin:clamp(40px,6vw,90px) calc(var(--pad) * -1);padding:clamp(70px,9vw,140px) var(--pad);background:var(--accent);color:#fff}
.gx-chapter__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gx-chapter__head h3{font-weight:900;text-transform:uppercase;font-size:clamp(64px,12vw,200px);line-height:.85;letter-spacing:-.05em;font-variation-settings:"wdth" 70}
.gx-chapter .gx-ar{color:#fff;opacity:.9;font-size:clamp(34px,4vw,64px)}
.gx-chapter__lead{font-size:clamp(17px,1.5vw,22px);max-width:52ch;margin-top:22px;line-height:1.6}
.gx-chapter__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,5vw,70px);margin-top:clamp(36px,5vw,60px);border-top:1px solid rgba(255,255,255,.4)}
.gx-chapter__list li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.4);font-weight:700;font-size:clamp(17px,1.6vw,24px)}
.gx-chapter__list .mono{opacity:.75;font-size:12px}

/* campaign */
.gx-camp{padding:clamp(70px,9vw,140px) 0 clamp(30px,4vw,60px);border-bottom:1px solid var(--line)}
.gx-camp__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,46px);align-items:end}
.gx-camp__no{font-weight:900;font-size:clamp(110px,15vw,240px);line-height:.72;letter-spacing:-.06em;font-variation-settings:"wdth" 65;color:var(--accent)}
.gx-camp__tag{color:var(--muted)}
.gx-camp__title{font-weight:800;font-size:clamp(36px,4.6vw,76px);line-height:.98;letter-spacing:-.035em;font-variation-settings:"wdth" 82;margin-top:12px}
.gx-camp__body{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(28px,4vw,50px);align-items:start}
.gx-camp__idea{font-size:clamp(17px,1.5vw,22px);line-height:1.6;color:var(--soft)}
.gx-why{border-left:2px solid var(--accent);padding:4px 0 4px 22px}
.gx-why .mono{color:var(--accent);margin-bottom:10px}
.gx-why p:last-child{font-size:16px;line-height:1.65;color:var(--soft)}
.gx-stage{position:relative;margin-top:clamp(40px,6vw,80px);border-radius:30px;padding:clamp(40px,6vw,90px) clamp(20px,4vw,60px);display:flex;justify-content:center;align-items:center;gap:clamp(20px,4vw,60px);flex-wrap:wrap;
  background:radial-gradient(70% 70% at 50% 100%,rgba(224,0,16,.32),rgba(224,0,16,0) 70%),linear-gradient(180deg,#151515,#0c0c0c);border:1px solid #1f1f1f;overflow:hidden}
.gx-stage.is-red{background:radial-gradient(80% 80% at 50% 110%,rgba(255,60,70,.55),rgba(224,0,16,0) 70%),linear-gradient(180deg,#3a0408,#140203);border-color:#4a0a0f}

/* instagram frame */
.gx-ig{width:min(var(--w),100%);background:#000;border:1px solid #262626;border-radius:16px;overflow:hidden;margin:0;box-shadow:0 40px 90px rgba(0,0,0,.6);direction:ltr}
.gx-ig__head{display:flex;align-items:center;gap:10px;padding:12px 14px;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:14px;color:#fff}
.gx-ig__av{width:34px;height:34px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#f9a20b,#e00010,#c013a5);flex:none}
.gx-ig__av i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #000;background:#fff center/80% no-repeat}
.gx-ig__dots{margin-left:auto;letter-spacing:1px}
.gx-ig>img{width:100%;display:block}
.gx-ig__act{display:flex;align-items:center;gap:14px;padding:12px 14px 6px}
.gx-ig__act svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;flex:none}
.gx-ig__act .sv{margin-left:auto}
.gx-ig figcaption{padding:2px 14px 16px;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:13.5px;line-height:1.6;color:#eee;text-align:right}

/* phone */
.gx-phone{width:min(var(--w),70vw);margin:0;padding:11px;border-radius:46px;background:#161616;box-shadow:0 0 0 2px #2b2b2b,0 50px 100px rgba(0,0,0,.65);position:relative}
.gx-phone::after{content:"";position:absolute;top:22px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:20px;background:#000;z-index:3}
.gx-phone__scr{position:relative;border-radius:36px;overflow:hidden}
.gx-phone__scr img{display:block;width:100%}
.gx-phone__bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:2}
.gx-phone__bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.gx-phone__bars i:first-child{background:#fff}

/* carousel */
.gx-car__view{position:relative;overflow:hidden;aspect-ratio:3/4}
.gx-car__track{display:flex;height:100%}
.gx-car__track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.gx-car__btn{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#000;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.gx-car__btn.prev{left:10px}.gx-car__btn.next{right:10px}
.gx-car__count{position:absolute;top:12px;right:12px;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px}
.gx-car__dots{display:flex;gap:5px;flex:1;justify-content:center}
.gx-car__dots i{width:6px;height:6px;border-radius:50%;background:#555;transition:background .3s}
.gx-car__dots i.on{background:#3897f0}

@media (max-width:900px){
  .gx-stats{grid-template-columns:1fr 1fr}
  .gx-stat:nth-child(2){border-right:0}
  .gx-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gx-rules__list,.gx-anat,.gx-bas__row,.gx-camp__body,.gx-chapter__list{grid-template-columns:1fr}
  .gx-camp__head{grid-template-columns:1fr}
  .gx-stage{border-radius:20px}
  .gx-chapter{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
}