:root{
  --ink:#0d3542;
  --accent:#e92729;

  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#586971;

  --border: rgba(13,53,66,.12);
  --shadow: 0 18px 45px rgba(13,53,66,.10);
  --shadow-soft: 0 10px 30px rgba(13,53,66,.08);

  --radius: 18px;
  --radius-sm: 14px;
  --container: 1180px;
  --header-h: 60px;

  --focus: 0 0 0 4px rgba(233,39,41,.18);
}

/* ============ Base / Reset ============ */
*{box-sizing:border-box}

html{
  overflow-x:hidden;
  overflow-y:auto;
  color-scheme: light;
}
html[data-theme="dark"]{
  color-scheme: dark;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;

  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* Accessibility helper */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.muted{color: var(--muted)}

.skip-link{
  position:absolute;
  top:-100px;
  left: 12px;
  background:#fff;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{
  top:12px;
  outline:none;
  box-shadow: var(--focus);
}

/* ============ Header / Nav ============ */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(13,53,66,.10);
}
.header__inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: transparent;
}

/* Show light-logo by default */
.brand__logo--dark{ display:none; }
.footer__logo--dark {display: none;}


/* When dark theme is active, swap */
html[data-theme="dark"] .brand__logo--light{ display:none; }
html[data-theme="dark"] .brand__logo--dark { display:block; }
html[data-theme="dark"] .footer__logo--light {display: none;}
html[data-theme="dark"] .footer__logo--dark {display: inline-block;}

.brand__fallback{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand__name{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 16px;
}
.brand__sub{
  font-size: 12.5px;
  color: rgba(13,53,66,.72);
  font-weight: 600;
}

/* Mobile brand (clean + no conflicts) */
@media (max-width: 520px){
  .header__inner{gap: 10px;}

  .brand{
    min-width: 0;
    gap: 10px;
  }

  .brand__logo{
    width: 38px;
    height: 38px;
  }

  .brand__text{
    min-width: 0;
    line-height: 1.05;
  }

  .brand__name,
  .brand__sub{
    display:block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(240px, calc(100vw - 160px));
  }

  .brand__name{
    font-size: 14px;
    font-weight: 700;
  }

  .brand__sub{
    font-size: 11px;
    font-weight: 700;
    color: rgba(13,53,66,.72);
  }
}

.nav__toggle{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(13,53,66,.14);
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav__toggle i{
  font-size: 18px;
  line-height: 1;
  color: rgba(13,53,66,.92);
}
.nav__toggle span{ display:none; }

.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav__link{
  font-weight: 800;
  font-size: 13.5px;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(13,53,66,.86);
}
.nav__link:hover{background: rgba(13,53,66,.06);}

.nav-backdrop{
  position: fixed;
  inset:0;
  background: rgba(13,53,66,.40);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

@media (max-width: 920px){
  .nav__toggle{display:flex}

  .nav__list{
    position: fixed;
    top: calc(var(--header-h) + 10px);
    right: 14px;
    left: 14px;
    background:#fff;
    border: 1px solid rgba(13,53,66,.12);
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }

  .nav__list.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events:auto;
  }

  .nav__link{padding: 12px 12px;}
  .nav-backdrop.is-open{opacity:1; pointer-events:auto;}
  
}

/* ============ Header Actions (Desktop) ============ */
.header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.header-actions__quick{
  display:flex;
  align-items:center;
  gap: 8px;
}
.h-action{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(13,53,66,.14);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  box-shadow: var(--shadow-soft);
}
.h-action:focus{outline:none;}
.h-action:focus-visible{box-shadow: var(--focus);}
.h-action:focus:not(:focus-visible){box-shadow:none;}

.h-action i{color: var(--accent); font-size: 16px;}

.theme-toggle{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(13,53,66,.14);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.theme-toggle:focus{outline:none;}
.theme-toggle:focus-visible{box-shadow: var(--focus);}
.theme-toggle:focus:not(:focus-visible){box-shadow:none;}

.theme-toggle i{
  font-size: 18px;
  color: rgba(13,53,66,.92);
}

/* Hide desktop actions on mobile (requirements) */
@media (max-width: 920px){
  .header-actions{display:none;}
}

/* ============ Mobile Nav Extras (Quick actions + Theme inside menu) ============ */
.nav-extras{
  display: none;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(13,53,66,.16);
}
@media (max-width: 920px){
  .nav-extras{ display:block; }
}
.nav-extras__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 520px){
  .nav-extras__grid{grid-template-columns: 1fr;}
}

/* Allow meta-pill as button too */
.meta-pill--btn{
  border: 1px solid rgba(13,53,66,.12);
  background: rgba(255,255,255,.90);
  cursor:pointer;
}
.meta-pill--btn:focus{outline:none; box-shadow: var(--focus);}

/* ============ Buttons / Links ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid transparent;
  cursor:pointer;
  white-space: nowrap;
}
.btn:focus{outline:none;}
.btn:focus-visible{box-shadow: var(--focus);}
.btn:focus:not(:focus-visible){box-shadow:none;}


.btn--primary{
  background: linear-gradient(135deg, var(--accent), #ff4a4a);
  color:#fff;
  box-shadow: 0 14px 28px rgba(233,39,41,.22);
}
.btn--primary:hover{filter: saturate(1.06) brightness(1.02);}

.btn--ghost{
  background: rgba(255,255,255,.92);
  border-color: rgba(13,53,66,.16);
  color: var(--ink);
}
.btn--ghost:hover{background: #fff;}

.link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color: var(--ink);
}
.link i{opacity:.9}

/* ============ Language FAB ============ */
.lang-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  border: 1px solid rgba(13,53,66,.14);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, opacity .18s ease;
}
.lang-fab__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(233,39,41,.18);
}
.lang-fab__text{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 13px;
}
.lang-fab.is-hidden{
  transform: translateY(18px);
  opacity: 0;
  pointer-events:none;
}

