/* ================================================================
   NUSAIL ENGINEERING CONSULTANCY — Premium Glass Corporate Theme
   Version: 3.0  |  Red & blue glassmorphism, navy typography
   ================================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --c-navy:      #011b58;
  --c-navy-dark: #010e33;
  --c-navy-mid:  #0a2d7a;
  --c-blue:      #1a56db;
  --c-blue-light:#3b82f6;
  --c-red:       #c8001e;
  --c-red-dark:  #9b0016;
  --c-white:     #ffffff;
  --c-bg:        #f7f8fc;
  --c-bg-alt:    #eef0f7;
  --c-text:      #374151;
  --c-muted:     #6b7280;
  --c-border:    #dde1ea;
  --c-shadow:    rgba(1,27,88,0.10);
  --glass-bg:    rgba(255,255,255,0.78);
  --glass-border:rgba(255,255,255,0.55);
  --gradient-brand: linear-gradient(135deg, var(--c-red) 0%, var(--c-blue) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(200,0,30,0.08) 0%, rgba(26,86,219,0.10) 100%);
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --transition:  0.25s ease;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-red); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-red-dark); }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--c-navy);
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── 3. UTILITIES ─────────────────────────────────────────────── */
.container { width:100%; max-width:1200px; margin-inline:auto; padding-inline:1.25rem; }
.container.narrow { max-width: 820px; }
.section { padding-block: 4rem; }
.section--alt { background: var(--c-bg); }
.section-head { text-align:center; margin-bottom:2.5rem; }
.section-head h2 { margin-bottom:0.75rem; }
.section-note { color:var(--c-muted); font-size:0.95rem; max-width:80%; margin:0 auto!important; margin-inline:auto; }
.eyebrow {
  display:inline-block; font-size:0.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--c-red); margin-bottom:0.75rem;
}
.skip-link {
  position:absolute; top:-50px; left:1rem; background:var(--c-navy);
  color:#fff; padding:0.5rem 1rem; border-radius:var(--radius-sm);
  z-index:9999; transition:top var(--transition);
}
.skip-link:focus { top:1rem; }

