@font-face {
  font-family: 'Eras Demi Bold ITC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/eras-demi-bold.ttf') format('truetype');
}
:root {
  --primary: #003366;
  --accent: #0066cc;
  --accent-hover: #0052a3;
  --accent-secondary: #0099ff;
  --white: #ffffff;
  --off-white: #f0f4f8;
  --light-gray: #dce4ed;
  --medium-gray: #8a9bb0;
  --text-dark: #1a202c;
  --text-light: #5a6b80;
  --danger: #dc3545;
  --success: #28a745;
  --shadow-sm: 0 2px 8px rgba(0, 51, 102, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 51, 102, 0.12);
  --shadow-lg: 0 10px 40px rgba(0, 51, 102, 0.18);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: all 0.2s ease;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-height: 84px;
  /* Hero + ticker palette */
  --navy-950: #06121f;
  --navy-900: #0a1c33;
  --amber-500: #ffb300;
  --amber-400: #ffc531;
  --amber-300: #ffd976;
  --ease: cubic-bezier(.65, 0, .35, 1);
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul {
  list-style: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
}
.section-padding {
  padding: 60px 0;
}
.container-fluid {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 1cm;
  padding-right: 1cm;
}
.bg-off-white {
  background-color: var(--off-white);
}
.section-subtitle {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 12px;
}
/* Short 3-character accent rule sitting directly beneath the subtitle.
   Centred inside the inline-block so it lines up under the middle of the
   text in both left-aligned and centred sections. */
.section-subtitle::after {
  content: '';
  display: block;
  width: 2.2em;
  height: 3px;
  margin: 8px auto 0;
  background: var(--accent);
  border-radius: 2px;
}
.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--primary);
}
.section-desc {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 680px;
  line-height: 1.8;
}
.btn-primary-custom {
  background: var(--accent);
  color: var(--white);
  padding: 14px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-primary-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.btn-primary-custom:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
  color: var(--white);
}
.btn-primary-custom:hover::before {
  left: 100%;
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn-accent:hover {
  background: var(--accent-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
}
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0;
  transition: var(--transition);
  background: #ffffff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.main-nav.scrolled {
  background: #ffffff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.main-nav .container-fluid {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding-right: 0;
}
.main-nav .navbar {
  padding: 0;
  margin: 0;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.main-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.main-nav .nav-logo img {
  height: 62px;
  width: auto;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
}
.main-nav .nav-logo img.nav-wordmark {
  height: 30px;
  width: auto;
}
.main-nav .nav-logo:hover {
  cursor: pointer;
}
.main-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}
.main-nav .nav-menu .nav-item {
  position: relative;
}
.main-nav .nav-menu .nav-link {
  color: #003366;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  padding: 28px 22px;
  display: block;
  transition: var(--transition-fast);
  position: relative;
  text-transform: uppercase;
}
.main-nav .nav-menu .nav-link::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: center;
}
.main-nav .nav-menu .nav-link:hover,
.main-nav .nav-menu .nav-link.active {
  color: var(--accent);
}
.main-nav .nav-menu .nav-link:hover::after,
.main-nav .nav-menu .nav-link.active::after {
  transform: scaleX(1);
}
/* "Electrical Safety Training Courses" is 35 characters - more than twice the
   length of any other nav label. At the standard .nav-link size it needs 316px
   and pushes the whole bar to ~1370px, which overflows every laptop width below
   1440px. Only this one item is tightened; the other five keep the full size. */
.main-nav .nav-menu .nav-link-external {
  padding-left: 14px;
  padding-right: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
}
.main-nav .nav-menu .nav-link-external::after {
  left: 14px;
  right: 14px;
}
/* The logo block keeps its full 62px / 30px size at every desktop width and is
   only reduced on small screens (see the 991px query further down), so the
   brand mark never shrinks just because the menu bar is a little tight. */
