/* ============================================================
   DANK - site.css (single source of truth for all pages)
   Design: QUIET (Sample B, approved). Orange is used ONLY on
   things you click to act: --orange. Everything else is cream/green.
   ============================================================ */
/* Self-hosted fonts (SIL Open Font License, see fonts/LICENSE-OFL.txt). No request leaves the site for typography. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/archivo-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-kufi-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/noto-kufi-arabic-arabic-900-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-kufi-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/noto-kufi-arabic-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* BRAND COLOURS - change here once, applies everywhere */
  --bg:#0D1F16; --bg-deep:#050D09; --ink:#121210;
  --panel:#1E4B36; --panel-hover:#25573F;
  --cream:#EFE5CB; --cream-2:#E8DCC3; --paper:#FAF6EE; --note:#F4E9C8;
  --orange:#F06820; --orange-hover:#F5793B;      /* action elements only */
  --accent:var(--cream); --accent-soft:var(--cream-2); /* kickers, counters, arrows */
  --warm:#C8A06A;                                 /* quiet emphasis: notes, warnings, required marks */
  --gutter:clamp(20px,4vw,48px);
  --nav-h:78px;
  --radius-card:28px; --radius-photo:18px; --radius-pill:999px;
  --font-en:'Archivo',system-ui,sans-serif; --font-ar:'Noto Kufi Arabic',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace; --font-slogan:'Jost',var(--font-en);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
.section,#main,.people-sec{scroll-margin-top:var(--nav-h)}
body{background:var(--bg);color:var(--cream);font-family:var(--font-en);overflow-x:clip;-webkit-font-smoothing:antialiased}
.ar,[lang=ar]{font-family:var(--font-ar);letter-spacing:0}
.mono{font-family:var(--font-mono)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:not([class]):hover{text-decoration:underline;text-underline-offset:.25em}

/* Focus: visible for keyboard users on every interactive element */
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.on-accent:focus-visible{outline-color:var(--bg)}
/* Skip link: parked above the viewport (never off to the side - in RTL that widens the page) */
.skip{position:absolute;inset-inline-start:0;top:0;z-index:100;transform:translateY(-200%);
  background:var(--orange);color:var(--bg);font-weight:900;padding:14px 22px;border-radius:0 0 var(--radius-pill) var(--radius-pill)}
.skip:focus{transform:none}
.hp{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);min-height:var(--nav-h);
  background:rgba(13,31,22,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(232,220,195,.2)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:30px;width:auto}
.issue{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:rgba(239,229,203,.6);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(6px,1.6vw,20px);flex-wrap:wrap}
.nav-links a{color:var(--cream);font-weight:700;font-size:13px;letter-spacing:.5px;
  padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--radius-pill)}
.nav-links a:hover,.nav-links a[aria-current]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
.nav-toggle{display:none;background:none;border:2px solid rgba(239,229,203,.4);color:var(--cream);
  min-width:44px;min-height:44px;border-radius:var(--radius-pill);font-family:var(--font-mono);
  font-size:11px;letter-spacing:1.5px;cursor:pointer;padding:0 14px}

/* VIDEO HERO - fills the space under the sticky nav, so the cue and pause control are on screen */
.vhero{position:relative;height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:520px;overflow:hidden;background:#000}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,31,22,.55) 0%,rgba(13,31,22,0) 22%,rgba(13,31,22,0) 62%,rgba(13,31,22,.92) 100%)}
.vhero .meta{position:absolute;bottom:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;
  color:rgba(239,229,203,.8);z-index:2}
.vhero .meta.start{inset-inline-start:var(--gutter);display:flex;align-items:center;gap:10px}
.vhero .meta.end{inset-inline-end:var(--gutter)}
.cue{width:22px;height:22px;border:2px solid rgba(239,229,203,.7);border-radius:var(--radius-pill);position:relative;flex:0 0 auto}
.cue::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:7px;background:rgba(239,229,203,.7);
  transform:translateX(-50%);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:1}50%{transform:translate(-50%,5px);opacity:.3}}
.vpause{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;direction:ltr;
  background:rgba(13,31,22,.65);border:2px solid rgba(239,229,203,.45);color:var(--cream);
  border-radius:var(--radius-pill);min-height:44px;padding:0 20px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:2px;cursor:pointer}

