@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&family=Roboto+Mono:wght@500;600;700&display=swap');

.sy-about {
  --sy-navy: #0A2342;
  --sy-navy-deep: #071831;
  --sy-blue: #1B6FC9;
  --sy-cyan: #00B4D8;
  --sy-green: #2E8B57;
  --sy-amber: #C98A2C;
  --sy-gold: #C9A227;
  --sy-gold-light: #E7C873;
  --sy-grey-bg: #F4F6F8;
  --sy-text: #33404E;
  --sy-text-light: rgba(255,255,255,0.82);
  --sy-radius: 14px;
  --sy-radius-lg: 20px;
  --sy-shadow: 0 12px 32px rgba(10, 35, 66, 0.08);
  --sy-shadow-hover: 0 20px 44px rgba(10, 35, 66, 0.14);
  --sy-glass-bg: rgba(255,255,255,0.62);
  --sy-glass-border: rgba(255,255,255,0.5);
  --sy-hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  font-family: 'Manrope', 'Inter', sans-serif;
  color: var(--sy-text);
  overflow-x: hidden;
}

.sy-about .sy-mono {
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

.sy-about h1, .sy-about h2, .sy-about h3, .sy-about h4, .sy-about h5 {
  font-family: 'Playfair Display', serif;
  color: var(--sy-navy);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.sy-about .sy-btn,
.sy-about .sy-eyebrow,
.sy-about .sy-hero__kicker,
.sy-about .sy-tl-card__year {
  font-family: 'Manrope', 'Inter', sans-serif;
}

.sy-about .sy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-blue);
  margin-bottom: 0.9rem;
  font-weight: 600;
}
/*.sy-about .sy-eyebrow::before {*/
/*  content: '';*/
/*  width: 22px; height: 2px;*/
/*  background: linear-gradient(90deg, var(--sy-blue), var(--sy-cyan));*/
/*  border-radius: 2px;*/
/*  flex: 0 0 auto;*/
/*}*/
.sy-about .sy-eyebrow--light { color: var(--sy-cyan); }
.sy-about .sy-eyebrow--light::before { background: linear-gradient(90deg, var(--sy-cyan), var(--sy-gold-light)); }

.sy-about .sy-h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: 1.26; margin-bottom: 1.1rem; }
.sy-about .sy-h2--light { color: #fff; }
.sy-about .sy-h2--xl { font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.18; }

.sy-about .sy-body {
  max-width: 640px;
  font-size: 1.04rem;
  line-height: 1.82;
  color: var(--sy-text);
  margin-bottom: 1.1rem;
  text-align: left;
  letter-spacing: 0.003em;
}

.sy-about p {
  text-align: left;
  line-height: 1.78;
  margin: 0 0 1rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
  max-width: 68ch;
}
.sy-about p:last-child { margin-bottom: 0; }

.sy-about .sy-mv-col p,
.sy-about .sy-expert-card p,
.sy-about .sy-why-card p,
.sy-about .sy-feature-box p,
.sy-about .sy-csr-card p,
.sy-about .sy-tl-card p,
.sy-about .sy-why-row p {
  max-width: none;
}

.sy-about .sy-hero__lede {
  color: var(--sy-text-light);
  font-size: 1.14rem;
  max-width: 600px;
  line-height: 1.85;
  text-align: left;
  text-wrap: pretty;
}

.sy-about .sy-section { padding: 80px 0; }
.sy-about .sy-section--tight { padding-top: 64px; }
.sy-about .sy-bg-grey { background: var(--sy-grey-bg); }

.sy-about .sy-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}
.sy-about .sy-btn--primary { background: var(--sy-blue); color: #fff; box-shadow: 0 10px 28px rgba(27,111,201,0.35); }
.sy-about .sy-btn--primary:hover { background: #175da8; transform: translateY(-3px); color: #fff; }
.sy-about .sy-btn--outline { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; }
.sy-about .sy-btn--outline:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-3px); }