.lang-item {
  position: relative;
  margin-left: auto;
  /* Was 2cm (~76px), which pushed the bar well past the edge on mid-size
     screens for no visual benefit. */
  margin-right: 14px;
  display: flex;
  align-items: center;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f4f8;
  border: 1px solid rgba(0, 51, 102, 0.18);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #003366;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.lang-toggle:hover,
.lang-item.open .lang-toggle {
  border-color: var(--accent);
  background: #e6eef7;
  box-shadow: 0 2px 10px rgba(0, 102, 204, 0.15);
}
.lang-flag {
  width: 26px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  display: inline-flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  line-height: 0;
}
.lang-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lang-caret {
  font-size: 0.7rem;
  color: #5a6b80;
  transition: transform 0.3s ease;
}
.lang-item.open .lang-caret {
  transform: rotate(180deg);
}
.lang-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 51, 102, 0.18);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 100;
}
.lang-item.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-dropdown li {
  margin: 0;
}
.lang-dropdown .lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #2b3a4a;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-dropdown .lang-option:hover {
  background: #eef4fb;
  color: #0066cc;
}
.lang-dropdown .lang-option.active {
  background: #e6eef7;
  color: #0066cc;
  font-weight: 600;
}
.main-nav .nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.main-nav .nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--primary);
  margin: 5px 0;
  transition: var(--transition);
  border-radius: 2px;
}
.main-nav.scrolled .nav-toggle span {
  background: var(--primary);
}
.image-showcase {
  padding: 44px 0;
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
.showcase-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.showcase-scroll::-webkit-scrollbar {
  display: none;
}
.showcase-wrap {
  position: relative;
}
.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 51, 102, 0.55);
  color: #fff;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.showcase-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.08);
}
.showcase-arrow-prev {
  left: 6px;
}
.showcase-arrow-next {
  right: 6px;
}
.showcase-track {
  display: flex;
  width: max-content;
  animation: showcase-marquee 55s linear infinite;
}
.showcase-scroll:hover .showcase-track {
  animation-play-state: paused;
}
@keyframes showcase-marquee{from {
    transform: translateX(0);
  }
to {
    transform: translateX(-50%);
  }
}
.showcase-grid {
  display: flex;
  flex-wrap: nowrap;
}
.showcase-grid .showcase-card {
  flex: 0 0 auto;
  width: 340px;
  margin-right: 20px;
}
.image-showcase .showcase-subtitle {
  color: var(--accent-secondary);
}
.image-showcase .showcase-title {
  color: var(--white);
}
.showcase-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 260px;
  cursor: pointer;
  transition: var(--transition);
}
.showcase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
  filter: brightness(1.08);
}
.showcase-card:hover img {
  transform: scale(1.15);
}
.showcase-card .showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 37, 64, 0.45), transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: var(--transition);
}
.showcase-card .showcase-overlay h5 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  transform: translateY(10px);
  transition: transform 0.4s ease;
}
.showcase-card:hover .showcase-overlay h5 {
  transform: translateY(0);
}
.showcase-card .showcase-overlay .showcase-line {
  width: 30px;
  height: 3px;
  background: var(--accent);
  margin-top: 8px;
  transform: scaleX(0);
  transition: transform 0.4s ease 0.1s;
  transform-origin: left;
}
.showcase-card:hover .showcase-overlay .showcase-line {
  transform: scaleX(1);
}
.showcase-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.showcase-lightbox.active {
  display: flex;
  opacity: 1;
}
.showcase-lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 92%;
}
.showcase-lightbox-content img {
  max-width: 100%;
  max-height: 68vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.showcase-lightbox-caption {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-sm);
  padding: 16px 24px;
  max-width: 100%;
  text-align: center;
}
.showcase-lightbox-caption .showcase-lightbox-label {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.showcase-lightbox .showcase-lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.showcase-lightbox .showcase-lightbox-close:hover {
  background: var(--accent);
}
.showcase-lightbox .showcase-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.showcase-lightbox .showcase-lightbox-nav:hover {
  background: var(--accent);
}
.showcase-lightbox .showcase-lightbox-prev {
  left: 30px;
}
.showcase-lightbox .showcase-lightbox-next {
  right: 30px;
}
.client-item {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 130px;
  transition: var(--transition);
  overflow: hidden;
}
.client-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.client-item img {
  width: 100%;
  max-width: 160px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: 1;
  transition: var(--transition);
}
.about-intro {
  position: relative;
  overflow: hidden;
}
.about-intro .intro-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.about-intro .intro-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.about-intro .intro-image:hover img {
  transform: scale(1.05);
}
.about-intro-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}
.about-intro-content {
  text-align: left;
}
.about-intro-media {
  display: flex;
  justify-content: center;
}
.about-intro-text .section-subtitle {
  margin-bottom: 12px;
}
.about-intro-text .section-desc {
  max-width: 720px;
  margin: 0 0 30px;
  text-align: justify;
}
.about-intro-media .intro-image-center {
  max-width: 720px;
}
.story-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.story-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 16px;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-light);
  text-align: justify;
}
.story-list li::before {
  content: '\f0da';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
}
.story-tagline {
  margin: 20px 0 0;
  padding: 16px 22px;
  background: var(--off-white);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
}
.story-tagline .story-tagline-words {
  color: var(--accent);
  font-style: italic;
  white-space: nowrap;
}
.page-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Navy backing so a video banner has somewhere to sit while it loads. Without
     it the box fell through to body's white, leaving the white banner heading and
     tagline invisible until the first frame painted, then popping in. */
  background: var(--primary);
}
/* The Gallery banner is a video rather than a photo, so the fill rule has to
   cover both elements. They are laid out identically: pinned to the banner box,
   cropped to cover it. */