/* SECTIONS */
.section{padding:72px var(--gutter)}
h2.sec{font-family:var(--font-ar);font-weight:900;font-size:clamp(32px,5vw,58px);line-height:1.2;margin-bottom:6px}
h2.sec .en{display:block;font-family:var(--font-en);font-size:clamp(13px,1.4vw,18px);letter-spacing:3px;color:var(--accent);margin-top:10px;text-align:inherit}
.lede{font-weight:700;font-size:15px;color:rgba(239,229,203,.78);margin-bottom:34px;max-width:70ch;text-wrap:pretty}
.lede.hi{color:var(--cream);font-weight:800}
.lede.center{max-width:none}
/* Alignment standard: all text in sections aligns right (RTL start), English included.
   Exceptions are explicitly centered elements below. */
.section p[dir=ltr],.section span[dir=ltr],.page-hero p[dir=ltr],.page-hero span[dir=ltr],h1.hero-h[dir=ltr]{text-align:right}
.section .center,.section p.center[dir=ltr],.section p.email-line[dir=ltr],.section .callcenter{text-align:center}
h1.hero-h{font-family:var(--font-ar);font-weight:900;font-size:clamp(38px,6.5vw,86px);line-height:1.15}
h1.hero-h[dir=ltr]{font-family:var(--font-en);letter-spacing:-.01em}

/* PHOTO WALL - uniform squares, fixed columns */
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
@media (max-width:1199px){.ig-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ig{position:relative;aspect-ratio:1/1;border-radius:var(--radius-photo);overflow:hidden;background:var(--panel);margin:0}
.ig img{width:100%;height:100%;object-fit:cover}
.center{text-align:center;margin-top:32px}
.pill{display:inline-flex;align-items:center;min-height:48px;background:var(--orange);color:var(--bg);
  font-weight:900;font-size:14px;letter-spacing:1px;padding:0 30px;border-radius:var(--radius-pill)}
.pill:hover,.pill:focus-visible{background:var(--orange-hover);color:var(--bg)}

/* TICKER - track holds two identical halves; each half is wider than any screen */
.tape{overflow:hidden;margin:-4px 0;position:relative;z-index:2}
.tape-inner{direction:ltr;background:var(--cream);border-block:3px dashed rgba(13,31,22,.3);overflow:hidden;
  padding:12px 0;margin-inline:0;position:relative}
.tape-inner::after{content:"";position:absolute;top:0;right:0;bottom:0;width:110px;pointer-events:none;
  background:linear-gradient(to right,rgba(239,229,203,0),var(--cream) 55%)}
.tape-track{display:flex;gap:44px;width:max-content;animation:marq 60s linear infinite;
  font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:2px;color:var(--bg);white-space:nowrap}
.tape:hover .tape-track,.tape:focus-within .tape-track,.tape.paused .tape-track{animation-play-state:paused}
.tape-stop:focus-visible{outline-color:var(--bg)}
.tape-stop{position:absolute;top:50%;right:10px;left:auto;transform:translateY(-50%);z-index:3;direction:ltr;
  background:rgba(13,31,22,.85);color:var(--cream);border:2px solid rgba(239,229,203,.5);border-radius:var(--radius-pill);
  min-width:44px;min-height:44px;cursor:pointer;font-size:12px;line-height:1}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* BRANCHES */
.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:stretch}
.city{background:var(--panel);border:4px solid var(--paper);border-radius:var(--radius-card);padding:22px;display:flex;flex-direction:column}
.exit{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:rgba(239,229,203,.7)}
.city-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 2px}
.city-name{font-weight:900;font-size:26px;letter-spacing:1px}
.badge{border:2px solid var(--cream);color:var(--cream);font-weight:900;font-size:11px;letter-spacing:2px;
  padding:6px 13px;border-radius:var(--radius-pill);white-space:nowrap}
.city-ar{font-family:var(--font-ar);font-weight:700;font-size:14px;color:rgba(239,229,203,.8)}
.branches{list-style:none;display:grid;gap:8px;margin-top:16px}
.branch{display:flex;align-items:center;gap:12px;min-height:clamp(56px,7.5vh,76px);
  background:rgba(5,13,9,.35);border:1px solid rgba(239,229,203,.22);border-radius:var(--radius-photo);
  padding:12px 14px;color:var(--cream)}
.branch:hover{background:var(--panel-hover);border-color:var(--cream-2);color:var(--cream)}
.branch-name{flex:1 1 auto;min-width:0}
.branch-ar{display:block;font-family:var(--font-ar);font-weight:700;font-size:14px}
.branch-en{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;
  color:rgba(239,229,203,.7);margin-top:2px}
