/* =============================================
   ARABISQUE — Engineering Consultancy
   Brand Identity Stylesheet v2
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* --- Brand Palette (matched to logo) --- */
:root{
  --brand:      #7a1f25;   /* maroon — from logo */
  --brand-dark: #5a151a;
  --brand-light:#9c3a3f;
  --gold:       #c4973b;   /* warm gold accent */
  --gold-light: #d4ad5a;
  --cream:      #faf6f0;   /* warm cream — from brand PDF background */
  --cream-dark: #f0ebe3;
  --ink:        #1a1a2e;
  --ink-soft:   #2d2d44;
  --text:       #2c2c2c;
  --text-muted: #6b6b6b;
  --white:      #ffffff;
  --pink-light: #e8b4b8;   /* from brand PDF color blocks */
}

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden; max-width:100%; scroll-behavior:smooth;}
body{
  font-family:'Tajawal','Amiri',Arial,sans-serif;
  direction:rtl; letter-spacing:0; color:var(--text);
  background:var(--cream); margin:0;
  font-weight:400; line-height:1.8;
  font-size:1.05rem;
}

/* Headings: Amiri (matches the classic arabic in the logo) */
h1,h2,h3,h4,h5,h6{
  font-family:'Amiri','Playfair Display',Georgia,serif;
  letter-spacing:0; color:var(--ink);
  line-height:1.5;
}

a{text-decoration:none;}
img{max-width:100%; height:auto;}

/* =============================================
   ARABESQUE PATTERN (SVG decorative element)
   ============================================= */
.arabesque-divider{
  display:block; margin:0 auto; height:30px; width:200px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath d='M0 15 Q25 0 50 15 Q75 30 100 15 Q125 0 150 15 Q175 30 200 15' fill='none' stroke='%237a1f25' stroke-width='1.5' opacity='.4'/%3E%3Ccircle cx='100' cy='15' r='4' fill='%237a1f25' opacity='.5'/%3E%3Ccircle cx='50' cy='15' r='2.5' fill='%237a1f25' opacity='.3'/%3E%3Ccircle cx='150' cy='15' r='2.5' fill='%237a1f25' opacity='.3'/%3E%3C/svg%3E") no-repeat center/contain;
}
.arabesque-border{
  border-top:2px solid var(--brand);
  border-bottom:1px solid var(--pink-light);
  padding-top:3px;
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar{
  padding:.65rem 0;
  backdrop-filter:blur(12px);
  transition:background .3s;
}
.navbar.bg-dark{
  background:var(--white) !important;
  border-bottom:2px solid var(--brand);
  box-shadow:0 2px 16px rgba(0,0,0,.08);
}

/* Logo: prominent display — original maroon colors */
.brand-logo{
  height:60px; width:auto;
  image-rendering:-webkit-optimize-contrast;
}
.brand-text{
  display:flex; flex-direction:column; justify-content:center;
  border-right:2px solid var(--gold); padding-right:1rem;
}
.brand-text-ar{
  font-family:'Alexandria',sans-serif;
  font-size:1.15rem; font-weight:600; color:var(--brand);
  line-height:1.6; letter-spacing:0.5px;
  direction:rtl; text-align:right;
  white-space:nowrap;
}
.brand-text-en{
  font-family:'Alexandria',sans-serif;
  font-size:.75rem; font-weight:400; color:var(--brand);
  opacity:.85;
  direction:ltr; unicode-bidi:bidi-override;
  text-align:justify; text-align-last:justify;
  white-space:nowrap;
}
.brand-name{
  font-family:'Amiri',serif;
  font-weight:700; font-size:.95rem;
  color:var(--brand); opacity:.9;
}
.navbar .nav-link{
  font-family:'Tajawal',sans-serif;
  font-size:1.05rem; font-weight:500; padding:.5rem 1rem;
  color:var(--ink); transition:color .2s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--brand);
}

/* =============================================
   HERO (Homepage)
   ============================================= */
.home-hero{
  position:relative; overflow:hidden;
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); text-align:center;
}
.home-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:brightness(.4) saturate(1.1);
  transform:scale(1.02);
}
.home-hero-content{
  position:relative; z-index:2;
  max-width:800px; padding:2rem 1.5rem;
}

/* Hero logo: large centered, original colors on white card */
.home-hero-logo-wrap{
  display:inline-block;
  background:rgba(255,255,255,.95);
  padding:1.25rem 2rem;
  border-radius:8px;
  margin-bottom:2rem;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.home-hero-logo{
  height:100px; width:auto;
  display:block;
}

/* Hero tagline */
.hero-tagline{
  font-family:'Tajawal',sans-serif;
  font-size:2rem;
  color:var(--gold);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:2rem;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
/* Decorative gold line */
.hero-line{
  width:80px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:0 auto 1.5rem;
  box-shadow:0 0 12px rgba(196,151,59,.5);
}

.home-hero-content h1{
  font-family:'Tajawal',sans-serif;
  font-size:3.2rem; font-weight:700; color:var(--white);
  margin-bottom:4rem; line-height:1.45;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.home-hero-content .hero-sub{
  font-family:'Tajawal',sans-serif;
  font-size:1.7rem; color:rgba(255,255,255,.85);
  margin-bottom:2rem; line-height:1.8;
  letter-spacing:1px;
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.home-hero-content .hero-divider{
  width:60px; height:3px; background:var(--gold);
  margin:0 auto 1.5rem;
}
.home-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(26,26,46,.55) 0%, rgba(90,21,26,.7) 100%);
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-brand{
  font-family:'Tajawal',sans-serif;
  background:var(--brand); color:var(--white);
  border:none; padding:.75rem 2.2rem; border-radius:3px;
  font-weight:600; font-size:1.08rem;
  transition:background .2s, transform .15s;
  display:inline-block;
}
.btn-brand:hover{background:var(--brand-dark); color:var(--white); transform:translateY(-1px);}

.btn-outline-brand{
  font-family:'Tajawal',sans-serif;
  background:transparent; color:var(--white);
  border:1.5px solid rgba(255,255,255,.5); padding:.7rem 2rem;
  border-radius:3px; font-weight:500; font-size:1.05rem;
  transition:all .2s; display:inline-block;
}
.btn-outline-brand:hover{border-color:var(--gold); color:var(--gold);}

.btn-gold{
  font-family:'Tajawal',sans-serif;
  background:var(--gold); color:var(--white); border:none;
  padding:.75rem 2.2rem; border-radius:3px; font-weight:600; font-size:1.08rem;
  transition:background .2s; display:inline-block;
}
.btn-gold:hover{background:var(--gold-light); color:var(--ink);}

/* =============================================
   SECTIONS
   ============================================= */
.section{padding:4.5rem 0;}
.section-alt{background:var(--cream-dark);}
.section-dark{background:var(--ink); color:var(--white);}
.section-dark h2,.section-dark h3{color:var(--white);}

.section-header{text-align:center; margin-bottom:3rem;}
.section-header h2{
  font-family:'Amiri',serif;
  font-size:2.2rem; font-weight:700; margin-bottom:.5rem;
}
.section-header .accent-line{
  width:50px; height:3px; background:var(--gold);
  margin:.75rem auto 0;
}
.section-header p{
  font-family:'Tajawal',sans-serif;
  color:var(--text-muted); font-size:1.1rem; margin-top:1rem;
  max-width:600px; margin-left:auto; margin-right:auto;
}

/* =============================================
   SERVICE CARDS (Homepage)
   ============================================= */
.service-card{
  background:var(--white); border-radius:6px;
  border:1px solid rgba(122,31,37,.08);
  padding:2rem 1.5rem; text-align:center;
  transition:transform .25s, box-shadow .25s;
  height:100%;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(122,31,37,.1);
}
.service-card .icon{
  width:56px; height:56px; margin:0 auto 1.25rem;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:1.5rem;
}
.service-card h3{
  font-family:'Amiri',serif;
  font-size:1.2rem; font-weight:700; margin-bottom:.5rem;
}
.service-card p{
  font-family:'Tajawal',sans-serif;
  font-size:1rem; color:var(--text-muted); line-height:1.8;
}

/* =============================================
   PROJECT CARDS (Homepage)
   ============================================= */
.project-card{
  position:relative; overflow:hidden; border-radius:6px;
  height:280px; display:block;
}
.project-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.project-card:hover img{transform:scale(1.06);}
.project-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(26,26,46,.85) 0%, transparent 55%);
  display:flex; align-items:flex-end; padding:1.25rem;
}
.project-card .overlay h3{
  font-family:'Amiri',serif;
  color:var(--white); font-size:1.15rem; font-weight:700; margin:0;
}
.project-card .overlay .proj-num{
  font-family:'Playfair Display',serif;
  color:var(--gold); font-size:.95rem; font-weight:500;
  display:block; margin-bottom:.25rem;
}

/* =============================================
   STATS BAR
   ============================================= */
.stats-bar{
  display:flex; justify-content:center; gap:3rem; flex-wrap:wrap;
  padding:2rem 0;
}
.stat-item{text-align:center;}
.stat-item .num{
  font-family:'Playfair Display',serif;
  font-size:3rem; font-weight:700; color:var(--gold);
  line-height:1;
}
.stat-item .label{
  font-family:'Tajawal',sans-serif;
  font-size:1.05rem; color:rgba(255,255,255,.7); margin-top:.4rem;
}

/* =============================================
   CTA SECTION
   ============================================= */
.cta-section{
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:var(--white); text-align:center; padding:4rem 1.5rem;
}
.cta-section h2{
  font-family:'Amiri',serif;
  color:var(--white); font-size:1.9rem; font-weight:700; margin-bottom:.75rem;
}
.cta-section p{
  font-family:'Tajawal',sans-serif;
  color:rgba(255,255,255,.85); margin-bottom:1.5rem; font-size:1.15rem;
}

/* =============================================
   FOOTER
   ============================================= */
.footer{
  background:var(--ink); color:rgba(255,255,255,.7);
  padding:3rem 0 1.5rem;
  border-top:3px solid var(--brand);
}
.footer h5{
  font-family:'Amiri',serif;
  color:var(--white); font-size:1.15rem; font-weight:700; margin-bottom:1rem;
}
.footer a{
  font-family:'Tajawal',sans-serif;
  color:rgba(255,255,255,.6); transition:color .2s; font-size:1rem;
}
.footer a:hover{color:var(--gold);}
.footer p{font-family:'Tajawal',sans-serif;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.25rem; margin-top:2rem;
  text-align:center; font-size:.95rem; color:rgba(255,255,255,.45);
}
.footer .brand-logo-footer{
  height:75px; width:auto;
  opacity:1;
  filter:brightness(1);
}

/* =============================================
   INNER PAGE HERO
   ============================================= */
.hero{
  position:relative; min-height:46vh;
  display:flex; align-items:center; color:white; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:var(--hero-bg); background-size:cover; background-position:center;
  filter:brightness(.45) saturate(1.1); z-index:-2;
}
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,26,46,.85), rgba(26,26,46,.3)); z-index:-1;
}
.hero.hero-compact{min-height:36vh;}
.hero h1,.hero .display-6{
  font-family:'Amiri',serif;
  color:var(--white);
}
.hero p,.hero .lead{
  color:rgba(255,255,255,.85);
}