/* ============ Hero ============ */
.hero{
  position: relative;
  overflow:hidden;
  padding: 34px 0;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__bg picture,
.hero__bg img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 400px at 75% 10%, rgba(233,39,41,.16), transparent 70%),
    radial-gradient(900px 500px at 20% 10%, rgba(13,53,66,.18), transparent 68%),
    linear-gradient(180deg, rgba(246,248,251,.78), rgba(246,248,251,.92) 36%, var(--bg) 100%);
}
.hero__inner{padding-top: 18px;}

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 520px){
  .hero__grid{grid-template-columns: 1fr; gap: 18px;}
  
}

.hero__copy{padding-top: 14px;}

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(13,53,66,.12);
  font-weight: 700;
  font-size: 12.5px;
  color: rgba(13,53,66,.84);
}

.hero__title{
  margin: 14px 0 8px;
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: .2px;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.hero__subtitle{
  margin: 0 0 16px;
  font-size: clamp(14.5px, 1.35vw, 17.5px);
  color: rgba(13,53,66,.80);
  max-width: 62ch;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 14px 0;
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(13,53,66,.12);
  font-weight: 900;
  font-size: 13px;
}
.meta-pill i{color: var(--accent);}

/* Hero meta pills: single row on small phones */
@media (max-width: 520px){
  .hero__meta{
    flex-wrap: nowrap;
    gap: 8px;
  }
  .meta-pill{
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 9px 8px;
    font-size: 11.5px;
    gap: 8px;
  }
  .meta-pill span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.hero__aside{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.hero-card{
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,53,66,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.hero-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 520px){
  .hero-card__top{flex-wrap:wrap; justify-content:flex-start;}
  .chip{max-width:100%; white-space:normal; line-height:1.25;}
  .pulse{margin-inline-start:auto;}
}

.chip{
  font-weight: 900;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(13,53,66,.06);
  border: 1px solid rgba(13,53,66,.10);
}
.pulse{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(233,39,41,.40);
  animation: pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow: 0 0 0 0 rgba(233,39,41,.35);}
  70%{box-shadow: 0 0 0 10px rgba(233,39,41,0);}
  100%{box-shadow: 0 0 0 0 rgba(233,39,41,0);}
}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}
.stat{
  background: rgba(13,53,66,.04);
  border: 1px solid rgba(13,53,66,.08);
  border-radius: 14px;
  padding: 10px;
  text-align:center;
}
.stat__num{font-weight: 900; font-size: 18px; letter-spacing: .4px;}
.stat__label{font-size: 12px; color: rgba(13,53,66,.76); font-weight: 800;}

.hero-strip{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.strip-img{
  border-radius: var(--radius-sm);
  overflow:hidden;
  border: 1px solid rgba(13,53,66,.10);
  background:#fff;
  box-shadow: var(--shadow-soft);
}
.strip-img img{width:100%; height: 120px; object-fit: cover;}
@media (max-width: 980px){
  .strip-img img{height: 140px}
}

/* ============ Highlights ============ */
.highlights{padding: 8px 0 18px;}
.highlights__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px){.highlights__grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 520px){.highlights__grid{grid-template-columns: 1fr;}}

.h-card{
  display:flex;
  align-items:center;
  gap: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,53,66,.10);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.h-card i{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(233,39,41,.10);
  color: var(--accent);
  font-size: 18px;
}
.h-card__title{font-weight: 900; line-height: 1.2;}
.h-card__text{font-weight: 800; font-size: 12.5px; color: rgba(13,53,66,.75);}

/* ============ Sections ============ */
.section{padding: 56px 0;}
.section--alt{
  background: linear-gradient(180deg, rgba(13,53,66,.035), rgba(13,53,66,0) 55%);
}
.section__head{
  margin-bottom: 18px;
  max-width: 900px;
}
.section__eyebrow{
  font-weight: 900;
  color: rgba(13,53,66,.78);
  font-size: 12px;
  letter-spacing: .2px;
}
.section__title{
  margin: 10px 0 8px;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: 900;
}
.section__subtitle{
  margin: 0;
  font-size: 15.5px;
  color: rgba(13,53,66,.78);
  max-width: 72ch;
}
.section__accent{
  display:block;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(233,39,41,.22));
  margin-top: 14px;
  transform-origin: right center;
  will-change: transform;
}
html[dir="ltr"] .section__accent { transform-origin: left center; }
html[dir="rtl"] .section__accent { transform-origin: right center; }