.branch-note{display:block;font-family:var(--font-ar);font-weight:700;font-size:11px;color:var(--warm);margin-top:3px}
.branch-note .en{font-family:var(--font-mono);letter-spacing:1px;margin-inline-start:6px}
.branch-arrow{flex:0 0 auto;font-size:15px;color:var(--cream-2)}
.branch-hours{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;border:1px solid rgba(239,229,203,.35);color:rgba(239,229,203,.85);border-radius:999px;padding:5px 12px;white-space:nowrap}
.city-more{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:12px;font-weight:700;font-size:13px;color:var(--cream)}
.city-more:hover{text-decoration:underline;text-underline-offset:.3em}

/* PEOPLE - fixed collage; rows are derived from the grid's own width so tile shapes hold everywhere */
.people-sec{background:var(--panel);border-radius:36px;margin-inline:var(--gutter);container-type:inline-size}
.people{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1424px;margin-inline:auto;
  grid-auto-rows:min(calc((100vw - 4*var(--gutter) - 48px)/4), 344px);
  grid-template-areas:"v1 b b v2" "v1 b b v2" "v3 b b v4" "v3 s1 s2 v4" "l2 l2 s3 s4"}
@supports (width:1cqw){
  .people{grid-auto-rows:min(calc((100cqw - 48px)/4), 344px)}
}
.person{margin:0;border-radius:24px;overflow:hidden;background:var(--ink)}
.person.t-v1{grid-area:v1}.person.t-b{grid-area:b}.person.t-v2{grid-area:v2}
.person.t-s1{grid-area:s1}.person.t-s2{grid-area:s2}.person.t-s3{grid-area:s3}.person.t-s4{grid-area:s4}
.person.t-l2{grid-area:l2}.person.t-v3{grid-area:v3}.person.t-v4{grid-area:v4}
.person img,.person video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.people-ctl{display:flex;justify-content:flex-start;margin-top:14px}
.people-ctl button{background:none;border:1px solid rgba(239,229,203,.4);color:rgba(239,229,203,.85);border-radius:var(--radius-pill);
  min-height:44px;padding:0 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;cursor:pointer;direction:ltr}
.people-ctl button:hover{border-color:var(--cream)}
@media (max-width:1000px){
  .people{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:none;grid-auto-rows:auto;grid-auto-flow:dense}
  .people .person{grid-area:auto;aspect-ratio:1}
  .people .person.t-b{grid-column:span 2;aspect-ratio:16/10;order:-1}
}

/* Breathing photos (only while on screen, never on logos) */
@keyframes cinBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.ig.in-view:nth-child(-n+6) img,.person.in-view img{animation:cinBreathe 9s ease-in-out infinite}
.ig:nth-child(even) img{animation-delay:-4.5s}
.ig:nth-child(3n) img{animation-duration:11s}
.person:nth-child(even) img{animation-delay:-4.5s}

/* NUMBERS - one axis: everything starts at the right edge like the rest of the page */
.served{margin:6px 0 36px}
.served .big{font-family:var(--font-mono);font-weight:700;font-size:clamp(44px,8vw,110px);color:var(--cream);letter-spacing:2px;line-height:1.05}
.served .sub{font-family:var(--font-ar);font-weight:700;font-size:clamp(16px,2vw,24px);margin-top:6px;color:rgba(239,229,203,.85)}
.numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:640px;width:100%;margin-inline:auto}
a.num{color:var(--cream)}
a.num:hover{border-color:var(--cream)}
.num{background:var(--bg);border:1px solid rgba(239,229,203,.22);border-radius:24px;padding:clamp(22px,4vh,40px) 16px;text-align:center}
.num .n{font-family:var(--font-mono);font-weight:700;font-size:clamp(22px,3.2vw,40px);color:var(--cream);text-align:center;margin-inline:auto}
.num .p{font-weight:900;font-size:11px;letter-spacing:2.5px;margin-top:8px;color:rgba(239,229,203,.85);text-align:center}
.section .num p[dir=ltr],.section .num p{text-align:center} /* beats the right-align standard above */
#numbers{background:var(--bg-deep)}
.person img.pos-top{object-position:center 12%}
#numbers .figures-note{font-size:10px;letter-spacing:1.5px;color:rgba(239,229,203,.5);margin-top:14px;text-align:center}
#numbers .appstrip{background:transparent;justify-content:center;padding:26px 0 0}