/* ── 4. BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:0.6rem 1.5rem;
  font-size:0.9rem; font-weight:600;
  border-radius:var(--radius-sm); border:2px solid var(--c-red);
  background:var(--c-red); color:#fff; cursor:pointer;
  text-decoration:none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  white-space:nowrap;
}
.btn:hover { background:var(--c-red-dark); border-color:var(--c-red-dark); color:#fff; transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--c-navy); border-color:var(--c-navy); }
.btn-outline:hover { background:var(--c-navy); border-color:var(--c-navy); color:#fff; }

/* ── 5. HEADER (unified — all pages) ───────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-border);
  box-shadow:0 2px 16px rgba(1,27,88,0.08);
}
.nav-wrap {
  display:flex; align-items:center; justify-content:flex-start;
  gap:0.75rem; min-height:68px; padding-block:0.45rem;
  flex-wrap:nowrap;
}
.brand { display:flex; align-items:center; text-decoration:none; flex:0 0 auto; max-width:200px; }
.brand-logo { width:auto; height:48px; max-width:200px; max-height:48px; object-fit:contain; object-position:left center; }
.brand-text { display:none !important; }
.site-nav {
  display:flex; align-items:center; justify-content:flex-end;
  gap:0.05rem; flex:1 1 auto; flex-wrap:nowrap; min-width:0;
  margin-left:auto;
}
.nav-link {
  font-size:0.72rem; font-weight:700; color:var(--c-navy);
  text-transform:uppercase; letter-spacing:0.06em;
  padding:0.45rem 0.5rem; border-radius:var(--radius-sm);
  text-decoration:none; white-space:nowrap;
  transition:color var(--transition), background var(--transition);
}
.nav-link:hover, .nav-link[aria-current="page"] { color:var(--c-red); background:rgba(200,0,30,0.06); }
.btn-nav-cta {
  flex-shrink:0; margin-left:0.35rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  padding:0.5rem 1rem; border-radius:6px; border:none;
  background:linear-gradient(90deg, var(--c-red) 0%, var(--c-blue) 100%);
  color:#fff; white-space:nowrap;
  box-shadow:0 4px 14px rgba(200,0,30,0.22);
}
.btn-nav-cta:hover { filter:brightness(1.08); transform:translateY(-1px); color:#fff; }
.menu-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border:none; background:none; cursor:pointer;
  padding:6px; border-radius:var(--radius-sm); flex-shrink:0;
}
.menu-toggle span { display:block; width:100%; height:2px; background:var(--c-navy); border-radius:2px; transition:transform var(--transition), opacity var(--transition); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── 6. HOME HERO ─────────────────────────────────────────────── */
.hero--media {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy-mid) 55%, var(--c-navy) 100%);
  min-height:clamp(480px, 72vh, 720px); display:flex; align-items:stretch;
}
.hero--media::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg, rgba(1,14,51,0.9) 0%, rgba(1,27,88,0.78) 42%, rgba(26,86,219,0.42) 100%);
  pointer-events:none;
}
.hero-bg-image {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 35%; opacity:0.4; z-index:0;
}
.hero-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:2.5rem; align-items:center; padding-block:3rem;
}
.hero-copy { color:#fff; }
.hero-copy .eyebrow { color:rgba(255,220,225,0.95); font-weight:600; }
.hero-copy h1 { color:#fff; font-size:clamp(1.75rem, 3.5vw, 2.6rem); margin-bottom:0.6rem; text-shadow:0 2px 18px rgba(0,0,0,0.45); }
.hero-sub { color:rgba(255,255,255,0.95); font-size:clamp(1rem, 2vw, 1.2rem); font-weight:500; margin-bottom:1rem; text-shadow:0 1px 10px rgba(0,0,0,0.35); }
.hero-lead { color:rgba(255,255,255,0.9); font-size:0.95rem; line-height:1.7; margin-bottom:1.5rem; max-width:520px; }
.hero-copy .btn-outline { border-color:rgba(255,255,255,0.65); color:#fff; }
.hero-copy .btn-outline:hover { background:rgba(255,255,255,0.15); color:#fff; border-color:#fff; }
.hero-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:0.5rem; }
.hero-tilt-perspective { perspective:1200px; }
.hero-panel {
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,248,252,0.96) 100%);
  border:1px solid rgba(1,27,88,0.12);
  box-shadow:0 20px 48px rgba(0,0,0,0.28);
  padding:0;
}
.hero-panel--services { max-height:none; }
.hero-slideshow { position:relative; }
.hero-slide { display:none; position:relative; }
.hero-slide.is-active { display:block; }
.hero-slide-media { display:block; overflow:hidden; }
.hero-slide-media img {
  width:100%; height:200px; object-fit:cover; display:block;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.hero-slide-body {
  background:linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
  padding:0 0 0.85rem;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--c-red), var(--c-blue)) 1;
}
.hero-slide-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem; padding:0.75rem 1rem 0.5rem;
  flex-wrap:wrap;
}
.hero-slide-title {
  margin:0; font-size:1rem; font-weight:700; color:var(--c-navy);
  line-height:1.25; flex:1 1 auto; min-width:0;
}
.hero-slide-cta {
  flex-shrink:0; font-size:0.72rem; color:#fff; font-weight:700;
  text-decoration:none; background:linear-gradient(90deg, var(--c-red), var(--c-blue));
  padding:0.45rem 0.9rem; border-radius:6px; white-space:nowrap;
  transition:filter var(--transition), transform var(--transition);
  box-shadow:0 4px 12px rgba(200,0,30,0.22);
}
.hero-slide-cta:hover { filter:brightness(1.08); color:#fff; transform:translateY(-1px); }
.hero-slide-services {
  margin:0; padding:0.35rem 1rem 0.25rem;
  display:grid; grid-template-columns:1fr 1fr; gap:0.3rem 0.85rem;
  list-style:none; max-height:168px; overflow-y:auto;
}
.hero-slide-services li {
  font-size:0.76rem; color:#2d3a52; font-weight:500; line-height:1.4;
  padding-left:0.85rem; position:relative;
}
.hero-slide-services li::before {
  content:"›"; position:absolute; left:0; color:var(--c-red); font-weight:700;
}
.hero-slideshow-dots {
  display:flex; flex-wrap:wrap; gap:5px; justify-content:center;
  padding:0.55rem 0.65rem 0.65rem; background:rgba(1,27,88,0.05);
  border-top:1px solid rgba(1,27,88,0.06);
}
.hero-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(1,27,88,0.22); border:none; cursor:pointer;
  transition:background var(--transition), transform var(--transition);
  padding:0;
}
.hero-dot.is-active { background:var(--c-red); transform:scale(1.15); }
.hero-slideshow-nav {
  position:absolute; top:42%; left:0; right:0;
  display:flex; justify-content:space-between; pointer-events:none;
  padding:0 0.35rem; transform:translateY(-50%); z-index:3;
}
.hero-slide-prev, .hero-slide-next {
  pointer-events:auto; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.65); background:rgba(1,27,88,0.55);
  color:#fff; font-size:1.35rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
}
.hero-slide-prev:hover, .hero-slide-next:hover {
  background:rgba(200,0,30,0.85);
}