.page-banner img,
.page-banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* brightness()/saturate() are per-pixel colour operations, so they sharpen
     nothing and blur nothing - unlike a scale() or blur(), which would resample
     the frame. Keeps the Gallery video crisp. */
  filter: brightness(1.06) saturate(1.12);
}
/* The wash used to run 90% navy to 60% black, which left every photograph and the
   Gallery video barely visible. It is now a light 135deg pass that keeps the white
   banner copy readable while letting the media show at close to source brightness.
   All four banners (About, Solutions, Gallery, Contact) use this one rule, so the
   former .page-banner--bright variant and its extra brightness filter are gone. */
.page-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 37, 64, 0.34), rgba(0, 0, 0, 0.16));
  z-index: 1;
}
.page-banner .banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  padding-top: var(--nav-height);
}
.page-banner .banner-content h1 {
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  color: var(--white);
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 2px 16px rgba(3, 10, 20, .7), 0 1px 3px rgba(3, 10, 20, .55);
}
.page-banner .banner-content .banner-tagline {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  font-weight: 500;
  max-width: 900px;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 18px;
  text-shadow: 0 1px 12px rgba(3, 10, 20, .7), 0 1px 3px rgba(3, 10, 20, .55);
}
.page-banner .banner-content .breadcrumb {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  text-shadow: 0 1px 10px rgba(3, 10, 20, .7);
}
.page-banner .banner-content .breadcrumb a {
  color: var(--accent);
}
.page-banner .banner-content .container-fluid {
  margin-left: 0;
}
.page-banner .banner-content .breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- Brochure download button (row beside the page banner) ---------- */
/* The button lives in normal flow directly under the banner, right-aligned
   with the banner copy because both use the same container class. */
.banner-brochure-bar {
  padding-top: 26px;
}
/* The shared .container-fluid sets `margin: 0 auto`, and auto margins beat
   justify-content on a flex item - which silently centres the button instead of
   right-aligning it. Making the container a full-width flex row puts the button
   flush with the right gutter every other section uses. */
