/* Compucologne – Cairo hub serving Europe. Tokens first, then components. */
:root{
  --bg:#F4F5F8; --surface:#FFFFFF; --ink:#141A2B; --muted:#5A6175; --line:#DCDFE8;
  --accent:#F28C28; --accent-ink:#201407; --nile:#14213F; --signal:#F59A32; --ok:#1F8A4C;
  --on-dark:#EEF0F7; --on-dark-muted:#A7B0C8; --on-dark-accent:#FFC078;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --s1:.75rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1220;--surface:#151C2E;--ink:#E9ECF4;--muted:#9AA2B8;--line:#262F45;
  --accent:#FFA13A;--accent-ink:#1A0D04;--nile:#101A33;--signal:#FFB34F;--ok:#4CC27E;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1220;--surface:#151C2E;--ink:#E9ECF4;--muted:#9AA2B8;--line:#262F45;
  --accent:#FFA13A;--accent-ink:#1A0D04;--nile:#101A33;--signal:#FFB34F;--ok:#4CC27E;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.6}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.1;margin:0}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-variation-settings:"wdth" 112;font-weight:700;letter-spacing:-.01em}
h3{font-size:1.15rem;font-weight:700;font-variation-settings:"wdth" 112}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lead{color:var(--muted);max-width:62ch;font-size:1.08rem}
section{padding-block:var(--s6)}
section.tight{padding-top:0}
.sec-head{display:grid;gap:var(--s2);margin-bottom:var(--s4)}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:var(--s3);padding-block:.9rem}
.logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;white-space:nowrap}
.logo img{display:block;width:clamp(190px,22vw,260px);height:auto;max-height:58px;object-fit:contain;object-position:left center}
@media(max-width:560px){.logo img{width:190px;max-height:44px}}
.mainnav{display:flex;gap:var(--s3);margin-left:auto;font-size:.95rem}
.mainnav a{text-decoration:none;color:var(--muted)}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--ink)}
.mainnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;font:600 .9rem var(--f-body);color:var(--ink);cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;font:600 .95rem var(--f-body)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .bar .btn-primary{display:none}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .mainnav a{padding-block:.8rem;border-top:1px solid var(--line)}
  .mainnav.open{display:flex}
}

/* Home hero */
.hero{padding-block:var(--s5) var(--s6)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--s4)}}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:800;font-variation-settings:"wdth" 125;letter-spacing:-.02em;margin-block:var(--s2) var(--s3)}
.hero h1 em,.page-hero h1 em{font-style:normal;color:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.fact b{display:block;font-family:var(--f-display);font-size:1.6rem;font-variation-settings:"wdth" 112;font-variant-numeric:tabular-nums}
.fact span{color:var(--muted);font-size:.88rem}

/* City board */
.board{background:linear-gradient(180deg,rgba(13,25,49,.78),rgba(13,25,49,.92)),url("images/cairo-team.webp") center/cover no-repeat;color:var(--on-dark);border-radius:20px;padding:var(--s3);display:grid;gap:var(--s2);box-shadow:0 18px 45px rgba(12,24,46,.16)}
.board .eyebrow{color:var(--on-dark-accent)}
.hub{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid rgba(255,255,255,.12)}
.hub small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.hub .t{font-family:var(--f-mono);font-size:clamp(1.8rem,4vw,2.4rem);color:#fff;font-variant-numeric:tabular-nums}
.cities{list-style:none;margin:0;padding:0;display:grid}
.city{display:grid;grid-template-columns:1fr auto 3.6rem;gap:var(--s2);align-items:center;padding-block:.55rem;border-bottom:1px dashed rgba(255,255,255,.1)}
.city:last-child{border-bottom:0}
.city a{font-weight:600;text-decoration:none}
.city a:hover{color:var(--on-dark-accent)}
.city .ct{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:#fff}
.city .off{font-family:var(--f-mono);font-size:.75rem;text-align:right;color:var(--on-dark-accent);font-variant-numeric:tabular-nums}
.status{display:flex;align-items:center;gap:.6rem;font-size:.9rem;padding-top:var(--s2);border-top:1px solid rgba(255,255,255,.12)}
.dot{width:9px;height:9px;border-radius:50%;background:#4CC27E;box-shadow:0 0 0 4px rgba(76,194,126,.2);flex:none}

/* Services grid */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.svc a{background:var(--surface);padding:var(--s3);display:grid;gap:.6rem;text-decoration:none;align-content:start;min-height:12rem;transition:background .2s}
.svc a:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.svc .tag{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.svc p{color:var(--muted);font-size:.95rem}
.svc .more{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--accent)}
.svc a.feature{background:var(--accent);color:var(--accent-ink)}
.svc a.feature p,.svc a.feature .tag,.svc a.feature .more{color:var(--accent-ink);opacity:.92}

.markets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
@media (max-width:900px){.markets{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.markets{grid-template-columns:repeat(2,1fr)}}
.mk{border-top:2px solid var(--ink);padding-top:var(--s1);display:grid;gap:.15rem;text-decoration:none}
.mk:hover h3{color:var(--accent)}
.mk span{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--ink);padding-top:var(--s2);display:grid;gap:.5rem;counter-increment:s;align-content:start}
.step::before{content:"Step " counter(s);font-family:var(--f-mono);font-size:.75rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.step p{color:var(--muted);font-size:.95rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:var(--s4)}}
.checks{display:grid;gap:var(--s3)}
.checks div{display:grid;grid-template-columns:2rem 1fr;gap:.4rem var(--s2)}
.checks svg{grid-row:span 2;color:var(--accent);margin-top:.2rem}
.checks p{color:var(--muted);font-size:.95rem;grid-column:2}

.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.cert{border:1px solid var(--line);border-radius:12px;padding:var(--s2);background:var(--surface);display:grid;gap:.2rem}
.cert b{font-family:var(--f-display);font-variation-settings:"wdth" 112;font-size:1.02rem}
.cert span{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.pills span{font-family:var(--f-mono);font-size:.8rem;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:.3rem .8rem}

/* Sub pages */
.page-hero{padding-block:var(--s5) var(--s4);border-bottom:1px solid var(--line);background-image:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 42%,color-mix(in srgb,var(--bg) 28%,transparent) 100%),url("images/cairo-team.webp");background-position:center,right center;background-size:cover,56% auto;background-repeat:no-repeat}
.crumbs{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--s3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;font-variation-settings:"wdth" 125;letter-spacing:-.02em;margin-block:var(--s1) var(--s3);max-width:20ch}
.content{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s5);padding-block:var(--s5)}
@media (max-width:960px){.content{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}
.prose{display:grid;gap:var(--s3);max-width:68ch;min-width:0}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-top:var(--s3)}
.prose h3{margin-top:var(--s1)}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--ink)}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent)}
.side{display:grid;gap:var(--s3);align-content:start}
.side-card{border:1px solid var(--line);border-radius:16px;padding:var(--s3);background:var(--surface);display:grid;gap:var(--s1)}
.side-card.dark{background:var(--nile);border-color:var(--nile);color:var(--on-dark)}
.side-card.dark p{color:var(--on-dark-muted)}
.side-card.dark .eyebrow{color:var(--on-dark-accent)}
.side-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.92rem}
.side-card ul a{text-decoration:none;color:var(--muted)}
.side-card ul a:hover,.side-card ul a[aria-current="page"]{color:var(--accent)}
.sel{user-select:all;font-family:var(--f-mono)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s2)}
.box{border:1px solid var(--line);border-radius:14px;padding:var(--s3);background:var(--surface);display:grid;gap:.5rem;align-content:start}
.box p{font-size:.95rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem var(--s3);font-size:.95rem;margin:0}
.kv dt{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:.15rem}
.kv dd{margin:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--surface)}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
details{border-bottom:1px solid var(--line);padding-block:var(--s2)}
details summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 112;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:var(--s2)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--accent);font-family:var(--f-mono)}
details[open] summary::after{content:"−"}
details p{margin-top:var(--s1);color:var(--muted)}
.todo{background:color-mix(in srgb,var(--signal) 18%,var(--surface));border:1px dashed var(--accent);border-radius:6px;padding:0 .35rem;font-family:var(--f-mono);font-size:.85em}
.band{background:var(--nile);color:var(--on-dark)}
.band .lead{color:var(--on-dark-muted)}
.band .eyebrow{color:var(--on-dark-accent)}
.band-inner{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;padding-block:var(--s5)}