/* Grid helpers */
.grid{display:grid; gap: 14px;}
.grid--2{grid-template-columns: repeat(2, 1fr);}
.grid--3{grid-template-columns: repeat(3, 1fr);}
.grid--4{grid-template-columns: repeat(4, 1fr);}
@media (max-width: 980px){
  .grid--2, .grid--3, .grid--4{grid-template-columns: 1fr;}
}

.card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,53,66,.12);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.card__icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(233,39,41,.10);
  border: 1px solid rgba(233,39,41,.18);
  color: var(--accent);
  margin-bottom: 10px;
}
.card--mini .card__icon{visibility: hidden;}
.card__title{margin:0 0 8px; font-weight: 900;}
.card__text{margin:0; color: rgba(13,53,66,.78); font-weight: 600;}

/* Mini cards with image background */
.card--mini{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: transparent;
}
.card--mini::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background: var(--mini-bg) center/cover no-repeat;
  transform: scale(1.05);
  opacity: .85;
  filter: saturate(1) contrast(1.08);
  pointer-events: none;
}
.card--mini::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(13,53,66,0) 0%,
    rgba(13,53,66,0) 55%,
    rgba(13,53,66,.90) 100%
  );
  pointer-events:none;
}
.card--mini > *{position: relative; z-index: 1;}

