/* ===========================================================
   Bizniaga Technologies — ODC Page (27 Oct)
   Banner, headings, call-to-action and scroll reveal reuse
   css/services.css. Behaviour (smooth scroll, section snapping,
   reveal) comes from script/career.js. Previous page: Backup/Version 20.
   =========================================================== */

.odc-hero-btn { margin-top: clamp(18px, 3vh, 28px); }
.odc-hero .page-hero-grid > div p { margin-bottom: 0; }
.odc-title { font-size: clamp(22px, min(1.4vw + 12px, 3.4vh + 10px), 40px); }
.odc-sub { max-width: 720px; font-size: clamp(13.5px, min(0.3vw + 10.5px, 1.2vh + 7px), 15.5px); margin-bottom: 0; }

/* every section is one screen on desktop, content centred */
@media (min-width: 861px) {
  .odc-team, .odc-why, .odc-flow, .odc-facility {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-space) + 2vh) 0 4vh;
  }
  .odc-team > .container, .odc-why > .container, .odc-flow > .container, .odc-facility > .container { width: 100%; }
}
@media (max-width: 860px) {
  .odc-team.sv-scene, .odc-why.sv-scene, .odc-flow.sv-scene, .odc-facility.sv-scene { min-height: 0; padding: 64px 0; }
}

/* ---------------- One team, across borders ---------------- */
.odc-team { position: relative; overflow: hidden; background: var(--mist); }
.odc-map {
  position: absolute;
  right: -8%;
  top: 50%;
  width: min(70%, 1100px);
  transform: translateY(-50%);
  opacity: 0.08;
  pointer-events: none;
}
.odc-team > .container { position: relative; z-index: 1; }
.odc-offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 4.4vh, 48px);
}
.odc-office {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vh, 32px) clamp(20px, 1.8vw, 28px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(18, 22, 58, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.odc-office:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(18, 22, 58, 0.12); }
.odc-office.is-main { background: linear-gradient(165deg, #2b23c9 0%, #1a1196 48%, #0e0a63 100%); border-color: transparent; color: #fff; }
.odc-office-tag {
  align-self: flex-start;
  margin-bottom: clamp(12px, 2vh, 18px);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mist);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--purple-start);
}
.odc-office.is-main .odc-office-tag { background: rgba(255, 255, 255, 0.14); color: #fff; }
.odc-office h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 0.6vw + 11px, 22px); color: var(--navy); }
.odc-office.is-main h3 { color: #fff; }
.odc-office p { flex: 1; margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.odc-office.is-main p { color: rgba(255, 255, 255, 0.82); }
.odc-office a { font-size: 13.5px; font-weight: 600; color: var(--purple-start); word-break: break-word; }
.odc-office.is-main a { color: #fff; }
.odc-office a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Why our ODC ---------------- */
.odc-why { background: #fff; }
.odc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 48px);
  margin: clamp(20px, 3.6vh, 36px) 0 clamp(20px, 3.6vh, 36px);
  padding: clamp(14px, 2.4vh, 22px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.odc-stats div { display: flex; align-items: baseline; gap: 10px; }
.odc-stats strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, min(2vw + 12px, 4.6vh + 8px), 48px);
  line-height: 1;
  background: linear-gradient(90deg, var(--red), var(--purple-start));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.odc-stats span { font-size: 14px; color: var(--muted); }
.odc-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.odc-point { padding-top: 14px; border-top: 3px solid var(--purple-start); }
.odc-point-num { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--purple-start); }
.odc-point h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 0.4vw + 11px, 19px); color: var(--navy); }
.odc-point p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------------- How we work ---------------- */
.odc-flow { background: var(--mist); }
.odc-steps {
  list-style: none;
  margin: clamp(26px, 5vh, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  position: relative;
}
.odc-steps::before {                        /* the line joining the steps */
  content: "";
  position: absolute;
  left: 24px; right: 24px; top: 23px;
  height: 2px;
  background: linear-gradient(90deg, var(--purple-start), rgba(75, 63, 176, 0.15));
}
.odc-steps li { position: relative; }
.odc-steps span {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: clamp(12px, 2vh, 18px);
  border-radius: 50%;
  background: linear-gradient(150deg, #2b23c9, #0e0a63);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 0 0 6px var(--mist), 0 10px 22px rgba(26, 17, 150, 0.25);
}
.odc-steps h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 0.4vw + 11px, 19px); color: var(--navy); }
.odc-steps p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------------- Facility + call to action ---------------- */
.odc-facility { background: #fff; }
.odc-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 16px);
  height: clamp(260px, 40vh, 440px);
  margin-top: clamp(20px, 3.6vh, 36px);
}
.odc-ph { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--mist); }
.odc-ph--big { grid-row: 1 / span 2; }
.odc-ph:nth-child(4) { grid-column: 2 / span 2; }
.odc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.odc-ph:hover img { transform: scale(1.05); }
.odc-ph figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 13, 38, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.odc-cta { margin-top: clamp(20px, 3.6vh, 36px); padding: clamp(26px, 4.4vh, 48px) 24px; }