/* Contact */
.contact{background:var(--nile);color:var(--on-dark)}
.contact .lead{color:var(--on-dark-muted)}
.contact .eyebrow{color:var(--on-dark-accent)}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s5)}
@media (max-width:860px){.cgrid{grid-template-columns:1fr;gap:var(--s4)}}
.offices{display:grid;gap:var(--s3);margin-top:var(--s4)}
.office{display:grid;gap:.15rem}
.office small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-accent)}
.office .sel{font-size:.95rem;color:#fff}
.contact-form{background:var(--surface);color:var(--ink);border-radius:20px;padding:var(--s4) var(--s3);display:grid;gap:var(--s2);min-width:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media (max-width:520px){.f2{grid-template-columns:1fr}}
.contact-form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-weight:400;font-size:.98rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.contact-form textarea{min-height:7rem;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{display:inline-flex;font-weight:500;font-size:.85rem;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.chips input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.note{font-size:.85rem;color:var(--muted)}
.note a{color:var(--accent)}
.form-msg{border-left:3px solid var(--ok);padding:.6rem .9rem;background:color-mix(in srgb,var(--ok) 10%,var(--surface));font-size:.92rem}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:var(--s5) var(--s4);font-size:.9rem;color:var(--muted)}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s4)}
@media (max-width:860px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fcols{grid-template-columns:1fr}}
.fcols h3{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:var(--s1)}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fcols a{text-decoration:none}
.fcols a:hover{color:var(--accent)}
.fbottom{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:.82rem}
.fbottom nav{display:flex;gap:var(--s3)}
.fbottom a{text-decoration:none}

/* Photo-led storytelling */
.visual-section{padding-block:var(--s5) var(--s6)}
.visual-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:var(--s2)}
.visual-card{position:relative;min-height:320px;overflow:hidden;border-radius:18px;background:var(--nile);isolation:isolate}
.visual-card-wide{min-height:390px}
.visual-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .55s ease}
.visual-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,20,39,0) 24%,rgba(9,20,39,.86) 100%)}
.visual-card:hover img{transform:scale(1.035)}
.visual-caption{position:absolute;left:0;right:0;bottom:0;padding:var(--s3);color:#fff;display:grid;gap:.45rem}
.visual-caption .tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#ffd0ad}
.visual-caption h3{font-size:clamp(1.2rem,2vw,1.55rem)}
.visual-caption p{font-size:.92rem;color:rgba(255,255,255,.82);max-width:34ch}
@media(max-width:800px){.visual-grid{grid-template-columns:1fr 1fr}.visual-card-wide{grid-column:1/-1;min-height:330px}}
@media(max-width:560px){.visual-grid{grid-template-columns:1fr}.visual-card,.visual-card-wide{min-height:270px}.page-hero{background-image:linear-gradient(90deg,rgba(244,245,248,.96),rgba(244,245,248,.84)),url("images/cairo-team.webp");background-position:center;background-size:cover}}