.sy-about .sy-section__head { margin-bottom: 3rem; }
.sy-about .sy-section__head p { color: #6B7A8C; max-width: 560px; margin: 0 auto; }
.sy-about .sy-section__head.text-center p { text-align: center; }


/* ================================================================
   1. HERO
   ================================================================
   ------------------------------------------------------------------
   MODIFICATION 1 (video background) — see .sy-hero__video rules below
   and the markup change in about.php: a <video> element was added
   inside .sy-hero__media, on top of the existing background-image
   (which is now a poster/fallback only, unchanged and still present
   so the layout, colors and overlay behave exactly as before if the
   video fails to load or autoplay is blocked by the browser).
   ------------------------------------------------------------------
   MODIFICATION 2 (navbar gap fix) — root cause found and fixed:

   ROOT CAUSE OF THE GAP:
   .sy-hero is a COLUMN flexbox with a single flex item (.container),
   and that flex item already contains an inner wrapper
   (.sh-hero-offset) whose padding-top (defined in home.css) exists
   purely to clear the fixed/floating navbar.

   The previous rule used `justify-content: flex-end;`, which packs
   the flex item against the BOTTOM of the 720px-tall section
   (minus the 70px padding-bottom). Because the About page's hero
   copy is shorter than the homepage's (no CTA buttons here), the
   whole .container box is short — so pinning it to the bottom of a
   720px box pushes its TOP edge (and therefore the sh-hero-offset
   padding, and the heading inside it) much further down the page.

   In other words, the navbar-clearance padding-top from
   .sh-hero-offset and the flex-end bottom alignment were both
   pushing the content downward at the same time, and their effects
   stacked — producing the large empty band between the navbar and
   the heading seen on the About page (this does not show up as
   badly on the homepage because its hero content block is taller,
   so it naturally reaches higher up inside the same bottom-aligned
   box).

   THE FIX:
   Changing `justify-content: flex-end` to `justify-content:
   flex-start` makes the flex item sit at the TOP of the section
   instead. Now the .sh-hero-offset padding-top is the ONLY thing
   controlling how far down the content sits (i.e. just enough to
   clear the navbar), instead of being compounded by a second,
   unrelated bottom-alignment push. No margin/padding values needed
   to be invented or guessed — this single alignment property was
   the actual cause of the spacing bug.

   Nothing else in this block changed: min-height, padding-bottom,
   overflow, and padding-top are untouched, so the overall hero
   height/design is preserved exactly as before.
   ================================================================ */
.sy-about .sy-hero {
  position: relative;
  /* MATCHED TO HOME PAGE HERO (home.css):
     min-height:92vh; display:flex; flex-direction:column;
     justify-content:flex-end; background:var(--navy-900) (#0A2035);
     padding-bottom:70px; same as home.css .hero */
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 70px;
  overflow: hidden;
  background: #0A2035;
}
.sy-about .sy-hero__media {
  position: absolute; inset: -40px; z-index: 0; will-change: transform;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  /* background-image on this element (set inline in about.php) now acts as the
     poster/fallback layer, shown instantly while the video loads and shown
     permanently if the browser can't play the video. The zoom animation is
     moved onto the video element itself (see .sy-hero__video) so it still
     applies to whichever layer is actually visible. */
}

/* Autoplay hero background video — sits on top of the fallback background-image,
   fills the same -40px inset box as .sy-hero__media, and is muted/looped via
   attributes in the markup. object-fit: cover keeps it responsive at any
   viewport size without distorting the footage. */
.sy-about .sy-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: sy-hero-zoom 18s ease-out forwards;
  pointer-events: none;
}
@keyframes sy-hero-zoom { from { transform: scale(1.1); } to { transform: scale(1.02); } }

.sy-about .sy-hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  /* MATCHED TO HOME PAGE overlay gradient */
  background: linear-gradient(180deg, rgba(10,20,32,0.74) 0%, rgba(10,20,32,0.5) 42%, rgba(10,20,32,0.94) 100%);
}
.sy-about .sy-hex-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Hexagon overlay pattern is disabled specifically for the About hero background,
   while the <defs> inside its SVG are kept in the DOM so the Expertise section
   (which reuses the same #syHex pattern id) still renders correctly. */
.sy-about #about-hero .sy-hero__media > svg.sy-hex-pattern { display: none; }

.sy-about .sy-hero__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sy-cyan); background: rgba(0,180,216,0.1);
  border: 1px solid rgba(0,180,216,0.35);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.sy-about .sy-hero__kicker i { font-size: 0.8rem; }

.sy-about .sy-hero__title { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.35rem); line-height: 1.18; margin-bottom: 22px; }
.sy-about .sy-hero__title em { font-style: normal; color: var(--sy-cyan); }

.sy-about .sy-hero__actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }


/* ================================================================
   2. WHO WE ARE — asymmetric bento media block + hexagon accents
   ================================================================ */