/* =============================================
   GENERIC COMPONENTS
   ============================================= */
.section-title{display:flex; gap:.75rem; align-items:center; margin-bottom:1.25rem;}
.section-title .dot{width:.75rem; height:.75rem; border-radius:999px; background:var(--brand);}

.card{border:1px solid rgba(0,0,0,.06); border-radius:6px;}
.card-hover{transition:transform .25s, box-shadow .25s;}
.card-hover:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.1);}

.card h3,.card h5,.card-body h3,.card-body h5{font-family:'Amiri',serif;}
.card p,.card-body p{font-family:'Tajawal',sans-serif;}

/* Old button compat */
.btn-warning{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-dark); --bs-btn-hover-border-color:var(--brand-dark);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
}
.btn-outline-dark,.btn-dark{
  --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand);
  --bs-btn-hover-color:#fff;
  font-family:'Tajawal',sans-serif;
}

.lead{line-height:1.9; font-family:'Tajawal',sans-serif;}

/* =============================================
   ADMIN
   ============================================= */
/* --- Admin Layout --- */
.admin-wrap{max-width:1200px; margin:0 auto; padding:2.5rem 2rem 4rem;}
.admin-topbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:2px solid rgba(122,31,37,.15);}
.admin-page-title{font-family:'Tajawal',sans-serif; font-size:1.8rem; font-weight:700; color:var(--ink); margin:0;}
.admin-back-link{color:var(--brand); text-decoration:none; font-weight:600; font-size:1.05rem; white-space:nowrap;}
.admin-back-link:hover{text-decoration:underline;}
.admin-meta{color:var(--text-muted); font-size:.95rem;}
.admin-user-badge{background:var(--cream-dark); padding:.4rem 1rem; border-radius:20px; font-size:1rem; font-weight:500;}

/* --- Admin Buttons --- */
.btn-admin-primary{display:inline-flex; align-items:center; gap:.6rem; background:var(--brand); color:#fff; border:none; padding:.75rem 1.8rem; border-radius:12px; font-family:'Tajawal',sans-serif; font-weight:600; font-size:1.05rem; cursor:pointer; text-decoration:none; transition:all .2s;}
.btn-admin-primary:hover{background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(122,31,37,.3);}
.btn-admin-outline{display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--ink); border:1.5px solid rgba(0,0,0,.15); padding:.65rem 1.5rem; border-radius:12px; font-family:'Tajawal',sans-serif; font-weight:500; font-size:1rem; cursor:pointer; text-decoration:none; transition:all .2s;}
.btn-admin-outline:hover{border-color:var(--brand); color:var(--brand);}
.btn-block{width:100%; text-align:center; justify-content:center;}
.btn-admin-sm{display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:8px; font-size:.95rem; font-weight:500; cursor:pointer; text-decoration:none; background:var(--cream-dark); color:var(--ink); border:1px solid rgba(0,0,0,.08); transition:all .2s;}
.btn-admin-sm:hover{background:var(--cream); border-color:var(--brand);}
.btn-admin-sm-outline{background:transparent;}
.btn-admin-sm-danger{color:#c62828; border-color:rgba(198,40,40,.2);}
.btn-admin-sm-danger:hover{background:#fbe9e7; border-color:#c62828;}

/* --- Admin Stats --- */
.admin-stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:2.5rem;}
.admin-stat-card{background:#fff; border-radius:16px; padding:2rem; border:1px solid rgba(0,0,0,.06); text-align:center; transition:transform .2s, box-shadow .2s;}
.admin-stat-card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08);}
.admin-stat-icon{font-size:2.5rem; margin-bottom:.6rem;}
.admin-stat-value{font-size:2.8rem; font-weight:800; color:var(--ink); line-height:1.2;}
.admin-stat-label{color:var(--text-muted); font-size:1.05rem; margin-top:.4rem;}
.admin-stat-sub{color:var(--text-muted); font-size:.9rem; margin-top:.3rem;}
.admin-stat-maroon .admin-stat-value{color:var(--brand);}
.admin-stat-gold .admin-stat-value{color:var(--gold);}
.admin-stat-navy .admin-stat-value{color:var(--ink);}

/* --- Admin Quick Actions --- */
.admin-quick-actions{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:2.5rem;}
.admin-action-card{display:flex; align-items:center; gap:1.2rem; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.5rem 1.8rem; text-decoration:none; color:var(--ink); transition:all .2s;}
.admin-action-card:hover{border-color:var(--brand); box-shadow:0 4px 16px rgba(122,31,37,.1); transform:translateY(-1px);}
.admin-action-icon{font-size:2.2rem;}
.admin-action-card strong{display:block; font-size:1.1rem;}
.admin-action-card p{margin:0; font-size:.95rem; color:var(--text-muted);}
.admin-action-arrow{margin-right:auto; margin-left:0; color:var(--brand); font-size:1.4rem; opacity:.5; transition:opacity .2s;}
.admin-action-card:hover .admin-action-arrow{opacity:1;}

/* --- Admin Cards --- */
.admin-card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:2rem; margin-bottom:1.5rem;}
.admin-card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem;}
.admin-card-title{font-family:'Tajawal',sans-serif; font-size:1.3rem; font-weight:700; color:var(--ink); margin:0 0 1.2rem;}
.admin-card-header .admin-card-title{margin:0;}
.admin-link{color:var(--brand); font-size:1rem; text-decoration:none; font-weight:500;}
.admin-link:hover{text-decoration:underline;}

/* --- Admin Grid Layouts --- */
.admin-grid-2col{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;}
.admin-form-grid{display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start;}

/* --- Admin List --- */
.admin-list{display:flex; flex-direction:column; gap:.6rem;}
.admin-list-item{display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:12px; text-decoration:none; color:var(--ink); transition:background .2s;}
.admin-list-item:hover{background:var(--cream);}
.admin-list-thumb{width:56px; height:56px; border-radius:10px; object-fit:cover;}
.admin-list-thumb-empty{width:56px; height:56px; border-radius:10px; background:var(--cream-dark); display:flex; align-items:center; justify-content:center; font-size:1.4rem;}
.admin-list-avatar{width:48px; height:48px; border-radius:50%; background:var(--cream-dark); display:flex; align-items:center; justify-content:center; font-size:1.3rem;}
.admin-list-info{flex:1; min-width:0;}
.admin-list-info strong{display:block; font-size:1.05rem;}
.admin-list-info .admin-meta{display:block;}
.admin-empty-text{color:var(--text-muted); text-align:center; padding:2.5rem 0; font-size:1.05rem;}