/* ── 7. PAGE HERO (service pages) ────────────────────────────── */
.page-hero { background:var(--c-navy); overflow:hidden; padding:0; }
.page-hero-inner { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:320px; }
.page-hero-copy {
  padding:2.75rem 2rem 2.75rem 0;
  display:flex; flex-direction:column; justify-content:center;
}
.page-hero-copy .eyebrow { color:rgba(255,255,255,0.65); }
.page-hero-copy h1 { color:#fff; font-size:clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom:0.75rem; }
.page-hero-copy .lead { color:rgba(255,255,255,0.82); font-size:0.97rem; line-height:1.7; margin-bottom:1.25rem; }
.page-hero-copy .hero-actions { margin-top:0; }
.page-hero-copy .btn-outline { border-color:rgba(255,255,255,0.55); color:#fff; }
.page-hero-copy .btn-outline:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.8); }
.page-hero-image { position:relative; overflow:hidden; }
.page-hero-image img { width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }

/* ── 7b. TOP BAR ─────────────────────────────────────────────── */
.site-topbar {
  background:var(--c-navy-dark);
  color:rgba(255,255,255,0.88);
  font-size:0.78rem;
  padding:0.45rem 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-topbar .container {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:0.5rem 1rem;
}
.site-topbar a { color:rgba(255,255,255,0.9); text-decoration:none; font-weight:600; }
.site-topbar a:hover { color:#fff; text-decoration:underline; }
.site-topbar-social { display:flex; gap:0.65rem; align-items:center; }
.site-topbar-social a {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.08); display:inline-flex;
  align-items:center; justify-content:center; font-size:0.7rem;
  font-weight:700; letter-spacing:0.02em;
}
.site-topbar-social a:hover { background:var(--c-red); color:#fff; text-decoration:none; }

/* ── 8. GLASS CARD ───────────────────────────────────────────── */
.glass-card {
  background:var(--glass-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 24px rgba(1,27,88,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
  transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  overflow:hidden;
  position:relative;
}
.glass-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient-brand); opacity:0.85;
}
.glass-card:hover {
  box-shadow:0 10px 32px rgba(1,27,88,0.14);
  transform:translateY(-3px);
  border-color:rgba(26,86,219,0.25);
}

/* ── 9. CARD GRIDS ────────────────────────────────────────────── */
.card-grid { display:grid; gap:1.5rem; }
.services-grid-core { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); align-items:stretch; }
.section--core-services .container,
.section--specialist .container { overflow:visible; }
.specialist-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.5rem; align-items:stretch; }

