/* ==========================================================
   SHIP CARE SERVICE — ABOUT US PAGE STYLES  v3.0
   Premium Maritime Corporate Design System
   ========================================================== */

/* ---------- GOOGLE FONT IMPORT ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --sc-navy:        #0B2A5E;
  --sc-navy-dark:   #071E47;
  --sc-navy-deep:   #050F2A;
  --sc-blue:        #1A6FE0;
  --sc-blue-light:  #4C9FFF;
  --sc-sky:         #EAF1FB;
  --sc-panel:       #F3F7FD;
  --sc-body:        #1F2937;
  --sc-muted:       #475569;
  --sc-border:      #DCE6F5;
  --sc-card-r:      16px;
  --sc-shadow-sm:   0 4px 16px rgba(11,42,94,.06);
  --sc-shadow-md:   0 10px 30px rgba(11,42,94,.10);
  --sc-shadow-lg:   0 20px 48px rgba(11,42,94,.16);
  --sc-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --sc-t:           0.32s;
}

/* ---------- 2. BASE LAYOUT ---------- */
.sc-about-page {
  font-family: 'Inter', 'Poppins', -apple-system, sans-serif;
  color: var(--sc-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.sc-about-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ---------- 3. HERO SECTION ---------- */
.sc-about-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 120px 0 100px;
}

.sc-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  background-color: var(--sc-navy-dark);
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 768px) {
    .sc-kenburns {
      animation: scKenBurns 22s ease-in-out infinite alternate;
      will-change: transform;
    }
  }
}

@keyframes scKenBurns {
  0%   { transform: scale(1) translateX(0);     }
  100% { transform: scale(1.07) translateX(-1%); }
}

.sc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(5,15,42,0.96) 0%,
    rgba(7,30,71,0.88) 40%,
    rgba(7,30,71,0.55) 70%,
    rgba(7,30,71,0.20) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Subtle diagonal stripe texture */
.sc-hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.018) 20px,
    rgba(255,255,255,0.018) 21px
  );
  pointer-events: none;
}

.sc-hero-content {
  position: relative;
  z-index: 2;
}

/* Breadcrumb */
.sc-about-breadcrumb {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}

.sc-about-breadcrumb a {
  color: var(--sc-blue-light);
  text-decoration: none;
  transition: color var(--sc-t) ease;
}

.sc-about-breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* Hero badge */
.sc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(26,111,224,0.22);
  border: 1px solid rgba(76,159,255,0.38);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--sc-blue-light);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hero H1 */
.sc-about-hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 680px;
}

.sc-h1-highlight {
  background: linear-gradient(90deg, #4C9FFF, #7CC0FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero lead paragraph */
.sc-hero-lead {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 580px;
  margin: 0 0 36px;
}

/* Hero action buttons */
.sc-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.sc-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--sc-blue);
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 50px;
  border: 1px solid transparent;
  box-shadow: 0 6px 20px rgba(26,111,224,0.38);
  transition: transform var(--sc-t) var(--sc-ease),
              background-color var(--sc-t) ease,
              box-shadow var(--sc-t) ease;
  cursor: pointer;
}

.sc-btn-hero:hover {
  transform: translateY(-3px);
  background-color: #155BC9;
  box-shadow: 0 12px 28px rgba(26,111,224,0.5);
  color: #fff !important;
}

.sc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.1);
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--sc-t) ease, border-color var(--sc-t) ease, transform var(--sc-t) var(--sc-ease);
}

.sc-btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
  color: #fff !important;
}

/* Hero Stats bar */
.sc-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 20px 28px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 680px;
}

.sc-hero-stat {
  flex: 1;
  min-width: 110px;
  text-align: center;
  padding: 8px 0;
}

.sc-hero-stat-num {
  display: inline;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.sc-hero-stat-suffix {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--sc-blue-light);
}

.sc-hero-stat-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.52);
  margin-top: 4px;
  text-transform: uppercase;
}

.sc-hero-stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* Scroll cue arrow */
.sc-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s ease;
  animation: scBounce 2s ease-in-out infinite;
}

.sc-scroll-cue:hover { color: #fff; }

@keyframes scBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ---------- 4. SECTION STRUCTURE ---------- */
.sc-about-sec {
  padding: 56px 0;
  box-sizing: border-box;
}

/* Backgrounds stripped to white/transparent — compact, clean look */
.sc-about-sec-light  { background-color: #fff; }
.sc-about-sec-white  { background-color: #fff; }
.sc-about-sec-panel  { background-color: #fff; }

/* Section header + label */
.sc-section-header {
  text-align: center;
  margin-bottom: 36px;
}

.sc-section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-blue);
  background: rgba(26,111,224,0.08);
  border: 1px solid rgba(26,111,224,0.18);
  border-radius: 999px;
  padding: 5px 16px;
  margin-bottom: 14px;
}

.sc-about-sec h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  color: var(--sc-navy);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.sc-section-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--sc-muted);
  max-width: 680px;
  margin: 0 auto;
}

/* ---------- 5. ACCENT BARS (animated) ---------- */
.sc-bar {
  display: block;
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--sc-blue) 0%, var(--sc-blue-light) 100%);
  border-radius: 4px;
  margin: 14px 0 24px;
  transform-origin: left center;
  opacity: 0;
  transform: scaleX(0);
  transition: none;
}

.sc-section-header .sc-bar {
  margin: 14px auto 24px;
  transform-origin: center;
}

.sc-bar-light { background: rgba(124,192,255,0.8) !important; }
.sc-bar-center { margin-left: auto !important; margin-right: auto !important; transform-origin: center; }

.sc-bar.is-inview,
.is-inview .sc-bar {
  animation: scBarGrow 0.7s var(--sc-ease) forwards;
}

@keyframes scBarGrow {
  from { width: 0; opacity: 0; }
  to   { width: 56px; opacity: 1; }
}

/* ---------- 6. SCROLL REVEAL ITEMS ---------- */
.sc-reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--sc-ease), transform 0.65s var(--sc-ease);
}

.sc-reveal-item.sc-is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sc-reveal-delay-1 { transition-delay: 0.12s; }
.sc-reveal-delay-2 { transition-delay: 0.24s; }
.sc-reveal-delay-3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .sc-reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 7. WHO WE ARE — INTRO GRID ---------- */
.sc-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.sc-intro-text p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--sc-muted);
  margin: 0 0 20px;
}

.sc-intro-text strong {
  color: var(--sc-navy);
  font-weight: 700;
}

/* Image Frame */
.sc-image-frame {
  position: relative;
  z-index: 1;
}

.sc-image-frame::before {
  content: '';
  position: absolute;
  top: 18px; right: -18px; bottom: -18px; left: 18px;
  border: 2px solid var(--sc-navy);
  border-radius: 20px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.sc-image-frame:hover::before {
  transform: translate(4px, 4px);
  opacity: 0.28;
}

/* ---------- 8. MISSION & VALUES ---------- */
.sc-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sc-value-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-card-r);
  padding: 22px 18px;
  box-shadow: var(--sc-shadow-sm);
  text-align: center;
  transition: transform var(--sc-t) var(--sc-ease),
              box-shadow var(--sc-t) ease,
              border-color var(--sc-t) ease;
}

.sc-value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sc-shadow-lg);
  border-color: rgba(26,111,224,0.28);
}

.sc-value-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-blue) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: transform var(--sc-t) var(--sc-ease);
}

.sc-value-card:hover .sc-value-icon {
  transform: scale(1.1) rotate(-4deg);
}

.sc-value-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
  stroke: #fff;
}

.sc-value-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--sc-navy);
  margin: 0 0 12px;
}

.sc-value-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--sc-muted);
  margin: 0;
}

/* ---------- 9. OUR TECHNICAL SERVICES (13 cards) ---------- */
/* Section header — scoped so the other About section headers are unchanged */
.sc-services-sec .sc-section-header {
  max-width: 720px;
  margin: 0 auto 44px;
}

.sc-services-sec .sc-section-label {
  margin-bottom: 16px;
}

.sc-services-sec h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.sc-services-sec .sc-section-header .sc-bar {
  margin: 16px auto 18px;
}

/* The shared .sc-bar keeps transform: scaleX(0) after its width/opacity
   animation, so it never shows; release the scale here. */
.sc-services-sec .sc-bar.is-inview {
  transform: none;
}

.sc-services-sec .sc-section-sub {
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 640px;
}

.sc-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  counter-reset: sc-srv-counter;
}

.sc-card {
  position: relative;
  counter-increment: sc-srv-counter;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 20px 44px 20px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #FAFCFF 100%);
  border: 1px solid rgba(11, 42, 94, 0.10);
  border-radius: var(--sc-card-r);
  box-shadow: 0 1px 2px rgba(11, 42, 94, 0.04), 0 6px 18px rgba(11, 42, 94, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  transition:
    transform 0.35s var(--sc-ease),
    box-shadow 0.35s var(--sc-ease),
    border-color 0.35s var(--sc-ease);
}

/* Left accent rule, revealed on hover */
.sc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sc-blue) 0%, var(--sc-navy) 100%);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s var(--sc-ease);
}

/* Service number — small and quiet so it never competes with the title */
.sc-card::after {
  content: counter(sc-srv-counter, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(11, 42, 94, 0.30);
  pointer-events: none;
  transition: color 0.35s var(--sc-ease);
}

.sc-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-blue) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(26, 111, 224, 0.22);
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}

.sc-card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sc-navy);
  overflow-wrap: break-word;
}

@media (hover: hover) {
  .sc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 111, 224, 0.38);
    box-shadow: 0 2px 4px rgba(11, 42, 94, 0.04), 0 16px 34px rgba(11, 42, 94, 0.12);
  }

  .sc-card:hover::before {
    transform: scaleY(1);
  }

  .sc-card:hover::after {
    color: var(--sc-blue);
  }

  .sc-card:hover .sc-card-icon {
    transform: translateY(-1px) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 20px rgba(26, 111, 224, 0.32);
  }
}

/* 13th card: sits in the middle column instead of stretching across the row */
.sc-card-last {
  grid-column: 2;
}

/* Entrance (gated on html.sc-srv-anim, set by about.js). Uses the individual
   `translate` property so it never conflicts with the hover `transform`. */
.sc-srv-anim .sc-card {
  opacity: 0;
  translate: 0 18px;
}

.sc-srv-anim .sc-card.is-inview {
  animation: scSrvCardIn 0.6s var(--sc-ease) both;
  animation-delay: var(--sc-srv-delay, 0s);
}

@keyframes scSrvCardIn {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-srv-anim .sc-card,
  .sc-srv-anim .sc-card.is-inview {
    opacity: 1;
    translate: none;
    animation: none;
  }

  .sc-card:hover,
  .sc-card:hover .sc-card-icon {
    transform: none;
  }
}

/* ---------- 12. CTA SECTION ---------- */
.sc-cta-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sc-sky) 0%, #dceffe 100%);
  border: 1px solid rgba(26,111,224,0.18);
  border-radius: 24px;
  padding: 72px 48px;
  text-align: center;
  box-shadow: var(--sc-shadow-md);
}