.card--mini .card__title{
  font-size: 14px;
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  margin: 0 0 10px;
}
.card--mini .card__text{
  font-size: 12.8px;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

/* Callout */
.callout{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(13,53,66,.12);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.callout__icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(233,39,41,.10);
  color: var(--accent);
}
.callout__title{margin:0 0 6px; font-weight: 900;}
.callout__text{margin:0; color: rgba(13,53,66,.78); font-weight: 600;}

/* ============ Services ============ */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 980px){.services-grid{grid-template-columns: 1fr;}}

.svc{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,53,66,.12);
  box-shadow: var(--shadow-soft);
  font-weight: 900;
  color: rgba(13,53,66,.88);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.svc i{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(13,53,66,.06);
  border: 1px solid rgba(13,53,66,.10);
  color: var(--ink);
  flex: 0 0 auto;
}
.svc:hover{
  transform: translateY(-2px);
  border-color: rgba(233,39,41,.22);
  box-shadow: 0 18px 40px rgba(13,53,66,.10);
}
/* Services categories (3 sections) */
.services-categories{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.services-category__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.services-category__title{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  color: var(--ink);
}

.services-category__line{
  flex: 1;
  height: 1px;
  background: rgba(13,53,66,.14);
}

.services-category .services-grid{
  margin-top: 0;
}
#services .services-categories > .services-category__head{
  margin: 24px 0 10px;  
}

#services .services-categories > .services-category__head:first-child{
  margin-top: 0;       
}

#services .services-categories > .services-grid{
  margin-top: 0;        
  margin-bottom: 24px;  
}

#services .services-categories > .services-grid:last-child{
  margin-bottom: 0;     
}

.strengths{margin-top: 112px;}
.strengths__head{margin-bottom: 14px; max-width: 820px;}
.strengths__title{margin:0 0 6px; font-weight: 900; font-size: clamp(24px, 2.6vw, 36px);}
.strengths__text{margin:0; color: rgba(13,53,66,.78); font-weight: 600;}

/* ============ Sectors ============ */
.sectors-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){.sectors-grid{grid-template-columns: 1fr;}}

.sector-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(13,53,66,.12);
  background:#fff;
  box-shadow: var(--shadow-soft);
  min-height: 290px;
}
.sector-card img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
}
.sector-card__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 16px;
  background: linear-gradient(180deg, transparent 30%, rgba(13,53,66,.78) 100%);
  color:#fff;
}
.sector-card__tag{
  display:inline-flex;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(233,39,41,.88);
  margin-bottom: 10px;
}
.sector-card__title{margin:0 0 6px; font-weight: 900; line-height:1.2;}
.sector-card__text{margin:0; opacity: .92; font-weight: 600;}

/* ============ CTA Wide ============ */
.cta-wide{
  position:relative;
  overflow:hidden;
  padding: 44px 0;
}
.cta-wide__bg{
  position:absolute;
  inset:0;
  z-index:-2;
}
.cta-wide__bg img{width:100%; height:100%; object-fit: cover;}
.cta-wide::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(13,53,66,.70), rgba(13,53,66,.78));
}
.cta-wide__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
@media (max-width: 980px){
  .cta-wide__inner{flex-direction:column; align-items:flex-start;}
}
.cta-wide__title{margin:0 0 8px; color:#fff; font-weight: 900; font-size: clamp(22px, 2.6vw, 34px);}
.cta-wide__text{margin:0; color: rgba(255,255,255,.92); font-weight: 600; max-width: 70ch;}
.cta-wide__actions{display:flex; gap: 10px; flex-wrap:wrap;}

/* ============ Shared scroll buttons (Projects/Gallery) ============ */
.scroll-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(13,53,66,.14);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  z-index: 2;
  display:grid;
  place-items:center;
}
.scroll-btn--prev{right: -8px;}
.scroll-btn--next{left: -8px;}
@media (max-width: 980px){
  .scroll-btn--prev{right: 6px;}
  .scroll-btn--next{left: 6px;}
}

