/* ============ FONTS ============ */
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-display:block;}
@font-face{font-family:'Inter';src:url('fonts/Inter.ttf') format('truetype');font-weight:100 900;font-display:block;}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:block;}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Medium.ttf') format('truetype');font-weight:500;font-display:block;}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-display:block;}
@font-face{font-family:'Tajawal';src:url('fonts/Tajawal-ExtraBold.ttf') format('truetype');font-weight:800;font-display:block;}

/* ============ TOKENS ============ */
:root{
  --ink:#0C1B2A;          /* blueprint navy - primary dark */
  --ink2:#10293B;         /* panel */
  --ink3:#081420;         /* deepest */
  --paper:#ECEFF1;        /* cool light section */
  --paper2:#F7F9FA;       /* lightest */
  --brass:#C6A15B;        /* premium accent */
  --brass-2:#D9BC84;
  --steel:#6E93AB;        /* blueprint line / secondary */
  --steel-soft:rgba(110,147,171,.18);
  --grid:rgba(126,167,192,.10);
  --light:#E8EEF2;
  --light-muted:rgba(232,238,242,.60);
  --dark:#15212D;
  --dark-muted:#4E5E6B;
  --line-dark:rgba(232,238,242,.12);
  --line-light:rgba(12,27,42,.12);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-ar:'Tajawal',sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--font-body);color:var(--dark);background:var(--paper2);line-height:1.55;}
[dir="rtl"] body{font-family:var(--font-ar);}
[dir="rtl"]{letter-spacing:0 !important;}

img,svg{display:block;}
a{color:inherit;text-decoration:none;}

/* mock ribbon (labels which url/lang each board is) */
.ribbon{background:var(--ink3);color:var(--light-muted);font-family:var(--font-body);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 26px;border-bottom:1px solid var(--line-dark);}
[dir="rtl"] .ribbon{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:13px;}
.ribbon .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:7px;}
.ribbon .dots{display:flex;align-items:center;gap:7px;}
.ribbon b{color:var(--brass-2);font-weight:600;}

/* ============ LOGO MARK ============ */
.mark{flex:none;}
.mark .col,.mark .beam{stroke:var(--brass);stroke-width:6;stroke-linecap:square;}
.mark .brace{stroke:var(--steel);stroke-width:2;opacity:.85;}
.mark .node{fill:var(--brass);}
.mark.on-dark .brace{stroke:var(--steel);}

.logo-lockup{display:flex;align-items:center;gap:16px;}
.logo-word{font-family:var(--font-display);font-weight:600;letter-spacing:.20em;
  font-size:21px;line-height:1;}
.logo-word .the{display:block;font-size:10.5px;letter-spacing:.42em;font-weight:500;
  color:var(--brass);margin-bottom:5px;}
.on-dark .logo-word{color:var(--light);}
.on-light .logo-word{color:var(--ink);}

/* ============ NAV ============ */
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;background:var(--ink);border-bottom:1px solid var(--line-dark);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-family:var(--font-body);font-size:14px;color:var(--light-muted);
  letter-spacing:.01em;transition:color .2s;}
[dir="rtl"] .nav-links a{font-family:var(--font-ar);font-size:15px;}
.nav-links a:hover{color:var(--light);}
.nav-right{display:flex;align-items:center;gap:20px;}
.lang-toggle{display:flex;border:1px solid var(--line-dark);border-radius:2px;overflow:hidden;
  font-family:var(--font-body);font-size:12px;letter-spacing:.08em;}
.lang-toggle span{padding:6px 11px;color:var(--light-muted);}
.lang-toggle .active{background:var(--brass);color:var(--ink);font-weight:600;}
.btn{font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:.04em;
  padding:12px 22px;border-radius:2px;border:1px solid var(--brass);background:var(--brass);
  color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:.2s;}
[dir="rtl"] .btn{font-family:var(--font-ar);letter-spacing:0;font-weight:700;}
.btn:hover{background:var(--brass-2);}
.btn.ghost{background:transparent;color:var(--light);border-color:var(--line-dark);}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass-2);}
.btn .arr{font-size:15px;}
[dir="rtl"] .btn .arr{transform:scaleX(-1);}

/* ============ HERO ============ */
.hero{position:relative;background:var(--ink);color:var(--light);overflow:hidden;
  padding:96px 40px 110px;}
.hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(120% 90% at 70% 25%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 25%,#000 35%,transparent 78%);}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);margin-bottom:26px;}
[dir="rtl"] .eyebrow{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:14px;}
.eyebrow .tick{width:26px;height:1px;background:var(--brass);}
h1{font-family:var(--font-display);font-weight:500;font-size:54px;line-height:1.06;
  letter-spacing:-.015em;margin-bottom:24px;}
[dir="rtl"] h1{font-family:var(--font-ar);font-weight:800;letter-spacing:0;line-height:1.25;font-size:46px;}
h1 .accent{color:var(--brass);}
.lead{font-size:17px;line-height:1.7;color:var(--light-muted);max-width:30em;margin-bottom:34px;}
[dir="rtl"] .lead{font-size:18px;line-height:1.95;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* hero blueprint figure */
.blueprint{position:relative;aspect-ratio:1/1;border:1px solid var(--line-dark);
  border-radius:3px;background:linear-gradient(160deg,rgba(110,147,171,.06),transparent 60%);
  display:flex;align-items:center;justify-content:center;}
.blueprint .corner{position:absolute;width:10px;height:10px;border:1px solid var(--steel);}
.blueprint .c1{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.blueprint .c2{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.blueprint .c3{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.blueprint .c4{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.blueprint .dim{position:absolute;font-family:var(--font-display);font-size:10px;
  letter-spacing:.15em;color:var(--steel);opacity:.8;}

/* ============ SECTIONS ============ */
section{padding:84px 40px;}
.wrap{max-width:var(--maxw);margin:0 auto;}
.kicker{font-family:var(--font-display);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);display:flex;align-items:center;gap:12px;margin-bottom:20px;}
[dir="rtl"] .kicker{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:14px;}
.kicker::before{content:"";width:26px;height:1px;background:var(--brass);}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:48px;}
h2{font-family:var(--font-display);font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-.01em;color:var(--ink);}
[dir="rtl"] h2{font-family:var(--font-ar);font-weight:800;letter-spacing:0;line-height:1.3;}
.sec-head p{color:var(--dark-muted);font-size:15.5px;max-width:34em;}
[dir="rtl"] .sec-head p{font-size:16.5px;}

/* services */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-light);
  border:1px solid var(--line-light);}
.svc{background:var(--paper2);padding:34px 32px;}
.svc-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;}
.svc h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);}
[dir="rtl"] .svc h3{font-family:var(--font-ar);font-weight:700;}
.svc .code{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;color:var(--brass);
  border:1px solid var(--brass);border-radius:2px;padding:3px 7px;white-space:nowrap;}
.svc .desc{color:var(--dark-muted);font-size:14.5px;margin-bottom:20px;line-height:1.6;}
[dir="rtl"] .svc .desc{font-size:15.5px;}
.svc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.svc li{font-size:12.5px;color:var(--dark);background:var(--paper);border:1px solid var(--line-light);
  border-radius:2px;padding:5px 10px;}
[dir="rtl"] .svc li{font-size:13.5px;}

/* approach */
.approach{background:var(--ink);color:var(--light);}
.approach h2{color:var(--light);}
.approach .sec-head p{color:var(--light-muted);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);}
.step{background:var(--ink);padding:30px 26px;position:relative;}
.step .n{font-family:var(--font-display);font-size:13px;letter-spacing:.2em;color:var(--brass);margin-bottom:30px;}
.step h4{font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:12px;color:var(--light);}
[dir="rtl"] .step h4{font-family:var(--font-ar);font-weight:700;}
.step p{font-size:13.5px;color:var(--light-muted);line-height:1.6;}
[dir="rtl"] .step p{font-size:14.5px;}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
.ind{background:var(--paper2);padding:26px 24px;font-family:var(--font-display);font-weight:500;
  font-size:15px;color:var(--ink);display:flex;align-items:center;gap:12px;min-height:92px;}
[dir="rtl"] .ind{font-family:var(--font-ar);font-weight:700;font-size:16px;}
.ind .b{width:7px;height:7px;background:var(--brass);flex:none;}

/* why */
.why{background:var(--paper);}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
.why-item{background:var(--paper2);padding:32px 30px;}
.why-item .wn{font-family:var(--font-display);font-size:12px;letter-spacing:.18em;color:var(--brass);margin-bottom:14px;}
.why-item h4{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:10px;}
[dir="rtl"] .why-item h4{font-family:var(--font-ar);font-weight:700;}
.why-item p{color:var(--dark-muted);font-size:14.5px;line-height:1.65;}
[dir="rtl"] .why-item p{font-size:15.5px;}

/* cta band */
.cta-band{background:var(--ink3);color:var(--light);text-align:center;padding:92px 40px;position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(70% 120% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 120% at 50% 0%,#000,transparent 75%);}
.cta-band .inner{position:relative;max-width:680px;margin:0 auto;}
.cta-band h2{color:var(--light);font-size:40px;margin-bottom:18px;}
.cta-band p{color:var(--light-muted);font-size:16.5px;margin-bottom:32px;}
.cta-band .mail{font-family:var(--font-display);color:var(--brass-2);font-size:15px;letter-spacing:.04em;margin-top:26px;}
[dir="rtl"] .cta-band .mail{font-family:var(--font-ar);}

/* footer */
footer{background:var(--ink);color:var(--light-muted);padding:54px 40px 30px;border-top:1px solid var(--line-dark);}
.foot-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid var(--line-dark);}
.foot-top p{font-size:13.5px;line-height:1.7;margin-top:18px;max-width:26em;}
[dir="rtl"] .foot-top p{font-size:14.5px;}
.foot-col h5{font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--light);margin-bottom:16px;}
[dir="rtl"] .foot-col h5{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:14px;}
.foot-col a,.foot-col span{display:block;font-size:13.5px;margin-bottom:9px;color:var(--light-muted);}
.foot-bottom{max-width:var(--maxw);margin:22px auto 0;display:flex;justify-content:space-between;
  font-size:12px;color:var(--light-muted);letter-spacing:.03em;}