.sc-cta-wave::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C59.71,118.08,130.83,121.31,200.2,106.87,243.68,97.83,283.47,78.27,321.39,56.44Z' fill='rgba(11,42,94,0.04)'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

.sc-cta-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-blue) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(26,111,224,0.3);
}

.sc-cta-icon svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
}

.sc-cta-box h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  color: var(--sc-navy);
  margin: 0;
  font-weight: 800;
}

.sc-cta-box p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--sc-muted);
  max-width: 700px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}

.sc-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.sc-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-navy);
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 36px;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(11,42,94,0.28);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}

.sc-btn-pill:hover {
  transform: translateY(-3px);
  background: var(--sc-blue);
  box-shadow: 0 12px 30px rgba(26,111,224,0.4);
  color: #fff !important;
}

.sc-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--sc-navy) !important;
  border: 1.5px solid var(--sc-navy);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 36px;
  border-radius: 50px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--sc-ease);
}

.sc-btn-outline:hover {
  background: var(--sc-navy);
  color: #fff !important;
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: no-preference) {
  .sc-pulse-btn {
    animation: scPulse 2.8s infinite;
  }
}

@keyframes scPulse {
  0%   { box-shadow: 0 0 0 0 rgba(11,42,94,0.38); }
  70%  { box-shadow: 0 0 0 16px rgba(11,42,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(11,42,94,0); }
}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .sc-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .sc-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* odd card out: centred at single-column width rather than full-row */
  .sc-card-last {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 16px) / 2);
  }

  .sc-about-sec {
    padding: 48px 0;
  }
  .sc-about-hero {
    min-height: 420px;
    padding: 90px 0 80px;
  }
}

@media (max-width: 767px) {
  .sc-about-hero {
    min-height: 360px;
    padding: 80px 0 60px;
  }
  .sc-about-hero h1 { font-size: 34px; }
  .sc-hero-overlay {
    background: linear-gradient(180deg, rgba(5,15,42,0.95) 0%, rgba(7,30,71,0.85) 100%);
  }
  .sc-hero-stats {
    gap: 0;
    padding: 16px 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .sc-hero-stat { min-width: 120px; }
  .sc-hero-stat-divider { display: none; }
  .sc-values-grid { grid-template-columns: 1fr; }
  .sc-about-sec   { padding: 32px 0; }
  .sc-image-frame::before { display: none; }
  .sc-cta-box     { padding: 40px 20px; }
  .sc-hero-actions { flex-direction: column; align-items: flex-start; }
  .sc-btn-hero,
  .sc-btn-ghost   { width: 100%; justify-content: center; }
  .sc-cta-actions { flex-direction: column; }
  .sc-btn-pill,
  .sc-btn-outline { width: 100%; justify-content: center; }
  .sc-section-header { text-align: left; }
  .sc-section-header .sc-bar { margin-left: 0; transform-origin: left; }
  .sc-section-header .sc-section-sub { text-align: left; }
  .sc-services-sec .sc-section-header { margin-bottom: 28px; }
  .sc-services-sec .sc-section-header .sc-bar { margin: 14px 0 16px; }
  .sc-services-sec .sc-section-sub { font-size: 15.5px; }
}

/* Technical services: one compact column on phones and small tablets
   (two 270px columns at 600px wrapped the long names over 5 lines) */
@media (max-width: 719px) {
  .sc-services-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
  }

  .sc-card-last {
    grid-column: auto;
    width: auto;
  }

  .sc-card {
    gap: 14px;
    min-height: 0;
    padding: 14px 40px 14px 14px;
  }

  .sc-card::after {
    top: 10px;
    right: 12px;
  }

  .sc-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .sc-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .sc-card-title {
    font-size: 14.5px;
  }
}

/* ==========================================================
   14. MARINE SPARE PARTS SUPPLY (ABOUT US)
   ========================================================== */
.sc-about-parts-sec {
  background: #ffffff;
  padding: 56px 0;
  position: relative;
}

.sc-about-parts-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 52px;
  align-items: center;
}

.sc-about-parts-content .sc-section-label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sc-blue);
  background: var(--sc-sky);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.sc-about-parts-title {
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--sc-navy);
  line-height: 1.25;
  margin: 0 0 16px;
}

.sc-about-parts-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--sc-muted);
  margin: 0 0 28px;
}

.sc-about-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-about-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-navy-dark);
}

.sc-check-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(26,111,224,0.12);
  color: var(--sc-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-btn-parts {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sc-navy);
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(11,42,94,0.22);
  transition: background var(--sc-t) ease, transform var(--sc-t) var(--sc-ease), box-shadow var(--sc-t) ease;
}

.sc-btn-parts:hover {
  background: var(--sc-blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26,111,224,0.38);
}

.sc-btn-parts svg {
  transition: transform var(--sc-t) ease;
}

.sc-btn-parts:hover svg {
  transform: translateX(4px);
}

.sc-about-parts-grid-inner {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sc-about-parts-grid-inner > li {
  display: flex;
  min-width: 0;
}

.sc-parts-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  text-decoration: none;
  transition: transform var(--sc-t) var(--sc-ease), box-shadow var(--sc-t) ease, border-color var(--sc-t) ease;
}

.sc-parts-card:focus-visible {
  outline: 3px solid var(--sc-blue);
  outline-offset: 3px;
}

.sc-parts-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sc-panel);
}

.sc-parts-card-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s var(--sc-ease);
}

/* Very wide photos: whole product shown over a soft blurred copy of itself */
.sc-parts-card.is-wide .sc-parts-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sc-parts-bg) center / 100% 100% no-repeat;
  filter: blur(32px);
  transform: scale(1.3);
}

.sc-parts-card.is-wide .sc-parts-card-media img {
  object-fit: contain;
}

.sc-parts-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;
  margin: 13px 16px 15px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sc-navy);
  transition: color var(--sc-t) ease;
}

@media (hover: hover) {
  .sc-parts-card:hover {
    transform: translateY(-4px);
    border-color: rgba(26,111,224,0.35);
    box-shadow: var(--sc-shadow-md);
  }

  .sc-parts-card:hover .sc-parts-card-media img {
    transform: scale(1.04);
  }

  .sc-parts-card:hover .sc-parts-card-title {
    color: var(--sc-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-parts-card,
  .sc-parts-card-media img {
    transition: none;
  }

  .sc-parts-card:hover,
  .sc-parts-card:hover .sc-parts-card-media img {
    transform: none;
  }
}

/* ==========================================================
   15. SUPPORTING VESSELS & MARINE OPERATIONS BANNER
   ========================================================== */
.sc-about-banner-sec {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--sc-navy-dark);
}

.sc-about-banner-canvas {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: 52px 0;
  box-sizing: border-box;
}

.sc-about-banner-img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-size: cover;
  background-position: center center;
  z-index: 0;
  transition: transform 12s ease;
}

.sc-banner-img-left {
  left: 0;
}

.sc-banner-img-right {
  right: 0;
}

.sc-about-banner-sec:hover .sc-about-banner-img {
  transform: scale(1.04);
}

/* Navy scrim: densest behind the centred text, lighter towards the edges so
   the port, vessels and skyline stay visible (was a flat 0.85–0.94 layer). */
.sc-about-banner-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 75% at 50% 50%, rgba(5, 15, 42, 0.62) 0%, rgba(5, 15, 42, 0.52) 55%, rgba(7, 30, 71, 0.40) 100%),
    linear-gradient(180deg, rgba(5, 15, 42, 0.10) 0%, rgba(5, 15, 42, 0) 40%, rgba(5, 15, 42, 0.15) 100%);
  z-index: 1;
}

.sc-about-banner-wrap {
  position: relative;
  z-index: 2;
}

.sc-about-banner-center {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.sc-banner-eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sc-blue-light);
  margin-bottom: 12px;
}

.sc-banner-title {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 16px;
  text-shadow: 0 2px 18px rgba(5, 15, 42, 0.55);
}

.sc-banner-desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(234,241,251,0.95);
  margin: 0 auto 36px;
  max-width: 740px;
  text-shadow: 0 1px 12px rgba(5, 15, 42, 0.6);
}

.sc-banner-callout {
  /* navy-tinted glass keeps the white text legible now the photo is brighter */
  background: rgba(7, 30, 71, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  transition: transform var(--sc-t) var(--sc-ease), border-color var(--sc-t) ease;
}

.sc-banner-callout:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.4);
}

.sc-callout-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(26,111,224,0.3);
  border: 1px solid rgba(76,159,255,0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-callout-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-callout-heading {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
}

.sc-callout-sub {
  font-size: 14px;
  color: rgba(234,241,251,0.82);
}

.sc-callout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sc-blue);
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(26,111,224,0.35);
  transition: background var(--sc-t) ease, transform var(--sc-t) var(--sc-ease);
}

.sc-callout-btn:hover {
  background: #1557b0;
  transform: translateY(-2px);
}

/* ==========================================================
   16. OUR SERVICE NETWORK (market cards)
   Hidden-before-reveal states only apply under html.sc-net-anim,
   which about.js sets — without JS the section is fully visible.
   ========================================================== */
.sc-net {
  position: relative;
  overflow: hidden;
  padding: 56px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--sc-panel) 100%);
  border-top: 1px solid #EBF2FA;
  border-bottom: 1px solid #EBF2FA;
}

.sc-net::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 18%, rgba(26, 111, 224, 0.07) 0, transparent 42%);
  pointer-events: none;
}

.sc-net-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}

.sc-net-label {
  margin-bottom: 12px;
}

.sc-net-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sc-navy);
  margin: 0 0 12px;
}

.sc-net-desc {
  max-width: 46ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sc-muted);
}

.sc-net-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sc-net-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  box-shadow: var(--sc-shadow-sm);
  transition:
    transform 0.35s var(--sc-ease),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.sc-net-flag {
  width: 36px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11, 42, 94, 0.08), 0 2px 6px rgba(11, 42, 94, 0.12);
  transition: transform 0.35s var(--sc-ease);
}

.sc-net-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sc-net-globe {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-sky);
  color: var(--sc-blue);
}

.sc-net-globe svg {
  width: 16px;
  height: 16px;
}

.sc-net-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sc-net-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sc-navy);
}

.sc-net-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-muted);
}

.sc-net-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94A3B8;
}

/* Singapore HQ: full-width, tinted, with an accent rule and navy badge */
.sc-net-card.is-hq {
  grid-column: 1 / -1;
  min-height: 72px;
  padding: 16px 20px 16px 22px;
  background: linear-gradient(135deg, #F5F9FF 0%, #E9F2FD 100%);
  border-color: rgba(26, 111, 224, 0.32);
}

.sc-net-card.is-hq::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--sc-blue) 0%, var(--sc-navy) 100%);
  transform-origin: center;
}

.sc-net-card.is-hq .sc-net-flag {
  width: 42px;
  height: 28px;
}

.sc-net-card.is-hq .sc-net-name {
  font-size: 17px;
}

.sc-net-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sc-navy);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0 0 0 4px rgba(11, 42, 94, 0.08);
}

@media (hover: hover) {
  .sc-net-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-shadow-md);
    border-color: rgba(26, 111, 224, 0.5);
  }

  .sc-net-card:hover .sc-net-flag {
    transform: scale(1.06);
  }
}

