/* ===========================================================================
   SPIRIT MEDIA PRODUCTION
   Editorial cinematic design system — v2
   Rules: no cards, no boxes, no decorative gradients, no rounded corners.
   Structure comes from hairlines, scale and space. Colour is black, off-white,
   gold and deep red only. Layout is written in logical properties so the
   Arabic RTL build mirrors without a second stylesheet.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens --*/
:root{
  --ink:        #0B0B0C;
  --ink-2:      #100F11;
  --ink-3:      #17161A;
  --paper:      #F4F1EA;
  /* Spirit Media palette — sampled from the brand key visuals and the logo.
     --red is the brand red: strong enough for fills, underlines and display
     type, but only 3.2:1 on the ink ground, so small interactive text uses
     --red-tx (4.9:1) instead. Gold stays the high-legibility accent. */
  --gold:       #E3A24A;
  --red:        #C4101D;
  --red-tx:     #E2454F;
  --red-deep:   #9B0A11;

  --t-100:      rgba(244,241,234,1);
  --t-70:       rgba(244,241,234,.70);
  --t-46:       rgba(244,241,234,.46);
  --t-28:       rgba(244,241,234,.28);
  --hair:       rgba(244,241,234,.14);
  --hair-soft:  rgba(244,241,234,.08);

  --ff-d:       'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-u:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-ar-d:    'Cairo', 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --ff-ar-u:    'Cairo', 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;

  --display:    var(--ff-d);
  --ui:         var(--ff-u);

  --pad:        clamp(20px, 5vw, 80px);
  --max:        1560px;
  --gap:        clamp(28px, 5vw, 90px);
  --sec:        clamp(84px, 13vh, 190px);

  --e:          cubic-bezier(.19,1,.22,1);
  --e2:         cubic-bezier(.4,0,.2,1);
  --nav:        76px;
}

html[lang="ar"]{ --display: var(--ff-ar-d); --ui: var(--ff-ar-u); }

/* ----------------------------------------------------------------- reset --*/
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav); }
body{
  margin:0; background:var(--ink); color:var(--t-100);
  font-family:var(--ui); font-size:16px; font-weight:400; line-height:1.7;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important; }
}

/* -------------------------------------------------------------- language --*/
html[lang="en"] [data-l="ar"]{ display:none !important; }
html[lang="ar"] [data-l="en"]{ display:none !important; }

/* --------------------------------------------------------------- shell ----*/
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--top{ border-block-start:1px solid var(--hair-soft); }
.bleed{ width:100%; }

/* ------------------------------------------------------------ typography --*/
.d1{ font-family:var(--display); font-size:clamp(2.7rem,9.6vw,8.6rem); line-height:.94;
     letter-spacing:-.035em; font-weight:600; }
.d2{ font-family:var(--display); font-size:clamp(2.1rem,5.6vw,4.6rem); line-height:1.0;
     letter-spacing:-.03em; font-weight:600; }
.d3{ font-family:var(--display); font-size:clamp(1.6rem,3.1vw,2.6rem); line-height:1.12;
     letter-spacing:-.022em; font-weight:600; }
.d4{ font-family:var(--display); font-size:clamp(1.18rem,1.8vw,1.6rem); line-height:1.25;
     letter-spacing:-.014em; font-weight:600; }

html[lang="ar"] .d1{ font-size:clamp(2.2rem,7.4vw,6.6rem); line-height:1.24; letter-spacing:-.01em; font-weight:700; }
html[lang="ar"] .d2{ font-size:clamp(1.8rem,4.6vw,3.9rem); line-height:1.3;  letter-spacing:-.01em; font-weight:700; }
html[lang="ar"] .d3{ font-size:clamp(1.42rem,2.7vw,2.3rem);line-height:1.42; letter-spacing:-.005em; font-weight:700; }
html[lang="ar"] .d4{ font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.5; letter-spacing:0; font-weight:700; }

.lab{
  font-family:var(--ff-u); font-size:.69rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--t-46);
  display:block;
}
html[lang="ar"] .lab{ font-family:var(--ff-ar-u); font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:none; }
.lab--gold{ color:var(--gold); }

.body{ font-size:clamp(1rem,1.05vw,1.09rem); line-height:1.78; color:var(--t-70); max-width:64ch; }
.body + .body{ margin-top:1.25em; }
.body--lg{ font-size:clamp(1.08rem,1.35vw,1.3rem); line-height:1.68; color:var(--t-100); }
html[lang="ar"] .body{ font-size:clamp(.98rem,1.05vw,1.08rem); line-height:2.0; max-width:56ch; font-weight:400; }
html[lang="ar"] .body--lg{ font-size:clamp(1.08rem,1.32vw,1.26rem); line-height:1.9; font-weight:400; }

.ital{ font-style:italic; }
html[lang="ar"] .ital{ font-style:normal; }
.gold{ color:var(--gold); }

/* hairline that introduces a section */
.tag{ display:flex; align-items:baseline; gap:1.1em; margin-bottom:clamp(28px,4vw,56px); }
.tag::after{ content:""; flex:1; height:1px; background:var(--hair); }