.sy-about .sy-intro { padding-bottom: 64px; }
.sy-about .sy-intro__top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 50px; }
@media (max-width: 991px) { .sy-about .sy-intro__top { grid-template-columns: 1fr; gap: 40px; } }

.sy-about .sy-intro h2.sy-h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); margin-bottom: 1.15rem; }

/* -- bento media block -- */
.sy-about .sy-bento { position: relative; min-height: 480px; }
.sy-about .sy-bento__main {
  position: absolute; top: 0; left: 0; width: 76%; height: 80%;
  border-radius: var(--sy-radius-lg); overflow: hidden; box-shadow: var(--sy-shadow);
}
.sy-about .sy-bento__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.sy-about .sy-bento:hover .sy-bento__main img { transform: scale(1.06); }

.sy-about .sy-bento__hexwrap {
  position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 1/0.97;
  clip-path: var(--sy-hex);
  background: #fff; padding: 6px;
  box-shadow: 0 16px 36px rgba(10,35,66,0.28);
}
.sy-about .sy-bento__hexwrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: var(--sy-hex);
}

.sy-about .sy-bento__chip {
  position: absolute; top: 6%; right: 4%;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,35,66,0.88); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 8px 16px 8px 8px; color: #fff;
  box-shadow: 0 10px 26px rgba(10,35,66,0.3);
}
.sy-about .sy-bento__chip-thumb {
  width: 34px; height: 38px; clip-path: var(--sy-hex); overflow: hidden; flex: 0 0 auto;
}
.sy-about .sy-bento__chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sy-about .sy-bento__chip span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; }

.sy-about .sy-bento__badge {
  position: absolute; left: 0; bottom: 6%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--sy-shadow-hover);
  border-left: 4px solid var(--sy-amber);
}
.sy-about .sy-bento__badge .sy-mono { font-size: 1.7rem; font-weight: 700; color: var(--sy-navy); line-height: 1; }
.sy-about .sy-bento__badge small { font-size: 0.72rem; line-height: 1.3; color: #6B7A8C; text-align: left; display: block; }

/* ================================================================
   STAT ROW — premium corporate statistics cards
   ================================================================ */
.sy-about .sy-stat-row { margin-top: 6px; }
.sy-about .sy-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
.sy-about .sy-stat {
  position: relative;
  border-radius: 18px;
  padding: 30px 18px 26px;
  text-align: center;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(10,35,66,0.06);
  box-shadow: 0 10px 26px rgba(10,35,66,0.07);
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1), box-shadow 0.45s ease, border-color 0.45s ease;
  overflow: hidden;
  isolation: isolate;
}
.sy-about .sy-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sy-stat-c1, var(--sy-blue)), var(--sy-stat-c2, var(--sy-cyan)));
  z-index: 2;
  transform-origin: left center;
  transform: scaleX(0.35);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
.sy-about .sy-stat:hover::before { transform: scaleX(1); }
.sy-about .sy-stat::after {
  content: '';
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, var(--sy-stat-c1, var(--sy-blue)), transparent 70%);
  opacity: 0.07; top: -65px; right: -65px; z-index: 0; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.5s ease;
}
.sy-about .sy-stat:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 48px rgba(10,35,66,0.16);
  border-color: rgba(10,35,66,0.03);
}
.sy-about .sy-stat:hover::after { opacity: 0.16; transform: scale(1.2); }

.sy-about .sy-stat__icon {
  width: 52px; height: 52px;
  clip-path: var(--sy-hex);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  background: linear-gradient(140deg, var(--sy-stat-c1, var(--sy-blue)), var(--sy-stat-c2, var(--sy-cyan)));
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 10px 20px rgba(10,35,66,0.22);
  position: relative; z-index: 1;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), box-shadow 0.45s ease;
}
.sy-about .sy-stat:hover .sy-stat__icon {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 14px 26px rgba(10,35,66,0.28);
}
.sy-about .sy-stat__num {
  display: block; font-size: 1.85rem; font-weight: 700; color: var(--sy-navy);
  position: relative; z-index: 1; white-space: nowrap; letter-spacing: -0.01em;
}
.sy-about .sy-stat__badge {
  font-size: 0.66rem; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--sy-stat-c1, var(--sy-blue)), var(--sy-stat-c2, var(--sy-cyan)));
  padding: 2px 7px; border-radius: 6px; margin-left: 5px; vertical-align: middle;
  box-shadow: 0 4px 10px rgba(10,35,66,0.18);
}
.sy-about .sy-stat__label {
  display: block; font-family: 'Roboto Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: #6B7A8C; margin-top: 10px; line-height: 1.45; position: relative; z-index: 1;
}
.sy-about .sy-stat__label::before {
  content: ''; display: block; width: 26px; height: 2px; margin: 9px auto 9px;
  background: linear-gradient(90deg, var(--sy-stat-c1, var(--sy-blue)), var(--sy-stat-c2, var(--sy-cyan)));
  border-radius: 2px; opacity: 0.55;
}

