:root {
  --font-primary: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ===== Design tokens (spec: white + navy + light-blue) ===== */
  --navy: #071b49;
  --navy-dark: #051431;
  --navy-secondary: #0b2a66;
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-dark: #071b49;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-on-dark: #ffffff;
  --accent: var(--brand-accent, #0b2a66);
  --accent-dark: #051431;
  --accent-light: #eaf3ff;
  --card-blue: #f5f9ff;
  --card-blue-border: #d9e5f2;
  --border-color: #d9e5f2;

  /* Aliases matching the brief's naming, kept in sync with the tokens above */
  --primary: var(--navy);
  --primary-dark: var(--navy-dark);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --bg: var(--bg-primary);
  --card-bg: var(--card-blue);
  --light-blue: #eaf3ff;
  --border: var(--border-color);

  --container-xl: 1440px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --section-space: clamp(80px, 8vw, 120px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(16,16,20,0.04), 0 2px 8px rgba(16,16,20,0.04);
  --shadow-md: 0 8px 24px rgba(16,16,20,0.06), 0 2px 6px rgba(16,16,20,0.04);
  --shadow-lg: 0 24px 60px rgba(16,16,20,0.12), 0 6px 16px rgba(16,16,20,0.06);
  --shadow-glow: 0 0 0 1px rgba(10,92,255,0.08), 0 20px 50px -12px rgba(10,92,255,0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--text-primary);
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 100%),
    radial-gradient(50% 40% at 0% 30%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 100%),
    var(--bg-primary);
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #fff; }

.site-container {
  width: min(92%, var(--container-xl));
  margin-inline: auto;
}

h1, h2, h3, h4 {
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.5em;
}

.hero-heading { font-size: clamp(48px, 6vw, 92px); line-height: 1.01; letter-spacing: -0.03em; }
.section-heading { font-size: clamp(34px, 4vw, 60px); letter-spacing: -0.025em; }
.subheading { font-size: clamp(19px, 2vw, 24px); color: var(--text-secondary); font-weight: 400; line-height: 1.5; }
p { color: var(--text-secondary); font-size: 17px; line-height: 1.7; margin: 0 0 1em; }
small, .text-small { font-size: 14px; }

a { color: inherit; text-decoration: none; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.1em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  display: inline-block;
}

section { padding-block: var(--section-space); position: relative; overflow: hidden; }
.section-dark { background: radial-gradient(120% 140% at 15% 0%, #16161a 0%, var(--bg-dark) 55%); color: var(--text-on-dark); }
.section-dark p { color: #9a9aa0; }
.section-dark .eyebrow { color: #6fa1ff; }
.section-dark .eyebrow::before { background: #6fa1ff; }
.section-alt { background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--accent) 3%, var(--bg-secondary)) 100%); }
.section-dotted { position: relative; }
.section-dotted::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(60% 60% at 85% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(60% 60% at 85% 20%, #000 0%, transparent 70%);
}
.section-dotted > .site-container { position: relative; z-index: 1; }

.section-stats {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)) 0%, var(--bg-secondary) 55%, color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)) 100%);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.45s var(--ease), background 0.45s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 8px 20px -6px rgba(10,92,255,0.5); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -8px rgba(10,92,255,0.55); }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
.btn-secondary:hover { border-color: var(--text-primary); transform: translateY(-3px); background: var(--bg-secondary); }
.btn-light { background: #fff; color: var(--text-primary); box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25); }
.btn-light:hover { transform: translateY(-3px); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-3px); }

/* Cards */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: transform 0.55s var(--ease-soft), box-shadow 0.55s var(--ease-soft), border-color 0.55s var(--ease-soft);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Fixed wrapper holding top bar + nav so nav always sits directly below the top bar */
.site-header-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }

/* Top bar */
.top-bar { background: var(--bg-dark); border-bottom: 1px solid rgba(255,255,255,0.08); overflow: hidden; transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), border-color 0.4s var(--ease); max-height: 60px; }
/* top bar stays visible while scrolling (no collapse) */
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 0; font-size: 13px; color: #b8b8bd; }
.top-bar-contact { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.top-bar-contact a { display: inline-flex; align-items: center; gap: 6px; color: #e5e5e8; font-weight: 500; transition: color 0.3s; }
.top-bar-contact a:hover { color: var(--accent); }
.top-bar-contact svg { color: var(--accent); flex-shrink: 0; }
.top-bar-divider { color: rgba(255,255,255,0.15); }
.top-bar-tagline { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.top-bar-marquee-track { display: flex; width: max-content; gap: 56px; animation: topbar-marquee 28s linear infinite; }
.top-bar-tagline:hover .top-bar-marquee-track { animation-play-state: paused; }
.top-bar-marquee-item { font-weight: 500; color: #cfcfd3; white-space: nowrap; flex-shrink: 0; }
@keyframes topbar-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 28px)); } }
@media (prefers-reduced-motion: reduce) { .top-bar-marquee-track { animation: none; } }
.top-bar-social { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.social-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #e5e5e8; border: 1px solid rgba(255,255,255,0.12); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.social-icon:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.top-bar-blog-btn { padding: 6px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; }

@media (max-width: 768px) {
  .top-bar-tagline { display: none; }
  .top-bar-contact a span { display: none; }
}
@media (max-width: 576px) {
  .top-bar-contact { gap: 8px; }
}

/* Navbar */
.site-header {
  position: relative; padding: 20px 0;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), padding 0.5s var(--ease);
}
.site-header.is-transparent { background: transparent; }
.site-header.is-solid { background: rgba(226,228,234,0.94); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.06); padding: 12px 0; }
.site-header .nav-inner { display: flex; align-items: center; justify-content: space-between; }
.site-logo { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; display: inline-flex; align-items: center; }
.logo-chip { padding: 6px 12px; border-radius: 10px; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.logo-chip img { height: 50px; width: auto; display: block; }
.site-header.is-transparent .logo-chip { background: rgba(255,255,255,0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.site-header.is-solid .logo-chip { background: transparent; box-shadow: none; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a { font-size: 14.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px; position: relative; transition: background 0.3s var(--ease), color 0.3s var(--ease); }

.site-header.is-transparent .site-nav a,
.site-header.is-transparent .mobile-toggle { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.site-header.is-solid .site-nav a,
.site-header.is-solid .mobile-toggle { color: var(--text-primary); text-shadow: none; }

.site-header.is-solid .site-nav a:hover { background: var(--bg-secondary); }
.site-header.is-transparent .site-nav a:hover { background: rgba(255,255,255,0.15); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 10px; min-width: 260px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu a { color: var(--text-primary) !important; padding: 10px 14px !important; border-radius: 8px; font-size: 14px !important; }
.nav-dropdown-menu a:hover { background: var(--bg-secondary) !important; }

.nav-cta-group { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; }
.nav-cta-group .btn-primary { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 999px; flex-shrink: 0; }
.nav-inner { flex-wrap: nowrap; min-width: 0; }
.site-logo { min-width: 0; flex-shrink: 1; overflow: hidden; }

@media (max-width: 992px) {
  .site-nav { display: none; }
  .mobile-toggle { display: block; }
}

/* Inner page banners: full original image | photo background | light polygon (default) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page-banner-full { margin-top: var(--header-h, 112px); background: #f2f3f5; line-height: 0; }
.page-banner-full img { width: 100%; height: auto; min-height: 150px; max-height: 420px; object-fit: cover; object-position: center; display: block; }
.page-crumb-strip { background: #fff; border-bottom: 1px solid var(--border-color); padding: 14px 0; }

.page-banner { position: relative; overflow: hidden; padding-top: calc(var(--header-h, 112px) + 44px); padding-bottom: 52px; }
.page-banner-inner { position: relative; }
.page-banner-title { max-width: 980px; }
.page-banner-title { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }

.page-banner--light {
  background: #f7f8fb url('../images/banners/global-media-page-background.webp') center / cover no-repeat;
  border-bottom: 1px solid var(--border-color); color: var(--text-primary);
}
.page-banner--light .eyebrow { color: var(--accent); }
.page-banner--light .page-banner-title { color: var(--accent-dark); }

.page-banner--photo { background-size: cover; background-position: center; color: #fff; }
.page-banner--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,24,0.72) 0%, rgba(8,12,24,0.38) 55%, rgba(8,12,24,0.12) 100%); }
.page-banner--photo .eyebrow { color: #cfe0ff; }
.page-banner--photo .page-banner-title { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }

.page-banner-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.page-banner-crumbs li[aria-hidden="true"] { opacity: 0.55; }
.page-banner-crumbs a { color: var(--text-primary); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.page-banner-crumbs a:hover { color: var(--accent); border-color: var(--accent); }
.page-banner-crumbs [aria-current="page"] { color: var(--accent); font-weight: 700; }
.page-banner--photo .page-banner-crumbs ol { color: rgba(255,255,255,0.7); }
.page-banner--photo .page-banner-crumbs a { color: rgba(255,255,255,0.92); }
.page-banner--photo .page-banner-crumbs a:hover { color: #fff; border-color: #fff; }
.page-banner--photo .page-banner-crumbs [aria-current="page"] { color: #fff; }

/* Photo block shown below a banner (service / project detail pages) */
.page-banner-photo-wrap { background: var(--bg-secondary); padding-block: 40px; }
.page-banner-photo { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

@media (max-width: 768px) {
  .page-banner { padding-top: calc(var(--header-h, 90px) + 28px); padding-bottom: 32px; }
  .page-banner-photo { max-height: 260px; }
  .page-banner-full img { min-height: 120px; }
}


/* Hero slider */
.hero { position: relative; min-height: 94vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; margin-top: var(--header-h, 112px); min-height: calc(min(94vh, 920px) - var(--header-h, 112px)); }
.hero-slider { position: absolute; inset: 0; z-index: -1; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-soft); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hero-slide-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,6,12,0.35) 0%, rgba(4,6,12,0.42) 35%, rgba(4,6,12,0.92) 100%),
    linear-gradient(90deg, rgba(4,6,12,0.75) 0%, rgba(4,6,12,0.25) 55%, rgba(4,6,12,0.1) 100%);
}
.hero-content { padding-bottom: 104px; max-width: 920px; position: relative; z-index: 2; }
.hero-content .eyebrow, .hero-heading, .hero-content p {
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.hero-cta { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08); backdrop-filter: blur(6px);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.hero-arrow:hover { background: rgba(255,255,255,0.2); border-color: #fff; }
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 124px; } /* clear of the fixed Enquire Now badge */

.hero-dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: background 0.3s, transform 0.3s; padding: 0; }
.hero-dot.is-active { background: #fff; transform: scale(1.3); }

@media (max-width: 768px) {
  .hero-arrow { width: 38px; height: 38px; }
  .hero-arrow-prev { left: 12px; }
  .hero-arrow-next { right: 12px; }
  .hero-dots { bottom: 20px; }
}
.hero-scroll-cue {
  position: absolute; bottom: 32px; right: 5%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.7); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-scroll-cue::after {
  content: ""; width: 1px; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
  animation: scrollcue 2.2s var(--ease) infinite;
}
@keyframes scrollcue { 0% { opacity: 0; transform: scaleY(0.3); transform-origin: top; } 40% { opacity: 1; transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-card { padding: 32px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border-color); transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft); }
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.stat-number { font-size: clamp(36px, 4vw, 54px); font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.stat-label { color: var(--text-secondary); font-size: 14.5px; margin-top: 8px; font-weight: 500; }

/* Service cards */
.service-card {
  position: relative; padding: 36px 32px; border-radius: var(--radius-lg);
  background: var(--bg-secondary); border: 1px solid transparent;
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft), background 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft);
}
.service-card:hover { transform: translateY(-8px); background: #fff; box-shadow: var(--shadow-lg); border-color: var(--border-color); }
.service-number {
  font-size: 13px; color: var(--accent); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent-light);
}
.service-arrow { margin-top: 28px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: gap 0.35s var(--ease), color 0.35s var(--ease); }
.service-card:hover .service-arrow { color: var(--accent); gap: 10px; }

/* Image-led numbered service cards (Globexpo-style) */
.service-card-img { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--border-color); transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft); }
.service-card-img:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.service-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-soft); }
.service-card-img:hover .service-card-img-wrap img { transform: scale(1.08); }
.service-number-badge {
  position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--accent);
}
.service-card-img-body { padding: 24px; }
.service-card-img-body h3 { font-size: 21px; margin-bottom: 8px; }

