/* Ahmed Metwaly · v2 · sections below the hero */
.hero .label{display:flex;align-items:center;gap:14px}
.hero .label img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--brass),0 0 0 5px rgba(201,163,95,.14)}
section.s{padding:clamp(88px,11vw,150px) 0;border-top:1px solid var(--line);position:relative}
.s-head{display:grid;grid-template-columns:240px 1fr;gap:40px;margin-bottom:clamp(44px,6vw,72px)}
.s-head h2{font:400 clamp(36px,4.4vw,64px)/1.05 var(--display);letter-spacing:-.01em;max-width:18ch}
.s-head h2 em{font-style:italic;color:var(--brass-2)}
:root[dir="rtl"] .s-head h2{font:700 clamp(30px,3.6vw,50px)/1.45 var(--display)}
:root[dir="rtl"] .s-head h2 em{font-style:normal}
@media (max-width:860px){.s-head{grid-template-columns:1fr;gap:18px}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.portrait{position:relative;margin:0;isolation:isolate}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:7/8;object-fit:cover;filter:saturate(.95) contrast(1.03)}
.portrait .frame{position:relative;isolation:isolate}
.portrait .frame::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--brass);z-index:-1;pointer-events:none}
:root[dir="rtl"] .portrait .frame::before{inset:16px 16px -16px -16px}
.portrait figcaption{margin-top:44px;font-size:13.5px;color:var(--dim)}
.portrait figcaption b{display:block;font:500 23px/1.2 var(--display);color:var(--ivory)}
:root[dir="rtl"] .portrait figcaption b{font:700 20px/1.45 var(--display)}
.about__text .lead{font:400 clamp(24px,2.4vw,34px)/1.3 var(--display);color:var(--ivory);margin-bottom:34px}
.about__text .lead em{font-style:italic;color:var(--brass-2)}
:root[dir="rtl"] .about__text .lead{font:400 clamp(21px,2vw,28px)/1.75 var(--display)}
:root[dir="rtl"] .about__text .lead em{font-style:normal}
.about__text p{color:var(--muted);max-width:64ch}
.about__text p+p{margin-top:18px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:42px;padding-top:34px;border-top:1px solid var(--line)}
.cols h3{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
:root[dir="rtl"] .cols h3{font:600 14.5px/1.4 var(--text);letter-spacing:0}
.cols p{font-size:15.5px}
@media (max-width:900px){.about{grid-template-columns:1fr}.portrait{max-width:440px}.cols{grid-template-columns:1fr}}

/* method: the project ledger, ticked as you scroll */
.ledger{position:relative;border-top:1px solid var(--line-2);padding-inline-start:28px}
.ledger .rail{position:absolute;inset-inline-start:0;top:0;width:2px;height:0;background:linear-gradient(var(--brass),var(--brass-2))}
.ledger::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--line)}
.ledger li{list-style:none;display:grid;grid-template-columns:90px 1fr 1.15fr 150px;gap:28px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.ledger .n{font:500 12px/1 var(--mono);color:var(--dim);letter-spacing:.14em}
.ledger h3{font:400 clamp(24px,2.3vw,32px)/1.12 var(--display)}
:root[dir="rtl"] .ledger h3{font:700 clamp(20px,1.9vw,26px)/1.45 var(--display)}
.ledger p{color:var(--muted);font-size:15.5px}
.ledger .tick{justify-self:end;font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--brass);display:flex;align-items:center;gap:10px;white-space:nowrap}
:root[dir="rtl"] .ledger .tick{font:600 13px/1 var(--text);letter-spacing:0}
.ledger .tick i{width:24px;height:24px;border-radius:50%;border:1px solid var(--brass);display:grid;place-items:center;font-style:normal;font-size:12px;
  transform:scale(.4);opacity:.2;transition:transform .5s var(--ease),opacity .5s,background .5s,color .5s}
