/* ============================================================
   IAIS UAE - SERVICES ARCHITECTURE V2
   File: assets/css/service.css
   Standalone stylesheet for services.html
   ============================================================ */

:root{
  --navy:#003B5C;
  --deep:#00263B;
  --black:#001923;
  --teal:#00A3A3;
  --teal-dark:#007F86;
  --teal-light:#29C5C5;
  --gold:#F4B400;

  --bg:#F5F8FA;
  --surface:#FFFFFF;
  --surface-alt:#EEF4F6;

  --text:#172B3A;
  --soft:#60717F;
  --line:#DDE6EB;

  --head:'Poppins',Arial,sans-serif;
  --body:'Inter',Arial,sans-serif;
  --mono:'Space Mono',monospace;

  --container:1500px;

  --shadow-sm:0 7px 22px rgba(0,38,59,.07);
  --shadow-md:0 18px 42px rgba(0,38,59,.12);
  --shadow-lg:0 30px 75px rgba(0,38,59,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  min-width:320px;
  overflow-x:hidden;
  font-family:var(--body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{color:inherit}
[hidden]{display:none!important}

.container{
  width:min(var(--container),calc(100% - 64px));
  margin-inline:auto;
}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:9px;
  font-family:var(--head);
  font-size:13px;
  font-weight:700;
  transition:.25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 10px 25px rgba(0,163,163,.18)}
.btn-primary:hover{background:var(--teal-dark)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--deep)}
.btn-gold{background:var(--gold);color:var(--deep)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ============================================================
   HEADER
   ============================================================ */

#siteHeader{
  position:fixed;
  inset:0 0 auto;
  z-index:1500;
  padding:12px 0;
  background:rgba(0,59,92,.97);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  transition:.25s var(--ease);
}
#siteHeader.scrolled{
  padding:7px 0;
  background:rgba(0,38,59,.99);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.nav-wrap{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:20px;
}
.brand{
  width:182px;
  flex:0 0 auto;
}
.brand img{
  width:100%;
  max-height:62px;
  object-fit:contain;
}
.desktop-nav{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(11px,1.05vw,20px);
}
.desktop-nav a{
  position:relative;
  padding:9px 0;
  color:rgba(255,255,255,.82);
  font-family:var(--head);
  font-size:12.7px;
  font-weight:600;
  white-space:nowrap;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:.2s ease;
}
.desktop-nav a:hover,
.desktop-nav a.active{color:#fff}
.desktop-nav a:hover::after,
.desktop-nav a.active::after{transform:scaleX(1)}

.header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.menu-button{
  width:46px;
  height:46px;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:9px;
  background:transparent;
  cursor:pointer;
}
.menu-button span{
  width:21px;
  height:2px;
  border-radius:99px;
  background:#fff;
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu{
  position:fixed;
  top:0;right:0;
  z-index:1700;
  width:min(390px,88vw);
  height:100dvh;
  padding:22px;
  overflow:auto;
  background:var(--deep);
  box-shadow:-25px 0 60px rgba(0,0,0,.3);
  transform:translateX(105%);
  visibility:hidden;
  transition:.34s var(--ease);
}
.mobile-menu.open{
  transform:translateX(0);
  visibility:visible;
}
.mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-menu-head img{width:155px}
.mobile-close{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.mobile-links{
  display:flex;
  flex-direction:column;
  padding:18px 0;
}
.mobile-links a{
  padding:13px 2px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  font-family:var(--head);
  font-size:15px;
  font-weight:600;
}
.mobile-links a:hover{color:var(--teal-light)}
.mobile-cta{width:100%;margin-top:12px}

.menu-backdrop{
  position:fixed;
  inset:0;
  z-index:1600;
  background:rgba(0,19,29,.62);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
}
.menu-backdrop.show{
  opacity:1;
  visibility:visible;
}

/* ============================================================
   HERO
   ============================================================ */

.services-hero{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:flex-end;
  padding:185px 0 78px;
  overflow:hidden;
  color:#fff;
  background:url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,38,59,.97),rgba(0,38,59,.87) 48%,rgba(0,38,59,.55));
}
.hero-grid{
  position:absolute;
  inset:0;
  opacity:.36;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:64px 64px;
}
.hero-content{position:relative;z-index:2}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:24px;
  color:rgba(255,255,255,.64);
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.breadcrumb a{color:#fff}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--teal-light);
  font:700 11.5px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--gold);
}
.eyebrow.dark{color:var(--teal)}

.services-hero h1{
  max-width:1030px;
  margin-top:17px;
  font:800 clamp(42px,5.2vw,76px)/1.04 var(--head);
  letter-spacing:-.035em;
}
.services-hero p{
  max-width:840px;
  margin-top:24px;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.75;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.hero-stats{
  max-width:940px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:52px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  background:rgba(0,38,59,.48);
  backdrop-filter:blur(10px);
}
.hero-stats div{
  padding:20px 24px;
  border-right:1px solid rgba(255,255,255,.12);
}
.hero-stats div:last-child{border-right:0}
.hero-stats b{
  display:block;
  color:#fff;
  font:700 26px var(--head);
}
.hero-stats span{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.66);
  font-size:12px;
}

/* ============================================================
   SECTION HEAD
   ============================================================ */

.section{padding:90px 0}
.categories-section{background:#fff}
.services-browser{background:var(--bg)}

.section-head{
  max-width:840px;
  margin-bottom:42px;
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{
  margin-top:11px;
  color:var(--navy);
  font:750 clamp(31px,3.4vw,48px)/1.14 var(--head);
  letter-spacing:-.025em;
}
.section-head p{
  margin-top:12px;
  color:var(--soft);
  font-size:15.5px;
}
.section-head.light h2{color:#fff}
.section-head.light p{color:rgba(255,255,255,.7)}

/* ============================================================
   TOP CATEGORY GRID
   ============================================================ */

.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.category-card{
  position:relative;
  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:26px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#F7FAFB);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:.3s var(--ease);
}
.category-card:hover{
  transform:translateY(-7px);
  border-color:rgba(0,163,163,.32);
  box-shadow:var(--shadow-md);
}
.category-no{
  position:absolute;
  top:22px;right:22px;
  color:#A6B3BC;
  font:12px var(--mono);
}
.category-icon{
  width:56px;height:56px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,var(--navy),var(--teal));
}
.category-icon svg{width:27px;height:27px}
.category-card h3{
  color:var(--navy);
  font:650 18px/1.35 var(--head);
}
.category-card p{
  margin-top:10px;
  color:var(--soft);
  font-size:13.5px;
  line-height:1.65;
}
.category-count{
  margin-top:auto;
  padding-top:20px;
  color:var(--teal);
  font-size:12px;
  font-weight:800;
}

/* ============================================================
   TOOLBAR
   ============================================================ */

.toolbar{
  position:sticky;
  top:88px;
  z-index:50;
  margin-bottom:20px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px);
}
.filter-scroll{
  display:flex;
  gap:8px;
  padding-bottom:12px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.filter-btn{
  flex:0 0 auto;
  min-height:38px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--soft);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}
.filter-btn:hover,
.filter-btn.active{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}
.search-box{
  min-height:50px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.search-box svg{
  width:20px;height:20px;
  flex:0 0 auto;
  color:#83929D;
}
.search-box input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:14px;
}
.search-box input::placeholder{color:#98A5AE}
.results-line{
  margin-top:9px;
  text-align:right;
  color:var(--soft);
  font-size:12px;
  font-weight:700;
}

/* ============================================================
   CATEGORY DEEP ROWS
   ============================================================ */

.category-row{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:64px;
  align-items:start;
  padding:76px 0;
  border-bottom:1px solid var(--line);
}
.category-row.reverse .category-visual{order:2}
.category-row.reverse .category-content{order:1}

.category-visual{
  position:sticky;
  top:170px;
  overflow:hidden;
  border-radius:20px;
  box-shadow:var(--shadow-md);
}
.category-visual img{
  width:100%;
  height:520px;
  object-fit:cover;
}
.category-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,38,59,.22));
  pointer-events:none;
}
.image-label{
  position:absolute;
  top:20px;left:20px;
  z-index:2;
  padding:10px 14px;
  border-radius:999px;
  color:var(--gold);
  background:rgba(0,38,59,.92);
  font:11px var(--mono);
  letter-spacing:.08em;
}
.category-kicker{
  display:block;
  margin-bottom:12px;
  color:var(--teal);
  font:700 11px var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.category-main-icon{
  width:62px;height:62px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,var(--navy),var(--teal));
  box-shadow:0 13px 28px rgba(0,163,163,.18);
}
.category-main-icon svg{width:29px;height:29px}
.category-content h2{
  color:var(--navy);
  font:750 clamp(30px,3.1vw,45px)/1.14 var(--head);
  letter-spacing:-.025em;
}
.category-description{
  max-width:780px;
  margin-top:16px;
  color:var(--soft);
  font-size:15.5px;
  line-height:1.8;
}
.approved-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:30px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.approved-title span{
  color:var(--navy);
  font-family:var(--head);
  font-size:14px;
  font-weight:700;
}
.approved-title b{
  color:var(--teal);
  font:700 13px var(--mono);
}
.subservice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.subservice-item{
  min-height:64px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  transition:.2s ease;
}
.subservice-item:hover{
  transform:translateY(-2px);
  border-color:rgba(0,163,163,.32);
  box-shadow:var(--shadow-sm);
}
.subservice-index{
  color:#93A2AD;
  font:10px var(--mono);
}
.subservice-name{
  color:var(--text);
  font-size:12.5px;
  font-weight:650;
  line-height:1.4;
}
.subservice-arrow{
  color:var(--teal);
  font-size:18px;
}
.category-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

