/* ============================================================
   CKM × yewho-motion — integration override layer
   Load AFTER style.css and motion.css.
   Keeps the approved navy/gold design pixel-identical while
   retuning the motion engine's brand accent (red → gold) and
   neutralising the few tokens motion.css would otherwise clobber.
   ============================================================ */

/* 0 · Guard against phantom page width from marquees / aurora blobs */
html{ overflow-x:clip; }

/* 1 · Restore CKM brand tokens that motion.css :root overrides */
:root{
  --ink:#1A2433;              /* motion.css sets #111823 — restore CKM ink */
  --maxw:1200px;              /* same value, re-assert for safety */
}

/* 2 · Reading-progress bar → CKM gold (yewho #pg replaces CKM's own bar) */
#pg{
  height:3px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

/* 3 · Card spotlight + border-beam → gold instead of red */
.card::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(201,162,39,.10), transparent 65%);
}
.card::before{
  background:conic-gradient(from var(--bb), transparent 0 82%,
             rgba(201,162,39,.85) 93%, transparent 100%);
}
/* dark cards get a slightly warmer spotlight so it reads on navy */
.card-dark::after, .industry-tile::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(227,199,102,.14), transparent 65%);
}

/* 4a · Positioned containers so aurora can be clipped inside dark sections */
.bg-navy, .cta-band, .page-hero{ position:relative; overflow:hidden; }
.bg-navy > .container, .page-hero > .container{ position:relative; z-index:2; }
.cta-band > *{ position:relative; z-index:2; }
.cta-band > .aur{ z-index:0; }

/* 4 · Aurora blobs → CKM navy + gold, and only drift at full motion tier */
.aur i:first-child{ background:radial-gradient(circle, #16345f 0%, transparent 62%); }
.aur i:last-child { background:radial-gradient(circle, rgba(201,162,39,.16) 0%, transparent 62%); }
[data-motion="full"] .aur i{ /* animation already defined in motion.css; keep it full-tier only */ }
[data-motion="lite"] .aur i,
[data-motion="off"]  .aur i{ animation:none !important; }

/* 5 · Liquid-fill flood colour per button (motion.css leaves --fill transparent) */
.btn-gold{ --fill:rgba(255,255,255,.28); }
.btn-navy{ --fill:rgba(255,255,255,.14); }
.btn-outline,.btn-outline-light{ --fill:rgba(201,162,39,.18); }

/* 6 · Keep CTAs their approved intrinsic width on small mobile
      (motion.css forces .btn{width:100%} < 560px) */
@media (max-width:560px){
  .btn{ width:auto; }
}

/* 7 · Infinite marquee (trust bar) — CKM credential chips.
   Normal motion: single-line seamless scroll (content duplicated ×2 → -50%).
   Reduced motion: static, centred, wrapped — every credential stays visible. */
.mq-track{ align-items:center; width:max-content; flex-wrap:nowrap; animation:mqScroll 40s linear infinite; }
.mq:hover .mq-track{ animation-play-state:paused; }
.mq-track span{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey-600);
  background:var(--navy-050); border:1px solid var(--navy-100); border-radius:999px;
  padding:.5rem 1.1rem; margin-right:.85rem; white-space:nowrap;
}
.mq-track span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold-500); flex:none; }
@keyframes mqScroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .mq-row{ -webkit-mask-image:none; mask-image:none; }
  .mq-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:.6rem; }
}
@media (max-width:560px){
  .mq-row{ -webkit-mask-image:none; mask-image:none; }
  .mq-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:.6rem; }
}

/* 8 · Service-card checklist → persistent gold check badge (replaces the dash).
   A gold rounded-square badge with a navy tick, always visible (no-JS / reduced-motion
   safe). The badge gently scales in with the card's reveal; no perpetual flashing. */
.service-card ul.checks li::before{ content:none; }                 /* drop the dash */
.service-card ul.checks li{ padding-left:2.4rem; }
.service-card ul.checks li::after{
  content:""; position:absolute; left:0; top:.55rem; width:19px; height:19px; border-radius:6px;
  background:var(--gold-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23081A33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
  box-shadow:0 3px 10px rgba(201,162,39,.30);
  opacity:1; transform:none; animation:none;   /* override motion.css flashing tick-wave */
}
.card-dark .service-card ul.checks li::after,
.service-card.card-dark ul.checks li::after{ box-shadow:0 3px 12px rgba(201,162,39,.45); }

/* ============================================================
   14 · Header nav fit — stop the cramped mid-width nav
   (fixes "Why CKM" wrapping to two lines + the CTA clipping)
   ============================================================ */
.nav-links a{ white-space:nowrap; }                       /* keep every label on one line */
.nav-links{ gap:clamp(.7rem,1.5vw,1.35rem); }             /* tighter link spacing */
.nav-cta.btn{ padding:.62rem 1.15rem; font-size:.84rem; } /* compact header CTA */

/* 45 · Two-row header: the nav row had grown too crowded (8 links + the
        WhatsApp icon + the "Book an Executive Discussion" button all
        fighting for the same line), which was also silently squeezing the
        logo down via flex-shrink. The CTA + WhatsApp icon now live in a
        slim utility row above the main row (logo + links only), and the
        logo is explicitly protected from ever shrinking again. */
.site-header{ padding:0; }                                /* the two rows below now own all vertical spacing */
.site-header.scrolled{ padding:0; }
.brand{ flex-shrink:0; }
.header-utility .nav-cta{ display:inline-flex; }          /* undo motion.css's unrelated ".nav-cta{display:none}" below 820px */
.header-utility{
  display:flex; align-items:center; justify-content:flex-end; gap:.85rem;
  /* Vertical only. A `padding:.55rem 0` shorthand would zero the horizontal
     padding these rows inherit from .container, pushing the logo and menu
     40px further left than every other element on the page. */
  padding-block:.55rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header.scrolled .header-utility{ display:none; }    /* reclaim height once scrolled */
.header-inner{ padding-block:1.1rem; transition:padding .4s var(--ease); }
.site-header.scrolled .header-inner{ padding-block:.7rem; }

/* Header WhatsApp entry point: a second, lower-commitment way in,
   alongside "Book an Executive Discussion". Icon-only circle. */
.header-utility a.nav-whatsapp{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,.35); color:#fff;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.header-utility a.nav-whatsapp svg{ width:17px; height:17px; display:block; }
.header-utility a.nav-whatsapp:hover{ border-color:var(--gold-300); color:var(--gold-300); background:rgba(201,162,39,.1); }

/* ============================================================
   16 · Upgraded footer — closing CTA + newsletter + social
   ============================================================ */
.site-footer{ position:relative; overflow:hidden; padding-top:0; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold-600) 22%, var(--gold-300) 50%, var(--gold-600) 78%, transparent); z-index:2; }
.site-footer .container{ position:relative; z-index:1; }
.site-footer .md-ghost{ font-size:clamp(96px,18vw,260px); top:auto; bottom:-.28em; color:rgba(231,199,102,.05); }

/* top: closing CTA + newsletter */
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,5vw,5rem);
  padding:clamp(3rem,6vw,5rem) 0; border-bottom:1px solid rgba(255,255,255,.1); align-items:center; }
.footer-cta h3{ color:var(--white); font-size:clamp(1.5rem,2.7vw,2.1rem); line-height:1.15; margin:.6rem 0 .8rem; max-width:18ch; }
.footer-cta > p:not(.eyebrow){ color:rgba(255,255,255,.72); max-width:48ch; }
.footer-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.7rem; }
.footer-news h4{ color:var(--white); font-size:1.1rem; letter-spacing:0; text-transform:none; margin-bottom:.5rem; font-family:var(--font-display); }
.footer-news > p{ color:rgba(255,255,255,.62); font-size:.9rem; margin-bottom:1.1rem; max-width:40ch; }
.news-fields{ display:flex; gap:.6rem; }
.news-fields input{ flex:1; min-width:0; padding:.85rem 1.15rem; border-radius:999px; font:inherit;
  border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--white); transition:border-color .3s, box-shadow .3s; }
.news-fields input::placeholder{ color:rgba(255,255,255,.45); }
.news-fields input:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.2); }
.news-fields .btn{ white-space:nowrap; }
.footer-news .form-note{ font-size:.74rem; color:rgba(255,255,255,.4); margin-top:.75rem; }
.footer-news .form-success{ display:none; margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius-sm);
  background:rgba(201,162,39,.14); color:var(--gold-100); font-size:.9rem; font-weight:500; }

/* main grid + brand + social */
.footer-grid{ padding-top:clamp(2.5rem,5vw,3.5rem); }
.footer-licence{ font-size:.8rem !important; color:rgba(255,255,255,.5); margin-top:.8rem; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.5rem; }
.footer-social .soc{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.82);
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s; }
.footer-social .soc:hover{ transform:translateY(-3px); background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); box-shadow:var(--shadow-gold); }
.footer-social .soc svg{ width:18px; height:18px; }
.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; padding:.32rem 0; }
.footer-contact .fc-ic{ color:var(--gold-500); flex:none; margin-top:.2rem; }
.footer-contact .fc-ic svg{ width:16px; height:16px; display:block; }
.footer-copy-badge{ display:inline-flex; align-items:center; gap:.5rem; }

@media (max-width:860px){ .footer-top{ grid-template-columns:1fr; gap:2.4rem; } }

/* ============================================================
   15 · Flip on content cards (homepage industries + case summaries)
   ============================================================ */
.card.md-flip{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; overflow:visible; }
.card.md-flip::before, .card.md-flip::after{ display:none !important; }   /* no spotlight/beam on the transparent shell */
.card.md-flip .md-flip-front, .card.md-flip .md-flip-back{
  border-radius:var(--radius-md); padding:var(--s-4); display:flex; flex-direction:column;
}
.card.md-flip .flip-hint{ margin-top:auto; padding-top:1rem; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:.4rem; }
.card.md-flip .flip-hint svg{ width:14px; height:14px; }

/* white case-summary cards */
.card.md-flip:not(.card-dark) .md-flip-front,
.card.md-flip:not(.card-dark) .md-flip-back{
  background:#fff; box-shadow:var(--shadow-soft); border:1px solid rgba(8,26,51,.05); min-height:264px;
}
.card.md-flip:not(.card-dark) .md-flip-back{ justify-content:center; }
.card.md-flip:not(.card-dark) .flip-hint{ color:var(--gold-600); }

/* dark homepage industry mini-cards */
.card.card-dark.md-flip .md-flip-front,
.card.card-dark.md-flip .md-flip-back{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-700));
  border:1px solid rgba(255,255,255,.08); min-height:198px;
}
.card.card-dark.md-flip .md-flip-back{ background:linear-gradient(160deg,var(--navy-700),var(--gold-600)); justify-content:center; }
.card.card-dark.md-flip .md-flip-back p{ color:rgba(255,255,255,.92); font-size:.95rem; }
.card.card-dark.md-flip .flip-hint{ color:var(--gold-300); }

/* The full inline nav only fits on wide screens — collapse to the mobile
   menu below 1100px so it never crams or clips. */