/* --- Admin Alerts --- */
.admin-alert{padding:1.2rem 1.8rem; border-radius:12px; margin-bottom:1.5rem; font-size:1.05rem; font-weight:500;}
.admin-alert-success{background:#e8f5e9; color:#2e7d32; border:1px solid rgba(46,125,50,.2);}
.admin-alert-error{background:#fbe9e7; color:#c62828; border:1px solid rgba(198,40,40,.2);}

/* --- Admin Search --- */
.admin-search-bar{display:flex; gap:1rem; margin-bottom:1.5rem; align-items:center;}
.admin-search-bar .admin-input{flex:1; max-width:450px;}

/* --- Admin Table --- */
.admin-table-wrap{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden; margin-bottom:1.2rem;}
.admin-table{width:100%; border-collapse:collapse;}
.admin-table th{background:var(--cream); padding:1rem 1.2rem; font-size:1rem; font-weight:600; color:var(--ink); text-align:right; border-bottom:2px solid rgba(0,0,0,.06);}
.admin-table td{padding:1rem 1.2rem; border-bottom:1px solid rgba(0,0,0,.04); vertical-align:middle; font-size:1rem;}
.admin-table tbody tr:hover{background:rgba(122,31,37,.02);}
.admin-table .text-center{text-align:center;}
.admin-thumb{width:72px; height:54px; object-fit:cover; border-radius:8px;}
.admin-thumb-empty{width:72px; height:54px; background:var(--cream-dark); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-muted);}
.admin-actions{display:flex; gap:.5rem; flex-wrap:wrap;}
.admin-footer-info{text-align:center; color:var(--text-muted); font-size:1rem; padding:1.2rem 0;}
.admin-empty{text-align:center; color:var(--text-muted); padding:3rem 0; font-size:1.05rem;}

/* --- Admin Badges --- */
.admin-badge{display:inline-block; padding:.3rem .9rem; border-radius:20px; font-size:.9rem; font-weight:600; border:none; cursor:pointer; transition:all .2s;}
.admin-badge-success{background:#e8f5e9; color:#2e7d32;}
.admin-badge-success:hover{background:#c8e6c9;}
.admin-badge-muted{background:#f5f5f5; color:#9e9e9e;}
.admin-badge-muted:hover{background:#eeeeee;}

/* --- Admin Tabs --- */
.admin-tabs{display:flex; gap:.6rem; margin-bottom:1.5rem; border-bottom:2px solid rgba(0,0,0,.06); padding-bottom:0;}
.admin-tab{padding:1rem 1.8rem; text-decoration:none; color:var(--text-muted); font-weight:600; font-size:1.05rem; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .2s;}
.admin-tab:hover{color:var(--ink);}
.admin-tab.active{color:var(--brand); border-bottom-color:var(--brand);}
.admin-tab-count{font-size:.85rem;}

/* --- Admin Messages --- */
.admin-messages-list{display:flex; flex-direction:column; gap:1.2rem;}
.admin-message-card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.5rem 2rem;}
.admin-message-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem;}
.admin-message-header strong{display:block; font-size:1.1rem;}
.admin-message-body{color:var(--text); font-size:1.05rem; line-height:1.9; background:var(--cream); padding:1.2rem 1.5rem; border-radius:12px;}
.admin-empty-state{text-align:center; padding:4rem 0; color:var(--text-muted);}
.admin-empty-icon{font-size:3.5rem; margin-bottom:1rem;}

/* --- Admin Form --- */
.admin-form{margin-top:0;}
.admin-field{margin-bottom:1.5rem;}
.admin-label{display:block; font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:.5rem;}
.admin-label .required{color:var(--brand);}
.admin-input{width:100%; padding:.85rem 1.2rem; border:1.5px solid rgba(0,0,0,.12); border-radius:12px; font-family:'Tajawal',sans-serif; font-size:1.05rem; color:var(--ink); background:#fff; transition:border-color .2s;}
.admin-input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(122,31,37,.08);}
.admin-input-ltr{direction:ltr; text-align:left;}
.admin-textarea{width:100%; padding:.85rem 1.2rem; border:1.5px solid rgba(0,0,0,.12); border-radius:12px; font-family:'Tajawal',sans-serif; font-size:1.05rem; color:var(--ink); background:#fff; resize:vertical; transition:border-color .2s; line-height:1.9;}
.admin-textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(122,31,37,.08);}
.admin-hint{display:block; color:var(--text-muted); font-size:.9rem; margin-top:.4rem;}
.admin-form-actions{display:flex; flex-direction:column; gap:.8rem; margin-top:1.8rem;}

/* --- Admin Toggle --- */
.admin-toggle-label{display:flex; align-items:center; gap:1rem; cursor:pointer; font-weight:500; font-size:1.05rem;}
.admin-toggle-label input{display:none;}
.admin-toggle-switch{width:50px; height:28px; background:#ccc; border-radius:14px; position:relative; transition:background .2s;}
.admin-toggle-switch::after{content:''; position:absolute; top:3px; right:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.admin-toggle-label input:checked + .admin-toggle-switch{background:var(--brand);}
.admin-toggle-label input:checked + .admin-toggle-switch::after{transform:translateX(-22px);}

/* --- Admin Upload Zones --- */
.admin-upload-zone{position:relative; border:2px dashed rgba(0,0,0,.15); border-radius:16px; cursor:pointer; overflow:hidden; transition:all .2s;}
.admin-upload-zone:hover,.admin-upload-zone.dragover{border-color:var(--brand); background:rgba(122,31,37,.03);}
.admin-upload-zone-sm{padding:2rem; text-align:center;}
.admin-upload-placeholder{text-align:center; padding:3rem 1.5rem; color:var(--text-muted);}
.admin-upload-placeholder svg{opacity:.4; margin-bottom:.8rem;}
.admin-upload-placeholder p{margin:.5rem 0 0; font-weight:500; font-size:1.05rem;}
.admin-upload-hint{font-size:.9rem; color:var(--text-muted);}
.admin-file-input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.admin-upload-zone-sm .admin-file-input{position:absolute;}

/* --- Admin Cover Preview --- */
.admin-cover-preview{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:14px;}
.admin-cover-preview img{width:100%; height:100%; object-fit:cover;}
.admin-cover-overlay{position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s;}
.admin-cover-preview:hover .admin-cover-overlay{opacity:1;}
.admin-cover-overlay span{color:#fff; font-weight:600; font-size:1.05rem;}

/* --- Admin Gallery Grid --- */
.admin-gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem;}
.admin-gallery-item{position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:2px solid rgba(0,0,0,.06); cursor:grab; transition:all .2s;}
.admin-gallery-item:hover{border-color:var(--brand); box-shadow:0 4px 12px rgba(0,0,0,.1);}
.admin-gallery-item.dragging{opacity:.4;}
.admin-gallery-item img{width:100%; height:100%; object-fit:cover;}
.admin-gallery-remove{position:absolute; top:6px; left:6px; width:30px; height:30px; border-radius:50%; background:rgba(198,40,40,.9); color:#fff; border:none; cursor:pointer; font-size:.95rem; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s;}
.admin-gallery-item:hover .admin-gallery-remove{opacity:1;}
.admin-gallery-drag-handle{position:absolute; bottom:6px; right:6px; color:rgba(255,255,255,.8); font-size:1rem; text-shadow:0 1px 3px rgba(0,0,0,.5); opacity:0; transition:opacity .2s;}
.admin-gallery-item:hover .admin-gallery-drag-handle{opacity:1;}
.admin-gallery-item-new{border-color:var(--gold); border-style:dashed;}
.admin-gallery-new-badge{position:absolute; bottom:6px; right:6px; background:var(--gold); color:#fff; font-size:.8rem; padding:.2rem .6rem; border-radius:8px; font-weight:600;}

/* --- Admin Login Page --- */
.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e 0%,#2d2d44 50%,#1a1a2e 100%);padding:2rem;}
.admin-login-card{background:#fff;border-radius:20px;overflow:hidden;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.admin-login-header{background:#fff;padding:40px 45px 25px;text-align:center;}
.admin-login-logo{max-width:260px;height:auto;}
.admin-login-gold-line{height:4px;background:linear-gradient(90deg,#c4973b,#d4ad5a,#c4973b);}
.admin-login-body{padding:35px 40px 25px;}
.admin-login-title{font-family:'Tajawal',sans-serif;font-size:1.6rem;font-weight:700;color:var(--ink);margin:0 0 .4rem;text-align:center;}
.admin-login-subtitle{color:var(--text-muted);font-size:1rem;text-align:center;margin:0 0 2rem;}
.admin-login-footer{text-align:center;padding:18px;font-size:.9rem;color:var(--text-muted);border-top:1px solid rgba(0,0,0,.06);}

/* --- Admin Modal --- */
.admin-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;}
.admin-modal-content{background:#fff;border-radius:18px;padding:2.5rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.admin-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.8rem;}
.admin-modal-header h2{font-family:'Tajawal',sans-serif;font-size:1.4rem;font-weight:700;margin:0;}
.admin-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);padding:.3rem;}
.admin-modal-close:hover{color:var(--brand);}

/* --- Admin Select --- */
.admin-select-sm{padding:.4rem .8rem;border:1.5px solid rgba(0,0,0,.12);border-radius:10px;font-family:'Tajawal',sans-serif;font-size:.95rem;font-weight:600;background:#fff;cursor:pointer;direction:rtl;}
.admin-select-sm:focus{outline:none;border-color:var(--brand);}

/* --- Admin Roles Legend --- */
.admin-roles-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.8rem;}
.admin-role-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;border-radius:20px;font-size:.95rem;font-weight:500;background:rgba(0,0,0,.04);color:var(--chip-color,#666);border:1px solid rgba(0,0,0,.06);}

/* --- Admin Info Rows --- */
.admin-info-row{display:flex;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid rgba(0,0,0,.04);font-size:1.05rem;}
.admin-info-row:last-child{border-bottom:none;}
.admin-info-row span{color:var(--text-muted);}

/* --- Admin Responsive --- */
@media(max-width:768px){
  .admin-wrap{padding:1.2rem 1.2rem 3rem;}
  .admin-page-title{font-size:1.5rem;}
  .admin-back-link{font-size:1rem;}
  .admin-stats-grid{grid-template-columns:1fr;}
  .admin-stat-card{padding:1.5rem;}
  .admin-stat-value{font-size:2.2rem;}
  .admin-stat-label{font-size:1rem;}
  .admin-quick-actions{grid-template-columns:1fr;}
  .admin-action-card{padding:1.2rem 1.5rem;}
  .admin-action-card strong{font-size:1.05rem;}
  .admin-action-card p{font-size:.9rem;}
  .admin-grid-2col{grid-template-columns:1fr;}
  .admin-form-grid{grid-template-columns:1fr;}
  .admin-form-sidebar{order:-1;}
  .admin-card{padding:1.5rem;}
  .admin-card-title{font-size:1.2rem;}
  .admin-table-wrap{overflow-x:auto;}
  .admin-table{min-width:600px;}
  .admin-table th,.admin-table td{font-size:.95rem; padding:.8rem;}
  .admin-topbar{flex-direction:column; align-items:stretch;}
  .admin-search-bar{flex-direction:column;}
  .admin-search-bar .admin-input{max-width:100%;}
  .admin-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
  .btn-admin-primary{font-size:1rem; padding:.7rem 1.5rem;}
  .btn-admin-outline{font-size:.95rem;}
  .btn-admin-sm{font-size:.9rem;}
  .admin-input,.admin-textarea{font-size:1rem; padding:.8rem 1rem;}
  .admin-label{font-size:1rem;}
  .admin-alert{font-size:1rem;}
  .admin-badge{font-size:.85rem;}
  .admin-tab{font-size:1rem; padding:.8rem 1.2rem;}
  .admin-message-header strong{font-size:1.05rem;}
  .admin-message-body{font-size:1rem;}
  .admin-login-card{max-width:100%;}
  .admin-login-body{padding:25px 25px 20px;}
  .admin-login-title{font-size:1.4rem;}
  .admin-modal-content{padding:1.8rem; max-width:95%;}
  .admin-roles-legend{gap:.6rem;}
  .admin-role-chip{font-size:.9rem; padding:.4rem 1rem;}
  .admin-info-row{font-size:1rem;}
  .admin-toggle-label{font-size:1rem;}
}

/* =============================================
   MOBILE RESPONSIVE  (≤ 768px)
   ============================================= */
@media (max-width:768px){

  /* Navbar */
  .navbar{padding:.4rem 0;}
  .brand-logo{height:42px;}
  .brand-name{display:none;}
  .navbar-brand{gap:.5rem !important;}
  .brand-text{padding-right:.6rem; border-right-width:1px;}
  .brand-text-ar{font-size:.7rem; line-height:1.4;}
  .brand-text-en{font-size:.48rem; letter-spacing:0.5px;}

  /* Container */
  .container{padding-right:1.25rem !important; padding-left:1.25rem !important;}

  /* Base font */
  body{font-size:1rem;}

  /* Hero */
  .home-hero{min-height:75vh;}
  .hero-tagline{font-size:1.1rem; letter-spacing:1px;}
  .home-hero-content h1{font-size:1.8rem;}
  .home-hero-content .hero-sub{font-size:1.1rem;}
  .home-hero-logo{height:65px;}
  .home-hero-logo-wrap{padding:1rem 1.5rem; margin-bottom:1.25rem;}

  /* Inner hero */
  .hero{min-height:auto !important;}
  .hero .display-6{font-size:1.6rem;}
  .hero-sub-inner{font-size:1.05rem;}

  /* Sections */
  .section{padding:3rem 0;}
  .section-header h2{font-size:1.7rem;}
  .section-header p{font-size:1.05rem;}

  /* Navbar */
  .navbar .nav-link{font-size:1.05rem;}

  /* Service cards */
  .service-card h3{font-size:1.1rem;}
  .service-card p{font-size:.95rem;}

  /* Project cards */
  .project-card{height:200px;}
  .project-card .overlay h3{font-size:1.05rem;}

  /* Stats */
  .stats-bar{gap:1.5rem;}
  .stat-item .num{font-size:2.2rem;}
  .stat-item .label{font-size:1rem;}

  /* CTA */
  .cta-section{padding:3rem 1rem;}
  .cta-section h2{font-size:1.5rem;}
  .cta-section p{font-size:1.05rem;}

  /* Buttons */
  .btn-brand,.btn-gold{font-size:1rem; padding:.7rem 1.8rem;}
  .btn-outline-brand{font-size:1rem;}

  /* Footer */
  .footer h5{font-size:1.1rem;}
  .footer a{font-size:.95rem;}
  .footer-bottom{font-size:.9rem;}

  /* Footer */
  .footer{text-align:center;}

  /* Text safety */
  h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word; word-wrap:break-word;}
}

/* =============================================
   ABOUT PAGE
   ============================================= */

/* Section eyebrow label */
.section-eyebrow{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:1rem;
  font-family:'Tajawal',sans-serif;
  font-size:1rem; font-weight:600;
  color:var(--brand); text-transform:uppercase;
  letter-spacing:.5px;
}
.eyebrow-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--gold); flex-shrink:0;
}

/* Inner page hero subtitle */
.hero-sub-inner{
  font-family:'Tajawal',sans-serif;
  font-size:1.2rem; color:rgba(255,255,255,.75);
  margin-top:.5rem;
}

/* About headings */
.about-heading{
  font-family:'Amiri',serif;
  font-size:2rem; font-weight:700;
  color:var(--ink); margin-bottom:1.25rem; line-height:1.5;
}

/* About text blocks */
.about-text-block p{
  font-family:'Tajawal',sans-serif;
  font-size:.95rem; line-height:1.9;
  color:var(--text); margin-bottom:1rem;
}

/* Image frame with accent border */
.about-image-frame{
  position:relative;
}
.about-image-frame img{
  width:100%; border-radius:8px;
  max-height:480px; object-fit:cover;
  box-shadow:0 12px 40px rgba(0,0,0,.1);
}
.image-frame-accent{
  position:absolute; top:-12px; right:-12px;
  width:100%; height:100%;
  border:2px solid var(--gold);
  border-radius:8px; z-index:-1;
  opacity:.4;
}
.about-image-frame-alt .image-frame-accent{
  right:auto; left:-12px;
  top:12px;
}

/* About services grid */
.about-services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
  margin-bottom:2.5rem;
}
.about-service-item{
  display:flex; align-items:flex-start; gap:1rem;
  background:var(--white);
  padding:1.5rem; border-radius:6px;
  border:1px solid rgba(122,31,37,.08);
  transition:transform .2s, box-shadow .2s;
}
.about-service-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(122,31,37,.08);
}
.about-service-icon{
  width:44px; height:44px; flex-shrink:0;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--white);
}
.about-service-item h4{
  font-family:'Amiri',serif;
  font-size:1rem; font-weight:700;
  margin:0 0 .35rem; color:var(--ink);
}
.about-service-item p{
  font-family:'Tajawal',sans-serif;
  font-size:.85rem; color:var(--text-muted);
  line-height:1.7; margin:0;
}

/* Achievement note */
.about-achievement-note{
  background:var(--white);
  border-right:4px solid var(--gold);
  padding:1.5rem 2rem;
  border-radius:0 6px 6px 0;
}
.about-achievement-note p{
  font-family:'Tajawal',sans-serif;
  font-size:.92rem; line-height:1.9;
  color:var(--text); margin-bottom:.75rem;
}
.about-achievement-note p:last-child{margin-bottom:0;}

/* Vision / Mission / Values grid */
.vmv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
}
.vmv-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:2rem 1.5rem;
  text-align:center;
  transition:transform .2s, background .2s;
}
.vmv-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.1);
}
.vmv-icon{
  font-size:2rem; margin-bottom:1rem;
}
.vmv-card h3{
  font-family:'Amiri',serif;
  color:var(--gold); font-size:1.15rem;
  font-weight:700; margin-bottom:.75rem;
}
.vmv-card p{
  font-family:'Tajawal',sans-serif;
  color:rgba(255,255,255,.75);
  font-size:.9rem; line-height:1.8;
  margin:0;
}
.vmv-card ul{
  list-style:none; padding:0; margin:0;
  font-family:'Tajawal',sans-serif;
  color:rgba(255,255,255,.75);
  font-size:.9rem; line-height:2.2;
}