/* ============ Projects (filters + grid) ============ */
.projects-filter{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 6px;
}
@media (max-width: 520px){
  .projects-filter{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    overflow-y: visible;
  }
  .projects-filter::-webkit-scrollbar{height: 0;}
}

.filter-chip{
  border: 1px solid rgba(13,53,66,.14);
  background: rgba(255,255,255,.92);
  border-radius: 999px;

  padding: 9px 10px 7px; 

  font-weight: 900;
  font-size: 11.5px;

  line-height: 1.2;       
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.filter-chip:focus{outline:none; box-shadow: var(--focus);}
.filter-chip:hover{transform: translateY(-1px); border-color: rgba(233,39,41,.22);}

.filter-chip.is-active{
  background: linear-gradient(135deg, var(--accent), #ff4a4a);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(233,39,41,.16);
}

.projects-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .projects-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 520px){
  .projects-grid{grid-template-columns: 1fr;}
}

.p-card{
  position: relative;
  border: 1px solid rgba(13,53,66,.12);
  border-radius: 18px;
  overflow: hidden;
  background:#fff;
  box-shadow: var(--shadow-soft);
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
.p-card:focus{outline:none; box-shadow: var(--focus);}

.p-card__media{height: 250px;}
@media (max-width: 520px){
  .p-card__media{height: 240px;}
}
.p-card__media img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .25s ease;
}
.p-card:hover .p-card__media img{transform: scale(1.05);}

.p-card__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 10px;
  padding: 14px;
  color:#fff;
  background: linear-gradient(180deg, transparent 28%, rgba(13,53,66,.86) 100%);
  transform: translateY(42%);
  transition: transform .22s ease;
}
@media (max-width: 520px){
  .p-card__overlay{transform: translateY(50%);}
}
.p-card:hover .p-card__overlay,
.p-card:focus-visible .p-card__overlay{
  transform: translateY(0);
}

.p-card__title{margin:0; font-weight: 900; line-height: 1.2; text-wrap: balance;}
.p-card__meta{display:flex; flex-wrap:wrap; gap: 6px;}
.p-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.p-card__desc{
  margin:0;
  font-weight: 600;
  opacity: .92;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-card__cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 12.5px;
  opacity: .95;
}

.projects-actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
@media (max-width: 520px){
  .projects-actions{flex-direction:column; align-items:stretch;}
  .projects-actions .btn{width:100%;}
}
.projects-count{font-weight: 900; font-size: 12.5px;}

/* ============ Gallery (slider + joystick) ============ */
.gallery-shell{position:relative; margin-top: 18px;}

.gallery-track{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;

  direction: ltr;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar{height: 0;}

.gallery-item{
  position:relative;
  flex: 0 0 auto;
  width: min(360px, 78vw);
  height: 240px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(13,53,66,.12);
  box-shadow: var(--shadow-soft);
  background:#fff;
  scroll-snap-align: start;
  cursor: pointer;
}
@media (min-width: 980px){
  .gallery-item{width: 380px; height: 260px;}
}
.gallery-item img{width:100%; height:100%; object-fit: cover;}

.gallery-badge{
  position:absolute;
  left: 12px;
  bottom: 12px;
  display:inline-flex;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  background: rgba(13,53,66,.82);
  color:#fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

/* Override scroll buttons positioning for gallery */
.gallery-shell .scroll-btn--prev{left: -8px; right:auto;}
.gallery-shell .scroll-btn--next{right: -8px; left:auto;}
@media (max-width: 980px){
  .gallery-shell .scroll-btn--prev{left: 6px;}
  .gallery-shell .scroll-btn--next{right: 6px;}
}

.gallery-joystick-wrap{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
}
.gallery-joystick{
  width: min(340px, 92vw);
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(13,53,66,.14);
  background: rgba(13,53,66,.08);
  box-shadow: var(--shadow-soft);
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select:none;
}
.gallery-joystick::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(13,53,66,.24);
  border-radius: 2px;
}
.gallery-joystick__track{
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(233,39,41,.16), rgba(13,53,66,.06), rgba(233,39,41,.16));
}
.gallery-track.is-joy{scroll-snap-type:none; scroll-behavior:auto;}