@media (max-width:1100px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0; background:var(--navy-900);
    flex-direction:column; justify-content:center; gap:2rem;
    transform:translateX(100%); transition:transform .45s var(--ease); z-index:105;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:#fff !important; font-size:1.3rem; font-family:var(--font-display); }
  /* Fix (corr #4): once scrolled, .site-header.scrolled applies backdrop-filter,
     which makes the header the containing block for its position:fixed descendants.
     That trapped the full-screen navy menu inside the short header strip, so after
     scrolling the menu looked transparent (page content showed through). Drop the
     blur at the breakpoint where the full-screen menu lives so the overlay stays
     anchored to the viewport and its solid navy background always covers the page. */
  .site-header.scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* Fix (corr #4, second cause): the symptom had TWO independent causes and the pass
     above only removed one. `header.sc nav{height:60px}` (motion.css:22) shrinks the
     DESKTOP nav bar once the page is scrolled — but on mobile that same <nav> IS the
     full-screen menu, so after scrolling the overlay was clamped to a 60px strip.
     Its links, laid out as a centred flex column with a 2rem gap, then spilled out of
     the box while only the strip carried the navy background — which reads exactly
     like "the menu went transparent". Verified with devtools' matched-rule list:
     `header.sc nav {height:60px}` was the only rule setting height, and forcing
     100dvh on the node restored 800px. Height belongs to the desktop bar only.
     Pin the panel to the viewport explicitly rather than relying on inset:0 resolving, so no
     other rule can collapse it again. dvh tracks the phone's address bar; vh is the fallback. */
  .site-header .nav-links{
    height:100vh;  height:100dvh;
    max-height:100vh; max-height:100dvh;
  }
  /* Fix (corr #4, third cause): the menu did not FIT. Measured at 360x640 the nine links come
     to 650px against a 640px screen, so "Home" sat at top:-10 and "Contact" ended 10px below
     the fold — and with justify-content:center the overflow is pushed out of BOTH ends, which
     no amount of scrolling can reach. On a real phone, once the browser's address bar takes its
     ~80px, three links disappear.
       . `safe center` centres only while the content fits, then falls back to the start edge
         so nothing is ever clipped off the top
       . overflow-y lets whatever still does not fit be scrolled to
       . padding-block clears the close button at the top and gives the last link room
       . overscroll-behavior stops the page behind scrolling when the menu hits its end */
  .nav-links{
    justify-content:center;
    justify-content:safe center;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-block:4.75rem 2rem;
  }
}
/* Short screens (most phones once the address bar is showing): tighten the rhythm so the whole
   menu fits without scrolling at all, rather than merely being scrollable. */
@media (max-width:1100px) and (max-height:760px){
  .nav-links{ gap:1.1rem; padding-block:4.25rem 1.5rem; }
  .nav-links a{ font-size:1.08rem; }
  .nav-links .nav-cta{ margin-top:.5rem; }
}
/* Fix (corr #4, fourth cause): the menu BUTTON itself was off the screen. `.brand{flex-shrink:0}`
   (line 116 above) makes the 324px brand block unshrinkable, so on a 360px phone the header row
   spent 20px padding + 324px brand + 24px gap = 368px before the 26px toggle even began — it
   rendered at x 368..394, i.e. 34px past the right edge, which is why the hamburger looked
   sliced in half. Measured the same at 390px (394 > 390); only 412px and wider had room.
   Letting the brand shrink and pinning the toggle to the end keeps it on screen at any width. */
@media (max-width:1100px){
  .header-inner{ gap:.75rem; }
  .header-inner .brand{ flex:0 1 auto; min-width:0; }
  .header-inner .nav-toggle{ flex:0 0 auto; margin-left:auto; }
}
/* Below 480px the row cannot carry the logo, a 241px decorative sub-line AND the menu button.
   The sub-line stands down — the brand link carries its own aria-label, so a screen reader
   still announces the company in full. */
@media (max-width:479px){
  .header-inner .brand-sub{ display:none; }
}
@media (max-width:560px){
  .header-utility{ justify-content:space-between; padding-block:.5rem; }
  .header-utility .nav-cta.btn{ flex:1; text-align:center; }
}

/* 9 · Reduced-motion / no-JS safety: never leave content hidden */
.no-js .reveal,
html:not(.js) .reveal{ opacity:1 !important; transform:none !important; }

/* 10 · Uniform interior page-hero banner height (matches industries.html ≈625px),
       content vertically centred so shorter/longer headlines never change the height */
.page-hero{
  min-height:625px;
  display:flex;
  align-items:center;
  padding:11rem 0 3rem;
}
.page-hero > .container{ width:100%; }
@media (max-width:768px){
  .page-hero{ min-height:auto; padding:12.5rem 0 3.5rem; }
}

/* 11 · Flash-in headline on interior page heroes (same masked word-rise as the
       homepage hero). Words are split by motion.js; they rise once body gets .ld. */
.page-hero h1 .w i{ transition:transform .7s var(--ease) var(--d,0ms); }
.js .page-hero h1 .w i{ transform:translateY(112%); }
.ld .page-hero h1 .w i{ transform:none; }

/* Preserve the gold italic on split highlight words (motion.css forces .w i normal) */
.hero h1 em .w i, .page-hero h1 em .w i{ font-style:italic; }

/* 12 · Homepage hero unified to the same 625px banner height as the interior
       pages. The four credential stats move to a compact dark strip below,
       and the headline/spacing are tightened so the longer homepage copy fits
       the same band cleanly. */
.hero{ min-height:650px; padding:10.5rem 0 2rem; }
/* .hero is display:flex (to vertically centre), which makes .container a flex
   item that shrinks to its content and drifts off-centre. Force full width so
   the hero copy lines up with the header/menu container (same as .page-hero). */
.hero > .container{ width:100%; }
.hero h1{ font-size:clamp(1.85rem,3.5vw,2.95rem); line-height:1.14; }
.hero .lede{ margin:1rem 0 1.2rem; max-width:60ch; }
/* 42 · Hero capability tags: makes the breadth of what CKM does (Talent,
        Foreign Workforce, HR Consulting, AI Workforce Readiness) scannable
        in the first few seconds, without adding a new section. */
.hero-pillars{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.6rem; }
.hero-pillars span{
  font-size:.76rem; font-weight:500; letter-spacing:.01em; color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.4rem .95rem;
  white-space:nowrap;
}

/* 43 · "Our Solutions" 5-pillar grid (Talent Acquisition, Foreign Workforce,
        Immigration & Compliance, HR & Org Consulting, AI Workforce Readiness),
        replacing the previous 2-broad-card layout so all five are equally
        scannable and each links straight to its section on services.html. */
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1020px){ .grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .grid-5{ grid-template-columns:1fr; } }
.pillar-card{ text-decoration:none; display:block; }
.pillar-tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:.6rem;
}
.hero-profile-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.4rem;
  font-size:.86rem; color:rgba(255,255,255,.68); border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:.15rem; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.hero-profile-link:hover{ color:var(--gold-300); border-color:var(--gold-300); }
.hero-stat-band{
  background:var(--navy-900);
  border-top:1px solid rgba(255,255,255,.06);
  padding:2.4rem 0;
}
.hero-stat-band .hero-stats{ margin-top:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; align-items:start; }
/* Align the big figures on ONE top line. With align-items:center, an item whose
   label wraps to 3-4 lines floats its number higher than a 2-line neighbour, so
   the gold numbers came out ragged. Aligning to the top puts every figure on the
   same baseline regardless of how long its label runs. */
.hero-stat-band .stat{ align-self:start; }
/* The Credentials band on why-ckm has FOUR figures, not five, so repeat(5) left
   an empty column and pulled the whole group left. Match the column count to the
   item count for that instance. */
section[aria-label="Credentials"] .hero-stats{ grid-template-columns:repeat(4,1fr); }
/* Balance the four columns. One label ("international talent corridors: Nepal,
   Myanmar, Bangladesh, Vietnam") is far longer than the others, so its column
   read heavy and cramped while the rest had air. Capping every label to the same
   measure and centring it makes the four read as an even set across the full
   standard content width. */
section[aria-label="Credentials"] .stat{ padding-inline:1.4rem; }
section[aria-label="Credentials"] .stat .label{ max-width:22ch; margin-inline:auto; }
/* Four figures stack cleanest as 2x2 on a phone, not the 3+1 orphan the shared
   breakpoint produces (which also clipped the long "talent corridors" label). */
@media (max-width:1020px){
  section[aria-label="Credentials"] .hero-stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem 0; }
  section[aria-label="Credentials"] .stat{ border-left:none !important; }
  section[aria-label="Credentials"] .stat:nth-child(even){ border-left:1px solid rgba(20,32,47,.12) !important; }
}
/* centre each of the five figures and separate them with subtle dividers */
.hero-stat-band .stat{ text-align:center; padding:0.2rem .9rem; }
.hero-stat-band .stat + .stat{ border-left:1px solid rgba(255,255,255,.10); }
/* one standard size for all five figures (numbers and word-figures alike),
   so "18+ / Licensed / Est. 2008 / 4 / 8" read as a consistent set */
.hero-stat-band .stat .num,
.hero-stat-band .stat .num-text{
  font-size:clamp(1.4rem, 1.9vw, 1.9rem);
  line-height:1.2;
  padding-top:0;
}
@media (max-width:900px){
  .hero-stat-band .hero-stats{ grid-template-columns:repeat(3,1fr); gap:1.4rem 0; }
  .hero-stat-band .stat + .stat{ border-left:none; }
  .hero-stat-band .stat:nth-child(3n+2),
  .hero-stat-band .stat:nth-child(3n)  { border-left:1px solid rgba(255,255,255,.10); }
}
@media (max-width:768px){
  .hero{ min-height:auto; padding:12rem 0 2.5rem; }
  .hero-stat-band{ padding:2rem 0; }
}
@media (max-width:560px){
  .hero-stat-band .hero-stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem 0; }
  .hero-stat-band .stat:nth-child(3n+2),
  .hero-stat-band .stat:nth-child(3n){ border-left:none; }
  .hero-stat-band .stat:nth-child(even){ border-left:1px solid rgba(255,255,255,.10); }
}

/* 17 · Homepage hero photographic background (the diverse workforce team).
       The photo already carries the gold glow at top-right; a left-to-right
       navy wash keeps the white headline fully legible over the dark left
       third, and a soft bottom wash protects the lede + CTAs. The photo sits
       under the existing aurora + grid overlays; content stays on z-index 2.
       Position tuned lower (people sit lower in the band) and framed right. */
.hero{
  background:
    linear-gradient(90deg,
      rgba(8,26,51,.94) 0%,
      rgba(8,26,51,.80) 28%,
      rgba(8,26,51,.44) 56%,
      rgba(8,26,51,.10) 100%),
    linear-gradient(0deg, rgba(8,26,51,.55) 0%, rgba(8,26,51,0) 46%),
    url("../assets/hero-bg.jpg?v=3");
  background-size: cover, cover, cover;
  background-position: left center, center, 82% 22%;
  background-repeat: no-repeat;
}
/* the photo supplies the gold glow, so ease off the aurora's gold blob here
   to avoid a double highlight (keep the cursor-reactive motion, just softer) */
.hero .aur i:last-child{ opacity:.6; }

/* 18 · "The Business Challenge" section: subtle light workplace background.
        Scoped to THIS section only (by aria-label), not the other .bg-soft
        sections. A soft white veil keeps the navy heading and grey body text
        readable over the faded office photo. */
section[aria-label="Business challenges"]{
  background-image:
    linear-gradient(90deg, rgba(244,247,251,.55) 0%, rgba(244,247,251,.34) 52%, rgba(244,247,251,.14) 100%),
    url("../assets/challenge-bg.jpg");
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat;
}

/* 19 · "Why CKM" mini-cards: each card gets its OWN dark photo banner (scoped
        to THIS section only). A navy scrim is baked in as the top background
        layer for legibility — this keeps the gold spotlight/border-beam on
        .card::before / .card::after untouched. Gold icon badges + white title +
        light body sit as real HTML on top. Photos are 6 slices of one sheet. */
section[aria-label="Why CKM"] .card{
  background-color:#0e1a2a;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  border:1px solid rgba(255,255,255,.10);
}
section[aria-label="Why CKM"] .card h4{ color:var(--white); }
section[aria-label="Why CKM"] .card p{ color:rgba(255,255,255,.80); }
/* scrim (top layer) + photo (bottom layer), one image per card so any grid
   reflow (3→2→1 col) rescales each card independently and stays aligned */