/* Ethics list */
.ethics-list{
  display:flex; flex-direction:column;
  gap:.75rem; margin-top:1.5rem;
}
.ethics-item{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem 1.25rem;
  background:var(--cream);
  border-radius:6px;
  border:1px solid rgba(122,31,37,.06);
}
.ethics-bullet{
  width:10px; height:10px; flex-shrink:0;
  background:var(--brand); border-radius:2px;
  margin-top:.45rem;
  transform:rotate(45deg);
}
.ethics-item strong{
  font-family:'Amiri',serif;
  font-size:.95rem; color:var(--ink);
  display:block; margin-bottom:.2rem;
}
.ethics-item p{
  font-family:'Tajawal',sans-serif;
  font-size:.85rem; color:var(--text-muted);
  line-height:1.7; margin:0;
}

/* =============================================
   CLIENTS LOGOS GRID
   ============================================= */
.clients-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1.5rem;
  align-items:center;
  justify-items:center;
  padding:2rem 0;
}
.client-logo-item{
  background:#fff;
  border-radius:12px;
  padding:1.2rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;
  width:100%;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.04);
  transition:all .3s ease;
}
.client-logo-item:hover{
  box-shadow:0 6px 24px rgba(0,0,0,.1);
  transform:translateY(-3px);
  border-color:var(--gold);
}
.client-logo-item img{
  max-height:80px;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(40%);
  opacity:.8;
  transition:all .3s ease;
}
.client-logo-item:hover img{
  filter:grayscale(0%);
  opacity:1;
}

/* =============================================
   ORG CHART — Full HTML/CSS
   ============================================= */
/* Mobile image (hidden on desktop) */
/* Image fullscreen overlay */
.img-overlay{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:1rem;cursor:zoom-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.img-overlay img{max-width:95vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.4);touch-action:pinch-zoom;}
.img-overlay-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:2rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100000;transition:background .2s;}
.img-overlay-close:hover{background:rgba(255,255,255,.3);}

.org-chart-img-mobile{display:none;}
.org-chart-mobile-wrap::after{display:none;}
.org-chart{
  background:var(--white);
  border-radius:12px;
  padding:3rem 2rem;
  box-shadow:0 6px 30px rgba(0,0,0,.08);
  direction:rtl;
  overflow-x:auto;
  min-width:1100px;
}

/* Box base styles */
.oc-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Tajawal',sans-serif;
  font-weight:700;
  line-height:1.6;
  border-radius:8px;
  padding:.8rem 1.4rem;
}

/* GM box — maroon bg, prominent */
.oc-box-gm{
  background:var(--brand);
  color:#fff;
  font-size:1.6rem;
  padding:1rem 3.5rem;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(122,31,37,.35);
  letter-spacing:.02em;
}

/* Department boxes — navy-black bg */
.oc-box-dept{
  background:var(--ink);
  color:#fff;
  font-size:1.1rem;
  padding:.8rem 1.4rem;
  white-space:normal;
  min-width:150px;
  border-radius:8px;
}

/* Sub-division boxes — dark charcoal */
.oc-box-sub{
  background:#3a3a3a;
  color:#fff;
  font-size:.95rem;
  padding:.55rem 1rem;
  white-space:normal;
  width:100%;
  border-radius:6px;
}

/* Assistant boxes — gold border, maroon bg */
.oc-box-asst{
  background:var(--brand);
  color:#fff;
  font-size:1.05rem;
  padding:.7rem 1.4rem;
  border:2px solid var(--gold);
  white-space:normal;
  border-radius:8px;
}

/* === TOP ROW: GM + assistants === */
.oc-top-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  margin-bottom:0;
}
.oc-gm-col{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.oc-asst{
  display:flex;
  align-items:center;
}
/* Horizontal connector lines from assistants to GM */
.oc-asst-right::after,
.oc-asst-left::before{
  content:'';
  display:block;
  width:3rem;
  height:3px;
  background:var(--gold);
}

/* === VERTICAL LINES === */
.oc-vline-gm{
  height:2.5rem;
  width:3px;
  background:var(--gold);
  margin:0 auto;
}

/* === HORIZONTAL LINE connecting departments === */
.oc-hline-depts{
  height:3px;
  background:var(--gold);
  margin:0 auto;
  width:94%;
}

/* === DEPARTMENTS ROW === */
.oc-depts-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:1rem;
  margin-top:0;
}

.oc-dept-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  min-width:150px;
  max-width:220px;
}

/* Vertical line up from dept box to horizontal line */
.oc-vline-up{
  width:3px;
  height:2rem;
  background:var(--gold);
}
/* Vertical line down from dept box to subs */
.oc-vline-down{
  width:3px;
  height:1.5rem;
  background:var(--gold);
}

/* === SUB-DIVISIONS === */
.oc-subs{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  width:100%;
}

/* Branch column special */
.oc-dept-branch{
  max-width:140px;
  flex:0 0 auto;
}

/* =============================================
   SERVICES PAGE
   ============================================= */

/* Services grid (main page) */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.services-grid > :nth-child(4),
.services-grid > :nth-child(5){
  grid-column:span 1;
}

.service-card-lg{
  display:block;
  background:var(--white);
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(122,31,37,.06);
  transition:transform .3s, box-shadow .3s;
  text-decoration:none;
  color:var(--text);
}
.service-card-lg:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(122,31,37,.12);
  color:var(--text);
}