/* --- Entrance animation (gated on html.sc-net-anim) ---
   Uses the individual `translate` property so the staggered card keyframes
   never fight the hover `transform` lift. */
.sc-net-anim .sc-net .sc-about-wrap {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sc-net-anim .sc-net-head > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s var(--sc-ease), translate 0.6s var(--sc-ease);
}

.sc-net-anim .sc-net-head > :nth-child(2) { transition-delay: 0.08s; }
.sc-net-anim .sc-net-head > :nth-child(3) { transition-delay: 0.16s; }

.sc-net-anim .sc-net-card {
  opacity: 0;
}

.sc-net-anim .sc-net.is-inview .sc-about-wrap,
.sc-net-anim .sc-net.is-inview .sc-net-head > * {
  opacity: 1;
  translate: 0 0;
}

.sc-net-anim .sc-net.is-inview .sc-net-card {
  animation: scNetCardIn 0.6s var(--sc-ease) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.07s);
}

.sc-net-anim .sc-net.is-inview .sc-net-card.is-hq::before {
  animation: scNetRule 0.7s var(--sc-ease) 0.55s both;
}

@keyframes scNetCardIn {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes scNetRule {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-net-anim .sc-net .sc-about-wrap,
  .sc-net-anim .sc-net-head > *,
  .sc-net-anim .sc-net-card,
  .sc-net-anim .sc-net.is-inview .sc-net-card,
  .sc-net-anim .sc-net.is-inview .sc-net-card.is-hq::before {
    opacity: 1;
    translate: none;
    animation: none;
    transition: none;
  }

  .sc-net-card:hover,
  .sc-net-card:hover .sc-net-flag {
    transform: none;
  }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sc-net {
    padding: 44px 0;
  }

  .sc-net-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .sc-net-desc {
    max-width: 60ch;
  }
}

/* Tablet: HQ on its own row, the other four in a single row */
@media (min-width: 720px) and (max-width: 900px) {
  .sc-net-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sc-net-card {
    gap: 10px;
    padding: 12px 14px;
  }

  .sc-net-code {
    display: none;
  }
}

@media (max-width: 599px) {
  .sc-net {
    padding: 36px 0;
  }

  .sc-net-cards {
    gap: 10px;
  }

  .sc-net-card {
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
  }

  .sc-net-flag {
    width: 30px;
    height: 20px;
  }

  .sc-net-name {
    font-size: 14px;
  }

  .sc-net-code {
    display: none;
  }

  .sc-net-card.is-hq {
    padding: 14px 16px 14px 18px;
  }

  .sc-net-card.is-hq .sc-net-flag {
    width: 36px;
    height: 24px;
  }

  .sc-net-card.is-hq .sc-net-name {
    font-size: 16px;
  }
}

/* Very narrow phones: keep two columns but tighten so names fit */
@media (max-width: 359px) {
  .sc-net-cards {
    gap: 8px;
  }

  .sc-net-card {
    gap: 8px;
    padding: 12px 10px;
  }

  .sc-net-flag {
    width: 26px;
    height: 18px;
  }
}



.sc-about-network-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}

.sc-about-network-info .sc-section-label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sc-blue);
  background: rgba(26,111,224,0.1);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.sc-about-network-title {
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--sc-navy);
  line-height: 1.25;
  margin: 0 0 14px;
}

.sc-about-network-sub {
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-muted);
  margin: 0 0 24px;
}

.sc-network-countries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-country-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: var(--sc-shadow-sm);
  transition: transform var(--sc-t) var(--sc-ease), box-shadow var(--sc-t) ease, border-color var(--sc-t) ease;
}

.sc-country-card:hover {
  transform: translateX(6px);
  box-shadow: var(--sc-shadow-md);
  border-color: rgba(26,111,224,0.3);
}

.sc-country-card.is-hq {
  border-left: 4px solid var(--sc-blue);
  background: linear-gradient(90deg, rgba(234,241,251,0.5) 0%, #ffffff 100%);
}

.sc-flag-box {
  width: 38px;
  height: 25px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.sc-flag-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sc-country-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sc-cname {
  font-size: 15px;
  font-weight: 700;
  color: var(--sc-navy);
}

.sc-cbadge {
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-blue);
  background: var(--sc-sky);
  padding: 3px 10px;
  border-radius: 50px;
}

.sc-country-card.is-hq .sc-cbadge {
  color: #b45309;
  background: #fef3c7;
  font-weight: 700;
}

.sc-network-map-canvas {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-md);
  background: #ffffff;
  padding: 12px;
  border: 1px solid var(--sc-border);
}

.sc-asia-map-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ==========================================================
   18. RESPONSIVE ADDITIONS FOR NEW MODULES
   ========================================================== */
@media (max-width: 1024px) {
  .sc-about-parts-grid,
  .sc-about-network-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sc-about-parts-gallery {
    max-width: 760px;
  }
}

@media (max-width: 767px) {
  .sc-about-parts-sec,
  .sc-about-network-sec {
    padding: 36px 0;
  }
  .sc-about-parts-title,
  .sc-banner-title,
  .sc-about-network-title {
    font-size: 28px;
  }
  .sc-about-parts-grid-inner {
    gap: 12px;
  }
  .sc-parts-card-title {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    min-height: 0;
    margin: 10px 11px 12px;
    font-size: 12.5px;
  }
  .sc-banner-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  /* text spans nearly the full width on phones, so keep the scrim even */
  .sc-about-banner-scrim {
    background: linear-gradient(180deg, rgba(5, 15, 42, 0.60) 0%, rgba(7, 30, 71, 0.55) 50%, rgba(5, 15, 42, 0.62) 100%);
  }
  .sc-callout-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Very narrow phones: one spare per row so product detail stays visible */
@media (max-width: 359px) {
  .sc-about-parts-grid-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .sc-parts-card-title {
    font-size: 13px;
  }
}


/* ==========================================================
   19. v3 ADDITIONS — IMAGE SLOTS / PLACEHOLDERS
   Every photo slot is a .sc-ph box. When the photo file is not
   uploaded yet, a tidy placeholder shows the file name to use.
   ========================================================== */
.sc-ph {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
  border-radius: var(--sc-card-r);
  background: var(--sc-panel);
  box-shadow: var(--sc-shadow-md);
}

.sc-ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--sc-ease);
}

.sc-ph-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: #6F8DBE;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(26,111,224,0.045) 14px 15px),
    linear-gradient(135deg, #EAF1FB 0%, #D5E4F9 100%);
  box-shadow: inset 0 0 0 2px rgba(26,111,224,0.16);
  border-radius: inherit;
}

.sc-ph-name {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sc-navy);
  opacity: 0.75;
  word-break: break-all;
}

.sc-ph-size {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
}

.sc-ph-dark .sc-ph-inner {
  color: rgba(255,255,255,0.55);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px),
    linear-gradient(135deg, #0F3470 0%, #071E47 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}

.sc-ph-dark .sc-ph-name { color: #fff; }

/* ---------- Hero refinements ---------- */
.sc-hero-sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  max-width: 600px;
  margin: 0 0 14px;
}

.sc-about-hero h1 { margin-bottom: 14px; }
.sc-hero-lead { font-size: clamp(15px, 1.6vw, 17px); margin-bottom: 32px; }

/* ---------- Who We Are: text | photo | fact cards ---------- */
.sc-intro-photo .sc-image-frame .sc-ph {
  border-radius: 20px;
  box-shadow: var(--sc-shadow-lg);
}

.sc-intro-facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(160deg, var(--sc-sky) 0%, #E2ECFA 100%);
  border: 1px solid var(--sc-border);
  border-radius: 20px;
  padding: 14px 24px;
}

.sc-fact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
}

.sc-fact + .sc-fact { border-top: 1px solid rgba(26,111,224,0.14); }

.sc-fact-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--sc-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(11,42,94,0.08);
  transition: transform var(--sc-t) var(--sc-ease);
}

.sc-fact:hover .sc-fact-icon { transform: scale(1.08) rotate(-4deg); }
.sc-fact-icon svg { width: 24px; height: 24px; }

.sc-fact strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--sc-navy);
  margin-bottom: 2px;
}

.sc-fact span:not(.sc-fact-icon) {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sc-muted);
}

/* ---------- Expertise photo cards ---------- */
.sc-expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sc-exp-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-card-r);
  box-shadow: var(--sc-shadow-sm);
  overflow: hidden;
  transition: transform var(--sc-t) var(--sc-ease), box-shadow var(--sc-t) ease, border-color var(--sc-t) ease;
}

.sc-exp-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sc-shadow-lg);
  border-color: rgba(26,111,224,0.28);
}

.sc-exp-photo { position: relative; }

.sc-exp-photo .sc-ph {
  border-radius: 0;
  box-shadow: none;
}

.sc-exp-card:hover .sc-ph > img { transform: scale(1.07); }

.sc-exp-icon {
  position: absolute;
  left: 22px;
  bottom: -22px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-blue) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(11,42,94,0.25);
}

.sc-exp-icon svg { width: 20px; height: 20px; }

.sc-exp-body { padding: 36px 24px 26px; }

.sc-exp-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--sc-navy);
  margin: 0 0 8px;
}

.sc-exp-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--sc-muted);
  margin: 0;
}

/* ---------- Technical approach ---------- */
.sc-approach-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: linear-gradient(160deg, var(--sc-panel) 0%, #E9F1FC 100%);
  border: 1px solid var(--sc-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-md);
}

.sc-approach-photo { position: relative; min-height: 380px; }

.sc-approach-photo .sc-ph {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

.sc-approach-body { padding: 52px 48px; }

.sc-approach-body h2 { font-size: clamp(24px, 2.8vw, 34px); }

.sc-approach-body > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sc-muted);
  margin: 0 0 32px;
}

.sc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.sc-steps li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.sc-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24px;
  right: -9px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--sc-blue);
  border-right: 2px solid var(--sc-blue);
  transform: rotate(45deg);
  opacity: 0.55;
}

.sc-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--sc-blue);
  border: 1px solid var(--sc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(11,42,94,0.1);
  transition: transform var(--sc-t) var(--sc-ease), background var(--sc-t) ease, color var(--sc-t) ease;
}

.sc-step-icon svg { width: 24px; height: 24px; }

.sc-steps li:hover .sc-step-icon {
  transform: translateY(-4px);
  background: var(--sc-blue);
  color: #fff;
}

.sc-step-text {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sc-navy);
}

/* ==========================================================
   20. SERVICE NETWORK — REAL MAP (India removed)
   ========================================================== */
.sc-about-network-grid { grid-template-columns: 0.9fr 1.3fr; }

.sc-country-card { cursor: pointer; }

.sc-country-card:focus-visible {
  outline: 2px solid var(--sc-blue);
  outline-offset: 2px;
}

.sc-country-card.is-active {
  transform: translateX(6px);
  border-color: rgba(26,111,224,0.45);
  box-shadow: var(--sc-shadow-md);
}

.sc-network-map-canvas {
  position: relative;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: 24px;
  box-shadow: var(--sc-shadow-md);
  overflow: hidden;
}

.sc-asia-map-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.sc-map-grid line {
  stroke: #C9DCF6;
  stroke-width: 0.8;
  stroke-dasharray: 3 5;
}