/* ------------------------------------------------------------- controls ---*/
.cta{
  display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--ff-u); font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--t-100);
  padding-block:1.1em; position:relative;
}
html[lang="ar"] .cta{ font-family:var(--ff-ar-u); font-size:.92rem; letter-spacing:.02em; text-transform:none; }
.cta::before{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:100%; height:1px; background:var(--t-28);
}
.cta::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:100%; height:1px; background:var(--paper);
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform .75s var(--e);
}
.cta:hover::after{ transform:scaleX(1); }
.cta .ar{ width:1.05em; height:1.05em; stroke:currentColor; stroke-width:1.2; fill:none;
          transition:transform .6s var(--e); }
html[dir="rtl"] .cta .ar{ transform:scaleX(-1); }
.cta:hover .ar{ transform:translateX(5px); }
html[dir="rtl"] .cta:hover .ar{ transform:scaleX(-1) translateX(5px); }

.cta--solid{
  background:var(--paper); color:var(--ink); padding:1.15em 2.1em;
  transition:background .5s var(--e2), color .5s var(--e2);
}
.cta--solid::before,.cta--solid::after{ display:none; }
.cta--solid:hover{ background:var(--red); color:var(--paper); }

.cta--gold{ color:var(--gold); }
.cta--gold::before{ background:rgba(227,162,74,.42); }
.cta--gold::after{ background:var(--gold); }

.ctas{ display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,46px); align-items:center; }

/* ------------------------------------------------------------- nav --------*/
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:200; height:var(--nav);
  display:flex; align-items:center;
  transition:background .6s var(--e2), border-color .6s var(--e2), backdrop-filter .6s;
  border-block-end:1px solid transparent;
}
.nav.stuck{
  background:rgba(11,11,12,.86); backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); border-block-end-color:var(--hair-soft);
}
.nav-in{ display:flex; align-items:center; width:100%; gap:clamp(16px,3vw,48px); }

/* Temporary wordmark. The element carries data-logo so the replacement point
   is findable; swap its contents for the supplied logo file. */
.mark{ display:block; flex:none; margin-inline-end:auto; line-height:1; }

/* real brand artwork ------------------------------------------------------- */
/* The star is the supplied artwork, unmodified. The name is set as live text
   rather than the traced lettering: in the original the "Media Production" line
   is hollow outline type, which at nav and footer size lands under 8px tall and
   simply cannot be read. Real text stays crisp at any size, and is selectable
   and readable by search engines. */
.mark--nav,.mark--ftr{ display:flex; align-items:center; gap:.72em;
                       transition:opacity .4s var(--e2); }
.mark--nav:hover,.mark--ftr:hover{ opacity:.78; }
.mark--nav img{ height:clamp(34px,3.6vw,44px); width:auto; flex:none; }
.mark--ftr{ flex-direction:column; align-items:flex-start; gap:.9em; }
.mark--ftr img{ width:clamp(64px,6.4vw,82px); height:auto; }

.mark-tx{ display:block; line-height:1; }
.mark-tx b{
  display:block; font-family:var(--ff-d); font-weight:700;
  font-size:1.02rem; letter-spacing:.30em; text-transform:uppercase;
  color:var(--paper); padding-inline-end:.30em;
}
.mark-tx i{
  display:block; font-family:var(--ff-u); font-style:normal;
  font-size:.50rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--t-70); margin-top:.62em; padding-inline-start:.16em;
}
.mark--ftr .mark-tx b{ font-size:1.22rem; }
.mark--ftr .mark-tx i{ font-size:.56rem; color:var(--t-70); }
@media (max-width:420px){
  .mark-tx b{ font-size:.92rem; letter-spacing:.24em; }
  .mark-tx i{ font-size:.46rem; letter-spacing:.20em; }
}
.mark b{
  display:block; font-family:var(--ff-d); font-weight:600;
  font-size:1.24rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--paper); padding-inline-end:.30em;
}
.mark i{
  display:block; font-family:var(--ff-u); font-style:normal;
  font-size:.53rem; font-weight:500; letter-spacing:.30em; text-transform:uppercase;
  color:var(--t-46); margin-top:.55em; padding-inline-start:.2em;
}
.mark:not(.mark--nav):not(.mark--ftr) img{ height:42px; width:auto; }

.menu{ display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); }
.menu a{
  font-family:var(--ff-u); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--t-46);
  padding-block:.6em; position:relative; white-space:nowrap;
  transition:color .45s var(--e2);
}
html[lang="ar"] .menu a{ font-family:var(--ff-ar-u); font-size:.94rem; letter-spacing:0; text-transform:none; }
.menu a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .55s var(--e);
}
.menu a:hover,.menu a[aria-current]{ color:var(--paper); }
.menu a:hover::after,.menu a[aria-current]::after{ transform:scaleX(1); }

.lang{
  font-family:var(--ff-u); font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t-46); padding:.7em 0; flex:none;
  transition:color .45s var(--e2);
}
.lang:hover{ color:var(--red-tx); }

.burger{ display:none; width:34px; height:34px; flex:none; position:relative; }
.burger span{
  position:absolute; inset-inline:4px; height:1px; background:var(--paper);
  transition:transform .5s var(--e), opacity .3s;
}
.burger span:nth-child(1){ inset-block-start:12px; }
.burger span:nth-child(2){ inset-block-start:21px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:block; }
  .menu{
    position:fixed; inset-block-start:var(--nav); inset-inline:0; inset-block-end:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:0; padding:0 var(--pad) 12vh;
    background:var(--ink); z-index:190;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .5s var(--e2), transform .5s var(--e), visibility .5s;
  }
  .menu.open{ opacity:1; visibility:visible; transform:none; }
  .menu a{
    font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem); letter-spacing:-.01em;
    text-transform:none; color:var(--t-70); padding-block:.34em; width:100%;
    border-block-end:1px solid var(--hair-soft);
  }
  html[lang="ar"] .menu a{ font-family:var(--ff-ar-d); font-weight:700; font-size:clamp(1.8rem,8vw,2.8rem); }
  .menu a::after{ display:none; }
}