section[aria-label="Why CKM"] .card:nth-child(1){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card1.jpg"); }
section[aria-label="Why CKM"] .card:nth-child(2){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card2.jpg"); }
section[aria-label="Why CKM"] .card:nth-child(3){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card3.jpg"); }
section[aria-label="Why CKM"] .card:nth-child(4){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card4.jpg"); }
section[aria-label="Why CKM"] .card:nth-child(5){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card5.jpg"); }
section[aria-label="Why CKM"] .card:nth-child(6){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card6.jpg"); }

/* 20 · "Why It Matters" section: dark banner (factory floor → boardroom, gold
        connective lines). Section flips dark via .on-dark in the HTML; here we
        add the photo + a navy scrim so the heading (left) and body (right) stay
        legible while the gold lines read through the lighter centre band. */
section[aria-label="Why workforce strategy matters"]{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg, rgba(8,26,51,.92) 0%, rgba(8,26,51,.68) 27%, rgba(8,26,51,.40) 50%, rgba(8,26,51,.72) 74%, rgba(8,26,51,.90) 100%),
    linear-gradient(180deg, rgba(8,26,51,.30) 0%, rgba(8,26,51,0) 42%),
    url("../assets/why-matters-bg.jpg?v=1");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
/* text-link is navy by default (invisible on dark) — lift it to gold here */
section[aria-label="Why workforce strategy matters"] .text-link{ color:var(--gold-300); }
/* stacked mobile: swap to a vertical scrim so top + bottom text stay legible */
@media(max-width:820px){
  section[aria-label="Why workforce strategy matters"]{
    background-image:
      linear-gradient(180deg, rgba(8,26,51,.86) 0%, rgba(8,26,51,.72) 50%, rgba(8,26,51,.90) 100%),
      url("../assets/why-matters-bg.jpg?v=1");
    background-size:cover,cover;
    background-position:center,center;
  }
}

/* 21 · "Why CKM" section: subtle light banner behind the dark cards. Holds the
        light-row rhythm (Why It Matters dark -> Why CKM light). A faint top wash
        keeps the eyebrow + heading crisp; the six cards are opaque, so they cover
        the busier right side of the art and stay the focus. */
section[aria-label="Why CKM"]{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(180deg, rgba(244,247,251,.60) 0%, rgba(244,247,251,.12) 34%, rgba(244,247,251,0) 60%),
    url("../assets/why-ckm-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

/* 22 · "Our Solutions" section: subtle light "duality" banner (cool grey lines
        on the left meeting warm gold on the right, converging centre) echoing
        "one partner, two ways we create value". Stays light so the heading and
        the white "Core" card read cleanly while the dark "Advisory" card pops. */
section[aria-label="Our solutions"]{
  background-color:#f7f9fc;
  background-image:
    linear-gradient(180deg, rgba(247,249,252,.62) 0%, rgba(247,249,252,.14) 32%, rgba(247,249,252,0) 58%),
    url("../assets/our-solutions-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

/* 23 · "Strategic Advisory" panel: dark photo banner (executive looking over the
        KL skyline at dawn, gold network lines = foresight / future of work). Scrim
        is baked into background-image (keeps .card-dark::before/::after gold FX);
        text stays live HTML on top. Left + bottom kept dark for the copy, the gold
        horizon reads on the right. */
section[aria-label="Our solutions"] .service-card.card-dark{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg, rgba(8,26,51,.88) 0%, rgba(8,26,51,.62) 30%, rgba(8,26,51,.28) 60%, rgba(8,26,51,.10) 100%),
    linear-gradient(180deg, rgba(8,26,51,.55) 0%, rgba(8,26,51,.10) 30%, rgba(8,26,51,.15) 55%, rgba(8,26,51,.74) 100%),
    url("../assets/advisory-panel.jpg?v=1");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
/* copy sits on a photo now: force true white + a soft shadow so the list items
   and paragraph stay crisp even over the brighter skyline on the right */
section[aria-label="Our solutions"] .service-card.card-dark .checks li,
section[aria-label="Our solutions"] .service-card.card-dark li,
section[aria-label="Our solutions"] .service-card.card-dark p{ color:#fff; }
section[aria-label="Our solutions"] .service-card.card-dark h3,
section[aria-label="Our solutions"] .service-card.card-dark li,
section[aria-label="Our solutions"] .service-card.card-dark p{ text-shadow:0 1px 6px rgba(8,26,51,.65); }

/* 24 · "Industries We Support" section: dark industrial night banner (multi-sector
        facility, gold-lit windows, gold arcs linking sectors). Photo sits UNDER a
        navy scrim; the aurora is dialled back so the photo leads, not competes.
        Top stays dark for the heading; the 8 flip cards cover the busy lower band. */
section[aria-label="Industries we support"]{
  background-color:#081a33;
  background-image:
    linear-gradient(180deg, rgba(8,26,51,.76) 0%, rgba(8,26,51,.46) 22%, rgba(8,26,51,.42) 52%, rgba(8,26,51,.86) 100%),
    url("../assets/industries-bg.jpg?v=2");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
section[aria-label="Industries we support"] .aur i{ opacity:.26; }

/* 25 · Industry flip cards: bright photo tiles with a CLEAN NAVY CAPTION BAND.
        The matched photo shows in the upper part (icon pinned top); the title +
        "Tap to explore" drop into a solid navy gradient at the bottom, so text is
        always crisp and all 8 read as one tidy set (no more messy). Light tiles
        still float on the dark section via the drop shadow. Back = light panel. */
section[aria-label="Industries we support"] .card.card-dark.md-flip .md-flip-front{
  background-color:#0e1a2a;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  border:0;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
/* pin the icon to the top; group title + hint at the bottom over the band */
section[aria-label="Industries we support"] .md-flip .md-flip-front .card-icon{ margin-bottom:auto; }
section[aria-label="Industries we support"] .md-flip .md-flip-front h4{ color:var(--white) !important; text-shadow:0 1px 4px rgba(0,0,0,.55); }
section[aria-label="Industries we support"] .md-flip .md-flip-front .flip-hint{ margin-top:0; padding-top:.55rem; color:var(--gold-300); }
/* back: clean light panel, navy copy */
section[aria-label="Industries we support"] .card.card-dark.md-flip .md-flip-back{
  background:linear-gradient(160deg,#f7f9fc,#e8eef6);
  border:1px solid rgba(8,26,51,.10);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
section[aria-label="Industries we support"] .md-flip .md-flip-back h4{ color:var(--navy-800) !important; }
section[aria-label="Industries we support"] .md-flip .md-flip-back p{ color:var(--navy-700); }
/* per-card front photo + a shared navy caption band at the bottom */
section[aria-label="Industries we support"] .md-flip:nth-child(1) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind1.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(2) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind2.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(3) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind3.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(4) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind4.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(5) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind5.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(6) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind6.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(7) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind7.jpg"); }
section[aria-label="Industries we support"] .md-flip:nth-child(8) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%), url("../assets/ind-cards/ind8.jpg"); }
/* 26 · Centre the trailing 2 cards on the last row (8 cards / 3 cols leaves an
        orphan cell). Desktop only: use a 6-col track so each card spans 2, then
        push card 7 in by one column so cards 7 + 8 sit centred. Tablet (2-col)
        and mobile (1-col) are even, so they keep the base layout. */
@media (min-width:1021px){
  section[aria-label="Industries we support"] .grid-3{ grid-template-columns:repeat(6,1fr); }
  section[aria-label="Industries we support"] .grid-3 > .card{ grid-column:span 2; }
  section[aria-label="Industries we support"] .grid-3 > .card:nth-child(7){ grid-column:2 / span 2; }
}

/* 27 · Industry icon badges: motion. Hover lifts the gold badge with a glow and
        gives each icon a fitting micro-move (gear turns, chip pulses, robot tilts,
        truck rolls). A slow, staggered idle glow keeps them subtly alive. All
        looping motion is gated behind prefers-reduced-motion. */
section[aria-label="Industries we support"] .card-icon{
  position:relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
section[aria-label="Industries we support"] .card-icon svg{
  transition: transform .6s var(--ease);
}
section[aria-label="Industries we support"] .card:hover .card-icon{
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 10px 22px rgba(201,162,39,.5);
  background: linear-gradient(140deg, var(--gold-300), var(--gold-500));
}
section[aria-label="Industries we support"] .md-flip:nth-child(2):hover .card-icon svg{ transform: rotate(120deg); }   /* precision engineering: gear turns */
section[aria-label="Industries we support"] .md-flip:nth-child(3):hover .card-icon svg{ transform: scale(1.14); }      /* semiconductor: chip pulse */
section[aria-label="Industries we support"] .md-flip:nth-child(5):hover .card-icon svg{ transform: rotate(-10deg); }   /* automation: arm tilt */
section[aria-label="Industries we support"] .md-flip:nth-child(7):hover .card-icon svg{ transform: translateX(3px); } /* logistics: truck rolls */
@media (prefers-reduced-motion: no-preference){
  section[aria-label="Industries we support"] .card-icon::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    animation: ckmIconGlow 6s ease-in-out infinite;
  }
  section[aria-label="Industries we support"] .md-flip:nth-child(2) .card-icon::after{ animation-delay:.6s; }
  section[aria-label="Industries we support"] .md-flip:nth-child(3) .card-icon::after{ animation-delay:1.2s; }
  section[aria-label="Industries we support"] .md-flip:nth-child(4) .card-icon::after{ animation-delay:1.8s; }
  section[aria-label="Industries we support"] .md-flip:nth-child(5) .card-icon::after{ animation-delay:2.4s; }
  section[aria-label="Industries we support"] .md-flip:nth-child(6) .card-icon::after{ animation-delay:3s; }
  section[aria-label="Industries we support"] .md-flip:nth-child(7) .card-icon::after{ animation-delay:3.6s; }
  section[aria-label="Industries we support"] .md-flip:nth-child(8) .card-icon::after{ animation-delay:4.2s; }
  section[aria-label="Industries we support"] .card:hover .card-icon::after{ animation:none; }
}
@keyframes ckmIconGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
  50%{ box-shadow:0 0 12px 1px rgba(201,162,39,.30); }
}

/* 28 · "Client Success Stories" section: subtle light banner with a faint gold
        rising graph + upward bars (measurable results). Light row after the dark
        Industries band. A faint top wash keeps the eyebrow + heading crisp; the
        white case cards float on top with their shadows. */
section[aria-label="Client success stories"]{
  background-color:#f7f9fc;
  background-image:
    linear-gradient(180deg, rgba(247,249,252,.66) 0%, rgba(247,249,252,.20) 34%, rgba(247,249,252,0) 62%),
    url("../assets/success-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

/* 29 · "Client Success Stories" case cards: dark photo tiles (one per case
        sector) so they pop on the light results section. FRONT = matched dark
        photo + navy scrim with the chip, headline and hint in light text. BACK
        stays the clean white detail panel (unchanged). Scoped to this section. */
section[aria-label="Client success stories"] .card.md-flip .md-flip-front{
  background-color:#0e1a2a;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  border:0; box-shadow:0 16px 36px rgba(8,26,51,.30);
}
section[aria-label="Client success stories"] .card.md-flip .md-flip-front h3{ color:var(--white); text-shadow:0 1px 8px rgba(8,26,51,.85); }
section[aria-label="Client success stories"] .card.md-flip .md-flip-front .chip{
  background:rgba(8,26,51,.55); color:var(--white); border-color:rgba(255,255,255,.30); backdrop-filter:blur(4px);
}
section[aria-label="Client success stories"] .card.md-flip .md-flip-front .chip-gold{
  background:rgba(8,26,51,.45); color:var(--gold-300); border-color:rgba(201,162,39,.65);
}
section[aria-label="Client success stories"] .card.md-flip .md-flip-front .flip-hint{ color:var(--gold-300); text-shadow:0 1px 6px rgba(8,26,51,.85); }
/* the sector chip wraps to 2 lines on the longer label ("Precision Engineering
   Manufacturer"), which pushed that card's headline lower than the other two.
   Reserve the 2-line height up front so all three headlines start level. */
section[aria-label="Client success stories"] .card.md-flip .case-meta{ min-height:2.9rem; align-items:flex-start; }

/* 30 · Assessment CTA band: abstract dark banner (radar rings + a five-point
        rising line, echoing "the next five years"). Layered under the band's
        existing navy gradient; the aurora is dialled back so the photo's own
        glow carries the highlight instead of doubling up. Scoped to this band. */
section[aria-label="Workforce readiness assessment"] .cta-band{
  background:
    linear-gradient(150deg, rgba(8,26,51,.82) 0%, rgba(8,26,51,.50) 45%, rgba(8,26,51,.28) 100%),
    url("../assets/assessment-bg.jpg?v=1");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
section[aria-label="Workforce readiness assessment"] .aur i{ opacity:.25; }

/* 31 · "Insights" section: subtle light banner with a faint gold idea-network
        and open-book motif (thought leadership). Light row; a faint top wash
        keeps the eyebrow + heading crisp while the 3 insight cards sit on top. */
section[aria-label="Insights"]{
  background-image:
    linear-gradient(180deg, rgba(244,247,251,.62) 0%, rgba(244,247,251,.18) 34%, rgba(244,247,251,.10) 62%, rgba(244,247,251,.55) 100%),
    url("../assets/insights-bg.jpg?v=1");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 32 · Insight card headers: matched photo per article (replaces the flat
        gradient blocks), each under a navy scrim so the chip stays legible. */
section[aria-label="Insights"] .insight-visual{
  background-repeat:no-repeat; background-position:center; background-size:cover;
}
section[aria-label="Insights"] .insight-visual::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,51,.30) 0%, rgba(8,26,51,.08) 45%, rgba(8,26,51,.66) 100%);
}
section[aria-label="Insights"] .insight-visual .chip{ position:relative; z-index:1; }
section[aria-label="Insights"] .insight-visual{ background-image:url("../assets/insight-cards/insight1.jpg"); }
section[aria-label="Insights"] .insight-visual.v2{ background-image:url("../assets/insight-cards/insight2.jpg"); }
section[aria-label="Insights"] .insight-visual.v3{ background-image:url("../assets/insight-cards/insight3.jpg"); }

/* 33 · Final Contact CTA: symmetrical light banner (two gold paths converging
        toward centre-top), echoing "let's talk". Centred text keeps the middle
        clean; the banner's own detail sits low near the edges. */
section[aria-label="Contact call to action"]{
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,0) 100%),
    url("../assets/contact-cta-bg.jpg?v=1");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 34 · Site footer (every page): multi-industry blueprint texture, dark navy
        with gold outline icons (factory, chip, gear, robot arm, buildings, truck,
        wrench) linked by thin gold lines. Lightened so the outlines are clearly
        visible; a text-shadow keeps the translucent footer copy (body text,
        legal links, copyright) readable now that more of the artwork shows. */
.site-footer{
  background-color:#0b2545;
  background-image:
    linear-gradient(180deg, rgba(8,26,51,.42) 0%, rgba(8,26,51,.28) 50%, rgba(8,26,51,.52) 100%),
    url("../assets/footer-bg.jpg?v=2");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.site-footer h3, .site-footer h4, .site-footer p, .site-footer li,
.site-footer a:not(.btn){ text-shadow:0 1px 5px rgba(8,26,51,.75); }

/* 35 · Footer embers: warm gold spark particles drifting up from the bottom,
        echoing sparks off the industrial artwork. .md-embers restyles ALL its
        direct children to position:relative/z-index:2 (higher specificity than
        .md-ghost's own absolute/z-index:0 rule in scene.css), which would break
        the ghost watermark's centring and stacking. Restore it explicitly here. */
.site-footer.md-embers > .md-ghost{ position:absolute; z-index:0; }
.site-footer.md-embers > .container{ position:relative; z-index:2; }

/* 36 · Why CKM page hero: executive handshake photo (trust / partnership),
        scoped to THIS page only via .page-hero-whyckm so the other 10 interior
        pages keep their plain navy .page-hero untouched. Left stays dark/clean
        for the headline (matches the header alignment); the handshake and warm
        light sit on the right. */
/* 37 · Why CKM page: the 6 reason cards get the SAME dark photo-tile treatment
        as the homepage "Why CKM" cards (same 6 topics, same 6 images, reused for
        consistent branding). Scrim baked into background-image, gold icon badge
        stays, h3/p flip to light. Scoped to this page's card grid only. */
section[aria-label="Why CKM reasons"] .card{
  background-color:#0e1a2a;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  border:1px solid rgba(255,255,255,.10);
}
section[aria-label="Why CKM reasons"] .card h3{ color:var(--white); }
section[aria-label="Why CKM reasons"] .card p{ color:rgba(255,255,255,.80); }
section[aria-label="Why CKM reasons"] .card:nth-child(1){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card1.jpg"); }
section[aria-label="Why CKM reasons"] .card:nth-child(2){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card2.jpg"); }
section[aria-label="Why CKM reasons"] .card:nth-child(3){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card3.jpg"); }
section[aria-label="Why CKM reasons"] .card:nth-child(4){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card4.jpg"); }
section[aria-label="Why CKM reasons"] .card:nth-child(5){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card5.jpg"); }
section[aria-label="Why CKM reasons"] .card:nth-child(6){ background-image:linear-gradient(180deg, rgba(8,26,51,.70) 0%, rgba(8,26,51,.54) 36%, rgba(8,26,51,.88) 100%), url("../assets/cards/card6.jpg"); }
/* light section backdrop behind the 6 cards, reusing the homepage's Why CKM
   banner (same section, same topic) for visual consistency across pages */
section[aria-label="Why CKM reasons"]{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(180deg, rgba(244,247,251,.60) 0%, rgba(244,247,251,.12) 34%, rgba(244,247,251,0) 60%),
    url("../assets/why-ckm-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

.page-hero-whyckm{
  background:
    linear-gradient(90deg, rgba(8,26,51,.90) 0%, rgba(8,26,51,.66) 32%, rgba(8,26,51,.26) 62%, rgba(8,26,51,.10) 100%),
    linear-gradient(0deg, rgba(8,26,51,.50) 0%, rgba(8,26,51,0) 40%),
    url("../assets/whyckm-hero-bg.jpg?v=1");
  background-size:cover,cover,cover;
  background-position:left center,center,center;
  background-repeat:no-repeat;
}

/* 39 · About page timeline ("From placements to partnership"): the connecting
        line draws in on scroll (.obs gives the wrapper .in/.done); each gold
        dot pops in with its own item as it scrolls into view, so the whole
        line cascades down naturally as the visitor reads; settled dots gain a
        slow idle glow; and, full-tier only, once the line has finished
        drawing, a soft light travels continuously down it, echoing the
        journey from first placement to full partnership. RM-safe throughout
        (hooks entirely off the existing .in/.done reveal classes). */
.timeline::before{ transform-origin:top; transform:scaleY(0); transition:transform 1.1s var(--ease); }
.timeline.in::before, .timeline.done::before{ transform:scaleY(1); }

.timeline-item::before{
  transition:transform .55s var(--ease) .05s, opacity .4s var(--ease) .05s, box-shadow .5s var(--ease);
  transform:scale(.25); opacity:0;
}
.timeline-item.in::before{ transform:scale(1); opacity:1; }

@media (prefers-reduced-motion: no-preference){
  .timeline-item.done::before{ animation:ckmTimelineGlow 6.5s ease-in-out infinite; }
  .timeline-item:nth-child(2).done::before{ animation-delay:.5s; }
  .timeline-item:nth-child(3).done::before{ animation-delay:1s; }
  .timeline-item:nth-child(4).done::before{ animation-delay:1.5s; }
  .timeline-item:nth-child(5).done::before{ animation-delay:2s; }
  .timeline-item:nth-child(6).done::before{ animation-delay:2.5s; }

  [data-motion="full"] .timeline.done::after{
    content:""; position:absolute; left:1px; top:6px; width:15px; height:15px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,224,140,.95) 0%, rgba(201,162,39,.55) 45%, transparent 72%);
    animation:ckmTimelineTravel 8s ease-in-out 1.6s infinite;
    pointer-events:none;
  }
}
@keyframes ckmTimelineGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
  50%{ box-shadow:0 0 10px 2px rgba(201,162,39,.45); }
}
@keyframes ckmTimelineTravel{
  0%{ top:6px; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ top:calc(100% - 12px); opacity:0; }
}

/* 38b · About page "Who We Are" section: subtle light banner (a single gold
        line that evolves into a small branching network left to right),
        echoing "an experienced partner, evolving with our clients". Kept
        subtle across the full width since text sits on both left and right
        in this split layout. Scoped to this page's section only. */
section[aria-label="Who We Are"]{
  background-color:#fafbfd;
  background-image:
    linear-gradient(180deg, rgba(250,251,253,.55) 0%, rgba(250,251,253,.20) 40%, rgba(250,251,253,.55) 100%),
    url("../assets/whoweare-bg.jpg?v=1");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 38c · About page "Our Evolution" timeline section: a rising-staircase-into-
        network motif on the RIGHT only (the timeline itself is capped at
        780px, so wide viewports have empty space there). The scrim stays
        near-opaque over the timeline's own zone and only reveals the art past
        it, so the line/dots/text are never touched. Hidden on narrow screens,
        where the timeline runs full-width with no clear zone to hold it. */
section[aria-label="Our Evolution"]{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(90deg, rgba(244,247,251,.97) 0%, rgba(244,247,251,.94) 52%, rgba(244,247,251,.60) 70%, rgba(244,247,251,.20) 100%),
    url("../assets/evolution-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,right center;
  background-repeat:no-repeat;
}
@media(max-width:900px){
  section[aria-label="Our Evolution"]{ background-image:none; }
}

/* 38d · About page "Purpose / Vision / Mission" section: dark banner with a
        guiding-star/compass motif, upper-centre, echoing direction and
        purpose. No heading here (straight into the 3 cards), so the star has
        room above them; the three white cards keep their own styling and
        simply float on the dark backdrop. Scoped to this section only. */
section[aria-label="Purpose Vision Mission"]{
  background-color:#081a33;
  background-image:
    linear-gradient(180deg, rgba(8,26,51,.06) 0%, rgba(8,26,51,.30) 40%, rgba(8,26,51,.74) 100%),
    url("../assets/purpose-bg.jpg?v=1");
  background-size:cover;
  background-position:center -75px;
  background-repeat:no-repeat;
}

/* 38 · About page hero: a heritage-building photo at dusk (echoing "18 Years
        Building Malaysia's Workforce"), generated at full hero resolution.
        Scoped to this page only. */
.page-hero-about{
  background:
    linear-gradient(90deg, rgba(8,26,51,.90) 0%, rgba(8,26,51,.66) 32%, rgba(8,26,51,.26) 62%, rgba(8,26,51,.10) 100%),
    linear-gradient(0deg, rgba(8,26,51,.50) 0%, rgba(8,26,51,0) 40%),
    url("../assets/about-hero-bg.jpg?v=1");
  background-size:cover,cover,cover;
  background-position:left center,center,center;
  background-repeat:no-repeat;
}
section[aria-label="Client success stories"] .card.md-flip:nth-child(1) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,.52) 0%, rgba(8,26,51,.20) 42%, rgba(8,26,51,.66) 100%), url("../assets/case-cards/case1.jpg?v=2"); }
section[aria-label="Client success stories"] .card.md-flip:nth-child(2) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,.52) 0%, rgba(8,26,51,.20) 42%, rgba(8,26,51,.66) 100%), url("../assets/case-cards/case2.jpg?v=2"); }
section[aria-label="Client success stories"] .card.md-flip:nth-child(3) .md-flip-front{ background-image:linear-gradient(180deg, rgba(8,26,51,.52) 0%, rgba(8,26,51,.20) 42%, rgba(8,26,51,.66) 100%), url("../assets/case-cards/case3.jpg?v=2"); }

/* 40 · Why CKM page "CKM Difference" section: a single unbroken gold current
        with clean checkpoint nodes, sitting low in the frame (echoes
        uninterrupted production, risk reduced). Text sits in both the left
        and right columns, so the art stays low and subtle, leaving the
        upper area clear. Layered lightly over the existing diagonal navy
        wash so the ghost watermark and both columns stay fully legible. */
section[aria-label="CKM Difference"]{
  background-image:
    linear-gradient(160deg, rgba(8,26,51,.35) 0%, rgba(19,49,92,.30) 100%),
    url("../assets/differentiator-bg.jpg?v=1");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* ============================================================
   13 · Quick-win effect modules — CKM integration
   ============================================================ */

/* SmartChrome — direction-aware header (hides on scroll-down, returns on scroll-up) */
.site-header{ transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease), transform .45s var(--ease); }
.site-header.hd-hide{ transform:translateY(-100%); }
[data-motion="off"] .site-header{ transition:none; }
.site-header.hd-hide .nav-links.open{ transform:none; }   /* never hide an open mobile menu */

/* 3D tilt on cards — let tilt own the transform (replaces the flat hover-lift),
   keep the gold spotlight rather than tilt's white glare */
.card.md-tilt, .card.md-tilt:hover{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.card.md-tilt::after{ mix-blend-mode:normal; }

/* Ripple tint on solid buttons */
.btn-gold.md-ripple .mr, .btn-navy.md-ripple .mr{ background:#fff; opacity:.22; }

/* md-copy → gold, unstyled button base */
.md-copy{ background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; }
.md-copy.done{ color:var(--gold-600); }
.md-copy .ic{ color:var(--gold-500); }

/* md-field accent → gold (only if used) */
.md-field input:focus{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.18); }
.md-field input:focus + label,
.md-field input:not(:placeholder-shown) + label{ color:var(--gold-600); }

/* Ghost watermark — CKM gold-tinted, sized for full-width dark bands */
.md-ghost.light{ color:rgba(231,199,102,.055); font-family:var(--font-display); }
.bg-navy .md-ghost, .page-hero .md-ghost{ font-size:clamp(80px,15vw,220px); }

/* 46 · Services page photography: follows the homepage hero's left-to-right
        navy wash, right-weighted Malaysian team framing and warm gold light.
        Everything is scoped to .services-page so other pages are unchanged. */
.services-page .page-hero-services{
  background:
    linear-gradient(90deg,
      rgba(8,26,51,.90) 0%,
      rgba(8,26,51,.74) 34%,
      rgba(8,26,51,.34) 62%,
      rgba(8,26,51,.08) 100%),
    linear-gradient(0deg, rgba(8,26,51,.32) 0%, rgba(8,26,51,0) 48%),
    url("../assets/services/services-hero.jpg");
  background-size:cover,cover,cover;
  background-position:left center,center,center;
  background-repeat:no-repeat;
}
.services-page .page-hero-services .aur i:last-child{ opacity:.5; }

.services-page .services-advisory-bg{
  background:
    linear-gradient(90deg,
      rgba(8,26,51,.86) 0%,
      rgba(8,26,51,.70) 42%,
      rgba(8,26,51,.34) 72%,
      rgba(8,26,51,.12) 100%),
    url("../assets/services/services-advisory.jpg");
  background-size:cover,cover;
  background-position:left center,center;
  background-repeat:no-repeat;
}

/* The two long light-content areas use separate, environment-led photographs
   beneath a strong white veil. They should read as subtle visual texture, not
   compete with the dark service panels or reduce heading contrast. */
.services-page .services-core-content{
  background:
    linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(244,247,251,.80) 100%),
    url("../assets/services/services-core-section.jpg");
  background-size:cover,cover;
  background-position:center,center top;
  background-repeat:no-repeat;
}
.services-page .services-advisory-content{
  background:
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(244,247,251,.82) 100%),
    url("../assets/services/services-advisory-section.jpg");
  background-size:cover,cover;
  background-position:center,center top;
  background-repeat:no-repeat;
}

.services-page .svc-photo,
.home-solutions .svc-photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(201,162,39,.22);
  border-radius:18px;
  padding:clamp(1.35rem,3vw,2.4rem);
  box-shadow:0 18px 48px rgba(8,26,51,.14);
  background-color:var(--navy-900);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.services-page .svc-photo::before,
.home-solutions .svc-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,
    rgba(8,26,51,.88) 0%,
    rgba(8,26,51,.76) 45%,
    rgba(8,26,51,.58) 72%,
    rgba(8,26,51,.38) 100%);
}
.services-page .svc-photo h3,
.home-solutions .svc-photo h3{ color:var(--white); }
.services-page .svc-photo .svc-block,
.home-solutions .svc-photo .svc-block{
  padding:1rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(8,26,51,.42);
  backdrop-filter:blur(3px);
}
.services-page .svc-photo .svc-block p,
.services-page .svc-photo .faq-a p,
.home-solutions .svc-photo .svc-block p,
.home-solutions .svc-photo .faq-a p{ color:rgba(255,255,255,.82); }
.services-page .svc-photo .svc-block .k,
.home-solutions .svc-photo .svc-block .k{ color:var(--gold-300); }
.services-page .svc-photo .faq-row,
.home-solutions .svc-photo .faq-row{ border-color:rgba(255,255,255,.14); }
.services-page .svc-photo .faq-q,
.home-solutions .svc-photo .faq-q{ color:var(--white); }
.services-page .svc-photo .chip:not(.chip-gold),
.home-solutions .svc-photo .chip:not(.chip-gold){
  color:var(--gold-100);
  border-color:rgba(227,199,102,.45);
  background:rgba(201,162,39,.12);
}
.services-page .svc-photo .btn-outline,
.home-solutions .svc-photo .btn-outline{
  color:var(--white);
  border-color:rgba(255,255,255,.55);
}
.services-page .svc-photo .btn-outline:hover,
.home-solutions .svc-photo .btn-outline:hover{
  color:var(--navy-900);
  background:var(--white);
}
.services-page .svc-photo-recruitment,
.home-solutions .svc-photo-recruitment{ background-image:url("../assets/services/service-recruitment.jpg"); }
.services-page .svc-photo-foreign-workforce,
.home-solutions .svc-photo-foreign-workforce{ background-image:url("../assets/services/service-foreign-workforce.jpg"); }
.services-page .svc-photo-immigration,
.home-solutions .svc-photo-immigration{ background-image:url("../assets/services/service-immigration.jpg"); }
.services-page .svc-photo-workforce-strategy,
.home-solutions .svc-photo-workforce-strategy{ background-image:url("../assets/services/service-workforce-strategy.jpg"); }
.services-page .svc-photo-hr-transformation,
.home-solutions .svc-photo-hr-transformation{ background-image:url("../assets/services/service-hr-transformation.jpg"); }
.services-page .svc-photo-people-development,
.home-solutions .svc-photo-people-development{ background-image:url("../assets/services/service-people-development.jpg"); }
.services-page .svc-photo-ai-workforce,
.home-solutions .svc-photo-ai-workforce{ background-image:url("../assets/services/service-ai-workforce.jpg"); }
.services-page .svc-photo-readiness-assessment,
.home-solutions .svc-photo-readiness-assessment{ background-image:url("../assets/services/service-readiness-assessment.jpg"); }

/* Services closing CTA: confidential Malaysian executive conversation. The
   panel is already dark, so use a restrained navy scrim that protects the
   white copy while leaving the right-side photographic subject visible. */
.services-page .services-cta-band{
  background:
    linear-gradient(90deg,
      rgba(8,26,51,.80) 0%,
      rgba(8,26,51,.62) 48%,
      rgba(8,26,51,.34) 100%),
    url("../assets/services/services-cta.jpg");
  background-size:cover,cover;
  background-position:left center,center;
  background-repeat:no-repeat;
}

@media(max-width:720px){
  .services-page .page-hero-services,
  .services-page .services-advisory-bg,
  .services-page .svc-photo{
    background-position:center,right center;
  }
  .services-page .svc-photo::before{
    background:rgba(8,26,51,.78);
  }
  .services-page .svc-photo .svc-block{ backdrop-filter:none; }
  .services-page .services-cta-band{
    background:
      linear-gradient(rgba(8,26,51,.68),rgba(8,26,51,.68)),
      url("../assets/services/services-cta.jpg");
    background-size:cover,cover;
    background-position:center,right center;
  }
  .services-page .services-core-content,
  .services-page .services-advisory-content{
    background-position:center,right top;
  }
}

/* 52 · Assessment page photography: eleven unique Malaysian workplace scenes,
        scoped to .assessment-page. Dark areas use navy readability scrims;
        light areas use visible white veils and glass surfaces. */
.assessment-page .page-hero-assessment{
  background:
    linear-gradient(90deg,
      rgba(8,26,51,.94) 0%,
      rgba(8,26,51,.80) 34%,
      rgba(8,26,51,.42) 64%,
      rgba(8,26,51,.10) 100%),
    linear-gradient(0deg,rgba(8,26,51,.38),rgba(8,26,51,0) 48%),
    url("../assets/assessment/assessment-hero.jpg");
  background-size:cover,cover,cover;
  background-position:left center,center,center;
  background-repeat:no-repeat;
}
.assessment-page .page-hero-assessment .aur i:last-child{ opacity:.48; }

.assessment-page .assessment-purpose-bg{
  background:
    linear-gradient(90deg,rgba(255,255,255,.68),rgba(244,247,251,.80)),
    url("../assets/assessment/assessment-purpose.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

.assessment-page .assessment-dimensions-bg{
  background:
    linear-gradient(135deg,rgba(8,26,51,.84),rgba(8,26,51,.54)),
    url("../assets/assessment/assessment-dimensions-section.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.assessment-page .assessment-dimension-card{
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background-size:cover,cover;
  background-position:center;
  background-repeat:no-repeat;
  border-color:rgba(201,162,39,.24);
  box-shadow:0 18px 42px rgba(4,15,31,.28);
}
.assessment-page .assessment-dimension-card .card-number{ margin-bottom:auto; }
.assessment-page .assessment-dimension-card h3,
.assessment-page .assessment-dimension-card p{ text-shadow:0 2px 8px rgba(4,15,31,.85); }
.assessment-page .assessment-card-composition{
  background-image:linear-gradient(180deg,rgba(8,26,51,.28),rgba(8,26,51,.94)),url("../assets/assessment/assessment-card-composition.jpg");
}
.assessment-page .assessment-card-compliance{
  background-image:linear-gradient(180deg,rgba(8,26,51,.28),rgba(8,26,51,.94)),url("../assets/assessment/assessment-card-compliance.jpg");
}
.assessment-page .assessment-card-hr-maturity{
  background-image:linear-gradient(180deg,rgba(8,26,51,.28),rgba(8,26,51,.94)),url("../assets/assessment/assessment-card-hr-maturity.jpg");
}
.assessment-page .assessment-card-skills{
  background-image:linear-gradient(180deg,rgba(8,26,51,.28),rgba(8,26,51,.94)),url("../assets/assessment/assessment-card-skills.jpg");
}
.assessment-page .assessment-card-future{
  background-image:linear-gradient(180deg,rgba(8,26,51,.28),rgba(8,26,51,.94)),url("../assets/assessment/assessment-card-future.jpg");
}

.assessment-page .assessment-decision-bg{
  background:
    linear-gradient(90deg,rgba(255,255,255,.70),rgba(244,247,251,.82)),
    url("../assets/assessment/assessment-decision-makers.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

.assessment-page .assessment-process-bg{
  background:
    linear-gradient(90deg,rgba(244,247,251,.62),rgba(255,255,255,.74)),
    url("../assets/assessment/assessment-process.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.assessment-page .assessment-process-bg .step-row{
  padding:1.15rem 1.25rem;
  margin-bottom:.85rem;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  background:rgba(255,255,255,.80);
  box-shadow:0 10px 28px rgba(8,26,51,.08);
  backdrop-filter:blur(4px);
}

.assessment-page .assessment-booking-bg{
  background:
    linear-gradient(90deg,rgba(255,255,255,.58),rgba(244,247,251,.72)),
    url("../assets/assessment/assessment-booking.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.assessment-page .assessment-booking-bg form{
  padding:clamp(1.4rem,3vw,2.4rem);
  border:1px solid rgba(255,255,255,.78);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 54px rgba(8,26,51,.14);
  backdrop-filter:blur(6px);
}

/* 53 · Assessment contrast lock — light copy on dark photography and dark
        copy on light photography, scoped so shared page styles cannot invert it. */
.assessment-page .page-hero-assessment h1{ color:#fff; }
.assessment-page .page-hero-assessment .lede{ color:rgba(255,255,255,.84); }
.assessment-page .page-hero-assessment .breadcrumb,
.assessment-page .page-hero-assessment .breadcrumb a{ color:rgba(255,255,255,.76); }
.assessment-page .page-hero-assessment .eyebrow{ color:var(--gold-300); }

.assessment-page .assessment-dimensions-bg h2,
.assessment-page .assessment-dimensions-bg h3{ color:#fff; }
.assessment-page .assessment-dimensions-bg .assessment-dimension-card p{ color:rgba(255,255,255,.86); }
.assessment-page .assessment-dimensions-bg .card-number{ color:var(--gold-300); }

.assessment-page .assessment-purpose-bg h2,
.assessment-page .assessment-decision-bg h2,
.assessment-page .assessment-process-bg h2,
.assessment-page .assessment-process-bg h4,
.assessment-page .assessment-booking-bg h2,
.assessment-page .assessment-booking-bg label{ color:var(--navy-800); }
.assessment-page .assessment-purpose-bg .section-intro,
.assessment-page .assessment-process-bg .step-row p,
.assessment-page .assessment-booking-bg .section-intro,
.assessment-page .assessment-booking-bg .form-note{ color:var(--grey-600); }
.assessment-page .assessment-booking-bg input,
.assessment-page .assessment-booking-bg select,
.assessment-page .assessment-booking-bg textarea{
  color:var(--ink);
  background:rgba(255,255,255,.96);
}
.assessment-page .assessment-booking-bg input::placeholder,
.assessment-page .assessment-booking-bg textarea::placeholder{ color:var(--grey-600); }

@media(max-width:720px){
  .assessment-page .page-hero-assessment{ background-position:center,center,right center; }
  .assessment-page .assessment-purpose-bg,
  .assessment-page .assessment-decision-bg,
  .assessment-page .assessment-process-bg,
  .assessment-page .assessment-booking-bg{ background-position:center,right center; }
  .assessment-page .assessment-process-bg .step-row,
  .assessment-page .assessment-booking-bg form{ backdrop-filter:none; }
}

/* Industries — click-to-flip tiles (front: sector, back: detail) */
.industry-tile.md-flip{ background:none; border:0; padding:0; overflow:visible; }
.industry-tile.md-flip::before{ display:none; }
.industry-tile.md-flip .md-flip-front,
.industry-tile.md-flip .md-flip-back{
  border-radius:var(--radius-md); padding:var(--s-4); min-height:230px;
  background:linear-gradient(160deg, var(--navy-800), var(--navy-700));
  border:1px solid rgba(255,255,255,.07);
}
.industry-tile.md-flip .md-flip-front{ display:flex; flex-direction:column; }
.industry-tile.md-flip .md-flip-back{
  background:linear-gradient(160deg, var(--navy-700), var(--gold-600));
  display:flex; flex-direction:column; justify-content:center;
}
.industry-tile.md-flip h3{ color:var(--white); margin:var(--s-2) 0 var(--s-1); }
.industry-tile.md-flip .md-flip-front p{ color:rgba(255,255,255,.7); font-size:.95rem; }
.industry-tile.md-flip .md-flip-back p{ color:rgba(255,255,255,.92); font-size:.98rem; }

/* 44 · Insight article pages: long-form body typography, byline meta row,
        and a "related insights" strip, shared by every real article page
        (insight-*.html). Keeps a comfortable reading line-length and the
        same voice/spacing as the rest of the site. */
.article-meta{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  color:var(--grey-600); font-size:.85rem; margin-bottom:2.2rem;
  padding-bottom:1.4rem; border-bottom:1px solid var(--grey-100);
}
.article-meta .chip{ margin:0; }
.article-body{ max-width:70ch; }
/* 62 · Article content runs to the same width as the header/menu.
        .article-body caps itself at 70ch, and .page-hero h1 / .lede carry their
        own narrow caps, so an article's text stopped well short of the menu
        above it. On article pages the copy now fills the shared container. */
.insight-article .article-body{ max-width:none; }
.insight-article .page-hero h1{ max-width:none; }
.insight-article .page-hero .lede{ max-width:none; }
.article-body p{ color:var(--grey-600); margin-bottom:1.3rem; font-size:1.03rem; line-height:1.75; }
.article-body h2{ font-size:clamp(1.3rem,2vw,1.65rem); margin:2.4rem 0 1rem; color:var(--navy-800); }
.article-body ul{ margin:0 0 1.3rem 1.3rem; color:var(--grey-600); }
.article-body li{ margin-bottom:.55rem; line-height:1.7; }
.article-body li::marker{ color:var(--gold-500); }
.article-body strong{ color:var(--navy-800); }
.article-cta{
  margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:var(--radius-md);
  background:var(--navy-050); border:1px solid var(--grey-100);
}
.article-cta p{ margin-bottom:1rem; color:var(--navy-800); font-weight:500; }
.related-strip{ margin-top:4rem; padding-top:2.5rem; border-top:1px solid var(--grey-100); }
.industry-tile.md-flip .flip-hint{ margin-top:auto; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); display:inline-flex; align-items:center; gap:.4rem; }

/* 54 · Industries page — eleven unique Malaysian photographs and an explicit
        light/dark contrast map for hero, sector field, flip cards and CTA. */
.industries-page .industries-hero{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.92) 0%,rgba(8,26,51,.75) 44%,rgba(8,26,51,.38) 72%,rgba(8,26,51,.26) 100%),
    linear-gradient(180deg,rgba(8,26,51,.12),rgba(8,26,51,.62)),
    url("../assets/industries/industries-hero.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
.industries-page .industries-hero h1{ color:#fff; }
.industries-page .industries-hero .lede{ color:rgba(255,255,255,.86); }
.industries-page .industries-hero .breadcrumb,
.industries-page .industries-hero .breadcrumb a{ color:rgba(255,255,255,.76); }
.industries-page .industries-hero .eyebrow{ color:var(--gold-300); }

.industries-page .industries-sector-bg{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.58),rgba(244,247,251,.74)),
    url("../assets/industries/industries-sector-section.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

.industries-page .industry-tile .md-flip-front{
  background-color:#081a33;
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 42px rgba(8,26,51,.22);
}
.industries-page .industry-card-manufacturing .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.18) 0%,rgba(8,26,51,.46) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-manufacturing.jpg"); }
.industries-page .industry-card-precision .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.14) 0%,rgba(8,26,51,.44) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-precision-engineering.jpg"); }
.industries-page .industry-card-semiconductor .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.12) 0%,rgba(8,26,51,.46) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-semiconductor.jpg"); }
.industries-page .industry-card-electronics .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.12) 0%,rgba(8,26,51,.46) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-electronics.jpg"); }
.industries-page .industry-card-automation .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.10) 0%,rgba(8,26,51,.42) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-automation.jpg"); }
.industries-page .industry-card-technology .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.10) 0%,rgba(8,26,51,.40) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-technology.jpg"); }
.industries-page .industry-card-logistics .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.10) 0%,rgba(8,26,51,.44) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-logistics.jpg"); }
.industries-page .industry-card-sme .md-flip-front{ background-image:linear-gradient(180deg,rgba(8,26,51,.10) 0%,rgba(8,26,51,.42) 48%,rgba(8,26,51,.95) 100%),url("../assets/industries/industry-sme.jpg"); }

.industries-page .industry-tile .md-flip-front h3,
.industries-page .industry-tile .md-flip-front .num{ color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.72); }
.industries-page .industry-tile .md-flip-front .flip-hint{ color:var(--gold-300); text-shadow:0 1px 6px rgba(0,0,0,.72); }
.industries-page .industry-tile .md-flip-back{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,244,250,.98));
  border:1px solid rgba(8,26,51,.12);
  box-shadow:0 18px 42px rgba(8,26,51,.18);
}
.industries-page .industry-tile .md-flip-back h3{ color:var(--navy-800); text-shadow:none; }
.industries-page .industry-tile .md-flip-back p{ color:var(--grey-600); }

.industries-page .industries-cta-panel{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.96) 0%,rgba(8,26,51,.78) 48%,rgba(8,26,51,.34) 76%,rgba(8,26,51,.26) 100%),
    url("../assets/industries/industries-cta.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.industries-page .industries-cta-panel h2{ color:#fff; }
.industries-page .industries-cta-panel p{ color:rgba(255,255,255,.84); }

@media(max-width:720px){
  .industries-page .industries-hero{ background-position:center,center,62% center; }
  .industries-page .industries-sector-bg{ background-position:center,center; }
  .industries-page .industries-cta-panel{ background-position:center,64% center; }
}

/* 55 · Case Studies page — nine unique Malaysian photographs with light case
        surfaces and an explicit light/dark text contrast map. */
.case-studies-page .case-studies-hero{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.94) 0%,rgba(8,26,51,.78) 45%,rgba(8,26,51,.42) 72%,rgba(8,26,51,.28) 100%),
    linear-gradient(180deg,rgba(8,26,51,.12),rgba(8,26,51,.60)),
    url("../assets/case-studies/case-studies-hero.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
.case-studies-page .case-studies-hero h1{ color:#fff; }
.case-studies-page .case-studies-hero .lede{ color:rgba(255,255,255,.86); }
.case-studies-page .case-studies-hero .breadcrumb,
.case-studies-page .case-studies-hero .breadcrumb a{ color:rgba(255,255,255,.76); }
.case-studies-page .case-studies-hero .eyebrow{ color:var(--gold-300); }

.case-studies-page .case-studies-grid-bg{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.40),rgba(244,247,251,.58)),
    url("../assets/case-studies/case-studies-section.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.case-studies-page .case-card{
  background-color:#fff;
  background-size:cover,cover;
  background-position:center,right center;
  background-repeat:no-repeat;
  border:1px solid rgba(8,26,51,.10);
  box-shadow:0 18px 42px rgba(8,26,51,.14);
}
.case-studies-page .case-semiconductor{ background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.42) 100%),url("../assets/case-studies/case-semiconductor-deployment.jpg"); }
.case-studies-page .case-precision{ background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.42) 100%),url("../assets/case-studies/case-precision-permits.jpg"); }
.case-studies-page .case-sme{ background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.42) 100%),url("../assets/case-studies/case-sme-expansion.jpg"); }
.case-studies-page .case-automation{ background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.42) 100%),url("../assets/case-studies/case-automation-compliance.jpg"); }
.case-studies-page .case-supervisor{ background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.42) 100%),url("../assets/case-studies/case-supervisor-development.jpg"); }
.case-studies-page .case-electronics{ background-image:linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.42) 100%),url("../assets/case-studies/case-electronics-integrated.jpg"); }