.sc-map-base path {
  fill: #E4EDF9;
  stroke: #FFFFFF;
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.sc-map-focus .sc-map-region {
  fill: #93B9F0;
  stroke: #FFFFFF;
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

.sc-map-focus .sc-map-region:hover,
.sc-map-focus .sc-map-region.is-active { fill: #3F8DEB; }

.sc-network-map-canvas.has-active .sc-map-region:not(.is-active) { opacity: 0.6; }

/* routes */
.sc-map-route {
  fill: none;
  stroke: var(--sc-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
  opacity: 0.8;
  transition: opacity 0.3s ease, stroke-width 0.3s ease;
}

.sc-network-map-canvas.has-active .sc-map-route:not(.is-active) { opacity: 0.25; }
.sc-map-route.is-active { stroke-width: 3; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .sc-map-route { animation: scRouteFlow 1.4s linear infinite; }
}

@keyframes scRouteFlow { to { stroke-dashoffset: -26; } }

.sc-vessel {
  fill: #fff;
  stroke: var(--sc-blue);
  stroke-width: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .sc-vessel, .sc-pin-pulse { display: none; }
}

/* pins (flat — no glow) */
.sc-pin { cursor: pointer; }
.sc-pin-halo { fill: rgba(26,111,224,0.2); transition: fill 0.3s ease; }
.sc-pin-dot  { fill: var(--sc-blue); }
.sc-pin-core { fill: #fff; }
.sc-pin-pill { fill: var(--sc-navy); transition: fill 0.3s ease; }

.sc-pin-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
}

.sc-pin-hq .sc-pin-dot  { fill: var(--sc-navy); }
.sc-pin-hq .sc-pin-core { fill: #FACC15; }
.sc-pin-pulse { fill: var(--sc-blue); opacity: 0.4; }

.sc-pin.is-active .sc-pin-pill { fill: var(--sc-blue); }
.sc-pin.is-active .sc-pin-halo { fill: rgba(26,111,224,0.38); }

.sc-map-legend {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--sc-border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sc-navy);
}

.sc-map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-map-legend i { display: inline-block; }
.sc-lg-hq    { width: 10px; height: 10px; border-radius: 50%; background: #FACC15; border: 2px solid var(--sc-navy); }
.sc-lg-port  { width: 10px; height: 10px; border-radius: 50%; background: var(--sc-blue); }
.sc-lg-route { width: 20px; height: 0; border-top: 2px dashed var(--sc-blue); }

/* ==========================================================
   21. OUR COMMITMENT BAND
   ========================================================== */
.sc-commit-sec {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  background: linear-gradient(120deg, var(--sc-navy-deep) 0%, var(--sc-navy) 100%);
  overflow: hidden;
}

.sc-commit-photo { position: relative; min-height: 360px; }

.sc-commit-photo .sc-ph {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

.sc-commit-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,15,42,0) 55%, var(--sc-navy-deep) 100%);
  pointer-events: none;
}

.sc-commit-wrap.sc-about-wrap {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 64px clamp(24px, 5vw, 72px);
}

.sc-commit-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 980px;
}

.sc-commit-text h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 8px 0 16px;
}

.sc-commit-text p {
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(234,241,251,0.82);
  margin: 0;
}

.sc-commit-points {
  list-style: none;
  margin: 0;
  padding: 8px 24px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
}

.sc-commit-points li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.sc-commit-points li + li { border-top: 1px solid rgba(255,255,255,0.14); }

.sc-commit-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(26,111,224,0.3);
  border: 1px solid rgba(76,159,255,0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-commit-icon svg { width: 20px; height: 20px; }

/* ==========================================================
   22. v3 RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .sc-intro-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .sc-intro-text { grid-column: 1 / -1; }
  .sc-expertise-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .sc-approach-card { grid-template-columns: 1fr; }
  .sc-approach-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .sc-approach-body { padding: 40px 32px; }
  .sc-commit-sec { grid-template-columns: 1fr; }
  .sc-commit-photo { min-height: 0; aspect-ratio: 16 / 8; }
  .sc-commit-photo::after { background: linear-gradient(180deg, rgba(5,15,42,0) 55%, var(--sc-navy-deep) 100%); }
  .sc-commit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .sc-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .sc-expertise-grid { grid-template-columns: 1fr; }
  .sc-approach-body { padding: 32px 22px; }
  .sc-steps { flex-wrap: wrap; row-gap: 24px; }
  .sc-steps li { flex: 0 0 calc(50% - 4px); }
  .sc-steps li::after { display: none; }
  .sc-map-legend { position: static; margin: 12px auto 0; justify-content: center; flex-wrap: wrap; border-radius: 14px; }
  .sc-commit-wrap.sc-about-wrap { padding: 40px 20px; }
  .sc-pin-label { font-size: 13px; }
}

/* ==========================================================
   23. REDESIGNED SECTIONS (v3.1): 
   - TECHNICAL APPROACH (.sc-ta-*)
   - OUR FOUNDATION (.sc-fn-*)
   - CONNECT WITH US CTA (.sc-cta-*)
   ========================================================== */

/* ----------------------------------------------------------
   SECTION 1: OUR TECHNICAL APPROACH (.sc-ta-*)
   ---------------------------------------------------------- */
.sc-ta-section {
  padding: 80px 0;
  position: relative;
  background-color: #ffffff;
}

.sc-ta-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.sc-ta-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 4vw, 56px);
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(30, 95, 216, 0.12);
  box-shadow: 0 16px 48px rgba(11, 42, 91, 0.07);
  padding: clamp(28px, 4vw, 48px);
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--sc-t) var(--sc-ease), transform var(--sc-t) var(--sc-ease);
}

.sc-ta-card::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(30, 95, 216, 0.05) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Left Visual Column */
.sc-ta-visual-col {
  position: relative;
  z-index: 1;
}

.sc-ta-photo-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(11, 42, 91, 0.14);
  background: var(--sc-navy-dark);
  aspect-ratio: 4 / 3.4;
  min-height: 340px;
}

.sc-ta-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-ta-card:hover .sc-ta-photo {
  transform: scale(1.04);
}

.sc-ta-photo-scrim {
  position: absolute;
  inset: 0;
  /* light bottom vignette only — the dark 0.65 base was there to carry the
     removed diagnostics badge */
  background: linear-gradient(180deg, rgba(7, 30, 71, 0) 55%, rgba(7, 30, 71, 0.28) 100%);
  pointer-events: none;
}

/* Right Content Column */
.sc-ta-content-col {
  position: relative;
  z-index: 1;
}

.sc-ta-badge-wrap {
  margin-bottom: 12px;
}

.sc-ta-badge {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E5FD8;
  background: #EAF2FD;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(30, 95, 216, 0.2);
}

.sc-ta-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  color: #0B2A5B;
  margin: 0 0 16px;
}

.sc-ta-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: #475569;
  margin: 0 0 32px;
}

/* 4-Step Animated Timeline */
.sc-ta-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  margin-top: 24px;
}

.sc-ta-connector-track {
  position: absolute;
  top: 36px;
  left: 36px;
  right: 36px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
}

.sc-ta-line-svg {
  width: 100%;
  height: 2px;
  display: block;
  overflow: visible;
}

.sc-ta-draw-line {
  stroke: #1E5FD8;
  stroke-width: 2;
  stroke-dasharray: 6 6;
  opacity: 0.35;
}

/* Luminous Traveling Energy Beam on Track */
.sc-ta-connector-runner {
  position: absolute;
  top: -2px;
  left: 0%;
  width: 25%;
  height: 6px;
  background: radial-gradient(ellipse at center, #1E5FD8 0%, rgba(30, 95, 216, 0.55) 55%, transparent 100%);
  border-radius: 6px;
  filter: drop-shadow(0 0 8px rgba(30, 95, 216, 0.8));
  transition: left 0.65s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
  opacity: 0.9;
}

.sc-ta-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
  cursor: pointer;
}

.sc-ta-step-node {
  position: relative;
  margin-bottom: 12px;
}