/* ---------------- Smaller screens ---------------- */
@media (max-width: 1024px) {
  .odc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .odc-steps::before { display: none; }
}
@media (max-width: 860px) {
  .odc-offices { grid-template-columns: 1fr; }
  .odc-map { width: 140%; right: -40%; top: 30%; }
  .odc-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .odc-ph { aspect-ratio: 4 / 3; }
  .odc-ph--big { grid-row: auto; grid-column: 1 / span 2; aspect-ratio: 16 / 9; }
  .odc-ph:nth-child(4) { grid-column: 1 / span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .odc-points { grid-template-columns: 1fr; }
  .odc-steps { grid-template-columns: 1fr; }
  .odc-stats { flex-direction: column; gap: 10px; }
}
/* short laptop screens: the facility section keeps its CTA on screen */
@media (min-width: 861px) and (max-height: 720px) {
  .odc-gallery { height: clamp(200px, 32vh, 300px); }
  .odc-cta { padding: 22px 24px; }
  .odc-cta h2 { font-size: 22px; margin-bottom: 4px; }
  .odc-cta p { margin-bottom: 12px; }
}

/* ---------------- Wide screens (units from css/wide.css) ---------------- */
@media (min-width: 1537px) {
  .odc-sub { font-size: calc(15.5 * var(--ut)); max-width: calc(720 * var(--ut)); }
  .odc-office p, .odc-point p, .odc-steps p, .odc-stats span { font-size: calc(14 * var(--ut)); }
  .odc-gallery { height: clamp(260px, 40vh, calc(440 * var(--u))); }
}


/* ---------------- ISO badges (in the numbers strip) ---------------- */
.odc-stats { align-items: center; }
.odc-iso { display: flex; gap: 12px; margin-left: auto; }
.odc-iso img { width: clamp(56px, min(5vw, 9vh), 84px); height: auto; }

/* ---------------- Our Framework: two technology sets with tabs ---------------- */
.odc-fw { margin-top: clamp(18px, 3.4vh, 34px); }
.odc-fw-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(14px, 2.4vh, 22px); }
.odc-fw-tab {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.odc-fw-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--purple-start);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.odc-fw-tab:hover, .odc-fw-tab.is-active { color: #fff; border-color: var(--purple-start); }
.odc-fw-tab:hover::before, .odc-fw-tab.is-active::before { transform: scaleX(1); }
.odc-fw-tab:focus-visible { outline: 2px solid var(--purple-start); outline-offset: 3px; }
.odc-fw-panels {
  display: grid;
  padding: clamp(12px, 2vh, 20px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 22, 58, 0.06);
}
.odc-fw-img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  max-height: calc(100svh - var(--nav-space) - 300px);
  object-fit: contain;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,.9,.32,1);
  pointer-events: none;
}
.odc-fw-img.is-active { opacity: 1; transform: none; }
/* phones: the logo grid keeps a readable size and scrolls sideways */
@media (max-width: 860px) {
  .odc-fw-panels { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .odc-fw-img { width: auto; height: 260px; max-height: none; max-width: none; }
  .odc-iso { margin-left: 0; }
}
@media (min-width: 1537px) {
  .odc-fw-tab { font-size: calc(14 * var(--ut)); }
}
/* framework: larger logos; panel matches the image's own pale background */
.odc-fw-panels { background: #f6f9ff; }
.odc-fw-img { max-height: calc(100svh - var(--nav-space) - 250px); }
.odc-iso img { width: clamp(64px, min(5.4vw, 10vh), 92px); }


/* ================================================================
   27 Oct (later): office cards without the pills; ODC in numbers as
   its own full-width photo section with counting numbers; facility
   photos across the full width of the screen.
   ================================================================ */
.odc-office h3 { margin-top: 0; }

/* ---------------- ODC in numbers ---------------- */
.odc-numbers {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-space) + 4vh) 0 clamp(48px, 10vh, 110px);
  color: #fff;
  background: #0e0a3a;
}
.odc-numbers-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 6s ease-out;
}
.odc-numbers.is-in .odc-numbers-bg { transform: scale(1); }
.odc-numbers::after {                     /* darker towards the bottom so the numbers read clearly */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 10, 58, 0.15) 0%, rgba(14, 10, 58, 0.35) 45%, rgba(14, 10, 58, 0.82) 100%);
}
.odc-numbers > .container { position: relative; z-index: 1; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.odc-counts { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 80px); }
.odc-count { display: flex; flex-direction: column; gap: 6px; }
.odc-count strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, min(4.4vw + 10px, 9vh + 6px), 88px);
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.odc-count > span { font-size: clamp(14px, min(0.5vw + 9px, 1.6vh + 5px), 19px); line-height: 1.3; color: rgba(255, 255, 255, 0.85); }
.odc-numbers .odc-iso { display: flex; gap: 14px; margin: 0; }
.odc-numbers .odc-iso img {
  width: clamp(76px, min(6.4vw, 12vh), 116px);
  height: auto;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
@media (max-width: 860px) {
  .odc-numbers.sv-scene { min-height: 520px; padding: 120px 0 56px; }
  .odc-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}

/* ---------------- Facility: photos across the full width ---------------- */
.odc-facility { padding-bottom: 16px; }
.odc-facility .odc-gallery {
  width: auto;
  margin: clamp(18px, 3.4vh, 34px) 16px 0;
  height: auto;
  flex: 1 1 auto;
  min-height: 300px;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
@media (min-width: 861px) {
  .odc-facility { justify-content: flex-start; }
  .odc-facility .odc-gallery { max-height: calc(100svh - var(--nav-space) - 210px); }
}
@media (max-width: 860px) {
  .odc-facility .odc-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; margin: 20px 10px 0; }
}
@media (min-width: 1537px) {
  .odc-count > span { font-size: calc(17 * var(--ut)); }
}

/* Why our ODC (27 Oct, later): fuller intro from the current site, heading
   sits higher, clear gap before the four points */
.odc-why-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 48px); max-width: 1100px; }
.odc-why-intro p { margin: 0; font-size: clamp(13.5px, min(0.3vw + 10.5px, 1.2vh + 7px), 15.5px); line-height: 1.7; color: var(--muted); }
.odc-why .odc-points { margin-top: clamp(32px, 7vh, 72px); }
@media (min-width: 861px) {
  .odc-why { justify-content: flex-start; padding-top: calc(var(--nav-space) + clamp(28px, 7vh, 72px)); }
}
@media (max-width: 860px) { .odc-why-intro { grid-template-columns: 1fr; } }
@media (min-width: 1537px) { .odc-why-intro p { font-size: calc(15.5 * var(--ut)); } }

