/* Areez — areez.com.sa  (brand: designs/design-quality/brands/areez.md) */
:root{
  --navy:#002B64; --navy-2:#00214D; --navy-3:#0A3A7A; --grey:#5C5D62; --ink:#121722; --paper:#FFFFFF;
  --soft:#F3F5F9; --line:#E2E7EF; --mist:#B9C6DA;
  --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:112px;
  --r:10px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,sans-serif;font-size:18px;line-height:1.8;letter-spacing:0;-webkit-font-smoothing:antialiased}
html[lang=en] body{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;line-height:1.65}
html[lang=ar] [data-l=en], html[lang=en] [data-l=ar]{display:none!important}
.num{font-family:"IBM Plex Sans",sans-serif;direction:ltr;unicode-bidi:isolate;letter-spacing:.3px}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--s4)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.08em;color:var(--grey);text-transform:uppercase;margin:0 0 var(--s3)}
html[lang=ar] .eyebrow{letter-spacing:0;font-size:17px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;display:inline-block}
h1,h2,h3{margin:0;font-weight:600}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.3;color:var(--navy)}
p{margin:0 0 var(--s3)}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:20;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:104px}
.logo{display:block;position:relative;height:68px}
.logo img{height:68px;width:auto;display:block;transition:opacity .3s}
.logo .dark{position:absolute;inset:0;opacity:0}
nav{display:flex;align-items:center;gap:36px}
nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:18px;font-weight:500;transition:color .2s}
nav a:hover{color:#fff}
.lang{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;font:inherit;font-size:16px;font-weight:600;padding:9px 22px;border-radius:999px;cursor:pointer;transition:all .2s}
.lang:hover{background:#fff;color:var(--navy)}
header.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
header.solid .logo .light{opacity:0}
header.solid .logo .dark{opacity:1}
header.solid nav a{color:var(--grey)}
header.solid nav a:hover{color:var(--navy)}
header.solid .lang{border-color:var(--line);color:var(--navy)}
header.solid .lang:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100vh,880px);background:var(--navy);color:#fff;display:flex;align-items:center;overflow:hidden}
.hero{background:radial-gradient(70% 90% at 15% 50%,#0B4A97 0%,rgba(11,74,151,0) 60%),linear-gradient(135deg,#002B64 0%,#00214D 100%)}
html[dir=ltr] .hero{background:radial-gradient(70% 90% at 85% 50%,#0B4A97 0%,rgba(11,74,151,0) 60%),linear-gradient(135deg,#002B64 0%,#00214D 100%)}
.hero .lines{position:absolute;inset:0;background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46px);pointer-events:none}
.hero .art{position:absolute;top:50%;inset-inline-end:7%;height:74%;max-height:640px;transform:translateY(-46%);opacity:.95;pointer-events:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.25))}
.hero .wrap{position:relative;width:100%;padding-top:140px;padding-bottom:var(--s7)}
.hero-copy{max-width:600px}
.hero .eyebrow{color:var(--mist)}
.hero h1{font-size:clamp(36px,5.2vw,66px);line-height:1.2;margin-bottom:var(--s4)}
html[lang=en] .hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.12}
.hero .lead{font-size:clamp(18px,1.7vw,23px);color:#D7E0EE;max-width:520px;margin-bottom:var(--s5)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:15px;font-weight:600;padding:14px 26px;border-radius:999px;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.white{background:#fff;color:var(--navy)}
.btn.line{border-color:rgba(255,255,255,.5);color:#fff}
.btn.line:hover{border-color:#fff}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-3)}
.btn.ghost{border-color:var(--line);color:var(--navy)}
.btn.ghost:hover{border-color:var(--navy)}
.scroll-cue{position:absolute;bottom:28px;inset-inline-start:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.45);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------- sections ---------- */
section{padding:var(--s8) 0}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}
.statement{font-size:clamp(22px,2.4vw,30px);line-height:1.6;color:var(--ink);font-weight:400;margin:0}
html[lang=en] .statement{line-height:1.45}
.statement b{color:var(--navy);font-weight:600}
.about-meta{display:flex;gap:var(--s6);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.about-meta div{display:flex;flex-direction:column;gap:4px}
.about-meta strong{font-size:28px;color:var(--navy);font-weight:600}
.about-meta span{font-size:14px;color:var(--grey)}
.about-meta strong span{font-size:inherit;color:inherit}

.band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band .mark{position:absolute;inset-inline-end:-60px;top:-80px;width:420px;opacity:.07;pointer-events:none}
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden;position:relative}
.vm>div{background:var(--navy);padding:var(--s6)}
.vm h3{font-size:15px;letter-spacing:.06em;color:var(--mist);font-weight:600;margin-bottom:var(--s3)}
html[lang=ar] .vm h3{letter-spacing:0}
.vm p{font-size:clamp(20px,2vw,26px);line-height:1.6;margin:0}
html[lang=en] .vm p{line-height:1.45}

.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6)}
.value .n{font-family:"IBM Plex Sans",sans-serif;font-size:48px;line-height:1;color:var(--line);font-weight:600;display:block;margin-bottom:var(--s3);transition:color .3s}
.value:hover .n{color:var(--navy)}
.value h3{font-size:21px;color:var(--navy);margin-bottom:var(--s2)}
.value p{color:var(--grey);font-size:16px;margin:0}

.sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.sector{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:var(--navy);color:#fff;display:flex;align-items:flex-end;isolation:isolate}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.sector::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,20,48,0) 30%,rgba(0,20,48,.88) 100%)}
.sector:hover img{transform:scale(1.06)}
.sector .body{padding:var(--s5)}
.sector .k{font-family:"IBM Plex Sans",sans-serif;font-size:13px;color:var(--mist);letter-spacing:.1em}
.sector h3{font-size:26px;margin:6px 0 var(--s2)}
.sector p{margin:0;color:#DCE4F0;font-size:16px;line-height:1.6}
.sector.tech{background:radial-gradient(120% 90% at 80% 10%,#0E4C99 0%,var(--navy) 55%,#00163A 100%)}
.sector.tech::before{background:linear-gradient(180deg,rgba(0,20,48,0) 50%,rgba(0,20,48,.5) 100%)}
.sector.tech .grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(80% 70% at 70% 30%,#000 30%,transparent 80%)}
.sector.tech .sym-unused{position:absolute;top:14%;inset-inline-start:50%;width:42%;transform:translateX(-50%);opacity:.95;z-index:-1}
html[dir=rtl] .sector.tech .sym{transform:translateX(50%)}

/* hand shot feature */
.hs{background:#0B0B0C;color:#fff}
.hs-feature{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:center}
.hs-feature .eyebrow{color:#9A9A9F}
.hs-feature h2{color:#fff;margin:var(--s3) 0}
.hs-feature p{color:#C9C9CE}
.hs-logo{width:84px;height:84px;border-radius:12px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.slogan{font-family:"IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:.24em;color:#8E8E93;font-size:12px;direction:ltr;unicode-bidi:isolate;display:inline-block}
.collage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:200px 200px;gap:12px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.collage .a{grid-column:1/4;grid-row:1/3}
.collage .b{grid-column:4/7;grid-row:1/2}
.collage .c{grid-column:4/6;grid-row:2/3}
.collage .d{grid-column:6/7;grid-row:2/3}
.btn.red{background:#fff;color:#0B0B0C}
.btn.outline-dark{border-color:rgba(255,255,255,.35);color:#fff}
.btn.outline-dark:hover{border-color:#fff}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:var(--s6) 0 0}
.fact{padding:var(--s5);background:var(--paper)}
.fact.wide{grid-column:span 2}
.fact.full{grid-column:1/-1}
.fact dt{color:var(--grey);font-size:14px;margin:0 0 var(--s2)}
.fact dd{margin:0;font-weight:600;font-size:19px;line-height:1.6}
.fact dd .sub{display:block;margin-top:6px;color:var(--grey);font-weight:400;font-size:14px;line-height:1.6}

/* contact */
.contact{background:var(--soft)}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}
.channels{display:grid;gap:var(--s3)}
.channel{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.channel:hover{border-color:var(--navy);transform:translateY(-2px)}
.channel small{display:block;color:var(--grey);font-size:13px}
.channel strong{font-size:20px;color:var(--navy);font-weight:600}
.channel .arrow{color:var(--navy);font-size:22px}
html[dir=rtl] .channel .arrow{transform:scaleX(-1)}

footer{background:var(--navy-2);color:#C9D4E6;padding:var(--s6) 0 var(--s5);font-size:14px}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:var(--s4);flex-wrap:wrap}
footer .top img{height:44px;width:auto;display:block}
footer .top nav a{color:#C9D4E6}
footer .bottom{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
footer a{color:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in,.no-anim .rv{opacity:1;transform:none}
.no-anim .rv{transition:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.sector img,.btn{transition:none}html{scroll-behavior:auto}.scroll-cue::after{animation:none}}

/* ---------- hand shot page ---------- */
body.hsp{background:#0B0B0C;color:#EDEDEF}
body.hsp header.solid{background:rgba(11,11,12,.92);box-shadow:0 1px 0 rgba(255,255,255,.08)}
body.hsp header.solid .logo .light{opacity:1}
body.hsp header.solid .logo .dark{opacity:0}
body.hsp header.solid nav a{color:rgba(255,255,255,.75)}
body.hsp header.solid nav a:hover{color:#fff}
body.hsp header.solid .lang{border-color:rgba(255,255,255,.35);color:#fff}
body.hsp header.solid .lang:hover{background:#fff;color:#0B0B0C}
.hsp-hero{position:relative;min-height:min(100vh,820px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hsp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hsp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.25) 0%,rgba(11,11,12,.35) 45%,#0B0B0C 100%)}
.hsp-hero .wrap{width:100%;padding-bottom:var(--s7);padding-top:140px}
.hsp-hero h1{font-size:clamp(44px,7vw,92px);line-height:1.05;color:#fff;margin:var(--s3) 0}
.hsp-hero .lead{font-size:clamp(18px,1.7vw,22px);color:#D8D8DC;max-width:640px;margin-bottom:var(--s5)}
.hsp section{border-top:1px solid rgba(255,255,255,.08)}
.hsp h2{color:#fff}
.hsp .muted{color:#9A9A9F}
.hsp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);align-items:center}
.hsp-two img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);display:block}
.hsp-two p{color:#C9C9CE;font-size:19px}
.uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--s4) 0 var(--s5)}
.uses span{border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:12px 16px;font-size:16px;color:#E6E6EA}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:12px;margin-top:var(--s6)}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;transition:transform .6s var(--ease),filter .6s}
.gallery img:hover{transform:scale(1.02)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
.owner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;background:#141416;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:var(--s5)}
.owner img{height:40px;width:auto;display:block}
.owner p{margin:0;color:#B9B9BE}
.hsp footer{background:#000}

@media (max-width:980px){
  .split,.hs-feature,.contact-grid,.hsp-two{grid-template-columns:1fr;gap:var(--s6)}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:1fr 1fr}
  .fact.wide{grid-column:1/-1}
  .hero .art{height:56%;opacity:.12;inset-inline-end:-4%}
}
@media (max-width:640px){
  body{font-size:17px}
  header .wrap{height:72px}
  .logo,.logo img{height:44px}
  nav a{display:none}
  section{padding:var(--s7) 0}
  .hero .wrap{padding-top:100px}
  .vm{grid-template-columns:1fr}
  .vm>div{padding:var(--s5)}
  .values{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .value .n{font-size:38px}
  .sectors{grid-template-columns:1fr}
  .sector,.sector.tech{aspect-ratio:4/3}
  .sector.tech .sym{height:30%!important;top:9%!important}
  .collage{grid-template-rows:150px 150px;gap:8px}
  .facts{grid-template-columns:1fr}
  .fact{padding:var(--s4)}
  .about-meta{gap:var(--s5)}
  .channel{padding:var(--s4)}
  .channel strong{font-size:18px}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .uses{grid-template-columns:1fr}
  .scroll-cue{display:none}
}