.gallery-joystick__knob{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,53,66,.18);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) translateX(var(--joy-x, 0px));
}
.gallery-joystick.is-active .gallery-joystick__knob{
  box-shadow: 0 18px 45px rgba(13,53,66,.16);
}
.gallery-joystick__hint{
  margin:0;
  font-size: 12.5px;
  text-align:center;
  max-width: 62ch;
}

/* ============ Contact ============ */
.contact{align-items:start}
.contact__cards{display:flex; flex-direction:column; gap: 12px;}

.contact-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,53,66,.12);
  box-shadow: var(--shadow-soft);
}
.contact-card--static{cursor: default;}
.contact-card__icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(233,39,41,.10);
  color: var(--accent);
}
.contact-card__title{font-weight: 900;}
.contact-card__value{font-weight: 800; color: rgba(13,53,66,.80); font-size: 13px;}
.contact-card__go{margin-inline-start:auto; opacity:.65}

.mini-info{
  background: rgba(255,255,255,.94);
  
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}
.mini-info__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(13,53,66,.16);
}
.mini-info__row:last-child{border-bottom:0}
.mini-info__label{font-weight: 900;}
.mini-info__value{font-weight: 900;}

.pm-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,53,66,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.pm-card__top{display:flex; gap: 12px; align-items:center; margin-bottom: 10px;}
.pm-card__icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(13,53,66,.06);
  border: 1px solid rgba(13,53,66,.10);
}
.pm-card__name{font-weight: 900;}
.pm-card__role{font-weight: 900; color: rgba(13,53,66,.72); font-size: 12.5px;}
.pm-card__links{display:flex; flex-direction:column; gap: 6px;}
.pm-card__links a{font-weight: 900; color: rgba(13,53,66,.84);}
.pm-card__links i{color: var(--accent); margin-inline-end: 8px;}

/* ============ Form ============ */
.form{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,53,66,.12);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.form__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 980px){.form__grid{grid-template-columns: 1fr;}}

.field{display:flex; flex-direction:column; gap: 8px;}
.field--full{grid-column: 1 / -1;}
.field__label{font-weight: 900; font-size: 13px;}
.field__input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13,53,66,.16);
  background:#fff;
  font-weight: 800;
  outline:none;
}
.field__input:focus{box-shadow: var(--focus); border-color: rgba(233,39,41,.35);}
.field__input--textarea{resize: vertical; min-height: 140px;}

.form__actions{margin-top: 12px;}
.form__note{margin: 10px 0 0; font-size: 12.5px;}
.form__status{margin-top: 10px; font-weight: 900;}

.hp{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============ Footer ============ */
/* ===== Compact Footer (Clean) ===== */
.footer{
  padding: 12px 0;
  border-top: 1px solid rgba(13,53,66,.10);
  background: rgba(255,255,255,.60);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

/* Brand */
.footer__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.footer__logo{
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: transparent;
  flex: 0 0 auto;
}

.footer__fallback{
  font-weight: 900;
  font-size: 16px;
}

.footer__name{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
}

.footer__small{
  font-weight: 800;
  font-size: 11.5px;
  color: rgba(13,53,66,.72);
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 980px){
  .footer__inner{
    flex-direction:column;
    align-items:center; 
    justify-content:center;
    gap: 8px;
  }

  .footer{ padding: 10px 0; }
}

/* ============ Lightbox ============ */
.lightbox{
  position: fixed;
  inset:0;
  z-index: 999;
  display:none;
}
.lightbox.is-open{display:block;}

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(13,53,66,.74);
  border:0;
  width:100%;
  height:100%;
  cursor:pointer;
}

.lightbox__dialog{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100% - 26px));
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  background:#0b2230;

  max-height: calc(100vh - 26px);
  max-height: calc(100dvh - 26px);

  display: flex;
  flex-direction: column;
}

