/* Layout: a sales story in Himam's red. Pain first, proof early, before/after, then a low-risk offer. Chapter headings carry a rule that runs to the edge, echoing the logo's long stroke */
:root{
  --red:#8C0031;
  --red-deep:#6B0025;
  --on-red:#FFEEE6;
  --accent:#8C0031;
  --ink:#242021;
  --paper:#FFF8F4;
  --surface:#FFEEE6;
  --muted:#555152;
  --line:#EBDAD3;
  --bad:#A69A9C;
  --display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Alexandria",system-ui,sans-serif;
  --gutter:clamp(16px,5vw,72px);
  color-scheme:light;
}
/* One light look on every device: the brand is blush and burgundy, so the site does not switch to a dark version. */

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--red)}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));max-width:1360px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.25}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
html[lang="en"] body{line-height:1.65}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--red);color:var(--on-red)}
.top .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{height:32px;width:auto}
.brand span{font-family:var(--display);font-weight:600;font-size:20px}
.nav{display:flex;gap:22px;margin-inline-start:auto;font-size:15px}
.nav a{text-decoration:none;opacity:.88}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.top .btn{padding:9px 18px;font-size:14px}
.lang{display:flex;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;overflow:hidden;font-family:var(--display);font-size:13px}
.lang a{text-decoration:none;padding:5px 12px;color:var(--on-red)}
.lang a[aria-current="true"]{background:var(--on-red);color:var(--red-deep);font-weight:600}
.lang a:focus-visible{outline:2px solid #fff;outline-offset:-4px}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid currentColor;transition:transform .2s;cursor:pointer;background:none;color:inherit}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--on-red);color:var(--red-deep);border-color:var(--on-red)}
.btn.red{background:var(--red);color:var(--on-red);border-color:var(--red)}
.btn .arr{display:inline-block;transition:transform .2s}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}

/* Hero */
.hero{background:var(--red);color:var(--on-red);overflow:hidden}
.hero .wrap.main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:end;padding-block:clamp(52px,8vw,108px) clamp(32px,5vw,56px)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em;display:inline-block;padding:6px 14px;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;margin-bottom:26px}
.hero h1{font-weight:600;font-size:clamp(40px,6.6vw,92px);line-height:1.18}
html[lang="en"] .hero h1{line-height:1.06;letter-spacing:-.015em}
.hero .sub{margin-top:26px;max-width:32em;font-size:clamp(17px,1.6vw,21px);opacity:.94}
.hero .cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .fine{font-size:14px;opacity:.82;margin-top:14px}
.hero .mark{justify-self:end;color:var(--on-red);opacity:.92}
.hero .mark svg{height:clamp(160px,26vw,380px);width:auto;display:block}
.hero .stroke{height:clamp(14px,1.6vw,22px);background:var(--on-red);margin-inline-start:42%;border-start-start-radius:999px;border-end-start-radius:999px}
.trust{padding-block:26px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.trust small{font-size:13px;opacity:.8;font-family:var(--display);font-weight:500;width:100%}
.trust .chip{background:#FFFFFF;border-radius:8px;height:58px;padding:8px 14px;display:inline-flex;align-items:center}
.trust .chip img{height:100%;width:auto;max-width:150px;object-fit:contain}
@media (max-width:600px){.trust .chip{height:48px;padding:6px 10px}.trust .chip img{max-width:110px}}

/* Chapters */
section.ch{padding-block:clamp(64px,9vw,120px)}
.ch-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(32px,5vw,52px)}
.ch-no{font-family:var(--display);font-weight:600;font-size:clamp(52px,7.5vw,104px);line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums}
.ch-head h1,.ch-head h2{font-weight:600;font-size:clamp(26px,3.3vw,44px)}
.ch-head .rule{flex:1;height:4px;background:var(--ink);align-self:center;margin-top:.4em;border-radius:4px;min-width:40px}

/* Pain */
.pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,72px);border-top:2px solid var(--ink)}
.pain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding-block:26px;border-bottom:1px solid var(--line)}
.pain .x{width:30px;height:30px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;font-weight:600;font-family:var(--display);font-size:15px;margin-top:4px}
.pain h3{font-size:clamp(19px,1.8vw,23px);font-weight:600}
.pain p{color:var(--muted);margin-top:4px}
.verdict{margin-top:clamp(40px,6vw,72px);font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,58px);line-height:1.3;max-width:20em}
html[lang="en"] .verdict{line-height:1.12}
.verdict em{font-style:normal;color:var(--accent)}

