/* =====================================================================
   SGB Al-Dabal – website styles
   ---------------------------------------------------------------------
   Each component is written once; its mobile rules sit right below it.
   Breakpoints: 1240 · 1100 (tablet) · 960 (mobile menu) · 900 · 760 · 640 (phone)

    1. Tokens & base              12. Products page
    2. Typography & headings      13. Board members
    3. Buttons & links            14. Clients
    4. Page curtain & progress    15. Services page showcase
    5. Header & main menu         16. Projects page showcase
    6. Home hero slider           17. Videos, profile, Al-Osrah
    7. Inner page hero            18. Contact
    8. Scroll reveal              19. Certifications & awards
    9. Shared sections            20. CTA band & footer
   10. Home sections              21. Lightbox
   11. Factory block              22. Touch screens & reduced motion
   ===================================================================== */


/* =========================== 1. Tokens & base =========================== */
:root{
  --red:#8e1b1f; --red-dark:#6a1114; --red-soft:#f8eded;
  --ink:#161a2b; --ink-2:#23283d; --text:#4a4f63; --muted:#858aa0;
  --line:#e7e8ef; --bg:#fff; --bg-alt:#f5f5f8;
  --radius:16px; --wrap:1220px;
  --ease:cubic-bezier(.7,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip on both: iOS Safari ignores it on body alone */
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.7;font-feature-settings:"cv11","ss01";color:var(--text);background:var(--bg);overflow-x:clip}
body.lock{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:110px 0;position:relative}
.alt{background:var(--bg-alt)}
.dark{background:var(--ink);color:#b8bbcc}
.dark h2,.dark h3{color:#fff}

@media (max-width:640px){
  .wrap{padding:0 16px}
  section{padding:64px 0}
}


/* =========================== 2. Typography & headings =========================== */
h1,h2,h3,h4{color:var(--ink);line-height:1.2;font-weight:600;letter-spacing:-.018em;text-wrap:balance}

/* Small red label above titles: "— ABOUT US" */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.dark .eyebrow{color:#e4868a}

/* Section heading block */
.head{max-width:920px;margin-bottom:56px}
.head h2,.h2{font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.head p{margin-top:16px;font-size:16.5px;max-width:760px;color:#565b6e}
.head.center{text-align:center;margin-left:auto;margin-right:auto}
.head.center .eyebrow::after{content:"";width:28px;height:2px;background:currentColor}
/* Heading on the left, button on the right */
.split-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.split-head .head{margin-bottom:0}

.prose p+p{margin-top:16px}
.prose p{max-width:68ch}

@media (max-width:640px){
  .head{margin-bottom:32px}
  .head h2,.h2{font-size:24px}
}


/* =========================== 3. Buttons & links =========================== */
/* Pill button; the coloured layer slides in from the left on hover */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font:500 14.5px Inter,sans-serif;border:0;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff}
.btn-red::before{background:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white::before{background:var(--red)}
.btn-white:hover{color:#fff}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn-ghost::before{background:#fff}
.btn-ghost:hover{color:var(--ink)}
.btn-line{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.btn-line::before{background:var(--red)}
.btn-line:hover{color:#fff}

/* Text link with an underline that draws in on hover */
.link{color:var(--red);font-weight:500;display:inline-flex;gap:8px;align-items:center;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--ease)}
.link:hover{background-size:100% 1.5px}

/* Round arrow buttons used by the sliders */
.circle-btn{width:56px;height:56px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);background:transparent;color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .35s,box-shadow .35s,color .35s,transform .35s var(--ease-out)}
.circle-btn:hover{background:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);transform:scale(1.06)}
.circle-btn.ink{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.circle-btn.ink:hover{color:#fff;box-shadow:inset 0 0 0 1.5px var(--red)}


/* =========================== 4. Page curtain & progress =========================== */
/* Two panels (red + navy with logo) cover the screen between pages; app.js adds .ready / .leaving / .go */
.curtain{position:fixed;inset:0;z-index:999;pointer-events:none}
.curtain i{position:absolute;inset:0;transform:translateY(0)}
.curtain i:nth-child(1){background:var(--red)}
.curtain i:nth-child(2){background:var(--ink);display:grid;place-items:center}
.curtain img{width:120px;background:#fff;padding:12px 16px;border-radius:12px;opacity:1;transition:opacity .3s}
body.ready .curtain i{transform:translateY(-100%);transition:transform .9s var(--ease)}
body.ready .curtain i:nth-child(1){transition-delay:.15s}
body.ready .curtain img{opacity:0}
body.leaving .curtain i{transform:translateY(100%);transition:none}
body.leaving.go .curtain i{transform:translateY(0);transition:transform .6s var(--ease)}
body.leaving.go .curtain i:nth-child(2){transition-delay:.12s}

/* Reading progress line at the very top */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:100%;transform-origin:left;transform:scaleX(0);z-index:200}

/* Back-to-top button */
.to-top{position:fixed;right:24px;bottom:24px;z-index:90;width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.8);transition:.4s var(--ease-out);box-shadow:0 10px 24px rgba(142,27,31,.35)}
.to-top.on{opacity:1;transform:none}
.to-top:hover{background:var(--ink)}


/* =========================== 5. Header & main menu =========================== */
/* Full width; transparent over the photo, white once scrolled (.scrolled),
   slides away while scrolling down and returns on scroll up (.hide) */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;transition:transform .5s var(--ease),background .45s,box-shadow .45s,color .45s}
header.site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.16);transition:opacity .4s}
header.site.scrolled{background:#fff;color:var(--ink);box-shadow:0 12px 40px rgba(20,22,40,.08)}
header.site.scrolled::after{opacity:0}
header.site.hide{transform:translateY(-100%)}
body.menu header.site{transform:none}
.bar{display:flex;align-items:stretch;gap:28px;height:96px;padding:0 clamp(16px,3.2vw,56px);transition:height .5s var(--ease)}
header.site.scrolled .bar{height:76px}

/* Logo: light version over photos, normal version on the white header */
.logo{flex:none;align-self:center;position:relative;z-index:120}
.logo img{height:52px;width:auto;transition:opacity .35s,height .45s var(--ease)}
.logo .l-dark{position:absolute;left:0;top:0;opacity:0}
header.site.scrolled .logo img{height:44px}
header.site.scrolled .logo .l-light,header.site:has(li.has-mega:hover) .logo .l-light{opacity:0}
header.site.scrolled .logo .l-dark,header.site:has(li.has-mega:hover) .logo .l-dark{opacity:1}

/* Menu items with a red underline */
nav.main{flex:1;display:flex;justify-content:center}
nav.main>ul{display:flex;list-style:none;align-items:stretch;gap:2px}
nav.main>ul>li{position:relative;display:flex}
nav.main>ul>li.has-mega{position:static}
nav.main>ul>li>a{position:relative;display:flex;align-items:center;gap:6px;padding:0 16px;font-size:14.5px;font-weight:500;color:inherit;transition:color .3s}
nav.main>ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:22px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
header.site.scrolled nav.main>ul>li>a::after{bottom:14px}
nav.main>ul>li:hover>a::after,nav.main>ul>li>a.active::after{transform:scaleX(1);transform-origin:left}
header.site.scrolled nav.main>ul>li>a:hover,header.site.scrolled nav.main>ul>li>a.active{color:var(--red)}
.caret{display:inline-flex;transition:transform .35s var(--ease)}
li:hover>a .caret{transform:rotate(180deg)}
nav.main .m-only{display:none}                       /* "Contact Us" item, mobile menu only */

/* Mega menu (drop-down panel under About Us / Our Services) */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--text);box-shadow:0 40px 70px rgba(20,22,40,.16);border-top:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .55s var(--ease-out),visibility .35s}
nav.main li.has-mega:hover .mega,nav.main li.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:280px 1fr;gap:48px;padding:40px clamp(16px,3.2vw,56px) 44px;max-width:1680px;margin:0 auto}
.mega-intro .eyebrow{margin-bottom:10px}
.mega-intro h4{font-size:24px;margin-bottom:10px}
.mega-intro p{font-size:14px;margin-bottom:18px}
.mega-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.mega-card{display:block;color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease-out)}
li.has-mega:hover .mega-card,li.has-mega:focus-within .mega-card{opacity:1;transform:none}
li.has-mega:hover .mega-card:nth-child(2){transition-delay:.05s}
li.has-mega:hover .mega-card:nth-child(3){transition-delay:.1s}
li.has-mega:hover .mega-card:nth-child(4){transition-delay:.15s}
li.has-mega:hover .mega-card:nth-child(5){transition-delay:.2s}
/* Photo cards (Our Services) */
.mega-card .imw{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#eee}
.mega-card .im{width:100%;height:100%;background:center/cover;transition:transform 1s var(--ease-out)}
.mega-card:hover .im{transform:scale(1.07)}
.mega-card b{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:15px;font-weight:600;transition:color .3s}
.mega-card b span{color:var(--red);transition:transform .4s var(--ease)}
.mega-card:hover b{color:var(--red)}
.mega-card:hover b span{transform:translateX(4px)}
.mega-card small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
/* Burgundy icon tiles (About Us, six of them) */
.mega-card.solid .tile{position:relative;aspect-ratio:4/3;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(145deg,#9a1d22 0%,var(--red-dark) 100%);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease-out),box-shadow .5s}
.mega-card.solid .tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.16),transparent 55%)}
.mega-card.solid .tile::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(255,255,255,.14);z-index:-1;transition:transform .8s var(--ease-out)}
.mega-card.solid .tile svg{position:absolute;left:18px;top:18px;opacity:.95}
.mega-card.solid .tile .ar{position:absolute;right:16px;top:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:background .35s,transform .5s var(--ease)}
.mega-card.solid .tile b{display:block;margin:0;color:#fff;font-size:15.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.mega-card.solid small{margin-top:10px}
.mega-card.solid:hover .tile{transform:translateY(-4px);box-shadow:0 18px 34px rgba(142,27,31,.32)}
.mega-card.solid:hover .tile::after{transform:scale(1.5)}
.mega-card.solid:hover .tile .ar{background:#fff;color:var(--red);transform:translateX(3px)}
.mega-card.solid:hover b{color:#fff}

/* Header right side: phone, Contact button, burger */
.actions{flex:none;display:flex;align-items:center;gap:22px}
.actions .btn{padding:13px 26px}
.call{display:flex;align-items:center;gap:12px;color:inherit}
.call .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.9;transition:background .35s,box-shadow .35s,color .35s}
.call:hover .ic{background:var(--red);box-shadow:inset 0 0 0 1.5px var(--red);color:#fff}
.call small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;line-height:1.3}
.call b{font-size:15px;font-weight:600;white-space:nowrap}
.burger{display:none;width:46px;height:46px;border:0;background:var(--red);border-radius:12px;cursor:pointer;position:relative;z-index:120}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;transition:.45s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:27px}
body.menu .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}