.sc-ta-step-num {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #1E5FD8;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(30, 95, 216, 0.3);
  z-index: 2;
  transition: all 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.sc-ta-icon-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(30, 95, 216, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E5FD8;
  box-shadow: 0 6px 18px rgba(11, 42, 91, 0.08);
  transition: all 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
}

.sc-ta-icon-circle svg {
  width: 24px;
  height: 24px;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Dark blue active & hover states (smooth ping-pong animation) */
.sc-ta-step.is-active .sc-ta-icon-circle,
.sc-ta-step:hover .sc-ta-icon-circle {
  background: #1E5FD8;
  color: #ffffff;
  border-color: #1E5FD8;
  box-shadow: 0 12px 28px rgba(30, 95, 216, 0.45), 0 0 0 6px rgba(30, 95, 216, 0.16);
  transform: translateY(-6px) scale(1.08);
}

.sc-ta-step.is-active .sc-ta-icon-circle svg,
.sc-ta-step:hover .sc-ta-icon-circle svg {
  transform: scale(1.15);
}

.sc-ta-step.is-active .sc-ta-step-num,
.sc-ta-step:hover .sc-ta-step-num {
  background: #0B2A5B;
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(11, 42, 91, 0.45);
}

.sc-ta-step-label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0B2A5B;
  line-height: 1.35;
  max-width: 130px;
  transition: color 0.45s ease, transform 0.45s ease;
}

.sc-ta-step.is-active .sc-ta-step-label,
.sc-ta-step:hover .sc-ta-step-label {
  color: #1E5FD8;
  font-weight: 700;
  transform: translateY(-2px);
}

/* CSS Fallback Ping-Pong (1 -> 2 -> 3 -> 4 -> 3 -> 2 -> 1) */
.sc-ta-timeline:not(.js-controlled) .sc-ta-step[data-step="1"] .sc-ta-icon-circle {
  animation: scTaPingPong1 7.2s infinite ease-in-out;
}
.sc-ta-timeline:not(.js-controlled) .sc-ta-step[data-step="2"] .sc-ta-icon-circle {
  animation: scTaPingPong2 7.2s infinite ease-in-out;
}
.sc-ta-timeline:not(.js-controlled) .sc-ta-step[data-step="3"] .sc-ta-icon-circle {
  animation: scTaPingPong3 7.2s infinite ease-in-out;
}
.sc-ta-timeline:not(.js-controlled) .sc-ta-step[data-step="4"] .sc-ta-icon-circle {
  animation: scTaPingPong4 7.2s infinite ease-in-out;
}

@keyframes scTaPingPong1 {
  0%, 14%, 96%, 100% {
    background: #1E5FD8;
    color: #ffffff;
    border-color: #1E5FD8;
    box-shadow: 0 12px 28px rgba(30, 95, 216, 0.45), 0 0 0 6px rgba(30, 95, 216, 0.16);
    transform: translateY(-6px) scale(1.08);
  }
  18%, 92% {
    background: #ffffff;
    color: #1E5FD8;
    border-color: rgba(30, 95, 216, 0.2);
    box-shadow: 0 6px 18px rgba(11, 42, 91, 0.08);
    transform: translateY(0) scale(1);
  }
}

@keyframes scTaPingPong2 {
  0%, 14%, 35%, 80%, 100% {
    background: #ffffff;
    color: #1E5FD8;
    border-color: rgba(30, 95, 216, 0.2);
    box-shadow: 0 6px 18px rgba(11, 42, 91, 0.08);
    transform: translateY(0) scale(1);
  }
  17%, 32%, 83%, 95% {
    background: #1E5FD8;
    color: #ffffff;
    border-color: #1E5FD8;
    box-shadow: 0 12px 28px rgba(30, 95, 216, 0.45), 0 0 0 6px rgba(30, 95, 216, 0.16);
    transform: translateY(-6px) scale(1.08);
  }
}

@keyframes scTaPingPong3 {
  0%, 31%, 52%, 65%, 83%, 100% {
    background: #ffffff;
    color: #1E5FD8;
    border-color: rgba(30, 95, 216, 0.2);
    box-shadow: 0 6px 18px rgba(11, 42, 91, 0.08);
    transform: translateY(0) scale(1);
  }
  35%, 49%, 68%, 80% {
    background: #1E5FD8;
    color: #ffffff;
    border-color: #1E5FD8;
    box-shadow: 0 12px 28px rgba(30, 95, 216, 0.45), 0 0 0 6px rgba(30, 95, 216, 0.16);
    transform: translateY(-6px) scale(1.08);
  }
}

@keyframes scTaPingPong4 {
  0%, 48%, 68%, 100% {
    background: #ffffff;
    color: #1E5FD8;
    border-color: rgba(30, 95, 216, 0.2);
    box-shadow: 0 6px 18px rgba(11, 42, 91, 0.08);
    transform: translateY(0) scale(1);
  }
  52%, 65% {
    background: #1E5FD8;
    color: #ffffff;
    border-color: #1E5FD8;
    box-shadow: 0 12px 28px rgba(30, 95, 216, 0.45), 0 0 0 6px rgba(30, 95, 216, 0.16);
    transform: translateY(-6px) scale(1.08);
  }
}

/* ----------------------------------------------------------
   SECTION 2: OUR FOUNDATION (.sc-fn-*)
   ---------------------------------------------------------- */
.sc-fn-section {
  position: relative;
  background-color: #EAF2FD;
  padding: 96px 0 120px;
  overflow: hidden;
}

.sc-fn-bg-art {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.sc-fn-compass-svg {
  width: 100%;
  height: 100%;
}

.sc-fn-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.sc-fn-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.sc-fn-badge-wrap {
  margin-bottom: 12px;
}

.sc-fn-badge {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E5FD8;
  background: #ffffff;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid rgba(30, 95, 216, 0.2);
  box-shadow: 0 2px 8px rgba(30, 95, 216, 0.08);
}

.sc-fn-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.25;
  color: #0B2A5B;
  margin: 0 0 14px;
}

.sc-fn-title-bar {
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, #1E5FD8 0%, #4C9FFF 100%);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.sc-fn-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

/* 4-Card 3D Flip Grid with 360° Floating Icon Badges */
.sc-flip-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
  padding-top: 42px; /* Leaves headroom for the floating top circle badges */
}

@media (max-width: 1100px) {
  .sc-flip-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
}

@media (max-width: 640px) {
  .sc-flip-cards-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
}

/* Card Outer Container with 3D perspective */
.sc-flip-card {
  perspective: 1200px;
  position: relative;
  min-height: 410px;
  cursor: pointer;
  outline: none;
}

/* Inner 3D Container */
.sc-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* Hover flip only on real hover devices (touch "sticky hover" left cards stuck);
   tap / Read More button toggles .is-flipped via about.js; keyboard focus on the
   back-face link also flips so the focused link is visible. */
@media (hover: hover) {
  .sc-flip-card:hover .sc-flip-card-inner {
    transform: rotateY(180deg);
  }
}

.sc-flip-card.is-flipped .sc-flip-card-inner,
.sc-flip-card:has(.sc-back-btn:focus-visible) .sc-flip-card-inner {
  transform: rotateY(180deg);
}

/* Front & Back Faces */
.sc-flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(11, 42, 91, 0.08);
  display: flex;
  flex-direction: column;
  padding: 46px 20px 24px;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* -------------------------------------------------------
   FLOATING TOP CIRCULAR BADGE (Image 1 Style + 360° Spin)
   ------------------------------------------------------- */

.sc-circle-badge {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* The Core Colored Circle */
.sc-circle-core {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--card-color, #0284c7);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 22px rgba(11, 42, 91, 0.18),
              0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.85s cubic-bezier(0.34, 1.25, 0.64, 1),
              box-shadow 0.5s ease;
}

.sc-circle-core svg {
  width: 30px;
  height: 30px;
  stroke: #ffffff;
  transition: transform 0.85s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* Glowing Aura Behind Circle */
.sc-circle-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-color, #0284c7) 0%, transparent 75%);
  opacity: 0.35;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 1;
}

/* 360° ROTATION on Card Hover */
.sc-flip-card:hover .sc-circle-badge .sc-circle-core {
  transform: rotate(360deg) scale(1.08);
  box-shadow: 0 14px 30px rgba(11, 42, 91, 0.28),
              0 0 20px var(--card-color, #0284c7);
}

.sc-flip-card:hover .sc-circle-glow {
  opacity: 0.8;
  transform: scale(1.2);
}

/* Mini badge on Back Face */
.sc-circle-badge.is-back {
  top: -30px;
  width: 60px;
  height: 60px;
}
.sc-circle-badge.is-back .sc-circle-core {
  border-color: #0b2a5b;
}

/* -------------------------------------------------------
   FRONT FACE CONTENT & INNER FRAME (Image 1 Style)
   ------------------------------------------------------- */

.sc-flip-front {
  border: 1px solid rgba(11, 42, 91, 0.08);
}

/* Inner Frame Outline with Perfect Spacing */
.sc-card-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #eef3f9;
  border-radius: 16px;
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Subtle corner watermark number */
.sc-card-frame .sc-fn-watermark {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: rgba(11, 42, 91, 0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: color 0.4s ease, transform 0.4s ease;
}

.sc-card-frame .sc-fn-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #0b2a5b;
  margin: 6px 0 10px;
  line-height: 1.35;
  transition: color 0.3s ease;
}

.sc-card-frame .sc-fn-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: #64748b;
  margin: 0 0 16px;
  flex-grow: 1;
}

/* Bottom "Read More / Flip" indicator */
.sc-card-flip-prompt {
  margin-top: auto;
  padding-top: 8px;
}

.sc-flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--card-color, #0284c7);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.3s ease, gap 0.3s ease;
}

.sc-flip-hint svg {
  transition: transform 0.3s ease;
}

.sc-flip-card:hover .sc-flip-hint svg {
  transform: translateX(4px);
}

.sc-flip-card:hover .sc-card-frame {
  border-color: var(--card-color, #0284c7);
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.08);
}

/* -------------------------------------------------------
   BACK FACE (REVEALED CONTENT ON 3D FLIP)
   ------------------------------------------------------- */

.sc-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(155deg, #071f45 0%, #03122c 100%);
  color: #ffffff;
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 20px 48px rgba(7, 31, 69, 0.32);
}

.sc-card-frame.is-back-frame {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  align-items: flex-start;
  text-align: left;
  padding: 24px 20px 18px;
}

.sc-back-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--card-color, #38bdf8);
  margin-bottom: 4px;
}

.sc-back-title {
  font-family: 'Poppins', sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.3;
}

.sc-back-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-back-bullets li {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: #cbd5e1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sc-bullet-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  font-weight: 800;
  font-size: 10.5px;
  flex-shrink: 0;
  margin-top: 1px;
}

.sc-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--card-color, #0284c7);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.sc-back-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.sc-back-btn svg {
  transition: transform 0.3s ease;
}

.sc-back-btn:hover svg {
  transform: translateX(3px);
}

/* Organic Wave Divider */
.sc-fn-wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.sc-fn-wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----------------------------------------------------------
   SECTION 3: CONNECT WITH US (.sc-cta-*)
   ---------------------------------------------------------- */
.sc-cta-section {
  padding: 80px 0 100px;
  background-color: #ffffff;
  position: relative;
}

.sc-cta-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.sc-cta-banner {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(56px, 6vw, 84px) clamp(24px, 5vw, 64px);
  text-align: center;
  box-shadow: 0 24px 60px rgba(5, 15, 42, 0.24);
  background-image: var(--sc-cta-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sc-cta-bg-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg, 
    rgba(11, 42, 91, 0.48) 0%, 
    rgba(14, 52, 115, 0.36) 50%, 
    rgba(11, 42, 91, 0.52) 100%
  );
  z-index: 0;
}

.sc-cta-glow-orb {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 250px;
  background: radial-gradient(circle, rgba(30, 95, 216, 0.35) 0%, rgba(30, 95, 216, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(20px);
}

.sc-cta-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

/* Pulsing Phone Tile */
.sc-cta-badge-wrapper {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.sc-cta-phone-tile {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1E5FD8 0%, #0B2A5B 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(30, 95, 216, 0.45);
  transition: transform var(--sc-t) var(--sc-ease);
}

.sc-cta-phone-tile:hover {
  transform: scale(1.08) rotate(-4deg);
}

.sc-cta-phone-icon {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  position: relative;
  z-index: 2;
}

.sc-cta-ripple {
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px solid rgba(76, 159, 255, 0.55);
  animation: scSonarRipple 2.4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

@keyframes scSonarRipple {
  0%   { transform: scale(0.95); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}

.sc-cta-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 14px;
}

.sc-cta-bar {
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #4C9FFF, #1E5FD8);
  border-radius: 2px;
  margin: 0 auto 22px;
  box-shadow: 0 0 12px rgba(76, 159, 255, 0.6);
}

.sc-cta-desc {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  line-height: 1.8;
  color: rgba(234, 242, 253, 0.90);
  margin: 0 auto 36px;
  max-width: 720px;
}

.sc-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Primary Button with Sweeping Shine */
.sc-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 50px;
  background: linear-gradient(135deg, #1E5FD8 0%, #154bb3 100%);
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 95, 216, 0.4);
  position: relative;
  overflow: hidden;
  transition: all var(--sc-t) var(--sc-ease);
}

.sc-cta-btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}

.sc-cta-btn-primary:hover::after {
  animation: scSweepShine 1s ease-in-out;
}

@keyframes scSweepShine {
  0%   { left: -60%; }
  100% { left: 140%; }
}

.sc-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(30, 95, 216, 0.55);
}

.sc-cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--sc-t) var(--sc-ease);
}

.sc-cta-btn-primary:hover .sc-cta-arrow {
  transform: translateX(4px);
}

/* Frosted Secondary Button */
.sc-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--sc-t) var(--sc-ease);
}