.case-studies-page .case-card h3,
.case-studies-page .case-card .case-result{ color:var(--navy-800); }
.case-studies-page .case-card .case-block p{ color:var(--grey-600); }
.case-studies-page .case-card .case-block .k{ color:var(--gold-600); }
.case-studies-page .case-card .chip{ color:var(--navy-700); background:rgba(239,244,250,.94); border-color:var(--navy-100); }
.case-studies-page .case-card .chip-gold{ color:var(--gold-600); background:rgba(251,246,226,.96); border-color:var(--gold-300); }

.case-studies-page .case-studies-cta-panel{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.97) 0%,rgba(8,26,51,.80) 48%,rgba(8,26,51,.38) 76%,rgba(8,26,51,.28) 100%),
    url("../assets/case-studies/case-studies-cta.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.case-studies-page .case-studies-cta-panel h2{ color:#fff; }
.case-studies-page .case-studies-cta-panel p{ color:rgba(255,255,255,.84); }

@media(max-width:720px){
  .case-studies-page .case-studies-hero{ background-position:center,center,62% center; }
  .case-studies-page .case-card{ background-position:center,right center; }
  .case-studies-page .case-studies-cta-panel{ background-position:center,64% center; }
}

/* 57 · Insights page — twelve unique Malaysian editorial photographs with
        explicit contrast across hero, card headers/bodies and newsletter. */
.insights-page .insights-page-hero{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.94) 0%,rgba(8,26,51,.77) 45%,rgba(8,26,51,.40) 74%,rgba(8,26,51,.26) 100%),
    linear-gradient(180deg,rgba(8,26,51,.10),rgba(8,26,51,.60)),
    url("../assets/insights-page/insights-hero.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
.insights-page .insights-page-hero h1{ color:#fff; }
.insights-page .insights-page-hero .lede{ color:rgba(255,255,255,.86); }
.insights-page .insights-page-hero .breadcrumb,
.insights-page .insights-page-hero .breadcrumb a{ color:rgba(255,255,255,.76); }
.insights-page .insights-page-hero .eyebrow{ color:var(--gold-300); }

.insights-page .insights-page-grid-bg{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(244,247,251,.56)),
    url("../assets/insights-page/insights-section.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.insights-page .insight-card{
  background:#fff;
  border:1px solid rgba(8,26,51,.09);
  box-shadow:0 16px 38px rgba(8,26,51,.14);
}
.insights-page .insight-card .insight-visual{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.insights-page .insight-card .insight-visual::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,26,51,.10),rgba(8,26,51,.18) 48%,rgba(8,26,51,.74));
}
.insights-page .insight-card-1 .insight-visual{ background-image:url("../assets/insights-page/insight-manufacturing-2030.jpg"); }
.insights-page .insight-card-2 .insight-visual{ background-image:url("../assets/insights-page/insight-workforce-compliance.jpg"); }
.insights-page .insight-card-3 .insight-visual{ background-image:url("../assets/insights-page/insight-ai-readiness.jpg"); }
.insights-page .insight-card-4 .insight-visual{ background-image:url("../assets/insights-page/insight-employment-pass.jpg"); }
.insights-page .insight-card-5 .insight-visual{ background-image:url("../assets/insights-page/insight-supervisor-gap.jpg"); }
.insights-page .insight-card-6 .insight-visual{ background-image:url("../assets/insights-page/insight-hr-scaling.jpg"); }
.insights-page .insight-card-7 .insight-visual{ background-image:url("../assets/insights-page/insight-scarce-talent.jpg"); }
.insights-page .insight-card-8 .insight-visual{ background-image:url("../assets/insights-page/insight-source-country.jpg"); }
.insights-page .insight-card-9 .insight-visual{ background-image:url("../assets/insights-page/insight-future-work.jpg"); }
.insights-page .insight-card .insight-visual .chip{
  position:relative; z-index:1;
  color:#fff; background:rgba(8,26,51,.58); border-color:rgba(255,255,255,.34);
  text-shadow:0 1px 5px rgba(0,0,0,.68);
}
.insights-page .insight-card .insight-body h3{ color:var(--navy-800); }
.insights-page .insight-card .insight-body p,
.insights-page .insight-card .insight-body .meta{ color:var(--grey-600) !important; }