/* ------------------------------------------------------------- hero ------*/
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; isolation:isolate;
  padding-block:calc(var(--nav) + 40px) clamp(78px,13vh,140px);
}
.hero-img{ position:absolute; inset:0; z-index:-3; background:var(--ink); overflow:hidden; }
/* When a real frame is supplied it simply appears here and takes over. */
.hero-img img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  animation:kb 36s var(--e2) infinite alternate;
}
@keyframes kb{ from{ transform:scale(1.005); } to{ transform:scale(1.08); } }
/* the clip already contains a push-in, so drop the CSS move once it is playing */
.hero-img.playing img{ animation:none; }

/* background clips: sit over the still, fade in only once they can play */
.hero-img video,.reel-frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--e2); pointer-events:none; z-index:0;
}
/* only the clip currently on screen is visible; the others wait at zero */
.hero-img video.on,.reel-frame video.on{ opacity:1; }
.reel-frame.live video{ display:none; }
.hero-img:not(:has(img)):not(:has(video))::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 8% 108%, rgba(227,162,74,.13), transparent 58%),
    radial-gradient(90% 70% at 96% -8%, rgba(155,10,17,.14), transparent 62%);
}
.hero-img:has(img)::after,
.hero-img:has(video)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.16) 32%,
                                     rgba(11,11,12,.58) 70%, rgba(11,11,12,.96) 100%);
}
/* thin aspect marks, like a framing chart */
.hero::before,.hero::after{
  content:""; position:absolute; inset-inline:var(--pad); height:1px;
  background:var(--hair-soft); z-index:1;
}
.hero::before{ inset-block-start:calc(var(--nav) + 10px); }
.hero::after{ inset-block-end:calc(var(--sec) * .30); }
@media (max-width:700px){ .hero::before,.hero::after{ display:none; } }
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-meta{
  position:absolute; inset-block-start:calc(var(--nav) + clamp(18px,4vh,46px));
  inset-inline:var(--pad); display:flex; justify-content:space-between; gap:20px; z-index:2;
}
.hero-meta .lab{ color:var(--t-46); }
@media (max-width:700px){ .hero-meta{ display:none; } }

.hero-in{ position:relative; z-index:2; }
.hero h1{ max-width:16ch; }
.hero h1 .ln{ display:block; }
.hero h1 .ln:nth-child(2){ padding-inline-start:.09em; }
.hero-sub{
  margin-top:clamp(20px,2.6vh,32px); font-family:var(--ff-u); font-weight:400;
  font-size:clamp(.94rem,1.35vw,1.18rem); line-height:1.4; color:var(--gold);
  letter-spacing:.20em; text-transform:uppercase;
}
html[lang="ar"] .hero-sub{ font-family:var(--ff-ar-u); font-size:clamp(1.05rem,1.6vw,1.35rem);
  line-height:1.7; letter-spacing:.02em; text-transform:none; font-weight:500; }
.hero .ctas{ margin-top:clamp(34px,5vh,60px); }

.cue{
  position:absolute; inset-block-end:clamp(26px,4vh,44px); inset-inline-start:var(--pad);
  z-index:3; display:flex; align-items:center; gap:14px; color:var(--t-46);
  transition:color .5s var(--e2);
}
.cue:hover{ color:var(--red-tx); }
.cue .line{ width:1px; height:56px; background:currentColor; position:relative; overflow:hidden; }
.cue .line::after{
  content:""; position:absolute; inset-inline:0; height:18px; background:var(--paper);
  animation:drop 2.6s var(--e2) infinite;
}
@keyframes drop{ 0%{ top:-18px; } 60%,100%{ top:56px; } }

/* ---------------------------------------------------- film-leader plate --*/
/* Used wherever a real still has not been supplied. Deliberately a card, not
   a fake photograph: leader numeral, hairline frame, house mark. */
.plate{
  position:absolute; inset:0; overflow:hidden;
  display:grid; place-content:center; justify-items:center; gap:1.4em;
  background:var(--ink-2);
}
.plate::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(72% 62% at 50% 40%, rgba(227,162,74,.10), transparent 70%),
    radial-gradient(90% 80% at 84% 108%, rgba(155,10,17,.10), transparent 66%);
}
.plate::after{
  content:""; position:absolute; inset:clamp(10px,1.5vw,20px);
  border:1px solid rgba(244,241,234,.09); pointer-events:none;
}
.plate .grain{ z-index:0; opacity:.045; }
.plate-n{ font-weight:600;
  position:relative; font-family:var(--ff-d); line-height:1;
  font-size:clamp(3.2rem,8vw,7rem); color:rgba(244,241,234,.20);
  letter-spacing:-.03em;
}
.plate-ring{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  translate:-50% -50%; width:clamp(120px,15vw,210px); aspect-ratio:1;
  border-radius:50%; border:1px solid rgba(244,241,234,.07); pointer-events:none;
}
html[dir="rtl"] .plate-ring{ translate:50% -50%; }
.plate-ring::before,.plate-ring::after{
  content:""; position:absolute; background:rgba(244,241,234,.07);
}
.plate-ring::before{ inset-block:-14%; inset-inline-start:50%; width:1px; }
.plate-ring::after{ inset-inline:-14%; inset-block-start:50%; height:1px; }
.plate-cat{ position:relative; }
.plate-mark{
  position:absolute; inset-block-end:clamp(14px,2vw,24px); inset-inline-start:clamp(16px,2.2vw,28px);
  font-family:var(--ff-u); font-size:.56rem; font-weight:500; letter-spacing:.30em;
  text-transform:uppercase; color:var(--t-28);
}