/* ============================================================
   EMPTY
   ============================================================ */

.empty-state{
  padding:70px 28px;
  text-align:center;
  border:1px dashed #B9C8D1;
  border-radius:16px;
  background:#fff;
}
.empty-state h3{
  color:var(--navy);
  font:700 24px var(--head);
}
.empty-state p{margin-top:7px;color:var(--soft)}

/* ============================================================
   PROCESS
   ============================================================ */

.process-section{
  padding:92px 0;
  color:#fff;
  background:
    radial-gradient(circle at top right,rgba(0,163,163,.2),transparent 36%),
    linear-gradient(135deg,var(--deep),#001925);
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
}
.process-card{
  min-height:245px;
  padding:28px 24px;
  border-right:1px solid rgba(255,255,255,.1);
  background:rgba(0,38,59,.45);
}
.process-card:last-child{border-right:0}
.process-card b{
  color:var(--gold);
  font:12px var(--mono);
}
.process-card h3{
  margin-top:23px;
  color:#fff;
  font:600 17px var(--head);
}
.process-card p{
  margin-top:10px;
  color:rgba(255,255,255,.68);
  font-size:13.5px;
}

/* ============================================================
   CTA
   ============================================================ */

.cta-section{
  padding:80px 0;
  color:#fff;
  background:linear-gradient(135deg,var(--teal-dark),var(--navy));
}
.cta-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}
.cta-wrap h2{
  max-width:850px;
  margin-top:10px;
  font:700 clamp(29px,3.5vw,46px)/1.14 var(--head);
}
.cta-wrap p{
  max-width:730px;
  margin-top:12px;
  color:rgba(255,255,255,.76);
}
.cta-actions{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:11px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  padding:65px 0 25px;
  color:rgba(255,255,255,.7);
  background:var(--black);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.55fr repeat(4,1fr);
  gap:36px;
}
.footer-logo{display:block;width:185px}
.footer-logo img{width:100%}
.footer-brand p{
  max-width:430px;
  margin-top:18px;
  color:rgba(255,255,255,.63);
  font-size:13.5px;
}
.footer-column{
  display:flex;
  flex-direction:column;
}
.footer-column h3{
  margin-bottom:13px;
  color:#fff;
  font:600 14.5px var(--head);
}
.footer-column a{
  padding:5px 0;
  color:rgba(255,255,255,.64);
  font-size:12.7px;
}
.footer-column a:hover{color:var(--teal-light)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;
}