.service-card-lg-img{
  position:relative;
  height:220px; overflow:hidden;
}
.service-card-lg-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s;
}
.service-card-lg:hover .service-card-lg-img img{
  transform:scale(1.06);
}
.service-card-lg-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(26,26,46,.4) 100%);
}

.service-card-lg-body{
  padding:1.5rem;
}
.service-card-lg-icon{
  width:44px; height:44px;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--white);
  margin-bottom:1rem;
  margin-top:-2.5rem;
  position:relative; z-index:2;
  box-shadow:0 4px 12px rgba(122,31,37,.2);
}
.service-card-lg-body h3{
  font-family:'Amiri',serif;
  font-size:1.15rem; font-weight:700;
  color:var(--ink); margin-bottom:.5rem;
}
.service-card-lg-body p{
  font-family:'Tajawal',sans-serif;
  font-size:.88rem; color:var(--text-muted);
  line-height:1.7; margin-bottom:.75rem;
}
.service-card-lg-link{
  font-family:'Tajawal',sans-serif;
  font-size:.85rem; font-weight:600;
  color:var(--brand);
  transition:color .2s;
}
.service-card-lg:hover .service-card-lg-link{
  color:var(--gold);
}

/* Service detail page */
.service-detail-content{
  max-width:850px; margin:0 auto;
}
.service-detail-content > p{
  font-family:'Tajawal',sans-serif;
  font-size:1rem; line-height:2;
  color:var(--text); margin-bottom:1.25rem;
}

/* Feature blocks in service detail */
.service-detail-features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.25rem;
  margin:2rem 0;
}
.service-detail-feature{
  background:var(--cream);
  border-radius:6px;
  padding:1.5rem;
  border-right:3px solid var(--brand);
}
.service-detail-feature h3{
  font-family:'Amiri',serif;
  font-size:1.05rem; font-weight:700;
  color:var(--ink); margin-bottom:.5rem;
}
.service-detail-feature p{
  font-family:'Tajawal',sans-serif;
  font-size:.9rem; color:var(--text-muted);
  line-height:1.8; margin:0;
}

/* Expertise box */
.service-expertise-box{
  background:var(--ink);
  border-radius:8px;
  padding:2rem;
  margin:2rem 0;
}
.service-expertise-box h3{
  font-family:'Amiri',serif;
  color:var(--gold); font-size:1.15rem;
  font-weight:700; margin-bottom:1.25rem;
}
.expertise-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.75rem;
}
.expertise-item{
  font-family:'Tajawal',sans-serif;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  padding:.75rem 1rem;
  font-size:.88rem;
  color:rgba(255,255,255,.8);
  transition:background .2s;
}
.expertise-item:hover{
  background:rgba(255,255,255,.1);
}

/* Back button (dark outline) */
.btn-outline-brand-dark{
  font-family:'Tajawal',sans-serif;
  background:transparent;
  color:var(--brand);
  border:1.5px solid var(--brand);
  padding:.6rem 1.8rem;
  border-radius:3px;
  font-weight:600; font-size:.88rem;
  transition:all .2s;
  display:inline-block;
}
.btn-outline-brand-dark:hover{
  background:var(--brand);
  color:var(--white);
}

/* Case study label */
.service-case-study{
  margin-bottom:1.5rem;
}

/* =============================================
   PROJECTS PAGE
   ============================================= */

/* Projects grid (listing page) */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}

.project-card-full{
  position:relative; display:block;
  border-radius:8px; overflow:hidden;
  height:320px;
  text-decoration:none;
}
.project-card-full img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.project-card-full:hover img{
  transform:scale(1.08);
}
.project-card-full-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(26,26,46,.9) 0%, rgba(26,26,46,.15) 50%, transparent 100%);
  display:flex; align-items:flex-end;
  padding:1.5rem;
  transition:background .3s;
}
.project-card-full:hover .project-card-full-overlay{
  background:linear-gradient(0deg, rgba(122,31,37,.9) 0%, rgba(122,31,37,.2) 50%, transparent 100%);
}
.project-card-full-content{
  width:100%;
}
.project-card-full-num{
  font-family:'Playfair Display',serif;
  font-size:.8rem; font-weight:600;
  color:var(--gold);
  display:block; margin-bottom:.3rem;
}
.project-card-full h3{
  font-family:'Amiri',serif;
  color:var(--white);
  font-size:1.1rem; font-weight:700;
  margin:0 0 .25rem;
  line-height:1.5;
}
.project-card-full-count{
  font-family:'Tajawal',sans-serif;
  font-size:.78rem;
  color:rgba(255,255,255,.5);
}

/* Project detail page */
.project-detail-cover{
  border-radius:8px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.project-detail-cover img{
  width:100%;
  max-height:500px;
  object-fit:cover;
  display:block;
}

/* =============================================
   PROFESSIONAL GALLERY
   ============================================= */

/* Cover image zoom hint */
.project-detail-cover{position:relative; overflow:hidden; border-radius:12px;}
.cover-zoom-hint{
  position:absolute; bottom:1rem; left:1rem;
  background:rgba(0,0,0,.5); color:#fff;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.project-detail-cover:hover .cover-zoom-hint{opacity:1;}

/* Gallery grid — masonry-like */
.gallery-pro{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:1rem;
}
.gallery-pro-item{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  height:260px;
  background:#f0ece6;
}
.gallery-pro-wide{
  grid-column:span 2;
  height:320px;
}
.gallery-pro-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94), filter .4s;
}
.gallery-pro-item:hover img{
  transform:scale(1.08);
  filter:brightness(.85);
}
.gallery-pro-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(122,31,37,.7) 0%, rgba(122,31,37,.1) 40%, transparent 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:1.2rem;
  opacity:0; transition:opacity .35s;
}
.gallery-pro-item:hover .gallery-pro-overlay{opacity:1;}
.gallery-pro-icon{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:transform .35s, background .3s;
}
.gallery-pro-item:hover .gallery-pro-icon{transform:translate(-50%,-50%) scale(1);}
.gallery-pro-label{
  color:rgba(255,255,255,.85);
  font-size:.82rem;
  font-family:'Tajawal',sans-serif;
}

/* =============================================
   LIGHTBOX
   ============================================= */
.lightbox{
  position:fixed; inset:0; z-index:100000;
  display:flex; flex-direction:column;
  visibility:hidden; opacity:0;
  transition:visibility 0s .35s, opacity .35s;
}
.lightbox.open{
  visibility:visible; opacity:1;
  transition:visibility 0s, opacity .35s;
}
.lightbox-backdrop{
  position:absolute; inset:0;
  background:rgba(10,10,20,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* Top bar */
.lightbox-topbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.2rem;
  color:#fff;
}
.lightbox-counter{
  font-family:'Tajawal',sans-serif;
  font-size:.95rem;
  opacity:.7;
  letter-spacing:.05em;
}
.lightbox-actions{display:flex; gap:.5rem;}
.lightbox-btn{
  background:rgba(255,255,255,.1);
  border:none; color:#fff;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.lightbox-btn:hover{background:rgba(255,255,255,.2); transform:scale(1.1);}
.lightbox-close:hover{background:rgba(200,50,50,.4);}

/* Navigation arrows */
.lightbox-nav{
  position:absolute; top:50%; z-index:5;
  transform:translateY(-50%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, transform .2s, border-color .2s;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-50%) scale(1.1);
}
.lightbox-prev{right:1.2rem;} /* RTL: prev on right */
.lightbox-next{left:1.2rem;}  /* RTL: next on left */

/* Main stage */
.lightbox-stage{
  flex:1; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:0 4.5rem;
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}
.lightbox-img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:6px;
  transition:opacity .3s;
  user-select:none;
  -webkit-user-select:none;
}
.lightbox-spinner{
  display:none;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:36px; height:36px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--gold, #c4973b);
  border-radius:50%;
  animation:lbSpin .8s linear infinite;
}
@keyframes lbSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}

/* Thumbnail strip */
.lightbox-thumbs{
  position:relative; z-index:3;
  display:flex; gap:8px;
  padding:.75rem 1.2rem;
  overflow-x:auto;
  justify-content:center;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
.lightbox-thumbs::-webkit-scrollbar{height:4px;}
.lightbox-thumbs::-webkit-scrollbar-track{background:transparent;}
.lightbox-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2); border-radius:4px;}
.lightbox-thumb{
  flex-shrink:0;
  width:64px; height:48px;
  border-radius:6px;
  overflow:hidden;
  border:2px solid transparent;
  opacity:.5;
  cursor:pointer;
  transition:opacity .25s, border-color .25s, transform .2s;
  padding:0; background:none;
}
.lightbox-thumb img{
  width:100%; height:100%;
  object-fit:cover;
}
.lightbox-thumb:hover{opacity:.8; transform:scale(1.05);}
.lightbox-thumb.active{
  opacity:1;
  border-color:var(--gold, #c4973b);
  transform:scale(1.08);
}

/* Legacy gallery (keep for backwards compat) */
.project-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
}
.project-gallery-item{
  position:relative; display:block;
  border-radius:6px; overflow:hidden;
  height:240px;
}
.project-gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s;
}
.project-gallery-item:hover img{
  transform:scale(1.05);
}
.project-gallery-hover{
  position:absolute; inset:0;
  background:rgba(122,31,37,.3);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
  font-size:1.5rem;
}
.project-gallery-item:hover .project-gallery-hover{
  opacity:1;
}

/* =============================================
   CONTACT PAGE
   ============================================= */

/* Info cards row */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.contact-info-card{
  text-align:center;
  background:var(--white);
  border-radius:8px;
  padding:2rem 1.5rem;
  border:1px solid rgba(122,31,37,.06);
  transition:transform .2s, box-shadow .2s;
}
.contact-info-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(122,31,37,.08);
}
.contact-info-icon{
  font-size:1.8rem; margin-bottom:1rem;
}
.contact-info-card h3{
  font-family:'Amiri',serif;
  font-size:1.05rem; font-weight:700;
  color:var(--ink); margin-bottom:.75rem;
}
.contact-info-card p{
  font-family:'Tajawal',sans-serif;
  font-size:.9rem; color:var(--text-muted);
  line-height:1.8; margin:0;
}
.contact-info-card a{
  color:var(--brand); font-weight:500;
}
.contact-info-card a:hover{
  color:var(--gold);
}