/* Project cards */
.project-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.project-card .project-img-wrap { border-radius: var(--radius-lg); overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--bg-secondary); }
.project-card .project-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.project-card img { transition: transform 0.8s var(--ease-soft); }
.project-card:hover img { transform: scale(1.07); }
.project-card-body { padding: 22px 4px 4px; }
.project-tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); font-weight: 700; }

/* Process */
.process-step { display: flex; gap: 28px; padding: 32px 0; border-top: 1px solid var(--border-color); transition: padding-left 0.4s var(--ease); }
.process-step:hover { padding-left: 8px; }
.process-step-number {
  font-size: 14px; font-weight: 700; color: var(--accent); min-width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-light); flex-shrink: 0;
}

/* Industries chips */
.industry-chip { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--border-color); font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.industry-chip:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Marquee */
.marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 64px; animation: marquee 30s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.client-logo { height: 40px; width: auto; filter: grayscale(1); opacity: 0.55; transition: filter 0.4s, opacity 0.4s; }
.client-logo:hover { filter: grayscale(0); opacity: 1; }

/* Footer */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: #0a0b0f; color: #aab0bd; padding-top: clamp(56px, 7vw, 96px); }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--accent), var(--accent-dark), var(--accent)); }
.site-footer-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,15,0.5) 0%, rgba(10,11,15,0.08) 45%, rgba(10,11,15,0.55) 100%); }