/* ============================================================
   FLOATING
   ============================================================ */

.whatsapp{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:700;
  width:60px;height:60px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#20D466;
  box-shadow:0 15px 38px rgba(32,212,102,.35);
}
.whatsapp svg{width:31px;height:31px;fill:currentColor}

.back-top{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:700;
  width:50px;height:50px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:var(--navy);
  box-shadow:var(--shadow-md);
  font-size:21px;
  opacity:0;
  visibility:hidden;
  cursor:pointer;
  transition:.25s ease;
}
.back-top.show{opacity:1;visibility:visible}

/* ============================================================
   REVEAL
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.reveal.visible{opacity:1;transform:none}

/* ============================================================
   WIDE DESKTOP
   ============================================================ */

@media(min-width:1600px){
  :root{--container:1580px}
  .brand{width:195px}
  .category-grid{grid-template-columns:repeat(4,1fr)}
  .category-row{gap:78px}
  .category-visual img{height:560px}
}

/* ============================================================
   LAPTOP
   ============================================================ */

@media(max-width:1360px){
  :root{--container:1320px}
  .desktop-nav{gap:10px}
  .desktop-nav a{font-size:12px}
  .header-actions .btn{padding-inline:15px}
  .category-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1220px){
  .container{width:min(var(--container),calc(100% - 44px))}
  .desktop-nav{display:none}
  .header-quote{display:none}
  .menu-button{display:flex}
  .header-actions{margin-left:auto}
  .brand{width:170px}

  .category-row,
  .category-row.reverse{
    grid-template-columns:1fr;
    gap:34px;
    padding:62px 0;
  }
  .category-row.reverse .category-visual,
  .category-row.reverse .category-content{order:initial}
  .category-visual{
    position:relative;
    top:auto;
  }
  .category-visual img{height:450px}

  .process-grid{grid-template-columns:repeat(3,1fr)}
  .process-card{border-bottom:1px solid rgba(255,255,255,.1)}
}