/* Desktop: header turns white while a mega menu is open so both read as one panel; About menu has 6 tiles */
@media (min-width:961px){
  header.site:has(li.has-mega:hover){background:#fff;color:var(--ink)}
  header.site:has(li.has-mega:hover)::after{opacity:0}
  nav.main>ul>li:nth-child(2) .mega-cards{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:1240px){
  .call{display:none}
  nav.main>ul>li>a{padding:0 11px}
  nav.main>ul>li>a::after{left:11px;right:11px}
}
@media (max-width:1100px){
  .mega-in{grid-template-columns:1fr}
  .mega-intro{display:none}
}
/* Mobile menu: full-screen navy panel that opens as a growing circle from the burger */
@media (max-width:960px){
  .bar{height:76px}
  header.site .actions{margin-left:auto}                /* burger on the far right */
  header.site .actions .btn{display:none}
  .burger{display:block}
  body.menu .logo .l-light{opacity:1!important}      /* beats the .scrolled / :has() logo swap */
  body.menu .logo .l-dark{opacity:0!important}
  nav.main{position:fixed;inset:0;background:var(--ink);padding:110px 28px 40px;overflow:auto;justify-content:flex-start;clip-path:circle(0 at calc(100% - 50px) 38px);transition:clip-path .8s var(--ease);z-index:110}
  body.menu nav.main{clip-path:circle(150% at calc(100% - 50px) 38px)}
  nav.main>ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  nav.main>ul>li{display:block;opacity:0;transform:translateY(30px);transition:.6s var(--ease-out)}
  body.menu nav.main>ul>li{opacity:1;transform:none}
  body.menu nav.main>ul>li:nth-child(1){transition-delay:.2s}
  body.menu nav.main>ul>li:nth-child(2){transition-delay:.25s}
  body.menu nav.main>ul>li:nth-child(3){transition-delay:.3s}
  body.menu nav.main>ul>li:nth-child(4){transition-delay:.35s}
  body.menu nav.main>ul>li:nth-child(5){transition-delay:.4s}
  body.menu nav.main>ul>li:nth-child(6){transition-delay:.45s}
  body.menu nav.main>ul>li:nth-child(7){transition-delay:.5s}
  nav.main>ul>li>a{color:#fff!important;font-size:24px;padding:12px 0}   /* white even when the header is .scrolled */
  nav.main>ul>li>a::after,.caret{display:none}
  nav.main .m-only{display:block}
  nav.main .m-only a{display:inline-flex;margin-top:18px;background:var(--red);border-radius:999px;padding:14px 28px;font-size:17px}
  /* Mega menus become simple indented link lists */
  .mega{position:static;opacity:1;visibility:visible;transform:none;background:none;box-shadow:none;border:0}
  .mega-in{display:block;padding:0 0 12px 14px}
  .mega-cards{grid-template-columns:1fr;gap:0}
  .mega-card{opacity:1;transform:none;color:#b9bccb}
  .mega-card .imw,.mega-card small,.mega-card b span{display:none}
  .mega-card b{margin:0;font-weight:400;font-size:16px;padding:7px 0;color:#b9bccb}
  .mega-card.solid .tile,.mega-card.solid:hover .tile{aspect-ratio:auto;padding:0;background:none;display:block;box-shadow:none;transform:none;overflow:visible}
  .mega-card.solid .tile::before,.mega-card.solid .tile::after,.mega-card.solid .tile svg,.mega-card.solid .tile .ar,.mega-card.solid small{display:none}
  .mega-card.solid .tile b{font-size:16px;font-weight:400;line-height:1.7;padding:7px 0;color:#b9bccb}
}


/* =========================== 6. Home hero slider =========================== */
/* Full-screen photo, headline bottom-left; slides cross-fade with a slow zoom */
.hero{position:relative;height:100vh;min-height:640px;padding:0;color:#fff;overflow:hidden;background:var(--ink)}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(rgba(10,12,20,.6),transparent);z-index:2;pointer-events:none}   /* keeps the transparent header readable */
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s var(--ease),visibility 1.2s}
.slide.on{opacity:1;visibility:visible}
.slide .bg{position:absolute;inset:-2%;background:center/cover;transform:scale(1.18)}
.slide.on .bg{transform:scale(1);transition:transform 7.5s cubic-bezier(.2,.6,.3,1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,22,.78) 0%,rgba(10,12,22,.45) 42%,rgba(10,12,22,.05) 75%),linear-gradient(0deg,rgba(10,12,22,.65) 0%,rgba(10,12,22,0) 45%)}
/* Flagship project: lighter shade so the full height of the structure shows */
.slide.flagship .bg{background-position:center 28%}
.slide.flagship::after{background:linear-gradient(90deg,rgba(10,12,22,.72) 0%,rgba(10,12,22,.35) 40%,rgba(10,12,22,0) 70%),linear-gradient(0deg,rgba(10,12,22,.6) 0%,rgba(10,12,22,0) 45%)}
.hero .content{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end}
.hero .content .wrap{width:100%;padding-top:0;padding-bottom:140px}
.hero .since{display:inline-block;font-size:11.5px;letter-spacing:.22em;padding:5px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;margin-bottom:16px}
.hero h1{color:#fff;font-size:clamp(30px,3.4vw,50px);font-weight:700;line-height:1.08;letter-spacing:-.02em;max-width:880px}
.hero p{max-width:560px;margin:16px 0 28px;font-size:16px;line-height:1.65;color:#e3e5ee}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .actions .btn{padding:12px 24px;font-size:14px}

/* Text animations shared by the sliders: lines rise from a mask, other items fade up */
.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease-out)}
.slide.on .line>span,.on .line>span{transform:none}
.slide.on .line:nth-child(2)>span{transition-delay:.12s}
.slide.on .line:nth-child(3)>span{transition-delay:.24s}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out) .45s,transform .9s var(--ease-out) .45s}
.slide.on .fade-in,.on .fade-in{opacity:1;transform:none}

/* Dots (thin lines that fill up while a slide is shown) and counter */
.hero-nav{position:absolute;z-index:3;bottom:48px;left:0;right:0}
.hero-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.dots{display:flex;gap:12px}
.dots button{width:64px;height:22px;padding:0;background:transparent;border:0;cursor:pointer;position:relative;overflow:hidden}   /* tall tap area, thin line */
.dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:rgba(255,255,255,.25)}
.dots button i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:#fff;transform:scaleX(0);transform-origin:left}
.dots button.on i{animation:fill var(--dur,6.5s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.counter{font-size:14px;letter-spacing:.1em;color:#cfd1dc}
.counter b{color:#fff;font-size:22px}
.scroll-cue{position:absolute;z-index:3;right:24px;top:50%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;color:#c9cbd6;display:flex;align-items:center;gap:14px}
.scroll-cue::after{content:"";width:1px;height:70px;background:linear-gradient(#fff,transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:640px){
  .hero .content .wrap{padding-bottom:120px}
  .hero h1{font-size:30px}
  .hero .actions .btn{padding:13px 22px}
  .dots button{width:36px}
  .scroll-cue{display:none}
}


/* =========================== 7. Inner page hero =========================== */
.page-hero{position:relative;padding:200px 0 110px;color:#fff;overflow:hidden;background:var(--ink)}
.page-hero .bg{position:absolute;inset:-10% 0;background:center/cover;width:100%;height:120%;will-change:transform}   /* moved by app.js (parallax) */
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,16,28,.93) 10%,rgba(14,16,28,.6) 60%,rgba(142,27,31,.4))}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(32px,4.2vw,54px);font-weight:700;letter-spacing:-.02em}
.page-hero p{max-width:620px;margin-top:18px;color:#d7d9e3;font-size:16.5px}
.page-hero .sub-in{opacity:0;transform:translateY(20px);animation:up 1s var(--ease-out) 1.1s forwards}
@keyframes up{to{opacity:1;transform:none}}
.crumb{display:flex;gap:10px;font-size:13px;letter-spacing:.08em;color:#b6b9c9;margin-bottom:18px}
.crumb a:hover{color:#fff}
/* Page titles split into letters by app.js (.w = word, .ch = letter) */
.chars .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.chars .ch{display:inline-block;transform:translateY(105%);opacity:0;animation:ch .9s var(--ease-out) forwards;animation-delay:calc(.7s + var(--i)*.035s)}
@keyframes ch{to{transform:none;opacity:1}}

@media (max-width:640px){
  .page-hero{padding:130px 0 70px}
  .page-hero h1{font-size:32px}
  .crumb a{display:inline-block;padding:10px 0}
}


/* =========================== 8. Scroll reveal =========================== */
/* data-r="up|left|right|zoom|clip|clip-up"; app.js adds .in. --d = stagger step */
[data-r]{transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),clip-path 1.2s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
[data-r=up]{opacity:0;transform:translateY(50px)}
[data-r=left]{opacity:0;transform:translateX(-60px)}
[data-r=right]{opacity:0;transform:translateX(60px)}
[data-r=zoom]{opacity:0;transform:scale(.9)}
[data-r=clip]{clip-path:inset(0 100% 0 0)}
[data-r=clip-up]{clip-path:inset(100% 0 0 0)}
[data-r].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (max-width:900px){                            /* no sideways movement on small screens */
  [data-r=left],[data-r=right]{transform:translateY(40px)}
  [data-r].in{transform:none}
}

/* Photo that zooms slightly on hover */
.img-zoom{overflow:hidden;border-radius:var(--radius)}
.img-zoom>*{transition:transform 1.2s var(--ease-out)}
.img-zoom:hover>*{transform:scale(1.06)}


/* =========================== 9. Shared sections =========================== */
/* Two columns */
.two{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.two.wide-l{grid-template-columns:1.1fr .9fr}
@media (max-width:1100px){
  .two,.two.wide-l{grid-template-columns:1fr;gap:56px}
}

/* Key figures strip */
.stats{position:relative;z-index:5;background:#fff;border-bottom:1px solid var(--line)}
.stats .grid{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden}
.stat{padding:30px 18px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)}
.stat b{display:block;font-size:32px;color:var(--red);font-weight:700;line-height:1.1}
.stat span{font-size:13px;color:var(--muted);letter-spacing:.04em}
@media (max-width:1100px){
  .stats .grid{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4)::before{display:none}
  .stat:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .stats .grid{grid-template-columns:1fr 1fr}
  .stat{border-top:1px solid var(--line)}
  .stat::before{display:none}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(odd):not(:last-child){border-right:1px solid var(--line)}
  .stat:last-child{grid-column:1/-1}
  .stat b{font-size:28px}
}

/* Saudi Made + TÜV strip */
.certs{padding:56px 0;border-bottom:1px solid var(--line)}
.certs .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.certs .t{max-width:460px}
.certs .t h3{font-size:20px;margin-bottom:6px}
.certs .t p{font-size:15px}
.certs .logos{display:flex;align-items:center;gap:48px}
.certs .logos figure{display:flex;align-items:center;gap:16px;margin:0}
.certs .logos img{height:96px;width:auto;transition:transform .5s var(--ease-out)}
.certs .logos figure:hover img{transform:translateY(-4px) scale(1.04)}
.certs .logos figcaption{font-size:13px;line-height:1.45;color:var(--muted)}
.certs .logos figcaption b{display:block;color:var(--ink);font-size:14.5px}
@media (max-width:640px){
  .certs{padding:40px 0}
  .certs .logos{gap:22px 28px;flex-wrap:wrap}
  .certs .logos img{height:64px}
}

/* "Since 1973" photo: black & white with the yellow sign in colour; full colour fades in on hover */
.frame{position:relative}
.frame::before{content:"";position:absolute;left:-24px;top:-24px;width:38%;height:48%;border:2px solid var(--red);border-radius:var(--radius);z-index:-1}
.frame .main-img{position:relative;border-radius:var(--radius);background:center/cover;transition:transform 1.2s var(--ease-out)}
.frame .main-img::after{content:"";position:absolute;inset:0;background:url("images/about/early-project.jpg") center/cover;opacity:0;transition:opacity 1.2s var(--ease)}
.heritage{position:relative}
.heritage:hover .main-img::after{opacity:1}
.heritage-tag{position:absolute;left:18px;top:18px;z-index:2;background:rgba(14,16,28,.72);color:#fff;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px;backdrop-filter:blur(6px);transition:opacity .6s}
.heritage:hover .heritage-tag{opacity:0}
.frame .badge{position:absolute;right:-28px;bottom:32px;background:var(--red);color:#fff;border-radius:var(--radius);padding:24px 32px;box-shadow:0 20px 40px rgba(142,27,31,.35)}
.frame .badge b{display:block;font-size:clamp(40px,4vw,58px);line-height:1}
.frame .badge span{font-size:13px;letter-spacing:.1em}
.two:has(.heritage) .h2{font-size:clamp(22px,2vw,28px)}
@media (min-width:1101px){
  .two:has(.heritage){grid-template-columns:1.25fr 1fr;gap:64px}   /* bigger photo column */
}
@media (max-width:1100px){
  .frame .badge{right:16px;bottom:16px}
}
@media (max-width:640px){
  .frame::before{display:none}
  .frame .badge{right:12px;bottom:12px;padding:12px 18px;border-radius:12px}
  .frame .badge b{font-size:30px}
  .frame .badge span{font-size:11px}
}

/* Checklist (factory strengths) – white text on dark, white cards on light grey */
.checks{list-style:none;display:grid;gap:12px;margin-top:30px}
.checks li{display:flex;gap:14px;align-items:center;padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-weight:500;font-size:15px;transition:background .4s,transform .5s var(--ease-out)}
.checks li:hover{background:var(--red);transform:translateX(8px)}
.checks li .c{flex:none;width:30px;height:30px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:background .4s}
.checks li:hover .c{background:#fff;color:var(--red)}
.alt .checks li{background:#fff;border-color:var(--line);color:var(--ink)}
.alt .checks li:hover{background:var(--red);color:#fff}

/* Three-column cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 50px rgba(20,22,40,.12)}
.card .imw{overflow:hidden}
.card .im{aspect-ratio:16/11;background:center/cover;transition:transform 1s var(--ease-out)}
.card:hover .im{transform:scale(1.07)}
.card .in{padding:26px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14.5px}
@media (max-width:1100px){ .cards3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards3{grid-template-columns:1fr} }

/* Photo grid with lightbox (company photos) */
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:16px}
.proj-grid .p{position:relative;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;background:#ddd}
.proj-grid .p:nth-child(8n+1){grid-row:span 2}
.proj-grid .p:nth-child(8n+4){grid-column:span 2}
.proj-grid .p:nth-child(8n+6){grid-row:span 2}
.proj-grid .p .im{position:absolute;inset:0;background:center/cover;transition:transform 1.2s var(--ease-out)}
.proj-grid .p::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(14,16,28,.85));opacity:0;transition:opacity .5s}
.proj-grid .p .cap{position:absolute;left:20px;bottom:18px;right:20px;z-index:2;color:#fff;font-weight:500;transform:translateY(20px);opacity:0;transition:.5s var(--ease-out);display:flex;justify-content:space-between;align-items:center}
.proj-grid .p .cap i{width:40px;height:40px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-style:normal}
.proj-grid .p:hover .im{transform:scale(1.08)}
.proj-grid .p:hover::after{opacity:1}
.proj-grid .p:hover .cap{transform:none;opacity:1}
@media (max-width:1100px){
  .proj-grid{grid-template-columns:repeat(3,1fr)}
  .proj-grid .p:nth-child(8n+4){grid-column:span 1}
}
@media (max-width:640px){
  .proj-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .proj-grid .p:nth-child(8n+1),.proj-grid .p:nth-child(8n+6){grid-row:span 1}
}

/* "Get to know us" photo links (About page) */
.explore{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ex{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;color:#fff;display:flex;align-items:flex-end;padding:24px}
.ex .im{position:absolute;inset:0;background:center/cover;transition:transform 1.2s var(--ease-out)}
.ex::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(14,16,28,.9))}
.ex div{position:relative;z-index:2}
.ex h3{color:#fff;font-size:20px}
.ex span{font-size:13.5px;color:#e4868a;display:inline-flex;gap:6px;transition:gap .3s}
.ex:hover .im{transform:scale(1.08)}
.ex:hover span{gap:12px}
@media (max-width:1100px){ .explore{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .explore{grid-template-columns:1fr 1fr;gap:10px}
  .ex{padding:14px;aspect-ratio:4/5}
  .ex h3{font-size:15px;line-height:1.25}
  .ex span{font-size:12px}
}


/* =========================== 10. Home sections =========================== */
/* Expanding service panels: one open panel, the others show a vertical title */
.xp{display:flex;gap:14px;height:660px}
.xp-item{position:relative;flex:1;min-width:0;border-radius:24px;overflow:hidden;color:#fff;cursor:pointer;transition:flex 1.1s var(--ease)}
.xp-item.on{flex:4.2}
.xp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.6s var(--ease)}
.xp-item.on .xp-bg{transform:scale(1)}
.xp-item[href*="manufacturing"] .xp-bg{object-position:22% 40%}
.xp-item[href*="training"] .xp-bg{object-position:50% 30%}
.xp-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,28,.15) 0%,rgba(14,16,28,.05) 35%,rgba(14,16,28,.85) 100%);transition:opacity .6s}   /* closed panels */
.xp-item::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(14,16,28,.92) 0%,rgba(14,16,28,.6) 32%,rgba(14,16,28,0) 62%);opacity:0;transition:opacity .8s}   /* open panel: shade behind the text only */
.xp-item.on::before{opacity:1}
.xp-item.on::after{opacity:0}
.xp-num{position:absolute;z-index:2;top:26px;left:26px;font-weight:600;font-size:14px;letter-spacing:.14em}
.xp-plus{position:absolute;z-index:2;top:18px;right:18px;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);display:grid;place-items:center;font-size:20px;transition:transform .6s var(--ease),background .4s}
.xp-item.on .xp-plus{transform:rotate(45deg);background:var(--red);box-shadow:none}
.xp-vt{position:absolute;z-index:2;left:50%;bottom:36px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:21px;font-weight:600;white-space:nowrap;transition:opacity .4s}
.xp-item.on .xp-vt{opacity:0}
.xp-body{position:absolute;z-index:2;left:44px;bottom:48px;width:min(540px,calc(100% - 88px));opacity:0;transform:translateY(30px);transition:opacity .3s,transform .3s}
.xp-item.on .xp-body{opacity:1;transform:none;transition:opacity .8s .5s,transform .9s var(--ease-out) .5s}
.xp-body h3{color:#fff;font-size:clamp(22px,2vw,30px);margin:20px 0 12px}
.xp-body p{color:#d8dae4;font-size:15.5px}
.xp-body .link{color:#fff;margin-top:22px}
.xp-bar{position:absolute;z-index:3;left:0;bottom:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.xp-item.on .xp-bar{animation:fill var(--dur,6s) linear forwards}
.xp.paused .xp-bar{animation-play-state:paused}
@media (max-width:900px){                            /* panels stack; the open one grows taller */
  .xp{flex-direction:column;height:auto}
  .xp-item,.xp-item.on{flex:none;height:92px;transition:height 1s var(--ease)}
  .xp-item.on{height:540px}
  .xp-vt{writing-mode:horizontal-tb;transform:none;left:84px;bottom:auto;top:30px;font-size:18px}
  .xp-body{left:24px;right:24px;bottom:28px;width:auto}
}
@media (max-width:640px){ .xp-item.on{height:560px} }

/* Projects carousel: centred photo, neighbours smaller and grey; draggable */
.car{overflow:hidden;cursor:grab;padding:10px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car.drag{cursor:grabbing}
.car-track{display:flex;gap:28px;will-change:transform;transition:transform 1s var(--ease)}
.car.drag .car-track{transition:none}
.car-item{flex:none;position:relative;width:clamp(280px,46vw,780px);aspect-ratio:16/10;margin:0;border-radius:24px;overflow:hidden;background:#ddd;transform:scale(.84);opacity:.4;filter:grayscale(.7);transition:transform 1s var(--ease),opacity 1s,filter 1s}
.car-item.on{transform:none;opacity:1;filter:none}
.car-item img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.car-item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(10,12,20,.85));opacity:0;transition:opacity .8s}
.car-item.on::after{opacity:1}
.car-item figcaption{position:absolute;z-index:2;left:30px;right:30px;bottom:26px;display:flex;justify-content:space-between;align-items:center;color:#fff;opacity:0;transform:translateY(18px);transition:opacity .6s .35s,transform .7s var(--ease-out) .35s}
.car-item.on figcaption{opacity:1;transform:none}
.car-item figcaption b{font-size:20px;font-weight:600}
.car-item figcaption small{display:block;font-size:12px;letter-spacing:.16em;color:#e4868a}
.car-item figcaption i{font-style:normal;width:52px;height:52px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:22px}
/* Arrows + progress bar + counter (also used by the fittings rail) */
.car-ctrl{display:flex;align-items:center;gap:22px;margin-top:40px}
.car-bar{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.car-bar i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.car-count{font-weight:500;color:var(--muted);min-width:90px;text-align:right}
.car-count b{font-size:30px;color:var(--ink);font-weight:700}
@media (max-width:900px){ .car-item{width:84vw} }

/* Product photo tiles */
.prod-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pc{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease-out),box-shadow .5s}
.pc:hover{transform:translateY(-6px);box-shadow:0 24px 44px rgba(20,22,40,.12)}
.pc .imw{overflow:hidden}
.pc .im{aspect-ratio:1/1;background:#f1f1f4 center/cover;transition:transform 1s var(--ease-out)}
.pc:hover .im{transform:scale(1.07)}
@media (max-width:1100px){ .prod-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .prod-cards{grid-template-columns:1fr 1fr;gap:10px} }

/* Awards highlights (five tiles) */
.aw-teaser{padding-top:90px;padding-bottom:90px}
.awt-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.awt{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px 16px;transition:transform .5s var(--ease-out),box-shadow .5s,border-color .3s}
.awt img{height:150px;width:100%;object-fit:contain}
.awt span{font-size:13px;font-weight:600;color:var(--ink)}
.awt:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 18px 36px rgba(20,22,40,.08)}
@media (max-width:1100px){
  .awt-row{grid-template-columns:repeat(3,1fr)}
  .awt:nth-child(n+4){display:none}
}
@media (max-width:640px){
  .awt-row{gap:8px}
  .awt{padding:10px 6px}
  .awt img{height:80px}
  .awt span{font-size:11px;text-align:center}
}

/* Al-Osrah feature (home + Al-Osrah page): tilted magazine cover */
.issue-feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.cover{border-radius:var(--radius);box-shadow:0 40px 70px rgba(20,22,40,.25);transform:perspective(1200px) rotateY(-10deg) rotateX(3deg);transition:transform .9s var(--ease-out)}
.cover:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-6px)}
@media (max-width:1100px){ .issue-feature{grid-template-columns:1fr;gap:56px} }


/* =========================== 11. Factory block =========================== */
/* Hall photo with the four production steps as small tiles inside it */
.fac{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.3;background:#111}
.fac::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,12,20,.75));pointer-events:none}
.fac-main{position:absolute;inset:0;cursor:zoom-in}
.fac-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.fac:hover .fac-main img{transform:scale(1.04)}
.fac-thumbs{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fac-thumbs figure{position:relative;margin:0;aspect-ratio:4/3;border-radius:10px;overflow:hidden;cursor:zoom-in;box-shadow:0 10px 24px rgba(0,0,0,.35);outline:2px solid rgba(255,255,255,.85);outline-offset:-2px;transition:transform .5s var(--ease-out),outline-color .3s}
.fac-thumbs figure:hover{transform:translateY(-6px);outline-color:var(--red)}
.fac-thumbs img{width:100%;height:100%;object-fit:cover}
.fac-thumbs figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.02em;background:linear-gradient(transparent,rgba(0,0,0,.75))}
@media (max-width:640px){
  .fac{aspect-ratio:4/3.6}
  .fac-thumbs{left:8px;right:8px;bottom:8px;gap:6px}
  .fac-thumbs figure{border-radius:7px}
  .fac-thumbs figcaption{font-size:10px;padding:12px 5px 4px;line-height:1.2}
}


/* =========================== 12. Products page =========================== */
/* Red catalogue banner with slowly turning rings */
.catalog{position:relative;overflow:hidden;border-radius:24px;background:var(--red);color:#fff;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.catalog::before,.catalog::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
.catalog::before{width:420px;height:420px;right:-120px;top:-180px;animation:spin 30s linear infinite}
.catalog::after{width:260px;height:260px;right:120px;bottom:-160px}
@keyframes spin{to{transform:rotate(360deg)}}
.catalog>*{position:relative;z-index:1}
.catalog h2{color:#fff;font-size:clamp(22px,2.3vw,30px)}
.catalog p{color:#f1d1d3;margin-top:8px}

/* Sticky section menu; moves up when the header hides */
.subnav{position:sticky;top:76px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:top .5s var(--ease)}
body:has(header.site.hide) .subnav{top:0}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
.subnav a{white-space:nowrap;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);transition:background .3s,color .3s}
.subnav a:hover{color:var(--red)}
.subnav a.on{background:var(--red);color:#fff}

/* Product sections with a large outlined number */
.block{padding:90px 0;border-bottom:1px solid var(--line)}
.block:last-of-type{border-bottom:0}
.block .num{font-size:90px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px #d9dae3;margin-bottom:-20px}
.p-img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#e9eaee}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.p-img:hover img{transform:scale(1.05)}
.tm{font-size:13px;color:var(--muted);font-style:italic}   /* trademark note */
.bullets{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.bullets li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.bullets li::before{content:"";flex:none;margin-top:8px;width:8px;height:8px;background:var(--red);border-radius:2px;transform:rotate(45deg)}

/* Pressed fittings: horizontal card rail (swipe / drag / arrows) */
.fit-wrap{margin-top:48px}
.fit-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,23vw,310px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.fit-rail::-webkit-scrollbar{display:none}
.fit-rail.drag{cursor:grabbing;scroll-snap-type:none}
.fit-card{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s}
.fit-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,22,40,.1);border-color:transparent}
.fit-card .im{aspect-ratio:1/1;overflow:hidden;background:#e9eaee}
.fit-card .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out);pointer-events:none}
.fit-card:hover .im img{transform:scale(1.07)}
.fit-card .t{padding:20px 22px 24px;flex:1}
.fit-card .k{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--red)}
.fit-card h4{font-size:17px;color:var(--ink);margin:4px 0 8px}
.fit-card p{font-size:14px;line-height:1.7}

/* General products: cross-fading photos with clickable dots */
.fade-show{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line)}
.fade-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 4s var(--ease-out)}
.fade-show img.on{opacity:1;transform:none}
.fs-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px;z-index:2}
.fs-dots i{width:18px;height:3px;border-radius:2px;background:rgba(20,22,40,.15);cursor:pointer;transition:background .4s}
.fs-dots i.on{background:var(--red)}

@media (max-width:640px){
  .catalog{padding:36px 26px}
  .block .num{font-size:64px}
  .bullets{grid-template-columns:1fr}
}


/* =========================== 13. Board members =========================== */
/* 2 · 2 · 2 cards: photo left, name and role right; red fill sweeps in on hover */
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1240px;margin:0 auto}
.member{position:relative;display:flex;align-items:center;gap:34px;padding:26px 34px 26px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease-out),color .4s}
.member::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--red),var(--red-dark));z-index:-1;clip-path:circle(0 at 90% 10%);transition:clip-path .8s var(--ease)}
.member:hover{transform:translateY(-6px);color:#fff}
.member:hover::before{clip-path:circle(150% at 90% 10%)}
.member .ph{flex:none;width:230px;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#fff}
.member .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.member:hover .ph img{transform:scale(1.05)}
.member h3{font-size:22px;line-height:1.35;transition:color .4s}
.member:hover h3{color:#fff}
.member p{color:var(--red);font-weight:500;font-size:15.5px;margin-top:6px;transition:color .4s}
.member:hover p{color:#f3d6d7}
@media (max-width:1100px){ .member .ph{width:170px} }
@media (max-width:760px){ .board{grid-template-columns:1fr} }
@media (max-width:640px){
  .member{gap:16px;padding:14px}
  .member .ph{width:96px}
  .member h3{font-size:16px}
  .member p{font-size:13px;margin-top:4px}
}


/* =========================== 14. Clients =========================== */
/* Two rows of logos scrolling in opposite directions; pause on hover */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee+.marquee{margin-top:18px}
.marquee .track{display:flex;gap:18px;width:max-content;animation:mq 45s linear infinite}
.marquee.rev .track{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* Logo box (grey until hovered) */
.logo-box{width:190px;height:110px;flex:none;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;padding:18px;transition:border-color .3s,transform .4s var(--ease-out)}
.logo-box img{max-height:70px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.4s}
.logo-box:hover{border-color:var(--red);transform:translateY(-4px)}
.logo-box:hover img{filter:none;opacity:1}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.logo-grid .logo-box{width:auto}
@media (max-width:1100px){ .logo-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:640px){
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .logo-box{width:150px;height:92px}
}


/* =========================== 15. Services page showcase =========================== */
/* Full-screen slides that wipe in from the side (shared with the projects showcase) */
.wipe{position:absolute;inset:0;visibility:hidden;z-index:1}
.wipe.on{visibility:visible;z-index:3}
.wipe.prev{visibility:visible;z-index:2}
.wipe .wm{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 100%)}
[data-dir=back] .wipe .wm{clip-path:inset(0 100% 0 0)}
.wipe.on .wm,[data-dir=back] .wipe.on .wm{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease)}
.wipe.prev .wm,[data-dir=back] .wipe.prev .wm{clip-path:inset(0 0 0 0)}
.wipe .wm img{width:100%;height:100%;object-fit:cover;transform:scale(1.22);transition:transform 1.6s var(--ease)}
.wipe.on .wm img{transform:scale(1)}
.wipe.prev .wm img{transform:scale(1) translateX(-6%);transition:transform 1.3s var(--ease)}
[data-dir=back] .wipe.prev .wm img{transform:scale(1) translateX(6%)}
.wipe .line>span{transition-delay:.5s}
.wipe .line+.line>span{transition-delay:.6s}
.wipe .fade-in{transition-delay:.75s}
.wipe .sh-card.fade-in{transition-delay:.9s}

.show{position:relative;height:100vh;min-height:780px;background:var(--ink);color:#fff;overflow:hidden;padding:0}
.show .wm::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(12,14,24,.94) 0%,rgba(12,14,24,.72) 45%,rgba(12,14,24,.35) 75%,rgba(142,27,31,.35) 100%)}
.sh-in{position:absolute;inset:0;z-index:4;display:flex;align-items:center;padding:110px 0 150px}
.sh-grid{width:100%;max-width:none;padding:0 clamp(16px,3.2vw,56px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,90px);align-items:center}
.sh-num{display:flex;align-items:baseline;gap:10px;font-weight:600;color:#e4868a;letter-spacing:.14em;margin-bottom:12px}
.sh-num b{font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);letter-spacing:0}
.sh-left h2{color:#fff;font-size:clamp(34px,4.2vw,60px);font-weight:700;letter-spacing:-.025em;line-height:1.02}
.sh-lead{margin-top:24px;max-width:560px;font-size:17px;color:#d9dbe6}
.sh-left .btn{margin-top:30px}
/* Frosted card with the full service text */
.sh-card{background:rgba(255,255,255,.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:34px 36px;max-height:52vh;overflow:auto;color:#e3e5ee;font-size:15px;scrollbar-width:thin}
.sh-card h4{color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sh-card h4::before{content:"";width:22px;height:2px;background:var(--red)}
.sh-card p{max-width:68ch}
.sh-card p+p{margin-top:12px}
/* Tabs along the bottom, each with a filling progress line */
.sh-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:6;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(transparent,rgba(8,10,18,.7));display:flex;align-items:stretch;padding:0 clamp(16px,3.2vw,56px);gap:24px}
.sh-tabs{flex:1;display:grid;grid-template-columns:repeat(5,1fr)}
.sh-tabs button{position:relative;background:none;border:0;border-right:1px solid rgba(255,255,255,.1);color:#9fa3b6;text-align:left;padding:22px 18px;cursor:pointer;display:flex;gap:14px;align-items:center;font:500 14.5px Inter,sans-serif;transition:color .35s,background .35s}
.sh-tabs button:first-child{border-left:1px solid rgba(255,255,255,.1)}
.sh-tabs button:hover{color:#fff}
.sh-tabs button img{width:54px;height:54px;border-radius:12px;object-fit:cover;opacity:.45;filter:grayscale(1);transition:opacity .4s,filter .4s}
.sh-tabs button small{display:block;font-size:11px;letter-spacing:.16em;color:#e4868a;margin-bottom:2px}
.sh-tabs button.on{color:#fff;background:rgba(255,255,255,.06)}
.sh-tabs button.on img{opacity:1;filter:none}
.sh-tabs button i,.ps-thumbs button i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.sh-tabs button.on i,.ps-thumbs button.on i{animation:fill var(--dur,8s) linear forwards}
.paused .sh-tabs button.on i,.paused .ps-thumbs button.on i{animation-play-state:paused}
.sh-arrows{display:flex;gap:10px;align-items:center}

/* Intro text under the showcase */
.sv-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}
.sv-intro p{font-size:17px}

@media (max-width:1100px){
  .sh-tabs button img{display:none}
  .sv-intro{grid-template-columns:1fr;gap:20px}
}
@media (max-width:900px){                            /* tabs on top, one slide at a time, normal page flow */
  .show{height:auto;min-height:0;display:flex;flex-direction:column;padding-top:76px}
  .show .wipe{position:relative;display:none}
  .show .wipe.on{display:block}
  .show .wipe .wm{clip-path:none!important}         /* beats the [data-dir=back] wipe states */
  .sh-in{position:relative;padding:36px 0 40px}
  .sh-grid{grid-template-columns:1fr;gap:28px}
  .sh-card{max-height:none}
  .sh-ctrl{order:-1;position:relative;background:var(--ink);padding:0;border-top:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .sh-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .sh-tabs button{flex:none;padding:16px 18px}
  .sh-arrows{display:none}
}


/* =========================== 16. Projects page showcase =========================== */
.pshow{position:relative;height:100vh;min-height:700px;background:#0b0d16;color:#fff;overflow:hidden;padding:0}
.pshow .wm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,18,.55) 0%,transparent 30%,transparent 55%,rgba(8,10,18,.9) 100%),linear-gradient(90deg,rgba(8,10,18,.6),transparent 55%)}
.ps-info{position:absolute;z-index:6;left:clamp(16px,3.2vw,56px);bottom:170px;max-width:640px}
.ps-info h1{color:#fff;font-size:clamp(34px,4.6vw,64px);font-weight:700;letter-spacing:-.025em;line-height:1}
.ps-info .crumb{margin-bottom:16px}
.ps-count{margin-top:18px;font-size:15px;color:#b9bccb;letter-spacing:.1em}
.ps-count b{font-size:34px;color:#fff;font-weight:700}
.ps-arrows{position:absolute;z-index:6;right:clamp(16px,3.2vw,56px);bottom:176px;display:flex;gap:12px}
/* Thumbnail strip */
.ps-thumbs{position:absolute;z-index:6;left:0;right:0;bottom:0;display:flex;gap:12px;overflow-x:auto;padding:22px clamp(16px,3.2vw,56px) 26px;scrollbar-width:none}
.ps-thumbs::-webkit-scrollbar{display:none}
.ps-thumbs button{flex:none;position:relative;width:132px;height:86px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#222;opacity:.45;outline:2px solid transparent;outline-offset:-2px;transition:opacity .4s,outline-color .4s,transform .4s var(--ease-out)}
.ps-thumbs button:hover{opacity:.85;transform:translateY(-4px)}
.ps-thumbs button.on{opacity:1;outline-color:var(--red)}
.ps-thumbs button img{width:100%;height:100%;object-fit:cover}
.ps-thumbs button i{top:auto;bottom:0;height:3px}

/* All projects: masonry columns */
.masonry{columns:4 260px;column-gap:18px}
.m-item{position:relative;display:block;break-inside:avoid;margin:0 0 18px;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#e9e9ee}
.m-item img{width:100%;height:auto;display:block;transition:transform 1.3s var(--ease-out)}
.m-item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(10,12,20,.8));opacity:0;transition:opacity .5s}
.m-item span{position:absolute;z-index:2;left:18px;bottom:16px;right:18px;color:#fff;font-weight:500;display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(14px);transition:.5s var(--ease-out)}
.m-item span i{font-style:normal;width:40px;height:40px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.m-item:hover img{transform:scale(1.06)}
.m-item:hover::after{opacity:1}
.m-item:hover span{opacity:1;transform:none}

@media (max-width:900px){
  .ps-info{bottom:150px}
  .ps-arrows{display:none}
  .ps-thumbs button{width:96px;height:66px}
}
@media (max-width:640px){
  .masonry{columns:2;column-gap:10px}
  .m-item{margin-bottom:10px;border-radius:12px}
  .m-item span{display:none}
}


/* =========================== 17. Videos, profile, Al-Osrah =========================== */
.video-wrap{position:relative;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 40px 80px rgba(20,22,40,.25)}
.video-wrap video{width:100%;max-height:640px;object-fit:contain;background:#000}

.pdf-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#f1f1f4;height:80vh;min-height:560px}
.pdf-frame iframe{width:100%;height:100%;border:0}

/* Magazine archive cards: red fill rises on hover */
.issues{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.issue{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease-out),color .4s}
.issue::before{content:"";position:absolute;inset:0;background:var(--red);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.issue:hover{transform:translateY(-6px);color:#fff}
.issue:hover::before{transform:none}
.issue small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.issue b{display:block;font-size:52px;line-height:1.1;color:var(--ink);font-weight:700;margin:6px 0 18px;transition:color .4s}
.issue span{font-weight:500;color:var(--red);transition:color .4s}
.issue:hover small,.issue:hover b,.issue:hover span{color:#fff}
@media (max-width:640px){
  .issues{grid-template-columns:1fr 1fr;gap:10px}
  .issue{padding:18px 16px}
  .issue b{font-size:34px;margin:4px 0 10px}
  .issue small{font-size:10.5px;letter-spacing:.1em}
}


/* =========================== 18. Contact =========================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px}
.info-list{list-style:none;display:grid;gap:16px;margin-top:26px}
.info-list li{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease-out),border-color .3s}
.info-list li:hover{transform:translateX(6px);border-color:var(--red)}
.info-list .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center}
.info-list small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.info-list b{color:var(--ink);font-weight:500}

/* Form with floating labels */
form.cf{background:#fff;border-radius:24px;padding:40px;box-shadow:0 30px 60px rgba(20,22,40,.08);display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.cf h3{grid-column:1/-1;font-size:24px}
form.cf>p{grid-column:1/-1;margin-top:-10px}
form.cf .btn{grid-column:1/-1;justify-content:center}
form.cf .btn[disabled]{opacity:.65;cursor:wait}
form.cf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}   /* spam trap, hidden from people */
/* Result message under the button (app.js sets .ok / .err) */
form.cf>.cf-status{margin:0;font-size:14.5px;font-weight:500;text-align:center}
form.cf>.cf-status:empty{display:none}
form.cf>.cf-status.ok{color:#1d7a46}
form.cf>.cf-status.err{color:var(--red)}
.fld{position:relative}
.fld.full{grid-column:1/-1}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:15px;padding:22px 16px 8px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg-alt);color:var(--ink);transition:border-color .3s,background .3s}
.fld select{padding-top:22px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e1b1f' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.fld textarea{min-height:140px;resize:vertical}
.fld label{position:absolute;left:17px;top:15px;font-size:14.5px;color:var(--muted);pointer-events:none;transition:.25s var(--ease-out)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);background:#fff}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label,.fld select+label{top:6px;font-size:11.5px;color:var(--red);letter-spacing:.04em}

/* Branch cards */
.branches{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.branch{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;font-size:14px;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),box-shadow .5s}
.branch:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,22,40,.1)}
.branch .pin{width:42px;height:42px;border-radius:50%;background:var(--red-soft);color:var(--red);display:grid;place-items:center;margin-bottom:16px;transition:background .4s,color .4s}
.branch:hover .pin{background:var(--red);color:#fff;animation:bounce .7s var(--ease-out)}
@keyframes bounce{40%{transform:translateY(-6px)}}
.branch h4{font-size:15px;margin-bottom:10px}
.branch .link{margin-top:auto;padding-top:14px;font-size:13.5px}

.map{border-radius:var(--radius);overflow:hidden;height:420px;margin-top:60px;filter:grayscale(.6);transition:filter .6s}
.map:hover{filter:none}
.map iframe{width:100%;height:100%;border:0}

@media (max-width:1100px){
  .contact-grid{grid-template-columns:1fr;gap:56px}
  .branches{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  form.cf{grid-template-columns:1fr;padding:26px}
  .info-list b a{display:inline-block;padding:8px 0}
  .branches{grid-template-columns:1fr}
  .branch{padding:20px}
  .branch .pin{margin-bottom:10px}
  .branch .link{padding:12px 0 4px}
}


/* =========================== 19. Certifications & awards =========================== */
.aw-certs{border-bottom:0;background:var(--bg-alt)}
/* Filter buttons */
.aw-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.aw-filter button{font:500 14px Inter,sans-serif;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.aw-filter button i{font-style:normal;font-size:12px;color:var(--muted);margin-left:4px}
.aw-filter button:hover{border-color:var(--red);color:var(--red)}
.aw-filter button.on{background:var(--red);border-color:var(--red);color:#fff}
.aw-filter button.on i{color:#f1c9cb}
/* Award cards */
.aw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.aw{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:zoom-in;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),box-shadow .5s}
.aw:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(20,22,40,.1)}
.aw.hide{display:none}
.aw-im{aspect-ratio:4/3.2;background:#f4f4f7;display:grid;place-items:center;padding:14px;overflow:hidden}
.aw-im img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 1s var(--ease-out)}
.aw:hover .aw-im img{transform:scale(1.05)}
.aw figcaption{padding:14px 16px 18px;position:relative}
.aw figcaption b{display:block;font-size:14px;color:var(--ink);line-height:1.35;padding-right:44px}
.aw figcaption span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:4px}
.aw figcaption .aw-yr{position:absolute;top:14px;right:14px;margin:0;font-size:11.5px;font-weight:600;color:var(--red);background:var(--red-soft);padding:2px 8px;border-radius:999px}   /* year badge */
@media (max-width:1100px){ .aw-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){
  .aw-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .aw-filter button{white-space:nowrap;padding:10px 14px}
  .aw-grid{grid-template-columns:1fr 1fr;gap:10px}
  .aw figcaption{padding:10px 10px 12px}
  .aw figcaption b{font-size:12.5px;padding-right:0}
  .aw figcaption span{font-size:11.5px}
  .aw figcaption .aw-yr{position:static;display:inline-block;margin-bottom:6px}
}


/* =========================== 20. CTA band & footer =========================== */
.cta-band{position:relative;overflow:hidden;border-radius:24px;background:var(--ink);padding:70px 60px;display:grid;grid-template-columns:1.3fr auto;gap:30px;align-items:center}
.cta-band .bg{position:absolute;inset:0;background:center/cover;opacity:.25;transition:transform 2s var(--ease-out)}
.cta-band:hover .bg{transform:scale(1.05)}
.cta-band>*:not(.bg){position:relative}
.cta-band h2{color:#fff;font-size:clamp(22px,2.3vw,30px)}
.cta-band p{color:#c3c6d4;margin-top:10px;font-size:16.5px}
@media (max-width:1100px){ .cta-band{grid-template-columns:1fr;padding:50px 40px} }
@media (max-width:640px){
  .cta-band{padding:40px 24px}
  .cta-band h2{font-size:22px}
}

footer{background:var(--ink);color:#a9adbf;padding:90px 0 0;font-size:14.5px;position:relative;overflow:hidden}
footer .big{font-size:clamp(60px,12vw,170px);font-weight:700;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap;position:absolute;bottom:40px;left:50%;transform:translateX(-50%);pointer-events:none}   /* outlined company name */
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;position:relative}
footer h4{color:#fff;font-size:15px;margin-bottom:18px;letter-spacing:.04em}
footer ul{list-style:none;display:grid;gap:10px}
footer ul a{transition:color .2s,padding .3s var(--ease-out)}
footer ul a:hover{color:#fff;padding-left:6px}
.flogo{display:inline-block;margin-bottom:20px}
.flogo img{height:56px}
.fcerts{display:flex;gap:18px;align-items:center;margin-top:22px}
.fcerts img{height:58px;width:auto;background:#fff;border-radius:10px;padding:6px}
.copy{border-top:1px solid rgba(255,255,255,.08);margin-top:120px;padding:24px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;position:relative}
@media (max-width:1100px){ .fgrid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  footer{padding-top:56px}
  .fgrid{gap:28px 20px}
  .fgrid>div:first-child,.fgrid>div:last-child{grid-column:1/-1}
  footer ul{gap:0}
  footer ul a,footer ul li{display:inline-block;padding:9px 0}   /* ≈40px tap targets */
  footer .copy{margin-top:48px;padding-right:64px}
}


/* =========================== 21. Lightbox =========================== */
/* Created by app.js: .lb > img + .x (close) + .pv / .nx (arrows) + .n (counter) */
.lb{position:fixed;inset:0;z-index:300;background:rgba(10,12,20,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.4s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:90vw;max-height:84vh;border-radius:10px;transform:scale(.92);transition:transform .5s var(--ease-out)}
.lb.on img{transform:none}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;transition:background .2s}
.lb button:hover{background:var(--red)}
.lb .x{top:24px;right:24px}
.lb .pv{left:24px}
.lb .nx{right:24px}
.lb .n{position:absolute;bottom:26px;color:#aaa;font-size:13px;letter-spacing:.1em}


/* =========================== 22. Touch screens & reduced motion =========================== */
/* Phones/tablets have no real hover: avoid cards getting stuck in their hover state */
@media (hover:none){
  .member:hover{transform:none;color:inherit}
  .member:hover::before{clip-path:circle(0 at 90% 10%)}
  .member:hover h3{color:var(--ink)}
  .member:hover p{color:var(--red)}
  .card:hover,.pc:hover,.branch:hover,.fit-card:hover,.issue:hover,.logo-box:hover,.aw:hover,.awt:hover{transform:none;box-shadow:none}
  .issue:hover{color:inherit}
  .issue:hover::before{transform:scaleY(0)}
  .issue:hover small{color:var(--muted)}
  .issue:hover b{color:var(--ink)}
  .issue:hover span{color:var(--red)}
}
/* Visitors who ask their system for less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-r]{opacity:1!important;transform:none!important;clip-path:none!important}
}