.sy-about .sy-stat--blue  { --sy-stat-c1: var(--sy-blue);  --sy-stat-c2: var(--sy-cyan); }
.sy-about .sy-stat--cyan  { --sy-stat-c1: var(--sy-cyan);  --sy-stat-c2: var(--sy-blue); }
.sy-about .sy-stat--green { --sy-stat-c1: var(--sy-green); --sy-stat-c2: #4fb37c; }
.sy-about .sy-stat--amber { --sy-stat-c1: var(--sy-amber); --sy-stat-c2: #e0ab55; }
.sy-about .sy-stat--navy  { --sy-stat-c1: var(--sy-navy);  --sy-stat-c2: var(--sy-blue); }


/* ================================================================
   3. MISSION & VISION — clean elevated cards, restrained accents
   ================================================================ */
.sy-about .sy-mv {
  position: relative;
  background: linear-gradient(180deg, #FBFCFD 0%, var(--sy-grey-bg) 100%);
  overflow: hidden;
}
.sy-about .sy-mv::before {
  content: '';
  position: absolute; top: -220px; right: -180px; width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,111,201,0.05), transparent 70%);
  z-index: 0; pointer-events: none;
}
.sy-about .sy-mv .container { position: relative; z-index: 1; }

.sy-about .sy-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 767px) { .sy-about .sy-mv-grid { grid-template-columns: 1fr; } }

.sy-about .sy-mv-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(10,35,66,0.07);
  border-radius: var(--sy-radius-lg);
  padding: 46px 42px 42px;
  height: 100%;
  box-shadow: 0 4px 18px rgba(10,35,66,0.05);
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}
.sy-about .sy-mv-card::before {
  content: '';
  position: absolute; top: 0; left: 42px; right: 42px; height: 2px;
  background: var(--sy-mv-c, var(--sy-blue));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
.sy-about .sy-mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(10,35,66,0.12);
  border-color: rgba(10,35,66,0.04);
}
.sy-about .sy-mv-card:hover::before { transform: scaleX(1); }

.sy-about .sy-mv-card--mission { --sy-mv-c: var(--sy-blue); --sy-mv-tint: rgba(27,111,201,0.08); }
.sy-about .sy-mv-card--vision  { --sy-mv-c: var(--sy-gold);  --sy-mv-tint: rgba(201,162,39,0.1); }

.sy-about .sy-mv-card__icon {
  width: 58px; height: 65px;
  clip-path: var(--sy-hex);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  background: var(--sy-mv-tint);
  color: var(--sy-mv-c);
  font-size: 1.35rem;
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), background 0.4s ease;
}
.sy-about .sy-mv-card:hover .sy-mv-card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--sy-mv-c);
  color: #fff;
}

.sy-about .sy-mv-card__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--sy-mv-c);
}
.sy-about .sy-mv-card h3 {
  margin-bottom: 16px; font-size: 1.5rem;
}
.sy-about .sy-mv-card p { color: var(--sy-text); line-height: 1.85; margin: 0; }

/* -- core values row, sits beneath the mission/vision cards -- */
.sy-about .sy-mv-values {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: 44px; padding-top: 38px;
  border-top: 1px solid rgba(10,35,66,0.08);
}
.sy-about .sy-mv-value {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10,35,66,0.08);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.sy-about .sy-mv-value:hover {
  transform: translateY(-3px);
  border-color: rgba(27,111,201,0.3);
  box-shadow: 0 10px 22px rgba(10,35,66,0.1);
}
.sy-about .sy-mv-value__icon {
  width: 32px; height: 36px;
  clip-path: var(--sy-hex);
  background: rgba(27,111,201,0.09); color: var(--sy-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex: 0 0 auto;
}
.sy-about .sy-mv-value span {
  font-family: 'Roboto Mono', monospace; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--sy-navy); white-space: nowrap;
}