/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){
  .services-hero{
    min-height:670px;
    padding-top:155px;
  }
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .toolbar{top:82px}
  .subservice-grid{grid-template-columns:1fr}
  .cta-wrap{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
  .container{width:min(100% - 32px,var(--container))}
  #siteHeader{padding:9px 0}
  .nav-wrap{min-height:58px}
  .brand{width:150px}
  .header-contact{
    min-height:43px;
    padding:9px 14px;
    font-size:12px;
  }
  .menu-button{width:43px;height:43px}
  .services-hero{
    min-height:645px;
    padding:132px 0 58px;
  }
  .services-hero h1{font-size:clamp(37px,8vw,58px)}
  .services-hero p{font-size:15px}
  .hero-stats{grid-template-columns:1fr;margin-top:38px}
  .hero-stats div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:13px 17px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .hero-stats div:last-child{border-bottom:0}
  .hero-stats b{font-size:21px}
  .section{padding:68px 0}
  .section-head{margin-bottom:30px}
  .category-card{min-height:270px}
  .toolbar{position:static}
  .category-visual img{height:370px}
  .process-grid{grid-template-columns:1fr}
  .process-card{
    min-height:0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .process-card:last-child{border-bottom:0}
}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:640px){
  .container{width:min(100% - 24px,var(--container))}
  .brand{width:138px}
  .header-contact{display:none}

  .services-hero{
    min-height:625px;
    padding-top:123px;
  }
  .breadcrumb{font-size:10px;margin-bottom:18px}
  .services-hero h1{font-size:37px;line-height:1.07}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}

  .category-grid{grid-template-columns:1fr}
  .category-card{min-height:235px}

  .filter-scroll{
    margin-inline:-15px;
    padding-inline:15px;
  }

  .category-row{padding:46px 0}
  .category-visual{border-radius:14px}
  .category-visual img{height:285px}
  .image-label{
    top:13px;left:13px;
    padding:8px 11px;
    font-size:9.5px;
  }
  .category-main-icon{
    width:54px;height:54px;
    margin-bottom:17px;
  }
  .category-content h2{font-size:29px}
  .category-description{font-size:14px}
  .subservice-item{
    min-height:60px;
    padding:11px 12px;
  }
  .subservice-name{font-size:12px}
  .category-actions{flex-direction:column}
  .category-actions .btn{width:100%}

  .process-section{padding:68px 0}
  .cta-section{padding:62px 0}
  .cta-actions{
    width:100%;
    flex-direction:column;
  }
  .cta-actions .btn{width:100%}

  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .whatsapp{
    right:15px;bottom:15px;
    width:55px;height:55px;
  }
  .back-top{
    left:15px;bottom:15px;
    width:46px;height:46px;
  }
}

@media(max-width:480px){
  .mobile-menu{width:100%}
  .brand{width:126px}
  .services-hero h1{font-size:33px}
  .section-head h2{font-size:30px}
  .category-visual img{height:245px}
  .category-content h2{font-size:27px}
}

@media(max-width:390px){
  .container{width:min(100% - 20px,var(--container))}
  .brand{width:116px}
  .menu-button{width:41px;height:41px}
  .services-hero h1{font-size:30px}
  .services-hero p{font-size:14px}
  .category-card{padding:21px}
  .category-visual img{height:220px}
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */

@media(max-height:520px) and (orientation:landscape){
  .mobile-links{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 18px;
  }
  .mobile-links a{padding:9px 0}
  .services-hero{min-height:760px}
}

/* ============================================================
   TOUCH / REDUCED MOTION
   ============================================================ */

@media(hover:none){
  .category-card:hover,
  .btn:hover,
  .subservice-item:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   PRINT
   ============================================================ */

@media print{
  #siteHeader,
  .mobile-menu,
  .menu-backdrop,
  .toolbar,
  .whatsapp,
  .back-top,
  .cta-section,
  .site-footer{display:none!important}

  .services-hero{
    min-height:0;
    padding:25px 0;
    color:#000;
    background:none;
  }
  .hero-overlay,.hero-grid{display:none}
  .category-row{
    break-inside:avoid;
    grid-template-columns:1fr 1fr;
    min-height:0;
    padding:25px 0;
  }
  .category-visual{
    position:relative;
    top:auto;
  }
  .category-visual img{height:260px}
  .reveal{opacity:1!important;transform:none!important}
}


/* ============================================================
   INDIVIDUAL SERVICE DETAIL PAGES
   /services/<service-slug>/index.html
   ============================================================ */

.detail-hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:flex-end;
  padding:175px 0 72px;
  overflow:hidden;
  color:#fff;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,38,59,.97) 0%,
      rgba(0,38,59,.88) 50%,
      rgba(0,38,59,.55) 100%
    );
}

.detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:64px 64px;
}

.detail-hero .container{
  position:relative;
  z-index:2;
}

.detail-category{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
  color:var(--teal-light);
  font:700 11.5px var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}

.detail-category::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--gold);
}

.detail-hero h1{
  max-width:980px;
  color:#fff;
  font:800 clamp(40px,5vw,72px)/1.05 var(--head);
  letter-spacing:-.035em;
}

.detail-hero p{
  max-width:820px;
  margin-top:22px;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.75;
}

.detail-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.detail-section{
  padding:86px 0;
}

.detail-section.white{
  background:#fff;
}

.detail-overview{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:62px;
  align-items:center;
}

.detail-media{
  overflow:hidden;
  border-radius:20px;
  box-shadow:var(--shadow-md);
}

.detail-media img{
  width:100%;
  height:470px;
  object-fit:cover;
}

.detail-copy .section-head{
  margin-bottom:20px;
}

.detail-copy > p{
  margin-top:15px;
  color:var(--soft);
  font-size:15.5px;
  line-height:1.85;
}

.detail-note{
  margin-top:24px;
  padding:18px 20px;
  border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0;
  background:rgba(0,163,163,.07);
  color:var(--text);
  font-size:13.5px;
}

.detail-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.detail-info-card{
  min-height:210px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.detail-info-card b{
  display:block;
  color:var(--teal);
  font:700 11px var(--mono);
  letter-spacing:.08em;
}

.detail-info-card h3{
  margin-top:13px;
  color:var(--navy);
  font:650 16px/1.4 var(--head);
}

.detail-info-card p{
  margin-top:9px;
  color:var(--soft);
  font-size:13.5px;
}

.related-services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.related-service-card{
  min-height:210px;
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:.25s var(--ease);
}

.related-service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,163,163,.30);
  box-shadow:var(--shadow-md);
}

.related-service-card span{
  color:#96A4AE;
  font:10px var(--mono);
}

.related-service-card h3{
  margin-top:12px;
  color:var(--navy);
  font:650 17px/1.4 var(--head);
}

.related-service-card p{
  margin-top:9px;
  color:var(--soft);
  font-size:13px;
}

.related-service-card strong{
  margin-top:auto;
  padding-top:18px;
  color:var(--teal);
  font-size:12.5px;
}

.detail-contact-band{
  padding:78px 0;
  color:#fff;
  background:linear-gradient(135deg,var(--teal-dark),var(--navy));
}

.detail-contact-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
}

.detail-contact-wrap h2{
  max-width:820px;
  font:700 clamp(29px,3.4vw,45px)/1.14 var(--head);
}

.detail-contact-wrap p{
  max-width:700px;
  margin-top:11px;
  color:rgba(255,255,255,.76);
}

.detail-contact-actions{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:11px;
}