/* ------------------------------------------------------ full-bleed media --*/
.reel{ position:relative; }
.reel-frame{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  cursor:pointer; isolation:isolate;
  background:
    radial-gradient(60% 90% at 50% 50%, rgba(227,162,74,.11), transparent 68%),
    radial-gradient(120% 80% at 10% 110%, rgba(155,10,17,.13), transparent 60%),
    var(--ink-2);
}
.reel-frame::before{
  content:""; position:absolute; inset:clamp(12px,1.6vw,26px);
  border:1px solid rgba(244,241,234,.08); z-index:1; pointer-events:none;
}
.reel-frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--e), filter 1s var(--e2); }
/* no scrim while the clip is doing the work; only dim for a still fallback */
.reel-frame:has(img):not(:has(video))::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,11,12,.55), rgba(11,11,12,.16) 42%, rgba(11,11,12,.72));
  transition:background .8s var(--e2);
}
.reel-frame:hover img{ transform:scale(1.035); }

.play{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%); z-index:3;
  width:clamp(72px,8.5vw,116px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(244,241,234,.42);
  display:grid; place-items:center; color:var(--paper);
  transition:border-color .6s var(--e2), background .6s var(--e2), transform .8s var(--e);
}
html[dir="rtl"] .play{ transform:translate(50%,-50%); }
.play::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(244,241,234,.28); animation:ring 3.4s var(--e2) infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.9; } 75%,100%{ transform:scale(1.42); opacity:0; } }
.reel-frame:hover .play{ border-color:var(--paper); background:rgba(244,241,234,.08); }
.play svg{ width:22%; height:22%; fill:currentColor; margin-inline-start:14%; }
html[dir="rtl"] .play svg{ transform:scaleX(-1); margin-inline-start:0; margin-inline-end:14%; }

.reel-over{
  position:absolute; inset-block-end:0; inset-inline:0; z-index:2;
  padding:clamp(20px,4vw,54px) var(--pad);
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  pointer-events:none;
}
.reel-frame.live{ cursor:default; }
.reel-frame.live .play,.reel-frame.live .reel-over,.reel-frame.live .plate,
.reel-frame.live::after,.reel-frame.live::before{ display:none; }
.reel-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4;
                    background:var(--ink); color-scheme:dark; }
.reel-note{ margin-top:1.4em; font-size:.8rem; color:var(--t-46); }
.reel-note a{ color:var(--gold); border-block-end:1px solid rgba(227,162,74,.42); }

/* ------------------------------------------------------------ editorial --*/
.split{
  display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:start;
}
.split--even{ grid-template-columns:1fr 1fr; align-items:center; }
.split--wide{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
@media (max-width:940px){
  .split,.split--even,.split--wide{ grid-template-columns:1fr; }
}
.sticky{ position:sticky; top:calc(var(--nav) + 40px); }
@media (max-width:940px){ .sticky{ position:static; } }

.figure{ position:relative; overflow:hidden; background:var(--ink-2); }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure--tall{ aspect-ratio:4/5; }
.figure--wide{ aspect-ratio:16/9; }
.fig-cap{
  margin-top:1.1em; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t-46);
}
html[lang="ar"] .fig-cap{ letter-spacing:0; text-transform:none; font-size:.85rem; }

.cols{ column-count:2; column-gap:var(--gap); }
.cols .body{ max-width:none; }
.cols .body + .body{ margin-top:1.25em; }
@media (max-width:760px){ .cols{ column-count:1; } }

/* statements — big editorial type instead of boxes */
.stmt{ padding-block:clamp(40px,6vw,84px); border-block-start:1px solid var(--hair-soft); }
.stmt:last-child{ border-block-end:1px solid var(--hair-soft); }
.stmt-grid{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:var(--gap); align-items:start; }
@media (max-width:860px){ .stmt-grid{ grid-template-columns:1fr; gap:22px; } }

.values{ display:grid; }
.value{
  display:grid; grid-template-columns:auto minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(18px,3vw,48px); align-items:baseline;
  padding-block:clamp(22px,3vw,34px); border-block-start:1px solid var(--hair-soft);
}
.value:last-child{ border-block-end:1px solid var(--hair-soft); }
.value .n{ font-family:var(--ff-u); font-size:.7rem; letter-spacing:.18em; color:var(--red-tx); }
@media (max-width:760px){
  .value{ grid-template-columns:auto 1fr; }
  .value .body{ grid-column:2; }
}

.quote{ max-width:24ch; }
.quote q{ quotes:none; }