/* ── 10. SERVICE CARDS ────────────────────────────────────────── */
.service-card { display:flex; flex-direction:column; background:var(--c-white); overflow:visible; min-height:0; }
.service-card-media { overflow:hidden; flex-shrink:0; height:200px; min-height:200px; }
.service-card-media img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.service-card:hover .service-card-media img { transform:scale(1.04); }
.service-card-body { padding:1.25rem 1.25rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.service-card-body h3 { color:var(--c-navy); font-size:1.05rem; margin-bottom:0.5rem; }
.service-card-body p { color:var(--c-text); font-size:0.88rem; line-height:1.6; margin-bottom:0.75rem; }
.service-card-body ul { margin-bottom:1rem; }
.service-card-body ul li { font-size:0.82rem; color:var(--c-muted); padding:0.2rem 0 0.2rem 1rem; position:relative; }
.service-card-body ul li::before { content:"›"; position:absolute; left:0; color:var(--c-red); font-weight:700; }
.service-link { display:inline-block; font-size:0.83rem; font-weight:600; color:var(--c-red); margin-top:auto; padding-top:0.25rem; }
.service-link:hover { color:var(--c-red-dark); text-decoration:underline; }
.specialist-card { display:flex; flex-direction:column; }
.specialist-card-media { height:180px; overflow:hidden; flex-shrink:0; }
.specialist-card-media img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.specialist-card:hover .specialist-card-media img { transform:scale(1.04); }
.specialist-card-body { padding:1.1rem 1.25rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.specialist-card-body h3 { font-size:1rem; color:var(--c-navy); margin-bottom:0.4rem; }
.specialist-card-body p { font-size:0.85rem; color:var(--c-text); margin-bottom:0.6rem; }
.specialist-card-body ul li { font-size:0.8rem; color:var(--c-muted); padding:0.18rem 0 0.18rem 0.9rem; position:relative; }
.specialist-card-body ul li::before { content:"›"; position:absolute; left:0; color:var(--c-red); }
.specialist-card-body .service-link { margin-top:auto; padding-top:0.75rem; }

/* ── 11. ABOUT ────────────────────────────────────────────────── */
#about { background:var(--c-bg); }
#about h2 { margin-bottom:0.75rem; }
#about p { color:var(--c-text); font-size:0.97rem; line-height:1.75; }

/* ── 12. PORTFOLIO ────────────────────────────────────────────── */
.portfolio-section { background:var(--c-bg); }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.filter-btn {
  font-size:0.8rem; font-weight:600; padding:0.35rem 0.9rem;
  border-radius:20px; border:1.5px solid var(--c-border);
  background:var(--c-white); color:var(--c-navy);
  cursor:pointer; transition:all var(--transition);
}
.filter-btn:hover, .filter-btn.is-active { background:var(--c-navy); border-color:var(--c-navy); color:#fff; }
.case-studies-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; }
.case-card { background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; transition:box-shadow var(--transition), transform var(--transition); }
.case-card:hover { box-shadow:0 6px 20px var(--c-shadow); transform:translateY(-3px); }
.case-card img { width:100%; height:250px; object-fit:cover; }
.case-card-body { padding:1rem; }
.case-card-body h3 { font-size:0.95rem; color:var(--c-navy); margin-bottom:0.3rem; }
.case-card-body p { font-size:0.82rem; color:var(--c-muted); margin-bottom:0.5rem; }
.case-card-body a { font-size:0.8rem; font-weight:600; color:var(--c-red); }
.portfolio-intro { font-size:0.95rem; color:var(--c-text); max-width:680px; margin-inline:auto; margin-bottom:0.5rem; }
.portfolio-seo-note { font-size:0.82rem; color:var(--c-muted); max-width:680px; margin-inline:auto; margin-bottom:1.5rem; }

/* ── 13. CLIENTS ──────────────────────────────────────────────── */
#clients { background:var(--c-bg); }
.clients-logo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:1rem; align-items:center; }
.clients-logo-grid img { width:100%; height:52px; object-fit:contain; filter:grayscale(1); opacity:0.6; transition:filter var(--transition), opacity var(--transition); border-radius:4px; }
.clients-logo-grid img:hover { filter:grayscale(0); opacity:1; }
.clients-carousel {
  overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding:0.5rem 0;
}
.clients-carousel-track {
  display:flex; gap:2.5rem; align-items:center;
  width:max-content; animation:clients-scroll 45s linear infinite;
}
.clients-carousel-track img {
  height:48px; width:auto; max-width:120px; object-fit:contain;
  filter:grayscale(1); opacity:0.65; transition:filter var(--transition), opacity var(--transition);
}
.clients-carousel-track img:hover { filter:grayscale(0); opacity:1; }
.clients-carousel:hover .clients-carousel-track { animation-play-state:paused; }
@keyframes clients-scroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ── 14. CERT / WHY CARDS ─────────────────────────────────────── */
.cert-grid, .why-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.25rem; }
.cert-card { background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius); padding:1.25rem; transition:box-shadow var(--transition); }
.cert-card:hover { box-shadow:0 4px 16px var(--c-shadow); }
.card-image { height:120px; background:var(--c-bg); border-radius:var(--radius-sm); margin-bottom:0.75rem; border:1px dashed var(--c-border); }
.cert-card-img { width:100%; height:140px; object-fit:cover; display:block; border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin:-1px -1px 0.75rem; }
.cert-card { padding-bottom:1rem; }
.cert-card h3 { padding:0 1rem 0.5rem; font-size:0.92rem; }
.cert-card h3 { font-size:0.92rem; color:var(--c-navy); }
.why-grid .glass-card { padding:1.5rem; border-top:3px solid var(--c-red); }
.why-grid .glass-card h3 { font-size:1rem; color:var(--c-navy); margin-bottom:0.5rem; }
.why-grid .glass-card p { font-size:0.88rem; color:var(--c-text); }