/* numbers section: heading and short text at the top-left of the photo */
.odc-numbers { justify-content: space-between; }
.odc-numbers > .odc-numbers-head { display: block; position: relative; z-index: 1; }
.odc-numbers-head .section-eyebrow { color: #cfc9ff; }
.odc-numbers-head .section-title { margin: 0 0 12px; color: #fff; font-size: clamp(24px, min(1.8vw + 12px, 4vh + 10px), 46px); max-width: 760px; }
.odc-numbers-head p:last-child { margin: 0; max-width: 620px; font-size: clamp(14px, min(0.35vw + 10.5px, 1.3vh + 7px), 17px); line-height: 1.7; color: rgba(255, 255, 255, 0.86); }
.odc-numbers::after {
  background: linear-gradient(180deg, rgba(14, 10, 58, 0.72) 0%, rgba(14, 10, 58, 0.25) 40%, rgba(14, 10, 58, 0.35) 60%, rgba(14, 10, 58, 0.85) 100%);
}
@media (max-width: 860px) { .odc-numbers.sv-scene { padding-top: calc(var(--nav-space) + 32px); gap: 40px; } }


/* ================================================================
   28 Oct: two offices (Tokyo removed); "Why our ODC" with the ISO
   badges beside the intro; numbers section removed; facility photos
   line up with the page edges (burger menu / Connect button).
   ================================================================ */
.odc-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .odc-offices { grid-template-columns: 1fr; } }

.odc-why-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.odc-why-top .odc-why-intro { grid-template-columns: 1fr; gap: 14px; max-width: none; }
.odc-cert {
  padding: clamp(16px, 2.6vh, 24px) clamp(18px, 1.8vw, 24px);
  border-radius: 20px;
  background: var(--mist);
  border: 1px solid var(--line);
}
.odc-cert-badges { display: flex; gap: 14px; margin-bottom: 12px; }
.odc-cert-badges img {
  width: clamp(72px, min(6vw, 12vh), 104px);
  height: auto;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(18, 22, 58, 0.08);
}
.odc-cert p { margin: 0; font-size: clamp(13px, min(0.25vw + 10px, 1.2vh + 6px), 14.5px); line-height: 1.6; color: var(--muted); }
.odc-cert strong { color: var(--navy); }
.odc-why .odc-points { margin-top: clamp(28px, 5.6vh, 60px); }
@media (max-width: 960px) { .odc-why-top { grid-template-columns: 1fr; } }

/* facility photos: inside the page width again, filling the rest of the screen */
.odc-facility .odc-gallery { margin: clamp(18px, 3.4vh, 34px) 0 0; }
@media (max-width: 860px) { .odc-facility .odc-gallery { margin: 20px 0 0; } }
@media (min-width: 1537px) { .odc-cert p { font-size: calc(14.5 * var(--ut)); } }
@media (min-width: 861px) {
  .odc-facility .odc-gallery { height: clamp(300px, calc(100svh - var(--nav-space) - 230px), 640px); max-height: none; min-height: 0; }
}
@media (min-width: 861px) and (max-height: 640px) {
  .odc-why { padding-top: calc(var(--nav-space) + 16px); }
  .odc-why-intro p { line-height: 1.55; }
  .odc-cert { padding: 12px 16px; }
  .odc-cert-badges img { width: 64px; padding: 6px; }
  .odc-why .odc-points { margin-top: 22px; }
  .odc-point p { font-size: 13px; line-height: 1.5; }
}

/* ISO box lines up with the top of the section title (28 Oct). Only the
   box moves — script/career.js measures the distance into --cert-up, and
   relative positioning leaves every other element where it was. */
@media (min-width: 961px) {
  .odc-cert { position: relative; top: calc(-1 * var(--cert-up, 0px)); }
}


/* ================================================================
   28 Oct: pop-in on scroll. Each section replays its entrance every
   time it comes on screen (script/career.js). Cards, the ISO box,
   the framework panel and every facility photo "pop": they rise,
   grow from slightly smaller and overshoot a touch before settling,
   one after another; photo captions slide in just after.
   ================================================================ */
[data-reveal] .rv.pop {
  transform: translate3d(0, var(--rv-y, 40px), 0) scale(0.86);
  transform-origin: 50% 80%;
}
[data-reveal].is-in .rv.pop {
  transform: none;
  transition:
    opacity 0.5s ease calc(var(--i, 0) * 110ms + 120ms),
    transform 0.75s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 110ms + 120ms);
}
/* the ISO box keeps its lifted position while it pops */
.odc-cert.rv.pop { transform-origin: 50% 50%; }
/* facility captions slide in after their photo lands */
.odc-ph figcaption { opacity: 0; transform: translateX(-14px); transition: opacity 0.3s ease, transform 0.3s ease; }
.odc-facility.is-in .odc-ph figcaption {
  opacity: 1; transform: none;
  transition: opacity 0.45s ease calc(var(--i, 0) * 110ms + 650ms), transform 0.55s cubic-bezier(.22,.9,.32,1) calc(var(--i, 0) * 110ms + 650ms);
}
/* the banner photo eases in each visit as well */
.odc-hero .page-hero-bg img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.22,.9,.32,1); }
.odc-hero.is-in .page-hero-bg img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .rv.pop, .odc-ph figcaption { opacity: 1; transform: none; transition: none; }
}