/* ---------------------------------------------------------- work rows ----*/
.workbar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-block-end:clamp(20px,3vw,34px); border-block-end:1px solid var(--hair);
}
.sorter{ position:relative; }
.sort-t{
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--ff-u); font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t-70); padding:.6em 0;
  transition:color .4s var(--e2);
}
html[lang="ar"] .sort-t{ font-family:var(--ff-ar-u); font-size:.9rem; letter-spacing:0; text-transform:none; }
.sort-t:hover,.sort-t[aria-expanded="true"]{ color:var(--red-tx); }
.sort-t svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.3; fill:none; }
.sort-m{
  position:absolute; inset-block-start:calc(100% + 12px); inset-inline-end:0; z-index:60;
  min-width:230px; background:var(--ink-2); border:1px solid var(--hair);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .35s var(--e2), transform .35s var(--e), visibility .35s;
}
.sort-m.open{ opacity:1; visibility:visible; transform:none; }
.sort-o{
  display:flex; align-items:center; gap:.9em; width:100%; text-align:start;
  padding:1.05em 1.3em; font-size:.9rem; color:var(--t-46);
  border-block-end:1px solid var(--hair-soft); transition:color .35s var(--e2), background .35s var(--e2);
}
.sort-o:last-child{ border-block-end:0; }
.sort-o:hover{ color:var(--paper); background:rgba(244,241,234,.04); }
.sort-o[aria-checked="true"]{ color:var(--red-tx); }
.sort-o .tk{ margin-inline-start:auto; width:14px; height:14px; stroke:currentColor;
             stroke-width:1.6; fill:none; opacity:0; }
.sort-o[aria-checked="true"] .tk{ opacity:1; }

.works{ display:grid; }
.work{
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:var(--gap); align-items:center;
  padding-block:clamp(34px,5vw,72px); border-block-end:1px solid var(--hair-soft);
  position:relative;
}
.work:nth-child(even) .work-fig{ order:2; }
@media (max-width:900px){
  .work{ grid-template-columns:1fr; gap:26px; }
  .work:nth-child(even) .work-fig{ order:0; }
}
.work-fig{ position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--ink-2); display:block; }
.work-fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--e), filter .9s var(--e2); }
.work-fig:has(img)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.1),rgba(11,11,12,.45));
  transition:background .8s var(--e2);
}
.work-fig .plate{ transition:background .7s var(--e2); }
.work:hover .work-fig .plate{ background:var(--ink-3); }
.work:hover .work-fig .plate-n{ color:rgba(244,241,234,.30); }
.work:hover .work-fig img{ transform:scale(1.045); }
.work:hover .work-fig::after{ background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.25)); }
.work-yr{
  position:absolute; inset-block-end:clamp(10px,1.6vw,20px); inset-inline-end:clamp(16px,2.2vw,28px);
  z-index:3; font-family:var(--ff-u); font-size:.62rem; font-weight:500;
  letter-spacing:.26em; color:var(--t-46); pointer-events:none;
}
/* Reel preview — a vertical (9:16) source frame. The figure column narrows so
   the card sits at phone proportions beside the text instead of being
   pillarboxed into a wide slot. */
.work--reel{ grid-template-columns:minmax(0,.46fr) minmax(0,1fr); align-items:center; }
.work--reel .work-fig{
  aspect-ratio:9/16; width:100%; max-width:328px; margin-inline:auto;
  border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.42);
}
.work--reel .work-fig::before{
  content:""; position:absolute; inset:0; z-index:4; border-radius:inherit;
  border:1px solid rgba(244,241,234,.14); pointer-events:none;
}
.work--reel .work-fig:has(img)::after{
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(11,11,12,.34) 0%,rgba(11,11,12,0) 34%,rgba(11,11,12,0) 58%,rgba(11,11,12,.52) 100%);
}
.work--reel:hover .work-fig:has(img)::after{
  background:linear-gradient(180deg,rgba(11,11,12,.22) 0%,rgba(11,11,12,0) 38%,rgba(11,11,12,0) 62%,rgba(11,11,12,.38) 100%);
}
.reel-play{
  position:absolute; inset-block-start:50%; inset-inline-start:50%; z-index:5;
  transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%;
  background:rgba(11,11,12,.42); border:1px solid rgba(244,241,234,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:background .5s var(--e2), border-color .5s var(--e2), transform .5s var(--e2);
}
html[dir="rtl"] .reel-play{ transform:translate(50%,-50%); }
.reel-play::after{
  content:""; position:absolute; inset-block-start:50%; inset-inline-start:calc(50% + 2px);
  transform:translate(-50%,-50%);
  border-block:9px solid transparent; border-inline-start:14px solid var(--paper);
  border-inline-end:0;
}
html[dir="rtl"] .reel-play::after{ transform:translate(50%,-50%) scaleX(-1); }
.work--reel:hover .reel-play{
  background:rgba(196,16,29,.82); border-color:rgba(244,241,234,.78);
  transform:translate(-50%,-50%) scale(1.07);
}
html[dir="rtl"] .work--reel:hover .reel-play{ transform:translate(50%,-50%) scale(1.07); }
.work--reel:hover .work-fig img{ transform:scale(1.03); }
.work--reel .work-yr{ inset-block-end:clamp(12px,1.6vw,18px); inset-inline-end:clamp(14px,2vw,20px); }
@media (max-width:900px){
  .work--reel{ grid-template-columns:1fr; }
  .work--reel .work-fig{ max-width:276px; margin-inline:0; }
}
@media (prefers-reduced-motion:reduce){
  .reel-play{ transition:none; }
  .work--reel:hover .reel-play{ transform:translate(-50%,-50%); }
}

.work-cat{ margin-bottom:1.1em; }
.work h3{ margin-bottom:.5em; }
.work .body{ margin-bottom:1.6em; }
.work-role{
  display:flex; gap:.7em; flex-wrap:wrap; margin-bottom:1.8em;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t-46);
}
html[lang="ar"] .work-role{ letter-spacing:0; text-transform:none; font-size:.86rem; }
.work-role span:not(:last-child)::after{ content:" ·"; color:var(--gold); }
.work-links{ display:flex; gap:clamp(18px,2.5vw,34px); flex-wrap:wrap; }