/* ================================================================
   4. OUR EXPERTISE — dark, honeycomb-staggered icon grid
   ================================================================ */
.sy-about .sy-expertise {
  background: linear-gradient(160deg, var(--sy-navy) 0%, var(--sy-navy-deep) 100%);
  position: relative;
}
.sy-about .sy-hex-pattern--dark { z-index: 0; opacity: 0.6; }
.sy-about .sy-expertise .container { z-index: 1; position: relative; }

.sy-about .sy-expertise__grid { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 54px; align-items: center; }
@media (max-width: 991px) { .sy-about .sy-expertise__grid { grid-template-columns: 1fr; gap: 40px; } }

.sy-about .sy-expertise__intro p { color: rgba(255,255,255,0.68); font-size: 1rem; margin-bottom: 28px; }

.sy-about .sy-expertise__figure {
  position: relative; width: 78%; aspect-ratio: 1/1.05;
  clip-path: var(--sy-hex);
}
.sy-about .sy-expertise__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sy-about .sy-expertise__figure::after {
  content: '';
  position: absolute; inset: -10px; clip-path: var(--sy-hex);
  background: linear-gradient(140deg, var(--sy-cyan), var(--sy-gold-light));
  opacity: 0.28; z-index: -1;
}
@media (max-width: 991px) { .sy-about .sy-expertise__figure { width: 56%; margin: 0 auto; } }

.sy-about .sy-honeycomb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
}
.sy-about .sy-honeycomb > *:nth-child(4n+2),
.sy-about .sy-honeycomb > *:nth-child(4n+3) { margin-top: 36px; }

@media (max-width: 1199px) and (min-width: 992px) {
  .sy-about .sy-honeycomb { grid-template-columns: repeat(3, 1fr); }
  .sy-about .sy-honeycomb > *:nth-child(4n+2),
  .sy-about .sy-honeycomb > *:nth-child(4n+3) { margin-top: 0; }
  .sy-about .sy-honeycomb > *:nth-child(3n+2) { margin-top: 30px; }
}
@media (max-width: 767px) {
  .sy-about .sy-honeycomb { grid-template-columns: repeat(2, 1fr); }
  .sy-about .sy-honeycomb > * { margin-top: 0 !important; }
}

.sy-about .sy-expert-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--sy-radius);
  padding: 30px 22px;
  height: 100%;
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.sy-about .sy-expert-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(0,180,216,0.4);
}
.sy-about .sy-expert-card .sy-hex {
  width: 54px; height: 61px; margin-bottom: 18px;
  clip-path: var(--sy-hex);
  background: linear-gradient(140deg, var(--sy-blue), var(--sy-cyan));
  box-shadow: 0 10px 22px rgba(0,180,216,0.25);
  display: flex; align-items: center; justify-content: center;
}
.sy-about .sy-expert-card .sy-hex i { font-size: 1.15rem; color: #fff; }
.sy-about .sy-expert-card h4 { color: #fff; font-size: 0.98rem; margin-bottom: 8px; line-height: 1.35; }
.sy-about .sy-expert-card p { color: rgba(255,255,255,0.65); font-size: 0.87rem; line-height: 1.65; margin: 0; }


/* ================================================================
   5. WHY CHOOSE — media panel + glassmorphism feature-card grid
   ================================================================ */
.sy-about .sy-why { position: relative; overflow: hidden; }
.sy-about .sy-why::before {
  content: '';
  position: absolute; bottom: -200px; left: -160px; width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.08), transparent 70%);
  z-index: 0; pointer-events: none;
}
.sy-about .sy-why .container { position: relative; z-index: 1; }

.sy-about .sy-why__split { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 52px; align-items: center; }
@media (max-width: 991px) { .sy-about .sy-why__split { grid-template-columns: 1fr; gap: 36px; } }

.sy-about .sy-why__media { position: relative; }
.sy-about .sy-why__media-frame {
  position: relative; width: 100%; aspect-ratio: 4/5;
  border-radius: var(--sy-radius-lg); overflow: hidden; box-shadow: var(--sy-shadow);
}
.sy-about .sy-why__media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.sy-about .sy-why__media:hover .sy-why__media-frame img { transform: scale(1.06); }
.sy-about .sy-why__media-badge {
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  padding: 14px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: 0 16px 34px rgba(10,35,66,0.22);
}
.sy-about .sy-why__media-badge .sy-mono { font-size: 1.6rem; font-weight: 700; color: var(--sy-navy); line-height: 1; }
.sy-about .sy-why__media-badge small { font-size: 0.66rem; line-height: 1.35; color: #4A5A6C; margin-top: 3px; }

.sy-about .sy-why__content > .sy-eyebrow,
.sy-about .sy-why__content > .sy-h2 { max-width: 520px; }

.sy-about .sy-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 575px) { .sy-about .sy-why-grid { grid-template-columns: 1fr; } }