.story{border-radius:14px;overflow:hidden;background:var(--surface)}
.story canvas{display:block;width:100%}

/* Reel */
.reel{position:relative;aspect-ratio:2/1;max-width:100%;border-radius:16px;overflow:hidden;background:#242021;box-shadow:0 40px 80px -40px rgba(36,32,33,.5)}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.reel img.on{opacity:1}
.reel::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(36,32,33,.55));pointer-events:none}
.reel-bar{position:absolute;z-index:2;inset:auto 24px 20px;display:flex;gap:8px}
.reel-bar i{flex:1;height:3px;border-radius:3px;background:rgba(255,238,230,.3);overflow:hidden;position:relative}
.reel-bar i::after{content:"";position:absolute;inset:0;background:#FFEEE6;transform:scaleX(0);transform-origin:left}
.reel-bar i.past::after{transform:none}
.reel-bar i.on::after{animation:fill var(--slide,5s) linear forwards}
@keyframes fill{to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .reel img.on{animation:kb 7s ease-out forwards}
  .reel img:nth-child(odd).on{transform-origin:30% 40%}
  .reel img:nth-child(even).on{transform-origin:70% 60%}
}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1.02)}}

/* Difference bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,19vw,270px);gap:14px}
.bento figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:#242021}
.bento .a{grid-column:span 2;grid-row:span 2}
.bento .b{grid-column:span 2}
.bento img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.bento figure:hover img{transform:scale(1.06)}
.bento figcaption,.work figcaption{position:absolute;inset:auto 0 0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(36,32,33,.82));color:#FFEEE6;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.bento figure:hover figcaption,.work figure:hover figcaption{opacity:1;transform:none}
.bento figcaption b{font-family:var(--display);font-size:clamp(17px,1.6vw,22px)}
.bento figcaption span{font-size:14px;opacity:.85}
@media (hover:none){.bento figcaption,.work figcaption{opacity:1;transform:none}}
.feel{margin-top:clamp(36px,5vw,64px);display:grid;gap:12px;justify-items:center;text-align:center}
.feel-1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,58px);line-height:1.25;max-width:18em}
html[lang="en"] .feel-1{line-height:1.1}
.feel-2{color:var(--muted);font-size:clamp(17px,1.6vw,21px);max-width:34em}
.feel-cta{margin-top:12px}

/* Clients */
.proof-lead{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,28px);max-width:30em;margin-bottom:36px;line-height:1.55}
html[lang="en"] .proof-lead{line-height:1.4}
.marquee{direction:ltr;display:grid;gap:14px;margin-inline:calc(-1 * max(var(--gutter),env(safe-area-inset-left,0px)));-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);overflow:hidden}
.marquee .row{list-style:none;margin:0;padding:0;display:flex;gap:14px;width:max-content;animation:slide var(--dur,60s) linear infinite}
.marquee .r1{--dur:70s}
.marquee .r2{--dur:62s;animation-direction:reverse}
.marquee .r3{--dur:76s}
.marquee:hover .row{animation-play-state:paused}
.marquee li{flex:none;width:clamp(150px,15vw,200px);aspect-ratio:2/1;background:#FFFFFF;border-radius:12px;display:grid;place-items:center;padding:14px 18px;box-shadow:0 1px 0 var(--line)}
.marquee img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s}
.marquee li:hover img{transform:scale(1.08)}
@keyframes slide{to{transform:translateX(calc(-50% - 7px))}}
.clients-count{display:flex;align-items:baseline;gap:14px;margin-top:36px;font-family:var(--display)}
.clients-count b{font-size:clamp(40px,5vw,64px);font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.clients-count span{color:var(--muted);font-size:16px}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;margin-inline:0}
  .marquee .row{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .marquee li[aria-hidden="true"]{display:none}
}
@media (max-width:600px){.marquee li{width:132px;padding:10px 12px}.marquee{gap:10px}.marquee .row{gap:10px}@keyframes slide{to{transform:translateX(calc(-50% - 5px))}}}