/* CONTACT */
.callcenter{font-family:var(--font-mono);font-weight:700;font-size:clamp(34px,7vw,80px);letter-spacing:4px;
  color:var(--cream);direction:ltr;text-align:center;margin:10px 0 6px;display:block}
.callcenter:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:3px}
.email-line{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;text-align:center;
  color:rgba(239,229,203,.65);margin-bottom:28px}
.email-line a{display:inline-block;padding:14px 6px;color:var(--cream)}

/* FORMS */
.formcard{margin:24px auto 0;max-width:760px;background:var(--bg-deep);border:1px solid rgba(239,229,203,.15);border-radius:var(--radius-card);padding:32px clamp(20px,3vw,40px)}
.formcard>h3{font-family:var(--font-ar);font-weight:900;font-size:22px;max-width:640px;margin:0 auto 6px}
.formcard>.formlede{font-family:var(--font-ar);font-weight:700;font-size:13px;color:rgba(239,229,203,.7);max-width:640px;margin:0 auto 22px}
.form{display:grid;gap:16px;max-width:640px;margin-inline:auto}
.field{display:grid;gap:6px}
.field label{font-family:var(--font-ar);font-weight:700;font-size:13px;color:rgba(239,229,203,.85)}
.field label .req{color:var(--warm)}
.field input,.field select,.field textarea{background:rgba(239,229,203,.07);border:1px solid rgba(239,229,203,.5);
  border-radius:14px;padding:14px 16px;color:var(--cream);font-family:var(--font-ar);font-size:15px;min-height:48px;width:100%}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(239,229,203,.55)}
.btn{background:var(--orange);border:none;color:var(--bg);font-family:var(--font-en);font-weight:900;
  font-size:15px;letter-spacing:.5px;min-height:52px;padding:0 28px;border-radius:var(--radius-pill);cursor:pointer}
.btn:hover{background:var(--orange-hover)}
.formnote{font-family:var(--font-ar);font-weight:700;font-size:12px;letter-spacing:0;color:rgba(239,229,203,.6)}

/* APP STRIP */
.appstrip{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:22px var(--gutter);background:var(--panel);font-weight:700;font-size:13px;letter-spacing:1px}
.appstrip a{color:var(--cream);border:2px solid rgba(239,229,203,.45);border-radius:var(--radius-pill);
  min-height:44px;display:inline-flex;align-items:center;padding:0 20px}
.appstrip a:hover{border-color:var(--cream);color:var(--cream)}

/* CLOSING PAGE (all pages): marketing ribbed-glass artwork + slogan set live in Jost + small logo signature */
.statement{position:relative;min-height:clamp(380px,58vh,620px);min-height:clamp(380px,58svh,620px);display:grid;grid-template-rows:1fr auto;padding:0;
  background:#0f2a1c url(images/statement-bg.webp) center 28%/cover no-repeat}
@media (max-width:760px){.statement{background-image:url(images/statement-bg-sm.webp)}}
.statement .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,13,9,.18),rgba(5,13,9,.42) 50%,rgba(5,13,9,.55))}
.statement .wrap{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,9vh,110px) var(--gutter) 32px;text-align:center}
.statement .wrap p{margin:0 auto;max-width:1200px;text-align:center;font-family:var(--font-slogan);font-weight:600;
  font-size:clamp(15px,1.6vw,27px);letter-spacing:.14em;line-height:1.6;color:#fff;
  text-shadow:0 1px 18px rgba(5,13,9,.55)}
.statement .wrap p span{display:inline-block}
@media (min-width:1200px){.statement .wrap p{white-space:nowrap}}
.statement .sig{position:relative;background:transparent;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 var(--gutter) clamp(28px,5vh,48px);text-align:center}
.statement .sig img{height:clamp(22px,2.4vw,32px);width:auto;filter:brightness(0) invert(1);opacity:.95}
.statement .sig .colophon{margin:0;font-family:var(--font-slogan);font-weight:500;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.72)}
.colophon{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;color:rgba(239,229,203,.5)}