.sy-about .sy-why-card {
  position: relative;
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--sy-radius);
  padding: 24px 22px;
  height: 100%;
  box-shadow: 0 8px 24px rgba(10,35,66,0.06);
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.sy-about .sy-why-card:hover {
  transform: translateY(-6px);
  border-color: var(--sy-why-c, var(--sy-blue));
  box-shadow: 0 18px 36px rgba(10,35,66,0.13);
}
.sy-about .sy-why-card__icon {
  width: 42px; height: 47px;
  clip-path: var(--sy-hex);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  background: rgba(27,111,201,0.1);
  background: color-mix(in srgb, var(--sy-why-c, var(--sy-blue)) 12%, transparent);
  color: var(--sy-why-c, var(--sy-blue));
  font-size: 1rem;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.sy-about .sy-why-card:hover .sy-why-card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--sy-why-c, var(--sy-blue));
  color: #fff;
}
.sy-about .sy-why-card h4 { font-size: 0.98rem; margin-bottom: 6px; }
.sy-about .sy-why-card p { font-size: 0.87rem; line-height: 1.65; color: var(--sy-text); margin: 0; }


/* ================================================================
   6. RESEARCH & INNOVATION — inset hex accent image + formula tag
   ================================================================ */
.sy-about .sy-research__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 992px) {
  .sy-about .sy-research__grid { grid-template-columns: 0.95fr 1.1fr; gap: 64px; align-items: center; }
}

.sy-about .sy-research__media {
  position: relative;
  border-radius: var(--sy-radius-lg);
  overflow: hidden;
  box-shadow: var(--sy-shadow);
  height: 100%;
  min-height: 320px;
}
.sy-about .sy-research__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sy-about .sy-research__col-media { position: relative; padding-bottom: 46px; padding-right: 34px; }
@media (max-width: 575px) { .sy-about .sy-research__col-media { padding-bottom: 34px; padding-right: 24px; } }

.sy-about .sy-research__inset {
  position: absolute; right: 0; bottom: 0;
  width: 46%; aspect-ratio: 1/0.95;
  clip-path: var(--sy-hex);
  background: #fff; padding: 6px;
  box-shadow: 0 16px 36px rgba(10,35,66,0.26);
  z-index: 2;
}
.sy-about .sy-research__inset img { width: 100%; height: 100%; object-fit: cover; display: block; clip-path: var(--sy-hex); }

.sy-about .sy-research__formula {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: rgba(10,35,66,0.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 10px; padding: 10px 16px;
  font-family: 'Roboto Mono', monospace; font-size: 0.78rem; letter-spacing: 0.02em;
}
.sy-about .sy-research__formula span { display: block; color: var(--sy-cyan); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }

.sy-about .sy-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}
@media (max-width: 480px) {
  .sy-about .sy-feature-grid { grid-template-columns: 1fr; }
}