.clients-band{background:var(--surface);overflow:hidden}
/* Services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:2px solid var(--ink)}
.svc{padding:26px 0 30px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-content:start;padding-inline-end:28px}
.svc i{font-style:normal;font-family:var(--display);font-weight:600;font-size:15px;color:var(--red);grid-row:span 3;padding-top:6px;font-variant-numeric:tabular-nums}
.svc h3{font-size:22px}
.svc .out{font-family:var(--display);font-weight:500;color:var(--accent);font-size:15px}
.svc p{color:var(--muted);font-size:16px}

/* Work */
.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.work figure{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;max-width:100%;background:#242021}
.work img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.work figure:hover img{transform:scale(1.06)}
.work figcaption{font-family:var(--display);font-weight:600;font-size:15px}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
.step{padding:24px 0 0;padding-inline-end:24px;border-top:4px solid var(--line);position:relative}
.step:first-child{border-top-color:var(--accent)}
.step b{font-family:var(--display);font-weight:600;color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.step h3{font-size:22px;margin:6px 0 6px}
.step p{color:var(--muted);font-size:16px}
.step .when{display:block;margin-top:10px;font-family:var(--display);font-size:13px;font-weight:500;color:var(--ink)}

/* Offer */
.offer{background:var(--red);color:var(--on-red)}
.offer .wrap{padding-block:clamp(64px,9vw,120px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.offer h2{font-size:clamp(36px,5.4vw,72px);font-weight:600;line-height:1.15}
html[lang="en"] .offer h2{line-height:1.05}
.offer .s{margin-top:20px;font-size:18px;opacity:.94;max-width:28em}
.gets{margin-top:28px;list-style:none;padding:0;display:grid;gap:12px}
.gets li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px}
.gets li::before{content:"✓";font-weight:600;font-family:var(--display)}
.scarce{margin-top:28px;display:inline-flex;gap:10px;align-items:center;font-family:var(--display);font-weight:500;font-size:15px;padding:10px 16px;background:rgba(0,0,0,.14);border-radius:999px}
.scarce i{width:9px;height:9px;border-radius:50%;background:var(--on-red);display:inline-block}
@media (prefers-reduced-motion:no-preference){.scarce i{animation:pulse 1.6s infinite}}
@keyframes pulse{50%{opacity:.25}}
form.card{background:var(--paper);color:var(--ink);border-radius:10px;padding:clamp(22px,3vw,34px);display:grid;gap:16px}
form.card h3{font-size:22px}
.fld{display:grid;gap:6px}
.fld label{font-family:var(--display);font-weight:500;font-size:14px}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;width:100%}
.fld textarea{min-height:90px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
form.card .btn{justify-content:center;width:100%}
form.card .note{font-size:13px;color:var(--muted);text-align:center}
.done{background:var(--surface);border-radius:8px;padding:14px;font-size:15px}
.lines{display:grid;gap:0;margin-top:34px}
.lines div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1.5px solid rgba(255,255,255,.4);flex-wrap:wrap}
.lines dt{opacity:.82;font-size:14px}
.lines dd{margin:0;font-family:var(--display);font-weight:600;direction:ltr;user-select:all}
.lines dd a{text-decoration:none}
.lines dd a:hover{text-decoration:underline;text-underline-offset:5px}


/* Quote + careers */
.quote-sec{border-top:1px solid var(--line)}
.careers{background:var(--surface)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.side{position:sticky;top:110px;display:grid;gap:24px}
.side-lead{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.1vw,27px);line-height:1.55}
html[lang="en"] .side-lead{line-height:1.4}
.mini{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mini li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center}
.mini b{width:36px;height:36px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;font-family:var(--display);font-variant-numeric:tabular-nums}
.roles{display:flex;flex-wrap:wrap;gap:8px}
.roles span{font-family:var(--display);font-size:14px;font-weight:500;padding:7px 14px;border-radius:999px;border:1.5px solid var(--ink)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--muted)}
.perks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}
.perks li::before{content:"✓";color:var(--accent);font-weight:600;font-family:var(--display)}
form.card{border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(36,32,33,.35)}
form.card fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
form.card legend{font-family:var(--display);font-weight:600;font-size:15px;padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipbox{position:relative;cursor:pointer}
.chipbox input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chipbox span{display:inline-block;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:15px;transition:background .2s,border-color .2s,color .2s}
.chipbox input:checked + span{background:var(--red);border-color:var(--red);color:var(--on-red)}
.chipbox input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld input[type=file]{padding:10px;font-size:14px}
.flinks{display:flex;gap:18px;flex-wrap:wrap}
.flinks a{text-decoration:none;opacity:.85}.flinks a:hover{opacity:1;text-decoration:underline}
@media (max-width:980px){.split{grid-template-columns:minmax(0,1fr)}.side{position:static}}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}