/* ── 15. CONTACT ──────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:2.5rem; align-items:start; }
.contact-grid h2 { margin-bottom:0.75rem; }
.contact-grid > div > p { color:var(--c-text); font-size:0.95rem; line-height:1.7; margin-bottom:1.25rem; }
.office { padding:1rem 1.25rem; margin-bottom:0.75rem; border-left:3px solid var(--c-red); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--c-bg); overflow:hidden; }
.office h3 { font-size:0.9rem; color:var(--c-navy); margin-bottom:0.2rem; }
.office p { font-size:0.82rem; color:var(--c-muted); margin:0; }
.contact-form { padding:1.75rem; display:flex; flex-direction:column; gap:0.75rem; background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:0 2px 12px var(--c-shadow); }
.contact-form label { font-size:0.82rem; font-weight:600; color:var(--c-navy); display:block; margin-bottom:0.2rem; }
.contact-form input, .contact-form textarea, .contact-form select {
  width:100%; padding:0.55rem 0.85rem; font-size:0.9rem; font-family:var(--font);
  color:var(--c-text); background:var(--c-white); border:1.5px solid var(--c-border);
  border-radius:var(--radius-sm); outline:none; transition:border-color var(--transition), box-shadow var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--c-navy); box-shadow:0 0 0 3px rgba(1,27,88,0.08); }
.contact-form textarea { resize:vertical; min-height:110px; }
.contact-form .btn { align-self:flex-start; margin-top:0.25rem; }
.form-status {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.form-status.is-visible { display: block; }
.form-status.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.form-status.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.contact-details {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:0.75rem; margin-bottom:1.25rem;
}
.contact-detail { padding:1rem 1.15rem; }
.contact-detail h3 { font-size:0.82rem; color:var(--c-navy); margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.05em; }
.contact-detail p { font-size:0.88rem; color:var(--c-text); margin:0; line-height:1.6; }
.contact-detail a { color:var(--c-blue); font-weight:600; }
.contact-detail a:hover { color:var(--c-red); }
.social-links { display:flex; flex-wrap:wrap; gap:0.5rem; }
.social-links a {
  font-size:0.78rem; font-weight:600; padding:0.35rem 0.75rem;
  border-radius:20px; border:1px solid var(--c-border);
  background:var(--c-white); color:var(--c-navy);
}
.social-links a:hover { background:var(--c-navy); color:#fff; border-color:var(--c-navy); text-decoration:none; }

/* ── 16. CONTENT PAGES ────────────────────────────────────────── */
.content-block h2 { font-size:1.3rem; margin-top:2rem; margin-bottom:0.6rem; padding-bottom:0.4rem; border-bottom:2px solid var(--c-bg-alt); }
.content-block h2:first-child { margin-top:0; }
.content-block p { font-size:0.96rem; color:var(--c-text); line-height:1.75; }
.content-block ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }
.content-block ul li { font-size:0.94rem; color:var(--c-text); padding:0.25rem 0; }
.lead { font-size:1.05rem; color:var(--c-text); line-height:1.75; margin-bottom:1.25rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:0.6rem; margin-top:0.5rem; }
.related-grid a { display:block; padding:0.55rem 0.85rem; background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600; color:var(--c-navy); transition:background var(--transition), color var(--transition); }
.related-grid a:hover { background:var(--c-navy); color:#fff; border-color:var(--c-navy); }
.services-core-cta { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

.capability-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1rem; margin:1.5rem 0;
}
.capability-card {
  padding:1.15rem 1.25rem;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  border-left:3px solid var(--c-blue);
  box-shadow:0 2px 10px var(--c-shadow);
  transition:transform var(--transition), box-shadow var(--transition);
}
.capability-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(1,27,88,0.12); border-left-color:var(--c-red); }
.capability-card h3 { font-size:0.95rem; color:var(--c-navy); margin-bottom:0.4rem; }
.capability-card p { font-size:0.85rem; color:var(--c-text); margin:0; line-height:1.6; }

