/* Madarik redesign: Saudi Icon structure (media-led opening, spacious light sections, large photography), Madarik colours */
:root { --navy:#082838; --navy-2:#0e3448; --blue:#389CD4; --blue-d:#1f7fb6; --ink:#1b2a33; --muted:#5d6c75; --soft:#9aa7af;
  --grey-h:#b7c0c6; --light:#f3f5f6; --line:#e2e7ea; --wrap:1240px; --f:'Montserrat', 'Segoe UI', Arial, sans-serif; --ease:cubic-bezier(.2,.7,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; font:400 16px/1.75 var(--f); color:var(--ink); background:#fff; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { width:min(var(--wrap), 100% - 48px); margin:0 auto; }
.row { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.skip { position:absolute; left:12px; top:-60px; z-index:500; background:var(--navy); color:#fff; padding:10px 16px; }
.skip:focus { top:12px; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.dot { color:var(--blue); font-style:normal; }
section { padding:120px 0; }
.kick { margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-d); }
h1, h2, h3 { font-family:var(--f); margin:0; }
.big { font-size:clamp(32px, 4.2vw, 56px); line-height:1.12; font-weight:700; color:var(--grey-h); letter-spacing:-.01em; }
.big.light { color:#e9eef1; }
.two { display:grid; grid-template-columns:5fr 7fr; gap:80px; align-items:start; }
.two p { margin:0 0 20px; color:var(--muted); font-size:17px; }
.sh { max-width:820px; margin-bottom:56px; }
.sh p { color:var(--muted); font-size:17px; margin:20px 0 0; }
.btns { display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 26px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; background:var(--navy); color:#fff; text-decoration:none; font-weight:600; font-size:15px; border:1px solid var(--navy); transition:background .25s, color .25s, border-color .25s; }
.btn:hover { background:var(--blue); border-color:var(--blue); }
.btn.ghost { background:transparent; color:var(--navy); }
.btn.ghost:hover { background:var(--navy); color:#fff; }
.textlink { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-d); text-decoration:none; }
.textlink:hover { text-decoration:underline; }
.sqs { width:9px; height:9px; background:var(--blue); display:inline-block; }
.sq { width:44px; height:44px; display:inline-grid; place-items:center; background:var(--blue); color:#fff; border:0; cursor:pointer; transition:background .25s; flex:0 0 auto; }
.sq svg { width:20px; height:20px; }
.sq:hover { background:var(--navy); }
.sq.light:hover { background:#fff; color:var(--navy); }
.ic { display:inline-grid; place-items:center; color:var(--blue); }
.ic svg { width:26px; height:26px; }

/* sticky header (appears after the opening media) */
.sticky { position:fixed; inset:0 0 auto; z-index:200; background:#fff; box-shadow:0 1px 0 var(--line); transform:translateY(-100%); transition:transform .35s var(--ease); }
.sticky.show { transform:none; }
.sticky .row { height:78px; }
.sticky img { height:44px; width:auto; }
.sticky ul, .hero-nav ul { list-style:none; display:flex; gap:44px; margin:0; padding:0; }
.sticky a { text-decoration:none; font-weight:500; font-size:15px; color:var(--ink); }
.sticky nav a:hover { color:var(--blue-d); }

/* opening media */
.hero { position:relative; height:100vh; min-height:620px; padding:0; color:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; background:var(--navy) url(assets/video/madarik-opening-poster.jpg) center/cover no-repeat; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,40,56,.55) 0%, rgba(8,40,56,.35) 45%, rgba(8,40,56,.7) 100%); }
.hero > .wrap { position:relative; z-index:1; }
.hero-top { padding-top:22px; font-size:13px; }
.hero-top a { text-decoration:none; opacity:.9; }
.hero-mid { text-align:center; }
.eyebrow { margin:0 0 18px; font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#cfe6f4; }
.hero h1 { font-size:clamp(34px, 5.2vw, 76px); line-height:1.08; font-weight:800; letter-spacing:-.015em; color:#eef3f6; }
.hero h1 span { color:#fff; }
.hero-bot { padding-bottom:30px; }
.hero-bot .brand img { height:52px; width:auto; }
.hero-nav a { color:#fff; text-decoration:none; font-weight:500; font-size:15px; opacity:.92; }
.hero-nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:6px; }
.menu { display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.45); background:transparent; cursor:pointer; padding:12px 11px; flex-direction:column; justify-content:space-between; }
.menu i { display:block; height:2px; background:#fff; }
.menu.dark { border-color:var(--line); }
.menu.dark i { background:var(--navy); }

/* introduction + about */
.intro .lead { font-size:19px; color:var(--ink); }
.intro .big { font-size:clamp(26px, 2.7vw, 40px); line-height:1.25; }
.about { padding-top:0; }
.about .big { color:var(--navy); font-size:clamp(28px, 3.4vw, 44px); }

/* services: dark band */
.services { background:var(--navy); color:#d8e5ee; }
.services .sh p { color:#a9bfce; }
.services .kick { color:#8fd0f3; }
.cards { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12); }
.card { background:var(--navy); padding:34px 28px 36px; transition:background .3s; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.card:hover { background:var(--navy-2); }
.card h3 { font-size:18px; line-height:1.35; font-weight:700; color:#fff; margin:20px 0 10px; }
.card p { margin:0; font-size:14.5px; line-height:1.7; color:#a9bfce; }
.card.feature { grid-column:span 4; display:grid; grid-template-columns:auto 1fr 2fr; gap:28px; align-items:center; background:var(--navy-2); }
.card.feature h3 { margin:0; }

/* featured work (projects page): category tabs, slider with side arrows and progress line */
.pp main { padding-top:78px; }
.pp-head { padding:80px 0 44px; }
.pp-head .big { font-size:clamp(36px, 4.6vw, 64px); }
.cats { position:sticky; top:78px; z-index:150; background:var(--blue); }
.cats-in { position:relative; display:flex; justify-content:space-between; gap:14px; overflow-x:auto; scrollbar-width:none; }
.cats-in::-webkit-scrollbar { display:none; }
.cat-tab { flex:0 0 auto; padding:17px 4px 15px; border:0; border-bottom:3px solid transparent; background:none; color:#fff; font:600 13.5px/1.2 var(--f); letter-spacing:0; cursor:pointer; opacity:.85; white-space:nowrap; transition:opacity .2s, border-color .2s; }
.cat-tab:hover { opacity:1; }
.cat-tab[aria-selected="true"] { opacity:1; border-bottom-color:var(--navy); }
.cat-tab:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.pp-body { padding:44px 0 120px; }
.slider { position:relative; }
.slides { position:relative; aspect-ratio:16/7; max-height:72vh; width:100%; background:var(--light); overflow:hidden; }
.slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s var(--ease); }
.slide.on { opacity:1; z-index:1; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide figcaption { position:absolute; left:0; bottom:0; padding:28px 40px 32px; width:60%; background:linear-gradient(0deg, rgba(8,40,56,.78), rgba(8,40,56,0)); color:#fff; display:flex; align-items:center; gap:22px; }
.slide figcaption b { font-size:clamp(22px, 2.6vw, 34px); line-height:1.15; font-weight:700; }
.slider .side { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:48px; height:48px; }
.slider .side.l { left:22px; } .slider .side.r { right:22px; }
.slider .side:hover { background:var(--navy); }
.ctrl { margin-top:22px; }
.bar { display:block; height:2px; background:var(--line); position:relative; }
.bar i { position:absolute; inset:0 auto 0 0; width:0; background:var(--navy); transition:width .6s var(--ease); }
.count { margin:10px 0 0; font-size:14px; color:var(--soft); letter-spacing:.06em; }
.count b { color:var(--ink); }
.g-panel { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:56px; }
.g-panel[hidden] { display:none; }
.g-item { position:relative; display:block; aspect-ratio:4/3; padding:0; border:0; overflow:hidden; background:var(--light); cursor:pointer; }
.g-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.g-ov { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; background:rgba(8,40,56,.8); color:#fff; text-align:center; opacity:0; transition:opacity .35s var(--ease); }
.g-ov b { font-size:22px; line-height:1.25; font-weight:700; }
.g-ov .sq { width:38px; height:38px; }
.g-item:hover .g-ov, .g-item:focus-visible .g-ov { opacity:1; }
.g-item:hover img { transform:scale(1.05); }
.pp footer { margin-top:0; }

/* home: project cards (link to the projects page) */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:64px 48px; }
.tiles .tile:last-child:nth-child(odd) { grid-column:1 / -1; }
.tiles .tile:last-child:nth-child(odd) .tile-img { aspect-ratio:21/9; }
.tile-open { display:block; text-decoration:none; width:100%; padding:0; border:0; background:none; text-align:center; cursor:pointer; font:inherit; color:inherit; }
.tile-img { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--light); }
.tile-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.tile-open:hover .tile-img img { transform:scale(1.04); }
.tile-bar { display:block; height:7px; background:var(--blue); }
.tile-t { display:inline-flex; align-items:center; gap:16px; margin-top:26px; position:relative; }
.tile-t::before { content:""; position:absolute; left:50%; top:-26px; height:26px; width:1px; background:var(--line); }
.tile-t b { font-size:22px; font-weight:700; color:var(--navy); }
.tile-t .sq { width:34px; height:34px; }
.tile-t .sq svg { width:16px; height:16px; }

/* vision & mission */
.vision { padding-top:0; }
.vision-img { margin:0; aspect-ratio:21/9; overflow:hidden; }
.vision-img img { width:100%; height:100%; object-fit:cover; }
.vision-card { background:var(--light); width:min(980px, 100%); margin:-120px 0 0 auto; position:relative; padding:56px 60px; display:grid; grid-template-columns:1fr 1fr; gap:40px 56px; }
.vm-i h3 { display:flex; align-items:center; gap:12px; font-size:24px; color:var(--navy); font-weight:700; margin-bottom:14px; }
.vm-i p { margin:0; color:var(--muted); }
.motto { grid-column:1 / -1; margin:0; padding-top:28px; border-top:1px solid var(--line); font-size:20px; font-weight:600; color:var(--navy); }

/* expertise */
.expertise { background:var(--light); }
.expertise .big { color:var(--navy); font-size:clamp(28px, 3.4vw, 44px); margin-bottom:22px; }
.points { display:grid; gap:2px; }
.point { display:flex; gap:22px; background:#fff; padding:28px 30px; }
.point b { display:block; font-size:18px; color:var(--navy); margin-bottom:6px; }
.point p { margin:0; color:var(--muted); font-size:15.5px; }

/* since */
.since { background:var(--navy); color:#fff; padding:110px 0; }
.since-in { display:grid; grid-template-columns:auto 1fr; gap:64px; align-items:center; }
.since p { margin:0; display:flex; flex-direction:column; }
.since p span { font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:#8fd0f3; }
.since p b { font-size:clamp(72px, 10vw, 140px); line-height:1; font-weight:800; color:var(--blue); }
.since h2 { font-size:clamp(26px, 3vw, 40px); line-height:1.25; font-weight:600; color:#eef3f6; padding-left:64px; border-left:1px solid rgba(255,255,255,.18); }

/* approach */
.steps { list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); border-left:1px solid var(--line); }
.steps li { padding:0 26px 10px; border-right:1px solid var(--line); }
.sqn { display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 8px; background:var(--blue); color:#fff; font-weight:700; font-size:14px; margin-bottom:22px; }
.steps h3 { font-size:18px; color:var(--navy); font-weight:700; margin-bottom:10px; }
.steps p { margin:0; color:var(--muted); font-size:15px; }
.quality { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; }
.quality li { display:flex; align-items:center; gap:14px; background:var(--light); padding:20px 22px; font-weight:600; font-size:14.5px; color:var(--navy); }
.quality .ic svg { width:22px; height:22px; }

/* contact + footer */
.contact { background:var(--navy); color:#d8e5ee; }
.contact .kick { color:#8fd0f3; }
.ct-top { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; }
.ct-top p { color:#a9bfce; font-size:17px; margin:18px 0 0; max-width:620px; }
.contact .btn { background:var(--blue); border-color:var(--blue); }
.contact .btn:hover { background:#fff; color:var(--navy); border-color:#fff; }
.cgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); }
.cbox { background:var(--navy); padding:32px 30px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.cbox small { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8fd0f3; margin-top:12px; }
.cbox b { font-size:18px; color:#fff; }
.cbox .role { color:#a9bfce; font-size:14px; }
.cbox .link { color:#fff; text-decoration:none; font-weight:500; word-break:break-word; }
.cbox .link:hover { color:var(--blue); }
footer { background:#061e2a; color:#a9bfce; padding:34px 0; font-size:14px; }
footer img { height:40px; width:auto; }
footer a { text-decoration:none; color:#fff; }

/* gallery */
.album { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:#04141c; color:#fff; }
.album[hidden] { display:none; }
.album-hd { display:flex; align-items:center; gap:16px; padding:16px 24px; }
.album-hd h3 { margin:0; font-size:20px; flex:1; }
.album-n { color:#a9c4d4; font-size:14px; }
.album-x { width:46px; height:46px; border:1px solid rgba(255,255,255,.3); background:none; color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.album-stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 80px; }
.album-stage img { max-width:100%; max-height:100%; object-fit:contain; }
.album-p, .album-nx { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; background:var(--blue); color:#fff; cursor:pointer; display:grid; place-items:center; }
.album-p svg, .album-nx svg { width:22px; height:22px; }
.album-p { left:14px; } .album-nx { right:14px; }
.album-strip { display:flex; gap:8px; overflow-x:auto; padding:14px 24px 20px; }
.album-strip button { flex:0 0 auto; width:96px; height:68px; padding:0; border:2px solid transparent; overflow:hidden; background:#0b2631; cursor:pointer; opacity:.6; }
.album-strip button[aria-current="true"] { border-color:var(--blue); opacity:1; }
.album-strip img { width:100%; height:100%; object-fit:cover; }

/* reveal (content stays visible without JS or with reduced motion) */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }

@media (max-width:1100px) {
  .cards { grid-template-columns:repeat(2, 1fr); }
  .card.feature { grid-column:span 2; grid-template-columns:auto 1fr; }
  .card.feature p { grid-column:1 / -1; }
  .steps { grid-template-columns:repeat(3, 1fr); row-gap:36px; }
  .quality { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:860px) {
  section { padding:84px 0; }
  .two, .since-in { grid-template-columns:1fr; gap:36px; }
  .since h2 { padding-left:0; border-left:0; }
  .hero-nav { position:fixed; inset:0; z-index:300; background:rgba(8,40,56,.97); display:none; align-items:center; justify-content:center; }
  .hero-nav.open { display:flex; }
  .hero-nav ul { flex-direction:column; gap:30px; text-align:center; }
  .hero-nav a { font-size:22px; }
  .menu { display:flex; position:relative; z-index:301; }
  .sticky nav { display:none; }
  .sticky .menu { display:flex; }
  .hero-nav.open ~ .menu, .menu[aria-expanded="true"] { position:fixed; top:16px; right:24px; z-index:301; border-color:rgba(255,255,255,.45); }
  .menu.dark[aria-expanded="true"] i { background:#fff; }
  .tiles { grid-template-columns:1fr; gap:48px; }
  .slides { aspect-ratio:4/3; }
  .slide figcaption { width:100%; padding:22px 20px 24px; }
  .pp-head { padding:56px 0 30px; }
  .cats-in { justify-content:flex-start; gap:26px; }
  .pp-body { padding:30px 0 84px; }
  .slider .side { width:40px; height:40px; } .slider .side.l { left:10px; } .slider .side.r { right:10px; }
  .g-panel { grid-template-columns:1fr 1fr; gap:10px; margin-top:36px; }
  .g-ov { display:none; }
  .pp .sticky nav.open { display:flex; position:fixed; inset:0; z-index:300; background:rgba(8,40,56,.97); align-items:center; justify-content:center; }
  .pp .sticky nav.open ul { flex-direction:column; gap:30px; text-align:center; }
  .pp .sticky nav.open a { color:#fff; font-size:22px; }
  .vision-card { margin-top:0; padding:36px 28px; grid-template-columns:1fr; }
  .vision-img { aspect-ratio:16/10; }
  .ct-top { flex-direction:column; align-items:flex-start; }
  .cgrid { grid-template-columns:1fr; }
  footer .row { flex-direction:column; text-align:center; gap:14px; }
}
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; }
  .card.feature { grid-column:auto; grid-template-columns:1fr; gap:14px; }
  .steps { grid-template-columns:1fr; border-left:0; }
  .steps li { border-right:0; border-top:1px solid var(--line); padding:26px 0 0; }
  .quality { grid-template-columns:1fr; }
  .album-stage { padding:0 8px; }
  .album-p, .album-nx { width:42px; height:42px; background:rgba(56,156,212,.85); }
  .hero-bot .brand img { height:42px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  .slide { transition:none; }
  .tile-img img, .g-item img { transition:none; }
}