/* Form */
.contact-form-wrap{
  background:var(--white);
  border-radius:8px;
  padding:2.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.contact-label{
  font-family:'Tajawal',sans-serif;
  font-size:.88rem; font-weight:600;
  color:var(--ink); display:block;
  margin-bottom:.4rem;
}
.contact-input{
  font-family:'Tajawal',sans-serif;
  width:100%; padding:.7rem 1rem;
  border:1.5px solid rgba(122,31,37,.12);
  border-radius:4px;
  font-size:.92rem;
  color:var(--text);
  background:var(--cream);
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
.contact-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(122,31,37,.08);
}
.contact-textarea{
  resize:vertical; min-height:140px;
}

/* Side panel */
.contact-side{
  display:flex; flex-direction:column; gap:1.5rem;
}
.contact-map-wrap{
  border-radius:8px; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.contact-hours{
  background:var(--white);
  border-radius:8px;
  padding:1.5rem;
  border:1px solid rgba(122,31,37,.06);
}
.contact-hours h3{
  font-family:'Amiri',serif;
  font-size:1rem; font-weight:700;
  color:var(--ink); margin-bottom:1rem;
}
.contact-hours-row{
  display:flex; justify-content:space-between;
  font-family:'Tajawal',sans-serif;
  font-size:.88rem; color:var(--text);
  padding:.4rem 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.contact-hours-row:last-child{border-bottom:none;}

.contact-branches{
  background:var(--ink);
  border-radius:8px;
  padding:1.5rem;
}
.contact-branches h3{
  font-family:'Amiri',serif;
  font-size:1rem; font-weight:700;
  color:var(--gold); margin-bottom:1rem;
}
.contact-branch{
  margin-bottom:1rem;
}
.contact-branch:last-child{margin-bottom:0;}
.contact-branch strong{
  font-family:'Tajawal',sans-serif;
  font-size:.88rem; color:var(--white);
  display:block; margin-bottom:.25rem;
}
.contact-branch p{
  font-family:'Tajawal',sans-serif;
  font-size:.82rem; color:rgba(255,255,255,.6);
  margin:0; line-height:1.7;
}

/* =============================================
   CAREERS PAGE
   ============================================= */
.careers-perks-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.careers-perk{
  text-align:center;
  background:var(--white);
  border-radius:8px;
  padding:2rem 1.25rem;
  border:1px solid rgba(122,31,37,.06);
  transition:transform .2s, box-shadow .2s;
}
.careers-perk:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(122,31,37,.08);
}
.careers-perk-icon{
  font-size:2rem; margin-bottom:1rem;
}
.careers-perk h3{
  font-family:'Amiri',serif;
  font-size:1rem; font-weight:700;
  color:var(--ink); margin-bottom:.5rem;
}
.careers-perk p{
  font-family:'Tajawal',sans-serif;
  font-size:.85rem; color:var(--text-muted);
  line-height:1.7; margin:0;
}

.careers-note-card{
  background:var(--cream);
  border-radius:8px;
  padding:1.5rem;
  border-right:3px solid var(--gold);
}
.careers-note-card h3{
  font-family:'Amiri',serif;
  font-size:1rem; font-weight:700;
  color:var(--ink); margin-bottom:.75rem;
}
.careers-note-card p{
  font-family:'Tajawal',sans-serif;
  font-size:.88rem; color:var(--text);
  line-height:1.8; margin-bottom:.5rem;
}
.careers-note-card p:last-child{margin-bottom:0;}
.careers-note-card a{
  color:var(--brand); font-weight:500;
}

/* =============================================
   VISUAL EFFECTS — Hover, Parallax, Glow, Pulse
   ============================================= */

/* --- Hero Parallax --- */
.hero-parallax{
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}
@media (max-width:768px){
  .hero-parallax{background-attachment:scroll;}
}

/* --- Hover Lift (images) --- */
.hover-lift{
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease;
}
.hover-lift:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(122,31,37,.15);
}

/* --- Hover Glow (cards/service items) --- */
.hover-glow{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.hover-glow:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 35px rgba(196,151,59,.15);
  border-color:var(--gold) !important;
}

/* --- Hover Glow Dark (VMV cards in dark section) --- */
.hover-glow-dark{
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.hover-glow-dark:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 15px 40px rgba(0,0,0,.3);
  background:rgba(255,255,255,.08);
}

/* --- CTA Button Pulse --- */
.btn-pulse{
  position:relative;
  overflow:visible;
}
.btn-pulse::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:2px solid var(--gold);
  opacity:0;
  animation:pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.6;}
  100%{transform:scale(1.15);opacity:0;}
}

/* --- Eyebrow dot pulse --- */
.eyebrow-dot{
  animation:dot-pulse 2.5s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(1.3);}
}