.section--glass-panel { background:var(--gradient-soft); }
.office-region { margin-bottom:2.5rem; }
.office-region h2 {
  font-size:1.25rem; margin-bottom:1rem; padding-bottom:0.5rem;
  border-bottom:2px solid transparent;
  border-image:var(--gradient-brand) 1;
}
.office-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; margin-bottom:1.25rem; }
.office-info-card { padding:1.25rem; text-align:center; }
.office-info-card i, .office-info-card .office-icon {
  display:inline-flex; width:44px; height:44px; border-radius:50%;
  background:var(--gradient-soft); align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:var(--c-navy); margin-bottom:0.75rem;
}
.office-info-card h3 { font-size:0.9rem; margin-bottom:0.35rem; }
.office-info-card p { font-size:0.84rem; color:var(--c-muted); margin:0; line-height:1.55; }
.map-embed {
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--c-border);
  box-shadow:0 4px 20px var(--c-shadow);
  margin-top:0.75rem;
}
.map-embed iframe { display:block; width:100%; min-height:320px; border:0; }

.page-hero--contact { min-height:280px; }
.page-hero--contact .page-hero-inner { min-height:280px; }

.btn { background:var(--gradient-brand); border:none; }
.btn:hover { filter:brightness(1.05); border:none; }
.service-card, .specialist-card { background:var(--glass-bg); backdrop-filter:blur(8px); }
.service-card.glass-card::before,
.specialist-card.glass-card::before,
.hero-panel.glass-card::before,
.cert-card.glass-card::before { display:none; }
.service-card-body, .specialist-card-body { position:relative; z-index:1; }
#services, .section--core-services { background:var(--c-white); }
.section--specialist { background:var(--gradient-soft); }
.hero-panel::before { display:none; }
/* Inner pages: unified header above Bootstrap content */
body.page-inner { background:var(--c-bg) !important; }
body.page-inner .site-header { margin-bottom:0; }
body.page-inner #main,
body.page-inner main#main { background:var(--c-bg); }
.filter-btn.is-active { background:var(--gradient-brand); border-color:transparent; }