.sc-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------
   RESPONSIVE QUERIES FOR REDESIGNED SECTIONS
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .sc-ta-card {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sc-ta-photo-wrapper {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .sc-fn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .sc-ta-timeline {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
  .sc-ta-connector-track {
    display: none;
  }
  .sc-fn-grid {
    grid-template-columns: 1fr;
  }
  .sc-fn-card {
    padding: 30px 22px;
  }
  .sc-cta-banner {
    padding: 44px 20px;
    border-radius: 20px;
  }
  .sc-cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .sc-cta-btn-primary,
  .sc-cta-btn-secondary {
    width: 100%;
  }
}

/* ----------------------------------------------------------
   SCROLL REVEAL ANIMATIONS FOR REDESIGNED SECTIONS
   ---------------------------------------------------------- */
.sc-ta-reveal,
.sc-fn-reveal,
.sc-cta-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.sc-ta-in-view,
.sc-fn-in-view,
.sc-cta-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for foundation cards */
.sc-fn-grid .sc-fn-card:nth-child(1) { transition-delay: 0.05s; }
.sc-fn-grid .sc-fn-card:nth-child(2) { transition-delay: 0.15s; }
.sc-fn-grid .sc-fn-card:nth-child(3) { transition-delay: 0.25s; }
.sc-fn-grid .sc-fn-card:nth-child(4) { transition-delay: 0.35s; }

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .sc-ta-reveal,
  .sc-fn-reveal,
  .sc-cta-reveal,
  .sc-ta-step,
  .sc-fn-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sc-cta-ripple,
  .sc-cta-btn-primary::after {
    animation: none !important;
  }
}

/* ==========================================================
   ABOUT US HERO — COMPACT REDESIGN (v4)
   Overrides the original hero rules above. Scoped to
   .sc-about-page .sc-about-hero so no other page is affected.
   ========================================================== */
.sc-about-page .sc-about-hero {
  min-height: clamp(520px, 62vh, 600px);
  padding: 56px 0 52px;
  background: var(--sc-navy-deep);
  color: #fff;
  isolation: isolate;
}

/* Background photo: gentle hover drift instead of continuous Ken Burns */
.sc-about-page .sc-about-hero .sc-hero-bg {
  background-position: center center;
  animation: none;
  transform: scale(1.02);
  transition: transform 10s ease-out;
}
.sc-about-page .sc-about-hero:hover .sc-hero-bg { transform: scale(1.05); }

/* Navy overlay matching the Contact hero, with a soft blue glow */
.sc-about-page .sc-about-hero .sc-hero-overlay {
  background:
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(26,111,224,0.22) 0%, rgba(26,111,224,0) 60%),
    linear-gradient(90deg,
      rgba(5,20,48,0.96) 0%,
      rgba(7,30,71,0.88) 42%,
      rgba(7,30,71,0.45) 75%,
      rgba(7,30,71,0.15) 100%);
}
.sc-about-page .sc-about-hero .sc-hero-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sc-blue) 0%, rgba(76,159,255,0.6) 40%, rgba(76,159,255,0) 75%);
}

/* Left content column */
.sc-about-page .sc-about-hero .sc-hero-content > * {
  max-width: 640px;
}

.sc-about-page .sc-about-hero .sc-about-breadcrumb {
  margin-bottom: 18px;
  color: rgba(255,255,255,0.65);
}
.sc-about-page .sc-about-hero .sc-about-breadcrumb .current { color: rgba(255,255,255,0.9); }

.sc-about-page .sc-about-hero .sc-hero-badge {
  margin-bottom: 16px;
  padding: 5px 14px;
  font-size: 12.5px;
}

.sc-about-page .sc-about-hero h1 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.sc-about-page .sc-about-hero .sc-hero-sub {
  font-size: clamp(17px, 1.7vw, 21px);
  color: rgba(255,255,255,0.92);
  margin: 0 0 10px;
  max-width: 580px;
}

.sc-about-page .sc-about-hero .sc-hero-lead {
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  max-width: 540px;
  margin: 0 0 26px;
}

/* Buttons */
.sc-about-page .sc-about-hero .sc-hero-actions {
  gap: 12px;
  margin-bottom: 30px;
}
.sc-about-page .sc-about-hero .sc-btn-hero,
.sc-about-page .sc-about-hero .sc-btn-ghost {
  min-height: 48px;
  padding: 0 26px;
  font-size: 15px;
  box-sizing: border-box;
  justify-content: center;
}
.sc-about-page .sc-about-hero .sc-btn-hero svg { transition: transform var(--sc-t) var(--sc-ease); }
.sc-about-page .sc-about-hero .sc-btn-hero:hover svg { transform: translateX(3px); }
.sc-about-page .sc-about-hero .sc-btn-hero:focus-visible,
.sc-about-page .sc-about-hero .sc-btn-ghost:focus-visible {
  outline: 2px solid var(--sc-blue-light);
  outline-offset: 3px;
}

/* Compact statistics panel */
.sc-about-page .sc-about-hero .sc-hero-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  max-width: 640px;
  padding: 14px 8px;
  background: rgba(11,42,94,0.55);
  border: 1px solid rgba(124,192,255,0.22);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(3,10,30,0.35);
}
.sc-about-page .sc-about-hero .sc-hero-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 10px;
}
.sc-about-page .sc-about-hero .sc-hero-stat-num { font-size: clamp(24px, 2.4vw, 30px); }
.sc-about-page .sc-about-hero .sc-hero-stat-suffix { font-size: clamp(18px, 1.8vw, 22px); }
.sc-about-page .sc-about-hero .sc-hero-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.66);
  margin-top: 6px;
  line-height: 1.3;
}
.sc-about-page .sc-about-hero .sc-hero-stat-divider {
  height: auto;
  align-self: stretch;
  margin: 6px 0;
  background: rgba(124,192,255,0.22);
}

/* Scroll cue: static, tucked bottom-right so it never overlaps the stats */
.sc-about-page .sc-about-hero .sc-scroll-cue {
  left: auto;
  right: 28px;
  bottom: 22px;
  transform: none;
  animation: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--sc-ease);
}
.sc-about-page .sc-about-hero .sc-scroll-cue:hover {
  border-color: rgba(255,255,255,0.6);
  transform: translateY(2px);
}

/* Entrance animations — CSS only, so content is visible even without JS */
@media (prefers-reduced-motion: no-preference) {
  .sc-about-page .sc-about-hero .sc-hero-overlay {
    animation: scAboutHeroFade 1.2s ease-out both;
  }
  .sc-about-page .sc-about-hero .sc-hero-content > * {
    animation: scAboutHeroRise 0.8s var(--sc-ease) both;
  }
  .sc-about-page .sc-about-hero .sc-about-breadcrumb { animation-delay: 0.05s; }
  .sc-about-page .sc-about-hero .sc-hero-badge       { animation-delay: 0.12s; }
  .sc-about-page .sc-about-hero h1                   { animation-delay: 0.2s; }
  .sc-about-page .sc-about-hero .sc-hero-sub         { animation-delay: 0.3s; }
  .sc-about-page .sc-about-hero .sc-hero-lead        { animation-delay: 0.38s; }
  .sc-about-page .sc-about-hero .sc-hero-actions     { animation-delay: 0.46s; }
  .sc-about-page .sc-about-hero .sc-hero-stats       { animation-delay: 0.56s; }
}
@keyframes scAboutHeroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scAboutHeroFade {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-about-page .sc-about-hero .sc-hero-bg,
  .sc-about-page .sc-about-hero:hover .sc-hero-bg { transition: none; transform: none; }
  .sc-about-page .sc-about-hero .sc-btn-hero,
  .sc-about-page .sc-about-hero .sc-btn-ghost,
  .sc-about-page .sc-about-hero .sc-scroll-cue { transition: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .sc-about-page .sc-about-hero {
    min-height: 480px;
    padding: 48px 0 56px;
  }
  .sc-about-page .sc-about-hero .sc-hero-overlay {
    background: linear-gradient(90deg,
      rgba(5,20,48,0.95) 0%,
      rgba(7,30,71,0.85) 55%,
      rgba(7,30,71,0.55) 100%);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sc-about-page .sc-about-hero {
    min-height: 0;
    padding: 36px 0 44px;
  }
  .sc-about-page .sc-about-hero .sc-hero-bg { background-position: 70% center; }
  .sc-about-page .sc-about-hero .sc-hero-overlay {
    background: linear-gradient(180deg, rgba(5,20,48,0.94) 0%, rgba(7,30,71,0.86) 100%);
  }
  .sc-about-page .sc-about-hero .sc-hero-content > * { max-width: 100%; }
  .sc-about-page .sc-about-hero h1 { font-size: clamp(28px, 8vw, 34px); }
  .sc-about-page .sc-about-hero .sc-hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 24px;
  }
  .sc-about-page .sc-about-hero .sc-btn-hero,
  .sc-about-page .sc-about-hero .sc-btn-ghost { width: 100%; }
  .sc-about-page .sc-about-hero .sc-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
  }
  .sc-about-page .sc-about-hero .sc-hero-stat-divider { display: none; }
  .sc-about-page .sc-about-hero .sc-hero-stat {
    min-width: 0;
    padding: 12px 8px;
  }
  /* Children: stat(1) divider(2) stat(3) divider(4) stat(5) divider(6) stat(7) */
  .sc-about-page .sc-about-hero .sc-hero-stat:nth-child(1),
  .sc-about-page .sc-about-hero .sc-hero-stat:nth-child(3) {
    border-bottom: 1px solid rgba(124,192,255,0.18);
  }
  .sc-about-page .sc-about-hero .sc-hero-stat:nth-child(1),
  .sc-about-page .sc-about-hero .sc-hero-stat:nth-child(5) {
    border-right: 1px solid rgba(124,192,255,0.18);
  }
  .sc-about-page .sc-about-hero .sc-scroll-cue { display: none; }
}

/* ==========================================================
   CONNECT WITH US CTA — PREMIUM REFINEMENT (v4)
   Overrides section 23's .sc-cta-* rules. Scoped to
   .sc-about-page .sc-cta-section so nothing else is affected.
   ========================================================== */
.sc-about-page .sc-cta-section {
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 110px);
}

.sc-about-page .sc-cta-section .sc-cta-banner {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(52px, 6vw, 76px) clamp(24px, 5vw, 72px);
  border-radius: 28px;
  background-color: #0c2b5c;
  background-position: center 60%;
  border: 1px solid rgba(124, 192, 255, 0.35);
  box-shadow:
    0 24px 60px -15px rgba(11, 42, 91, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  isolation: isolate;
}

/* Lighter, luminous overlay that lets the dusk harbor lights and ship show clearly */
.sc-about-page .sc-cta-section .sc-cta-bg-layer {
  background:
    radial-gradient(ellipse 75% 85% at 50% 45%, rgba(11, 42, 91, 0.46) 0%, rgba(6, 22, 52, 0.30) 100%),
    linear-gradient(180deg, rgba(14, 52, 115, 0.32) 0%, rgba(11, 42, 91, 0.48) 100%);
}

/* Fine top highlight line + soft blue corner glow */
.sc-about-page .sc-cta-section .sc-cta-bg-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 192, 255, 0.8), transparent);
}
.sc-about-page .sc-cta-section .sc-cta-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 100%, rgba(26, 111, 224, 0.38) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(76, 159, 255, 0.30) 0%, transparent 45%);
}

