/* Site-mimicking mocks: dark green + warm white, like talentpool.com.sg */
.mock-strip {
  background: #1e3f32;
  color: #f6f5f0;
  border-radius: 12px;
  padding: 28px 24px;
  font-family: Manrope, 'Segoe UI', sans-serif;
}
.mock-strip-line { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.mock-strip-sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #cfe0d6; }

.mock-chain { background: #1e3f32; color: #f6f5f0; border-radius: 12px; padding: 28px 24px; font-family: Manrope, 'Segoe UI', sans-serif; }
.mock-chain-h { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.mock-chain-steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 640px) { .mock-chain-steps { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.mock-chain-step { border-top: 2px solid #3e6b57; padding-top: 10px; }
.mock-chain-step-n { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fc3b1; }
.mock-chain-step-t { font-size: 16px; font-weight: 700; margin-top: 3px; }
.mock-chain-step-d { font-size: 13px; line-height: 1.5; color: #cfe0d6; margin-top: 5px; }
.mock-chain-foot { margin-top: 18px; font-size: 14px; line-height: 1.5; color: #cfe0d6; }

.mock-hero {
  background: #f6f5f0;
  border: 1px solid var(--ds-hairline);
  border-radius: 12px;
  padding: 28px 24px;
  font-family: Manrope, 'Segoe UI', sans-serif;
  color: #14181a;
}
.mock-hero-eyebrow { font-size: 12px; letter-spacing: 0.06em; color: #1e3f32; font-weight: 600; }
.mock-hero-h1 { margin-top: 12px; font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.mock-hero-sub { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: #3c4542; max-width: 34em; }
.mock-hero-new { background: #e3efe8; color: #1e3f32; font-weight: 600; border-radius: 4px; padding: 0 4px; }

.mock-proof {
  background: #f6f5f0;
  border: 1px solid var(--ds-hairline);
  border-radius: 12px;
  padding: 28px 24px;
  font-family: Manrope, 'Segoe UI', sans-serif;
  color: #14181a;
}
.mock-proof-h { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; }
.mock-proof-countries { font-size: 14px; font-weight: 600; color: #1e3f32; letter-spacing: 0.01em; }
.mock-proof-small { font-size: 12.5px; line-height: 1.5; color: #6a7370; max-width: 40em; }
.mock-proof-photolabel { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6a7370; }

.proof-intro { display: flex; gap: 20px; align-items: flex-start; }
.proof-intro-pin { width: 150px; border-radius: 8px; display: block; }
@media (max-width: 639px) { .proof-intro { flex-direction: column; } .proof-intro-pin { width: 130px; } }

.case-card.case-card-cta { background: #1e3f32; display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.case-cta-line { color: #f6f5f0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; padding: 16px 16px 6px; }
.case-cta-sub { color: #cfe0d6; font-size: 13px; line-height: 1.45; padding: 0 16px 16px; }
.case-cta-btn { margin: 2px 16px 16px; align-self: flex-start; border: 1.5px solid #f6f5f0; color: #f6f5f0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }

.case-group-label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #1e3f32; margin: 26px 0 2px; }
.case-group-scope { font-size: 14px; line-height: 1.5; color: #3c4542; margin: 0 0 8px; }
.case-group-label-first { margin-top: 14px; }
.case-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 10px 0 4px; align-items: start; }
@media (min-width: 640px) { .case-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 640px) { .case-grid-2 { grid-template-columns: 1fr 1fr; } }
.case-card { background: #fff; border: 1px solid var(--ds-hairline); border-radius: 10px; overflow: hidden; }
.case-card .img-stack { display: flex; flex-direction: column; }
.case-card .img-stack img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; display: block; }
.case-card img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.case-card img.fit-contain { object-fit: contain; background: #eceae6; }
.case-outcome { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; padding: 12px 14px 4px; }
.case-role { font-size: 13px; line-height: 1.45; color: #3c4542; padding: 0 14px 14px; }
.case-card-text { display: flex; flex-direction: column; justify-content: center; padding: 10px 0; }
.case-card-text .case-outcome { font-size: 18px; }

.evidence-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 12px 0; }
@media (min-width: 640px) { .evidence-grid { grid-template-columns: 1fr 1fr 1fr; } }
.evidence-grid figure { margin: 0; }
.evidence-grid img { border-radius: 8px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.evidence-grid .ev-contain img { object-fit: contain; background: #eceae6; }

.case-grid-1 { grid-template-columns: 1fr; }
.case-card.case-card-wide { display: flex; flex-direction: column; }
.case-card.case-card-wide img.fit-contain { aspect-ratio: auto; width: 100%; max-height: 140px; padding: 20px; background: #ffffff; object-fit: contain; }
@media (min-width: 640px) {
  .case-card.case-card-wide { flex-direction: row; align-items: center; }
  .case-card.case-card-wide img.fit-contain { width: 40%; max-height: 120px; }
  .case-card.case-card-wide .case-card-text { flex: 1; justify-content: center; padding: 18px; }
}

.ev-wide { margin: 12px 0; }
.ev-wide figure { margin: 0; overflow: hidden; border-radius: 8px; }
.ev-wide img { border-radius: 8px; width: 100%; display: block; aspect-ratio: auto; }

/* Subtle photo settle: one 4.8 s move, only while on screen, never under reduced motion. */
@keyframes tp-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.case-card img:not(.fit-contain), .evidence-slide img {
  animation: tp-drift 4.8s cubic-bezier(.22, 1, .36, 1) 1 both;
}
.evidence-grid figure:not(.ev-contain) { overflow: hidden; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .case-card img:not(.fit-contain), .evidence-slide img { animation: none; }
}
/* Limit direct save/drag of photos (deterrence only, not prevention). */
.case-card img, .evidence-grid img, .ev-wide img, .proof-intro-pin, .ev-carousel-frame img {
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}

/* Evidence carousel: looping photos, contain-fit (no cropped faces/composition). */
.ev-carousel { margin: 12px 0; }
.ev-carousel-frame { position: relative; aspect-ratio: 16 / 9; background: #eceae6; border-radius: 8px; overflow: hidden; }
.ev-carousel-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(1);
  transition: opacity 0.9s ease, transform 5.2s linear;
}
.ev-carousel-frame img.on { opacity: 1; transform: scale(1.03); }
.ev-carousel-cap { margin-top: 10px; font-size: 14px; line-height: 1.5; color: #5a564e; }
.ev-carousel-cap.cap-in { animation: capIn 0.5s ease; }
@keyframes capIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ev-carousel-dots { display: flex; gap: 8px; margin-top: 10px; }
.ev-carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: #cfcac2; padding: 0; cursor: pointer; transition: background 0.3s ease; }
.ev-carousel-dots button.on { background: #1e3f32; }
@media (prefers-reduced-motion: reduce) {
  .ev-carousel-frame img { transition: none; transform: none; }
  .ev-carousel-cap.cap-in { animation: none; }
}

/* Scroll reveal: sections and cards rise in once, serving scan order. */
.case-grid .rv:nth-child(2) { transition-delay: 70ms; }
.case-grid .rv:nth-child(3) { transition-delay: 140ms; }
.case-grid .rv:nth-child(4) { transition-delay: 210ms; }
.case-grid .rv:nth-child(5) { transition-delay: 280ms; }
.case-grid .rv:nth-child(6) { transition-delay: 350ms; }

/* Hover lift on case cards (fine pointers only). */
@media (hover: hover) and (pointer: fine) {
  .case-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .case-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30, 63, 50, 0.10); }
}

/* ===== Full-page preview (cohesive website experience) ===== */
.page { font-family: Manrope, 'Segoe UI', sans-serif; color: #1c1a17; border: 1px solid var(--ds-hairline); border-radius: 14px; overflow: hidden; background: #f6f5f0; }

.p-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: #fff; border-bottom: 1px solid #e7e2d8; }
.p-nav-brand { font-size: 19px; font-weight: 800; color: #1e3f32; letter-spacing: -0.02em; }
.p-nav-links { font-size: 14px; color: #4a463e; }
.p-nav-cta { font-size: 13px; font-weight: 700; color: #fff; background: #1e3f32; border-radius: 999px; padding: 8px 16px; }
@media (max-width: 639px) { .p-nav-links { display: none; } }

.p-hero { background: #fff; padding: 56px 24px 48px; border-bottom: 1px solid #e7e2d8; }
.p-hero-inner { max-width: 760px; }
.p-hero .mock-hero-h1 { font-size: 52px; line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: #1c1a17; margin: 10px 0 16px; }
@media (max-width: 639px) { .p-hero .mock-hero-h1 { font-size: 38px; } }
.p-hero .mock-hero-sub { font-size: 17px; line-height: 1.6; color: #4a463e; margin: 0; }
.p-hero-ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.p-btn { display: inline-block; background: #1e3f32; color: #fff; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 12px 22px; }
.p-btn-ghost { display: inline-block; color: #1e3f32; font-size: 14px; font-weight: 700; border: 1.5px solid #1e3f32; border-radius: 999px; padding: 11px 22px; }

.page .mock-strip { border-radius: 0; margin: 0; }

.p-section { padding: 40px 24px; }
.p-h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #1c1a17; margin: 0 0 12px; }
.p-sub { font-size: 15px; line-height: 1.6; color: #4a463e; margin: 0 0 18px; }
.p-sub-wide { max-width: 640px; }
.p-fine { font-size: 12.5px; color: #8a8478; margin: 12px 0 0; }

.entry-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .entry-grid { grid-template-columns: 1fr 1fr 1fr; } }
.entry-card { background: #fff; border: 1px solid #e7e2d8; border-radius: 12px; padding: 20px; }
.entry-t { font-size: 17px; font-weight: 700; }
.entry-d { font-size: 14px; color: #4a463e; margin-top: 6px; line-height: 1.5; }
.entry-l { font-size: 13.5px; font-weight: 700; color: #1e3f32; margin-top: 14px; }

.svc-group { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1e3f32; margin: 22px 0 8px; }
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr 1fr; } }
.svc-card { background: #fff; border: 1px solid #e7e2d8; border-radius: 10px; padding: 16px; }
.svc-t { font-size: 15.5px; font-weight: 700; }
.svc-d { font-size: 13.5px; color: #4a463e; margin-top: 5px; line-height: 1.5; }
.svc-p { font-size: 13px; font-weight: 700; color: #1e3f32; margin-top: 10px; }

.scope-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .scope-grid { grid-template-columns: 1fr 1fr; } }
.scope-panel { background: #fff; border: 1px solid #e7e2d8; border-radius: 12px; padding: 24px; }
.scope-panel .p-h2 { font-size: 26px; }
.scope-list { margin: 14px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.9; color: #1c1a17; }
.scope-plan-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #1e3f32; margin-bottom: 12px; }
.scope-plan-h span { color: #8a8478; font-weight: 600; text-transform: none; letter-spacing: 0; }
.scope-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; padding: 8px 0; border-top: 1px solid #eee9de; }
.scope-row b { color: #1c1a17; }
.scope-row span { color: #4a463e; }

.steps4 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.step4 { border-top: 2px solid #1e3f32; padding-top: 12px; }
.step4-n { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #1e3f32; }
.step4-t { font-size: 16px; font-weight: 700; margin-top: 4px; }
.step4-d { font-size: 13.5px; line-height: 1.5; color: #4a463e; margin-top: 6px; }

.page .mock-chain { border-radius: 0; }

.page .mock-proof { padding: 8px 0 0; }

.p-cta { background: #1e3f32; color: #f6f5f0; padding: 48px 24px; }
.p-cta-h { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.p-cta-sub { font-size: 15px; line-height: 1.6; color: #cfe0d6; margin-top: 12px; max-width: 520px; }
.p-cta-routes { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.p-cta .p-btn { background: #f6f5f0; color: #1e3f32; }
.p-btn-ghost-dark { display: inline-block; color: #f6f5f0; font-size: 14px; font-weight: 700; border: 1.5px solid #9fc3b1; border-radius: 999px; padding: 11px 22px; }
.p-cta-fine { font-size: 12.5px; color: #9fc3b1; margin-top: 16px; }

.p-footer { background: #fff; border-top: 1px solid #e7e2d8; padding: 28px 24px; text-align: center; }
.p-footer-brand { font-size: 18px; font-weight: 800; color: #1e3f32; }
.p-footer-line { font-size: 13px; color: #6b665c; margin-top: 6px; }


/* Carousel manual controls */
.ev-carousel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ev-playpause { font-size: 12.5px; font-weight: 700; color: #1e3f32; background: none; border: 1px solid #c9c2b6; border-radius: 999px; padding: 4px 14px; cursor: pointer; }
.ev-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(246, 245, 240, 0.85); color: #1e3f32; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.85; }
.ev-arrow:hover { opacity: 1; }
.ev-prev { left: 10px; }
.ev-next { right: 10px; }
.mock-proof-h { margin-bottom: 10px; }

/* gen-26: interaction + heading typography fixes */
.p-h2 { line-height: 1.18; }
.mock-proof-h { line-height: 1.18; }
.mock-chain-h { line-height: 1.2; }
.mock-strip-line { line-height: 1.25; }
.p-hero .mock-hero-h1 { line-height: 1.08; }
.p-cta-h { line-height: 1.15; }
.p-nav-links a { color: inherit; text-decoration: none; margin: 0 9px; cursor: pointer; }
a.p-nav-cta { text-decoration: none; cursor: pointer; }
a.p-btn, a.p-btn-ghost, a.p-btn-ghost-dark, a.entry-l { text-decoration: none; cursor: pointer; }
a.entry-l { display: inline-block; }
@media (min-width: 640px) { .svc-grid-2 { grid-template-columns: 1fr 1fr; } }
.steps3 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
@media (min-width: 640px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }

/* hard-fix pass: functional case-cta anchor + Greater China list spacing */
a.case-cta-btn { display: inline-block; text-decoration: none; cursor: pointer; }
a.case-cta-btn:hover { background: rgba(246,245,240,0.12); }
.mock-proof-countries strong { font-weight: 700; }
.mock-proof-countries + .mock-proof-countries { margin-top: 4px; }
.approved-content{padding-top:84px;padding-bottom:60px}.mock-strip.wrap,.mock-chain.wrap{margin-top:48px;margin-bottom:48px}.approved-content .p-h2{font-size:clamp(30px,4vw,46px);color:#1e3f32}.approved-content .p-sub{max-width:850px}.approved-content .mock-proof{padding:0;border:none;background:transparent}.approved-content .mock-proof-h{font-size:clamp(30px,4vw,46px);font-weight:750;color:#1e3f32}.approved-content .case-card{min-width:0}.approved-content img{max-width:100%}.approved-content .case-role{line-height:1.6}.approved-content .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.evidence-slide{margin:0}.evidence-slide img{display:block;width:100%;height:460px;object-fit:contain;background:#eeeae2}.evidence-slide figcaption{padding:16px 0;font-size:15px}.evidence-controls{display:flex;justify-content:space-between;align-items:center;gap:16px}.evidence-controls button{border:1px solid #1e3f32;border-radius:30px;padding:12px 22px;background:white;color:#1e3f32;min-height:44px;cursor:pointer}.case-cta-btn:focus-visible,.evidence-controls button:focus-visible{outline:3px solid #1e3f32;outline-offset:4px}@media(max-width:640px){.approved-content{padding-top:52px;padding-bottom:28px}.approved-content .case-grid{grid-template-columns:1fr}.evidence-slide img{height:300px}.mock-strip.wrap,.mock-chain.wrap{padding:24px;width:calc(100% - 36px);box-sizing:border-box}.approved-content .mock-proof-countries{line-height:1.8}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.approved-content .case-grid-1{grid-template-columns:1fr}@media(max-width:760px){body:has(#brief-review:not([hidden])) .wa-floating{visibility:hidden;pointer-events:none}}


/* ==========================================================================================
   v3 — results section: alignment, legibility, gallery transitions. Content unchanged.
   ========================================================================================== */
.approved-content{padding-inline:0}
@media(min-width:900px){.approved-content .case-grid:not(.case-grid-2):not(.case-grid-1){grid-template-columns:repeat(3,minmax(0,1fr))}}
.mock-proof-small,.mock-proof-photolabel{color:#566057;font-size:13px}
.case-card-cta .case-cta-btn:focus-visible{outline-color:#f6f5f0}
.case-card-cta .case-cta-btn{min-height:44px;display:inline-flex;align-items:center}
.case-card img{transition:scale .9s cubic-bezier(.33,1,.68,1)}
@media(hover:hover) and (pointer:fine){.case-card:hover img{scale:1.045}}

/* The photograph drift only runs while a card is on screen, and never under reduced motion. */
.case-card img:not(.fit-contain),.evidence-slide img{animation-play-state:paused}
.case-card.in-view img:not(.fit-contain),.evidence-slide.in-view img{animation-play-state:running}

/* Gallery */
#evidence-position{white-space:nowrap;flex:none;min-width:3.6em;text-align:center}
.evidence-slide{position:relative}
.evidence-tools{display:flex;justify-content:flex-end;margin-top:12px}
#evidence-play{border:1px solid #1e3f32;border-radius:30px;padding:10px 20px;min-height:44px;background:#fff;color:#1e3f32;cursor:pointer;font-size:14px}
#evidence-play:focus-visible{outline:3px solid #1e3f32;outline-offset:4px}
.evidence-progress{height:3px;background:#dcdfd8;margin:0 0 12px;overflow:hidden}
.evidence-progress i{display:block;height:100%;background:#1e3f32;transform:scaleX(0);transform-origin:left}
.evidence-progress.is-running i{animation:tp-evprog var(--ev-dwell,5200ms) linear forwards}
@keyframes tp-evprog{to{transform:scaleX(1)}}
@media(max-width:380px){.evidence-controls button{padding-inline:16px}}