/* Afaq Al-Noor: final site. Base: concept B (light and grid). Accents from concept C (Arabic name, lattice, rosette, arch, Arabic-Indic numerals). */
:root{
  --bg:#071a33; --navy:#0b2545; --panel:rgba(11,37,69,.62); --line:rgba(128,222,234,.16); --line-2:rgba(128,222,234,.34);
  --teal:#13807a; --teal-b:#1fb5ab; --sky:#80deea; --terra:#c8553d; --coral:#e07a5f; --white:#fff; --ivory:#eef6f8; --mist:#b8cfdb; --dim:#8fa8bd;
  --sans:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ar:"IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", sans-serif;
  --cal:"Aref Ruqaa", "Amiri", "Geeza Pro", serif;
  --gut:16px; --max:1320px;
}
@media (min-width:720px){:root{--gut:40px}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--white);font-family:var(--sans);font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
[lang=ar]{font-family:var(--ar)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--navy);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.tag .st{width:14px;height:14px;color:var(--sky);flex:none}
.tag [lang=ar]{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.95rem;color:var(--mist);margin-left:4px}

/* global grid, cursor-lit fine grid */
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1200px 700px at 70% -10%,rgba(19,128,122,.18),transparent 60%),
  radial-gradient(900px 600px at -10% 110%,rgba(19,128,122,.08),transparent 60%),var(--bg)}
.grid-bg::before,.grid-bg::after{content:"";position:absolute;inset:-80px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:.5;animation:drift 40s linear infinite}
.grid-bg::after{background-image:linear-gradient(rgba(128,222,234,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(128,222,234,.07) 1px,transparent 1px);background-size:16px 16px;opacity:.6;-webkit-mask:radial-gradient(420px 420px at var(--mx,70%) var(--my,30%),#000,transparent 70%);mask:radial-gradient(420px 420px at var(--mx,70%) var(--my,30%),#000,transparent 70%)}
@keyframes drift{to{transform:translate(80px,80px)}}
#pulses{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.bar.solid{background:rgba(7,26,51,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:6px;align-items:center}
.nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mist);padding:10px 14px;border:1px solid transparent;transition:color .25s,border-color .25s,background .25s,box-shadow .25s}
.nav a b{color:var(--sky);font-weight:400;margin-right:6px}
.nav a:hover,.nav a.on{color:var(--white);border-color:var(--line-2)}
.nav .cta{border-color:var(--sky);color:var(--sky)}
.nav .cta:hover{background:var(--sky);color:var(--navy);box-shadow:0 0 22px rgba(224,122,95,.35)}
.nav .cta:hover b{color:var(--navy)}
.menu{display:none;background:none;border:1px solid var(--line-2);width:44px;height:44px;position:relative;cursor:pointer}
.menu span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--sky);transition:.3s}
.menu span:nth-child(1){top:15px}.menu span:nth-child(2){top:21px}.menu span:nth-child(3){top:27px}
.menu[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded=true] span:nth-child(2){opacity:0}
.menu[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .menu{display:block}
  .nav{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:rgba(7,26,51,.97);border-bottom:1px solid var(--line);padding:8px var(--gut) 24px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .3s,visibility .3s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:16px 0;border:0;border-bottom:1px solid var(--line)}
  .nav .cta{border:0;border-bottom:1px solid var(--line)}
  .nav .cta:hover{background:none;color:var(--white);box-shadow:none}
  .nav .cta:hover b{color:var(--sky)}
  .brand img{height:28px}
}