@media(max-width:1100px){
  .detail-overview{
    grid-template-columns:1fr;
    gap:34px;
  }

  .detail-media img{
    height:430px;
  }

  .detail-info-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .related-services{
    grid-template-columns:repeat(2,1fr);
  }

  .detail-contact-wrap{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:768px){
  .detail-hero{
    min-height:600px;
    padding:135px 0 58px;
  }

  .detail-hero h1{
    font-size:clamp(36px,8vw,55px);
  }

  .detail-hero p{
    font-size:15px;
  }

  .detail-section{
    padding:66px 0;
  }

  .detail-media img{
    height:350px;
  }

  .related-services{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .detail-hero{
    min-height:580px;
  }

  .detail-hero h1{
    font-size:34px;
  }

  .detail-hero-actions{
    flex-direction:column;
  }

  .detail-hero-actions .btn{
    width:100%;
  }

  .detail-media img{
    height:270px;
  }

  .detail-info-grid{
    grid-template-columns:1fr;
  }

  .detail-contact-actions{
    width:100%;
    flex-direction:column;
  }

  .detail-contact-actions .btn{
    width:100%;
  }
}



/* ============================================================
   CONTENT MASTER V3 — INDIVIDUAL SERVICE PAGE CONTENT SECTIONS
   ============================================================ */

.service-master-intro{
  padding:84px 0;
  background:#fff;
}

.service-master-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:60px;
  align-items:center;
}

.service-master-image{
  overflow:hidden;
  border-radius:20px;
  box-shadow:var(--shadow-md);
}

.service-master-image img{
  width:100%;
  height:480px;
  object-fit:cover;
}

.service-master-copy h2{
  margin-top:12px;
  color:var(--navy);
  font:750 clamp(31px,3.4vw,46px)/1.14 var(--head);
  letter-spacing:-.025em;
}

.service-master-copy p{
  margin-top:18px;
  color:var(--soft);
  font-size:15.5px;
  line-height:1.9;
}

.master-category-section{
  padding:86px 0;
  background:var(--bg);
}

.master-category-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:54px;
  align-items:start;
}

.master-category-overview{
  padding:32px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.master-category-overview h2{
  margin-top:10px;
  color:var(--navy);
  font:750 clamp(29px,3vw,42px)/1.15 var(--head);
  letter-spacing:-.025em;
}

.master-category-overview > p{
  margin-top:17px;
  color:var(--soft);
  font-size:15px;
  line-height:1.85;
}

.master-side-panel{
  position:sticky;
  top:120px;
  padding:28px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,var(--deep),var(--navy));
  box-shadow:var(--shadow-md);
}

.master-side-panel h3{
  color:#fff;
  font:650 19px var(--head);
}

.master-side-panel p{
  margin-top:12px;
  color:rgba(255,255,255,.74);
  font-size:13.5px;
  line-height:1.75;
}

.master-side-panel .side-label{
  display:block;
  margin-top:22px;
  margin-bottom:6px;
  color:var(--gold);
  font:700 10.5px var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}

.challenge-list{
  display:grid;
  gap:12px;
  margin-top:26px;
}

.challenge-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  padding:16px 17px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.challenge-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--teal);
  font-size:11px;
  font-weight:800;
}

.challenge-item p{
  color:var(--text);
  font-size:13.5px;
  line-height:1.65;
}

.master-delivery-section{
  padding:86px 0;
  background:#fff;
}

.master-delivery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.master-content-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.master-content-card.wide{
  grid-column:1 / -1;
}

.master-content-card .card-number{
  color:var(--teal);
  font:700 11px var(--mono);
}

.master-content-card h3{
  margin-top:10px;
  color:var(--navy);
  font:650 19px/1.35 var(--head);
}

.master-content-card p{
  margin-top:12px;
  color:var(--soft);
  font-size:14px;
  line-height:1.8;
}

.master-value-section{
  padding:86px 0;
  background:var(--surface-alt);
}

.master-value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.master-value-card{
  min-height:260px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.master-value-card b{
  color:var(--teal);
  font:700 11px var(--mono);
}

.master-value-card h3{
  margin-top:14px;
  color:var(--navy);
  font:650 18px/1.35 var(--head);
}

.master-value-card p{
  margin-top:11px;
  color:var(--soft);
  font-size:13.5px;
  line-height:1.75;
}

.approved-source-note{
  margin-top:24px;
  padding:17px 19px;
  border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0;
  background:#FFF9E7;
  color:#5C4A13;
  font-size:12.5px;
  line-height:1.65;
}

.master-related-section{
  padding:86px 0;
  background:#fff;
}

@media(max-width:1100px){
  .service-master-grid,
  .master-category-layout{
    grid-template-columns:1fr;
  }

  .master-side-panel{
    position:relative;
    top:auto;
  }

  .master-value-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .service-master-intro,
  .master-category-section,
  .master-delivery-section,
  .master-value-section,
  .master-related-section{
    padding:64px 0;
  }

  .service-master-image img{
    height:360px;
  }

  .master-delivery-grid,
  .master-value-grid{
    grid-template-columns:1fr;
  }

  .master-content-card.wide{
    grid-column:auto;
  }
}

@media(max-width:640px){
  .service-master-image img{
    height:270px;
  }

  .master-category-overview,
  .master-side-panel,
  .master-content-card,
  .master-value-card{
    padding:22px;
  }

  .service-master-copy h2,
  .master-category-overview h2{
    font-size:28px;
  }
}

/* ============================================================
   SERVICES — HOME PAGE HEADER MATCH V6
   Desktop navigation matches the Home page method.
   Only header/navigation presentation is changed.
   ============================================================ */

#siteHeader{
  padding:14px 0;
}