.sc-about-page .sc-cta-section .sc-cta-glow-orb {
  top: -100px;
  width: 560px;
  height: 280px;
  background: radial-gradient(circle, rgba(11, 132, 243, 0.45) 0%, rgba(76, 159, 255, 0) 70%);
  filter: blur(28px);
}

.sc-about-page .sc-cta-section .sc-cta-content {
  max-width: 720px;
}

/* Icon: translucent blue tile, no endless pulse */
.sc-about-page .sc-cta-section .sc-cta-badge-wrapper { margin-bottom: 22px; }
.sc-about-page .sc-cta-section .sc-cta-phone-tile {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(76, 159, 255, 0.28) 0%, rgba(26, 111, 224, 0.14) 100%);
  border: 1px solid rgba(124, 192, 255, 0.45);
  box-shadow:
    0 12px 30px -8px rgba(26, 111, 224, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.sc-about-page .sc-cta-section .sc-cta-phone-tile:hover { transform: translateY(-2px); }
.sc-about-page .sc-cta-section .sc-cta-phone-icon { stroke: #cfe5ff; }
.sc-about-page .sc-cta-section .sc-cta-ripple {
  animation: none;
  opacity: 0;
}

/* Heading — beats `.sc-about-sec h2 { color: navy }` */
.sc-about-page .sc-cta-section h2.sc-cta-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 16px;
  text-shadow: 0 2px 20px rgba(3, 12, 32, 0.85), 0 1px 4px rgba(0, 0, 0, 0.6);
}

.sc-about-page .sc-cta-section .sc-cta-bar {
  width: 56px;
  height: 3px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, #7CC0FF, var(--sc-blue));
}

.sc-about-page .sc-cta-section .sc-cta-desc {
  max-width: 640px;
  margin: 0 auto 34px;
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.75;
  color: #ffffff;
  font-weight: 450;
  text-shadow: 0 2px 16px rgba(3, 12, 32, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Buttons */
.sc-about-page .sc-cta-section .sc-cta-actions { gap: 14px; }
.sc-about-page .sc-cta-section .sc-cta-btn-primary,
.sc-about-page .sc-cta-section .sc-cta-btn-secondary {
  min-width: 196px;
  min-height: 52px;
  padding: 0 30px;
  box-sizing: border-box;
  font-size: 15.5px;
  transition:
    transform var(--sc-t) var(--sc-ease),
    box-shadow var(--sc-t) ease,
    background-color var(--sc-t) ease,
    border-color var(--sc-t) ease;
}
.sc-about-page .sc-cta-section .sc-cta-btn-primary {
  background: linear-gradient(135deg, #3A8BFF 0%, var(--sc-blue) 55%, #155BC9 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 26px -6px rgba(26, 111, 224, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.sc-about-page .sc-cta-section .sc-cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -8px rgba(26, 111, 224, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.sc-about-page .sc-cta-section .sc-cta-btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.sc-about-page .sc-cta-section .sc-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
  transform: translateY(-3px);
}
.sc-about-page .sc-cta-section .sc-cta-btn-primary:focus-visible,
.sc-about-page .sc-cta-section .sc-cta-btn-secondary:focus-visible {
  outline: 3px solid #7CC0FF;
  outline-offset: 3px;
}

/* Visible by default — only hidden pre-reveal once about.js flags html.sc-cta-anim */
.sc-about-page .sc-cta-section .sc-cta-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-reveal {
    opacity: 0;
    transform: translateY(28px);
  }
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-reveal.sc-cta-in-view {
    opacity: 1;
    transform: none;
  }

  /* Staggered inner reveal */
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-content > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--sc-ease), transform 0.7s var(--sc-ease);
  }
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-in-view .sc-cta-content > * {
    opacity: 1;
    transform: none;
  }
  .sc-about-page .sc-cta-section .sc-cta-content > :nth-child(1) { transition-delay: 0.15s; }
  .sc-about-page .sc-cta-section .sc-cta-content > :nth-child(2) { transition-delay: 0.25s; }
  .sc-about-page .sc-cta-section .sc-cta-content > :nth-child(3) { transition-delay: 0.32s; }
  .sc-about-page .sc-cta-section .sc-cta-content > :nth-child(4) { transition-delay: 0.4s; }
  .sc-about-page .sc-cta-section .sc-cta-content > :nth-child(5) { transition-delay: 0.5s; }

  /* Icon: a single soft pop + one sonar ring on entrance */
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-in-view .sc-cta-phone-tile {
    animation: scCtaIconIn 0.9s var(--sc-ease) 0.2s both;
  }
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-in-view .sc-cta-ripple {
    animation: scSonarRipple 1.8s ease-out 0.6s 2;
  }

  /* One slow light sweep across the card on entrance */
  .sc-about-page .sc-cta-section .sc-cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(124, 192, 255, 0.09) 50%, transparent 65%);
    transform: translateX(-100%);
  }
  html.sc-cta-anim .sc-about-page .sc-cta-section .sc-cta-in-view::after {
    animation: scCtaSweep 2.6s var(--sc-ease) 0.4s 1 both;
  }

  /* Hover-only arrow nudge kept; buttons inherit transitions above */
}

@keyframes scCtaIconIn {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes scCtaSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Tablet */
@media (max-width: 1024px) {
  .sc-about-page .sc-cta-section .sc-cta-banner {
    padding: 56px 40px;
    border-radius: 24px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sc-about-page .sc-cta-section .sc-cta-container { padding: 0 16px; }
  .sc-about-page .sc-cta-section .sc-cta-banner {
    padding: 44px 20px 40px;
    border-radius: 20px;
    background-position: 60% center;
  }
  .sc-about-page .sc-cta-section .sc-cta-bg-layer {
    background: linear-gradient(180deg, rgba(11, 42, 91, 0.50) 0%, rgba(6, 22, 52, 0.58) 100%);
  }
  .sc-about-page .sc-cta-section h2.sc-cta-title { font-size: clamp(26px, 7.5vw, 32px); }
  .sc-about-page .sc-cta-section .sc-cta-desc { margin-bottom: 28px; }
  .sc-about-page .sc-cta-section .sc-cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .sc-about-page .sc-cta-section .sc-cta-btn-primary,
  .sc-about-page .sc-cta-section .sc-cta-btn-secondary {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-about-page .sc-cta-section .sc-cta-btn-primary,
  .sc-about-page .sc-cta-section .sc-cta-btn-secondary,
  .sc-about-page .sc-cta-section .sc-cta-phone-tile { transition: none; }
  .sc-about-page .sc-cta-section .sc-cta-btn-primary:hover,
  .sc-about-page .sc-cta-section .sc-cta-btn-secondary:hover { transform: none; }
}

/* ==========================================================
   ABOUT US HERO — CLEAN LAYOUT (v6)
   Stats strip removed; hero is a focused headline + call to action.
   Placed last so it wins over the earlier hero rules.
   ========================================================== */
.sc-about-page .sc-about-hero {
  min-height: clamp(400px, 52vh, 500px);
  padding: 64px 0 60px;
}

/* Photo stays visible on the right; text side gets a deeper, smoother fade */
.sc-about-page .sc-about-hero .sc-hero-overlay {
  background:
    radial-gradient(ellipse 55% 90% at 8% 50%, rgba(26,111,224,0.20) 0%, rgba(26,111,224,0) 65%),
    linear-gradient(90deg, rgba(5,15,42,0.97) 0%, rgba(7,30,71,0.90) 38%, rgba(7,30,71,0.55) 70%, rgba(7,30,71,0.18) 100%);
}

/* Slow drifting light behind the text */
.sc-about-page .sc-about-hero .sc-hero-overlay::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76,159,255,0.22), transparent 65%);
  filter: blur(10px);
  animation: scAboutGlow 11s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes scAboutGlow {
  from { transform: translate(0, 0); }
  to   { transform: translate(120px, 60px); }
}

.sc-about-page .sc-about-hero .sc-hero-content > * { max-width: 660px; }
.sc-about-page .sc-about-hero .sc-about-breadcrumb { margin-bottom: 16px; font-size: 13.5px; }
.sc-about-page .sc-about-hero .sc-hero-badge {
  margin-bottom: 18px;
  padding: 6px 15px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  background: rgba(26,111,224,0.14);
  backdrop-filter: blur(6px);
}
.sc-about-page .sc-about-hero h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  margin: 0 0 16px;
  text-shadow: 0 2px 24px rgba(3,10,30,0.4);
}
.sc-about-page .sc-about-hero .sc-hero-sub {
  position: relative;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 30px;
  padding-bottom: 20px;
}
/* short accent rule under the sub-heading */
.sc-about-page .sc-about-hero .sc-hero-sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sc-blue), var(--sc-blue-light));
  transform-origin: left;
  animation: scAboutRule 0.9s var(--sc-ease) 0.7s both;
}
@keyframes scAboutRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.sc-about-page .sc-about-hero .sc-hero-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 0 30px;
}
.sc-about-page .sc-about-hero .sc-hero-actions { margin-bottom: 0; gap: 14px; }
.sc-about-page .sc-about-hero .sc-btn-hero,
.sc-about-page .sc-about-hero .sc-btn-ghost { min-height: 50px; padding: 0 30px; font-size: 15px; }
.sc-about-page .sc-about-hero .sc-btn-hero { box-shadow: 0 10px 28px rgba(26,111,224,0.45); }
.sc-about-page .sc-about-hero .sc-btn-hero:hover { box-shadow: 0 14px 34px rgba(26,111,224,0.6); transform: translateY(-2px); }
.sc-about-page .sc-about-hero .sc-btn-ghost { backdrop-filter: blur(6px); }
.sc-about-page .sc-about-hero .sc-btn-ghost:hover { transform: translateY(-2px); }

/* Scroll cue gently bobs */
.sc-about-page .sc-about-hero .sc-scroll-cue { bottom: 24px; animation: scAboutBob 2.2s ease-in-out infinite; }
@keyframes scAboutBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-about-page .sc-about-hero .sc-hero-overlay::after,
  .sc-about-page .sc-about-hero .sc-hero-sub::after,
  .sc-about-page .sc-about-hero .sc-scroll-cue { animation: none; }
}

@media (max-width: 1024px) {
  .sc-about-page .sc-about-hero { min-height: 380px; padding: 52px 0 52px; }
}
@media (max-width: 767px) {
  .sc-about-page .sc-about-hero { min-height: 0; padding: 36px 0 44px; }
  .sc-about-page .sc-about-hero h1 { font-size: clamp(28px, 8vw, 34px); }
  .sc-about-page .sc-about-hero .sc-hero-lead { margin-bottom: 24px; }
  .sc-about-page .sc-about-hero .sc-scroll-cue { display: none; }
}

/* ==========================================================
   ABOUT US — MISSION & VALUES, TECHNICAL SERVICES, SERVICE NETWORK (v7)
   Brings the three sections in line with the rest of the site
   (navy + blue palette, soft chart-grid backgrounds, gradient
   icon tiles, gentle motion). Placed last so it wins.
   ========================================================== */

/* ---------- shared: soft blue "chart grid" backdrop ---------- */
.sc-fn-section,
.sc-net {
  --sc-dots: radial-gradient(rgba(11, 42, 94, 0.09) 1px, transparent 1px);
}

/* ==========================================================
   1. MISSION & CORE VALUES (flip cards)
   ========================================================== */