/* ===== Sub-page additions ===== */
.page-hero{padding:120px var(--gutter) 48px;background:var(--bg)}
.page-hero .crumb ol{list-style:none;display:flex;gap:6px;padding:0;margin:0}
.page-hero .crumb{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:rgba(239,229,203,.6);margin-bottom:18px;display:block}
.page-hero .crumb a{color:rgba(239,229,203,.6)}
.page-hero .crumb a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:.3em}
.section.pt0{padding-top:0}
.page-hero .page-call{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:rgba(239,229,203,.7);margin:-18px 0 36px}
.page-hero .page-call a{color:var(--cream);display:inline-block;padding:10px 4px}
.page-hero .kicker{font-weight:800;font-size:clamp(15px,2vw,22px);letter-spacing:1px;color:var(--cream);margin:8px 0 10px}
.branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;align-items:stretch}
@media (min-width:1000px){.branch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.branch-card{background:var(--panel);border:4px solid var(--paper);border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;gap:10px}
.branch-card h2{font-family:var(--font-ar);font-weight:900;font-size:24px;line-height:1.4}
.branch-card .en-name{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;color:rgba(239,229,203,.7)}
.branch-card .addr{font-family:var(--font-ar);font-weight:700;font-size:13px;line-height:1.7;color:rgba(239,229,203,.85)}
.branch-card .addr span{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:rgba(239,229,203,.6);text-align:right}
.page-hero .hours-note{margin:-24px 0 28px;font-size:14px}
.branch-card .meta-row{display:flex;gap:8px;flex-wrap:wrap}
.branch-card .meta-row span{border:2px solid rgba(239,229,203,.4);color:var(--cream);font-weight:900;font-size:11px;letter-spacing:1.5px;padding:6px 13px;border-radius:var(--radius-pill)}
.branch-card .meta-row span.warn{border-color:var(--warm);color:var(--warm);font-family:var(--font-ar);letter-spacing:0}
.branch-card .go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--orange);color:var(--bg);font-weight:900;font-size:13px;letter-spacing:1.5px;padding:0 24px;border-radius:var(--radius-pill);margin-top:auto}
.branch-card .go:hover{background:var(--orange-hover);color:var(--bg)}
.city-jump{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.city-jump a{border:2px solid rgba(239,229,203,.4);color:var(--cream);font-weight:900;font-size:13px;letter-spacing:1.5px;min-height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:var(--radius-pill)}
.city-jump a:hover{border-color:var(--cream)}
.city-jump a[aria-current]{background:var(--cream);color:var(--bg);border-color:var(--cream)}

/* ===== Phones ===== */
@media (max-width:760px){
  .vhero{height:78vh;height:78svh} .vhero .meta.end{display:none}
  .issue{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding-top:10px}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:14px 12px}
  .nav{flex-wrap:wrap}
  .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ig:nth-child(n+9){display:none}
  .people-sec{margin-inline:0;border-radius:0}
  .branch{flex-wrap:wrap}
  .branch-hours{order:3;margin-inline-start:auto}
  .numbers{gap:10px}
  .num{padding:18px 8px;border-radius:18px}
  .num .n{font-size:20px}
  .num .p{font-size:9px;letter-spacing:1.5px}
  .page-hero{padding-top:64px}
}
/* Reduced motion: stop the decorative loops, keep state feedback */
@media (prefers-reduced-motion:reduce){
  .tape-track,.cue::after,.ig img,.person img{animation:none!important}
  html{scroll-behavior:auto}
}

/* 404 */
.notfound{min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;text-align:center;padding:72px var(--gutter)}
.notfound h1{font-family:var(--font-ar);font-weight:900;font-size:clamp(32px,6vw,64px)}
.notfound .nf-logo{height:34px;width:auto;margin:0 auto 26px}
.notfound p{margin:14px 0 28px;color:rgba(239,229,203,.8)}

/* Team count: the headline of the team section */
.team-stat{margin:4px 0 30px}
.team-stat .team-big{font-family:var(--font-mono);font-weight:700;font-size:clamp(72px,13vw,170px);line-height:1;color:var(--cream);letter-spacing:2px;text-align:right}
.team-stat .lede{margin:10px 0 18px}
.team-join{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border:2px solid rgba(239,229,203,.55);border-radius:var(--radius-pill);color:var(--cream);font-weight:800;font-size:13px}
.team-join [lang=en]{letter-spacing:1.5px}
.team-join:hover{border-color:var(--cream)}