/* hero */
.hero{min-height:100vh;min-height:100svh;padding:120px 0 60px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero .wrap{z-index:2}
.hero-name{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-bottom:28px}
.hero-name img{height:clamp(40px,4.8vw,62px);width:auto}
.hero-name .sep{width:1px;height:clamp(40px,4.6vw,60px);background:linear-gradient(180deg,transparent,var(--sky),transparent)}
.cal{font-family:var(--cal);font-weight:700;font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.25;color:var(--ivory);display:inline-block;padding:0 .08em}
.cal .ink{display:inline-block}
.cal .noor{color:var(--coral);text-shadow:0 0 22px rgba(224,122,95,.45)}
@media (max-width:520px){.hero-name{gap:10px 14px;margin-bottom:22px}.hero-name img{height:min(34px,8.6vw)}.hero-name .sep{height:34px}.cal{font-size:min(2rem,8.4vw)}}
.js .cal .ink{clip-path:inset(-20% -2% -20% 102%)}
.js .hero-name.go .cal .ink{animation:ink 2.4s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes ink{to{clip-path:inset(-20% -2% -20% -2%)}}
.hero h1{font-weight:500;font-size:clamp(2.3rem,6.2vw,6rem);line-height:.98;letter-spacing:-.035em;max-width:15ch}
.hero h1 .hl{background:linear-gradient(90deg,var(--sky),var(--teal-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-foot{display:grid;grid-template-columns:1fr;gap:24px;margin-top:clamp(28px,5vh,48px);align-items:end}
@media (min-width:900px){.hero-foot{grid-template-columns:minmax(0,46ch) auto;justify-content:space-between}}
.hero-sub{color:var(--mist);font-size:1rem;border-left:1px solid var(--sky);padding-left:18px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns-top{margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--sky);transition:background .25s,border-color .25s,box-shadow .35s,color .25s;position:relative}
.btn-solid{background:var(--sky);color:var(--navy)}
.btn-solid:hover{background:var(--white);border-color:var(--white);box-shadow:0 0 0 1px rgba(224,122,95,.5),0 10px 34px -6px rgba(224,122,95,.55)}
.btn-line{color:var(--sky)}
.btn-line:hover{background:rgba(128,222,234,.1);box-shadow:0 0 26px -6px rgba(224,122,95,.5)}
.schem{position:absolute;right:-4vw;top:50%;transform:translateY(-44%);width:min(60vw,900px);opacity:.75;pointer-events:none;z-index:0}
@media (max-width:899px){.schem{position:relative;right:auto;top:auto;transform:none;width:124%;max-width:none;margin:8px -12% -30px;opacity:.85}}

/* line drawings */
.draw path,.draw line,.draw circle,.draw rect,.draw polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.draw .dawn-glow{opacity:0;transition:opacity 3s 1s}
.draw.go .dawn-glow{opacity:1}
.draw .d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.6,.1,.2,1)}
.draw.go .d{stroke-dashoffset:0}
.draw .flow{stroke-dasharray:.006 .03;animation:flow 3s linear infinite;opacity:0;transition:opacity 1s 1.8s}
.draw.go .flow{opacity:1}
@keyframes flow{to{stroke-dashoffset:-.36}}
.glowf{filter:drop-shadow(0 0 4px rgba(128,222,234,.7))}
.glowc{filter:drop-shadow(0 0 5px rgba(224,122,95,.8))}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:var(--dim);text-transform:uppercase}
.lbl-w{fill:var(--white)}
.no-js .draw .d{stroke-dashoffset:0}
.no-js .draw .flow,.no-js .draw .dawn-glow{opacity:1}

/* sections */
section{position:relative}
.sec{padding:clamp(90px,14vh,160px) 0}
.sec-tight{padding-top:0}
.sec-head{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:clamp(40px,7vh,72px)}
@media (min-width:900px){.sec-head{grid-template-columns:260px 1fr;gap:40px;align-items:start}}
h2{font-weight:500;font-size:clamp(2.1rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.03em}
.intro{color:var(--mist);max-width:56ch;margin-top:18px;font-size:1.05rem}
.rule{height:1px;background:linear-gradient(90deg,var(--sky),var(--line) 30%,transparent);margin-bottom:22px}

/* about */
.about-grid{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:70px;align-items:center}}
.lead{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.35;font-weight:400;margin-bottom:20px}
.about p{color:var(--mist)}
.about p.lead{color:var(--white)}
.tlink{display:inline-flex;gap:10px;margin-top:24px;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:6px;transition:border-color .25s}
.tlink:hover{border-color:var(--coral)}
.frame{border:1px solid var(--line-2);background:var(--panel);position:relative;padding:18px}
.frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--sky)}
.frame::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.frame::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.frame-h{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
.frame-h i{font-style:normal;color:var(--teal-b)}
.frame-h i::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal-b);margin-right:8px;box-shadow:0 0 8px var(--teal-b);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}