/* ── 17. FOOTER ───────────────────────────────────────────────── */
.site-footer { background:var(--c-navy-dark); color:rgba(255,255,255,0.75); padding-top:3rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.2fr 1.2fr 1fr; gap:2rem; padding-bottom:2rem; }
.footer-brand img { max-width:160px; margin-bottom:0.75rem; filter:brightness(1.05); }
.footer-social { display:flex; gap:0.65rem; margin-top:0.75rem; }
.footer-social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%;
  background:rgba(255,255,255,0.12); color:#fff; font-size:0.75rem; font-weight:700;
}
.footer-social a:hover { background:var(--c-red); color:#fff; }
.footer-grid h3 { color:#fff; font-size:0.88rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.9rem; padding-bottom:0.5rem; border-bottom:2px solid var(--c-red); display:inline-block; }
.footer-grid p { font-size:0.84rem; line-height:1.7; color:rgba(255,255,255,0.65); }
.footer-services, .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(4) { display:flex; flex-direction:column; gap:0.35rem; }
.footer-services a, .footer-grid a { font-size:0.83rem; color:rgba(255,255,255,0.65); text-decoration:none; transition:color var(--transition); }
.footer-services a:hover, .footer-grid a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.10); padding-block:1rem; }
.footer-bottom p { font-size:0.8rem; color:rgba(255,255,255,0.42); text-align:center; margin:0; }

/* ── 18. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns:1fr; gap:2rem; }
  .hero-tilt-perspective { order:-1; }
  .hero--media { min-height:auto; }
  .hero-lead { max-width:100%; }
  .page-hero-inner { grid-template-columns:1fr; }
  .page-hero-image { height:220px; order:-1; }
  .page-hero-image img { min-height:220px; }
  .page-hero-copy { padding:2rem 0; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .contact-grid { grid-template-columns:1fr; gap:2rem; }
}

@media (max-width: 768px) {
  .section { padding-block:2.5rem; }
  .menu-toggle { display:flex; }
  .site-nav {
    display:none; position:fixed; top:64px; left:0; right:0;
    background:var(--c-white); border-top:1px solid var(--c-border);
    flex-direction:column; align-items:stretch; padding:1rem;
    gap:0.25rem; box-shadow:0 8px 24px rgba(1,27,88,0.12); z-index:899;
  }
  .site-nav.is-open { display:flex; }
  .nav-link { padding:0.6rem 0.85rem; font-size:0.88rem; }
  .btn-nav-cta { margin-left:0; margin-top:0.25rem; text-align:center; }
  .hero--media { min-height:460px; }
  .hero-grid { padding-block:2rem; }
  .hero-copy h1 { font-size:1.7rem; }
  .hero-sub { font-size:1rem; }
  .hero-lead { font-size:0.9rem; }
  .hero-slide-services { grid-template-columns:1fr; max-height:none; }
  .hero-slide-media img { height:180px; }
  .hero-slide-head { flex-direction:column; align-items:flex-start; }
  .hero-slide-cta { width:100%; text-align:center; }
  .hero-slideshow-nav { display:none; }
  .page-hero-inner { min-height:auto; }
  .page-hero-image { height:auto; order:-1; }
  .page-hero-image img { min-height:unset; max-height:220px; width:100%; object-fit:cover; border-radius:10px; margin-bottom:1rem; }
  .page-hero-copy { padding:2rem 0; }
  .page-hero-copy h1 { font-size:1.5rem; }
  .services-grid-core, .specialist-grid, .cert-grid, .why-grid { grid-template-columns:1fr; }
  .clients-logo-grid { grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); }
  .footer-grid { grid-template-columns:1fr; gap:1.25rem; }
  .hero-actions, .services-core-cta { flex-direction:column; align-items:flex-start; }
  .portfolio-filters { gap:0.4rem; }
  .filter-btn { font-size:0.75rem; padding:0.3rem 0.7rem; }
}

@media (min-width: 1200px) {
  .nav-link { font-size:0.74rem; padding:0.45rem 0.55rem; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .nav-link { font-size:0.68rem; padding:0.4rem 0.4rem; letter-spacing:0.04em; }
  .btn-nav-cta { font-size:0.68rem; padding:0.45rem 0.75rem; }
  .brand-logo { height:44px; max-width:180px; }
}

@media (max-width: 400px) {
  .container { padding-inline:1rem; }
  h1 { font-size:1.5rem; }
  .hero-actions .btn { width:100%; text-align:center; }
}