.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-top:1.6em; }
.gal img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

/* ------------------------------------------------------- services index --*/
.index-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.42fr); gap:var(--gap); align-items:start; }
@media (max-width:1000px){ .index-wrap{ grid-template-columns:1fr; } }

.index{ border-block-start:1px solid var(--hair-soft); }
.idx{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(16px,3vw,40px); padding-block:clamp(16px,2.1vw,26px);
  border-block-end:1px solid var(--hair-soft); position:relative; width:100%; text-align:start;
  transition:padding-inline-start .6s var(--e);
}
.idx .n{ font-family:var(--ff-u); font-size:.68rem; letter-spacing:.16em; color:var(--t-28);
         transition:color .5s var(--e2); }
.idx .t{
  display:block; font-weight:600;
  font-family:var(--display); font-size:clamp(1.14rem,2.05vw,1.85rem); line-height:1.18;
  letter-spacing:-.01em; color:var(--t-70); transition:color .5s var(--e2);
}
html[lang="ar"] .idx .t{ font-family:var(--ff-ar-d); font-weight:700; line-height:1.5;
                         font-size:clamp(1.25rem,2.3vw,2rem); }
.idx .ar{ width:15px; height:15px; stroke:currentColor; stroke-width:1.2; fill:none;
          color:var(--t-28); opacity:0; transform:translateX(-8px);
          transition:opacity .5s var(--e2), transform .6s var(--e), color .5s var(--e2); }
html[dir="rtl"] .idx .ar{ transform:scaleX(-1) translateX(-8px); }
.idx:hover{ padding-inline-start:clamp(10px,1.6vw,22px); }
.idx:hover .t{ color:var(--paper); }
.idx:hover .n{ color:var(--red-tx); }
.idx:hover .ar{ opacity:1; transform:none; color:var(--red-tx); }
html[dir="rtl"] .idx:hover .ar{ transform:scaleX(-1); }

.idx-sub{
  display:block; margin-top:0; font-size:.82rem; line-height:1.6; color:var(--t-46);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .6s var(--e), opacity .5s var(--e2), margin-top .6s var(--e);
}
.idx:hover .idx-sub,.idx:focus-within .idx-sub{ max-height:7em; opacity:1; margin-top:.55em; }
html[lang="ar"] .idx-sub{ font-size:.92rem; line-height:1.9; }

.idx-view{
  position:sticky; top:calc(var(--nav) + 56px); aspect-ratio:3/4; overflow:hidden;
  background:var(--ink-2); display:block;
}
.idx-art{ position:absolute; inset:0; display:block; }
.idx-art img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .45s var(--e2), transform 1.2s var(--e);
}
.idx-view::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.18) 0%,rgba(11,11,12,.05) 34%,rgba(11,11,12,.72) 78%,rgba(11,11,12,.93) 100%);
}
.idx-view::after{
  content:""; position:absolute; inset:clamp(12px,1.4vw,20px); z-index:3;
  border:1px solid rgba(244,241,234,.10); pointer-events:none;
}
.idx-cap{
  position:absolute; z-index:4; inset-inline:clamp(26px,3vw,40px);
  inset-block-end:clamp(26px,3vw,40px);
  display:grid; gap:.5em; justify-items:start; text-align:start;
}
.idx-n{ font-weight:600;
  font-family:var(--ff-d); font-size:clamp(1.5rem,2.4vw,2.2rem);
  line-height:1; color:var(--gold); letter-spacing:.02em;
  transition:opacity .45s var(--e2);
}
.idx-t{
  font-family:var(--display); font-size:clamp(1.14rem,1.75vw,1.55rem);
  line-height:1.25; color:var(--paper); max-width:16ch;
  transition:opacity .45s var(--e2);
}
html[lang="ar"] .idx-t{ font-family:var(--ff-ar-d); font-weight:700; line-height:1.6; }
.idx-view.swap .idx-t,.idx-view.swap .idx-n{ opacity:0; }
.idx-view.swap .idx-art img{ opacity:.35; }
@media (prefers-reduced-motion:reduce){
  .idx-art img{ transition:none; }
}
@media (max-width:1000px){ .idx-view{ display:none; } }

/* Below 1000px the sticky hover panel can't work — no hover, no room for a
   sidebar — so each row carries its own still instead. Same imagery, same
   order, just inline. */
