/* ============================================================
   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;
  padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header.scrolled .header-utility{ display:none; }    /* reclaim height once scrolled */
.header-inner{ padding:1.1rem 0; transition:padding .4s var(--ease); }
.site-header.scrolled .header-inner{ padding:.7rem 0; }

/* 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); }
}
@media (max-width:560px){
  .header-utility{ justify-content:space-between; padding:.5rem 0; }
  .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:625px; 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:center; }
/* 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.png");
  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.png");
  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.png");
  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.png");
  background-size:cover,cover;
  background-position:center,center top;
  background-repeat:no-repeat;
}

.services-page .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{
  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{ color:var(--white); }
.services-page .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{ color:rgba(255,255,255,.82); }
.services-page .svc-photo .svc-block .k{ color:var(--gold-300); }
.services-page .svc-photo .faq-row{ border-color:rgba(255,255,255,.14); }
.services-page .svc-photo .faq-q{ color:var(--white); }
.services-page .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{
  color:var(--white);
  border-color:rgba(255,255,255,.55);
}
.services-page .svc-photo .btn-outline:hover{
  color:var(--navy-900);
  background:var(--white);
}
.services-page .svc-photo-recruitment{ background-image:url("../assets/services/service-recruitment.png"); }
.services-page .svc-photo-foreign-workforce{ background-image:url("../assets/services/service-foreign-workforce.png"); }
.services-page .svc-photo-immigration{ background-image:url("../assets/services/service-immigration.png"); }
.services-page .svc-photo-workforce-strategy{ background-image:url("../assets/services/service-workforce-strategy.png"); }
.services-page .svc-photo-hr-transformation{ background-image:url("../assets/services/service-hr-transformation.png"); }
.services-page .svc-photo-people-development{ background-image:url("../assets/services/service-people-development.png"); }
.services-page .svc-photo-ai-workforce{ background-image:url("../assets/services/service-ai-workforce.png"); }
.services-page .svc-photo-readiness-assessment{ background-image:url("../assets/services/service-readiness-assessment.png"); }

/* 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.png");
  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.png");
    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.png");
  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.png");
  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.png");
  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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}

.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.png");
  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.png");
  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.png");
  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; }
.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.png");
  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.png");
  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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }

.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.png");
  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.png");
  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.png");
  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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }
.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.png"); }

.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.png");
  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.png");
  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.png");
  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.png"); }
.insights-page .insight-card-2 .insight-visual{ background-image:url("../assets/insights-page/insight-workforce-compliance.png"); }
.insights-page .insight-card-3 .insight-visual{ background-image:url("../assets/insights-page/insight-ai-readiness.png"); }
.insights-page .insight-card-4 .insight-visual{ background-image:url("../assets/insights-page/insight-employment-pass.png"); }
.insights-page .insight-card-5 .insight-visual{ background-image:url("../assets/insights-page/insight-supervisor-gap.png"); }
.insights-page .insight-card-6 .insight-visual{ background-image:url("../assets/insights-page/insight-hr-scaling.png"); }
.insights-page .insight-card-7 .insight-visual{ background-image:url("../assets/insights-page/insight-scarce-talent.png"); }
.insights-page .insight-card-8 .insight-visual{ background-image:url("../assets/insights-page/insight-source-country.png"); }
.insights-page .insight-card-9 .insight-visual{ background-image:url("../assets/insights-page/insight-future-work.png"); }
.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.png");
  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.png");
  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.png");
  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.png");
  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.png");
  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.png");
}
.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.png");
  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.png");
  }
}

/* 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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}

.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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}
.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.png");
}
.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); }
.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); }