[dir="rtl"] .foot-bottom{font-size:12.5px;}
.foot-bottom .reg{color:var(--steel);}

/* ============ BOARDS (cover / brand / styleguide) ============ */
.board{width:1440px;background:var(--ink);color:var(--light);position:relative;overflow:hidden;}
.board.light{background:var(--paper2);color:var(--ink);}
.board .grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;opacity:.7;}
.cover{padding:90px;min-height:900px;display:flex;flex-direction:column;justify-content:space-between;position:relative;}
.cover .top{position:relative;z-index:2;}
.cover .big{position:relative;z-index:2;}
.cover .big .eyebrow{margin-bottom:30px;}
.cover h1.coverh{font-family:var(--font-display);font-weight:500;font-size:72px;line-height:1.02;letter-spacing:-.02em;color:var(--light);max-width:16ch;}
.cover h1.coverh .accent{color:var(--brass);}
.cover .sub{color:var(--light-muted);font-size:18px;margin-top:26px;max-width:46ch;line-height:1.7;}
.cover .meta{position:relative;z-index:2;display:flex;gap:70px;border-top:1px solid var(--line-dark);padding-top:30px;}
.cover .meta div span{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:8px;}
.cover .meta div b{font-weight:500;font-size:15px;color:var(--light);}

.brand-board{padding:80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.bb-full{grid-column:1/-1;}
.specimen{border:1px solid var(--line-light);padding:40px;border-radius:3px;background:var(--paper2);}
.specimen.dark{background:var(--ink);border-color:var(--line-dark);color:var(--light);}
.swatches{display:flex;gap:0;border:1px solid var(--line-light);border-radius:3px;overflow:hidden;}
.sw{flex:1;height:120px;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;}
.sw span{font-family:var(--font-display);font-size:11px;letter-spacing:.05em;}
.type-row{display:flex;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-light);}
.board h3.bh{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:24px;}
.board.light h3.bh{color:#9C7A33;}

/* ============ LIVE SITE: nav, sticky, toggle ============ */
html{scroll-behavior:smooth;}
section[id],header[id]{scroll-margin-top:82px;}
.nav{position:sticky;top:0;z-index:60;}
.brand{display:flex;align-items:center;}
.nav-menu{display:flex;align-items:center;gap:34px;margin-inline-start:auto;}
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--light);
  width:44px;height:40px;border-radius:3px;font-size:17px;cursor:pointer;align-items:center;justify-content:center;}
.lang-toggle a{padding:6px 11px;color:var(--light-muted);transition:.2s;}
.lang-toggle a.active{background:var(--brass);color:var(--ink);font-weight:600;}
.lang-toggle a:not(.active):hover{color:var(--light);}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* about */
.about{background:var(--paper2);}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;}
.about-lead{font-size:16px;color:var(--dark-muted);line-height:1.85;}
[dir="rtl"] .about-lead{font-size:17px;}
.about-lead strong{color:var(--ink);font-weight:600;}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
.fact{background:var(--paper2);padding:24px 22px;}
.fact span{font-family:var(--font-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:9px;}
[dir="rtl"] .fact span{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:13px;}
.fact b{font-weight:600;color:var(--ink);font-size:15.5px;}
.contact-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:30px auto 0;max-width:520px;}
.contact-form input,.contact-form textarea{flex:1 1 100%;background:rgba(232,238,242,.06);border:1px solid var(--line-dark);
  color:var(--light);padding:13px 15px;border-radius:3px;font-family:var(--font-body);font-size:14px;}
[dir="rtl"] .contact-form input,[dir="rtl"] .contact-form textarea{font-family:var(--font-ar);}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--light-muted);}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--brass);}
.contact-form .row2{display:flex;gap:12px;flex:1 1 100%;}
.contact-form .row2 input{flex:1;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .nav-toggle{display:inline-flex;}
  .nav-menu{position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:flex-start;
    gap:18px;background:var(--ink);padding:24px 40px 30px;border-bottom:1px solid var(--line-dark);
    margin:0;display:none;}
  .nav-menu.open{display:flex;}
  .nav-links{flex-direction:column;align-items:flex-start;gap:18px;}
  .nav-right{flex-direction:row;gap:16px;width:100%;justify-content:space-between;align-items:center;}
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .blueprint{max-width:440px;width:100%;margin-inline:auto;}
  h1{font-size:42px;}
  [dir="rtl"] h1{font-size:38px;}
  .sec-head{grid-template-columns:1fr;gap:16px;}
  .svc-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .ind-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;gap:34px;}
  .foot-top{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:560px){
  section{padding:58px 22px;}
  .hero{padding:60px 22px 66px;}
  .nav{padding:16px 22px;}
  .nav-menu{padding:22px 22px 26px;}
  h1{font-size:33px;}
  [dir="rtl"] h1{font-size:30px;}
  h2,.cta-band h2{font-size:27px;}
  .steps{grid-template-columns:1fr;}
  .ind-grid{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;gap:10px;text-align:start;}
  .blueprint .dim{font-size:8px;}
}