.banner-brochure-bar .container-fluid {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.banner-brochure {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-left: 4px solid var(--accent);
  color: var(--primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,
    transform 0.3s ease;
}
/* Static button: only a small lift on hover, no swinging motion. */
.banner-brochure:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  border-left-color: var(--primary);
  box-shadow: var(--shadow-md);
  color: var(--primary);
}
.banner-brochure > i {
  font-size: 1.65rem;
  line-height: 1;
  color: var(--danger);
  transition: transform 0.3s ease;
}
.banner-brochure:hover > i { transform: translateY(2px); }
.banner-brochure-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.banner-brochure-text strong {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .banner-brochure-bar { padding-top: 18px; }
}
@media (max-width: 575px) {
  .banner-brochure {
    padding: 10px 16px 10px 13px;
    gap: 9px;
  }
  .banner-brochure > i { font-size: 1.35rem; }
  .banner-brochure-text strong { font-size: 0.85rem; }
}
.vision-mission-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.vision-mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--accent);
  transition: height 0.5s ease;
}
.vision-mission-card:hover::before {
  height: 100%;
}
.vision-mission-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.vision-mission-card .vm-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 24px;
}
.vision-mission-card h3 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: var(--primary);
}
.vision-mission-card p {
  color: var(--text-light);
  line-height: 1.8;
}
.vision-mission-card .story-list {
  margin: 12px 0 16px;
}
.vision-mission-card .story-list li {
  margin-bottom: 10px;
  text-align: left;
}
.story-list-aspire {
  margin: 20px 0 0;
  font-weight: 600;
  color: var(--primary);
}
.vm-quote {
  margin-top: 16px !important;
  padding: 16px 20px;
  background: var(--off-white);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-style: italic;
  color: var(--accent);
}
.safety-section {
  position: relative;
  overflow: hidden;
}
.safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 102, 204, 0.12);
  border: 1px solid rgba(0, 102, 204, 0.3);
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.safety-mantra {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.safety-mantra-item {
  background: var(--white);
  padding: 20px 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
  flex: 1;
  min-width: 150px;
  border-left: 4px solid var(--accent);
  transition: var(--transition);
}
.safety-mantra-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.safety-mantra-item strong {
  display: block;
  font-size: 1.1rem;
  color: var(--primary);
  text-transform: uppercase;
}
.testimonials-section {
  background: var(--off-white);
  overflow: hidden;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 40px 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
  margin: 15px;
  transition: var(--transition);
  height: 100%;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}
.testimonial-card .quote-icon {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 16px;
}
.testimonial-card .testimonial-text {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 24px;
}
.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-card .testimonial-author .author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
}
.testimonial-card .testimonial-author .author-info h6 {
  margin-bottom: 2px;
  font-size: 0.95rem;
  color: var(--text-dark);
}
.testimonial-card .testimonial-author .author-info span {
  font-size: 0.8rem;
  color: var(--medium-gray);
}
.clients-section {
  padding: 40px 0;
  background: var(--white);
}
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  height: 300px;
  cursor: pointer;
  transition: var(--transition);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img {
  transform: scale(1.1);
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.active {
  display: flex;
  opacity: 1;
}
.lightbox img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.lightbox .lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.lightbox .lightbox-close:hover {
  background: var(--accent);
}
.lightbox .lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.lightbox .lightbox-nav:hover {
  background: var(--accent);
}
.lightbox .lightbox-prev {
  left: 30px;
}
.lightbox .lightbox-next {
  right: 30px;
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}
.contact-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.contact-card .cc-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25);
}
.contact-card .cc-icon i {
  font-size: 22px;
}
.contact-card h3 {
  font-size: 17px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}