.insights-page .insights-newsletter-bg{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.94),rgba(8,26,51,.78) 52%,rgba(8,26,51,.38) 78%,rgba(8,26,51,.30)),
    url("../assets/insights-page/insights-newsletter.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.insights-page .insights-newsletter-bg h2{ color:#fff; }
.insights-page .insights-newsletter-bg .section-intro{ color:rgba(255,255,255,.84); }
.insights-page .insights-newsletter-bg .eyebrow{ color:var(--gold-300); }
.insights-page .insights-newsletter-bg input{ color:var(--ink); background:rgba(255,255,255,.96); }
.insights-page .insights-newsletter-bg input::placeholder{ color:var(--grey-600); }

@media(max-width:720px){
  .insights-page .insights-page-hero{ background-position:center,center,62% center; }
  .insights-page .insights-newsletter-bg{ background-position:center,66% center; }
}

/* 58 · Contact page — four Malaysian photographs with explicit contrast for
        hero, booking form, office details and exhibition invitation. */
.contact-page .contact-page-hero{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.94) 0%,rgba(8,26,51,.78) 44%,rgba(8,26,51,.40) 74%,rgba(8,26,51,.28) 100%),
    linear-gradient(180deg,rgba(8,26,51,.10),rgba(8,26,51,.58)),
    url("../assets/contact-page/contact-hero.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
.contact-page .contact-page-hero h1{ color:#fff; }
.contact-page .contact-page-hero .lede{ color:rgba(255,255,255,.86); }
.contact-page .contact-page-hero .breadcrumb,
.contact-page .contact-page-hero .breadcrumb a{ color:rgba(255,255,255,.76); }
.contact-page .contact-page-hero .eyebrow{ color:var(--gold-300); }

.contact-page .contact-booking-bg{
  background-color:#f4f7fb;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(244,247,251,.54)),
    url("../assets/contact-page/contact-booking-section.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.contact-page .contact-form-panel{
  padding:clamp(1.4rem,3vw,2.4rem);
  border:1px solid rgba(255,255,255,.76);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 54px rgba(8,26,51,.14);
  backdrop-filter:blur(6px);
}
.contact-page .contact-form-panel h2,
.contact-page .contact-form-panel label{ color:var(--navy-800); }
.contact-page .contact-form-panel .form-note{ color:var(--grey-600); }
.contact-page .contact-form-panel input,
.contact-page .contact-form-panel select,
.contact-page .contact-form-panel textarea{ color:var(--ink); background:rgba(255,255,255,.96); }
.contact-page .contact-form-panel textarea::placeholder{ color:var(--grey-600); }

.contact-page .contact-details-card{
  background-color:#fff;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 58%,rgba(255,255,255,.54) 100%),
    url("../assets/contact-page/contact-office-panel.jpg");
  background-size:cover,cover;
  background-position:center,right center;
  background-repeat:no-repeat;
  border-color:rgba(8,26,51,.10);
  box-shadow:0 18px 42px rgba(8,26,51,.14);
}
.contact-page .contact-details-card h3,
.contact-page .contact-details-card strong{ color:var(--navy-800); }
.contact-page .contact-details-card p{ color:var(--grey-600); }
.contact-page .contact-details-card .text-link{ color:var(--navy-700); }

.contact-page .contact-exhibition-bg{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.66),rgba(8,26,51,.88) 50%,rgba(8,26,51,.58)),
    url("../assets/contact-page/contact-exhibition.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.contact-page .contact-exhibition-bg h2{ color:#fff; }
.contact-page .contact-exhibition-bg .section-intro{ color:rgba(255,255,255,.84); }
.contact-page .contact-exhibition-bg .eyebrow{ color:var(--gold-300); }

@media(max-width:720px){
  .contact-page .contact-page-hero{ background-position:center,center,64% center; }
  .contact-page .contact-booking-bg > .container{ grid-template-columns:1fr !important; gap:2rem !important; }
  .contact-page .contact-form-panel{ backdrop-filter:none; }
  .contact-page .contact-exhibition-bg{ background-position:center,center; }
}

/* 59 · Contact clarity pass — homepage-style local hero scrim and calm
        architectural artwork behind the booking content. */
.contact-page .contact-page-hero{
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.58) 30%,rgba(8,26,51,.20) 56%,rgba(8,26,51,.06) 82%,rgba(8,26,51,.03) 100%),
    linear-gradient(0deg,rgba(8,26,51,.26) 0%,rgba(8,26,51,0) 44%),
    url("../assets/contact-page/contact-hero.jpg");
}
.contact-page .contact-booking-bg{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(244,247,251,.30)),
    url("../assets/contact-page/contact-booking-artwork-v2.jpg");
  background-position:center,center;
}
.contact-page .contact-details-card{
  background-image:linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,247,251,.93));
}
@media(max-width:720px){
  .contact-page .contact-page-hero{
    background-image:
      linear-gradient(90deg,rgba(8,26,51,.82) 0%,rgba(8,26,51,.58) 58%,rgba(8,26,51,.24) 100%),
      linear-gradient(0deg,rgba(8,26,51,.22),rgba(8,26,51,0) 48%),
      url("../assets/contact-page/contact-hero.jpg");
  }
}