/* --- Gold shimmer on section headers --- */
.section-header h2{
  background:linear-gradient(90deg, var(--ink) 40%, var(--gold) 50%, var(--ink) 60%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}
.section-dark .section-header h2{
  background:linear-gradient(90deg, #fff 40%, var(--gold) 50%, #fff 60%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
@keyframes shimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}

/* --- Ethics bullet grow on hover --- */
.ethics-item{
  transition:transform .3s ease, background .3s ease;
}
.ethics-item:hover{
  transform:translateX(-6px);
  background:rgba(122,31,37,.04);
  border-radius:8px;
}

/* --- About service items border-left accent on hover --- */
.about-service-item{
  position:relative;
  overflow:hidden;
}
.about-service-item::before{
  content:'';
  position:absolute;
  top:0; right:0;
  width:4px; height:100%;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .35s ease;
}
.about-service-item:hover::before{
  transform:scaleY(1);
  transform-origin:top;
}

/* --- VMV icon float animation --- */
.vmv-icon{
  transition:transform .3s ease;
}
.vmv-card:hover .vmv-icon{
  transform:translateY(-5px) scale(1.1);
}

/* --- Image frame accent glow --- */
.image-frame-accent{
  transition:opacity .4s ease, transform .4s ease;
}
.about-image-frame:hover .image-frame-accent{
  opacity:.7;
  transform:translate(-6px, -6px);
}

/* --- Smooth section transitions --- */
.section, .section-alt, .section-dark{
  transition:opacity .3s ease;
}

/* --- Achievement note border animation --- */
.about-achievement-note{
  position:relative;
  overflow:hidden;
}
.about-achievement-note::after{
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:100%; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:sweep 3s ease-in-out infinite;
}
@keyframes sweep{
  0%{transform:translateX(100%);}
  50%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

/* --- Org chart boxes subtle hover --- */
.oc-box-dept, .oc-box-sub{
  transition:transform .25s ease, box-shadow .25s ease;
}
.oc-box-dept:hover{
  transform:scale(1.05);
  box-shadow:0 6px 20px rgba(26,26,46,.3);
}
.oc-box-sub:hover{
  transform:scale(1.03);
  box-shadow:0 4px 15px rgba(0,0,0,.25);
}

/* =============================================
   MOBILE — ABOUT PAGE (≤ 768px)
   ============================================= */
@media (max-width:768px){
  .about-heading{font-size:1.3rem;}
  .about-image-frame img{max-height:300px;}
  .image-frame-accent{display:none;}
  .about-services-grid{grid-template-columns:1fr;}
  .clients-grid{grid-template-columns:repeat(3, 1fr); gap:1rem;}
  .client-logo-item{height:90px; padding:.8rem 1rem;}
  .client-logo-item img{max-height:55px;}
  .vmv-grid{grid-template-columns:1fr;}
  .ethics-item{padding:.85rem 1rem;}
  /* Mobile: show image, hide HTML chart */
  .org-chart-img-mobile{
    display:block;
    background:var(--white);
    border-radius:12px;
    padding:1rem;
    box-shadow:0 4px 20px rgba(0,0,0,.06);
    text-align:center;
  }
  .org-chart-img-mobile img{
    width:100%;
    height:auto;
    border-radius:8px;
    cursor:zoom-in;
  }
  .org-chart-img-mobile .zoom-hint{
    display:block;
    margin-top:.6rem;
    font-family:'Tajawal',sans-serif;
    font-size:.8rem;
    color:var(--text-muted);
  }
  .org-chart-mobile-wrap{display:none !important;}
  .about-achievement-note{padding:1rem 1.25rem;}
  .hero-sub-inner{font-size:.95rem;}

  /* Services */
  .services-grid{grid-template-columns:1fr;}
  .service-card-lg-img{height:180px;}
  .service-detail-features{grid-template-columns:1fr;}
  .expertise-grid{grid-template-columns:1fr;}
  .service-detail-content > p{font-size:.92rem;}

  /* Projects */
  .projects-grid{grid-template-columns:1fr;}
  .project-card-full{height:240px;}
  .project-gallery{grid-template-columns:repeat(2, 1fr);}
  .project-gallery-item{height:180px;}
  .project-detail-cover img{max-height:300px;}

  /* Professional gallery mobile */
  .gallery-pro{grid-template-columns:repeat(2, 1fr); gap:8px;}
  .gallery-pro-item{height:180px;}
  .gallery-pro-wide{grid-column:span 2; height:200px;}
  .gallery-pro-overlay{opacity:1; background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 50%);}
  .gallery-pro-icon{display:none;}
  .gallery-pro-label{font-size:.72rem;}
  .cover-zoom-hint{opacity:1; width:36px; height:36px;}
  .cover-zoom-hint svg{width:18px; height:18px;}

  /* Lightbox mobile */
  .lightbox-stage{padding:0 .5rem;}
  .lightbox-nav{width:38px; height:38px;}
  .lightbox-nav svg{width:20px; height:20px;}
  .lightbox-prev{right:.5rem;}
  .lightbox-next{left:.5rem;}
  .lightbox-thumb{width:50px; height:38px;}
  .lightbox-thumbs{gap:6px; padding:.5rem .8rem;}

  /* Contact */
  .contact-info-grid{grid-template-columns:1fr;}
  .contact-form-wrap{padding:1.5rem;}

  /* Careers */
  .careers-perks-grid{grid-template-columns:repeat(2, 1fr);}
}

/* Tablet tweaks */
@media (min-width:769px) and (max-width:992px){
  .home-hero-content h1{font-size:2rem;}
  .project-card{height:240px;}
  .brand-logo{height:45px;}
  .brand-text{padding-right:.6rem; border-right-width:1px;}
  .brand-text-ar{font-size:.75rem;}
  .brand-text-en{font-size:.5rem;}
  .about-heading{font-size:1.5rem;}
  .services-grid{grid-template-columns:repeat(2, 1fr);}
  .projects-grid{grid-template-columns:repeat(2, 1fr);}
  .project-card-full{height:280px;}
  .gallery-pro{grid-template-columns:repeat(2, 1fr);}
  .gallery-pro-item{height:220px;}
  .gallery-pro-wide{height:260px;}
}

/* Small phones (≤480px) */
@media (max-width:480px){
  .brand-logo{height:42px;}
  .navbar-brand{gap:.4rem !important;}
  .brand-text{padding-right:.4rem;}
  .brand-text-ar{font-size:.58rem; line-height:1.3;}
  .brand-text-en{font-size:.38rem; letter-spacing:0.3px;}
}

/* Very small phones (≤380px) */
@media (max-width:380px){
  .brand-logo{height:36px;}
  .brand-text-ar{font-size:.52rem;}
  .brand-text-en{display:none;}
}

/* Landscape mode on phones */
@media (max-height:500px) and (orientation:landscape){
  .navbar{padding:.2rem 0;}
  .brand-logo{height:40px;}
  .brand-text{padding-right:.4rem;}
  .brand-text-ar{font-size:.6rem; line-height:1.3;}
  .brand-text-en{font-size:.4rem;}
}

/* =============================================
   WORK ORDER TRACKING SYSTEM (WOTS)
   ============================================= */

/* Stats Row */
.wo-stats-row{display:flex;gap:10px;margin-bottom:1.5rem;flex-wrap:wrap;}
.wo-stat-chip{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;background:#fff;border:2px solid #eee;color:#555;text-decoration:none;font-size:.95rem;transition:all .2s;font-family:'Tajawal',sans-serif;}
.wo-stat-chip:hover{border-color:var(--chip-color,var(--brand));color:var(--chip-color,var(--brand));}
.wo-stat-chip.active{background:var(--chip-color,var(--brand));border-color:var(--chip-color,var(--brand));color:#fff;}
.wo-stat-num{font-weight:700;font-size:1.2rem;}

/* Filters */
.wo-filters{margin-bottom:1.5rem;}
.wo-filter-form{display:flex;gap:10px;flex-wrap:wrap;}
.wo-search-input{flex:1;min-width:200px;}
.wo-filter-select{width:auto;min-width:150px;}

/* Cards List */
.wo-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));}
.wo-card{background:#fff;border-radius:14px;padding:20px;border:1px solid #eee;text-decoration:none;color:inherit;transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.wo-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px);border-color:var(--brand);}
.wo-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.wo-card-number{font-family:monospace;font-size:.85rem;color:#999;font-weight:600;letter-spacing:1px;}
.wo-card-priority{font-size:.7rem;padding:3px 10px;border-radius:20px;color:#fff;font-weight:600;}
.wo-card-title{font-size:1.1rem;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.4;}
.wo-card-client{font-size:.9rem;color:#666;margin-bottom:10px;}
.wo-card-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:#888;margin-bottom:12px;}
.wo-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #f0f0f0;}
.wo-card-delivery{font-size:.8rem;color:#999;}

/* Status Badge */
.wo-status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;color:#fff;font-size:.8rem;font-weight:600;}

/* Empty State */
.wo-empty{text-align:center;padding:60px 20px;background:#fff;border-radius:14px;border:2px dashed #ddd;}
.wo-empty-icon{font-size:3rem;margin-bottom:15px;}
.wo-empty h3{color:var(--ink);margin:0 0 8px;}
.wo-empty p{color:#999;margin:0 0 20px;}

/* View Page */
.wo-view-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;}
.wo-view-main{display:flex;flex-direction:column;gap:16px;}
.wo-view-sidebar{display:flex;flex-direction:column;gap:16px;}

/* Status Header */
.wo-status-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:14px 14px 0 0;color:#fff;}
.wo-status-label{font-size:1.2rem;font-weight:700;}
.wo-priority-tag{font-size:.75rem;padding:3px 12px;border-radius:20px;background:rgba(255,255,255,.25);}

/* Detail Grid */
.wo-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:10px 0;}
.wo-detail-item{display:flex;flex-direction:column;padding:12px 20px;border-bottom:1px solid #f5f5f5;}
.wo-detail-label{font-size:.8rem;color:#999;margin-bottom:4px;}
.wo-detail-value{font-size:1rem;font-weight:600;color:var(--ink);}

/* Timeline */
.wo-timeline{padding:15px;max-height:500px;overflow-y:auto;}
.wo-timeline-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f5f5f5;}
.wo-timeline-item:last-child{border-bottom:none;}
.wo-timeline-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px;}
.wo-timeline-content{flex:1;}
.wo-timeline-user{font-size:.85rem;font-weight:600;color:var(--ink);}
.wo-timeline-text{font-size:.9rem;color:#555;line-height:1.5;margin:4px 0;}
.wo-timeline-date{font-size:.75rem;color:#aaa;}

/* Quick Info */
.wo-quick-info{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f5f5f5;font-size:.9rem;}
.wo-quick-info span{color:#999;}
.wo-quick-info strong{color:var(--ink);}

/* Form */
.wo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px;}
.wo-field-full{grid-column:1/-1;}
.wo-form-actions{display:flex;gap:12px;align-items:center;margin-top:1rem;}
.btn-admin-danger{background:#cc3333;color:#fff;border:none;padding:10px 24px;border-radius:10px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:1rem;}
.btn-admin-danger:hover{background:#aa2222;}
.btn-lg{padding:14px 32px;font-size:1.1rem;}

/* Mobile */
@media (max-width:768px){
  .wo-view-grid{grid-template-columns:1fr;}
  .wo-list{grid-template-columns:1fr;}
  .wo-form-grid{grid-template-columns:1fr;}
  .wo-detail-grid{grid-template-columns:1fr;}
  .wo-stats-row{gap:6px;}
  .wo-stat-chip{padding:8px 12px;font-size:.85rem;}
  .wo-filter-form{flex-direction:column;}
}

/* Team Chips */
.wo-team-chips{display:flex;flex-wrap:wrap;gap:8px;}
.wo-team-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;font-size:.9rem;font-weight:500;}
.wo-team-chip-user{background:rgba(122,31,37,.08);color:#7a1f25;border:1px solid rgba(122,31,37,.15);}
.wo-team-chip-section{background:rgba(42,93,143,.08);color:#2a5c8f;border:1px solid rgba(42,93,143,.15);}
.wo-team-chip-dept{background:rgba(196,151,59,.08);color:#8a6a20;border:1px solid rgba(196,151,59,.2);}
.wo-team-select{min-height:80px;padding:8px !important;}
.wo-team-select option{padding:4px 8px;}
.wo-team-select option:checked{background:rgba(122,31,37,.12);color:#7a1f25;}

/* Chip Input */
.wo-team-box{position:relative;}
.wo-chip-container{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#fff;min-height:44px;cursor:text;}
.wo-chip-container:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px rgba(122,31,37,.1);}
.wo-chip-input{border:none;outline:none;flex:1;min-width:120px;font-size:.95rem;padding:4px 0;background:transparent;}
.wo-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(122,31,37,.08);color:#7a1f25;padding:4px 10px;border-radius:16px;font-size:.88rem;font-weight:500;}
.wo-chip-remove{background:none;border:none;color:#999;cursor:pointer;font-size:.8rem;padding:0 2px;line-height:1;}
.wo-chip-remove:hover{color:#cc3333;}
.wo-chip-dropdown{display:none;position:absolute;top:100%;left:0;right:0;z-index:50;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:200px;overflow-y:auto;margin-top:4px;}
.wo-chip-dropdown.show{display:block;}
.wo-chip-option{padding:10px 14px;cursor:pointer;font-size:.92rem;transition:background .1s;}
.wo-chip-option:hover{background:#f5f0eb;}

/* Finance */
.wo-finance-total-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:2px solid #eee;margin-top:10px;font-size:1.05rem;}
.wo-finance-total-row strong{color:var(--brand);font-size:1.2rem;}
.wo-payment-row{display:flex;gap:10px;align-items:center;margin-bottom:8px;padding:10px;background:#fafafa;border-radius:8px;border:1px solid #f0f0f0;}
.wo-payment-num{width:28px;height:28px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0;}
.wo-payment-fields{display:flex;flex-wrap:wrap;gap:8px;flex:1;align-items:center;}
.wo-payment-fields .admin-input{min-width:0;}
.wo-finance-summary{background:#f9f7f4;border-radius:10px;padding:12px 16px;}
.wo-finance-summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.95rem;color:#555;}
.wo-finance-summary-total{border-top:2px solid var(--brand);padding-top:10px;margin-top:6px;font-size:1.05rem;}
.wo-finance-summary-total span,.wo-finance-summary-total strong{color:var(--brand);}
@media(max-width:768px){
  .wo-payment-fields{flex-direction:column;}
  .wo-payment-fields .admin-input{width:100% !important;flex:none !important;}
}

/* Attachments */
.wo-attach-row{padding:10px 0;border-bottom:1px solid #f0f0f0;}
.wo-attach-row:last-child{border-bottom:none;}
.wo-attach-label{font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:6px;}
.wo-attach-files{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.wo-attach-file{display:inline-flex;align-items:center;gap:6px;background:#f8f8f8;padding:4px 10px;border-radius:6px;font-size:.85rem;}
.wo-attach-file a{color:var(--brand);text-decoration:none;}
.wo-attach-file a:hover{text-decoration:underline;}
.wo-attach-size{color:#aaa;font-size:.8rem;}
.wo-attach-delete{background:none;border:none;color:#cc3333;cursor:pointer;font-size:.9rem;padding:2px 4px;border-radius:4px;}
.wo-attach-delete:hover{background:rgba(204,51,51,.1);}
.wo-attach-view-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f5f5f5;}
.wo-attach-view-row:last-child{border-bottom:none;}
.wo-attach-view-type{font-size:.9rem;min-width:140px;color:#666;}
.wo-attach-view-link{color:var(--brand);text-decoration:none;font-weight:500;font-size:.95rem;}
.wo-attach-view-link:hover{text-decoration:underline;}
.wo-attach-view-meta{color:#aaa;font-size:.8rem;margin-right:auto;}

/* =============================================
   PANEL SWITCHER — CMS vs Operations
   ============================================= */

/* Welcome Section */
.panel-welcome{text-align:center;margin-bottom:2.5rem;}
.panel-welcome h2{font-family:'Tajawal',sans-serif;font-size:2rem;font-weight:700;color:var(--ink);margin:0 0 .5rem;}
.panel-welcome p{color:var(--text-muted);font-size:1.1rem;margin:0;}

/* Panel Switcher Grid */
.panel-switcher-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem;}

/* Panel Card */
.panel-card{display:flex;align-items:center;gap:1.5rem;background:#fff;border:2px solid rgba(0,0,0,.08);border-radius:20px;padding:2rem 2.5rem;text-decoration:none;color:var(--ink);transition:all .3s;position:relative;overflow:hidden;}
.panel-card::before{content:'';position:absolute;top:0;right:0;bottom:0;width:5px;transition:width .3s;}
.panel-card-cms::before{background:var(--brand);}
.panel-card-ops::before{background:#2a9d8f;}
.panel-card:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.1);}
.panel-card:hover::before{width:8px;}
.panel-card-cms:hover{border-color:var(--brand);}
.panel-card-ops:hover{border-color:#2a9d8f;}
.panel-card-icon{font-size:3rem;flex-shrink:0;}
.panel-card-body{flex:1;min-width:0;}
.panel-card-body h3{font-family:'Tajawal',sans-serif;font-size:1.5rem;font-weight:700;margin:0 0 .5rem;color:var(--ink);}
.panel-card-body p{color:var(--text-muted);font-size:1rem;margin:0 0 .8rem;line-height:1.6;}
.panel-card-stats{display:flex;gap:1rem;flex-wrap:wrap;}
.panel-card-stats span{font-size:.9rem;color:var(--text-muted);background:var(--cream);padding:.3rem .8rem;border-radius:8px;}
.panel-stat-alert{color:#cc3333 !important;background:#fbe9e7 !important;font-weight:600;}
.panel-card-arrow{font-size:2rem;color:var(--text-muted);opacity:.4;transition:all .3s;margin-right:auto;margin-left:0;}
.panel-card:hover .panel-card-arrow{opacity:1;transform:translateX(-4px);}
.panel-card-cms:hover .panel-card-arrow{color:var(--brand);}
.panel-card-ops:hover .panel-card-arrow{color:#2a9d8f;}

/* Summary Section */
.panel-summary{margin-top:0;}
.panel-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;}
.panel-summary-item{padding:1.5rem 1rem;}
.panel-summary-num{display:block;font-size:2.5rem;font-weight:800;line-height:1.2;}
.panel-summary-label{display:block;color:var(--ink);font-weight:600;font-size:1rem;margin-top:.4rem;}
.panel-summary-sub{display:block;color:var(--text-muted);font-size:.85rem;margin-top:.2rem;}

/* Panel Home Button (prominent, in topbar left) */
.panel-home-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;font-size:1.3rem;text-decoration:none;transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.15);flex-shrink:0;}
.panel-home-btn:hover{background:var(--brand);transform:scale(1.08);box-shadow:0 4px 14px rgba(122,31,37,.3);}
.panel-topbar-divider{width:1.5px;height:32px;background:rgba(0,0,0,.12);flex-shrink:0;}

/* Panel Switch Button (in topbar) */
.panel-switch-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;border-radius:10px;font-family:'Tajawal',sans-serif;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s;border:1.5px solid;}
.panel-switch-cms{background:rgba(122,31,37,.08);color:var(--brand);border-color:rgba(122,31,37,.2);}
.panel-switch-cms:hover{background:var(--brand);color:#fff;}
.panel-switch-ops{background:rgba(42,157,143,.08);color:#2a9d8f;border-color:rgba(42,157,143,.2);}
.panel-switch-ops:hover{background:#2a9d8f;color:#fff;}

/* Ops Alert Stat */
.ops-stat-alert{animation:pulse-border 2s infinite;}
@keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(204,51,51,.2);} 50%{box-shadow:0 0 0 6px rgba(204,51,51,0);}}

/* Ops Distribution Chart */
.ops-dist-list{display:flex;flex-direction:column;gap:12px;}
.ops-dist-item{display:flex;align-items:center;gap:10px;padding:0 4px;}
.ops-dist-icon{font-size:1.2rem;width:28px;text-align:center;flex-shrink:0;}
.ops-dist-label{font-size:.95rem;color:var(--ink);font-weight:500;width:80px;flex-shrink:0;}
.ops-dist-value{font-size:1rem;font-weight:700;color:var(--ink);width:32px;text-align:center;flex-shrink:0;}
.ops-dist-bar{flex:1;height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;}
.ops-dist-fill{height:100%;background:var(--brand);border-radius:4px;transition:width .5s ease;}

/* Panel Switcher Mobile */
@media (max-width:768px){
  .panel-switcher-grid{grid-template-columns:1fr;}
  .panel-card{padding:1.5rem;}
  .panel-card-icon{font-size:2.2rem;}
  .panel-card-body h3{font-size:1.2rem;}
  .panel-summary-grid{grid-template-columns:repeat(2,1fr);}
  .panel-switch-btn{font-size:.85rem;padding:.4rem .8rem;}
  .admin-stats-grid{grid-template-columns:repeat(2,1fr) !important;}
  .admin-quick-actions{grid-template-columns:1fr !important;}
}

/* =============================================
   DESIGN PIPELINE — Phase 2
   ============================================= */

/* Overall Progress */
.dp-overall-progress{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;background:#fff;border-radius:12px;padding:14px 20px;border:1px solid rgba(0,0,0,.06);}
.dp-overall-bar{flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;}
.dp-overall-fill{height:100%;background:linear-gradient(90deg,#2a9d8f,#1a7a3a);border-radius:5px;transition:width .6s ease;}
.dp-overall-text{font-size:.9rem;color:var(--text-muted);font-weight:600;white-space:nowrap;}

/* Pipeline Header */
.dp-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:linear-gradient(135deg,var(--ink) 0%,#2d2d55 100%);color:#fff;border-radius:16px 16px 0 0;}
.dp-title{font-family:'Tajawal',sans-serif;font-size:1.3rem;font-weight:700;margin:0;color:#fff;}
.dp-progress-badge{background:rgba(255,255,255,.2);padding:4px 14px;border-radius:20px;font-size:.9rem;font-weight:700;}

/* Discipline Summary Mini-bars */
.dp-disc-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid #eee;}
.dp-disc-mini{display:flex;align-items:center;gap:8px;padding:12px 16px;border-left:1px solid #f0f0f0;}
.dp-disc-mini:first-child{border-left:none;}
.dp-disc-mini-icon{font-size:1.2rem;}
.dp-disc-mini-name{font-size:.85rem;font-weight:600;color:var(--ink);min-width:50px;}
.dp-disc-mini-bar{flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;}
.dp-disc-mini-fill{height:100%;border-radius:3px;transition:width .5s;}
.dp-disc-mini-pct{font-size:.8rem;font-weight:700;color:var(--text-muted);min-width:30px;text-align:left;}

/* Discipline Section */
.dp-discipline{border-top:1px solid #eee;}
.dp-discipline-header{display:flex;align-items:center;gap:10px;padding:14px 24px;background:var(--cream);border-bottom:1px solid #eee;}
.dp-discipline-icon{font-size:1.4rem;}
.dp-discipline-name{font-size:1.1rem;font-weight:700;color:var(--disc-color,var(--ink));}
.dp-discipline-name-en{font-size:.8rem;color:var(--text-muted);font-weight:500;}

/* Phases Row */
.dp-phases-row{display:flex;align-items:stretch;gap:0;padding:16px 20px;overflow-x:auto;}
.dp-phase-arrow{display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#ccc;padding:0 6px;flex-shrink:0;transition:color .3s;}
.dp-arrow-done{color:#1a7a3a;}

/* Phase Card */
.dp-phase-card{flex:1;min-width:160px;background:#fff;border:2px solid #eee;border-radius:12px;padding:14px;text-align:center;transition:all .25s;position:relative;}
.dp-phase-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);}
.dp-phase-not_started{border-color:#eee;background:#fafafa;}
.dp-phase-in_progress{border-color:#2a5c8f;background:#f0f5ff;}
.dp-phase-review{border-color:#c4973b;background:#fff9ec;}
.dp-phase-approved{border-color:#1a7a3a;background:#f0faf0;}
.dp-phase-rejected{border-color:#cc3333;background:#fff5f5;}
.dp-phase-locked{opacity:.5;pointer-events:none;filter:grayscale(.5);}

.dp-phase-status-dot{font-size:1.6rem;margin-bottom:6px;}
.dp-phase-name{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.dp-phase-status-text{font-size:.8rem;font-weight:600;margin-bottom:6px;}
.dp-phase-engineer{font-size:.75rem;color:#666;margin-bottom:3px;}
.dp-phase-date{font-size:.7rem;color:#999;}
.dp-phase-locked-msg{font-size:.7rem;color:#999;margin-top:8px;font-style:italic;}

/* Phase Action Buttons */
.dp-phase-actions{margin-top:10px;}
.dp-phase-form{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;}
.dp-phase-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;border:1.5px solid var(--btn-color,#ccc);background:transparent;color:var(--btn-color,#555);border-radius:8px;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Tajawal',sans-serif;}
.dp-phase-btn:hover{background:var(--btn-color,#ccc);color:#fff;}

/* Phase Engineer Assignment */
.dp-assign-form{margin-top:8px;}
.dp-assign-select{width:100%;padding:4px 6px;border:1px solid #ddd;border-radius:6px;font-size:.7rem;font-family:'Tajawal',sans-serif;background:#fff;color:#555;cursor:pointer;}
.dp-assign-select:focus{border-color:var(--brand);outline:none;}

/* Design Pipeline Mobile */
@media (max-width:900px){
  .dp-disc-summary{grid-template-columns:repeat(2,1fr);}
  .dp-phases-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px;}
  .dp-phase-card{min-width:140px;}
}
@media (max-width:600px){
  .dp-disc-summary{grid-template-columns:1fr;}
  .dp-disc-mini{border-left:none;border-bottom:1px solid #f0f0f0;}
  .dp-phases-row{gap:4px;}
  .dp-phase-card{min-width:120px;padding:10px;}
  .dp-phase-name{font-size:.8rem;}
  .dp-phase-arrow{font-size:1.2rem;padding:0 2px;}
}