/* Spam-trap field. Hidden in place: pushing it off-screen to the left made the Arabic (right-to-left) page scroll sideways */
.hp{position:absolute!important;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.done.err{color:#B3261E}
footer{background:var(--red-deep);color:var(--on-red);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;flex-wrap:wrap}
footer svg{height:30px;width:auto}

/* Mobile sticky CTA */
.mbar{display:none}

@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .sub,.hero .cta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero .sub{animation-delay:.1s}.hero .cta{animation-delay:.2s}
  .hero .stroke{animation:draw 1.1s .25s cubic-bezier(.7,0,.2,1) both;transform-origin:var(--origin,right)}
  html[dir="ltr"] .hero .stroke{--origin:left}
}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@keyframes draw{from{transform:scaleX(.08)}to{transform:none}}

@media (max-width:980px){
  .nav{display:none}
  .lang{margin-inline-start:auto}
  .hero .wrap.main,.offer .wrap{grid-template-columns:minmax(0,1fr)}
  .hero .mark{display:none}
  .hero .stroke{margin-inline-start:20%}
  .pains,.ba{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .work{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reel{aspect-ratio:4/3}
  .mbar{display:flex;position:fixed;inset:auto 0 0;z-index:9;background:var(--ink);color:var(--paper);gap:10px;align-items:center;justify-content:space-between;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .mbar span{font-family:var(--display);font-weight:500;font-size:14px}
  .mbar .btn{padding:10px 18px;font-size:14px}
  footer{padding-bottom:72px}
  .top .btn{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .work{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bento{gap:10px;grid-auto-rows:150px}
  .bento .a{grid-row:span 2}
  .reel-bar{inset:auto 14px 12px}
}

/* WhatsApp button. Appears only once a number is set at the top of site.js */
.wa{position:fixed;z-index:8;inset-block-end:calc(22px + env(safe-area-inset-bottom,0px));inset-inline-end:max(22px,env(safe-area-inset-right,0px));display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:#242021;color:#FFEEE6;border:1.5px solid rgba(255,238,230,.35);font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 14px 30px -14px rgba(36,32,33,.6);transition:transform .2s}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:22px;height:22px}
@media (max-width:980px){.wa{inset-block-end:calc(74px + env(safe-area-inset-bottom,0px));padding:12px}.wa span{display:none}}

/* Careers page (/join/) */
.page-join main{background:var(--surface)}
.page-join .careers{min-height:70vh}
@media (max-width:980px){.page-join footer{padding-bottom:0}.page-join .wa{inset-block-end:calc(22px + env(safe-area-inset-bottom,0px))}}

/* ===== Lean homepage (v2): the work fills the hero, then four short sections ===== */
section.ch{padding-block:clamp(56px,7vw,100px)}
.hero{position:relative;isolation:isolate;background:#242021;color:#FFEEE6;min-height:min(82vh,800px);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.hero .reel{position:absolute;inset:0;aspect-ratio:auto;max-width:none;border-radius:0;box-shadow:none;z-index:-1}
.hero .reel::after{inset:0;height:auto;background:linear-gradient(180deg,rgba(36,32,33,.45) 0%,rgba(36,32,33,.08) 38%,rgba(36,32,33,.82) 100%)}
.hero-in{align-self:end;width:100%;padding-block:clamp(90px,12vw,170px) 26px}
.hero .eyebrow{border-color:rgba(255,238,230,.55);color:#FFEEE6;background:rgba(36,32,33,.25);backdrop-filter:blur(6px)}
.hero h1{color:#FFEEE6;font-weight:600;font-size:clamp(40px,7.2vw,108px);line-height:1.14;max-width:11em;text-shadow:0 2px 40px rgba(0,0,0,.3)}
html[lang="en"] .hero h1{line-height:1.02;letter-spacing:-.02em}
.hero .cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.btn.ghost{background:rgba(255,238,230,.1);color:#FFEEE6;border-color:rgba(255,238,230,.6);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,238,230,.2)}
.hero-foot{display:flex;align-items:center;gap:18px;width:100%;padding-block:0 26px}
.reel-cap{font-family:var(--display);font-size:14px;color:#FFEEE6;opacity:.85;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.hero .reel-bar{position:static;inset:auto;flex:1}
.hero .reel-bar i{cursor:pointer;height:4px}

.ch-head .more{font-family:var(--display);font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.ch-head .more:hover{color:var(--accent)}
.ch-head .count{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-family:var(--display)}
.ch-head .count b{font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1;color:var(--accent)}
.ch-head .count span{font-size:14px;color:var(--muted)}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,250px);grid-auto-flow:dense;gap:12px}
.gallery figure{margin:0;position:relative;border-radius:12px;overflow:hidden;background:#242021}
.gallery .a{grid-column:span 2;grid-row:span 2}
.gallery .b{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(36,32,33,.82));color:#FFEEE6;display:flex;flex-direction:column;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.gallery figure:hover figcaption{opacity:1;transform:none}
.gallery figcaption b{font-family:var(--display);font-size:16px}
.gallery figcaption span{font-size:13px;opacity:.85}
@media (hover:none){.gallery figcaption{opacity:1;transform:none}}

.svc-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink)}
.svc-row li{padding:22px 18px 6px;border-inline-start:1px solid var(--line)}
.svc-row li:first-child{border-inline-start:0;padding-inline-start:0}
.svc-row h3{font-size:clamp(17px,1.5vw,20px);font-weight:600}
.svc-row p{color:var(--muted);font-size:14.5px;margin-top:6px;line-height:1.6}

.contact{background:var(--red);color:var(--on-red)}
.contact-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);padding-block:clamp(56px,8vw,110px);align-items:start}
.contact-side{display:grid;gap:16px;align-content:start;justify-items:start}
.contact .ch-no.light{color:var(--on-red);opacity:.45}
.contact h2{font-size:clamp(34px,4.8vw,62px);font-weight:600;line-height:1.15}
html[lang="en"] .contact h2{line-height:1.05}
.contact-side p{font-size:18px;opacity:.92;max-width:26em}
.contact-side .lines{width:100%;margin-top:8px}
.contact form.card{color:var(--ink)}

@media (max-width:980px){
  .contact-in{grid-template-columns:minmax(0,1fr)}
  .svc-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-row li,.svc-row li:first-child{border-inline-start:0;padding-inline:0 14px;border-bottom:1px solid var(--line);padding-bottom:18px}
}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44vw;gap:10px}
  .hero{min-height:min(78vh,680px)}
  .ch-head{flex-wrap:wrap}
  .ch-head .rule{min-width:24px}
}
@media (max-width:520px){
  .svc-row{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(36px,11vw,52px)}
  .reel-cap{max-width:55%}
}

/* Weights: Alexandria at 600 for headings and buttons. 800 closed up the Arabic letterforms at large sizes. */
h1,h2,h3{font-weight:600}
.eyebrow,.svc-row h3{font-weight:500}
.hero h1{letter-spacing:0}
.hero h1,.contact h2{font-weight:500}
.ch-no{font-weight:500}

/* Selected work: a few projects, shown big, each opening its own case study */
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.pick{display:block;text-decoration:none;color:inherit}
.pick .cv{border-radius:clamp(12px,1.4vw,20px);overflow:hidden;aspect-ratio:4/3;background:#242021}
.pick .cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pick:hover .cv img{transform:scale(1.05)}
.pick .meta{display:flex;align-items:baseline;gap:14px;padding-top:16px;flex-wrap:wrap}
.pick .nm{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px)}
.pick .sc{color:var(--muted);font-size:15px}
.pick .go{margin-inline-start:auto;font-family:var(--display);font-weight:500;font-size:15px;color:var(--accent);transition:transform .25s}
.pick:hover .go{transform:translateX(-6px)}
html[dir="ltr"] .pick:hover .go{transform:translateX(6px)}
@media (max-width:760px){.picks{grid-template-columns:minmax(0,1fr)}.pick .go{margin-inline-start:0;width:100%}}

/* Chapter headings, quieter: a small numbered label with a short stroke above the title, and the side note (count / Instagram link) at the end of the same row. Replaces the huge number and the long rule, which collided on phones. */
.ch-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:10px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.ch-head .ch-no{grid-column:1;grid-row:1;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;line-height:1;letter-spacing:.06em;color:var(--accent)}
.ch-no::after{content:"";width:32px;height:2px;border-radius:2px;background:currentColor}
.ch-head h1,.ch-head h2{grid-column:1;grid-row:2;font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.2}
.ch-head .rule{display:none}
.ch-head .more,.ch-head .count{grid-column:2;grid-row:2;align-self:end;padding-bottom:.35em}
.contact .ch-no{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1;margin-bottom:18px}
@media (max-width:640px){
  .ch-head{grid-template-columns:minmax(0,1fr)}
  .ch-head .more,.ch-head .count{grid-column:1;grid-row:3;padding-bottom:0}
}
/* Section numbers removed (Abdulla, 14 Nov 2026): title and side note share one row. */
.ch-head h1,.ch-head h2,.ch-head .more,.ch-head .count{grid-row:1}
@media (max-width:640px){.ch-head .more,.ch-head .count{grid-row:2}}