.footer-grid { display: grid; grid-template-columns: 1.25fr 0.8fr 1fr 1.6fr; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.footer-logo { display: inline-block; background: #fff; padding: 9px 14px; border-radius: 12px; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.6); }
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-about p { margin: 18px 0 20px; font-size: 14.5px; line-height: 1.7; color: #b6bcc8; max-width: 320px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #e8ebf2; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); transition: all 0.3s var(--ease); }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }

.footer-col h4 { position: relative; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 24px; padding-bottom: 12px; display: inline-block; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ff3b30, #ff6a3d); }
.footer-col > a { display: block; color: #b6bcc8; font-size: 14.5px; padding: 7px 0; transition: color 0.25s, transform 0.25s; }
.footer-col > a:hover { color: #fff; transform: translateX(4px); }

.footer-info { list-style: none; margin: 0; padding: 0; }
.footer-info li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 14.5px; line-height: 1.6; color: #d4d8e1; }
.footer-info li:first-child { padding-top: 0; }
.footer-info svg { color: #6fa1ff; margin-top: 3px; flex-shrink: 0; }
.footer-info strong { display: block; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.footer-info a { color: #d4d8e1; transition: color 0.25s; }
.footer-info a:hover { color: #fff; text-decoration: underline; }

.footer-bar { margin-top: clamp(40px, 5vw, 64px); background: rgba(0,0,0,0.45); border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 20px; font-size: 13px; color: #9aa0ad; }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: #b6bcc8; transition: color 0.25s; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bar-inner { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
}


/* ================= Homepage sections ================= */
.home-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.home-section-head .section-heading { margin-bottom: 0; }
.home-section-head--split { max-width: none; margin: 0 0 40px; text-align: left; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Welcome (navy) */
.home-welcome { color: #e9eefc; background: radial-gradient(120% 140% at 0% 0%, #17306b 0%, #0c1a3f 55%, #081228 100%); }
.home-welcome .eyebrow { color: #8fb4ff; }
.home-welcome .eyebrow::before { background: #8fb4ff; }
.home-welcome .section-heading { color: #fff; }
.home-welcome p { color: #c5d0ee; font-size: 16.5px; }
.home-welcome-quote { color: #fff !important; font-size: clamp(19px, 1.9vw, 24px) !important; font-weight: 700; margin-bottom: 20px !important; }
.home-welcome-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-welcome-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home-welcome-visual { position: relative; }
.home-welcome-visual > img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius-xl); border: 6px solid rgba(255,255,255,0.12); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6); }
.home-welcome-stats { position: absolute; left: -18px; bottom: -22px; display: flex; gap: 12px; }
.home-welcome-stats > div { background: #fff; border-radius: 16px; padding: 14px 20px; box-shadow: 0 18px 36px -14px rgba(0,0,0,0.5); text-align: center; min-width: 130px; }
.home-welcome-stats strong { display: block; font-size: 30px; line-height: 1; color: var(--accent); font-weight: 800; }
.home-welcome-stats span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* Why Global Media */
.home-why-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.home-checks li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--text-primary); }
.home-checks svg { flex-shrink: 0; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--accent-light); color: var(--accent); }
.home-why-visual { position: relative; }
.home-why-visual::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--accent), var(--accent-dark)); opacity: 0.14; z-index: 0; }
.home-why-visual img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* Mission */
.home-mission-statement { font-size: clamp(17px, 1.6vw, 20px) !important; font-weight: 600; color: var(--text-primary) !important; margin: 18px 0 0 !important; }
.home-mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-mission-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px; transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft); }
.home-mission-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.home-mission-icon { width: 78px; height: 78px; border-radius: 22px; background: linear-gradient(135deg, var(--accent-light), #fff); border: 1px solid #dbe6fb; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 10px 22px -14px rgba(23,70,160,0.5); }
.home-mission-icon img { width: 42px; height: 42px; object-fit: contain; }
.home-mission-card h3 { font-size: 21px; margin-bottom: 8px; padding-left: 14px; border-left: 4px solid #ff8a1f; }
.home-mission-card p { font-size: 15px; margin: 0; }

/* Events */
.home-events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.home-event { display: flex; gap: 20px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px; transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.home-event:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.home-event-date { flex-shrink: 0; width: 84px; height: 96px; border-radius: 16px; background: linear-gradient(160deg, var(--accent), var(--accent-dark)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.home-event-date strong { font-size: 32px; font-weight: 800; }
.home-event-date span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.home-event-date small { font-size: 11px; opacity: 0.8; margin-top: 3px; }
.home-event-body h3 { font-size: 19px; margin-bottom: 6px; }
.home-event-body p { font-size: 14.5px; margin-bottom: 8px; }
.home-event-meta { color: var(--accent-dark) !important; font-weight: 600; }
.home-event-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.home-event-ext { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.home-event-ext:hover { color: var(--accent); }
.home-events-empty { text-align: center; padding: 44px 24px; border: 1.5px dashed #cfd6e6; border-radius: var(--radius-lg); background: #fff; }
.home-events-empty p { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.home-events-empty span { display: block; font-size: 14.5px; color: var(--text-secondary); margin-bottom: 20px; }

/* Process */
.home-process-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.home-process-grid > .home-process-card { flex: 0 1 calc((100% - 60px) / 4); min-width: 230px; }
.home-process-card { position: relative; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px 24px 26px; overflow: hidden; transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft); }
.home-process-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.home-process-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--accent), #ff8a1f); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.home-process-card:hover::after { transform: scaleX(1); }
.home-process-num { display: block; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.home-process-card h3 { font-size: 18px; margin-bottom: 8px; }
.home-process-card p { font-size: 14.5px; margin: 0; }

/* Quick enquiry (dark) */
.home-enquiry { color: #e8ecf7; background: radial-gradient(120% 140% at 100% 0%, #1b2a55 0%, #0d1530 50%, #090e20 100%); }
.home-enquiry .eyebrow { color: #8fb4ff; }
.home-enquiry .eyebrow::before { background: #8fb4ff; }
.home-enquiry .section-heading { color: #fff; }
.home-enquiry-grid { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.home-enquiry-visual img { width: 100%; border-radius: var(--radius-xl); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); border: 5px solid rgba(255,255,255,0.12); }
.home-enquiry-sub { color: #b8c3e3 !important; margin-bottom: 26px !important; }
.home-enquiry-form { display: flex; flex-direction: column; gap: 14px; }
.home-enquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-enquiry-form input, .home-enquiry-form textarea { width: 100%; padding: 15px 18px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.96); color: #10152a; font-family: var(--font-primary); font-size: 15px; transition: border-color 0.25s, box-shadow 0.25s; }
.home-enquiry-form input:focus, .home-enquiry-form textarea:focus { outline: none; border-color: #6fa1ff; box-shadow: 0 0 0 4px rgba(111,161,255,0.28); }
.home-enquiry-form button { align-self: flex-start; padding: 15px 38px; }
.home-enquiry-ok { padding: 18px 20px; border-radius: 12px; background: rgba(46,204,113,0.16); border: 1px solid rgba(46,204,113,0.5); color: #b9f5d0; font-weight: 600; }
.home-enquiry-err { padding: 14px 18px; border-radius: 12px; background: rgba(255,90,90,0.15); border: 1px solid rgba(255,90,90,0.5); color: #ffd0d0; margin-bottom: 16px; font-size: 14px; }
.home-enquiry-err p { color: inherit; margin: 0; font-size: 14px; }

@media (max-width: 992px) {
  .home-welcome-grid, .home-why-grid, .home-enquiry-grid { grid-template-columns: 1fr; }
  .home-welcome-stats { left: 12px; }
  .home-mission-grid { grid-template-columns: 1fr; }
  .home-process-grid > .home-process-card { flex-basis: calc((100% - 20px) / 2); }
  .home-events-grid { grid-template-columns: 1fr; }
  .home-enquiry-visual { max-width: 460px; }
}
@media (max-width: 576px) {
  .home-section-head { margin-bottom: 32px; }
  .home-checks { grid-template-columns: 1fr; }
  .home-process-grid > .home-process-card { flex-basis: 100%; }
  .home-enquiry-row { grid-template-columns: 1fr; }
  .home-enquiry-form button { align-self: stretch; }
  .home-welcome-stats > div { min-width: 0; padding: 12px 14px; }
  .home-welcome-stats strong { font-size: 24px; }
  .home-event { flex-direction: column; }
  .home-event-date { width: 100%; height: auto; flex-direction: row; gap: 8px; padding: 10px; }
  .home-event-date strong { font-size: 24px; }
}

/* WhatsApp float */
.whatsapp-float {
  position: fixed; bottom: 35px; left: 24px; z-index: 999;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #1ea952);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37,211,102,0.4);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 14px 34px rgba(37,211,102,0.5); }

/* Floating Enquire Now badge — bottom-right corner, level with the WhatsApp button (now bottom-left) */
.enquire-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 998;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 30% 25%, #3d86ff, var(--accent) 55%, var(--accent-dark));
  color: #fff; font-weight: 800; font-size: 12px; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 12px 28px rgba(10,92,255,0.45);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  animation: enquire-pulse 2.6s ease-in-out infinite;
}
.enquire-float:hover { transform: scale(1.08); color: #fff; }
@keyframes enquire-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 12px 28px rgba(10,92,255,0.45); }
  50% { box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 12px 28px rgba(10,92,255,0.45), 0 0 0 14px rgba(10,92,255,0.14); }
}
@media (prefers-reduced-motion: reduce) { .enquire-float { animation: none; } }
@media (max-width: 576px) { .enquire-float { width: 64px; height: 64px; right: 16px; bottom: 20px; font-size: 10px; } }

/* Forms */
.form-control-group { margin-bottom: 20px; }
.form-control-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.form-control {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color); font-family: var(--font-primary); font-size: 15px;
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }

/* Accordion (FAQ) */
.faq-item { border-bottom: 1px solid var(--border-color); padding: 24px 0; }
.faq-question { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: 18px; gap: 16px; }
.faq-question span { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease); }
.faq-item.is-open .faq-question span { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.faq-item.is-open .faq-answer { max-height: 500px; padding-top: 16px; }

.presence-card { padding: 32px; }

/* Blog layout */
.blog-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--header-h, 112px) + 24px); }
.blog-sidebar-box { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 24px; }
.blog-sidebar-box h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.blog-search-form { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--border-color); background: #fff; }
.blog-search-form input { flex: 1; border: none; padding: 12px 14px; font-family: var(--font-primary); font-size: 14px; outline: none; }
.blog-search-form button { border: none; background: var(--accent); color: #fff; padding: 0 16px; cursor: pointer; }
.blog-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.blog-recent-list a { display: flex; gap: 12px; align-items: center; }
.blog-recent-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.blog-recent-list strong { display: block; font-size: 13.5px; line-height: 1.3; color: var(--text-primary); font-weight: 600; }
.blog-recent-list small { color: var(--text-secondary); font-size: 12px; }
.blog-category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.blog-category-list a { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border-color); }
.blog-category-list li:last-child a { border-bottom: none; }
.blog-sidebar-cta { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.blog-sidebar-cta h4 { color: #fff; }
.blog-sidebar-cta p { color: rgba(255,255,255,0.85); margin-bottom: 16px; }

.blog-post-meta { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; flex-wrap: wrap; }
.blog-post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-color); }

/* Blog listing — featured post, category chips, card grid */
.blog-section { padding-block: clamp(40px, 5vw, 72px); }
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chip { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border-color); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--text-primary); transition: all 0.25s var(--ease); }
.blog-chip:hover { border-color: var(--accent); color: var(--accent); }
.blog-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(10,92,255,0.6); }
.blog-search { position: relative; width: min(100%, 300px); }
.blog-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.blog-search input { width: 100%; padding: 11px 16px 11px 42px; border: 1px solid var(--border-color); border-radius: 999px; background: #fff; font-family: var(--font-primary); font-size: 14px; transition: border-color 0.25s, box-shadow 0.25s; }
.blog-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.blog-result-note { font-size: 14px; margin: -12px 0 24px; }
.blog-result-note a { color: var(--accent); font-weight: 600; }

.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--text-secondary); font-weight: 500; margin-bottom: 12px; }
.blog-tag { padding: 4px 11px; border-radius: 999px; background: var(--accent-light); color: var(--accent-dark); font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em; }
.blog-meta-new { padding: 4px 10px; border-radius: 999px; background: #fff1e8; color: #c2410c; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Blog listing rows: clean image + text rows */
.blog-list { display: flex; flex-direction: column; gap: 18px; }
.blog-item {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: stretch;
  padding: 16px; background: #fff; border: 1px solid var(--border-color); border-radius: 18px;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.blog-item:hover { box-shadow: var(--shadow-md); border-color: #cfdaf0; transform: translateY(-2px); }
.blog-item-img { display: block; border-radius: 12px; overflow: hidden; background: var(--bg-secondary); min-height: 200px; }
.blog-item-img img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; transition: transform 0.6s var(--ease-soft); }
.blog-item:hover .blog-item-img img { transform: scale(1.04); }
.blog-item-body { display: flex; flex-direction: column; justify-content: center; padding: 4px 10px 4px 0; min-width: 0; }
.blog-item-title { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 10px; }
.blog-item-title a { color: var(--text-primary); transition: color 0.25s; }
.blog-item-title a:hover { color: var(--accent); }
.blog-item-body p { font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-item-body p strong { color: var(--text-primary); }
.blog-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid #eef1f6; }
.blog-author { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.blog-author-dot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }

.blog-card-link { font-weight: 700; font-size: 14px; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; transition: gap 0.3s var(--ease), color 0.25s; }
.blog-card-link:hover { gap: 12px; color: var(--accent-dark); }
.blog-item:hover .blog-card-link, .blog-mini:hover .blog-card-link { gap: 12px; }

.blog-empty { text-align: center; padding: 64px 20px; border: 1px dashed var(--border-color); border-radius: var(--radius-lg); background: #fff; }
.blog-pager-wrap { margin-top: 48px; display: flex; justify-content: center; }
.blog-pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.blog-pager a, .blog-pager .is-current { min-width: 42px; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border-color); background: #fff; font-weight: 600; font-size: 14px; transition: all 0.25s; }
.blog-pager a:hover { border-color: var(--accent); color: var(--accent); }
.blog-pager .is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

.blog-cta { padding-block: clamp(48px, 6vw, 80px); }
.blog-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.blog-cta-inner h2 { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 8px; }
.blog-cta-inner p { margin: 0; max-width: 560px; }

@media (max-width: 760px) {
  .blog-item { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .blog-item-img, .blog-item-img img { min-height: 0; }
  .blog-item-img { aspect-ratio: 16 / 10; }
  .blog-item-body { padding: 0 4px 4px; }
}
@media (max-width: 640px) {
  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .blog-search { width: 100%; }
  .blog-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .blog-chips::-webkit-scrollbar { display: none; }
  .blog-chip { white-space: nowrap; }
  .blog-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* Blog detail — article + sticky sidebar */
.blog-article-section { padding-block: clamp(36px, 5vw, 72px); }
.blog-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.blog-article { min-width: 0; }
.blog-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--text-secondary); font-weight: 500; margin-bottom: 22px; }
.blog-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: #c7ccd6; }
.blog-article-meta .blog-tag { margin-left: auto; }
.blog-article-hero { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); background: #fff; padding: 8px; }
.blog-article-hero img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 18px; display: block; }
.blog-article-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--text-primary); font-weight: 500; padding-left: 18px; border-left: 4px solid #ff8a1f; margin-bottom: 28px; }
.blog-article .blog-content { font-size: 17.5px; line-height: 1.85; }

.blog-info-box { border-radius: var(--radius-md); padding: 24px 28px; margin: 28px 0; border: 1px solid var(--border-color); }
.blog-info-box h3 { font-size: 19px; margin-bottom: 12px; }
.blog-info-warm { background: #fffaf0; border-color: #efe3c6; }
.blog-info-warm h3 { color: #b8501a; }

.blog-kw { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.blog-kw span { padding: 6px 13px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }

.blog-contact-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 40px 0 26px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-lg); background: linear-gradient(115deg, #eaf2ff 0%, #f7faff 60%, #edf3fc 100%); border: 1px solid #dde7f6; box-shadow: 0 18px 44px -26px rgba(23,70,160,0.4); }
.blog-contact-card h3 { font-size: clamp(20px, 2vw, 25px); margin-bottom: 6px; }
.blog-contact-card p { margin: 0; font-size: 15px; }
.blog-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-contact-actions .btn { padding: 12px 22px; font-size: 14px; }

.blog-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
.blog-share > span { font-weight: 700; color: var(--text-primary); margin-right: 6px; }
.blog-share a, .blog-share button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-color); background: #fff; font: inherit; font-weight: 600; font-size: 13px; color: var(--text-primary); cursor: pointer; transition: all 0.25s var(--ease); }
.blog-share a:hover, .blog-share button:hover { border-color: var(--accent); color: var(--accent); }

.blog-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.blog-postnav-item { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; transition: all 0.3s var(--ease); }
.blog-postnav-item:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-postnav-item small { color: var(--accent); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.blog-postnav-item strong { font-size: 15px; line-height: 1.35; color: var(--text-primary); }
.blog-postnav-item.is-next { text-align: right; grid-column: 2; }

.blog-related { padding-block: clamp(44px, 6vw, 80px); }
.blog-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.blog-related-head h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0; }
.blog-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-mini { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft); }
.blog-mini:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-mini-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-soft); }
.blog-mini:hover .blog-mini-img img { transform: scale(1.06); }
.blog-mini-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.blog-mini-body small { color: var(--text-secondary); font-weight: 600; font-size: 12.5px; }
.blog-mini-body strong { font-size: 17px; line-height: 1.35; color: var(--text-primary); }
.blog-mini-body .blog-card-link { margin-top: auto; padding-top: 6px; }

@media (max-width: 1024px) {
  .blog-article-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-mini-grid { grid-template-columns: 1fr; }
  .blog-postnav { grid-template-columns: 1fr; }
  .blog-postnav-item.is-next { grid-column: auto; text-align: left; }
  .blog-article-meta .blog-tag { margin-left: 0; }
  .blog-contact-actions .btn { flex: 1 1 100%; }
  .blog-article-hero { padding: 5px; }
}

/* Prose typography for dynamic content (blog posts, service overviews, static pages) */
.blog-content, .prose {
  font-size: 17px; line-height: 1.75; color: var(--text-secondary);
}
.blog-content h2, .prose h2 { font-size: clamp(24px, 2.6vw, 32px); color: var(--text-primary); margin-top: 1.7em; margin-bottom: 0.6em; }
.blog-content h3, .prose h3 { font-size: clamp(20px, 2.1vw, 24px); color: var(--text-primary); margin-top: 1.5em; margin-bottom: 0.55em; }
.blog-content p, .prose p { margin-bottom: 1.3em; }
.blog-content ul, .blog-content ol, .prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.blog-content li, .prose li { margin-bottom: 0.5em; }
.blog-content a, .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.blog-content img, .prose img { border-radius: var(--radius-md); margin: 1.6em 0; }
.blog-content blockquote, .prose blockquote {
  margin: 1.8em 0; padding: 20px 24px; border-left: 3px solid var(--accent);
  background: var(--bg-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--text-primary);
}
.blog-content > :first-child, .prose > :first-child { margin-top: 0; }

/* Enquiry sidebar widget */
.enquiry-widget { background: #faf6ef; border: 1px solid #ece3d3; border-radius: var(--radius-lg); padding: 24px; }
.enquiry-widget h4 { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.enquiry-widget-form { display: flex; flex-direction: column; gap: 12px; }
.enquiry-widget-form .form-control { background: #fff; }
.enquiry-widget-success { padding: 16px; background: #e7f8ee; color: #1e7a44; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }

@media (max-width: 992px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}

/* Testimonials */
.testimonial-card { position: relative; padding: 36px 32px 32px; }
.testimonial-card::before {
  content: "\201C"; position: absolute; top: 16px; left: 24px; font-size: 64px; line-height: 1;
  font-family: Georgia, serif; color: var(--accent-light); font-weight: 700; z-index: 0;
}
.testimonial-card p { position: relative; z-index: 1; font-style: italic; font-size: 16.5px; }

/* Decorative gradient blobs */
.blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; z-index: -1; pointer-events: none;
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ===== Contact page ===== */
.contact-intro{padding:72px 0 56px}
.contact-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.contact-quick{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.contact-intro-visual img{width:100%;height:auto;border-radius:var(--radius-lg,20px);box-shadow:0 24px 60px color-mix(in srgb,var(--accent) 22%,transparent);display:block}
.contact-office-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.contact-office-grid.is-three{grid-template-columns:repeat(3,1fr)}
.contact-office{background:#fff;border:1px solid color-mix(in srgb,var(--accent) 14%,#e5e8ee);border-radius:20px;padding:32px;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:transform .3s var(--ease,ease),box-shadow .3s}
.contact-office:hover{transform:translateY(-4px);box-shadow:0 18px 44px color-mix(in srgb,var(--accent) 18%,transparent)}
.contact-office h3{margin:12px 0 18px;font-size:26px}
.contact-office-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:14px}
.contact-office-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.contact-office-list svg{flex:none;margin-top:3px;color:var(--accent)}
.contact-office-list strong{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.contact-office-list a{color:inherit;word-break:break-word}
.contact-form-card{max-width:820px;margin:0 auto}
.contact-form-head{text-align:center;margin-bottom:28px}
.contact-form-link{color:inherit;text-decoration:underline}
@media(max-width:900px){
 .contact-intro{padding:48px 0 32px}
 .contact-intro-grid,.contact-office-grid,.contact-office-grid.is-three{grid-template-columns:1fr;gap:28px}
 .contact-office{padding:24px}
}

/* ===== Hero cleanup ===== */
.hero-heading{font-size:clamp(34px,4.4vw,64px);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.hero-content{max-width:760px;padding-bottom:96px}
.hero-content p{font-size:clamp(16px,1.3vw,19px);max-width:600px;opacity:.95}
.hero-slide-overlay{background:linear-gradient(90deg,rgba(6,10,20,.72) 0%,rgba(6,10,20,.38) 45%,rgba(6,10,20,0) 80%),linear-gradient(180deg,rgba(6,10,20,0) 55%,rgba(6,10,20,.55) 100%)}
.hero-slide img{transform:none}
.hero-cta .btn{padding:14px 28px}

/* ===== Our Work ===== */
.work-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}
.work-filters .work-pill{cursor:pointer;border:1px solid color-mix(in srgb,var(--accent) 25%,#d8dde6);background:#fff;color:inherit;padding:9px 20px;border-radius:999px;font-weight:600;font-size:14px;transition:all .25s}
.work-filters .work-pill:hover{border-color:var(--accent);color:var(--accent)}
.work-filters .work-pill.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work-card{display:block;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 10px 30px rgba(15,23,42,.07);transition:transform .3s,box-shadow .3s}
.work-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px color-mix(in srgb,var(--accent) 20%,transparent)}
.work-card-img{aspect-ratio:4/3;overflow:hidden;background:#eef1f6}
.work-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.work-card:hover img{transform:scale(1.06)}
.work-card-body{padding:22px 24px 26px}
.work-card-body h3{font-size:19px;margin:10px 0 6px;line-height:1.3}
.work-card-body p{margin:0;opacity:.65;font-size:14px}
@media(max-width:991px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.work-grid{grid-template-columns:1fr;gap:20px}.hero-content{padding-bottom:80px}}

/* ===== Hero v3: clean, readable ===== */
.hero{align-items:center}
.hero-slide-overlay{background:linear-gradient(90deg,rgba(5,9,20,.88) 0%,rgba(5,9,20,.72) 38%,rgba(5,9,20,.25) 68%,rgba(5,9,20,.05) 100%),linear-gradient(180deg,rgba(5,9,20,.25) 0%,rgba(5,9,20,0) 30%,rgba(5,9,20,.5) 100%)}
.hero-content{padding-bottom:0;padding-top:24px;max-width:none}
.hero-content>*{max-width:640px}
.hero-heading{font-size:clamp(32px,4vw,56px);text-shadow:none}
.hero-content .eyebrow,.hero-content p{text-shadow:none}
.hero-slide-caption{display:inline-block;margin-top:18px!important;padding:8px 16px;border-left:3px solid var(--accent);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);font-size:16px!important;min-height:0!important;border-radius:0 8px 8px 0}
.hero-scroll-cue{display:none}
.hero-arrow{top:auto;bottom:28px;transform:none}
.hero-arrow-prev{left:auto;right:calc(var(--gutter,24px) + 56px)}
.hero-arrow-next{right:var(--gutter,24px)}
.hero-dots{left:var(--gutter,24px);transform:none;bottom:40px}
@media(min-width:1200px){.hero-dots{left:max(24px,calc((100vw - 1200px)/2))}.hero-arrow-next{right:max(24px,calc((100vw - 1200px)/2))}.hero-arrow-prev{right:calc(max(24px,(100vw - 1200px)/2) + 56px)}}
@media(max-width:768px){.hero-slide-overlay{background:linear-gradient(180deg,rgba(5,9,20,.55),rgba(5,9,20,.85))}.hero-arrow{display:none}.hero-dots{left:50%;transform:translateX(-50%)}}
.hero-dots{left:calc((100% - min(92%,var(--container-xl)))/2)!important;transform:none!important}
.hero-arrow-next{right:calc((100% - min(92%,var(--container-xl)))/2)!important}
.hero-arrow-prev{right:calc((100% - min(92%,var(--container-xl)))/2 + 56px)!important}
@media(max-width:768px){.hero-dots{left:50%!important;transform:translateX(-50%)!important}}
.work-filters{margin-top:-56px}
@media(max-width:768px){.work-filters{margin-top:-32px}}

/* ===== Hero v4: clear photo, no dark shade, text on a card ===== */
.hero-slide-overlay{display:none!important}
.hero-slide img{filter:none}
.hero-content>*{max-width:none}
.hero-content{max-width:none}
.hero-content .hero-card{max-width:600px}
.hero-content{color:#0f172a}
.hero-content .eyebrow{color:var(--accent)!important}
.hero-content .hero-heading{color:#0f172a;font-size:clamp(28px,3.2vw,46px);line-height:1.12}
.hero-content .hero-slide-caption{color:#475569!important;background:none;backdrop-filter:none;padding:0 0 0 14px;margin-top:14px!important;font-size:16px!important}
.hero-content .btn-light{background:var(--accent);color:#fff}
.hero-content .btn-outline-light{border-color:#0f172a;color:#0f172a;background:transparent}
.hero-content .btn-outline-light:hover{background:#0f172a;color:#fff}
.hero-card{background:rgba(255,255,255,.94);padding:36px 40px;border-radius:20px;box-shadow:0 20px 50px rgba(15,23,42,.18)}
.hero-dots .hero-dot{background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(15,23,42,.25)}
.hero-dots .hero-dot.is-active{background:var(--accent)}
.hero-arrow{background:#fff;color:#0f172a;border-color:#fff;box-shadow:0 6px 18px rgba(15,23,42,.2)}
@media(max-width:768px){.hero-card{padding:24px 22px}.hero-content .hero-heading{font-size:26px}}
.hero-arrow{bottom:110px!important}
@media(max-width:768px){.hero-arrow{display:none!important}}

/* ===== Hero v5: split banner (solid panel + clear photo) ===== */
.hero{background:linear-gradient(120deg,#08132e 0%,color-mix(in srgb,var(--accent) 55%,#08132e) 100%);align-items:stretch;min-height:clamp(480px,72vh,680px)}
.hero-slider{z-index:0;left:40%;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.hero-content{z-index:2;display:flex;align-items:center;padding:0!important;color:#fff}
.hero-content .hero-card{background:none;box-shadow:none;padding:0 0 0 0;max-width:520px}
.hero-content .eyebrow{color:#9db8ff!important}
.hero-content .hero-heading{color:#fff;font-size:clamp(30px,3.4vw,50px);line-height:1.1}
.hero-content .hero-slide-caption{color:#c9d6f5!important;border-left:3px solid var(--accent);padding-left:14px}
.hero-content .btn-light{background:#fff;color:#0b1b3f}
.hero-content .btn-outline-light{border-color:rgba(255,255,255,.6);color:#fff}
.hero-content .btn-outline-light:hover{background:#fff;color:#0b1b3f}
.hero-arrow{bottom:32px!important}
.hero-dots{bottom:40px}
@media(max-width:900px){
 .hero{display:block;min-height:0}
 .hero-slider{position:relative;left:0;height:250px;clip-path:none}
 .hero-content{padding:28px 0 76px!important;display:block}
 .hero-content .hero-heading{font-size:28px}
 .hero-dots{bottom:32px}
}

/* ===== v6: modern palette — white bg, black text, navy accents, light-blue cards ===== */
body{background:#fff}
.section-alt{background:#fff}

/* Navy used specifically: header top bar (bg-dark), footer, section eyebrow bar, solid buttons */
.site-footer{background:var(--navy-dark)}
.site-footer::after{background:linear-gradient(180deg,rgba(7,20,51,.55) 0%,rgba(7,20,51,.15) 45%,rgba(7,20,51,.65) 100%)}
.site-footer::before{background:linear-gradient(90deg,var(--navy),var(--accent),var(--navy))}

.eyebrow{color:var(--navy);font-weight:700;letter-spacing:.08em}
.eyebrow::before{background:var(--navy)}

.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-dark);border-color:var(--navy-dark)}

/* Light-blue cards, everywhere a white card sat on a white page */
.stat-card,.service-card-img,.home-mission-card,.home-process-card,.work-card,.contact-office,
.admin-card,.blog-card,.project-card,.faq-item,
.blog-sidebar .admin-card,.card,.presence-card{
  background:var(--card-blue);
  border-color:var(--card-blue-border);
}
.home-enquiry-form{background:none!important}
.work-card:hover,.contact-office:hover{box-shadow:0 18px 44px color-mix(in srgb,var(--navy) 18%,transparent)}
.home-process-card::after{background:linear-gradient(90deg,var(--navy),var(--accent))}

.blog-contact-card{background:linear-gradient(115deg,var(--card-blue) 0%,#f5f9ff 60%,var(--card-blue) 100%);border-color:var(--card-blue-border)}

/* Banner (inner pages) modernised: navy panel, clean crumbs */
.page-banner--light{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff}
.page-banner--light .eyebrow{color:#9db8ff}
.page-banner--light .eyebrow::before{background:#9db8ff}
.page-banner--light .page-banner-title{color:#fff}
.page-banner--light .page-banner-crumbs ol{color:rgba(255,255,255,.7)}
.page-banner--light .page-banner-crumbs a{color:rgba(255,255,255,.92)}
.page-banner--light .page-banner-crumbs a:hover{color:#fff;border-color:#fff}
.page-banner--light .page-banner-crumbs [aria-current="page"]{color:#fff}
.page-banner--photo::before{background:linear-gradient(90deg,rgba(7,20,51,.82) 0%,rgba(7,20,51,.5) 55%,rgba(7,20,51,.15) 100%)}

/* Hero split banner: keep photo clear, panel navy */
.hero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-dark) 100%)}

/* ===== Hero v7: no solid panel — text directly on the photo ===== */
.hero{background:none;align-items:flex-end;min-height:clamp(460px,72vh,660px)}
.hero-slider{left:0;clip-path:none}
.hero-slide-overlay{
  /* display:block!important; */
  background:
  linear-gradient(90deg,rgba(3,8,20,.82) 0%,rgba(3,8,20,.55) 38%,rgba(3,8,20,.12) 68%,rgba(3,8,20,0) 85%),
  linear-gradient(0deg,rgba(3,8,20,.72) 0%,rgba(3,8,20,.15) 32%,rgba(3,8,20,0) 55%)!important;
}
.hero-content{display:block;padding:0 0 88px!important;align-items:initial}
.hero-content .hero-card{max-width:600px}
.hero-content .eyebrow{color:var(--brand-accent,var(--accent))!important}
.hero-content .eyebrow::before{background:var(--brand-accent,var(--accent))!important}
.hero-content .hero-heading{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-content .hero-slide-caption{color:#eef2fb!important;border-left-color:var(--brand-accent,var(--accent));text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hero-content .btn-light{background:#fff;color:#0b1b3f}
.hero-content .btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff}
.hero-content .btn-outline-light:hover{background:#fff;color:#0b1b3f}
.hero-dots .hero-dot{background:rgba(255,255,255,.5)}
.hero-dots .hero-dot.is-active{background:var(--brand-accent,var(--accent))}
@media(max-width:900px){
 .hero{display:flex;min-height:clamp(440px,86vh,720px)}
 .hero-slider{position:absolute;height:100%}
 .hero-content{padding:0 0 72px!important}
}

/* ===== Hero v8: plain slider, no text overlay — matches original site pattern ===== */
.hero.hero-plain{background:none;display:block;align-items:initial;min-height:0;padding:0;overflow:hidden}
.hero-plain .hero-slider{position:relative;left:0;clip-path:none;height:clamp(260px,52vw,560px)}
.hero-plain .hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-plain .hero-slide-overlay{background:linear-gradient(0deg,rgba(3,8,20,.45) 0%,rgba(3,8,20,0) 22%)!important;display:block!important}
.hero-plain .hero-slide-caption{position:absolute;right:24px;bottom:22px;z-index:3;margin:0;max-width:min(80%,560px);
  background:rgba(7,27,73,.72);backdrop-filter:blur(4px);color:#fff;font-size:14.5px;font-weight:600;
  padding:10px 18px;border-radius:10px;text-align:right;line-height:1.4;}
.hero-plain .hero-arrow{bottom:auto;top:38%;transform:translateY(-50%)}
.hero-plain .hero-arrow-prev{left:20px;right:auto}
.hero-plain .hero-arrow-next{right:20px}
.hero-plain .hero-dots{left:50%;bottom:16px;transform:translateX(-50%)!important}
@media(max-width:768px){
  .hero-plain .hero-slider{height:clamp(220px,68vw,420px)}
  .hero-plain .hero-slide-caption{left:16px;right:16px;max-width:none;text-align:left;font-size:13px;bottom:14px}
  .hero-plain .hero-arrow{width:34px;height:34px}
}

/* ===== Blog detail: quick-contact strip (matches original page's top contact block) ===== */
.blog-quick-contact{display:flex;gap:20px;align-items:center;background:var(--card-blue);border:1px solid var(--card-blue-border);border-radius:16px;padding:20px 24px;margin:22px 0 30px}
.blog-quick-contact-logo{width:72px;height:72px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--card-blue-border);flex:none;padding:6px}
.blog-quick-contact-body{flex:1;min-width:0}
.blog-quick-contact-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:14px 26px}
.blog-quick-contact-list li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.blog-quick-contact-list svg{color:var(--navy);flex:none}
.blog-quick-contact-list a{color:var(--text-primary)}
.blog-quick-contact-list a:hover{color:var(--navy)}
.blog-quick-contact-cta{display:inline-block;font-size:14px;font-weight:600;color:var(--navy)}
.blog-quick-contact-cta:hover{text-decoration:underline}
@media(max-width:576px){
  .blog-quick-contact{flex-direction:column;align-items:flex-start;padding:18px}
  .blog-quick-contact-logo{width:56px;height:56px}
}

/* ===== Homepage in the original site's look (red accent, grey bands, Poppins) ===== */
.og-welcome,.og-why,.og-mission,.og-events,.og-process,.og-services,.og-enquiry,.og-work{--og-red:#cb3a40;--og-dark:#555;font-family:"Poppins","Manrope","Segoe UI",Arial,sans-serif;color:#333}
.og-welcome h2,.og-why h2,.og-mission h2,.og-events h2,.og-process h2,.og-services h2,.og-enquiry h2,.og-work h2,
.og-process h3,.og-mission-bar span{font-family:inherit;letter-spacing:0}
.og-welcome,.og-why,.og-mission,.og-events,.og-process,.og-services,.og-enquiry,.og-work{padding-block:clamp(48px,6vw,80px)}
.og-title{text-align:center;font-size:clamp(28px,3.4vw,42px);font-weight:400;color:#111;margin:0 0 28px;line-height:1.2}
.og-title span{color:var(--og-red)}
.og-title--plain{font-weight:600;color:#222}
.og-title--dark{font-weight:500;font-size:clamp(24px,2.6vw,32px)}

/* Welcome */
.og-welcome{background:#fff}
.og-welcome-text{max-width:1030px;margin:0 auto}
.og-welcome-text p{text-align:justify;font-size:15px;line-height:1.75;color:#555;margin:0 0 20px}

/* Why Global Media */
.og-why{background:#f5f5f5}
.og-bar{background:var(--og-red);color:#fff;font-size:clamp(20px,2.2vw,26px);font-weight:500;margin:0 0 26px;padding:10px 16px;letter-spacing:0}
.og-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;padding-inline:14px}
.og-why-text p{text-align:justify;font-size:15px;line-height:1.75;color:#333;margin:0 0 20px}
.og-why-img img{width:100%;aspect-ratio:411/288;object-fit:cover;display:block}

/* Our Mission */
.og-mission{background:#fff}
.og-mission-statement{max-width:1000px;margin:0 auto 36px;text-align:center;font-weight:700;font-size:clamp(15px,1.6vw,19px);line-height:1.6;color:#111}
.og-mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-inline:14px}
.og-mission-card{background:linear-gradient(180deg,#f0f0f0,#e6e6e6);overflow:hidden}
.og-mission-icon{height:172px;display:grid;place-items:center}
.og-mission-icon img{width:84px;height:84px;object-fit:contain}
.og-mission-bar{display:flex;align-items:center;height:46px;background:var(--og-dark);color:#fff;font-weight:700;font-size:15px}
.og-mission-bar::before{content:"";flex:none;width:46px;align-self:stretch;background:var(--og-red);margin-right:20px}

/* Upcoming Events */
.og-events{background:#fff;padding-block:clamp(24px,3vw,40px)}
.og-events .og-title{margin-bottom:8px}
.og-events .home-events-grid{margin-top:28px}

/* Work process */
.og-process{background:#6b6b6b}
.og-process .og-title{color:#fff;margin-bottom:44px}
.og-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-inline:14px}
.og-step{position:relative;border:1px solid rgba(255,255,255,.55);padding:5px}
.og-step-in{background:#fff;padding:26px 16px 22px;height:100%;text-align:center}
.og-step-icon{display:inline-block;color:#8a8a8a;margin-bottom:6px}
.og-step h3{font-size:19px;font-weight:500;color:#222;margin:0 0 12px}
.og-step h3 b{color:var(--og-red);font-weight:700;font-size:22px}
.og-step p{font-size:12.5px;line-height:1.7;color:#444;text-align:justify;margin:0}
.og-step:not(:last-child)::after{content:"\2022 \2022 \2022";position:absolute;right:-27px;top:50%;transform:translateY(-50%);color:#d8d8d8;font-size:10px;letter-spacing:2px;width:26px;text-align:center}

/* Our services */
.og-services{background:#efefef linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 42.2%,transparent 42.6%),linear-gradient(65deg,transparent 60%,rgba(255,255,255,.5) 60.2%,transparent 60.6%)}
.og-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 28px;padding-inline:14px}
.og-service{position:relative;display:block;margin-bottom:30px;color:inherit}
.og-service img{width:100%;aspect-ratio:323/238;object-fit:cover;display:block;background:#ddd}
.og-service-label{position:absolute;left:7%;right:7%;bottom:-27px;min-height:54px;display:grid;place-items:center;padding:6px 10px;background:#fff;border:1px solid #d9d9d9;font-weight:600;font-size:14.5px;color:#444;text-align:center;transition:color .25s}
.og-service:hover .og-service-label{color:var(--og-red)}

/* Quick enquiry */
.og-enquiry{background:#3d3d3d}
.og-enquiry .og-title{color:#fff;margin-bottom:34px}
.og-enquiry-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:34px;align-items:center;padding-inline:14px}
.og-enquiry-img img{width:100%;aspect-ratio:323/238;object-fit:cover;display:block}
.og-enquiry-form{display:flex;flex-direction:column;gap:14px}
.og-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.og-enquiry-form input,.og-enquiry-form textarea{width:100%;background:#fff;border:0;border-radius:0;padding:12px 14px;font:400 13px "Poppins","Manrope",Arial,sans-serif;color:#222}
.og-enquiry-form input::placeholder,.og-enquiry-form textarea::placeholder{color:#888}
.og-enquiry-form textarea{resize:vertical;min-height:110px}
.og-enquiry-form input:focus,.og-enquiry-form textarea:focus{outline:2px solid var(--og-red)}
.og-submit{align-self:center;margin-top:6px;background:var(--og-red);color:#fff;border:0;border-radius:999px;padding:11px 46px;font:600 13px "Poppins","Manrope",Arial,sans-serif;cursor:pointer;transition:background .25s,transform .25s}
.og-submit:hover{background:#a92d33;transform:translateY(-2px)}
.og-enquiry-ok,.og-enquiry-err{padding:14px 16px;font-size:14px;background:#fff;color:#222;border-left:4px solid var(--og-red)}
.og-enquiry-ok{border-left-color:#2e9e5b}

/* Latest work */
.og-work{background:#fff}
.og-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px;padding-inline:14px}
.og-work-item{display:block;overflow:hidden;background:#eee}
.og-work-item img{width:100%;aspect-ratio:323/238;object-fit:cover;display:block;transition:transform .6s}
.og-work-item:hover img{transform:scale(1.05)}
.og-work-more{text-align:center;margin:28px 0 0}
.og-work-more a{color:var(--og-red);font-weight:600;font-size:14px}

@media(max-width:991px){
  .og-process-grid{grid-template-columns:repeat(2,1fr)}
  .og-step:nth-child(2)::after{display:none}
  .og-services-grid,.og-work-grid,.og-mission-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .og-why-grid,.og-enquiry-grid{grid-template-columns:1fr}
  .og-mission-grid,.og-services-grid,.og-work-grid,.og-process-grid{grid-template-columns:1fr}
  .og-step::after{display:none}
  .og-row{grid-template-columns:1fr}
  .og-welcome-text p,.og-why-text p{text-align:left}
  .og-why-grid,.og-mission-grid,.og-process-grid,.og-services-grid,.og-enquiry-grid,.og-work-grid{padding-inline:0}
}
.og-services{background-color:#efefef;background-image:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.6) 42.2%,rgba(255,255,255,.6) 42.6%,transparent 42.8%),linear-gradient(65deg,transparent 60%,rgba(255,255,255,.55) 60.2%,rgba(255,255,255,.55) 60.6%,transparent 60.8%),linear-gradient(180deg,#f2f2f2,#e9e9e9)}
.og-process .og-title span{color:#ff6a70}

/* ===== Inner-page banner (original look): grey band + centred title box, no breadcrumb ===== */
.pb-band{margin-top:var(--header-h,112px);padding:clamp(44px,6vw,84px) 0;background-color:#e2e2e2;background-image:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 40.2%,rgba(255,255,255,.55) 40.6%,transparent 40.8%),linear-gradient(65deg,transparent 62%,rgba(255,255,255,.5) 62.2%,rgba(255,255,255,.5) 62.6%,transparent 62.8%),linear-gradient(180deg,#e9e9e9,#dcdcdc);background-size:cover;background-position:center;overflow:hidden}
.pb-band--photo{background-blend-mode:normal}
.pb-title{max-width:840px;margin:0 auto;padding:clamp(18px,2.6vw,30px) clamp(16px,3vw,36px);background:#4d4d4d;border-bottom:4px solid #cb3a40;color:#fff;text-align:center;font-family:"Poppins","Manrope","Segoe UI",Arial,sans-serif;font-weight:400;font-size:clamp(24px,3.6vw,44px);line-height:1.2;letter-spacing:0;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.pb-band--photo .pb-title{background:rgba(45,45,45,.86)}
.page-banner-full{margin-top:var(--header-h,112px)}
.pb-band{margin-top:0;padding-top:calc(var(--header-h,112px) + clamp(36px,5vw,70px))}

/* ===== Service / project detail photos: shown once, sharp, never over-cropped ===== */
.detail-split{align-items:center;gap:clamp(28px,5vw,64px)}
.detail-photo{width:100%;height:auto;aspect-ratio:500/368;object-fit:cover;border-radius:16px;box-shadow:0 14px 36px rgba(15,23,42,.14);display:block;background:#eee}
.detail-photo--wide{max-width:880px;margin:0 auto;aspect-ratio:800/550}
.detail-gallery-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:#eee}
.page-banner-photo-wrap{background:transparent;padding-block:32px}
.page-banner-photo{display:block;width:auto;max-width:min(100%,880px);height:auto;max-height:none;margin:0 auto;object-fit:contain;border-radius:16px}

/* Upcoming events: image tiles with the title centred below (original layout) */
.og-events{background-color:#f4f4f4;background-image:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.7) 42.2%,rgba(255,255,255,.7) 42.6%,transparent 42.8%),linear-gradient(65deg,transparent 60%,rgba(255,255,255,.6) 60.2%,rgba(255,255,255,.6) 60.6%,transparent 60.8%)}
.og-events-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 28px;margin-top:30px;padding-inline:14px}
.og-event{display:flex;flex-direction:column;align-items:center;text-align:center;color:#333;text-decoration:none}
.og-event-img{display:flex;align-items:center;justify-content:center;width:100%;max-width:255px;aspect-ratio:255/196;background:#fff;border:1px solid #d6d6d6;overflow:hidden;transition:box-shadow .3s,transform .3s}
.og-event-img img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
a.og-event:hover .og-event-img{box-shadow:0 10px 26px rgba(0,0,0,.14);transform:translateY(-3px)}
.og-event-ph{display:flex;flex-direction:column;align-items:center;color:#cb3a40;line-height:1}
.og-event-ph strong{font-size:54px;font-weight:600}
.og-event-ph em{font-style:normal;font-size:15px;color:#666;margin-top:6px;letter-spacing:.04em;text-transform:uppercase}
.og-event-title{margin-top:14px;max-width:255px;font-size:14px;line-height:1.7;color:#333}
.og-event-meta{margin-top:4px;font-size:12.5px;color:#777}
a.og-event:hover .og-event-title{color:#cb3a40}
@media(max-width:991px){.og-events-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.og-events-grid{grid-template-columns:1fr;padding-inline:0}.og-event-img{max-width:300px}}
@media(max-width:520px){.og-events-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}.og-event-img{max-width:none}.og-event-title{font-size:12.5px;line-height:1.55}.og-event-meta{font-size:11.5px}.og-event-ph strong{font-size:38px}}

/* Event page + list */
.og-events--page{padding-top:clamp(36px,5vw,64px)}
.og-events-empty{max-width:560px;margin:0 auto;text-align:center;color:#555}
.og-events-empty .og-submit{display:inline-block;margin-top:14px;text-decoration:none}
.og-event-page{padding-block:clamp(36px,5vw,72px);background:#fff;font-family:"Poppins","Manrope",Arial,sans-serif;color:#333}
.og-event-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start}
.og-event-media{background:#fff;border:1px solid #d6d6d6;padding:10px;display:flex;align-items:center;justify-content:center;min-height:260px}
.og-event-media img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block}
.og-event-ph--big{padding:60px 0}.og-event-ph--big strong{font-size:96px}.og-event-ph--big em{font-size:20px}
.og-event-info h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;color:#222;margin:0 0 16px;line-height:1.25}
.og-event-badge{display:inline-block;background:#eee;color:#666;font-size:12px;padding:4px 12px;margin-bottom:12px}
.og-event-facts{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid #e4e4e4}
.og-event-facts li{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid #e4e4e4;font-size:14.5px}
.og-event-facts span{flex:0 0 110px;color:#888}.og-event-facts strong{font-weight:500;color:#222}
.og-event-desc{font-size:15px;line-height:1.8;color:#555;margin-bottom:22px}
.og-event-actions{display:flex;flex-wrap:wrap;gap:12px}
.og-event-actions a{text-decoration:none;text-align:center}
.og-event-actions .og-submit{display:inline-block;margin:0}
.og-ghost{display:inline-block;padding:10px 26px;border:1px solid #cb3a40;border-radius:999px;color:#cb3a40;font:600 13px "Poppins","Manrope",Arial,sans-serif;transition:background .25s,color .25s}
.og-ghost:hover{background:#cb3a40;color:#fff}
.og-events--more{padding-block:clamp(36px,5vw,64px)}
@media(max-width:800px){.og-event-layout{grid-template-columns:1fr}.og-event-actions a{flex:1 1 100%}}
.og-event-page,.og-events--page,.og-events--more{--og-red:#cb3a40;--og-dark:#555}
.og-event-page .og-submit{display:inline-block;background:#cb3a40;color:#fff;border:0;border-radius:999px;padding:11px 34px;font:600 13px "Poppins","Manrope",Arial,sans-serif;text-decoration:none;transition:background .25s,transform .25s}
.og-event-page .og-submit:hover{background:#a92d33;transform:translateY(-2px)}
.og-events-empty .og-submit{background:#cb3a40;color:#fff;border-radius:999px;padding:11px 34px;font:600 13px "Poppins","Manrope",Arial,sans-serif}

/* ===== Event cards: border, soft shadow, equal height, hover lift ===== */
.og-events-grid{gap:26px;align-items:stretch}
.og-event{position:relative;height:100%;padding:14px 14px 18px;background:#fff;border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s,border-color .3s}
.og-event::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:#cb3a40;border-radius:8px 8px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .35s}
a.og-event:hover{transform:translateY(-5px);border-color:#cb3a40;box-shadow:0 14px 30px rgba(0,0,0,.14)}
a.og-event:hover::before{transform:scaleX(1)}
.og-event-img{max-width:none;width:100%;border:1px solid #e3e3e3;border-radius:4px;background:#fafafa}
a.og-event:hover .og-event-img{box-shadow:none;transform:none}
.og-event-title{max-width:none;font-weight:600;color:#222;margin-top:14px}
.og-event-meta{margin-bottom:12px}
.og-event-cta{margin-top:auto;font-size:13px;font-weight:600;color:#cb3a40;border-top:1px solid #eee;padding-top:12px;width:100%}
.og-event-cta i{font-style:normal;display:inline-block;transition:transform .25s}
a.og-event:hover .og-event-cta i{transform:translateX(4px)}
@media(max-width:520px){.og-event{padding:10px 10px 14px}.og-events-grid{gap:14px}}

/* Mission cards: the document text slides over the icon on hover, focus or tap */
.og-mission-card{position:relative;cursor:pointer;outline:none}
.og-mission-icon{transition:opacity .25s}
.og-mission-text{position:absolute;left:0;right:0;top:0;bottom:46px;padding:16px 18px;overflow:auto;background:#fff;color:#444;font-size:12.5px;line-height:1.65;text-align:justify;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s}
.og-mission-text p{margin:0 0 8px}.og-mission-text p:last-child{margin:0}
.og-mission-card:hover .og-mission-text,.og-mission-card:focus-visible .og-mission-text,.og-mission-card.is-open .og-mission-text{opacity:1;visibility:visible;transform:none}
.og-mission-card:hover .og-mission-icon,.og-mission-card.is-open .og-mission-icon{opacity:0}
.og-mission-hint{margin-left:auto;margin-right:16px;font-style:normal;font-size:20px;line-height:1;transition:transform .25s}
.og-mission-card.is-open .og-mission-hint,.og-mission-card:hover .og-mission-hint{transform:rotate(45deg)}
.og-mission-card:focus-visible{box-shadow:0 0 0 3px rgba(203,58,64,.45)}
@media(max-width:991px){.og-mission-icon{height:150px}.og-mission-card{min-height:196px}.og-mission-text{font-size:13px}}
@media(max-width:991px){
  .og-mission-card{min-height:0}
  .og-mission-card .og-mission-icon{height:150px}
  .og-mission-card.is-open .og-mission-icon{display:none}
  .og-mission-card.is-open .og-mission-text{position:static;opacity:1;visibility:visible;transform:none;overflow:visible;padding:18px 18px 16px;background:#fff}
  .og-mission-card:hover .og-mission-text:not(.x){transition:none}
}
@media(hover:none){.og-mission-card:hover .og-mission-text{opacity:0;visibility:hidden}.og-mission-card.is-open .og-mission-text{opacity:1;visibility:visible}.og-mission-card:hover .og-mission-icon{opacity:1}.og-mission-card.is-open .og-mission-icon{opacity:0}}
@media(min-width:992px){
  .og-mission-icon{height:204px}
  .og-mission-text{padding:12px 16px;font-size:12px;line-height:1.55}
  .og-mission-text p{margin:0 0 6px}
}
.og-mission-text p{font-size:inherit;line-height:inherit;color:inherit;text-align:inherit}

/* ===== Service gallery: image cards + Fancybox-style viewer ===== */
.svc-gallery-section{background:#fff;padding-top:0;padding-bottom:clamp(44px,6vw,84px)}
.svc-gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.svc-gallery-head .section-heading{margin:0}
.svc-gallery-count{font-size:13px;font-weight:600;color:var(--text-secondary,#4b5563);background:var(--card-blue,#f5f9ff);border:1px solid var(--card-blue-border,#d9e5f2);border-radius:999px;padding:7px 16px}
.svc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--card-blue-border,#d9e5f2);border-radius:18px;overflow:hidden;box-shadow:0 2px 12px rgba(15,23,42,.06);transition:transform .35s,box-shadow .35s,border-color .35s}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(15,23,42,.16);border-color:var(--navy,#071b49)}
.svc-card-img{position:relative;display:block;aspect-ratio:16/11;background:#0b0f1a;overflow:hidden;cursor:zoom-in}
.svc-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.svc-card:hover .svc-card-img img{transform:scale(1.07)}
.svc-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,73,0) 55%,rgba(7,27,73,.55));opacity:0;transition:opacity .35s}
.svc-card:hover .svc-card-img::after{opacity:1}
.svc-card-num{position:absolute;left:14px;top:14px;z-index:2;min-width:38px;height:38px;padding:0 10px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.94);color:var(--navy,#071b49);font-weight:700;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.svc-card-zoom{position:absolute;right:14px;bottom:14px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--navy,#071b49);box-shadow:0 8px 20px rgba(0,0,0,.28);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s,transform .3s}
.svc-card:hover .svc-card-zoom,.svc-card-img:focus-visible .svc-card-zoom{opacity:1;transform:none}
.svc-card-img:focus-visible{outline:3px solid var(--navy,#071b49);outline-offset:-3px}
.svc-card-body{display:grid;align-content:start;gap:6px;padding:18px 20px 22px;flex:1;background:var(--card-blue,#f5f9ff);border-top:3px solid var(--navy,#071b49)}
.svc-card-body h3{margin:0;font-size:17px;line-height:1.35;color:var(--text-primary,#111827)}
.svc-card-body p{margin:0;font-size:14px;line-height:1.65;color:var(--text-secondary,#4b5563);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:991px){.svc-gallery{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.svc-gallery{grid-template-columns:1fr;gap:18px}.svc-card-zoom{opacity:1;transform:none}}

/* viewer */
.fbx-lock{overflow:hidden}
.fbx{position:fixed;inset:0;z-index:3000;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;background:rgba(4,8,18,.94);opacity:0;transition:opacity .25s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fbx[hidden]{display:none}
.fbx.is-open{opacity:1}
.fbx-top{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;color:#dfe6f5;font-size:14px;font-weight:600;letter-spacing:.04em}
.fbx-close{width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .2s}
.fbx-close:hover{background:rgba(255,255,255,.26)}
.fbx-stage{grid-column:2;grid-row:2;margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 6px}
.fbx-img{max-width:100%;max-height:calc(100vh - 250px);object-fit:contain;border-radius:8px;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:opacity .25s}
.fbx.is-loading .fbx-img{opacity:.25}
.fbx-cap{display:grid;gap:4px;max-width:820px;text-align:center;color:#e8edf8;line-height:1.55}
.fbx-cap[hidden]{display:none}
.fbx-cap strong{font-size:17px}
.fbx-cap span{font-size:14px;color:#b9c4dc}
.fbx-nav{grid-row:2;align-self:center;width:52px;height:52px;margin:0 12px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;transition:background .2s,transform .2s}
.fbx-nav:hover{background:rgba(255,255,255,.28);transform:scale(1.07)}
.fbx-nav[hidden]{display:none}
.fbx-prev{grid-column:1}.fbx-next{grid-column:3}
.fbx-thumbs{grid-column:1/-1;grid-row:3;display:flex;gap:10px;justify-content:center;overflow-x:auto;padding:12px 16px 18px;scrollbar-width:thin}
.fbx-thumbs[hidden]{display:none}
.fbx-thumb{flex:none;width:76px;height:52px;border:2px solid transparent;border-radius:8px;background-size:cover;background-position:center;background-color:#111;opacity:.55;cursor:pointer;transition:opacity .2s,border-color .2s,transform .2s}
.fbx-thumb:hover{opacity:.9}
.fbx-thumb.is-active{opacity:1;border-color:#fff;transform:translateY(-3px)}
@media(max-width:700px){
  .fbx{grid-template-columns:1fr}
  .fbx-stage{grid-column:1}
  .fbx-nav{position:absolute;top:50%;width:42px;height:42px;margin:0 8px;font-size:18px;background:rgba(0,0,0,.45)}
  .fbx-prev{left:0}.fbx-next{right:0}
  .fbx-img{max-height:calc(100vh - 260px)}
  .fbx-thumb{width:60px;height:42px}
}
.svc-card-body.is-plain{padding:12px 20px;align-content:center}
.svc-card-view{font-size:13.5px;font-weight:600;color:var(--navy,#071b49)}
.svc-card-view i{font-style:normal;display:inline-block;transition:transform .25s}
.svc-card:hover .svc-card-view i{transform:translateX(4px)}

/* ===== Service page: intro card ===== */
.svc-intro{padding-block:clamp(32px,4vw,56px) 0}
.svc-intro-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;background:var(--card-blue,#f5f9ff);border:1px solid var(--card-blue-border,#d9e5f2);border-left:5px solid var(--navy,#071b49);border-radius:18px;padding:clamp(22px,3.4vw,44px);box-shadow:0 10px 30px rgba(15,23,42,.06)}
.svc-intro-lead{margin:8px 0 22px;font-size:clamp(18px,2vw,23px);line-height:1.55;color:var(--text-primary,#111827);font-weight:500}
.svc-intro-actions{display:flex;flex-wrap:wrap;gap:12px}
.svc-intro-actions .btn{padding:13px 26px}
.svc-intro-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.svc-intro-points li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--card-blue-border,#d9e5f2);border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--text-primary,#111827)}
.svc-intro-points svg{flex:none;margin-top:1px;padding:3px;width:22px;height:22px;border-radius:50%;background:var(--navy,#071b49);color:#fff}
@media(max-width:860px){.svc-intro-card{grid-template-columns:1fr;border-left-width:1px;border-top:5px solid var(--navy,#071b49)}}
@media(max-width:520px){.svc-intro-actions .btn{flex:1 1 100%}}
.svc-gallery-head{margin-bottom:24px}

/* Service intro: short description + one button only */
.svc-intro-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding:clamp(20px,3vw,34px) clamp(22px,3.4vw,44px)}
.svc-intro-lead{margin:0;flex:1 1 380px;min-width:0}
.svc-intro-card .btn{flex:none}
@media(max-width:520px){.svc-intro-card .btn{flex:1 1 100%}}
.svc-gallery-section .svc-gallery-head{padding-top:clamp(22px,3vw,34px)}
@media(max-width:991px){.svc-gallery-section{padding-top:0}}
.svc-intro{overflow:visible;z-index:1}

/* =====================================================================
   BLOG DETAIL (dynamic, database driven)
   Change the look of the whole page from these variables.
   ===================================================================== */
.bl-page{
  --bl-font:"Poppins","Manrope","Segoe UI",Arial,sans-serif;
  --bl-text:#222; --bl-muted:#555; --bl-link:#1a6bb5; --bl-accent:#cb3a40;
  --bl-title-bg:#cb3a40; --bl-title-color:#fff; --bl-title-radius:4px;
  --bl-box-bg:#fff9ea; --bl-box-border:#e8dcb8; --bl-box-radius:10px; --bl-box-pad:20px 24px; --bl-box-heading:#cb3a40;
  --bl-seo-bg:#eef4fc; --bl-seo-border:#d3e0f2;
  --bl-divider:#d9534f;
  font-family:var(--bl-font);color:var(--bl-text);
  padding:calc(var(--header-h,112px) + 18px) 0 clamp(36px,5vw,64px);background:#fff;
}
.bl-wrap{max-width:1100px}
.bl-crumbs{margin-bottom:18px}
.bl-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0;font-size:13px;color:var(--bl-muted)}
.bl-crumbs li{display:inline-flex;align-items:center;min-width:0}
.bl-crumbs li+li::before{content:"\203A";margin:0 8px;color:#999}
.bl-crumbs a{color:var(--bl-text)}.bl-crumbs a:hover{color:var(--bl-accent)}
.bl-crumbs [aria-current]{color:var(--bl-muted);overflow-wrap:anywhere}
.bl-titlebar{margin:0 0 14px;padding:clamp(14px,2vw,20px) clamp(16px,3vw,32px);background:var(--bl-title-bg);color:var(--bl-title-color);text-align:center;border-radius:var(--bl-title-radius);font-family:var(--bl-font);font-weight:500;font-size:clamp(20px,2.8vw,32px);line-height:1.3;letter-spacing:0;overflow-wrap:anywhere}
.bl-short{margin:0 0 26px;font-size:12.5px;line-height:1.7;color:var(--bl-muted)}

.bl-intro{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(20px,3.5vw,40px);align-items:start;margin-bottom:24px}
.bl-intro.is-noimg{grid-template-columns:1fr}
.bl-intro-img{margin:0}
.bl-intro-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid #e3e3e3;border-radius:8px;background:#f3f3f3;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.bl-rich{font-size:15px;line-height:1.85;color:var(--bl-text);overflow-wrap:anywhere}
.bl-rich p{margin:0 0 14px;font-size:inherit;line-height:inherit;color:inherit}
.bl-rich img{max-width:100%;height:auto;border-radius:8px}
.bl-rich a{color:var(--bl-link);text-decoration:underline}
.bl-rich h2,.bl-rich h3,.bl-rich h4{font-family:var(--bl-font);margin:22px 0 10px;line-height:1.35;color:#111}
.bl-rich ul,.bl-rich ol{margin:0 0 14px;padding-left:22px}
.bl-rich blockquote{margin:16px 0;padding:6px 18px;border-left:4px solid var(--bl-accent);color:var(--bl-muted)}
.bl-rich iframe{max-width:100%;border:0}
.bl-rich table{max-width:100%;display:block;overflow-x:auto}

.bl-contact{list-style:none;margin:14px 0 8px;padding:0;display:grid;gap:6px;font-size:15px}
.bl-contact li{display:flex;gap:10px;align-items:flex-start}
.bl-contact svg{flex:none;margin-top:4px}
.bl-contact a{font-weight:500}
.bl-contact .is-phone,.bl-contact .is-phone a{color:#c0392b}
.bl-contact .is-wa,.bl-contact .is-wa a{color:#1e9e4a}
.bl-contact .is-mail,.bl-contact .is-mail a{color:var(--bl-link)}
.bl-contact a:hover{text-decoration:underline}
.bl-enquiry{margin:8px 0 0;font-size:14.5px}
.bl-enquiry a{color:var(--bl-text);border-bottom:1px dashed var(--bl-accent);padding-bottom:1px}
.bl-enquiry a:hover{color:var(--bl-accent)}

.bl-divider{border:0;border-top:1px dashed var(--bl-divider);margin:26px 0 22px;opacity:.85}
.bl-kwheads{display:grid;gap:2px;margin-bottom:22px}
.bl-kwheads h2{margin:0;font-family:var(--bl-font);font-weight:400;font-size:clamp(17px,2.1vw,22px);line-height:1.5;color:var(--bl-link);letter-spacing:0;overflow-wrap:anywhere}

.bl-sec{margin:0 0 20px}
.bl-sec-title{margin:0 0 8px;font-family:var(--bl-font);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:#111;letter-spacing:0}
.bl-sec-title--sm{font-size:19px}
.bl-sec-sub{margin:0 0 10px;color:var(--bl-muted);font-size:14.5px}
.bl-box{background:var(--bl-box-bg);border:1px solid var(--bl-box-border);border-radius:var(--bl-box-radius);padding:var(--bl-box-pad)}
.bl-box-title{margin:0 0 8px;font-family:var(--bl-font);font-weight:500;font-size:clamp(18px,2.1vw,21px);line-height:1.4;color:var(--bl-box-heading);letter-spacing:0}
.bl-box .bl-rich{font-size:13.5px;line-height:1.75}
.bl-box .bl-rich p:last-child{margin-bottom:0}
.bl-sec--image{margin:0 0 20px}
.bl-sec--image img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid #e6e6e6}
.bl-sec--image figcaption{margin-top:8px;font-size:13px;color:var(--bl-muted);text-align:center}
.bl-sec--image_text{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start}
.bl-sec--image_text.image-right{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.bl-sec--image_text.image-right .bl-it-img{order:2}
.bl-it-img{margin:0}.bl-it-img img{width:100%;height:auto;border-radius:8px;display:block;border:1px solid #e6e6e6}
.bl-sec--quote{margin:0 0 20px;padding:14px 22px;border-left:5px solid var(--bl-accent);background:#faf4f4;border-radius:0 8px 8px 0}
.bl-sec--quote .bl-rich{font-size:17px;font-style:italic}
.bl-sec--quote cite{display:block;margin-top:6px;font-size:13px;font-style:normal;color:var(--bl-muted)}
.bl-list{margin:0 0 4px;padding-left:22px;line-height:1.85;font-size:15px}
.bl-kwlinks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bl-kwlinks li{font-size:clamp(16px,2vw,20px);line-height:1.55;color:var(--bl-link)}
.bl-kwlinks a{color:var(--bl-link)}.bl-kwlinks a:hover{text-decoration:underline}
.bl-btnrow{margin:14px 0 0}
.bl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;border-radius:999px;background:var(--bl-accent);color:#fff;border:1px solid var(--bl-accent);font:600 13.5px var(--bl-font);text-decoration:none;transition:background .25s,transform .25s}
.bl-btn:hover{background:#a92d33;border-color:#a92d33;transform:translateY(-2px);color:#fff}
.bl-btn--ghost{background:#fff;color:var(--bl-accent)}.bl-btn--ghost:hover{color:#fff}
.bl-contactbox .bl-contact{margin-top:10px}

.bl-longtext{margin:6px 0 20px}
.bl-seo-box{margin:6px 0 22px;padding:14px 16px;background:var(--bl-seo-bg);border:1px solid var(--bl-seo-border);border-radius:8px;font-size:11.5px;line-height:1.75;color:#3a4a60;overflow-wrap:anywhere}
.bl-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.bl-tags a{padding:5px 14px;border:1px solid #d9d9d9;border-radius:999px;font-size:13px;color:var(--bl-muted);background:#fff;transition:border-color .2s,color .2s}
.bl-tags a:hover{border-color:var(--bl-accent);color:var(--bl-accent)}
.bl-cta{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:26px;padding:clamp(18px,3vw,28px);border-radius:12px;background:#f3f3f3;border:1px solid #e2e2e2}
.bl-cta h3{margin:0 0 4px;font-family:var(--bl-font);font-size:20px;font-weight:600}
.bl-cta p{margin:0;font-size:14px;color:var(--bl-muted)}
.bl-cta-actions{display:flex;flex-wrap:wrap;gap:10px}

@media(max-width:800px){
  .bl-intro,.bl-sec--image_text,.bl-sec--image_text.image-right{grid-template-columns:1fr}
  .bl-sec--image_text.image-right .bl-it-img{order:0}
  .bl-intro-img img{max-height:340px}
}
@media(max-width:520px){
  .bl-page{padding-top:calc(var(--header-h,90px) + 12px)}
  .bl-box{padding:16px}
  .bl-cta-actions{width:100%}.bl-cta-actions .bl-btn{flex:1 1 100%}
  .bl-crumbs ol{font-size:12.5px}
}
.blog-tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.blog-tagrow a{padding:4px 13px;border:1px solid #d9d9d9;border-radius:999px;font-size:13px;color:#555;background:#fff;transition:border-color .2s,color .2s}
.blog-tagrow a:hover,.blog-tagrow a.is-active{border-color:#cb3a40;color:#cb3a40}
/* the site-wide "section" padding must not leak into blog sections */
.bl-page section.bl-sec{padding-block:0;overflow:visible}
.bl-page section.bl-box{padding:var(--bl-box-pad)}
.bl-sec--image_text.is-noimg{grid-template-columns:1fr}
.bl-intro-img img{aspect-ratio:auto;height:auto;max-height:440px;object-fit:contain;background:#fff}

@media (min-width: 993px) { .site-nav { margin-left: auto; } }

.svc-links{padding-block:clamp(28px,4vw,48px)}
.svc-links-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.svc-links-list a{color:var(--navy,#071b49);font-weight:600;border-bottom:1px solid transparent}.svc-links-list a:hover{border-color:currentColor}
.bl-more-links{margin:18px 0 0;font-size:14px;color:#555}.bl-more-links a{color:#1a6bb5;text-decoration:underline}