/* ==========================================================================
   MTWAFIQ v6.0 — three looks (optional presets), chosen by the visitor:
   · global — the MTWAFIQ look as it is (default)
   · gcc    — Saudi / GCC: palm green, desert sand and Najdi gold; Sadu weave and Najdi crenellation; Riyadh, Diriyah, AlUla, Jeddah
   (v6.0.2: the Middle East look was retired; GCC is the default.)
   Real photographs and footage only (no credits shown on the site). Videos are silent, slow and optional:
   they never play for reduced-motion, data-saver or slow connections. No flags, emblems, music or religious text used as decoration.
   ========================================================================== */

/* ── tokens ── */
[data-look=gcc]{
  --turq:#0E7A4F;--green:#3E9B4F;--orange:#B98A2E;--mint:#E9D9B4;--lime:#9FD67A;--peach:#E7B98A;
  --tdark:#0A5C3B;--gdark:#2B7A3A;--odark:#8C641C;
  --lk-1:#0E7A4F;--lk-2:#B98A2E;--lk-3:#A4262C;--lk-sand:#EFE4CC;--lk-ink:#0B1A13;
}
[data-look=gcc][data-theme=light]{--bg:#FFFDF8;--bg-alt:#F7F1E4;--surface-2:#FBF6EC;--chip:#F3EBDA;--border:#E9DFCB;--g1:#0E7A4F;--g2:#2B7A3A;--g3:#B98A2E}
[data-look=gcc][data-theme=dark]{--bg:#09120E;--bg-alt:#0C1712;--surface:#101C16;--surface-2:#14231B;--elev:#18291F;--border:#1F3328;--mint:#E9D9B4;--g1:#7FD3A4;--g2:#C9E59A;--g3:#E9C27A;--a1:#9FE0BC;--link:#9FE0BC}
[data-look=me]{
  --turq:#1F6F8B;--green:#2A9D8F;--orange:#C0583B;--mint:#E9C46A;--lime:#8FD3C8;--peach:#F0A98E;
  --tdark:#16546A;--gdark:#1F7A70;--odark:#9A3F27;
  --lk-1:#1F6F8B;--lk-2:#C9A43E;--lk-3:#C0583B;--lk-sand:#F3E9D6;--lk-ink:#0D1622;
}
[data-look=me][data-theme=light]{--bg:#FFFCF6;--bg-alt:#F6EFE2;--surface-2:#FAF4E8;--chip:#F1E8D6;--border:#E6DCC8;--g1:#1F6F8B;--g2:#1F7A70;--g3:#C0583B}
[data-look=me][data-theme=dark]{--bg:#0B1019;--bg-alt:#0E1520;--surface:#121A26;--surface-2:#16202E;--elev:#1A2535;--border:#24324A;--g1:#8CC9DC;--g2:#8FD3C8;--g3:#F0A98E;--a1:#E9C46A;--link:#E9C46A}

/* ── patterns (drawn, not photographed) ── */
:root{
  --sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Crect width='48' height='14' fill='%23F3EAD6'/%3E%3Cpath d='M0 14L6 7 0 0zM48 0L42 7 48 14z' fill='%23111'/%3E%3Cpath d='M12 7l6-6 6 6-6 6z' fill='%23A4262C'/%3E%3Cpath d='M15 7l3-3 3 3-3 3z' fill='%23F3EAD6'/%3E%3Cpath d='M30 7l6-6 6 6-6 6z' fill='%230E7A4F'/%3E%3Cpath d='M33 7l3-3 3 3-3 3z' fill='%23E9C46A'/%3E%3Cpath d='M24 0h0l3 3-3 3-3-3zM24 8l3 3-3 3-3-3z' fill='%23111'/%3E%3C/svg%3E");
  --najdi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M0 12V8h4V4h4V0h4v4h4v4h4v4z' fill='black'/%3E%3C/svg%3E");
  --girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C9A43E' stroke-width='1'%3E%3Cpath d='M40 8l9 23 23 9-23 9-9 23-9-23-23-9 23-9z'/%3E%3Cpath d='M17 17l23 9 23-9-9 23 9 23-23-9-23 9 9-23z'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Cpath d='M0 0l8 8M80 0l-8 8M0 80l8-8M80 80l-8-8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── header accents ── */
[data-look=gcc] .site-header::after,[data-look=me] .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;pointer-events:none}
[data-look=gcc] .site-header::after{background:var(--sadu) 0 0/34px 6px repeat-x;opacity:.95}
[data-look=me] .site-header::after{background:linear-gradient(90deg,var(--lk-1),var(--lk-2) 50%,var(--lk-3));height:3px;bottom:-3px}

/* ── switcher ── */
.look-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:99px;border:1px solid var(--border-2);background:var(--surface);color:var(--heading);font:700 .82rem var(--f-body);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.look-btn:hover,.look-btn:focus-visible,.look-btn[aria-expanded=true]{border-color:var(--turq);box-shadow:0 0 0 3px color-mix(in srgb,var(--turq) 22%,transparent)}
.look-btn i{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--turq) 0 33%,var(--orange) 0 66%,var(--green) 0)}
.look-menu{position:absolute;z-index:200;min-width:260px;padding:8px;border-radius:16px;background:var(--elev);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.look-menu[hidden]{display:none}
.look-menu p{margin:4px 8px 8px;font:800 .7rem var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.look-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--heading);font:600 .9rem var(--f-body);cursor:pointer;text-align:start}
.look-menu button:hover,.look-menu button:focus-visible{background:var(--surface-2)}
.look-menu button[aria-checked=true]{background:color-mix(in srgb,var(--turq) 12%,var(--surface))}
.look-menu button small{display:block;font-weight:500;font-size:.74rem;color:var(--muted)}
.look-menu .sw{flex:none;width:34px;height:24px;border-radius:7px;border:1px solid var(--border);background-size:cover;background-position:center}
.look-menu .sw.g{background:linear-gradient(135deg,#1FB5B2,#4CAE3F 55%,#EC6C25)}
.look-menu .sw.k{background:var(--sadu) 0 50%/24px 7px repeat-x,linear-gradient(135deg,#0E7A4F,#B98A2E)}
.look-menu .sw.m{background:var(--girih) 0 0/24px 24px,linear-gradient(135deg,#1F6F8B,#C0583B)}
.look-menu .ck{margin-inline-start:auto;color:var(--turq);font-weight:800;visibility:hidden}
.look-menu button[aria-checked=true] .ck{visibility:visible}
@media (max-width:760px){.look-btn b{display:none}.look-btn{padding:0 11px}}

/* ── cinematic heroes: real media behind the first section ── */
.look-stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.look-stage img,.look-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:lookDrift 26s ease-in-out infinite alternate}
.look-stage video{animation:none;transform:none}
.look-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,12,10,.86) 0%,rgba(6,12,10,.66) 42%,rgba(6,12,10,.28) 100%)}
[dir=rtl] .look-stage::after{background:linear-gradient(260deg,rgba(6,12,10,.86) 0%,rgba(6,12,10,.66) 42%,rgba(6,12,10,.28) 100%)}
[data-look=me] .look-stage::after{background:linear-gradient(100deg,rgba(10,14,24,.88) 0%,rgba(10,14,24,.64) 45%,rgba(10,14,24,.26) 100%)}
[data-look=me][dir=rtl] .look-stage::after{background:linear-gradient(260deg,rgba(10,14,24,.88) 0%,rgba(10,14,24,.64) 45%,rgba(10,14,24,.26) 100%)}
@keyframes lookDrift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion:reduce){.look-stage img{animation:none}}
.has-look-media{position:relative;isolation:isolate;color-scheme:dark;
  --bg:transparent;--text:#D7DEE5;--heading:#FFFFFF;--muted:#C3CCD5;--faint:#AEB8C2;--border:rgba(255,255,255,.18);--border-2:rgba(255,255,255,.26);
  --surface:rgba(16,24,30,.62);--surface-2:rgba(20,30,38,.62);--chip:rgba(255,255,255,.12);--glass:rgba(16,24,30,.55);--a1:var(--mint);--link:var(--mint);--g1:#FFFFFF;--g2:var(--mint);--g3:var(--peach)}
.has-look-media > :not(.look-stage):not(.look-cap){position:relative;z-index:1}
.has-look-media .aurora,.has-look-media .gridlines{opacity:.25}
[data-look=gcc] .has-look-media{border-bottom:14px solid transparent;border-image:var(--sadu) 0 0 14 0 / 0 0 14px 0 round}
[data-look=me] .has-look-media{box-shadow:inset 0 -3px 0 var(--lk-2)}
.look-cap{position:absolute;z-index:2;inset-inline-end:16px;bottom:14px;max-width:min(560px,80%);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F2F5F7;font:600 .74rem var(--f-body);line-height:1.35}
.look-cap a{color:#E9D9B4;text-decoration:underline;text-underline-offset:2px}
.look-cap small{font-weight:500;opacity:.85}
@media (max-width:700px){.look-cap{inset-inline:12px;bottom:10px;border-radius:12px;max-width:none;font-size:.7rem}}

/* ── Najdi crenellation above section heads (GCC) and girih wash (ME) ── */
[data-look=gcc] .sec-head::before{content:"";display:block;width:112px;height:12px;margin-bottom:14px;background:var(--lk-2);-webkit-mask:var(--najdi) 0 0/28px 12px repeat-x;mask:var(--najdi) 0 0/28px 12px repeat-x;opacity:.9}
[data-look=gcc] .sec-head.center::before,[data-look=gcc] .sec-head[style*=center]::before{margin-inline:auto}
[data-look=me] .band{background-image:var(--girih);background-size:80px 80px;background-blend-mode:normal}
[data-look=me] .band::before{opacity:.06}
[data-look=me][data-theme=light] main > section:not(.band):not(.has-look-media):nth-of-type(even){background-image:linear-gradient(var(--bg),var(--bg)),var(--girih);background-blend-mode:normal;background-size:auto,80px 80px}
[data-look=me] .sec-head::before{content:"";display:block;width:44px;height:44px;margin-bottom:12px;background:var(--lk-2);-webkit-mask:var(--girih) center/88px 88px no-repeat;mask:var(--girih) center/88px 88px no-repeat;opacity:.9}

/* ── "together" band (home and About) ── */
.look-band{padding:clamp(48px,7vw,88px) 0}
.look-band .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.look-band h2{margin:0 0 12px}
.look-band p{margin:0 0 16px;color:var(--text);font-size:1.05rem;line-height:1.7}
.look-pics{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.look-pics figure{margin:0;position:relative;overflow:hidden;border-radius:18px;box-shadow:var(--shadow)}
.look-pics img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover}
.look-pics figcaption{position:absolute;inset-inline:8px;bottom:8px;padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.5);color:#fff;font:600 .7rem var(--f-body)}
.look-pics figcaption a{color:#E9D9B4}
[data-look=me] .look-pics figure{border-radius:50% 50% 14px 14px / 34% 34% 14px 14px}
[data-look=gcc] .look-pics figure{border-top:5px solid var(--lk-2)}
.look-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.look-tags span{padding:6px 12px;border-radius:99px;background:var(--chip);border:1px solid var(--border);font:700 .78rem var(--f-body);color:var(--heading)}
@media (max-width:860px){.look-band .wrap{grid-template-columns:1fr}.look-pics img{min-height:170px}}

/* ── games: a living scene behind the board ── */
.look-scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.look-scene img,.look-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.look-scene::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 86%,transparent)}
[data-theme=dark] .look-scene::after{background:color-mix(in srgb,var(--bg) 80%,transparent)}
.is-game[data-look=gcc] body,.is-game[data-look=me] body{background:transparent}
.is-game[data-look=gcc] main > section:not(.has-look-media),.is-game[data-look=me] main > section:not(.has-look-media){background:transparent}
.is-game[data-look=gcc] main .cx-panel,.is-game[data-look=me] main .cx-panel{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.is-game[data-look=gcc] main .cx-panel{border-top:3px solid var(--lk-2)}
.is-game[data-look=me] main .cx-panel{border-top:3px solid var(--lk-3)}

/* ── credits dialog ── */
.look-credits{max-width:min(720px,92vw)}
.look-credits ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.look-credits li{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;font-size:.86rem}
.look-credits li img{width:72px;height:48px;object-fit:cover;border-radius:8px}
.look-credits li small{color:var(--muted)}
.f-look{margin-inline-start:12px;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0;opacity:.85}
@media (max-width:440px){.look-btn{width:38px;height:38px;padding:0;justify-content:center}.tools{gap:5px}}
@media (max-width:360px){.tools{gap:3px}}
.f-looks{display:inline-flex;gap:4px;margin-inline-start:12px;vertical-align:middle;flex-wrap:wrap}
.f-looks button{border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;border-radius:99px;padding:2px 10px;font:600 .74rem var(--f-body);cursor:pointer;opacity:.85}
.f-looks button[aria-pressed=true]{background:rgba(255,255,255,.14);opacity:1}
@media (max-width:380px){.look-btn{display:none}}
.look-pics figcaption{inset-inline:auto 8px;max-width:calc(100% - 16px);font-size:.66rem;padding:3px 9px}