/* 60 · Sitewide clarity and rhythm — Contact-style local hero scrims, calm
        light content fields and explicit dark/light section alternation. */
.about-page .page-hero-about,
.whyckm-page .page-hero-whyckm,
.services-page .page-hero-services,
.assessment-page .page-hero-assessment,
.industries-page .industries-hero,
.case-studies-page .case-studies-hero,
.insights-page .insights-page-hero{
  background-position:center,center,center;
}
.about-page .page-hero-about{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/about-hero-bg.jpg?v=1");
}
.whyckm-page .page-hero-whyckm{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/whyckm-hero-bg.jpg?v=1");
}
.services-page .page-hero-services{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/services/services-hero.jpg");
}
.assessment-page .page-hero-assessment{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/assessment/assessment-hero.jpg");
}
.industries-page .industries-hero{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/industries/industries-hero.jpg");
}
.case-studies-page .case-studies-hero{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/case-studies/case-studies-hero.jpg");
}
.insights-page .insights-page-hero{
  background-image:linear-gradient(90deg,rgba(8,26,51,.86) 0%,rgba(8,26,51,.56) 30%,rgba(8,26,51,.18) 56%,rgba(8,26,51,.04) 84%),linear-gradient(0deg,rgba(8,26,51,.24),rgba(8,26,51,0) 44%),url("../assets/insights-page/insights-hero.jpg");
}