#siteHeader.scrolled{
  padding:9px 0;
}

#siteHeader .container{
  width:min(1820px, calc(100% - 64px));
}

#siteHeader .nav-wrap{
  min-height:76px;
  gap:28px;
}

#siteHeader .brand{
  width:230px;
  flex:0 0 auto;
}

#siteHeader .brand img{
  width:100%;
  max-height:78px;
  object-fit:contain;
}

#siteHeader .desktop-nav{
  flex:1;
  justify-content:center;
  gap:clamp(18px,1.35vw,29px);
}

#siteHeader .desktop-nav a{
  padding:12px 0 10px;
  font-size:14px;
  font-weight:600;
}

#siteHeader .desktop-nav a.active::after{
  height:3px;
}

#siteHeader .header-actions{
  margin-left:10px;
}

#siteHeader .header-contact{
  min-width:132px;
  min-height:54px;
  padding:13px 22px;
  font-size:14px;
}


/* Keep desktop header until there is no safe room. */
@media(max-width:1480px){

  #siteHeader .nav-wrap{
    gap:20px;
  }

  #siteHeader .brand{
    width:205px;
  }

  #siteHeader .desktop-nav{
    gap:14px;
  }

  #siteHeader .desktop-nav a{
    font-size:12.5px;
  }

  #siteHeader .header-contact{
    min-width:118px;
    padding-inline:17px;
  }

}


/* Switch to existing mobile drawer. */
@media(max-width:1260px){

  #siteHeader .desktop-nav{
    display:none;
  }

  #siteHeader .menu-button{
    display:flex;
  }

  #siteHeader .header-actions{
    margin-left:auto;
  }

  #siteHeader .brand{
    width:178px;
  }

}


/* Mobile drawer active state. */
.mobile-links a.active{
  color:var(--teal-light);
}


/* Phone header. */
@media(max-width:640px){

  #siteHeader,
  #siteHeader.scrolled{
    padding:7px 0;
  }

  #siteHeader .container{
    width:min(100% - 28px, var(--container));
  }

  #siteHeader .nav-wrap{
    min-height:58px;
    gap:12px;
  }

  #siteHeader .brand{
    width:138px;
  }

  #siteHeader .header-contact{
    display:none;
  }

  #siteHeader .menu-button{
    width:44px;
    height:44px;
  }

}

/* ============================================================
   SERVICES — INDEX/HOME FOOTER MATCH V8
   Used on services.html + all 187 individual service pages.
   ============================================================ */

.index-site-footer{
  padding:80px 0 0 !important;
  color:rgba(255,255,255,.70) !important;
  background:#00202F !important;
}

.index-site-footer .footer-top-note{
  width:fit-content;

  display:flex;
  align-items:center;

  gap:10px;

  margin:0 auto 56px;
  padding:10px 20px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;

  color:rgba(255,255,255,.72);

  background:rgba(255,255,255,.04);

  font-size:13px;
}

.index-site-footer .footer-top-note svg{
  width:15px;
  height:15px;

  flex:0 0 auto;

  color:var(--gold);
}

.index-site-footer .footer-top-note a{
  color:var(--teal-light);
  font-weight:600;
}

.index-site-footer .footer-grid{
  display:grid !important;

  grid-template-columns:
    minmax(220px,1.3fr)
    minmax(230px,1.45fr)
    minmax(150px,.85fr)
    minmax(180px,1fr)
    minmax(180px,1fr) !important;

  gap:34px !important;

  padding-bottom:56px !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;
}

.index-site-footer .footer-brand{
  display:block !important;
}

.index-site-footer .footer-brand-logo{
  display:block;

  width:235px;
  max-width:100%;
}

.index-site-footer .footer-brand-logo img{
  width:100%;
  height:auto;

  display:block;

  object-fit:contain;
}

.index-site-footer .footer-brand p{
  max-width:280px !important;

  margin:18px 0 22px !important;

  color:rgba(255,255,255,.68) !important;

  font-size:13.5px !important;
  line-height:1.75 !important;
}

.index-site-footer .footer-social{
  display:flex;

  gap:10px;
}

.index-site-footer .footer-social a{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px;

  color:#FFFFFF;

  background:rgba(255,255,255,.06);

  transition:
    background .25s ease,
    transform .25s ease;
}