.lightbox__close{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.lightbox__content{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
@media (max-width: 980px){
  .lightbox__content{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .lightbox.has-info .lightbox__stage{
    height: 52dvh;
    height: 52vh;       
    max-height: 420px;
    min-height: 220px;
    flex: 0 0 auto;
  }

  .lightbox.has-info .lightbox__info{
    flex: 1 1 auto;
    min-height: 0;
  }

  .lightbox:not(.has-info) .lightbox__stage{
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  .lightbox__track{
    height: 100%;
    max-height: none;
  }
  .lightbox__slide{
    height: 100%;
  }
  .lightbox__img{
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
}
.lightbox__stage{position: relative; background: #0b2230;}

.lightbox__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-height: 76vh;
}
.lightbox__slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b2230;
}

.lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(13,53,66,.35);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 5;
}
.lightbox__nav--prev{left: 12px;}
.lightbox__nav--next{right: 12px;}
.lightbox__nav:disabled{opacity:.35; cursor:not-allowed;}

.lightbox__img{
  width:100%;
  height:auto;
  display:block;
  max-height: 76vh;
  object-fit: contain;
  background:#0b2230;
}

.lightbox__info{
  padding: 16px;
  color:#fff;
  background:#0b2230;
  border-top: 1px solid rgba(255,255,255,.10);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
}
@media (min-width: 980px){
  .lightbox__info{border-top:0; border-inline-start: 1px solid rgba(255,255,255,.10);}
}
.lightbox__kicker{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 12px;
  color: rgba(255,255,255,.74);
  margin-bottom: 10px;
}
.lightbox__title{margin: 0 0 12px; font-weight: 900; line-height: 1.2;}
.lightbox__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.lightbox__meta .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 900;
  font-size: 12px;
}
.lightbox__desc{margin:0; color: rgba(255,255,255,.92); font-weight: 600;}
.p-card__desc,
#lightboxDesc { white-space: pre-line; }

/* ============ LTR tweaks ============ */
html[dir="ltr"] .scroll-btn--prev{left: -8px; right:auto;}
html[dir="ltr"] .scroll-btn--next{right: -8px; left:auto;}
html[dir="ltr"] .brand{min-width: 240px}

/* ============ Reduce motion ============ */
@media (prefers-reduced-motion: reduce){
  .pulse{animation:none}
}

/* ======================================
   DARK MODE OVERRIDES (Pro)
====================================== */
html[data-theme="dark"]{
  --ink: #eaf2f5;
  --bg: #061922;
  --muted: rgba(234,242,245,.74);
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);
  --focus: 0 0 0 4px rgba(233,39,41,.28);

  /* internal helpers */
  --d-surface-94: rgba(11,34,48,.94);
  --d-surface-92: rgba(11,34,48,.92);
  --d-surface-90: rgba(11,34,48,.90);
  --d-surface-86: rgba(11,34,48,.86);
  --d-surface-84: rgba(11,34,48,.84);
  --d-surface-60: rgba(11,34,48,.60);

  --d-border-10: rgba(255,255,255,.10);
  --d-border-12: rgba(255,255,255,.12);
  --d-border-14: rgba(255,255,255,.14);
  --d-border-16: rgba(255,255,255,.16);
}

html[data-theme="dark"] body{
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] .header{
  background: var(--d-surface-86);
  border-bottom-color: var(--d-border-10);
}

html[data-theme="dark"] .nav__toggle{
  background: var(--d-surface-94);
  border-color: var(--d-border-14);
}
html[data-theme="dark"] .nav__toggle i{ color: rgba(234,242,245,.92); }

html[data-theme="dark"] .nav__list{
  background: var(--d-surface-94);
  border-color: var(--d-border-10);
}
html[data-theme="dark"] .nav__link{
  color: rgba(234,242,245,.86);
}
html[data-theme="dark"] .nav__link:hover{
  background: rgba(255,255,255,.06);
}

html[data-theme="dark"] .brand__sub{ color: rgba(234,242,245,.72); }
html[data-theme="dark"] .muted{ color: var(--muted); }

html[data-theme="dark"] .skip-link{
  background: var(--d-surface-94);
  border-color: var(--d-border-12);
}

html[data-theme="dark"] .btn--ghost{
  background: var(--d-surface-92);
  border-color: var(--d-border-16);
  color: var(--ink);
}
html[data-theme="dark"] .btn--ghost:hover{ background: var(--d-surface-94); }

html[data-theme="dark"] .h-action,
html[data-theme="dark"] .theme-toggle{
  background: var(--d-surface-92);
  border-color: var(--d-border-14);
}
html[data-theme="dark"] .theme-toggle i{ color: rgba(234,242,245,.92); }

html[data-theme="dark"] .kicker{
  background: var(--d-surface-84);
  border-color: var(--d-border-12);
  color: rgba(234,242,245,.84);
}

html[data-theme="dark"] .hero__subtitle{ color: rgba(234,242,245,.80); }

html[data-theme="dark"] .hero__overlay{
  background:
    radial-gradient(900px 400px at 75% 10%, rgba(233,39,41,.14), transparent 70%),
    radial-gradient(900px 500px at 20% 10%, rgba(0,0,0,.35), transparent 68%),
    linear-gradient(180deg, rgba(6,25,34,.72), rgba(6,25,34,.90) 36%, var(--bg) 100%);
}

html[data-theme="dark"] .meta-pill,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .h-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .svc,
html[data-theme="dark"] .strip-img,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .mini-info,
html[data-theme="dark"] .pm-card,
html[data-theme="dark"] .form,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .scroll-btn,
html[data-theme="dark"] .gallery-joystick{
  background: var(--d-surface-92);
  border-color: var(--d-border-12);
}

html[data-theme="dark"] .h-card__text,
html[data-theme="dark"] .card__text,
html[data-theme="dark"] .callout__text,
html[data-theme="dark"] .section__subtitle,
html[data-theme="dark"] .strengths__text,
html[data-theme="dark"] .contact-card__value,
html[data-theme="dark"] .pm-card__role,
html[data-theme="dark"] .pm-card__links a{
  color: rgba(234,242,245,.78);
}
html[data-theme="dark"] .section__eyebrow{
  color: var(--muted);
}
html[data-theme="dark"] .lang-fab{
  background: var(--d-surface-92);
  border-color: var(--d-border-14);
}

html[data-theme="dark"] .lang-fab__text{ color: var(--ink); }


html[data-theme="dark"] .stat{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .stat__label{ color: rgba(234,242,245,.76); }

html[data-theme="dark"] .services-category__line{ background: rgba(255,255,255,.14); }

html[data-theme="dark"] .svc{
  color: rgba(234,242,245,.88);
}
html[data-theme="dark"] .svc i{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(234,242,245,.92);
}

html[data-theme="dark"] .field__input{
  background: rgba(11,34,48,.92);
  border-color: rgba(255,255,255,.14);
  color: rgba(234,242,245,.92);
}
html[data-theme="dark"] .field__input::placeholder{
  color: rgba(234,242,245,.55);
}

html[data-theme="dark"] .footer{
  background: var(--d-surface-60);
  border-top-color: var(--d-border-10);
}
html[data-theme="dark"] .footer__small{ color: rgba(234,242,245,.72); }

html[data-theme="dark"] .nav-extras{
  border-top-color: rgba(255,255,255,.16);
}
html[data-theme="dark"] .meta-pill--btn{
  background: var(--d-surface-92);
  border-color: var(--d-border-12);
  color: rgba(234,242,245,.88);
}