/* ================================================================
   28 Oct: world map more visible, with animated arcs connecting
   Kuala Lumpur to Hanoi (highlighted) and other hubs around the world.
   Each arc draws itself, a light dot travels along it, then it fades
   and draws again — staggered by --k.
   ================================================================ */
.odc-map { display: none; }
.odc-mapwrap {
  position: absolute;
  right: -6%;
  top: 50%;
  width: min(74%, 1180px);
  aspect-ratio: 695 / 344;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.odc-mapshape {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #4b3fb0, #2a5fab);
  -webkit-mask: url("../assets/tech/world-map.svg") center / contain no-repeat;
          mask: url("../assets/tech/world-map.svg") center / contain no-repeat;
  opacity: 0.17;
}
.odc-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.odc-arc {
  fill: none;
  stroke: url(#odcArcGrad);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
  animation: odcArc 6s ease-in-out infinite;
  animation-delay: calc(var(--k) * 0.7s);
}
.odc-arc.is-main { stroke-width: 1.8; opacity: 0.9; animation-duration: 4.5s; }
@keyframes odcArc {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  8%   { opacity: 0.55; }
  45%  { stroke-dashoffset: 0; opacity: 0.55; }
  80%  { stroke-dashoffset: 0; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.odc-arc-dot { fill: #fff; stroke: #4b3fb0; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(75, 63, 176, 0.9)); }
.odc-pin { fill: #4b3fb0; opacity: 0.75; }
.odc-pin.is-main { fill: #e42030; opacity: 1; }
.odc-pin.is-hq { fill: #e42030; opacity: 1; stroke: #fff; stroke-width: 1.2; }
.odc-pin-ring { fill: none; stroke: #e42030; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: odcRing 2.4s ease-out infinite; }
.odc-pin-ring.is-hn { animation-delay: 1.2s; }
@keyframes odcRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4); opacity: 0; } }
.odc-pin-label { font: 700 8px var(--font-display, sans-serif); fill: var(--navy); opacity: 0.8; letter-spacing: 0.2px; }
@media (max-width: 860px) {
  .odc-mapwrap { width: 150%; right: -45%; top: 26%; }
  .odc-mapshape { opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) {
  .odc-arc { animation: none; stroke-dashoffset: 0; opacity: 0.5; }
  .odc-arc-dot { display: none; }
  .odc-pin-ring { animation: none; opacity: 0; }
}
/* map tinted purple with a filter (a CSS mask can't load files when the
   page is opened straight from the folder); spread across the whole section */
.odc-mapwrap { left: 50%; right: auto; top: 54%; width: min(100%, 1500px); transform: translate(-50%, -50%); }
img.odc-mapshape {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: none; mask: none;
  background: none;
  filter: brightness(0) saturate(100%) invert(26%) sepia(52%) saturate(2800%) hue-rotate(238deg) brightness(92%);
  opacity: 0.16;
}
.odc-arc { opacity: 0.45; }
.odc-arc.is-main { opacity: 0.9; }
@media (max-width: 860px) {
  .odc-mapwrap { width: 170%; left: 60%; top: 22%; }
  img.odc-mapshape { opacity: 0.12; }
}
/* KL + Hanoi sit in the open space above the right-hand card; map a little stronger */
@media (min-width: 861px) { .odc-mapwrap { top: 38%; } }
img.odc-mapshape { filter: brightness(0) invert(20%) sepia(95%) saturate(3500%) hue-rotate(238deg) brightness(95%); opacity: 0.3; }
/* generic network lines (no pins / labels): map centred behind the section */
@media (min-width: 861px) { .odc-mapwrap { top: 52%; } }
.odc-arc { stroke-width: 1; opacity: 0; animation: odcArc 7s ease-in-out infinite; animation-delay: calc(var(--k) * 0.45s); }
.odc-arcs { filter: drop-shadow(0 0 2px rgba(123, 63, 214, 0.45)); }
@keyframes odcArc {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  6%   { opacity: 0.85; }
  35%  { stroke-dashoffset: 0; opacity: 0.85; }
  70%  { stroke-dashoffset: 0; opacity: 0.6; }
  85%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* map tucked into the upper-right corner (28 Oct) */
@media (min-width: 861px) {
  .odc-mapwrap { left: auto; right: -2%; top: calc(var(--nav-space) + 1vh); width: min(58%, 900px); transform: none; }
}
.odc-arcs { overflow: visible; }

/* ================================================================
   28 Oct (v4): map zoomed in on Southeast Asia, filling the right half
   of the section and fading in from the left; lines converge on KL.
   ================================================================ */
.odc-mapwrap {
  left: 46%; right: 0; top: 0; bottom: 0;
  width: auto; aspect-ratio: auto; transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-composite: intersect;
}
.odc-arcs { overflow: hidden; filter: none; }
.odc-mapimg { filter: brightness(0) invert(20%) sepia(95%) saturate(3500%) hue-rotate(238deg) brightness(95%); opacity: 0.22; }
.odc-arc { stroke-width: 0.7; filter: drop-shadow(0 0 1.2px rgba(123, 63, 214, 0.6)); animation-duration: 6s; animation-delay: calc(var(--k) * 0.4s); }
.odc-kl-glow { transform-box: fill-box; transform-origin: center; animation: odcGlow 3s ease-in-out infinite; }
@keyframes odcGlow { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.3); opacity: 1; } }
@media (max-width: 860px) {
  .odc-mapwrap { left: 0; top: 0; bottom: auto; height: 420px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .odc-kl-glow { animation: none; } }
/* KL sits in the open space above the Hanoi card; northern lines enter from the top edge */
@media (min-width: 861px) { .odc-mapwrap { left: 46%; top: 0; bottom: 0; } }
.odc-mapimg { opacity: 0.26; }
@media (max-width: 860px) { .odc-mapwrap { opacity: 0.45; } }

/* ================================================================
   28 Oct (v5): zoomed-out "global network" — gradient world map with
   glowing hubs; arcs between neighbouring hubs draw in turn.
   ================================================================ */
.odc-mapwrap {
  left: 40%; right: -2%; top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
@media (min-width: 861px) { .odc-mapwrap { top: calc(var(--nav-space) - 10px); bottom: 18%; } }
.odc-mapfill { opacity: 0.2; }
.odc-arc { stroke: url(#odcArcGrad); stroke-width: 1.1; filter: drop-shadow(0 0 2px rgba(91, 79, 224, 0.7)); animation-duration: 7s; animation-delay: calc(var(--k) * 0.35s); }
.odc-node-dot { fill: #fff; stroke: #5b4fe0; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(91, 79, 224, 0.9)); }
.odc-node-ring { fill: none; stroke: #5b4fe0; stroke-width: 0.5; stroke-dasharray: 2 1.5; opacity: 0.55; transform-box: fill-box; transform-origin: center; animation: odcNode 3s ease-in-out infinite; animation-delay: calc(var(--k) * 0.25s); }
@keyframes odcNode { 0%, 100% { transform: scale(0.8); opacity: 0.25; } 50% { transform: scale(1.25); opacity: 0.7; } }
@media (max-width: 860px) { .odc-mapwrap { left: 0; right: 0; top: 40px; bottom: auto; height: 300px; opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .odc-node-ring { animation: none; } }
.odc-mapfill { opacity: 0.32; }

/* ================================================================
   28 Oct: facility photos — 3D hover tilt that follows the mouse with a
   soft glow (same feel as the homepage Services / Products images, see
   initPhotoTilt in script/career.js), and wider gaps in the grid.
   ================================================================ */
.odc-facility .odc-gallery { gap: clamp(16px, 1.8vw, 28px); }
.odc-ph { isolation: isolate; transform-style: preserve-3d; }
.odc-ph.is-tilting { transition: box-shadow 0.35s ease !important; will-change: transform; box-shadow: 0 24px 48px rgba(18, 22, 58, 0.22); z-index: 2; }
.odc-ph .tilt-glow {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 720px; height: 720px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 50%);
  transform: translate3d(-360px, -360px, 0);
  transition: opacity 0.35s ease;
}
.odc-ph.is-tilting .tilt-glow { opacity: 1; }
.odc-ph figcaption { z-index: 2; }
.odc-ph:hover img { transform: scale(1.03); }
/* facility photos: hover pans around the full picture (initPhotoPan in career.js) instead of tilting */
.odc-ph .tilt-glow { display: none; }
.odc-ph:hover img { transform: none; }
.odc-ph img { transition: none; }
.odc-ph.is-panning { cursor: crosshair; box-shadow: 0 18px 40px rgba(18, 22, 58, 0.18); }
.odc-ph.is-panning figcaption { opacity: 0 !important; transition: opacity 0.25s ease !important; }

/* facility photos (28 Oct, later): hovering pops up an enlarged, uncropped
   copy of the photo in the middle of the gallery (initPhotoPop in career.js) */
.odc-ph { cursor: zoom-in; }
.odc-ph.is-panning { cursor: zoom-in; }
.odc-ph img { transition: filter 0.35s ease, transform 0.6s ease; }
.odc-ph.is-popped img { filter: brightness(0.75) blur(1px); }
.odc-ph.is-popped figcaption { opacity: 0 !important; }
.odc-zoom {
  position: fixed;
  z-index: 150;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 90px rgba(10, 12, 40, 0.42), 0 0 0 6px #fff;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(.34,1.3,.64,1), opacity 0.3s ease;
}
.odc-zoom.is-open { opacity: 1; }
.odc-zoom.no-anim { transition: none; }
.odc-zoom img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f4f5fa; }
.odc-zoom figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(11, 13, 38, 0.72); color: #fff;
  font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s ease 0.25s, transform 0.4s ease 0.25s;
}
.odc-zoom.is-open figcaption { opacity: 1; transform: none; }
/* page darkens behind the enlarged photo (clicks / hover pass through it) */
.odc-zoom-dim {
  position: fixed; inset: 0; z-index: 149;
  background: rgba(8, 10, 32, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.odc-zoom-dim.is-on { opacity: 1; }
/* 3 Nov: the open photo can be hovered (keeps it open) and clicked (closes it) */
.odc-zoom.is-open { pointer-events: auto; cursor: zoom-out; }