.sc-fn-section {
  padding: 92px 0 116px;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(11, 132, 243, 0.09) 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(11, 42, 94, 0.05) 0%, transparent 65%),
    linear-gradient(160deg, #f6fafe 0%, #e8f2fb 100%);
}

.sc-fn-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sc-dots);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  pointer-events: none;
}

.sc-fn-bg-art { opacity: 0.35; }

.sc-fn-badge {
  color: var(--sc-blue);
  background: rgba(26, 111, 224, 0.08);
  border: 1px solid rgba(26, 111, 224, 0.2);
  box-shadow: none;
}

.sc-fn-title { letter-spacing: -0.02em; }
.sc-fn-header { margin-bottom: 64px; }

.sc-flip-cards-grid { gap: 26px; padding-top: 48px; }
.sc-flip-card { min-height: 392px; }

/* Front face: clean card, no card-in-card frame */
.sc-flip-face {
  border-radius: 20px;
  padding: 54px 22px 22px;
  box-shadow: 0 1px 2px rgba(11, 42, 94, 0.05), 0 18px 38px -18px rgba(11, 42, 94, 0.28);
}

.sc-flip-front {
  border: 1px solid #dce9f7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

/* Top accent line */
.sc-flip-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--sc-navy), var(--sc-blue-light));
  transform: scaleX(0.35);
  transform-origin: center;
  opacity: 0.55;
  transition: transform 0.5s var(--sc-ease), opacity 0.4s ease;
}
.sc-flip-card:hover .sc-flip-front::before { transform: scaleX(1); opacity: 1; }

.sc-flip-front .sc-card-frame {
  position: static;
  border: 0;
  border-radius: 0;
  padding: 18px 2px 0;
  background: none;
  box-shadow: none;
}
.sc-flip-card:hover .sc-flip-front .sc-card-frame { border: 0; box-shadow: none; }

/* Icon badge: brand gradient on every card */
.sc-circle-core {
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-blue) 100%);
  border: 4px solid #ffffff;
  box-shadow: 0 12px 24px -8px rgba(11, 42, 94, 0.45), 0 0 0 1px rgba(11, 42, 94, 0.06);
}
.sc-circle-glow {
  background: radial-gradient(circle, rgba(26, 111, 224, 0.9) 0%, transparent 72%);
  opacity: 0.28;
  animation: scFnGlow 3.4s ease-in-out infinite;
}
@keyframes scFnGlow {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.18); }
}
.sc-flip-card:hover .sc-circle-badge .sc-circle-core {
  box-shadow: 0 16px 30px -8px rgba(11, 42, 94, 0.5), 0 0 22px rgba(26, 111, 224, 0.55);
}

/* Number sits in the card corner, away from the title */
.sc-flip-front .sc-fn-watermark {
  top: 14px;
  right: 18px;
  font-size: 26px;
  color: rgba(11, 42, 94, 0.08);
}
.sc-flip-card:hover .sc-flip-front .sc-fn-watermark { color: rgba(26, 111, 224, 0.28); }

.sc-flip-front .sc-fn-card-title {
  font-size: 18.5px;
  margin: 2px 0 16px;
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sc-flip-front .sc-fn-card-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 30px;
  height: 3px;
  margin-left: -15px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sc-blue), var(--sc-blue-light));
  transition: width 0.4s var(--sc-ease), margin-left 0.4s var(--sc-ease);
}
.sc-flip-card:hover .sc-flip-front .sc-fn-card-title::after { width: 54px; margin-left: -27px; }

.sc-flip-front .sc-fn-card-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
  margin: 8px 0 16px;
}

/* "Read More" footer */
.sc-flip-front .sc-card-flip-prompt {
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid #e6eef8;
  text-align: center;
}
.sc-flip-front .sc-flip-hint { color: var(--sc-blue); }

/* Back face: same brand navy as the rest of the site */
.sc-flip-back {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(26, 111, 224, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, #0b2a5b 0%, #061633 100%);
  border: 1px solid rgba(124, 192, 255, 0.28);
  padding: 50px 20px 20px;
}
.sc-flip-back .sc-card-frame.is-back-frame { border: 0; background: none; padding: 14px 2px 0; }
.sc-circle-badge.is-back .sc-circle-core { border-color: #0b2a5b; }
.sc-back-kicker { color: #7cc0ff; }
.sc-bullet-check { background: rgba(124, 192, 255, 0.18); color: #7cc0ff; }
.sc-back-btn {
  background: linear-gradient(135deg, var(--sc-blue) 0%, #0b84f3 100%);
  box-shadow: 0 10px 22px -10px rgba(11, 132, 243, 0.85);
}

/* ==========================================================
   2. OUR TECHNICAL SERVICES (13 cards)
   ========================================================== */
.sc-services-sec {
  position: relative;
  overflow: hidden;
  padding-bottom: 88px;
  background:
    radial-gradient(45% 50% at 0% 0%, rgba(11, 132, 243, 0.07) 0%, transparent 70%),
    radial-gradient(45% 50% at 100% 100%, rgba(11, 42, 94, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}
.sc-services-sec .sc-about-wrap { position: relative; }

.sc-services-grid { gap: 20px; }

/* Card: pointer spotlight (--mx/--my set by about.js) over the base gradient */
.sc-card {
  min-height: 98px;
  padding: 22px 48px 22px 22px;
  background:
    radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgba(26, 111, 224, 0.11), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  border-color: #dfeaf7;
}

.sc-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
}
.sc-card-icon svg { width: 24px; height: 24px; }

@media (hover: hover) {
  .sc-card:hover {
    border-color: rgba(26, 111, 224, 0.45);
    box-shadow: 0 2px 4px rgba(11, 42, 94, 0.04), 0 22px 40px -16px rgba(11, 42, 94, 0.28);
  }
  .sc-card:hover .sc-card-icon {
    transform: translateY(-2px) rotate(-6deg) scale(1.07);
    animation: scCardPulse 1.6s ease-out infinite;
  }
  .sc-card:hover .sc-card-icon svg { animation: scCardBob 1.2s ease-in-out infinite; }
}
@keyframes scCardPulse {
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 16px rgba(26,111,224,0.3), 0 0 0 0 rgba(26,111,224,0.45); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 16px rgba(26,111,224,0.3), 0 0 0 14px rgba(26,111,224,0); }
}
@keyframes scCardBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ==========================================================
   3. OUR SERVICE NETWORK
   ========================================================== */
.sc-net {
  padding: 84px 0;
  background:
    radial-gradient(55% 70% at 100% 50%, rgba(11, 132, 243, 0.10) 0%, transparent 65%),
    linear-gradient(160deg, #f6fafe 0%, #e8f2fb 100%);
  border-top: 1px solid #e1ecf8;
  border-bottom: 1px solid #e1ecf8;
}

.sc-net::before {
  inset: 0;
  background-image: var(--sc-dots);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.3) 45%, transparent 70%);
          mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.3) 45%, transparent 70%);
}

/* Slowly turning sonar rings behind the cards */
.sc-net::after {
  content: "";
  position: absolute;
  right: -160px;
  top: 50%;
  width: 640px;
  height: 640px;
  margin-top: -320px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(26, 111, 224, 0.1) 46px 47px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
          mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: scNetSpin 60s linear infinite;
  pointer-events: none;
}
@keyframes scNetSpin { to { rotate: 360deg; } }

.sc-net-grid { z-index: 1; gap: 56px; }

.sc-net-title {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.sc-net-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 16px 0 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sc-blue), var(--sc-blue-light));
}
.sc-net-desc { font-size: 16px; line-height: 1.75; }

.sc-net-cards { gap: 14px; }

.sc-net-card {
  min-height: 72px;
  padding: 16px 20px;
  border-color: #dce9f7;
  overflow: hidden;
}
/* Light sweep on hover */
.sc-net-card:not(.is-hq)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(26, 111, 224, 0.1) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--sc-ease);
  pointer-events: none;
}
.sc-net-card:not(.is-hq):hover::after { transform: translateX(120%); }

.sc-net-flag { width: 40px; height: 27px; border-radius: 5px; }
.sc-net-globe { width: 40px; height: 40px; border-radius: 11px; }
.sc-net-globe svg { width: 20px; height: 20px; }
.sc-net-card.is-world:hover .sc-net-globe svg { animation: scNetGlobe 1.4s linear infinite; }
@keyframes scNetGlobe { to { transform: rotate(360deg); } }
.sc-net-name { font-size: 16px; }

.sc-net-code {
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--sc-sky);
  color: var(--sc-blue);
  font-size: 11px;
}

/* Singapore HQ: navy highlight card */
.sc-net-card.is-hq {
  min-height: 92px;
  padding: 20px 24px 20px 28px;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(26, 111, 224, 0.4) 0%, transparent 60%),
    linear-gradient(135deg, #071e47 0%, #0b2a5b 100%);
  border-color: rgba(124, 192, 255, 0.3);
  box-shadow: 0 22px 40px -18px rgba(7, 30, 71, 0.6);
}
.sc-net-card.is-hq::before {
  top: 16px;
  bottom: 16px;
  background: linear-gradient(180deg, #7cc0ff 0%, var(--sc-blue) 100%);
}
/* Sonar rings inside the HQ card */
.sc-net-card.is-hq::after {
  content: "";
  position: absolute;
  right: -70px;
  top: 50%;
  width: 220px;
  height: 220px;
  margin-top: -110px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(124, 192, 255, 0.14) 22px 23px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  pointer-events: none;
}
.sc-net-card.is-hq .sc-net-flag { width: 50px; height: 34px; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 6px 14px rgba(0, 0, 0, 0.35); }
.sc-net-card.is-hq .sc-net-name { font-size: 20px; color: #ffffff; }
.sc-net-card.is-hq .sc-net-sub { font-size: 13px; color: #a9c9ee; }
.sc-net-card.is-hq .sc-net-text,
.sc-net-card.is-hq .sc-net-badge,
.sc-net-card.is-hq .sc-net-flag { position: relative; z-index: 1; }
.sc-net-badge {
  background: var(--sc-blue);
  padding: 6px 13px;
  box-shadow: 0 0 0 4px rgba(124, 192, 255, 0.22);
  animation: scNetBadge 2.6s ease-out infinite;
}
@keyframes scNetBadge {
  0%   { box-shadow: 0 0 0 0 rgba(124, 192, 255, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(124, 192, 255, 0); }
}

@media (hover: hover) {
  .sc-net-card.is-hq:hover { border-color: rgba(124, 192, 255, 0.6); box-shadow: 0 26px 46px -18px rgba(7, 30, 71, 0.75); }
}

@media (max-width: 900px) {
  .sc-net { padding: 60px 0; }
  .sc-net-grid { gap: 32px; }
}
@media (max-width: 520px) {
  .sc-net-cards { grid-template-columns: 1fr; }
  .sc-net-card.is-hq { padding: 18px 18px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-circle-glow,
  .sc-net::after,
  .sc-net-badge,
  .sc-net-card.is-world:hover .sc-net-globe svg,
  .sc-card:hover .sc-card-icon,
  .sc-card:hover .sc-card-icon svg { animation: none !important; }
}