/* service cards */
.cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{background:rgba(7,26,51,.92);padding:clamp(24px,3vw,40px);position:relative;overflow:hidden;transition:background .4s,box-shadow .5s}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--coral),transparent);transform:translateX(-100%);transition:transform 1.2s}
.card:hover{background:rgba(11,37,69,.96);box-shadow:inset 0 0 60px -20px rgba(224,122,95,.28)}
.card:hover::before{transform:translateX(100%)}
.card:hover .glowc{filter:drop-shadow(0 0 9px rgba(224,122,95,.95))}
.card-top{display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.card-top b{color:var(--sky);font-weight:400}
.card svg{width:100%;height:150px;margin:22px 0 18px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.card h3{font-weight:500;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.015em;margin-bottom:12px}
.card p{color:var(--mist);font-size:.98rem}

/* dawn band: arch window from concept C, line-art overlay from B */
.dawn{position:relative;padding:clamp(40px,8vh,90px) 0 clamp(70px,12vh,140px);overflow:hidden}
.dawn-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media (min-width:900px){.dawn-grid{grid-template-columns:minmax(0,460px) 1fr;gap:clamp(56px,7vw,110px)}}
.arch{position:relative;width:min(calc(100% - 32px),460px);justify-self:center;margin:16px 0}
@media (max-width:899px){.arch{width:min(calc(100% - 32px),360px)}}
.arch-frame{position:absolute;left:-16px;top:-16px;width:calc(100% + 32px);height:calc(100% + 32px);overflow:visible;pointer-events:none}
.arch-in{position:relative;aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;background:var(--navy);box-shadow:0 40px 90px -40px rgba(224,122,95,.35)}
.arch-in img,.arch-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;max-width:none}
.arch-in video{opacity:0;transition:opacity 1.6s}
.arch-in video.on{opacity:1}
.arch-in::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(128,222,234,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(128,222,234,.08) 1px,transparent 1px);background-size:40px 40px;background-position:center center;pointer-events:none}
.arch-in::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(7,26,51,.85),rgba(7,26,51,0) 38%);pointer-events:none}
.arch-art{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.dawn-text blockquote{font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.08;letter-spacing:-.025em;font-weight:500;max-width:16ch}
.dawn-text .mono{margin-bottom:18px;display:block}

/* approach: the grid resolves into an 8-point star lattice */
.appr{overflow:hidden}
.appr::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,26,51,0),rgba(7,26,51,.88) 18%,rgba(7,26,51,.88) 82%,rgba(7,26,51,0));opacity:0;transition:opacity 1.8s}
.lattice{position:absolute;inset:0;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.lat{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transform:scale(1.18) rotate(-6deg);transform-origin:70% 30%;transition:opacity 2.2s,transform 2.8s cubic-bezier(.2,.7,.1,1)}
.lat-lit{-webkit-mask:linear-gradient(115deg,transparent 35%,#000 50%,transparent 65%) 0 0/300% 100%;mask:linear-gradient(115deg,transparent 35%,#000 50%,transparent 65%) 0 0/300% 100%;animation:sweep 16s ease-in-out infinite}
.appr.cursor .lat-lit{-webkit-mask:radial-gradient(320px 320px at var(--lx,70%) var(--ly,30%),#000,transparent 72%);mask:radial-gradient(320px 320px at var(--lx,70%) var(--ly,30%),#000,transparent 72%);animation:none}
@keyframes sweep{0%,100%{-webkit-mask-position:100% 0;mask-position:100% 0}50%{-webkit-mask-position:0 0;mask-position:0 0}}
.appr.on::before{opacity:1}
.appr.on .lat{transform:none}
.appr.on .lat-base{opacity:.2}
.appr.on .lat-lit{opacity:.75}
.no-js .appr::before{opacity:1}
.no-js .lat{transform:none}
.no-js .lat-base{opacity:.2}
.appr .wrap{z-index:1}
.rosette{position:absolute;right:var(--gut);top:-88px;width:clamp(120px,15vw,210px);height:auto;opacity:.95;pointer-events:none}
@media (max-width:899px){.rosette{width:118px;top:-44px;opacity:.6}}
.spec{border-top:1px solid var(--line-2);list-style:none}
.spec li{display:grid;grid-template-columns:62px 1fr;gap:6px 18px;padding:28px 0;border-bottom:1px solid var(--line);position:relative}
@media (min-width:900px){.spec li{grid-template-columns:120px 340px 1fr;align-items:baseline;padding:34px 0}}
.spec .n{font-family:var(--mono);color:var(--sky);font-size:.85rem;display:flex;flex-direction:column;gap:2px;grid-row:span 2}
@media (min-width:900px){.spec .n{flex-direction:row;align-items:baseline;gap:12px;grid-row:auto}}
.spec .ai{font-family:var(--ar);font-size:1.35rem;line-height:1;color:var(--mist)}
.spec h3{font-weight:500;font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.015em;line-height:1.15}
.spec p{color:var(--mist);grid-column:2}
@media (min-width:900px){.spec p{grid-column:3}}
.spec li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,var(--coral),rgba(224,122,95,.2));transition:width 1.4s cubic-bezier(.6,.1,.2,1)}
.spec li.in::after{width:100%}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media (min-width:900px){.contact-grid{grid-template-columns:1.15fr .85fr;gap:50px}}
.term{font-family:var(--mono);font-size:clamp(.9rem,1.3vw,1rem);line-height:1.9;color:var(--mist)}
.term .p{color:var(--teal-b)}
.term a.big{display:block;font-family:var(--sans);font-weight:500;font-size:clamp(1.7rem,4.6vw,3.6rem);letter-spacing:-.03em;color:var(--white);text-decoration:none;line-height:1.1;margin:10px 0 6px;word-break:break-word;transition:color .25s,text-shadow .4s}
.term a.big:hover{color:var(--sky);text-shadow:0 0 28px rgba(224,122,95,.45)}
.caret{display:inline-block;width:.6em;height:1em;background:var(--sky);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
address{font-style:normal;font-family:var(--mono);font-size:.86rem;line-height:2;color:var(--mist)}
address strong{font-family:var(--sans);font-size:1.1rem;color:var(--white);font-weight:500;display:block;margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.kv dt{color:var(--dim)}
footer{border-top:1px solid var(--line);padding:30px 0 40px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim)}
.foot{display:flex;flex-wrap:wrap;gap:16px 36px;justify-content:space-between;align-items:center}
.foot img{height:34px;width:auto}
.foot a{color:var(--mist)}
.foot [lang=ar]{letter-spacing:0}

.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.1,1)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .draw .d{stroke-dashoffset:0}.draw .flow{opacity:.8}.draw .dawn-glow{opacity:1}
  .js .reveal{opacity:1;transform:none}
  .js .cal .ink{clip-path:none}
  .spec li::after{width:100%}
  #pulses{display:none}
  .grid-bg::after{display:none}
  .appr::before{opacity:1}
  .lat{transform:none}
  .lat-base{opacity:.2}
  .lat-lit{opacity:.4;-webkit-mask:none;mask:none}
  .arch-in video{display:none}
}