.ledger li.in .tick i{transform:none;opacity:1;background:var(--brass);color:var(--night)}
.ledger .total{border-bottom:0;padding-top:42px}
.ledger .total h3{font:italic 500 clamp(36px,3.8vw,56px)/1 var(--display);color:var(--brass-2);display:inline-block;padding-bottom:8px;border-bottom:4px double var(--brass)}
:root[dir="rtl"] .ledger .total h3{font:700 clamp(28px,3vw,42px)/1.45 var(--display)}
.practices{display:flex;flex-wrap:wrap;gap:10px;margin-top:52px}
.practices span{padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;color:var(--muted)}
@media (max-width:860px){.ledger li{grid-template-columns:44px 1fr;gap:6px 14px}.ledger p,.ledger .tick{grid-column:2}.ledger .tick{justify-self:start;margin-top:10px}}

/* services */
.services{border-top:1px solid var(--line-2)}
.svc{display:grid;grid-template-columns:1fr 1.1fr 40px;gap:32px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .4s var(--ease)}
.svc::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:1px;width:0;background:var(--brass);transition:width .6s var(--ease)}
.svc:hover::after{width:100%}
.svc:hover{padding-inline-start:14px}
.svc h3{font:400 clamp(24px,2.4vw,34px)/1.12 var(--display)}
.svc h3 small{display:block;margin-top:8px;font:400 15px/1.4 var(--text);color:var(--dim)}
:root[dir="rtl"] .svc h3{font:700 clamp(20px,2vw,27px)/1.45 var(--display)}
.svc p{color:var(--muted);font-size:15.5px}
.svc .arr{color:var(--brass);font:400 24px/1 var(--display);justify-self:end;opacity:.45;transition:opacity .3s,transform .3s var(--ease)}
.svc:hover .arr{opacity:1;transform:translateX(4px)}
:root[dir="rtl"] .svc .arr{transform:scaleX(-1)} :root[dir="rtl"] .svc:hover .arr{transform:scaleX(-1) translateX(4px)}
.svc.rescue h3{color:var(--brass-2)}
@media (max-width:860px){.svc{grid-template-columns:1fr;gap:10px}.svc .arr{display:none}}