.idx-thumb{ display:none; }
@media (max-width:1000px){
  .idx{ grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,4vw,24px); align-items:center; }
  .idx-thumb{
    grid-area:1 / 1; display:block; width:clamp(66px,20vw,92px); aspect-ratio:3/4;
    overflow:hidden; background:var(--ink-2); position:relative;
  }
  .idx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .idx-thumb::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(11,11,12,0) 45%,rgba(11,11,12,.72) 100%);
  }
  /* the number rides the still, exactly as it does on the desktop panel */
  .idx .n{
    grid-area:1 / 1; z-index:2; align-self:end; justify-self:start;
    padding-block-end:7px; padding-inline-start:9px;
    color:var(--gold); font-size:.7rem; letter-spacing:.12em;
  }
  .idx-body{ grid-area:1 / 2; min-width:0; }
  .idx .ar{ display:none; }
  .idx:hover .n,.idx:focus-visible .n{ color:var(--gold); }
}

/* ------------------------------------------------------------- contact ---*/
.cta-band{ position:relative; overflow:hidden; isolation:isolate; }
.cta-band-img{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(90% 120% at 88% 6%, rgba(155,10,17,.16), transparent 60%),
    radial-gradient(80% 100% at 4% 104%, rgba(227,162,74,.12), transparent 62%),
    var(--ink);
}
.cta-band-img img{ width:100%; height:100%; object-fit:cover; }
.cta-band-img:has(img)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.90),rgba(11,11,12,.62) 45%,rgba(11,11,12,.94));
}

.channels{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-block-start:1px solid var(--hair); }
@media (max-width:1180px){ .channels{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .channels{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .channels{ grid-template-columns:1fr; } }
.ch{
  padding:clamp(22px,3vw,38px) 0; padding-inline-end:24px;
  border-block-end:1px solid var(--hair-soft); position:relative;
  transition:padding-inline-start .6s var(--e);
}
.ch:hover{ padding-inline-start:14px; }
.ch .lab{ margin-bottom:.7em; transition:color .45s var(--e2); }
.ch:hover .lab{ color:var(--red-tx); }
.ch .v{ font-size:.95rem; color:var(--t-70); word-break:break-word; transition:color .45s var(--e2); }
.ch:hover .v{ color:var(--paper); }

.form{ display:grid; gap:clamp(20px,2.6vw,30px); }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,30px); }
@media (max-width:620px){ .frow{ grid-template-columns:1fr; } }
.f{ position:relative; }
.f label{ display:block; margin-bottom:.9em; }
.f input,.f textarea{
  width:100%; background:transparent; border:0; border-block-end:1px solid var(--hair);
  padding:.55em 0 .85em; font-size:1.02rem; color:var(--paper);
  transition:border-color .5s var(--e2);
}
.f textarea{ min-height:132px; resize:vertical; }
.f input::placeholder,.f textarea::placeholder{ color:var(--t-28); }
.f input:focus,.f textarea:focus{ outline:none; border-block-end-color:var(--gold); }

.picks{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.6vw,18px); }
.pick{ position:relative; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick > span{
  display:inline-block; padding:.7em 1.25em; border:1px solid var(--hair);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t-46);
  cursor:pointer; transition:color .4s var(--e2), border-color .4s var(--e2), background .4s var(--e2);
}
.pick > span > span{ color:inherit; }
html[lang="ar"] .pick > span{ letter-spacing:0; text-transform:none; font-size:.92rem; }
.pick input:checked + span{ color:var(--ink); background:var(--paper); border-color:var(--paper); }
.pick > span:hover{ color:var(--paper); border-color:var(--t-46); }
.pick input:checked + span:hover{ color:var(--ink); border-color:var(--paper); }
.pick input:focus-visible + span{ outline:1px solid var(--gold); outline-offset:3px; }

.hp{ position:absolute; inset-inline-start:-9999px; width:0; height:0; overflow:hidden; }
.fmsg{ display:none; padding:1em 0; border-block-end:1px solid; font-size:.94rem; }
.fmsg.ok{ display:block; color:#9FDCB4; border-color:rgba(159,220,180,.4); }
.fmsg.err{ display:block; color:#E79AA4; border-color:rgba(231,154,164,.4); }

.map{ aspect-ratio:16/10; background:var(--ink-2); border:1px solid var(--hair-soft); overflow:hidden; }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.86); }