.index-site-footer .footer-social a:hover{
  background:var(--teal);
  transform:translateY(-2px);
}

.index-site-footer .footer-social svg{
  width:16px;
  height:16px;

  color:#FFFFFF;
}

.index-site-footer .footer-col{
  display:block !important;
}

.index-site-footer .footer-col h5{
  margin-bottom:20px;

  color:#FFFFFF;

  font-family:var(--head);
  font-size:14px;
  font-weight:600;

  letter-spacing:.02em;
}

.index-site-footer .footer-col ul{
  margin:0;
  padding:0;

  list-style:none;
}

.index-site-footer .footer-col ul li{
  margin-bottom:11px;
}

.index-site-footer .footer-col ul li a{
  display:inline;

  padding:0 !important;

  color:rgba(255,255,255,.62);

  font-size:13.1px;
  line-height:1.48;

  transition:color .2s ease;
}

.index-site-footer .footer-col ul li a:hover{
  color:var(--teal-light);
}

.index-site-footer .footer-services-all ul li{
  margin-bottom:9px;
}

.index-site-footer .footer-services-all ul li a{
  font-size:12.4px;
}

.index-site-footer .footer-all-services-link{
  margin-top:16px;
}

.index-site-footer .footer-all-services-link a{
  color:var(--teal-light) !important;

  font-weight:700;
}

.index-site-footer .footer-bottom{
  display:flex !important;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:26px 0 !important;

  border-top:0 !important;

  color:rgba(255,255,255,.45) !important;

  font-size:12.5px !important;
}

.index-site-footer .footer-bottom .legal{
  display:flex;

  gap:22px;
}

.index-site-footer .footer-bottom a{
  color:rgba(255,255,255,.48);
}

.index-site-footer .footer-bottom a:hover{
  color:var(--teal-light);
}


/* Match index floating WhatsApp / back-to-top controls. */

.whatsapp-float{
  position:fixed;

  right:26px;
  bottom:26px;

  z-index:900;

  width:60px;
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#FFFFFF;
  background:#25D366;

  box-shadow:
    0 10px 26px rgba(37,211,102,.45);
}

.whatsapp-float svg{
  width:28px;
  height:28px;

  fill:#FFFFFF;
}

.to-top{
  position:fixed;

  left:26px;
  bottom:26px;

  z-index:900;

  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:50%;

  color:#FFFFFF;
  background:var(--navy);

  box-shadow:var(--shadow-md);

  opacity:0;
  visibility:hidden;

  cursor:pointer;

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease;
}

.to-top.show{
  opacity:1;
  visibility:visible;
}

.to-top:hover{
  transform:translateY(-2px);
}

.to-top svg{
  width:18px;
  height:18px;

  color:#FFFFFF;
}


/* ============================================================
   INDEX FOOTER RESPONSIVE
   ============================================================ */

@media(max-width:1250px){

  .index-site-footer .footer-grid{
    grid-template-columns:
      1.2fr 1.3fr 1fr !important;
  }

}


@media(max-width:850px){

  .index-site-footer{
    padding-top:60px !important;
  }

  .index-site-footer .footer-top-note{
    margin-bottom:40px;

    text-align:center;
  }

  .index-site-footer .footer-grid{
    grid-template-columns:
      1fr 1fr !important;

    gap:34px 28px !important;
  }

  .index-site-footer .footer-brand-logo{
    width:205px;
  }

}


@media(max-width:560px){

  .index-site-footer{
    padding-top:46px !important;
  }

  .index-site-footer .container{
    width:min(100% - 28px,var(--container));
  }

  .index-site-footer .footer-top-note{
    width:100%;

    justify-content:center;

    margin-bottom:34px;
    padding:10px 14px;

    border-radius:12px;

    font-size:11.5px;
    line-height:1.5;
  }

  .index-site-footer .footer-grid{
    grid-template-columns:1fr !important;

    gap:32px !important;

    padding-bottom:38px !important;
  }

  .index-site-footer .footer-brand-logo{
    width:185px;
  }

  .index-site-footer .footer-brand p{
    max-width:100% !important;
  }

  .index-site-footer .footer-bottom{
    align-items:flex-start !important;
    flex-direction:column;

    gap:14px;
  }

  .index-site-footer .footer-bottom .legal{
    flex-wrap:wrap;

    gap:12px 18px;
  }

  .whatsapp-float{
    right:14px;
    bottom:14px;

    width:54px;
    height:54px;
  }

  .to-top{
    left:14px;
    bottom:14px;

    width:44px;
    height:44px;
  }

}