/* career */
.career{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(40px,6vw,90px);align-items:start}
.jobs li{list-style:none;display:grid;grid-template-columns:160px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.jobs li:first-child{border-top:1px solid var(--line-2)}
.jobs time{font:500 12px/1.7 var(--mono);color:var(--brass);letter-spacing:.06em}
.jobs b{display:block;font:500 22px/1.25 var(--display);color:var(--ivory)}
:root[dir="rtl"] .jobs b{font:700 19px/1.5 var(--display)}
.jobs span{font-size:14.5px;color:var(--dim)}
.jobs .now b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brass);margin-inline-start:12px;vertical-align:middle;box-shadow:0 0 0 4px rgba(201,163,95,.18)}
.cred-card{border:1px solid var(--line-2);padding:34px 32px;background:linear-gradient(180deg,rgba(201,163,95,.07),transparent 60%)}
.cred-card h3{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
:root[dir="rtl"] .cred-card h3{font:600 14.5px/1.4 var(--text);letter-spacing:0}
.cred-card dl div{padding:16px 0;border-top:1px solid var(--line)}
.cred-card dt{font:500 20px/1.3 var(--display);color:var(--ivory)}
:root[dir="rtl"] .cred-card dt{font:700 18px/1.5 var(--display)}
.cred-card dd{font-size:14px;color:var(--dim);margin-top:4px}
@media (max-width:900px){.career{grid-template-columns:1fr}.jobs li{grid-template-columns:1fr;gap:6px}}

/* episodes */
.episodes{background:linear-gradient(180deg,#0e1729,#0b1220)}
.ep{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:center}
.ep__card{position:relative;aspect-ratio:9/12;max-width:360px;justify-self:center;width:100%;border:1px solid var(--line-2);border-radius:24px;overflow:hidden;
  background:radial-gradient(70% 50% at 50% 30%,rgba(201,163,95,.28),transparent 70%),#0f182a;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;text-decoration:none}
.ep__card .play-big{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:1px solid var(--brass);display:grid;place-items:center;transition:background .3s}
.ep__card .play-big::before{content:"";border-left:18px solid var(--brass);border-block:11px solid transparent;margin-left:5px}
.ep__card:hover .play-big{background:rgba(201,163,95,.12)}
.ep__card b{font:italic 500 28px/1.1 var(--display)}
:root[dir="rtl"] .ep__card b{font:700 23px/1.45 var(--display)}
.ep__card span{font-size:13px;color:var(--dim);margin-top:8px}
.ep p{color:var(--muted);max-width:54ch}
.ep p+p{margin-top:16px}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.socials a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;font-size:14px;color:var(--ivory);transition:border-color .3s,background .3s}
.socials a:hover{border-color:var(--brass);background:rgba(201,163,95,.08)}
.socials small{color:var(--dim)}
@media (max-width:860px){.ep{grid-template-columns:1fr}}

/* contact */
.contact{text-align:center;padding:clamp(110px,14vw,190px) 0;border-top:1px solid var(--line);
  background:radial-gradient(50% 60% at 50% 100%,rgba(201,163,95,.17),transparent 70%)}
.contact .label{justify-content:center}
.contact h2{font:400 clamp(40px,5.6vw,84px)/1.04 var(--display);max-width:16ch;margin:22px auto 0;letter-spacing:-.01em}
.contact h2 em{font-style:italic;color:var(--brass-2)}
:root[dir="rtl"] .contact h2{font:700 clamp(30px,4.2vw,58px)/1.5 var(--display)}
:root[dir="rtl"] .contact h2 em{font-style:normal}
.contact .hero__act{justify-content:center}
.contact .note{margin-top:22px;font-size:13.5px;color:var(--dim)}
footer{border-top:1px solid var(--line);padding:34px 0;font-size:13.5px;color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--brass)}

@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
}

/* industries: accordion of 12 (challenge, Odoo answer, modules) */
.inds{border-top:1px solid var(--line-2);columns:2;column-gap:56px}
.ind{break-inside:avoid;border-bottom:1px solid var(--line)}
.ind summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;align-items:center;gap:4px 16px;padding:24px 0}
.ind summary::-webkit-details-marker{display:none}
.ind summary b{font:400 clamp(23px,2.1vw,30px)/1.15 var(--display);transition:color .3s}
:root[dir="rtl"] .ind summary b{font:700 clamp(19px,1.7vw,24px)/1.45 var(--display)}
.ind summary small{grid-column:1;font-size:13px;color:var(--dim)}
.ind summary i{grid-row:1/span 2;grid-column:2;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);position:relative;transition:transform .4s var(--ease),box-shadow .3s}
.ind summary i::before,.ind summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--brass);transform:translate(-50%,-50%)}
.ind summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.ind[open] summary i{box-shadow:inset 0 0 0 1px var(--brass)}
.ind[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.ind summary:hover b,.ind[open] summary b{color:var(--brass-2)}
.ind__body{display:grid;gap:16px;padding:0 0 28px}
.ind__body h4{font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
:root[dir="rtl"] .ind__body h4{font:600 13.5px/1.4 var(--text);letter-spacing:0}
.ind__body p{color:var(--muted);font-size:15.5px}
.mods{display:flex;flex-wrap:wrap;gap:8px}
.mods span{padding:6px 12px;border-radius:999px;font-size:12.5px;color:#9fdbe6;background:rgba(14,116,144,.16);box-shadow:inset 0 0 0 1px rgba(14,116,144,.55)}
@media (prefers-reduced-motion:no-preference){.ind[open] .ind__body{animation:open .5s var(--ease)}@keyframes open{from{opacity:0;transform:translateY(-6px)}}}
@media (max-width:860px){.inds{columns:1}}

/* countries */
.countries{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-2)}
.countries li{padding:30px 24px 34px;border-inline-end:1px solid var(--line);position:relative;transition:background .4s}
.countries li:last-child{border-inline-end:0}
.countries li:hover{background:rgba(201,163,95,.05)}
.countries .cc{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--brass);font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--brass);margin-bottom:22px}
.countries b{display:block;font:400 30px/1.1 var(--display)}
:root[dir="rtl"] .countries b{font:700 24px/1.45 var(--display)}
.countries p{margin-top:10px;color:var(--muted);font-size:14.5px}
@media (max-width:1000px){.countries{grid-template-columns:repeat(2,1fr)}.countries li{border-bottom:1px solid var(--line)}}
@media (max-width:520px){.countries{grid-template-columns:1fr}.countries li{border-inline-end:0}}
.creds div{padding-inline-end:16px}.creds div+div{padding-inline-start:16px}

[hidden]{display:none!important}
.creds b,.countries b,.jobs time,.ledger .n{font-variant-numeric:lining-nums}