/* -------------------------------------------------------------- footer ---*/
.ftr{ border-block-start:1px solid var(--hair-soft); padding-block:clamp(50px,7vw,84px) 0; }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gap); }
@media (max-width:900px){ .ftr-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr h4{ margin-bottom:1.6em; }
.ftr ul{ display:grid; gap:.95em; }
.ftr a{ font-size:.92rem; color:var(--t-46); transition:color .4s var(--e2); }
.ftr a:hover{ color:var(--red-tx); }
.ftr-bot{
  margin-top:clamp(44px,6vw,74px); padding-block:26px; border-block-start:1px solid var(--hair-soft);
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:.78rem; color:var(--t-28);
}
.socs{ display:flex; gap:16px; }
.socs a{ color:var(--t-46); }
.socs svg{ width:17px; height:17px; fill:currentColor; }
.socs a:hover{ color:var(--red-tx); }

/* --------------------------------------------------------------- reveal --*/
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--e2), transform 1.1s var(--e); }
.rv.in{ opacity:1; transform:none; }
.rv2{ transition-delay:.1s; } .rv3{ transition-delay:.2s; } .rv4{ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

.par{ will-change:transform; }

/* --------------------------------------------------------------- utility -*/
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip{ position:absolute; inset-block-start:-70px; inset-inline-start:var(--pad); z-index:300;
       background:var(--paper); color:var(--ink); padding:.8em 1.4em; transition:inset-block-start .3s; }
.skip:focus{ inset-block-start:0; }
.mt{ margin-top:clamp(30px,4vw,56px); }
.mt-s{ margin-top:clamp(18px,2.2vw,28px); }
.crumb{ display:flex; gap:.7em; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
        color:var(--t-28); margin-bottom:clamp(22px,3vw,36px); }
html[lang="ar"] .crumb{ letter-spacing:0; text-transform:none; font-size:.86rem; }
.crumb a:hover{ color:var(--red-tx); }
.empty{ padding-block:clamp(30px,4vw,50px); color:var(--t-46); border-block-start:1px solid var(--hair-soft); }


/* ---------------------------------------------- work — editorial collage ---*/
/* One lead frame set large, supporting frames scattered around a centre text
   column. Logical properties throughout so the Arabic build mirrors. Columns
   are kept in distinct bands — imagery 1-7, text 7-11, tiles 11-12 — so a tile
   can never land on top of the title. */
.cg{
  display:grid; position:relative;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(34px,auto);
  gap:clamp(10px,1.3vw,22px);
  align-items:stretch;
  padding-block:clamp(44px,6.5vw,96px);
}
.cg + .cg{ border-block-start:1px solid var(--hair-soft); }
.cg-fig{ display:block; overflow:hidden; background:var(--ink-2); position:relative; min-width:0; }
.cg-fig img{ width:100%; height:100%; object-fit:cover; display:block;
             transition:transform 1.4s var(--e); }
.cg-fig:hover img{ transform:scale(1.04); }

/* Every supporting tile occupies an identical 3x3 cell, so the three read as
   one family rather than three different crops. The lead frame anchors the
   left, text sits centre, tiles step down the right. */
.cg-main{ grid-column:1 / span 5;  grid-row:1 / span 9; z-index:2; }
.cg-tx  { grid-column:6 / span 3;  grid-row:3 / span 5; z-index:3; align-self:center; min-width:0; }
.cg-b   { grid-column:9 / span 4;  grid-row:1 / span 3; }
.cg-c   { grid-column:9 / span 4;  grid-row:4 / span 3; }
.cg-a   { grid-column:9 / span 4;  grid-row:7 / span 3; }
.cg-a,.cg-b,.cg-c{ aspect-ratio:16/9; align-self:stretch; }

.cg-t{ font-size:clamp(1.7rem,3.1vw,2.9rem); line-height:1.04; max-width:12ch; }
html[lang="ar"] .cg-t{ font-size:clamp(1.5rem,2.7vw,2.4rem); line-height:1.34; }
.cg-meta{ margin-top:1.2em; color:var(--t-46); }
.cg-rule{ display:block; width:52px; height:1px; background:var(--hair);
          margin-block:clamp(16px,2.2vw,28px); }
.cg-d{ font-size:.92rem; line-height:1.85; max-width:34ch; }
.cg-role{ margin-top:1.3em; color:var(--t-46); }
.cg-go{
  display:inline-flex; align-items:center; gap:1em; margin-top:clamp(20px,2.6vw,34px);
  font-family:var(--ff-u); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--t-100);
}
html[lang="ar"] .cg-go{ font-family:var(--ff-ar-u); font-size:.9rem;
                        letter-spacing:.02em; text-transform:none; }
.cg-arrow{ display:block; width:clamp(30px,3.4vw,54px); height:1px; background:var(--t-46);
           position:relative; flex:none;
           transition:width .6s var(--e), background .4s var(--e2); }
.cg-arrow::after{
  content:""; position:absolute; inset-inline-end:0; inset-block-start:-3px;
  width:7px; height:7px; border-block-start:1px solid var(--t-46);
  border-inline-end:1px solid var(--t-46); transform:rotate(45deg);
  transition:border-color .4s var(--e2);
}
html[dir="rtl"] .cg-arrow::after{
  transform:rotate(-135deg); inset-inline-end:auto; inset-inline-start:0;
}
.cg-go:hover .cg-arrow{ width:clamp(42px,4.6vw,72px); background:var(--red-tx); }
.cg-go:hover .cg-arrow::after{ border-color:var(--red-tx); }

@media (max-width:1080px){
  .cg{ grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(24px,auto); }
  .cg-main{ grid-column:1 / span 4; grid-row:1 / span 6; }
  .cg-b   { grid-column:5 / span 2; grid-row:1 / span 3; }
  .cg-c   { grid-column:5 / span 2; grid-row:4 / span 3; }
  .cg-tx  { grid-column:1 / span 4; grid-row:7 / span 2; align-self:start; margin-top:.8em; }
  .cg-a   { grid-column:5 / span 2; grid-row:7 / span 2; align-self:start; }
}
@media (max-width:640px){
  .cg{ grid-template-columns:repeat(2,1fr); gap:8px; grid-auto-rows:auto; }
  .cg-main{ grid-column:1 / span 2; grid-row:1; aspect-ratio:16/10; }
  .cg-tx  { grid-column:1 / span 2; grid-row:2; align-self:start; margin-block:.6em 1.1em; }
  .cg-a   { grid-column:1; grid-row:3; aspect-ratio:16/9; }
  .cg-b   { grid-column:2; grid-row:3; aspect-ratio:16/9; }
  .cg-c   { grid-column:1 / span 2; grid-row:4; aspect-ratio:16/9; }
}