.contact-card p {
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.08);
  border: 1px solid rgba(0, 51, 102, 0.12);
}
.map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.08);
  border: 1px solid rgba(0, 51, 102, 0.12);
}
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.9);
}
.map-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(0, 51, 102, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  max-width: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.map-overlay h4 {
  color: #ffcc00;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.map-overlay p {
  font-size: 13px;
  color: #d5e0f2;
  line-height: 1.6;
  margin: 0;
}
.map-overlay [hidden] {
  display: none;
}
.map-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.map-pane .map-wrap {
  flex: 1 1 auto;
}
.map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.map-tab {
  padding: 9px 16px;
  border: 1px solid rgba(204, 0, 0, 0.18);
  border-radius: 999px;
  background: var(--white);
  color: #cc0000;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.map-tab:hover {
  border-color: #cc0000;
  color: #cc0000;
}
.map-tab.is-active {
  background: #cc0000;
  border-color: #cc0000;
  color: #fff;
}
.map-tab:focus-visible {
  outline: 2px solid #e60000;
  outline-offset: 2px;
}
.cert-section {
  background: var(--off-white);
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.cert-item {
  position: relative;
  display: grid;
  place-items: center;
  padding: 22px;
  min-height: 132px;
  background: var(--white);
  border: 1px solid rgba(0, 51, 102, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.06);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s, border-color 0.35s;
}
.cert-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.cert-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.4s, transform 0.4s ease;
}
.cert-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 102, 204, 0.18);
  border-color: var(--accent);
}
.cert-item:hover::before {
  opacity: 1;
  left: 130%;
  transition: opacity 0.2s, left 0.7s ease;
}
.cert-item:hover img {
  animation: certPop 0.6s ease;
}
@keyframes certPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
[data-country="sg"] .o-icon { background: linear-gradient(135deg, #CC0000, #990000); color: #fff; }
[data-country="my"] .o-icon { background: linear-gradient(135deg, #CC0000, #990000); color: #fff; }
[data-country="id"] .o-icon { background: linear-gradient(135deg, #CC0000, #990000); color: #fff; }
[data-country="sg"] .country-company { color: #CC0000; }
[data-country="my"] .country-company { color: #CC0000; }
[data-country="id"] .country-company { color: #CC0000; }
.o-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.office {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.office:last-child { margin-bottom: 0; }
.office h4 {
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--primary);
}
.office p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}
/* Phone and email lines inside an office block. They inherit the paragraph's
   colour so they read as body text, with the underline only on hover. */
.office .office-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
  overflow-wrap: anywhere;
}
.office .office-link:hover,
.office .office-link:focus-visible {
  color: var(--primary);
  border-bottom-color: currentColor;
}
.country-company {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.form-group {
  margin-bottom: 24px;
  position: relative;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-control {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--light-gray);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--off-white);
  transition: var(--transition-fast);
  font-family: var(--font-body);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}
.form-control::placeholder {
  color: var(--medium-gray);
}
textarea.form-control {
  resize: vertical;
  min-height: 130px;
}
.form-error {
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 6px;
  display: none;
}
.form-group.error .form-control {
  border-color: var(--danger);
}
.form-group.error .form-error {
  display: block;
}
.form-success {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: var(--success);
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  display: none;
  font-weight: 500;
  margin-top: 16px;
}
.form-success.show {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-success.form-error-box {
  background: rgba(179, 38, 30, 0.08);
  border-color: #f3b8b1;
  color: #b3261e;
}
.main-footer {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.7);
  padding: 1cm 0 0.2cm;
}
.main-footer .container-fluid {
  margin-left: 0;
  max-width: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 40px;
  align-items: start;
}
@media (min-width: 768px){
  .footer-grid > .footer-col:last-child {
    margin-right: 2cm;
  }
}
@media (max-width: 767px){.footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.footer-logo img {
  height: 48px;
}
.footer-logo .footer-logo-text {
  font-family: 'Eras Demi Bold ITC';
  font-weight: 700;
  font-style: normal;
  color: #CC0000;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-size: 1.05rem;
  animation: footerNameCycle 8s linear infinite;
}
/* The wordmark shifts continuously through red -> white -> yellow -> orange.
   The red phase is #ff4438 rather than the static #CC0000 above, because that
   darker red sits so close to the navy footer that it reads as the text
   disappearing; #ff4438 is the same red already used for the hero title. */
@keyframes footerNameCycle {
  0%   { color: #ff4438; }
  25%  { color: #ffffff; }
  50%  { color: #ffd700; }
  75%  { color: #ff8c00; }
  100% { color: #ff4438; }
}
/* Hold the colour still for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .footer-logo .footer-logo-text { animation: none; }
}
.main-footer .footer-desc {
  font-size: 0.92rem;
  line-height: 1.8;
  margin-bottom: 24px;
}
.main-footer .footer-heading {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 12px;
}
.main-footer .footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--accent);
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links li a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links li a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.footer-links li a i {
  font-size: 0.7rem;
  color: var(--accent);
}
.footer-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  align-items: flex-start;
}
.footer-contact li i {
  color: var(--accent);
  margin-top: 4px;
  flex-shrink: 0;
}
/* Contact column splits into one block per country. */
.footer-contact-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.footer-contact-title {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.footer-contact-group .footer-contact li {
  margin-bottom: 10px;
}
@media (max-width: 991px) {
  .footer-contact-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
  margin-top: 50px;
  text-align: center;
  font-size: 0.85rem;
}
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover {
  background: var(--accent-hover);
  transform: translateY(-4px);
}

/* ===== WhatsApp floating button ===== */
.whatsapp-float {
  position: fixed;
  bottom: 88px;
  right: 30px;
  width: 52px;
  height: 52px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  text-decoration: none;
  z-index: 999;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.whatsapp-float:hover {
  background: #1ebe5b;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

@media (max-width: 1200px){.showcase-grid .showcase-card {
    width: 300px;
  }
.showcase-grid .showcase-card h5 {
    font-size: 0.9rem;
  }
.gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px){.about-intro-flex {
    grid-template-columns: 1fr;
  }
.showcase-grid .showcase-card {
    width: 260px;
  }
.gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
/* Only below this tablet breakpoint does the brand block scale down; from
   992px up it stays at its full 62px / 30px. */
  .main-nav .nav-logo {
    gap: 8px;
  }
  .main-nav .nav-logo img {
    height: 44px;
  }
  .main-nav .nav-logo img.nav-wordmark {
    height: 24px;
  }
}
@media (max-width: 400px) {
  .main-nav .nav-logo img.nav-wordmark {
    height: 20px;
  }
}
@media (max-width: 340px) {
  .main-nav .nav-logo img.nav-wordmark {
    height: 16px;
  }
}
/* The navigation collapses into the off-canvas drawer well above the 991px
   tablet breakpoint used everywhere else in this file. Six menu items no longer
   fit on one line: the bar needs roughly 1250px once the safety-training link is
   in place, so anything under 1280px would collide. Only the nav rules move to
   this wider breakpoint - gallery, clients and banner keep their 991px values. */
@media (max-width: 1279px){
  .main-nav .nav-toggle {
    display: block;
    z-index: 100;
    margin-left: auto;
  }
.main-nav .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: #ffffff;
    flex-direction: column;
    justify-content: flex-start;
    padding: 100px 30px 30px;
    transition: right 0.4s ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    gap: 0;
  }
.main-nav .nav-menu.open {
    right: 0;
  }
.main-nav .nav-menu .nav-link {
    padding: 16px 0;
    font-size: 1rem;
    color: #003366;
    border-bottom: 1px solid rgba(0, 51, 102, 0.12);
  }
.main-nav .nav-menu .nav-link:hover,
  .main-nav .nav-menu .nav-link.active {
    color: var(--accent-secondary);
  }
.main-nav .nav-menu .nav-link::after {
    bottom: 10px;
    left: 0;
    right: auto;
    width: 30px;
  }
.main-nav .nav-menu .lang-item {
    margin-left: 0;
    margin-right: 0;
    margin-top: 16px;
  }
.main-nav .nav-menu .lang-toggle {
    width: 100%;
    justify-content: space-between;
  }
.main-nav .nav-menu .lang-dropdown {
    position: static;
    top: auto;
    right: auto;
    min-width: 0;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: 1px solid rgba(0, 51, 102, 0.12);
    margin-top: 8px;
  }
.main-nav .nav-menu .lang-item.open .lang-dropdown {
    transform: none;
  }
}
@media (max-width: 767px){.section-padding {
    padding: 44px 0;
  }
.showcase-grid .showcase-card {
    width: 220px;
  }
.showcase-card {
    height: 200px;
  }
.gallery-grid {
    grid-template-columns: 1fr;
  }
.clients-grid {
    gap: 24px;
  }
.gallery-item {
    height: 250px;
  }
.safety-mantra {
    flex-direction: column;
  }
.safety-mantra-item {
    min-width: auto;
  }
.page-banner {
    height: 240px;
  }
}
@media (max-width: 576px){.main-nav .nav-menu {
    width: 100%;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-split {
    grid-template-columns: 1fr;
  }
  .contact-cards {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 28px;
  }
  .map-wrap {
    min-height: 300px;
  }
}
.sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.sol-card {
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid rgba(0, 51, 102, 0.12); box-shadow: 0 4px 14px rgba(0, 51, 102, 0.08);
  display: flex; flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sol-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sol-img { position: relative; height: 320px; overflow: hidden; }
.sol-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.sol-card:hover .sol-img img { transform: scale(1.1); }
.sol-card.click-anim { animation: solCardClick 0.45s ease; }
.sol-card.click-anim .sol-img img { transform: scale(1.12); }
@keyframes solCardClick {
  0% { transform: scale(1); }
  40% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.sol-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 51, 102, 0.6)); }
/* solution-5.jpg is 1200x720 (5:3) sitting in a 2.69:1 band. `cover` crops ~38%
   of it away and `contain` leaves ~123px of empty mat on each side, so `fill` is
   the only fit that shows the entire photo *and* fills the frame - it scales the
   two axes independently. The cost is distortion: this card ends up ~1.6x wider
   relative to its height than the original, so the photo reads squat. Give the
   card a 5:3 frame instead if an undistorted picture matters more than filling
   the standard band. The lighter wash keeps the photo readable. */
.sol-card--stretch .sol-img img { object-fit: fill; }
.sol-card--stretch .sol-img::after {
  background: linear-gradient(180deg, transparent 62%, rgba(0, 51, 102, 0.28));
}
.sol-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.sol-body h3 {
  font-size: 19px; text-transform: uppercase; margin-bottom: 16px; position: relative; padding-bottom: 12px;
  color: var(--accent);
}
.sol-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 3px; background: #000000; }
.sol-body h3 span { color: var(--accent) !important; }
.sol-list { display: grid; gap: 8px; }
.sol-list li { position: relative; padding-left: 20px; font-size: 14px; color: #000000; line-height: 1.55; }
.sol-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #000000; }
.sol-list a { color: #000000; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.35); text-underline-offset: 3px; }
.sectors-list { display: grid; gap: 28px; }
.sector-row {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: var(--white); border: 1px solid rgba(0, 51, 102, 0.12); border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s;
}
.sector-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sector-row:nth-child(even) .sr-media { order: 2; }
.sr-media { position: relative; min-height: 300px; overflow: hidden; }
.sr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.sector-row:hover .sr-media img { transform: scale(1.08); }
.sr-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(0, 51, 102, 0.5)); }
.sector-row:nth-child(even) .sr-media::after { background: linear-gradient(270deg, transparent 55%, rgba(0, 51, 102, 0.5)); }
.sr-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.sr-body h3 {
  font-size: 21px; text-transform: uppercase; margin-bottom: 18px; position: relative; padding-bottom: 12px;
  color: var(--accent);
}
.sr-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: #000000; }
.sr-body h3 span { color: var(--accent) !important; }
.sr-body ul { columns: 2; column-gap: 30px; }
.sr-body ul.sr-wide { columns: 3; }
.sr-body li { position: relative; padding: 6px 0 6px 20px; font-size: 14px; color: #000000; break-inside: avoid; }
.sr-body li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #000000; }
@media (max-width: 1024px){.sectors-list { gap: 20px; }
.sector-row { grid-template-columns: 1fr; }
.sr-media { min-height: 260px; }
}
@media (max-width: 768px){.sol-grid { grid-template-columns: 1fr; }
.cert-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sector-row:nth-child(even) .sr-media { order: 0; }
.sr-body { padding: 24px; }
.sr-body ul { columns: 1; }
.sr-body ul.sr-wide { columns: 1; }
}
@media (max-width: 576px){.cert-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cert-item { padding: 16px; min-height: 100px; }
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-lg-5 { padding-left: 1cm; padding-right: 1cm; }

/* Sections hug their content instead of being stretched to a full viewport and
   centred, which is what left large empty gaps between consecutive bands. */

/* ============================================================
   NEW HERO + TICKER (ported from pses-new-test)
   Its custom properties are folded into the single :root at the top
   of this file.
   ============================================================ */
.container-wide { width: min(1360px, 94%); margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--navy-950);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
/* No scale() on the slide: any transform resamples the video and makes it look soft. */
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide img,
.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* brightness()/saturate() are per-pixel colour operations, so unlike a scale()
     or blur() they do not resample the frame and stay sharp on video. */
  filter: brightness(1.06) saturate(1.12);
}
/* Only a soft pool of shade directly behind the centred copy. The old wash ran
   .88 -> .08 across the whole frame, which crushed the media almost to black;
   here the darkest point is .34 and it falls away to .04 at the edges so the
   photograph or video reads at close to full brightness. */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(4, 14, 26, .34) 0%, rgba(4, 14, 26, .16) 45%, rgba(4, 14, 26, .04) 100%);
}
/* The decorative 54px grid overlay is gone: it laid a hatched texture over the
   media and was the other thing dulling the pictures. The markup div was removed
   with it, so nothing else depends on .hero-grid. */
.hero-inner {
  position: relative;
  z-index: 3;
  /* Symmetric padding: the old asymmetric 23px left pad was there to clear the
     nav when the copy was left-aligned, and it now offsets the centred block. */
  padding: 105px 0 80px;
  width: 100%;
  /* Centred hero copy: title, description and accent line are stacked
     and centre-aligned instead of hugging the left edge. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font-heading);
  letter-spacing: -1.2px;
  color: #ff4438;
  max-width: 100%;
  /* The English tagline fits on a single line at every desktop width, because
     the full container is now available (the old 900px cap forced a wrap).
     white-space: nowrap is deliberately NOT set here: the Malay and Indonesian
     taglines are ~57% and ~35% wider and would overflow the centred block at
     every viewport, so they wrap instead. */
  margin-bottom: 24px;
  line-height: 1.18;
  text-shadow: 0 2px 22px rgba(3, 10, 20, .65), 0 1px 4px rgba(3, 10, 20, .45);
}
/* The whole tagline is red now, so the blue highlight chip on "Reliable
   Solutions" is dropped - keeping it would leave those two words white on blue
   instead of red. Padding, background and shadow all go so the line reads as one
   uniform run of red text. */
.hero-title .highlight {
  color: inherit;
  background: none;
  text-shadow: inherit;
  box-shadow: none;
}
.hero-sub {
  font-size: 1.14rem;
  color: rgba(255, 255, 255, .92);
  max-width: 720px;
  margin-bottom: 36px;
  text-shadow: 0 1px 14px rgba(3, 10, 20, .6);
}
.hero-sub-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -24px;
  font-size: .96rem;
  color: var(--amber-300);
  text-align: center;
}
.hero-sub-accent i { color: var(--amber-400); }
.hero-nav {
  position: absolute;
  right: 40px;
  bottom: 34px;
  z-index: 5;
  display: flex;
  gap: 10px;
}
.hero-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .3s var(--ease);
}
.hero-nav-btn:hover {
  background: var(--amber-400);
  border-color: var(--amber-400);
  color: var(--navy-900);
  transform: translateY(-2px);
}
.hero-nav-btn:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 3px;
}

/* ---------- Ticker ---------- */
.ticker {
  background: linear-gradient(135deg, #0a1c33 0%, #123c70 55%, #1d5de7 130%);
  border-bottom: 3px solid var(--amber-500);
  overflow: hidden;
  padding: 16px 0;
  position: relative;
  z-index: 3;
  margin-top: -8px;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 36s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
/* The interpunct separators have been removed, so the horizontal padding on each
   item is what spaces the ticker out. Trimmed from 34px to 24px to take back most
   of the gap the bullets used to fill. */
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.85);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 24px;
}
.ticker-track span i { color: var(--amber-400); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .hero { min-height: 600px; }
}
@media (max-width: 640px) {
  .hero-title { font-size: clamp(1.5rem, 5.5vw, 1.9rem); }
  .hero-inner { padding: 96px 0 84px; }
  .hero-nav { right: 18px; bottom: 22px; }
  .hero-nav-btn { width: 40px; height: 40px; font-size: .8rem; }
}