/* Careers form */
.formtitle{font-family:var(--font-ar);font-weight:900;font-size:clamp(22px,3vw,32px);max-width:640px;margin:0 auto 22px;text-align:right}
.formtitle .en{display:block;font-family:var(--font-en);font-size:13px;letter-spacing:3px;color:rgba(239,229,203,.7);margin-top:6px;text-align:right}
.field .hint-inline{font-weight:700;font-size:11px;color:rgba(239,229,203,.6);margin-inline-start:6px}
.field input[type=file]{padding:10px 12px;cursor:pointer}
.field input[type=file]::file-selector-button{font-family:var(--font-ar);font-weight:700;font-size:13px;background:var(--cream);color:var(--bg);border:0;border-radius:var(--radius-pill);padding:8px 16px;margin-inline-end:12px;cursor:pointer}
.btn [lang=en]{letter-spacing:1.5px}
@media (max-width:760px){.team-stat .team-big{font-size:clamp(64px,22vw,110px)}}

/* Team header: same width and right edge as the photo grid; join + pause share one row */
.people-sec > h2.sec,.team-stat,.team-actions{max-width:1424px;margin-inline:auto}
.team-stat{margin-top:4px;margin-bottom:22px}

.team-stat .lede{margin:8px 0 0}
.team-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.team-pause{background:none;border:1px solid rgba(239,229,203,.4);color:rgba(239,229,203,.85);border-radius:var(--radius-pill);
  min-height:44px;padding:0 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;cursor:pointer;direction:ltr}
.team-pause:hover{border-color:var(--cream)}
.team-stat .team-big{margin-inline-end:-.06em} /* optical: pulls the "+" ink onto the heading edge */

/* Team header v2: heading at the right, the 717+ block centred in the panel at the same height */
.team-head{max-width:1424px;margin:0 auto 10px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.team-head > h2.sec{grid-column:1;max-width:none;margin:0}
.team-head .team-stat{grid-column:2;max-width:none;margin:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.team-head .team-stat .team-big{text-align:center;margin-inline-end:0}
.section .team-head .team-stat p[dir=ltr]{text-align:center}
.team-head .team-stat .lede{margin:8px 0 16px}
.team-actions{justify-content:flex-end}
@media (max-width:900px){
  .team-head{grid-template-columns:1fr}
  .team-head .team-stat{grid-column:1;margin-top:18px}
}

/* Careers form v2: bilingual labels, readable dropdowns, "Other" position box */
.field label{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
.field label .l-ar{font-family:var(--font-ar);font-weight:700;font-size:14px;color:var(--cream)}
.field label .l-en{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.5px;color:rgba(239,229,203,.72)}
.field label .l-ar::after{content:"·";margin-inline-start:8px;color:rgba(239,229,203,.45)}
.field label .req{order:3}
.field label .hint-inline{order:4;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px}
.field select{color:var(--cream);font-weight:700}
.field select:invalid{color:rgba(239,229,203,.75)}
.field select option{color:#0D1F16;background:#FAF6EE;font-weight:700}
.field select option[disabled]{color:#6b6b63}
.field-other[hidden]{display:none}
.req-note{font-size:12px;margin:2px 0 0}
.field-hint{font-family:var(--font-ar);font-weight:700;font-size:12px;color:rgba(239,229,203,.6);margin-top:2px}
.field-hint [lang=en]{font-family:var(--font-en);letter-spacing:.3px}

/* Team panel hugs its content on very wide / zoomed-out screens (content caps at 1424px + 48px padding each side) */
.people-sec{margin-inline:max(var(--gutter), calc((100% - 1520px) / 2))}
@media (max-width:760px){.people-sec{margin-inline:0}}

/* Branch experience (CEO request, Option C selected by Suhail, 1 Oct 2026): branch photos mixed into the photo wall as larger tiles */
.ig-mixed{grid-auto-flow:dense}
.ig-mixed .ig img{position:absolute;inset:0;width:100%;height:100%}
.ig-mixed .ig.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ig-mixed .ig.wide{grid-column:span 2;aspect-ratio:2/1}
.ig-mixed .bxm img{object-position:center 50%}
.ig-mixed .ig.wide.bag img{object-position:center 82%}
.ig-mixed .bxm.in-view img{animation:cinBreathe 11s ease-in-out infinite}
@media (max-width:760px){
  .ig-mixed .ig:nth-child(n+9){display:block}
  .ig-mixed .ig.m-hide{display:none}
  .ig-mixed .ig.big{grid-row:auto;aspect-ratio:1/1}
  .ig-mixed .ig.wide{aspect-ratio:16/10}
}