.sy-about .sy-feature-box {
  background: #fff; border-radius: 12px; padding: 22px 20px;
  box-shadow: var(--sy-shadow); height: 100%;
  border-top: 3px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sy-about .sy-feature-box:hover { transform: translateY(-5px); box-shadow: var(--sy-shadow-hover); }

.sy-about .sy-feature-box__icon {
  width: 42px; height: 47px; clip-path: var(--sy-hex);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin-bottom: 13px;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.sy-about .sy-feature-box:hover .sy-feature-box__icon { transform: rotate(-6deg) scale(1.06); }

.sy-about .sy-feature-box h5 { font-size: 0.96rem; margin-bottom: 6px; }
.sy-about .sy-feature-box p { font-size: 0.84rem; color: #6B7A8C; margin: 0; line-height: 1.6; }

.sy-about .sy-feature-box--amber { border-top-color: var(--sy-amber); }
.sy-about .sy-feature-box--amber .sy-feature-box__icon { background: rgba(201,138,44,0.14); color: var(--sy-amber); }

.sy-about .sy-feature-box--green { border-top-color: var(--sy-green); }
.sy-about .sy-feature-box--green .sy-feature-box__icon { background: rgba(46,139,87,0.12); color: var(--sy-green); }

.sy-about .sy-feature-box--blue { border-top-color: var(--sy-blue); }
.sy-about .sy-feature-box--blue .sy-feature-box__icon { background: rgba(27,111,201,0.1); color: var(--sy-blue); }

.sy-about .sy-feature-box--cyan { border-top-color: var(--sy-cyan); }
.sy-about .sy-feature-box--cyan .sy-feature-box__icon { background: rgba(0,180,216,0.12); color: var(--sy-cyan); }


/* ---------- 7. CSR — 4-card grid ---------- */
.sy-about .sy-csr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.sy-about .sy-csr-card {
  background: #fff; border-radius: var(--sy-radius); padding: 30px 24px;
  height: 100%; box-shadow: var(--sy-shadow);
  border-top: 4px solid transparent;
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.sy-about .sy-csr-card:hover { transform: translateY(-8px); box-shadow: var(--sy-shadow-hover); }

.sy-about .sy-csr-card--green { border-top-color: var(--sy-green); }
.sy-about .sy-csr-card--blue  { border-top-color: var(--sy-blue); }
.sy-about .sy-csr-card--amber { border-top-color: var(--sy-amber); }
.sy-about .sy-csr-card--navy  { border-top-color: var(--sy-navy); }

.sy-about .sy-csr-card__icon {
  width: 50px; height: 56px; clip-path: var(--sy-hex);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 16px;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.sy-about .sy-csr-card:hover .sy-csr-card__icon { transform: rotate(-8deg) scale(1.08); }

.sy-about .sy-csr-card--green .sy-csr-card__icon { background: rgba(46,139,87,0.12); color: var(--sy-green); }
.sy-about .sy-csr-card--blue  .sy-csr-card__icon { background: rgba(27,111,201,0.1);  color: var(--sy-blue); }
.sy-about .sy-csr-card--amber .sy-csr-card__icon { background: rgba(201,138,44,0.14); color: var(--sy-amber); }
.sy-about .sy-csr-card--navy  .sy-csr-card__icon { background: rgba(10,35,66,0.08);   color: var(--sy-navy); }

.sy-about .sy-csr-card h4 { margin-bottom: 12px; font-size: 1.06rem; }
.sy-about .sy-csr-card ul { list-style: none; padding: 0; margin: 0; }
.sy-about .sy-csr-card li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  font-size: 0.89rem; color: var(--sy-text);
  border-bottom: 1px dashed rgba(10,35,66,0.08);
}
.sy-about .sy-csr-card li:last-child { border-bottom: none; }
.sy-about .sy-csr-card li i { flex: 0 0 auto; width: 18px; text-align: center; margin-top: 3px; font-size: 0.85rem; }
.sy-about .sy-csr-card li span { text-align: left; }

.sy-about .sy-csr-card--green li i { color: var(--sy-green); }
.sy-about .sy-csr-card--blue  li i { color: var(--sy-blue); }
.sy-about .sy-csr-card--amber li i { color: var(--sy-amber); }
.sy-about .sy-csr-card--navy  li i { color: var(--sy-navy); }


/* ================================================================
   8. COMPANY TIMELINE — curved path, compact elegant milestone cards
   ================================================================ */
.sy-about .sy-timeline { background: linear-gradient(180deg, var(--sy-grey-bg) 0%, #fff 100%); }
.sy-about .sy-tl { position: relative; max-width: 940px; margin: 0 auto; padding: 8px 0 0; }

.sy-about .sy-tl__path-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.sy-about .sy-tl__path-svg path {
  fill: none;
  stroke: url(#syTlGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--sy-path-len, 2400);
  stroke-dashoffset: var(--sy-path-len, 2400);
  transition: stroke-dashoffset 2.1s cubic-bezier(.22,.61,.36,1);
  opacity: 0.55;
}
.sy-about .sy-tl.sy-tl--in-view .sy-tl__path-svg path { stroke-dashoffset: 0; }

.sy-about .sy-tl__stop {
  position: relative; display: flex; align-items: center;
  margin-bottom: 22px;
  z-index: 1;
}
.sy-about .sy-tl__stop:last-child { margin-bottom: 0; }
.sy-about .sy-tl__stop--left  { justify-content: flex-start; }
.sy-about .sy-tl__stop--right { justify-content: flex-end; }

.sy-about .sy-tl__dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sy-tl-c, var(--sy-blue));
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--sy-tl-c, var(--sy-blue)), 0 4px 12px rgba(10,35,66,0.18);
  z-index: 3;
}

.sy-about .sy-tl-card {
  position: relative;
  width: calc(50% - 38px);
  background: #ffffff;
  border: 1px solid rgba(10,35,66,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(10,35,66,0.06);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.sy-about .sy-tl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(10,35,66,0.12);
  border-color: var(--sy-tl-c, var(--sy-blue));
}

.sy-about .sy-tl__stop--left .sy-tl-card { margin-right: auto; }
.sy-about .sy-tl__stop--right .sy-tl-card { margin-left: auto; }

.sy-about .sy-tl-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sy-about .sy-tl-card__icon {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,111,201,0.1);
  background: color-mix(in srgb, var(--sy-tl-c, var(--sy-blue)) 12%, transparent);
  color: var(--sy-tl-c, var(--sy-blue));
  font-size: 0.82rem;
}
.sy-about .sy-tl-card__year {
  font-size: 1.1rem; font-weight: 700; color: var(--sy-navy);
  font-family: 'Playfair Display', serif; line-height: 1;
}
.sy-about .sy-tl-card p { font-size: 0.85rem; color: var(--sy-text); margin: 0; line-height: 1.6; }

.sy-about .sy-tl-c-navy  { --sy-tl-c: var(--sy-navy); }
.sy-about .sy-tl-c-blue  { --sy-tl-c: var(--sy-blue); }
.sy-about .sy-tl-c-cyan  { --sy-tl-c: var(--sy-cyan); }
.sy-about .sy-tl-c-green { --sy-tl-c: var(--sy-green); }
.sy-about .sy-tl-c-amber { --sy-tl-c: var(--sy-amber); }

@media (max-width: 767px) {
  .sy-about .sy-tl__path-svg { display: none; }
  .sy-about .sy-tl__stop, .sy-about .sy-tl__stop--right { justify-content: flex-start; padding-left: 42px; }
  .sy-about .sy-tl__dot { left: 18px; }
  .sy-about .sy-tl-card,
  .sy-about .sy-tl__stop--left .sy-tl-card,
  .sy-about .sy-tl__stop--right .sy-tl-card {
    width: 100%; margin: 0;
  }
}


/* ---------- 9. CTA ---------- */
.sy-about .sy-cta {
  background: linear-gradient(135deg, var(--sy-navy-deep), var(--sy-navy));
  padding: 84px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sy-about .sy-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 14px; }
.sy-about .sy-cta p { color: var(--sy-text-light); max-width: 560px; margin: 0 auto 32px; text-align: center; }
.sy-about .sy-cta__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }


/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .sy-about .sy-hero { padding-top: 0; }
  /* sh-hero-offset (on the inner wrapper) handles the navbar compensation
     dynamically via CSS custom properties at every breakpoint — unchanged. */
}

@media (max-width: 991px) {
  .sy-about .sy-section { padding: 60px 0; }
  .sy-about .sy-hero { min-height: 0; }
  .sy-about .sy-bento { min-height: 380px; }
  .sy-about .sy-research__media { min-height: 320px; }
  .sy-about .sy-mv-card { padding: 36px 30px; }
}

@media (max-width: 767px) {
  .sy-about .sy-hero { min-height: 0; }
  .sy-about .sy-hero__title { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .sy-about .sy-hero__lede { font-size: 0.95rem; }
}

@media (max-width: 575px) {
  .sy-about .sy-hero { padding-top: 0; }
  .sy-about .sy-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sy-about .sy-csr-card { padding: 26px 20px; }
  .sy-about .sy-mv-card { padding: 30px 24px; }
  .sy-about .sy-bento { min-height: 320px; }
  .sy-about .sy-bento__chip span { display: none; }
  .sy-about .sy-bento__chip { padding: 8px; border-radius: 50%; }
  .sy-about .sy-mv-values { gap: 10px; }
  .sy-about .sy-mv-value span { display: none; }
  .sy-about .sy-mv-value { padding: 10px; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sy-about * { animation: none !important; transition: none !important; }
  .sy-about .sy-tl__path-svg path { stroke-dashoffset: 0 !important; }
  /* The hero video itself keeps playing (autoplay/loop are functional attributes,
     not CSS animations) — about.js explicitly pauses it for reduced-motion users,
     see the comment there. */
}