.services-page .services-core-content{
  background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(244,247,251,.38)),url("../assets/calm-fields/services-field-v2.jpg");
}
.assessment-page .assessment-purpose-bg,
.assessment-page .assessment-decision-bg,
.assessment-page .assessment-booking-bg{
  background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(244,247,251,.42)),url("../assets/calm-fields/assessment-field-v2.jpg");
}
.industries-page .industries-sector-bg{
  background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(244,247,251,.38)),url("../assets/calm-fields/industries-field-v2.jpg");
}
.case-studies-page .case-studies-grid-bg{
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(244,247,251,.40)),url("../assets/calm-fields/case-studies-field-v2.jpg");
}
.insights-page .insights-page-grid-bg{
  background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(244,247,251,.38)),url("../assets/calm-fields/insights-field-v2.jpg");
}
.services-page .services-core-content,
.assessment-page .assessment-purpose-bg,
.assessment-page .assessment-decision-bg,
.assessment-page .assessment-booking-bg,
.industries-page .industries-sector-bg,
.case-studies-page .case-studies-grid-bg,
.insights-page .insights-page-grid-bg{
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

.page-tone-dark{
  background-color:#081a33 !important;
  color:#fff;
}
.page-tone-dark h2,.page-tone-dark h3,.page-tone-dark h4,.page-tone-dark .section-intro,.page-tone-dark p{ color:rgba(255,255,255,.86); }
.page-tone-dark h2,.page-tone-dark h3,.page-tone-dark h4{ color:#fff; }
.page-tone-dark .eyebrow,.page-tone-dark .year,.page-tone-dark .num,.page-tone-dark .num-text{ color:var(--gold-300); }
.page-tone-dark .cta-band{ border-color:rgba(255,255,255,.16); }
.page-tone-light{
  background:#f4f7fb !important;
  color:var(--navy-800);
}
.page-tone-light .num,.page-tone-light .num-text,.page-tone-light .label{ color:var(--navy-800); }
.page-tone-light .stat + .stat{ border-color:rgba(8,26,51,.12); }
.about-page section[aria-label="Our Evolution"]{
  background-image:linear-gradient(90deg,rgba(8,26,51,.88),rgba(8,26,51,.72)),url("../assets/evolution-bg.jpg");
  background-size:cover;
}
.about-page section.page-tone-dark:not([aria-label="Our Evolution"]){
  background-image:linear-gradient(135deg,#081a33,#12345d);
}
.assessment-page .assessment-process-bg{
  background-image:linear-gradient(90deg,rgba(8,26,51,.88),rgba(8,26,51,.72)),url("../assets/assessment/assessment-process.jpg");
}
.assessment-page .assessment-process-bg .step-row{ background:rgba(8,26,51,.70); border-color:rgba(255,255,255,.14); }
.assessment-page .assessment-process-bg .step-row p{ color:rgba(255,255,255,.82); }
/* Fix (corr #2): this section was re-themed dark (dark step cards + white body),
   but the section heading (h2) and the four step titles (h4) were left dark navy
   from the earlier light layout — dark-on-dark and unreadable. Lift them to white. */
.assessment-page .assessment-process-bg h2{ color:#fff; }
.assessment-page .assessment-process-bg h4{ color:#fff; }
/* Fix (corr #2, second pass): the same re-theme also left the four step NUMERALS on
   the light-layout colour — .step-num is var(--navy-800) #0B2545 from style.css, sitting
   on the dark card rgba(8,26,51,.70). Measured contrast 1.13:1, i.e. invisible; that is
   the "numbers are also unclear" half of the request, which the first pass missed.
   Gold-300 matches the ring already drawn around each numeral and measures 10.47:1. */
.assessment-page .assessment-process-bg .step-num{ color:var(--gold-300); border-color:var(--gold-300); }
.industries-page .industries-cta-bg,
.case-studies-page .case-studies-cta-bg{ background-image:linear-gradient(135deg,#081a33,#12345d); }

@media(max-width:720px){
  .about-page .page-hero-about,
  .whyckm-page .page-hero-whyckm,
  .services-page .page-hero-services,
  .assessment-page .page-hero-assessment,
  .industries-page .industries-hero,
  .case-studies-page .case-studies-hero,
  .insights-page .insights-page-hero{
    background-position:center,center,64% center;
  }
}

/* ============================================================
   61 · Floating WhatsApp button (site-wide)
   A fixed green WhatsApp action button in the bottom-right corner of every
   page. It is the primary bottom-right anchor; the existing back-to-top button
   is lifted to stack above it so the two never overlap. A hover/focus tooltip
   slides out to the left; a slow attention pulse runs only when motion is
   allowed and is disabled under reduced-motion / the "off" tier. z-index keeps
   it above the back-to-top yet below the fullscreen mobile menu, so an open
   menu covers it rather than floating a green circle over the navigation.
   ============================================================ */
.wa-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:95;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 28px rgba(8,26,51,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-fab svg{ width:30px; height:30px; display:block; }
.wa-fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 38px rgba(37,211,102,.45); }
.wa-fab:focus-visible{ outline:2.5px solid var(--gold-500); outline-offset:3px; }

/* hover/focus tooltip — slides out to the left of the circle */
.wa-fab-tip{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--navy-800); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.01em;
  white-space:nowrap; padding:.5rem .9rem; border-radius:9px;
  box-shadow:var(--shadow-soft); pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.wa-fab-tip::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:var(--navy-800);
}
.wa-fab:hover .wa-fab-tip, .wa-fab:focus-visible .wa-fab-tip{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}

/* lift the back-to-top button so it stacks above the WhatsApp FAB */
.back-to-top{ bottom:calc(1.4rem + 56px + 12px); right:1.4rem; }

/* slow attention pulse — motion tiers only, silenced under reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .wa-fab::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    box-shadow:0 0 0 0 rgba(37,211,102,.5);
    animation:waPulse 2.8s ease-out infinite; pointer-events:none;
  }
}
[data-motion="off"] .wa-fab::after{ animation:none; }
@keyframes waPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 15px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width:560px){
  .wa-fab{ right:1rem; bottom:1rem; width:52px; height:52px; }
  .wa-fab svg{ width:27px; height:27px; }
  .back-to-top{ bottom:calc(1rem + 52px + 10px); right:1rem; }
  .wa-fab-tip{ display:none; }   /* on touch, a tap opens WhatsApp directly */
}

/* ============================================================
   69 · Footer legibility: lift the grey text
   The bottom line (copyright + credit), the licence line, the brand blurb and
   the legal links were the dimmest text on the site (45% to 60% white) and read
   as grey against the blueprint artwork behind the footer. Lifted toward the
   footer's own body tone (~72%), keeping the hierarchy: headings white, body
   light, small print only slightly softer. A text shadow matches the rest of
   the footer so the copy stays crisp over the artwork.
   ============================================================ */
.footer-bottom{ color:rgba(255,255,255,.70); }
.footer-bottom span{ text-shadow:0 1px 5px rgba(8,26,51,.75); }
.footer-legal a{ color:rgba(255,255,255,.72); }
.footer-licence{ color:rgba(255,255,255,.68); }
.footer-brand p{ color:rgba(255,255,255,.76); }
.footer-news .form-note{ color:rgba(255,255,255,.55); }

/* ============================================================
   74 · Language switcher (EN / BM) — presentation only
   Design shown for approval; Bahasa Melayu is not built yet, so BM is
   deliberately a non-interactive "soon" state rather than a dead link.
   Matches the utility bar's existing treatment: same 36px height and
   1.5px white border as the WhatsApp circle, gold as the active accent.
   ============================================================ */
.lang-switch{
  position:relative;
  display:inline-flex; align-items:center; flex:none;
  height:36px; padding:3px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.04);
  font-family:var(--font-body);
  user-select:none;
}
.lang-opt{
  display:inline-flex; align-items:center; gap:5px;
  padding:0 .68rem; height:100%; border-radius:999px;
  font-size:.74rem; font-weight:600; letter-spacing:.06em;
  line-height:1; white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease);
}
/* current language */
.lang-opt.is-active{
  color:var(--gold-300);
  background:rgba(201,162,39,.16);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.32);
}
/* not built yet: readable, clearly secondary, and not clickable */
.lang-opt.is-soon{
  color:rgba(255,255,255,.5);
  cursor:default;
}
.lang-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.32);
  transition:background .3s var(--ease);
}
.lang-switch:hover{ border-color:rgba(201,162,39,.5); }
.lang-switch:hover .lang-opt.is-soon{ color:rgba(255,255,255,.72); }
.lang-switch:hover .lang-dot{ background:var(--gold-300); }

/* tooltip: explains the BM state instead of leaving it a mystery */
.lang-tip{
  position:absolute; top:calc(100% + 9px); right:0;
  padding:.42rem .6rem; border-radius:6px;
  background:rgba(8,26,51,.97);
  border:1px solid rgba(201,162,39,.3);
  color:rgba(255,255,255,.9);
  font-size:.68rem; letter-spacing:.02em; white-space:nowrap;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
  z-index:60;
}
.lang-switch:hover .lang-tip,
.lang-switch:focus-within .lang-tip{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .lang-opt, .lang-dot, .lang-tip, .lang-switch{ transition:none; }
}

/* the utility row is tight on small screens: keep the pill, drop the tooltip */
@media (max-width:560px){
  .lang-switch{ height:32px; padding:2px; }
  .lang-opt{ padding:0 .5rem; font-size:.68rem; }
  .lang-tip{ display:none; }
}

/* ============================================================
   80 · Services block system, promoted to shared
   These lived inline in services.php, so only that page could use them.
   The homepage now uses the same system (client brief: "make the homepage
   consistent with the Services page"), so they belong here, defined once.
   ============================================================ */
.svc-detail{ border-top:1px solid var(--grey-100); padding-top:var(--s-4); margin-top:var(--s-4); }
.svc-blocks{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); margin-top:var(--s-3); }
.svc-block .k{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); display:block; margin-bottom:.5rem;
}
.svc-block p{ color:var(--grey-600); font-size:.95rem; }
@media (max-width:1020px){ .svc-blocks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){  .svc-blocks{ grid-template-columns:1fr; } }

/* Homepage variant: same visual system, summary depth. The homepage states the
   problem and the outcome then routes to /services for the detail, so it uses
   3 panels rather than 4 and never repeats the Services page wording. */
.home-solutions .svc-detail:first-of-type{ border-top:0; margin-top:0; }
.home-solutions .svc-blocks{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .home-solutions .svc-blocks{ grid-template-columns:1fr; } }
.home-solutions .svc-detail h3{ margin-top:1rem; max-width:24ch; }

/* 80b · Contrast on the homepage's dark photo blocks.
   House rule: dark backgrounds get explicit light/gold text, never inherited
   colours. The Services page uses a solid button here; the homepage uses a text
   link, which inherits navy and disappears against the navy scrim. */
.home-solutions .svc-photo .text-link{
  color:var(--gold-300);
  border-bottom-color:rgba(227,199,102,.4);
}
.home-solutions .svc-photo .text-link:hover{
  color:var(--white);
  border-bottom-color:rgba(255,255,255,.7);
}

/* ============================================================
   81 · Rebuilt homepage: section backgrounds
   The homepage was cut from 12 sections to 5, which renamed the sections.
   Every background rule above is keyed to the OLD aria-label, so the new
   sections inherited nothing. Worse, ".on-dark" only sets TEXT colour -- the
   dark ground always came from the section rule -- so the new dark section
   rendered white-on-white until this block existed.
   Treatments are copied from the originals so the look is unchanged.
   ============================================================ */

/* 2 · The problem — light field, copy-side scrim opening toward the subject */
section[aria-label="The problem"]{
  background-image:
    linear-gradient(90deg, rgba(244,247,251,.55) 0%, rgba(244,247,251,.34) 52%, rgba(244,247,251,.14) 100%),
    url("../assets/challenge-bg.jpg");
  background-size:cover,cover;
  background-position:center,center right;
  background-repeat:no-repeat;
}

/* 3 · What we do — calm field behind the dark photo blocks.
   House rule: calm artwork where content panels sit over the background.
   The blocks supply the contrast, exactly as on the Services page. */
section[aria-label="What we do"]{
  background-color:#f7f9fc;
  background-image:
    linear-gradient(180deg, rgba(247,249,252,.62) 0%, rgba(247,249,252,.14) 32%, rgba(247,249,252,0) 58%),
    url("../assets/our-solutions-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

/* 4 · Why CKM and the proof — the dark field in the rhythm.
   .on-dark supplies white text only; this supplies the ground it needs. */
section[aria-label="Why CKM and the proof"]{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg, rgba(8,26,51,.92) 0%, rgba(8,26,51,.68) 27%, rgba(8,26,51,.40) 50%, rgba(8,26,51,.72) 74%, rgba(8,26,51,.88) 100%),
    linear-gradient(180deg, rgba(8,26,51,.30) 0%, rgba(8,26,51,0) 42%),
    url("../assets/why-matters-bg.jpg?v=1");
  background-size:cover,cover,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
/* text-link and block labels are navy by default: invisible on this ground */
section[aria-label="Why CKM and the proof"] .text-link{ color:var(--gold-300); }
section[aria-label="Why CKM and the proof"] .svc-block p{ color:rgba(255,255,255,.82); }
section[aria-label="Why CKM and the proof"] .svc-detail{ border-top-color:rgba(255,255,255,.16); }
@media(max-width:820px){
  section[aria-label="Why CKM and the proof"]{
    background-image:
      linear-gradient(180deg, rgba(8,26,51,.90) 0%, rgba(8,26,51,.62) 46%, rgba(8,26,51,.90) 100%),
      url("../assets/why-matters-bg.jpg?v=1");
    background-size:cover,cover;
  }
}

/* 5 · Assessment and contact — light closing field.
   CORRECTED 17 Jul: this first used assessment-bg.jpg, which measures luminance
   16/255 — very nearly black. The original never put it on a section; it used it
   inside a .cta-band with a NAVY scrim, i.e. as a dark band. Pairing it with a
   light scrim left dark navy headings on a dark photo: unreadable.
   contact-cta-bg.jpg measures 245/255 and is the image built for this exact
   closing panel, so the section keeps its light treatment and its dark text.
   House rule: classify the photograph BEFORE integrating it. */
section[aria-label="Assessment and contact"]{
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.10) 100%),
    url("../assets/contact-cta-bg.jpg?v=1");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

/* ============================================================
   82 · Homepage industries strip
   The rebuild first dropped this section to a link. That was wrong on two
   counts: CKM listed "Industries We Serve" as step 5 of their own structure,
   and the section carries 8 real photographs — cutting it removed photography
   from the page rather than adding it.
   It returns with the same 8 images and the same headline, rebuilt WITHOUT the
   flip interaction so it stays consistent with the Services page (requirement 1).
   A compact proof strip, not a deep section: it answers "do you know my sector?"
   and routes to /industries for the detail.
   ============================================================ */
.ind-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3);
  margin-top:var(--s-4);
}
.ind-tile{
  position:relative; display:flex; align-items:flex-end;
  min-height:200px; padding:1.1rem 1.2rem; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
/* House rule: dark ground, so the label is explicitly light. The scrim is baked
   in as the top background layer, deepest at the foot where the words sit. */
/* The photography is the point: leave the top of each image completely clear and
   only darken where the label sits. This is the original homepage's own gradient,
   which is why those photos read as rich rather than veiled. An even wash across
   the whole tile mutes a good photograph for no gain — the label only needs the
   bottom third. */
.ind-tile::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,51,0) 40%, rgba(8,26,51,.58) 66%, rgba(8,26,51,.93) 100%);
  transition:background .4s var(--ease);
}
.ind-tile span{
  position:relative; z-index:1;
  color:var(--white); font-family:var(--font-display); font-weight:700;
  font-size:1rem; letter-spacing:-.01em; line-height:1.2;
  text-shadow:0 1px 8px rgba(8,26,51,.7);
}
.ind-tile:hover{ transform:translateY(-3px); border-color:rgba(201,162,39,.55); }
.ind-tile:hover::before{
  background:linear-gradient(180deg, rgba(8,26,51,0) 34%, rgba(8,26,51,.48) 62%, rgba(8,26,51,.90) 100%);
}
.ind-tile:focus-visible{ outline:2px solid var(--gold-300); outline-offset:2px; }
.ind-tile.i1{ background-image:url("../assets/ind-cards/ind1.jpg"); }
.ind-tile.i2{ background-image:url("../assets/ind-cards/ind2.jpg"); }
.ind-tile.i3{ background-image:url("../assets/ind-cards/ind3.jpg"); }
.ind-tile.i4{ background-image:url("../assets/ind-cards/ind4.jpg"); }
.ind-tile.i5{ background-image:url("../assets/ind-cards/ind5.jpg"); }
.ind-tile.i6{ background-image:url("../assets/ind-cards/ind6.jpg"); }
.ind-tile.i7{ background-image:url("../assets/ind-cards/ind7.jpg"); }
.ind-tile.i8{ background-image:url("../assets/ind-cards/ind8.jpg"); }
@media (max-width:900px){ .ind-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ind-strip{ grid-template-columns:1fr; } .ind-tile{ min-height:120px; } }
@media (prefers-reduced-motion:reduce){ .ind-tile, .ind-tile::before{ transition:none; } }

/* 83 · Small-phone header: make room for the language switcher.
   The utility bar carried two controls and fitted 360px exactly. Adding the
   language switcher (block 74) pushed it to 364px, which clipped the right edge
   off the gold CTA. Nothing scrolls sideways -- html has overflow-x:clip -- so
   the only symptom is a shaved button, which is easy to miss and looks broken.
   Tighten the switcher below 420px rather than hide it or reword the CTA. */
@media (max-width:420px){
  .lang-switch{ height:30px; padding:2px; }
  .lang-opt{ padding:0 .34rem; font-size:.62rem; letter-spacing:.04em; gap:3px; }
  .lang-dot{ width:4px; height:4px; }
  .header-utility{ gap:.5rem; }
  /* A flex item will not shrink past its own text. The CTA is nowrap, so its
     min-content IS the full label -- min-width:0 alone cannot help. Trimming the
     label's own size by a few px is what lets the row fit, and it keeps the
     button on one line and the approved wording intact. */
  .header-utility .nav-cta.btn{
    min-width:0;
    font-size:.74rem;
    padding-left:.85rem; padding-right:.85rem;
    letter-spacing:0;
  }
}

/* 84 · Why CKM differentiators grid.
   This was an inline style="grid-template-columns:repeat(3,1fr)". Inline styles
   beat every media query, so the grid stayed 3 columns on a 360px phone: three
   93px cells that pushed the document to 364px. Because .site-header is
   position:fixed with width:100%, the header then sized to 364 too and clipped
   the right edge off the gold CTA -- a header bug whose actual cause was five
   text blocks in a section further down. Never put layout in a style attribute. */
.why-proof-blocks{ grid-template-columns:repeat(3,1fr); margin-top:2rem; }
@media (max-width:1020px){ .why-proof-blocks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){  .why-proof-blocks{ grid-template-columns:1fr; } }

/* ============================================================
   85 · Sitewide motion polish — premium hover life
   Layers ON TOP of the existing card-lift / button hovers, adding gold glow,
   a shine sweep, underline sweeps and gentle image zoom. All gated behind
   (hover:hover) so touch devices never get stuck states, and reduced-motion
   strips it entirely. Executive-restrained: gold is the accent, movement is
   small and calm, nothing bounces.
   ============================================================ */
@media (hover:hover) and (prefers-reduced-motion:no-preference){

  /* cards: keep the existing lift, add a warm gold ring + deeper shadow */
  .card{ transition:transform .38s var(--ease,cubic-bezier(.22,.61,.2,1)),
                     box-shadow .38s var(--ease,cubic-bezier(.22,.61,.2,1)),
                     border-color .38s var(--ease,cubic-bezier(.22,.61,.2,1)); }
  .card:hover{
    box-shadow:0 20px 52px rgba(8,26,51,.20), 0 0 0 1px rgba(201,162,39,.35);
  }

  /* photos ease in on hover — ONLY on blocks that already clip their overflow
     (svc-photo, insight/industry image cards). NOT on plain .card, which would
     clip the 3D flip cards and any popped badges/icons. */
  .insight-card, .case-card, .service-card{ overflow:hidden; }
  .insight-card img, .case-card img, .service-card img{
    transition:transform .55s var(--ease,cubic-bezier(.22,.61,.2,1));
  }
  .insight-card:hover img, .case-card:hover img, .service-card:hover img{ transform:scale(1.05); }

  /* gold buttons: a glossy light streak sweeps across on hover */
  .btn-gold{ position:relative; overflow:hidden; }
  .btn-gold::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
    transform:translateX(-140%); transition:transform .6s var(--ease,cubic-bezier(.22,.61,.2,1));
  }
  .btn-gold:hover::after{ transform:translateX(140%); }

  /* content + footer links: a gold underline sweeps in from the left */
  .site-footer a:not(.btn):not(.soc):not(.footer-logo),
  .section-intro a, .faq-a a, .lede a{
    background-image:linear-gradient(var(--gold-300),var(--gold-300));
    background-repeat:no-repeat; background-position:left 100%; background-size:0% 1.5px;
    transition:background-size .3s var(--ease,cubic-bezier(.22,.61,.2,1)), color .3s;
    padding-bottom:1px;
  }
  .site-footer a:not(.btn):not(.soc):not(.footer-logo):hover,
  .section-intro a:hover, .faq-a a:hover, .lede a:hover{ background-size:100% 1.5px; }

  /* the text-link arrow phrases: gild + nudge (extends the existing gap widen) */
  .text-link:hover{ color:var(--gold-300); }

  /* service / industry photo blocks: warm the border and lift a touch */
  .svc-photo{ transition:transform .4s var(--ease,cubic-bezier(.22,.61,.2,1)),
                         box-shadow .4s var(--ease,cubic-bezier(.22,.61,.2,1)); }
  .svc-photo:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(8,26,51,.28); }
}

/* touch devices: make sure nothing stays in a hover state, and images never
   sit scaled. Also the safety net for reduced-motion users. */
@media (hover:none), (prefers-reduced-motion:reduce){
  .insight-card img, .case-card img, .service-card img{ transform:none !important; }
  .btn-gold::after{ display:none; }
}

/* ============================================================
   86 · Uniform 650px hero banners + typewriter title
   Every interior page banner is now exactly 650px, content centred, so the
   banners read as one consistent band across the site. The homepage .hero is a
   content landing hero (headline + stat band) and keeps its own height until the
   rebuilt slim homepage replaces it.
   ============================================================ */
.page-hero{ min-height:650px; height:650px; padding:10rem 0 3rem; }
@media (max-width:768px){
  .page-hero{ height:auto; min-height:560px; padding:11rem 0 3rem; }
}

/* Typewriter hero title. The real title stays in the DOM for search engines and
   screen readers via a visually-hidden copy; the visible line types itself,
   holds, clears to blank, and types again on a loop (no backspace). */
.tw-a11y{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.tw-vis{ display:inline; }
.tw-vis::after{ content:""; display:inline-block; width:.06em; min-width:2px; height:1.05em;
  background:var(--gold-300); margin-left:.06em; vertical-align:-.12em;
  animation:twcaret 1s steps(1) infinite; }
@keyframes twcaret{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .tw-vis::after{ display:none; }
}

/* 61 · Insight imagery made page-agnostic.
        The nine article photos were only wired to the listing page
        (.insights-page .insight-card-N), so article hero banners and the
        related-post cards on article pages rendered with no photo at all.
        Each article declares its photo once as --a-photo; the hero then
        composes scrim + photo, and the mobile rule can swap the scrim
        direction without having to repeat every image URL. */
.insight-article.a-manufacturing-2030{ --a-photo:url("../assets/insights-page/insight-manufacturing-2030.jpg"); }
.insight-article.a-workforce-compliance{ --a-photo:url("../assets/insights-page/insight-workforce-compliance.jpg"); }
.insight-article.a-ai-readiness{ --a-photo:url("../assets/insights-page/insight-ai-readiness.jpg"); }
.insight-article.a-employment-pass{ --a-photo:url("../assets/insights-page/insight-employment-pass.jpg"); }
.insight-article.a-supervisor-gap{ --a-photo:url("../assets/insights-page/insight-supervisor-gap.jpg"); }
.insight-article.a-hr-scaling{ --a-photo:url("../assets/insights-page/insight-hr-scaling.jpg"); }
.insight-article.a-scarce-talent{ --a-photo:url("../assets/insights-page/insight-scarce-talent.jpg"); }
.insight-article.a-source-country{ --a-photo:url("../assets/insights-page/insight-source-country.jpg"); }
.insight-article.a-future-work{ --a-photo:url("../assets/insights-page/insight-future-work.jpg"); }

.insight-article .page-hero{
  background-color:#081a33;
  background-image:
    linear-gradient(90deg,rgba(8,26,51,.94) 0%,rgba(8,26,51,.80) 42%,rgba(8,26,51,.46) 72%,rgba(8,26,51,.30) 100%),
    var(--a-photo,none);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
/* Stacked mobile: vertical scrim so the headline stays legible over the photo. */
@media(max-width:820px){
  .insight-article .page-hero{
    background-image:
      linear-gradient(180deg,rgba(8,26,51,.90) 0%,rgba(8,26,51,.80) 50%,rgba(8,26,51,.93) 100%),
      var(--a-photo,none);
    background-position:center,68% center;
  }
}

/* Reusable thumbnails for related-post cards (usable on any page). */
.ins-img-manufacturing-2030{ background-image:url("../assets/insights-page/insight-manufacturing-2030.jpg"); }
.ins-img-workforce-compliance{ background-image:url("../assets/insights-page/insight-workforce-compliance.jpg"); }
.ins-img-ai-readiness{ background-image:url("../assets/insights-page/insight-ai-readiness.jpg"); }
.ins-img-employment-pass{ background-image:url("../assets/insights-page/insight-employment-pass.jpg"); }
.ins-img-supervisor-gap{ background-image:url("../assets/insights-page/insight-supervisor-gap.jpg"); }
.ins-img-hr-scaling{ background-image:url("../assets/insights-page/insight-hr-scaling.jpg"); }
.ins-img-scarce-talent{ background-image:url("../assets/insights-page/insight-scarce-talent.jpg"); }
.ins-img-source-country{ background-image:url("../assets/insights-page/insight-source-country.jpg"); }
.ins-img-future-work{ background-image:url("../assets/insights-page/insight-future-work.jpg"); }
.ins-img-all-insights{ background-image:url("../assets/insights-page/insights-section.jpg"); }

/* Related-post cards on article pages: the same photo treatment the listing gets. */
.related-strip .insight-card .insight-visual{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.related-strip .insight-card .insight-visual::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,26,51,.10),rgba(8,26,51,.18) 48%,rgba(8,26,51,.74));
}
.related-strip .insight-card .insight-visual .chip{
  position:relative; z-index:1;
  color:#fff; background:rgba(8,26,51,.58); border-color:rgba(255,255,255,.34);
}

/* ==========================================================================
   ABOUT — "Building Futures Together" video section
   A click-to-play facade: the poster is a local progressive JPEG and the
   YouTube player is only injected on activation, so the page does not pay the
   player's weight (or set a third-party cookie) unless the visitor asks for it.
   ========================================================================== */
.about-video .video-frame{
  position:relative;
  /* Full container width, so the frame's left edge lines up with the heading
     above it and with the leader card in the section before — the page is
     left-aligned throughout and a centred, inset video broke that line. */
  margin-top:var(--s-4);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--navy-800);
  box-shadow:0 18px 50px rgba(8,26,51,.22);
}

/* The whole poster is the control, so the hit area is the full 16:9 frame
   rather than just the play badge. */
.about-video .video-play{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  padding:0;
  border:0;
  background:var(--navy-800);
  cursor:pointer;
  color:#fff;
}
.about-video .video-play img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Gentle navy wash so the gold play badge always clears the photograph
   beneath it, whatever frame YouTube served as the thumbnail. */
.about-video .video-play::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,26,51,.10),rgba(8,26,51,.42));
  transition:background .35s ease;
}

.about-video .video-play-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:84px; height:84px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--navy-800);
  box-shadow:0 10px 30px rgba(8,26,51,.45);
  transition:transform .35s cubic-bezier(.22,1,.36,1), background .35s ease;
}
/* Nudge the triangle optically centred inside the circle. */
.about-video .video-play-btn svg{ margin-left:4px; }

.about-video .video-play:hover .video-play-btn,
.about-video .video-play:focus-visible .video-play-btn{
  transform:translate(-50%,-50%) scale(1.08);
  background:var(--gold-300);
}
.about-video .video-play:hover::after{
  background:linear-gradient(180deg,rgba(8,26,51,.04),rgba(8,26,51,.30));
}
.about-video .video-play:focus-visible{
  outline:3px solid var(--gold-300);
  outline-offset:3px;
}

/* Once activated the button is replaced by the real player, which fills the
   same 16:9 box so the page never reflows. */
.about-video .video-frame iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}

.about-video .video-fallback{
  margin:var(--s-3) 0 0;
  font-size:.95rem;
  color:var(--grey-600);
}
.about-video .video-fallback a{ color:var(--navy-800); text-decoration:underline; }

@media (max-width:640px){
  .about-video .video-play-btn{ width:64px; height:64px; }
  .about-video .video-play-btn svg{ width:26px; height:26px; }
}

@media (prefers-reduced-motion:reduce){
  .about-video .video-play-btn,
  .about-video .video-play::after{ transition:none; }
  .about-video .video-play:hover .video-play-btn,
  .about-video .video-play:focus-visible .video-play-btn{ transform:translate(-50%,-50%); }
}