/* ==========================================================================
   PRARAMBH MANPOWER SUPPORT — theme rebuilt to match the supplied reference
   design: flat, editorial, corporate. Light surfaces, thin 1px borders,
   pill buttons, Aptos/Inter type, muted navy accent. No gradients, glow,
   blur cursors or particle effects.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  color-scheme:light;
  --bg:#ffffff;
  --card:#ffffff; /* card / panel surface — flips in dark mode */
  --fill:#1e3a5f; /* solid navy fill for buttons that carry white text */
  --fill-dk:#12294a;
  --surface:#f5f7fb;
  --surface-2:#eaeef5;
  --line:#dde3ec;
  --text:#0f1b2d;
  --muted:#5b6472;
  --accent:#1e3a5f;
  --accent-dk:#12294a;
  /* brand gold — sampled from the logo wordmark (#e6a52f) so logo and theme finally share a palette */
  --gold:#e6a52f;
  --gold-dk:#b9801a;
  --gold-soft:#fdf3dc;
  --ink:#081828; /* the logo's deep navy */
  --navy:#1e3a5f; /* alias kept for older inline styles that reference --navy directly */
  --accent-soft:#e3ebf5;
  --num-tint:#c7d1de;
  --wa:#25d366;
  --wa-dk:#128c7e;
  --radius:10px;
  --radius-lg:18px;
  --maxw:1200px;
  --shadow-sm:0 1px 2px rgba(15,27,45,.06);
  --shadow-md:0 10px 26px rgba(15,27,45,.10);
  --shadow-lg:0 20px 48px rgba(15,27,45,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  /* NOTE: "Aptos"/"Aptos Display" is bundled with Microsoft 365/Office and
     isn't available on a public web-font CDN, so it's listed first — any
     visitor with it installed locally sees the real thing. Everyone else
     falls back to Segoe UI, then Inter (loaded above). */
  --font-display:"Aptos Display","Aptos","Segoe UI Semibold","Segoe UI","Inter",system-ui,sans-serif;
  --font-body:"Aptos","Segoe UI","Inter",system-ui,sans-serif;
}

html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.2}
em{font-style:italic;color:var(--accent)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
svg{display:block}

/* ── LOADER — "gate pass": a site-access card. Compliance boxes tick
   themselves off as the page loads, the barcode is scanned, and a red
   rubber stamp (#C4432B — intentionally fixed, not themed) slams down
   the moment the page is ready. Cream card, logo-gold header bar, navy ink; the red seal is the only other accent. ── */
.loader{--gp-stamp:#C4432B;--gp-bg:#F5F0E6;--gp-card:#FFFDF8;--gp-line:#E7E1D3;--gp-muted:#93A0AC;--gp-ink:#1E3A5F;--gp-amber:var(--gold);position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--gp-bg);transition:opacity .6s ease,transform .6s ease}
.loader.is-done{opacity:0;transform:scale(1.01);pointer-events:none}
.gp-card{position:relative;width:min(360px,88vw);background:var(--gp-card);border-radius:10px;box-shadow:0 18px 40px rgba(30,58,95,.14),0 2px 6px rgba(30,58,95,.08);animation:gpIn .7s var(--ease) both}
.gp-card.is-stamped{animation:gpThud .3s ease}
@keyframes gpIn{from{opacity:0;transform:translateY(26px) rotate(-1.5deg)}to{opacity:1;transform:none}}
@keyframes gpThud{0%{transform:none}35%{transform:translateY(3px) scale(.994)}100%{transform:none}}
.gp-card::before{content:'';position:absolute;top:-1px;left:0;right:0;height:8px;background-image:radial-gradient(circle,var(--gp-bg) 3.2px,transparent 3.6px);background-size:16px 16px;background-position:8px 0}
.gp-top{background:var(--gp-amber);border-radius:10px 10px 0 0;padding:14px 18px 10px;display:flex;align-items:baseline;justify-content:space-between}
.gp-word{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.05em;color:var(--gp-ink);text-transform:uppercase}
.gp-label{font-size:9px;font-weight:700;letter-spacing:.12em;color:rgba(30,58,95,.7);text-transform:uppercase}
.gp-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.gp-meta{display:flex;justify-content:space-between;font-family:ui-monospace,'SF Mono','JetBrains Mono',Consolas,monospace;font-size:10.5px;color:var(--gp-muted);letter-spacing:.02em;border-bottom:1px dashed var(--gp-line);padding-bottom:10px}
.gp-checklist{display:flex;flex-direction:column;gap:9px}
.gp-row{display:flex;align-items:center;gap:10px}
.gp-box{width:17px;height:17px;flex:none;border:1.5px solid var(--gp-line);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}
.gp-box svg{width:11px;height:11px;overflow:visible}
.gp-box path{fill:none;stroke:var(--gp-amber);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s ease}
.gp-row.is-checked .gp-box{border-color:var(--gp-amber);background:rgba(230,165,47,.10)}
.gp-row.is-checked .gp-box path{stroke-dashoffset:0}
.gp-lbl{font-size:12.5px;color:var(--gp-muted);letter-spacing:.01em;transition:color .2s ease}
.gp-row.is-checked .gp-lbl{color:var(--gp-ink);font-weight:600}
.gp-barcode-wrap{position:relative;height:30px;overflow:hidden;border-radius:3px}
.gp-barcode{display:flex;align-items:flex-end;height:100%;gap:2px}
.gp-barcode span{display:block;background:var(--gp-ink);opacity:.55}
.gp-scan{position:absolute;top:0;bottom:0;width:2px;background:var(--gp-amber);box-shadow:0 0 6px var(--gp-amber);animation:gpScan 1.6s ease-in-out infinite}
@keyframes gpScan{0%,100%{left:0%}50%{left:100%}}
.gp-foot{display:flex;justify-content:space-between;align-items:center}
.gp-locale{font-size:10px;letter-spacing:.1em;color:var(--gp-muted);text-transform:uppercase}
.gp-counter{font-family:ui-monospace,'SF Mono','JetBrains Mono',Consolas,monospace;font-variant-numeric:tabular-nums;font-size:11px;color:var(--gp-muted);letter-spacing:.03em}
.gp-stamp{position:absolute;top:-18px;right:-16px;width:108px;height:108px;opacity:0;transform:rotate(-26deg) scale(1.5);transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.gp-stamp.is-shown{opacity:.92;transform:rotate(-9deg) scale(1)}
.gp-stamp svg{width:100%;height:100%}
.gp-stamp circle{fill:none;stroke:var(--gp-stamp)}
.gp-stamp text{fill:var(--gp-stamp);font-weight:800;text-anchor:middle;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){
  .gp-card{animation:none}.gp-card.is-stamped{animation:none}
  .gp-scan{animation:none;left:100%}
  .gp-box path{transition:none}
  .gp-stamp{transition:opacity .3s linear;transform:rotate(-9deg) scale(1) !important}
  .loader{transition:opacity .3s linear}.loader.is-done{transform:none}
}


/* ── SCROLL PROGRESS ── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:9998;width:0}

/* ── NAV ──
   Floating rounded bar, inset from the viewport edges with a soft
   shadow — same content/links as before, new chrome around them. */
.nav{position:fixed;top:16px;left:0;right:0;margin:0 auto;width:min(1040px,calc(100% - 32px));z-index:100;
  padding:13px 14px 13px 30px;border-radius:999px;
  /* glass: translucent cool-white, strong blur + saturation so page content glows through as it scrolls behind */
  background:linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(244,248,253,.52) 55%,rgba(255,255,255,.66) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1px rgba(30,58,95,.09),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,58,95,.06),0 14px 34px rgba(8,24,40,.12),0 2px 6px rgba(8,24,40,.06);
  transition:padding .25s ease,box-shadow .25s ease,top .25s ease,background .25s ease,width .25s ease}
/* glass sheen along the top edge */
.nav::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 55%)}
.nav.scrolled{padding:9px 10px 9px 26px;top:10px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(246,249,253,.68) 55%,rgba(255,255,255,.8));box-shadow:0 0 0 1px rgba(30,58,95,.10),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,58,95,.06),0 18px 40px rgba(8,24,40,.16),0 3px 8px rgba(8,24,40,.08)}
.nav-wrap{position:relative;z-index:1;max-width:none;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--text)}
.nav-logo-img{height:50px;width:auto;object-fit:contain}
.nav.scrolled .nav-logo-img{height:42px}
.nav-links{display:flex;gap:24px;font-size:.92rem;font-weight:500;color:var(--muted);align-items:center}
.nav-links>a,.nav-item>button{color:var(--muted);transition:color .2s ease;padding:6px 0;background:none;border:none;outline:none;appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer}
.nav-links>a:hover,.nav-links>a.active,.nav-item>button:hover,.nav-item>button[aria-expanded="true"]{color:var(--text)}
.nav-item{position:relative}
.nav-item>a,.nav-item>button{display:inline-flex;align-items:center;gap:5px}
.nav-item>a svg,.nav-item>button svg{width:10px;height:10px;transition:transform .2s ease}
.nav-item.drop-open>a svg,.nav-item.drop-open>button svg{transform:rotate(180deg)}
.nav-drop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);min-width:270px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50}
.nav-item.drop-open .nav-drop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;font-size:.85rem;color:var(--muted);transition:background .2s,color .2s}
.nav-drop a:hover{background:var(--surface);color:var(--text)}
.nav-drop a svg{color:var(--accent);flex-shrink:0;width:12px;height:12px}
.nav-drop-all{margin-top:4px;border-top:1px solid var(--line);padding-top:10px !important;color:var(--accent) !important;font-weight:700 !important}

.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-wa-btn{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:.85rem;white-space:nowrap;transition:background .2s ease,transform .2s ease}
.nav-wa-btn:hover{background:var(--wa-dk);transform:translateY(-2px)}
.nav-wa-btn svg{flex-shrink:0}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.burger.open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:600px){
  .nav{left:10px;right:10px;width:auto;margin:0;top:10px;padding:8px 8px 8px 18px;border-radius:26px}
  .nav.scrolled{top:8px;padding:6px 6px 6px 16px}
  .nav-logo-img{height:34px}
  .nav.scrolled .nav-logo-img{height:30px}
}

/* ── MOBILE DRAWER ── */
.drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:var(--card);padding:110px 24px 100px;display:flex;flex-direction:column;transform:translateY(-110%);transition:transform .4s var(--ease);border-bottom:1px solid var(--line);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.drawer>a,.drawer>button,.drawer>.drawer-sub{flex-shrink:0}
.drawer.open{transform:translateY(0)}
.drawer>a{padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.98rem}
.drawer-group-h{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem;font-weight:700;font-family:var(--font-display);color:var(--text);background:none;border-left:none;border-right:none;border-top:none;text-align:left;cursor:pointer}
.drawer-group-h .dg-chev{flex-shrink:0;color:var(--accent);transition:transform .25s ease}
.drawer-group-h[aria-expanded="true"] .dg-chev{transform:rotate(180deg)}
.drawer-sub{display:flex;flex-direction:column;padding-left:14px;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease}
.drawer-sub.open{max-height:1200px} /* fallback if JS is unavailable; JS sets the real height inline */
.drawer-sub a{border-bottom:none !important;font-size:.9rem !important;padding:9px 0 !important;color:var(--muted) !important}
.drawer-sub a.drawer-sub-all{color:var(--accent) !important;font-weight:700 !important;border-bottom:1px solid var(--line) !important;margin-bottom:4px}
.drawer-sub a:first-child{padding-top:4px !important}
.drawer-sub a:last-child{padding-bottom:12px !important}

/* ── BUTTONS ── */
.hero-cta,.cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.92rem;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;border:none;cursor:pointer;box-shadow:0 10px 24px rgba(15,27,45,.16);position:relative;overflow:hidden}
.hero-cta:hover,.cta-btn:hover{background:var(--accent-dk);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hero-cta svg,.cta-btn svg{flex-shrink:0}

/* ── HERO FEATURE ROW (small icon+label strip under the primary CTA) ── */
.hero-feat-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:26px}
.hero-feat{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.83rem;font-weight:600}
.hero-feat-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.hero-feat-ic svg{width:14px;height:14px}

.link-btn{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:11px 20px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;font-weight:700;transition:background .2s ease,color .2s ease}
.link-btn:hover{background:var(--accent);color:#fff}
.link-btn .lb-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;transition:background .2s ease}
.link-btn:hover .lb-dot{background:#fff}
.link-btn .lb-arrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(30,58,95,.12);transition:transform .2s ease,background .2s ease}
.link-btn:hover .lb-arrow{transform:translateX(2px);background:rgba(255,255,255,.22)}
.link-btn .lb-arrow svg{width:10px;height:10px}

/* ── EYEBROW / SECTION HEADS ── */
.eyebrow{letter-spacing:.03em;color:var(--accent);font-size:.85rem;font-weight:700;margin-bottom:.6em;display:flex;align-items:center;gap:8px}
.eyebrow .ebar,.ebar-lt{display:none}
.sec-hdr{max-width:640px;margin-bottom:36px}
.stitle{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--text);margin-bottom:12px}
.ssub{color:var(--muted);font-size:1rem;max-width:640px;line-height:1.7}
.eyebrow-lt{color:var(--accent)}
.stitle-lt{color:var(--text)}
.ssub-lt{color:var(--muted)}

/* ── SECTIONS ── */
.section{padding:64px 0;border-bottom:1px solid var(--line)}
.sec-offwhite,.sec-dark{background:var(--surface)}

/* ── HERO (home) ── */
.hero{position:relative;padding:150px 0 0;border-bottom:1px solid var(--line);overflow:hidden}
.hbgs,.hbg,.hbg1,.hbg2,.hdots,.hline,.hl1,.hl2,.hglow,.vstrip{display:none}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;position:relative;z-index:1}
.hero-pill{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:.85rem;font-weight:700;margin-bottom:18px}
.hero-pill .pdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hero-h1{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--text);line-height:1.22;margin-bottom:18px;letter-spacing:-.01em}
.hw{display:inline}
.hw-accent{color:var(--accent)}
.hw-stroke{font-style:italic;color:var(--accent)}
.hero-p{color:var(--muted);font-size:1.02rem;line-height:1.75;max-width:560px;margin-bottom:14px}
.hero-need{font-size:1.05rem;line-height:1.6;color:var(--text);max-width:560px;margin-bottom:28px}
.hero-need strong{display:inline-block;margin-top:4px;font-size:1.15em;font-weight:800;color:var(--accent-dk)}
.hero-need-num{display:inline-block;font-weight:800;color:var(--accent);font-size:1.2em;margin:0 3px;animation:needPulse 3.6s ease infinite}
.hero-need-num:nth-of-type(2){animation-delay:.35s}
.hero-need-num:nth-of-type(3){animation-delay:.7s}
@keyframes needPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

.hero-right{position:relative}
.hero-visual{position:relative}

/* ── HERO PHOTO (right column) ──
   Tall editorial photo with a soft tint overlay and two floating
   credential badges, echoing the reference layout. ── */
.hero-photo-wrap{position:relative;max-width:520px;margin-left:auto}
.hero-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:11/12;background:var(--surface)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,rgba(30,58,95,.16) 0%,rgba(30,58,95,0) 45%,rgba(30,58,95,.10) 100%);pointer-events:none}

.hero-badge{position:absolute;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-md);animation:floatY 6s ease-in-out infinite}
.hero-badge-top{top:26px;left:-28px}
.hero-badge-bottom{bottom:30px;right:-24px;animation-delay:-3s}
.hb-ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hb-ic-green{background:var(--accent-soft);color:var(--accent)}
.hb-text{display:flex;flex-direction:column;line-height:1.3}
.hb-text strong{font-size:.86rem;font-weight:700;color:var(--text)}
.hb-text{font-size:.72rem;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.hero-badge{animation:none}}

.hv-chip1,.hv-chip2{position:static;display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:7px 14px;border-radius:999px;font-size:.76rem;font-weight:700;margin:0 8px 14px 0}
.hv-chip1 svg,.hv-chip2 svg{color:var(--accent);flex-shrink:0}
.hv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.hv-card-top{padding:22px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.hv-card-badge{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.hv-card-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--text)}
.hv-services-list{display:flex;flex-direction:column}
.hv-svc-item{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line)}
.hv-svc-item:last-child{border-bottom:none}
.hv-svc-hl{background:var(--accent-soft)}
.hv-svc-ic{width:40px;height:40px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.hv-svc-text{flex:1}
.hv-svc-name{font-size:.9rem;font-weight:700;color:var(--text)}
.hv-svc-sub{font-size:.76rem;color:var(--muted)}
.hv-svc-dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0}
.hv-svc-dot-active{background:var(--accent)}

/* ── STATS BAR ── */
.hstat-wrap{border-top:1px solid var(--line);background:var(--surface)}
.hstat-bar{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex}
.hst{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:34px 12px}
.hst-icon,.hst-underline{display:none}
.hst strong{font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:var(--accent);line-height:1;display:inline-flex;gap:2px}
.hst-sup{font-family:var(--font-display);font-size:1.2rem;color:var(--accent);font-weight:700}
.hst-lbl{font-size:.85rem;color:var(--muted);text-align:center}
.hst-sep{width:1px;background:var(--line);flex-shrink:0;margin:14px 0}

/* ── ABOUT-STYLE GRID ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.sbody{color:var(--muted);font-size:.98rem;line-height:1.75;margin-bottom:14px}
.chips,.badge-list{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.chip,.bl-item{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:8px 16px;font-size:.8rem;font-weight:600}
.chip svg,.bl-item svg{color:var(--accent);flex-shrink:0}

.ac-stack{display:flex;flex-direction:column;gap:14px;position:relative}
.ac{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.ac-offset{margin-left:24px}
.ac-ic{width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.ac-t{font-weight:700;color:var(--text);font-size:.92rem}
.ac-s{color:var(--muted);font-size:.78rem}
.fbadge{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.78rem;font-weight:700;color:var(--text);box-shadow:var(--shadow-sm);animation:fbFloat 5s ease-in-out infinite}
.fbb{align-self:flex-start}
.fba{align-self:flex-end;animation-delay:-2.5s}
@keyframes fbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.fbadge{animation:none}}

/* ── CTA BAND ── */
.cta-section{background:var(--surface);border-bottom:1px solid var(--line)}
.cta-card{max-width:720px;margin:0 auto;padding:56px 24px;text-align:center;position:relative}
.cta-glow,.cta-glow1,.cta-glow2{display:none}
.cta-badge{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:.82rem;font-weight:700;margin-bottom:14px;justify-content:center}
.cta-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cta-h{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--text);margin-bottom:14px}
.cta-p{color:var(--muted);font-size:1rem;line-height:1.7;margin-bottom:28px}
.cta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:26px;color:var(--muted);font-size:.82rem}
.cta-trust span{display:inline-flex;align-items:center;gap:6px;background:none;box-shadow:none;border:0;padding:0}
.cta-trust svg{color:var(--accent);flex-shrink:0}

/* ── SERVICES GRID ── */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:border-color .2s ease}
.svc:hover{border-color:var(--accent)}
.svc-no{font-family:var(--font-display);color:var(--accent);font-size:.85rem;font-weight:700;margin-bottom:10px}
.svc-ring{width:46px;height:46px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:14px}
.svc h3{font-size:1.05rem;margin-bottom:8px;color:var(--text)}
.svc p{color:var(--muted);font-size:.88rem;margin-bottom:14px;line-height:1.6}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px}
.svc-tags span{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.72rem;color:var(--muted)}

/* ── SECTORS ROW ── */
.sectors-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sector{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 16px;text-align:center;transition:border-color .2s ease}
.sector:hover{border-color:var(--accent)}
.sector-ic{width:48px;height:48px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.sector span{font-size:.85rem;font-weight:600;color:var(--text)}

/* ── CLIENTS MARQUEE + CONTACT CARDS ── */
.tick-outer{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--surface)}
.tick-inner{display:flex;gap:44px;animation:tickScroll 50s linear infinite;width:max-content}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tc{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;color:var(--text);font-size:1.05rem;white-space:nowrap}
.tc-gem{color:var(--accent);font-size:.75rem}
.cn{text-align:center;color:var(--muted);font-size:.92rem;margin-top:20px}

.crow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;text-align:left;transition:border-color .2s ease}
.ccard:hover{border-color:var(--accent)}
.ccard-shine{display:none}
.cc-ic{width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:14px}
.cc-lbl{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;font-weight:700}
.cc-val{font-size:.94rem;color:var(--text);font-weight:600;line-height:1.5}
.cc-val a{color:var(--accent)}

/* ── CONTENT GRID + CARDS ── */
.content-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.content-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.content-card h3{font-size:1.1rem;color:var(--text);margin-bottom:12px}
.content-card ul{display:flex;flex-direction:column;gap:10px;list-style:none}
.content-card li{display:flex;gap:9px;align-items:flex-start;font-size:.87rem;color:var(--muted);line-height:1.6}
.content-card li svg{flex-shrink:0;margin-top:2px;color:var(--accent)}
.side-cta{background:var(--accent);border-radius:var(--radius);padding:26px;color:#fff;margin-top:20px}
.side-cta h4{font-size:1.1rem;margin-bottom:8px}
.side-cta p{font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:16px;line-height:1.6}
.side-cta .cta-btn{background:#fff;color:var(--accent)}
.side-cta .cta-btn:hover{background:var(--surface)}

/* ── HUB GRID (industries/index, locations/index) ── */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;display:flex;flex-direction:column;transition:border-color .2s ease}
.hub-card:hover{border-color:var(--accent)}
.hub-card-top{padding:26px 24px 16px}
.hub-ic{width:48px;height:48px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.hub-card h3{font-size:1.05rem;color:var(--text);margin-bottom:8px}
.hub-card p{font-size:.85rem;color:var(--muted);line-height:1.6}
.hub-card-bot{margin-top:auto;padding:14px 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--accent)}

/* ── PROCESS STRIP (shared hub template) ── */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.process-step{padding:28px 22px;border-right:1px solid var(--line);position:relative}
.process-step:last-child{border-right:none}
.process-step::before{content:attr(data-n);position:absolute;top:12px;right:16px;font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--surface-2);z-index:0}
.process-ic{width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;z-index:1}
.process-step h4{font-size:1rem;color:var(--text);margin-bottom:6px;position:relative;z-index:1}
.process-step p{font-size:.8rem;color:var(--muted);line-height:1.55;position:relative;z-index:1}

/* ── DETAIL HERO (service/location detail pages) ── */
.dhero{position:relative;padding:150px 0 56px;border-bottom:1px solid var(--line)}
.dhero-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.dhero-l .breadcrumb{justify-content:flex-start;margin-bottom:18px}
.dhero-l h1{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--text);line-height:1.22;margin-bottom:14px}
.dhero-l p{color:var(--muted);font-size:.96rem;line-height:1.7;max-width:500px;margin-bottom:22px}
.dhero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.dhero-badges span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 15px;font-size:.76rem;font-weight:600}
.dhero-badges svg{color:var(--accent);flex-shrink:0}

.dfact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.dfact-card h4{font-size:1rem;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.dfact-card h4 .pdot{background:var(--accent);width:7px;height:7px;border-radius:50%}
.dfact-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.dfact-row:last-child{border-bottom:none}
.dfact-ic{width:36px;height:36px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dfact-text strong{display:block;color:var(--text);font-size:.85rem;font-weight:700}
.dfact-text span{color:var(--muted);font-size:.72rem}

/* ── CENTRED HERO (hub / about / contact / services / locations index) ── */
.phero{padding:150px 0 56px;border-bottom:1px solid var(--line);text-align:center}
.phero-in{max-width:720px;margin:0 auto;padding:0 24px}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb span{color:var(--line)}
.breadcrumb .bc-cur{color:var(--accent)}
.phero h1{font-size:clamp(2rem,4vw,2.8rem);color:var(--text);line-height:1.2;margin-bottom:14px}
.phero p{color:var(--muted);font-size:.98rem;line-height:1.7}
.phero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.phero-badges span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 15px;font-size:.76rem;font-weight:600}
.phero-badges svg{color:var(--accent);flex-shrink:0}

/* ── FEATURE GRID + WHY LIST (detail pages) ── */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.feature-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.feature-ic{width:36px;height:36px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-item span{font-size:.85rem;font-weight:600;color:var(--text)}

.why-row{display:flex;flex-direction:column}
.why-item{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.why-item:first-child{padding-top:0}
.why-item:last-child{border-bottom:none;padding-bottom:0}
.why-num{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--num-tint);line-height:1;flex-shrink:0;width:40px}
.why-text p{font-size:.89rem;color:var(--muted);line-height:1.7;margin:0}

/* ── LOCATION META ── */
.loc-meta{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.loc-meta .lm{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.8rem;color:var(--text);font-weight:600}
.loc-meta .lm svg{color:var(--accent);flex-shrink:0}

/* ── RELATED LINKS ── */
.related-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.related-row a{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.8rem;font-weight:600;color:var(--text);transition:border-color .2s ease,color .2s ease}
.related-row a:hover{border-color:var(--accent);color:var(--accent)}

/* ── FAQ ── */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.faq-item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.faq-item.open{border-color:var(--accent)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;text-align:left;padding:18px 20px;cursor:pointer;font-family:var(--font-display);font-size:.94rem;font-weight:600;color:var(--text)}
.faq-q .fq-ic{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease,color .25s ease;font-size:.9rem}
.faq-item.open .fq-ic{transform:rotate(45deg);background:var(--accent);color:#fff;border-color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-in{padding:0 20px 18px;color:var(--muted);font-size:.88rem;line-height:1.75}

/* ── GOOGLE REVIEW CTA ── */
.review-cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.review-cta::before{display:none}
.review-cta-l{flex:1;min-width:260px}
.review-stars{display:flex;gap:4px;margin-bottom:12px;color:#f5b400}
.review-cta h3{font-size:1.3rem;color:var(--text);margin-bottom:8px}
.review-cta p{color:var(--muted);font-size:.9rem;line-height:1.7;max-width:480px;margin:0}
.review-btn{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:#fff;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.86rem;transition:transform .2s ease,background .2s ease;flex-shrink:0;white-space:nowrap}
.review-btn:hover{background:var(--accent);transform:translateY(-2px)}

/* ── CONTACT PAGE: METHOD CARDS + OFFICE PANEL ── */
.cmethods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cmethod{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;color:inherit;transition:border-color .2s ease}
.cmethod:hover{border-color:var(--accent)}
.cmethod-ic{width:46px;height:46px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center}
.cmethod-wa .cmethod-ic{color:var(--wa)}
.cmethod h3{font-size:1.05rem;color:var(--text);margin:0}
.cmethod p{font-size:.85rem;color:var(--muted);line-height:1.6;margin:0}
.cmethod-val{font-size:.9rem;font-weight:700;color:var(--accent);margin-top:auto;display:inline-flex;align-items:center;gap:6px}

.office-panel{display:grid;grid-template-columns:1.1fr .9fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.office-panel-l{padding:40px}
.office-panel-l .op-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 15px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.office-panel-l h3{font-size:1.4rem;color:var(--text);margin-bottom:12px}
.office-panel-l p{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:20px}
.office-panel-l .op-addr{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px;font-size:.85rem;color:var(--text)}
.office-panel-l .op-addr svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.office-panel-r{background:var(--card);padding:40px;border-left:1px solid var(--line)}
.office-panel-r h4{color:var(--text);font-size:1.05rem;margin-bottom:16px}
.op-hours-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.op-hours-row:last-child{border-bottom:none}
.op-hours-row span:first-child{color:var(--text);font-weight:600}
.op-hours-row span:last-child{color:var(--muted)}

/* ── FOOTER ── */
.footer{background:var(--bg);border-top:1px solid var(--line)}
.footer-top{padding:56px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;align-items:start}
.f-logo{margin-bottom:12px;color:var(--text)}
.f-logo-img{height:36px;width:auto;object-fit:contain}
.f-addr{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:.85rem;max-width:270px;line-height:1.55;margin-bottom:16px}
.f-addr svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.f-quickrow{display:flex;gap:10px}
.f-quick-btn{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.f-quick-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}
.f-quick-btn.f-quick-wa:hover{background:var(--wa);border-color:var(--wa)}
.f-col-h{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;font-weight:700}
.f-col a{display:block;color:var(--muted);font-size:.88rem;margin-bottom:10px;transition:color .2s ease}
.f-col a:hover{color:var(--accent)}
.footer-bot{border-top:1px solid var(--line);padding:20px 0}
.footer-bot p{color:var(--muted);font-size:.82rem}

/* ── FLOATING UI: back-to-top / whatsapp / mobile bar ── */
.totop{position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;background:var(--accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,background .2s ease;z-index:60}
.totop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.totop:hover{background:var(--accent-dk)}

.wa-float{position:fixed;right:22px;bottom:92px;width:56px;height:56px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);z-index:60;transition:transform .2s ease}
.wa-float:hover{transform:scale(1.06)}
.wa-ping{position:absolute;inset:0;border-radius:50%;background:var(--wa);opacity:.5;animation:waPing 2s ease-out infinite}
@keyframes waPing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.wa-tip{position:absolute;right:64px;background:var(--text);color:#fff;padding:6px 12px;border-radius:8px;font-size:.76rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.wa-float:hover .wa-tip{opacity:1}

/* mobile action bar: see "MOBILE ACTION DOCK" at end of file */

/* ==========================================================================
   RESPONSIVE
   Breakpoints: >=1600 big/second screens, 1025-1599 laptop/desktop,
   901-1024 tablet landscape, 601-900 tablet portrait, <=600 phones,
   <=380 small phones. Every grid in the file is addressed at each
   stage so nothing jumps straight from a multi-column layout to a
   cramped single column without an intermediate step.
   ========================================================================== */

/* ── BIG / SECOND SCREENS (65"-100" class displays, 4K+ desktops) ──
   These render the page at normal desktop CSS widths (the OS handles
   physical scaling), so the main risk is content looking lost in a sea
   of whitespace at viewing distance. Widen the reading column slightly
   and step up type/spacing so it still reads comfortably from a couch. */
@media(min-width:1600px){
  :root{--maxw:1360px}
  body{font-size:17px}
  .hero-h1{font-size:clamp(2.1rem,2.6vw,2.9rem)}
  .stitle,.cta-h{font-size:clamp(1.9rem,2.6vw,2.6rem)}
  .phero h1{font-size:clamp(2.4rem,3.2vw,3.4rem)}
  .hero{padding-top:168px}
  .phero,.dhero{padding-top:168px}
}
@media(min-width:1900px){
  :root{--maxw:1480px}
}

/* ── TABLET LANDSCAPE / SMALL LAPTOP ── */
@media(max-width:1024px){
  .hero-inner,.dhero-in{grid-template-columns:1fr;gap:36px}
  .about-grid,.content-grid{grid-template-columns:1fr;gap:32px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .sectors-row{grid-template-columns:repeat(3,1fr)}
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .crow,.cmethods{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .process-row{grid-template-columns:1fr 1fr}
  .process-step{border-bottom:1px solid var(--line)}
  .process-step:nth-child(2n){border-right:none}
  .office-panel{grid-template-columns:1fr}
  .office-panel-r{border-left:none;border-top:1px solid var(--line)}
  .ac-offset{margin-left:0}
  .hero-right{max-width:520px;margin:0 auto}
  .hero-photo-wrap{margin:0 auto}
}

/* ── TABLET PORTRAIT (iPad-style, 768-900) ── */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .nav-wrap{padding:0 18px}
  .feature-grid{grid-template-columns:1fr}
  .dhero-l h1{font-size:clamp(1.7rem,4vw,2.3rem)}
  .cmethods{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
}

/* ── PHONES (<=600) ── */
@media(max-width:600px){
  .wrap{padding:0 18px}
  .nav-wrap{padding:0 16px}
  html{font-size:15px}
  .hero{padding-top:128px}
  .hero-photo{aspect-ratio:4/3}
  .hero-badge-top{left:10px;top:14px;padding:9px 13px}
  .hero-badge-bottom{right:10px;bottom:14px;padding:9px 13px}
  .hb-text strong{font-size:.8rem}
  .phero,.dhero{padding-top:128px}
  .section{padding:48px 0}
  .hero-inner,.dhero-in,.phero-in{padding-left:18px;padding-right:18px}
  .svc-grid,.sectors-row,.crow,.cmethods,.feature-grid,.hub-grid{grid-template-columns:1fr}
  .hstat-bar{flex-direction:column;padding:0 20px}
  .hst{flex-direction:row;justify-content:flex-start;gap:14px;padding:18px 4px;border-bottom:1px solid var(--line);width:100%}
  .hst:last-child{border-bottom:none}
  .hst-sep{display:none}
  .hst-lbl{text-align:left}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .review-cta{flex-direction:column;text-align:center;padding:30px 22px}
  .review-cta-l{min-width:0}
  .review-stars{justify-content:center}
  .review-cta p{margin:0 auto}
  .review-btn{width:100%;justify-content:center}
  .nav-wa-btn,.wa-float{display:none}
  .office-panel-l,.office-panel-r{padding:26px 20px}
  .content-card,.hv-card-top,.hv-svc-item,.cmethod,.dfact-card{padding-left:16px;padding-right:16px}
  .ac-stack{align-items:stretch}
  .ac-offset{margin-left:0}
  .fbadge{align-self:center !important;margin:2px 0}
  .fbb{order:-1}
  .chips,.badge-list,.dhero-badges,.phero-badges,.loc-meta{justify-content:flex-start}
  .cta-card{padding:44px 20px}
  .cta-trust{gap:10px 16px}
  .process-row{grid-template-columns:1fr}
  .process-step{border-right:none}
  .footer-grid{grid-template-columns:1fr}
  .hero-cta,.cta-btn{width:100%;justify-content:center;text-align:center}
  .hero-feat-row{justify-content:flex-start}
}

/* ── SMALL PHONES (<=380) ── */
@media(max-width:380px){
  .hero-h1{font-size:1.7rem}
  .stitle{font-size:1.4rem}
  .hv-card-top,.hv-svc-item{padding-left:16px;padding-right:16px}
  .dhero-badges span,.phero-badges span,.chip,.bl-item{font-size:.7rem;padding:6px 12px}
}

/* ── GLOBAL OVERFLOW SAFETY NET ──
   Belt-and-braces: nothing on the page — however it's laid out — is
   ever allowed to force horizontal scroll on a narrow viewport. */
img,svg,video,iframe,table{max-width:100%}
.wrap,.nav-wrap,.hero-inner,.dhero-in,.phero-in,section,.footer-grid,.hstat-bar{min-width:0}
* {min-width:0}
.nav-links,.hero-h1,.stitle,.phero h1,.dhero-l h1{min-width:0;overflow-wrap:break-word}

/* ==========================================================================
   INTERACTIVE POLISH — hover choreography, icon micro-interactions,
   staggered reveals, cursor-spotlight, idle motion. Applied on top of the
   base theme so every clickable/hoverable surface feels considered.
   ========================================================================== */

/* Smooth, consistent base transitions for anything interactive */
a,button,.svc,.sector,.ccard,.hub-card,.content-card,.cmethod,.feature-item,
.ac,.faq-item,.related-row a,.f-col a,.svc-ring,.sector-ic,.hub-ic,.cc-ic,
.cmethod-ic,.feature-ic,.process-ic,.ac-ic,.dfact-ic{
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,
             border-color .25s ease,background .25s ease,color .25s ease;
}

/* Focus ring for keyboard users — small craft detail */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Nav links: underline grows from centre on hover */
.nav-links>a,.nav-item>button{position:relative}
.nav-links>a::after,.nav-item>button::after{content:'';position:absolute;left:50%;bottom:-2px;width:0;height:2px;background:var(--accent);transition:width .25s ease,left .25s ease}
.nav-links>a:hover::after,.nav-links>a.active::after,.nav-item>button:hover::after,.nav-item>button[aria-expanded="true"]::after{width:100%;left:0}
.nav-logo:hover .nav-logo-img{transform:scale(1.04)}

/* Buttons: icon nudges forward on hover */
.hero-cta svg,.cta-btn svg,.review-btn svg{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.hero-cta:hover svg,.cta-btn:hover svg{transform:translateX(4px)}
.review-btn:hover svg{transform:scale(1.12) rotate(-4deg)}
.link-btn .lb-arrow svg{transition:transform .25s ease}
.nav-wa-btn svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.nav-wa-btn:hover svg{transform:rotate(-10deg) scale(1.1)}

/* Card lift + icon pop on hover, applied broadly */
.ac:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.feature-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.related-row a:hover{transform:translateY(-2px)}
.dfact-row:hover .dfact-ic{background:var(--accent);color:#fff;transform:scale(1.08)}

/* Underline-grow link style for footer + related chips */
.f-col a{position:relative;width:fit-content}
.f-col a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .25s ease}
.f-col a:hover::after{width:100%}

/* Marquee pauses politely when you hover to read a name */
.tick-outer:hover .tick-inner{animation-play-state:paused}
.tc{transition:color .2s ease,transform .2s ease}
.tc:hover{color:var(--accent);transform:translateY(-2px)}

/* Stat numbers: soft pop when they finish counting into view */
.hst{transition:background .3s ease}
.hst:hover{background:var(--card)}
.hst:hover strong{color:var(--accent-dk)}

/* Hero visual card: gentle idle float, feels alive without being busy */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hv-card{animation:floatY 6s ease-in-out infinite}
.hv-card:hover{animation-play-state:paused}

/* Badge / chip hover lift */
.chip:hover,.bl-item:hover,.phero-badges span:hover,.dhero-badges span:hover{
  transform:translateY(-2px);border-color:var(--accent);color:var(--accent)
}

/* Entrance animation for above-the-fold hero content (no JS needed, always in view) */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-pill,.hero-p,.hero-need,.hero-cta,.hero-feat-row{animation:heroIn .7s cubic-bezier(.16,1,.3,1) both}
.hero-pill{animation-delay:.05s}
.hero-p{animation-delay:.28s}
.hero-need{animation-delay:.36s}
.hero-cta{animation-delay:.46s}
.hero-feat-row{animation-delay:.56s}
.hero-visual,.hero-photo-wrap{animation:heroIn .8s cubic-bezier(.16,1,.3,1) .3s both}

/* Headline lines slide up into place, one after another (--i set inline per line) */
.hw{display:block;animation:hwReveal .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.15s + var(--i,0)*.12s)}
@keyframes hwReveal{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}

/* Trust-dot pulse: pill dot + CTA-band dot gently ping to draw the eye */
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(30,58,95,.35)}70%{box-shadow:0 0 0 7px rgba(30,58,95,0)}}
.hero-pill .pdot,.cta-dot{animation:dotPulse 2.2s ease infinite}

/* Idle float for the small floating chips beside the hero visual card */
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hv-chip1{animation:chipFloat 4.5s ease-in-out infinite}
.hv-chip2{animation:chipFloat 4.5s ease-in-out infinite;animation-delay:-2.25s}

/* Click ripple (spawned by script.js at the pointer position) */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rippleOut .65s ease-out forwards;pointer-events:none}
@keyframes rippleOut{to{transform:scale(2.6);opacity:0}}

/* Counter finishing pop + confetti-style particle burst */
@keyframes cntPop{0%{transform:scale(1)}35%{transform:scale(1.18)}65%{transform:scale(.94)}100%{transform:scale(1)}}
.cnt.cnt-pop{display:inline-flex;animation:cntPop .48s cubic-bezier(.34,1.56,.64,1)}
.hst{position:relative}
.hst-ptcl{position:absolute;border-radius:50%;pointer-events:none;top:52%;left:50%;transform:translate(-50%,-50%);animation:ptclBurst .75s ease-out forwards}
@keyframes ptclBurst{0%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .hw{animation:none;opacity:1;transform:none}
  .hero-pill .pdot,.cta-dot,.hv-chip1,.hv-chip2,.fbadge{animation:none}
}
.phero-in>*,.dhero-l>*{animation:heroIn .6s cubic-bezier(.16,1,.3,1) both}
.phero-in>*:nth-child(1){animation-delay:.02s}
.phero-in>*:nth-child(2){animation-delay:.1s}
.phero-in>*:nth-child(3){animation-delay:.18s}
.phero-in>*:nth-child(4){animation-delay:.26s}

/* Staggered grid entrance — cards further down the row/column settle in slightly later.
   Scoped to :not(.visible) so the delay only affects the initial reveal, never hover. */
.svc-grid>.svc:nth-child(2):not(.visible),.sectors-row>.sector:nth-child(2):not(.visible),.hub-grid>.hub-card:nth-child(2):not(.visible),.crow>.ccard:nth-child(2):not(.visible),.cmethods>.cmethod:nth-child(2):not(.visible),.feature-grid>.feature-item:nth-child(2):not(.visible){transition-delay:.08s}
.svc-grid>.svc:nth-child(3):not(.visible),.sectors-row>.sector:nth-child(3):not(.visible),.hub-grid>.hub-card:nth-child(3):not(.visible),.crow>.ccard:nth-child(3):not(.visible),.cmethods>.cmethod:nth-child(3):not(.visible),.feature-grid>.feature-item:nth-child(3):not(.visible){transition-delay:.16s}
.svc-grid>.svc:nth-child(4):not(.visible),.sectors-row>.sector:nth-child(4):not(.visible){transition-delay:.24s}
.sectors-row>.sector:nth-child(5):not(.visible){transition-delay:.32s}

/* ══════════════════════════════════════════════════════════════════
   3D TILT-CARD SYSTEM
   Applied via script.js to the site's card-style components. Mouse
   position drives --rx/--ry/--mx/--my; CSS turns those into a real
   perspective tilt, a cursor-tracking spotlight, and icon depth pop.
   Falls back to a plain lift on touch devices (no pointer to track).
   ══════════════════════════════════════════════════════════════════ */
.tilt3d{
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .45s cubic-bezier(.2,.9,.25,1),border-color .3s ease;
  will-change:transform;
}
.tilt3d:hover{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-10px) translateZ(0) scale(1.02);
  box-shadow:0 30px 54px -20px rgba(15,27,45,.32),0 10px 22px -10px rgba(15,27,45,.14);
  border-color:var(--accent);
  z-index:4;
  transition:transform .12s linear,box-shadow .35s ease,border-color .3s ease;
}
.tilt3d::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(30,58,95,.16),transparent 68%);
  transition:opacity .3s ease;z-index:0;
}
.tilt3d:hover::after{opacity:1}
.tilt3d::before{
  content:'';position:absolute;inset:-1px;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  background-size:220% 220%;background-position:120% -20%;
  transition:opacity .3s ease;
}
.tilt3d:hover::before{opacity:1;animation:tiltSheen 1.1s ease forwards}
@keyframes tiltSheen{from{background-position:120% -20%}to{background-position:-20% 120%}}
.tilt3d>*{position:relative;z-index:1}
/* .process-step already owns ::before for its big number watermark — keep
   that instead of the sheen on this one component */
.process-step.tilt3d::before{content:attr(data-n);position:absolute;inset:auto;top:12px;right:16px;font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--surface-2);z-index:0;background:none;opacity:1;animation:none}

/* Icons lift toward the cursor in their own depth layer */
.svc .svc-ring,.sector .sector-ic,.hub-card .hub-ic,.ccard .cc-ic,.cmethod .cmethod-ic,
.process-step .process-ic,.hv-svc-item .hv-svc-ic,.dfact-card .dfact-ic,.feature-item .feature-ic{
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s ease,color .3s ease,border-color .3s ease;
}
.tilt3d:hover .svc-ring,.tilt3d:hover .sector-ic,.tilt3d:hover .hub-ic,.tilt3d:hover .cc-ic,
.tilt3d:hover .cmethod-ic,.tilt3d:hover .process-ic,.tilt3d:hover .hv-svc-ic,.tilt3d:hover .dfact-ic,
.tilt3d:hover .feature-ic{
  background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateZ(32px) scale(1.14) rotate(-8deg);
}
.cmethod-wa:hover .cmethod-ic{background:var(--wa);color:#fff}

@media(hover:none),(pointer:coarse){
  .tilt3d{transform:none !important}
  .tilt3d:hover{transform:translateY(-4px) !important;box-shadow:var(--shadow-md)}
  .tilt3d::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tilt3d,.tilt3d:hover{transition:none}
  .tilt3d::before{display:none}
}

/* ── Magnetic buttons: nudge toward the cursor within a small radius ── */
.magnet{translate:var(--mgx,0) var(--mgy,0);transition:translate .25s cubic-bezier(.2,.9,.25,1)}
.magnet:active{translate:var(--mgx,0) var(--mgy,0) scale(.97)}

/* ── Ambient tilt on the hero delivery card (drifts with the cursor across the whole hero) ── */
.hv-card-top{transition:rotate .5s cubic-bezier(.2,.9,.25,1)}
@media(hover:hover){.hv-card-top{rotate:var(--hrx,0deg)}}

@media(prefers-reduced-motion:reduce){
  .hv-card{animation:none}
  .hero-pill,.hero-p,.hero-need,.hero-cta,.hero-feat-row,.hero-visual,.phero-in>*,.dhero-l>*{animation:none;opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   BLOG — listing grid (card style) + single article (editorial style)
   ══════════════════════════════════════════════════════════════════ */

/* -- listing grid cards -- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;display:flex;flex-direction:column;transition:border-color .2s ease}
.blog-card:hover{border-color:var(--accent)}
.blog-card-media{aspect-ratio:16/10;background:var(--surface);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}
.blog-card-media svg{width:64%;height:64%}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.blog-tag{display:inline-flex;align-self:flex-start;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:700;border-radius:999px;padding:5px 12px;margin-bottom:12px}
.blog-card h3{font-size:1.05rem;color:var(--text);margin-bottom:8px;line-height:1.4}
.blog-card p{font-size:.86rem;color:var(--muted);line-height:1.65;margin-bottom:16px}
.blog-card-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:.76rem;color:var(--muted)}
.blog-date{display:inline-flex;align-items:center;gap:6px}
.blog-date svg{color:var(--accent);flex-shrink:0}
.blog-readmore{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-weight:700}
.blog-readmore svg{transition:transform .2s ease}
.blog-card:hover .blog-readmore svg{transform:translateX(3px)}

/* empty-state note (shown when a listing has room to grow) */
.blog-more-note{text-align:center;color:var(--muted);font-size:.86rem;margin-top:8px}

/* -- pagination -- */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:.85rem;font-weight:700;transition:background .2s ease,color .2s ease,border-color .2s ease}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.page-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.page-btn.page-ellipsis{border:none;background:none;color:var(--muted);min-width:auto;padding:0 4px;pointer-events:none}
.page-btn svg{flex-shrink:0}

/* -- single article header -- */
.article-hero{padding:150px 0 32px;border-bottom:none}
.article-hero-in{max-width:760px;margin:0 auto;padding:0 24px}
.article-hero .breadcrumb{justify-content:flex-start;margin-bottom:18px}
.article-tag{display:inline-flex;background:var(--accent-soft);color:var(--accent);font-size:.76rem;font-weight:700;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.article-hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--text);line-height:1.25;margin-bottom:18px}
.article-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;color:var(--muted);font-size:.85rem;padding-bottom:20px;border-bottom:1px solid var(--line)}
.article-meta-row span{display:inline-flex;align-items:center;gap:7px}
.article-meta-row svg{color:var(--accent);flex-shrink:0}
.article-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0}

/* -- share row (used both near the top meta, and reusable elsewhere) -- */
.share-row{display:flex;align-items:center;gap:12px}
.share-row-top{margin-top:16px}
.share-label{font-size:.82rem;font-weight:700;color:var(--muted);margin-right:2px}
.share-btn{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;cursor:pointer;position:relative}
.share-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}
.share-btn .copy-tip{position:absolute;top:-32px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:.7rem;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.share-btn.copied .copy-tip{opacity:1}

/* -- article banner photo -- */
.article-banner{max-width:900px;margin:32px auto 0;padding:0 24px}
.article-banner-in{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line);aspect-ratio:16/8.5}
.article-banner-in img{width:100%;height:100%;object-fit:cover;display:block}

/* -- article body (editorial, narrower + relaxed type) -- */
.article-body{max-width:760px;margin:0 auto;padding:44px 24px 0}
.article-body h2{font-size:1.35rem;color:var(--text);margin:36px 0 14px}
.article-body h3{font-size:1.1rem;color:var(--text);margin:26px 0 10px}
.article-body p{font-size:1rem;line-height:1.85;color:var(--text);margin-bottom:18px}
.article-body p.lead{font-size:1.1rem;color:var(--muted);line-height:1.75}
.article-checklist{display:flex;flex-direction:column;gap:12px;margin:20px 0 28px;padding:0;list-style:none}
.article-checklist li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:.94rem;line-height:1.6;color:var(--text)}
.article-checklist li svg{color:var(--accent);flex-shrink:0;margin-top:3px}
.article-checklist li strong{display:block;margin-bottom:2px}
.article-pullquote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:28px 0;font-size:1.1rem;color:var(--accent-dk);font-family:var(--font-display);font-weight:600;line-height:1.55}
.article-figure{margin:28px 0}
.article-figure img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);display:block}
.article-figure figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:10px}
.article-cta{background:var(--accent);border-radius:var(--radius-lg);padding:30px 32px;color:#fff;margin:36px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.article-cta h4{font-size:1.15rem;margin-bottom:4px}
.article-cta p{color:rgba(255,255,255,.78);font-size:.88rem;margin:0}
.article-cta .cta-btn{background:#fff;color:var(--accent);flex-shrink:0}
.article-cta .cta-btn:hover{background:var(--surface)}

/* -- back to blog button -- */
.back-to-blog{max-width:760px;margin:0 auto;padding:32px 24px 56px;display:flex}
.back-to-blog-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.88rem;transition:background .2s ease,color .2s ease,transform .2s ease}
.back-to-blog-btn:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.back-to-blog-btn svg{transition:transform .2s ease}
.back-to-blog-btn:hover svg{transform:translateX(-3px)}

@media(max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  .article-hero{padding-top:118px}
  .article-cta{flex-direction:column;align-items:flex-start;text-align:left}
  .article-cta .cta-btn{width:100%;justify-content:center}
  .share-row{flex-wrap:wrap}
  .article-banner-in{aspect-ratio:4/3}
}

/* ── SCROLL REVEAL ──────────────────────────────────────────────────
   Elements start slightly offset and settle into place as they enter
   the viewport. Direction is set per element with data-dir (up is the
   default); the stagger delay is set by script.js as --d so items in a
   row arrive one after another instead of all at once.
   Upgraded to a subtle 3D tilt (perspective + rotateX/rotateY) rather
   than a flat slide, so cards feel like they're settling into place
   on the page rather than just sliding up — still restrained and flat
   in its finished state, matching the rest of the theme. ── */
.reveal,.svc,.sector,.ccard,.hub-card,.blog-card,.feature-item,.content-card,
.cmethod,.process-step,.ac,.why-item,.faq-item,.dfact-card,.loc-meta .lm,
.article-figure,.article-checklist li,.review-cta,.office-panel,.hstat-bar .hst{
  opacity:0;transform:perspective(1000px) translateY(26px) rotateX(9deg);
  transform-origin:50% 100%;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .2s ease,box-shadow .3s ease;
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
.reveal.visible,.svc.visible,.sector.visible,.ccard.visible,.hub-card.visible,
.blog-card.visible,.feature-item.visible,.content-card.visible,.cmethod.visible,
.process-step.visible,.ac.visible,.why-item.visible,.faq-item.visible,
.dfact-card.visible,.loc-meta .lm.visible,.article-figure.visible,
.article-checklist li.visible,.review-cta.visible,.office-panel.visible,
.hstat-bar .hst.visible{opacity:1;transform:perspective(1000px) rotateX(0) translateY(0)}

/* directional variants — left/right swing in with a slight Y-axis tilt
   instead of a flat horizontal slide, scale settles from a touch of depth */
[data-dir="left"]{transform:perspective(1000px) translateX(-34px) rotateY(-10deg)}
[data-dir="right"]{transform:perspective(1000px) translateX(34px) rotateY(10deg)}
[data-dir="scale"]{transform:perspective(1000px) scale(.94) rotateX(5deg)}
[data-dir="left"].visible,[data-dir="right"].visible,[data-dir="scale"].visible{transform:perspective(1000px) translateX(0) rotateY(0) scale(1) rotateX(0)}

/* section headings drift up as their section arrives */
.sec-hdr,.cta-card>*,.phero-badges{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}

/* images inside revealed blocks ease in from a slight zoom, and — on top of
   the parent card's own 3D tilt — "curtain-reveal" upward via clip-path so
   the photo itself feels like it's rising into view rather than just fading */
.article-figure img,.blog-card-media img{
  transition:transform .9s cubic-bezier(.16,1,.3,1),clip-path .9s cubic-bezier(.16,1,.3,1);
  transition-delay:.08s;
  clip-path:inset(0 0 0% 0);
}
.article-figure:not(.visible) img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.blog-card:not(.visible) .blog-card-media img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.blog-card:hover .blog-card-media img{transform:scale(1.04)}

@media(prefers-reduced-motion:reduce){
  .reveal,.svc,.sector,.ccard,.hub-card,.blog-card,.feature-item,.content-card,
  .cmethod,.process-step,.ac,.why-item,.faq-item,.dfact-card,.loc-meta .lm,
  .article-figure,.article-checklist li,.review-cta,.office-panel,.hstat-bar .hst{
    opacity:1;transform:none;transition:none
  }
  .article-figure img,.blog-card-media img{clip-path:none;transform:none;transition:none}
  .blog-card:hover .blog-card-media img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   404 PAGE — hero + "Catch the Boxes" interactive game
   ══════════════════════════════════════════════════════════════════ */
.nf-hero{padding:150px 0 56px;border-bottom:1px solid var(--line);overflow:hidden;position:relative;background:
  repeating-linear-gradient(135deg, var(--surface) 0px, var(--surface) 26px, var(--card) 26px, var(--card) 52px)}
.nf-hero-in-centered{max-width:720px;margin:0 auto;padding:0 24px;text-align:center;display:flex;flex-direction:column;align-items:center}

/* -- the "404" mark: two 4s with a spinning wheel standing in for the 0 -- */
.nf-mark{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,14px);margin-bottom:6px}
.nf-digit{font-family:var(--font-display);font-weight:800;font-size:clamp(4.2rem,17vw,8.5rem);line-height:1;color:var(--text);letter-spacing:-.02em}
.nf-wheel{width:clamp(3.2rem,13vw,6.4rem);height:clamp(3.2rem,13vw,6.4rem);display:inline-flex;animation:nfSpin 5s linear infinite}
.nf-wheel svg{width:100%;height:100%}
@keyframes nfSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.nf-wheel{animation:none}}

.nf-mark-caption{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:.85rem;font-weight:700;background:var(--accent-soft);border-radius:999px;padding:8px 18px;margin-bottom:24px}
.nf-crate{display:inline-flex;color:var(--accent)}

.nf-h1{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--text);line-height:1.28;margin:0 0 14px;max-width:600px}
.nf-h1 em{font-style:italic;color:var(--accent)}
.nf-p{color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:460px;margin:0 auto 30px}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;justify-content:center}

.nf-contact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);width:100%;max-width:560px}
.nf-contact-label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:14px}
.nf-contact-row{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center}
.nf-contact-item{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-size:.88rem;font-weight:600;transition:color .2s ease}
.nf-contact-item:hover{color:var(--accent)}
.nf-contact-ic{width:30px;height:30px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nf-contact-ic-wa{color:var(--wa)}

/* -- game section -- */
.nf-game-section{padding:64px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.catch-game{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm)}
.cg-hud{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 16px}
.cg-stat{display:flex;flex-direction:column;align-items:center;min-width:64px}
.cg-stat-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.cg-stat-val{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--accent)}
.cg-lives{display:flex;gap:6px}
.cg-life{width:16px;height:16px;border-radius:4px;background:#e3ab6d;border:1px solid #b87d43;transition:opacity .2s ease,transform .2s ease}
.cg-life.lost{opacity:.18;transform:scale(.7)}

.cg-stage{position:relative;height:340px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--line);touch-action:none;cursor:grab}
.cg-stage:active{cursor:grabbing}
.cg-worker{position:absolute;bottom:6px;left:50%;width:60px;height:66px;margin-left:-30px;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(15,27,45,.12))}
.cg-worker svg{width:100%;height:100%}
.cg-box{position:absolute;width:30px;height:26px;background:linear-gradient(180deg,#e3ab6d,#b87d43);border:1px solid #9a6a37;border-radius:4px;pointer-events:none}
.cg-box::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.55);transform:translateY(-1px)}
.cg-pop{position:absolute;font-family:var(--font-display);font-weight:700;color:var(--accent);font-size:.85rem;pointer-events:none;animation:cgPopFloat .6s ease-out forwards}
@keyframes cgPopFloat{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-26px)}}

.cg-overlay{position:absolute;inset:0;background:rgba(255,255,255,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.cg-overlay.hidden{display:none}
.cg-overlay-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text);margin:0}
.cg-overlay-sub{color:var(--muted);font-size:.9rem;margin:-8px 0 0}
.cg-hint{text-align:center;color:var(--muted);font-size:.78rem;margin:14px 0 2px}

@media(max-width:1024px){
  .nf-hero{padding-top:130px}
}
@media(max-width:600px){
  .nf-hero{padding-top:118px}
  .nf-actions{flex-direction:column;align-items:stretch}
  .nf-contact-row{flex-direction:column;align-items:center}
  .nf-actions .hero-cta,.nf-actions .link-btn{width:100%;justify-content:center}
  .cg-stage{height:300px}
}

/* ==========================================================================
   FINAL POLISH — motion layer (all disabled under prefers-reduced-motion)
   ========================================================================== */
/* Everything behind the gate pass waits, then plays its entrance as it clears */
.loader:not(.is-done)~*,.loader:not(.is-done)~* *{animation-play-state:paused}

/* Scroll progress: a navy "punch" marker rides the tip of the bar */
.scroll-progress{overflow:visible}
.scroll-progress::after{content:'';position:absolute;right:-5px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(30,58,95,.2);transition:opacity .2s ease}
.scroll-progress[style*="width: 0%"]::after{opacity:0}

/* Nav: underline grows from the centre */
.nav-links>a,.nav-item>a{position:relative}
.nav-links>a::after,.nav-item>a::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;background:var(--accent);transform:translateX(-50%);transition:width .3s var(--ease)}
.nav-links>a:hover::after,.nav-item>a:hover::after,.nav-links>a.active::after{width:100%}

/* Hero: a blueprint dot-grid that only appears under a soft cursor "flashlight" */
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(30,58,95,.2) 1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(340px circle at var(--hx,72%) var(--hy,28%),#000,transparent 72%);mask-image:radial-gradient(340px circle at var(--hx,72%) var(--hy,28%),#000,transparent 72%);pointer-events:none}

/* Hero photo unveils top-down while the image settles from a slight zoom */
@keyframes photoWipe{from{clip-path:inset(0 0 100% 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes photoZoom{from{transform:scale(1.18)}to{transform:scale(1)}}
.hero-photo{animation:photoWipe 1.1s var(--ease) .35s backwards}
.hero-photo img{animation:photoZoom 1.7s var(--ease) .35s backwards}

/* Buttons: light sweep across the pill on hover */
.hero-cta,.cta-btn{position:relative;overflow:hidden}
.hero-cta::after,.cta-btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:rgba(255,255,255,.22);transform:skewX(-20deg);transition:left .6s var(--ease);pointer-events:none}
.hero-cta:hover::after,.cta-btn:hover::after{left:130%}
.hero-cta svg,.cta-btn svg{transition:transform .3s var(--ease)}
.hero-cta:hover svg,.cta-btn:hover svg{transform:translateX(4px)}

/* Section headings: words rise out of a mask, accent word gets a drawn underline */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .18em .16em;margin:0 -.18em -.16em}
.split .w>span{display:inline-block;transform:translateY(112%);transition:transform .85s var(--ease);transition-delay:calc(var(--wi,0)*45ms)}
.split.in .w>span{transform:none}
/* accent word: same italic look as before, underlined by a drawn navy line (no pseudo-element, so nothing can clip) */
.stitle em,.cta-h em{background:linear-gradient(var(--accent),var(--accent)) 0 96%/0% .07em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.06em;transition:background-size 1s var(--ease) .5s}
.stitle.in em,.cta-h.in em{background-size:100% .07em}

/* Process steps get ticked off like the gate-pass checklist */
.process-step{position:relative}
.ps-tick{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .3s ease .5s,background-color .3s ease .5s}
.ps-tick svg{width:12px;height:12px;overflow:visible}
.ps-tick path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .45s ease calc(var(--d,0s) + .6s)}
.process-step.visible .ps-tick{border-color:var(--accent);background:var(--accent-soft)}
.process-step.visible .ps-tick path{stroke-dashoffset:0}

/* The red seal returns on the call-to-action band */
.cta-seal{position:absolute;top:6px;right:6px;width:104px;height:104px;opacity:0;transform:rotate(-26deg) scale(1.6);transition:opacity .35s ease,transform .55s cubic-bezier(.34,1.56,.64,1) .35s;pointer-events:none}
.cta-card.in .cta-seal{opacity:.9;transform:rotate(-9deg) scale(1)}
.cta-seal svg{width:100%;height:100%}
.cta-seal circle{fill:none;stroke:#C4432B}
.cta-seal text{fill:#C4432B;font-weight:800;text-anchor:middle;letter-spacing:.06em}
@media(max-width:820px){.cta-seal{display:none}}

/* Soft page exit before navigating (arrival is handled by the gate pass) */
body>*{transition:opacity .22s ease}
body.is-leaving>*:not(.nav):not(.loader):not(.scroll-progress){opacity:0}

@media(prefers-reduced-motion:reduce){
  .hero::before{display:none}
  .hero-photo,.hero-photo img{animation:none}
  .split .w>span{transform:none;transition:none}
  .stitle em,.cta-h em{background-size:100% .07em;transition:none}
  .ps-tick path{stroke-dashoffset:0;transition:none}
  .cta-seal{opacity:.9;transform:rotate(-9deg);transition:none}
  body>*{transition:none}
}

/* ==========================================================================
   SCROLL TRANSITIONS — scroll-linked motion inspired by the Maven reference
   pages: curtain wipe, sheets that settle as you arrive, hero that recedes,
   lines that draw themselves, text that sharpens into focus. Navy only.
   ========================================================================== */
/* 1 · Loader leaves like a curtain being drawn upward */
.loader{clip-path:inset(0 0 0 0);transition:clip-path .85s cubic-bezier(.77,0,.18,1)}
.loader.is-done{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.loader.is-done .gp-card{transform:translateY(-34px) scale(.97);opacity:0;animation:none;transition:transform .6s cubic-bezier(.77,0,.18,1),opacity .45s ease}

/* 2 · Hero recedes as you scroll away (progress --hp is set by script) */
.hero-left{transform:translateY(calc(var(--hp,0)*-54px)) scale(calc(1 - var(--hp,0)*.06));transform-origin:50% 0;opacity:calc(1 - var(--hp,0)*.9);will-change:transform,opacity}
.hero-badge-top{translate:0 calc(var(--hp,0)*-90px)}
.hero-badge-bottom{translate:0 calc(var(--hp,0)*70px)}

/* 3 · Sheets: every section settles onto the page — it starts a touch smaller
   with rounded top corners and a shadow, then flattens as it fills the view */
.sheet{position:relative}
.sheet.sheet-on{scale:calc(.955 + var(--sk,1)*.045);transform-origin:50% 0;border-radius:calc((1 - var(--sk,1))*44px) calc((1 - var(--sk,1))*44px) 0 0;box-shadow:0 -22px 44px -20px rgba(15,27,45,calc((1 - var(--sk,1))*.22));will-change:scale}
.sheet::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent);opacity:.55;transform:scaleX(0);transition:transform 1.5s var(--ease);pointer-events:none;z-index:2}
.sheet.line-in::before{transform:scaleX(1)}

/* 4 · Process row: a navy line fills along the top as the steps come into view */
.process-row{position:relative}
.process-row::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--pp,0));z-index:2;pointer-events:none}

/* 5 · Text sharpens into focus after its heading lands */
.blur-in{opacity:0;filter:blur(8px);transform:translateY(18px);transition:opacity 1s var(--ease) .25s,filter 1s var(--ease) .25s,transform 1s var(--ease) .25s}
.blur-in.in{opacity:1;filter:none;transform:none}

/* 6 · Eyebrow labels draw a hairline after themselves */
.eyebrow::after{content:'';flex:none;align-self:center;height:1px;width:0;background:var(--accent);opacity:.45;transition:width 1s var(--ease) .3s}
.eyebrow.in::after{width:46px}

/* 7 · Cards enter from alternating sides with more travel, then settle */
.svc:not(.visible):not([data-dir]),.sector:not(.visible):not([data-dir]),.ccard:not(.visible):not([data-dir]),.hub-card:not(.visible):not([data-dir]),
.cmethod:not(.visible):not([data-dir]),.blog-card:not(.visible):not([data-dir]),.content-card:not(.visible):not([data-dir]),.feature-item:not(.visible):not([data-dir]){
  transform:perspective(1000px) translate3d(var(--ex,0px),72px,0) scale(.92) rotateX(10deg)
}
:is(.svc-grid,.sectors-row,.crow,.hub-grid,.cmethods,.blog-grid,.feature-grid)>:nth-child(odd){--ex:-34px}
:is(.svc-grid,.sectors-row,.crow,.hub-grid,.cmethods,.blog-grid,.feature-grid)>:nth-child(even){--ex:34px}

/* 8 · Hover: the card border simply fades to gold. (The old navy/gold line
   that "traced" the edge side after side is gone — it fought with the border.)
   Explicit per-property delays so only opacity/transform wait for the reveal
   stagger; the border and shadow always answer instantly. */
.svc,.sector,.ccard,.hub-card,.cmethod,.blog-card,.content-card,.feature-item{
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .4s ease;
  transition-delay:var(--d,0s),var(--d,0s),0s,0s;
}
.svc:hover,.sector:hover,.ccard:hover,.hub-card:hover,.cmethod:hover,.blog-card:hover,.content-card:hover,.feature-item:hover{
  border-color:var(--gold);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .35s ease;
}

/* 9 · Client marquee fades softly at both edges */
.tick-outer{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* 10 · Footer columns rise one after another */
.footer-grid>*{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*.1s)}
.footer.in .footer-grid>*{opacity:1;transform:none}
.footer-bot{opacity:0;transition:opacity 1s ease .5s}
.footer.in .footer-bot{opacity:1}

@media(max-width:700px){
  .sheet.sheet-on{scale:calc(.975 + var(--sk,1)*.025);border-radius:calc((1 - var(--sk,1))*26px) calc((1 - var(--sk,1))*26px) 0 0}
  .hero-badge-top,.hero-badge-bottom{translate:none}
}
@media(prefers-reduced-motion:reduce){
  .loader{transition:opacity .3s linear;clip-path:none}
  .loader.is-done{opacity:0;clip-path:none}
  .hero-left{transform:none;opacity:1}
  .hero-badge-top,.hero-badge-bottom{translate:none}
  .sheet.sheet-on{scale:1;border-radius:0;box-shadow:none}
  .sheet::before{transform:scaleX(1);transition:none}
  .process-row::before{transform:scaleX(1)}
  .blur-in{opacity:1;filter:none;transform:none;transition:none}
  .eyebrow::after{width:46px;transition:none}
  .footer-grid>*,.footer-bot{opacity:1;transform:none;transition:none}
  .svc,.sector,.ccard,.hub-card,.cmethod,.blog-card,.content-card,.feature-item{transition:none}
}

.nav-logo-img{transition:transform .28s cubic-bezier(.16,1,.3,1),height .25s ease}

/* ==========================================================================
   BRAND PASS — logo gold (#e6a52f) joins the navy as the theme's second colour.
   Rule of thumb used below: gold is for lines, dots, underlines, highlights and
   icons on dark (never small body text on white — it fails contrast there);
   navy stays the workhorse for text, buttons and surfaces.
   ========================================================================== */
@media(max-width:600px){.drawer{padding-top:86px}}
::selection{background:var(--gold-soft);color:var(--ink)}

/* header: gold hover/active underline + dropdown accents */
.nav-links>a::after,.nav-item>button::after,.nav-item>a::after{background:var(--gold);height:2px}
.nav-links>a:hover,.nav-links>a.active,.nav-item>button:hover,.nav-item>button[aria-expanded="true"]{color:var(--ink)}
.nav-drop{border-color:rgba(30,58,95,.10);border-top:2px solid var(--gold);box-shadow:var(--shadow-lg)}
.nav-drop a:hover{background:var(--gold-soft);color:var(--ink)}
.nav-drop a svg{color:var(--gold-dk)}
.nav-drop-all{color:var(--accent-dk) !important}

/* scroll progress: gold bar, navy ring on the tip */
.scroll-progress{background:var(--gold)}
.scroll-progress::after{background:var(--gold);box-shadow:0 0 0 3px rgba(230,165,47,.28)}

/* small gold bar in front of every section eyebrow — echoes the logo's gold wordmark */
.eyebrow::before{content:'';flex:none;width:18px;height:3px;border-radius:3px;background:var(--gold)}
.hero-pill .pdot,.cta-dot,.cta-badge .cta-dot,.dfact-card h4 .pdot,.link-btn .lb-dot{background:var(--gold)}
.hero-pill .pdot{box-shadow:0 0 0 4px rgba(230,165,47,.22)}

/* headline emphasis underline: gold, like the wordmark */
.stitle em,.cta-h em{background-image:linear-gradient(var(--gold),var(--gold))}
.hw-accent,.hw-stroke{color:var(--accent)}

/* quotes / rules */
.article-pullquote{border-left-color:var(--gold)}
.faq-item.open{border-color:var(--gold)}

/* primary buttons: navy body, gold arrow + gold-tinted lift on hover */
.hero-cta svg,.cta-btn svg{color:var(--gold)}
.side-cta .cta-btn svg,.article-cta .cta-btn svg{color:var(--gold-dk)}
.hero-cta:hover,.cta-btn:hover{box-shadow:0 14px 28px rgba(8,24,40,.20),0 0 0 3px rgba(230,165,47,.35)}

/* navy call-out panels get a gold top rule */
.side-cta,.article-cta{background:var(--accent-dk);border-top:3px solid var(--gold)}

/* hover states on cards/icons pick up gold */
.svc:hover,.sector:hover,.ccard:hover,.hub-card:hover,.cmethod:hover,.blog-card:hover,.feature-item:hover{border-color:var(--gold)}
.f-quick-btn:hover,.share-btn:hover{background:var(--accent);border-color:var(--gold);color:var(--gold)}
.dfact-row:hover .dfact-ic{background:var(--accent);color:var(--gold)}
.faq-item.open .fq-ic{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.page-btn.active{background:var(--accent);border-color:var(--gold)}
.totop{background:var(--accent);border:2px solid var(--gold);color:var(--gold)}
a:focus-visible,button:focus-visible{outline-color:var(--gold-dk)}


/* ==========================================================================
   HEADER PASS — centred underline · gliding glass lens · deeper glass bar
   Sits at the end of the file on purpose so it wins over the older nav rules.
   ========================================================================== */

/* 1 · Underline — one rule set for every menu trigger, always anchored at the
   centre of the word. (Older rules mixed `left:0` with `translateX(-50%)`,
   which pushed the line to the left of the text.) It grows outward from the
   middle on hover / active / open dropdown. */
.nav-links>a,.nav-item>a,.nav-item>button{position:relative}
.nav-links>a::after,.nav-item>a::after,.nav-item>button::after{
  content:'';position:absolute;left:50%;right:auto;bottom:-1px;width:0;height:2px;border-radius:2px;
  background:var(--gold);opacity:0;transform:translateX(-50%);
  transition:width .38s var(--ease),opacity .2s ease}
.nav-links>a:hover::after,.nav-links>a.active::after,.nav-links>a:focus-visible::after,
.nav-item>a:hover::after,.nav-item.drop-open>a::after,.nav-item>a.active::after,
.nav-item>button:hover::after,.nav-item.drop-open>button::after,.nav-item>button[aria-expanded="true"]::after{
  left:50%;width:100%;opacity:1;transform:translateX(-50%)}
.nav-item>a svg,.nav-item>button svg{transition:transform .3s var(--ease),color .2s ease}
.nav-item:hover>a svg,.nav-item:hover>button svg{color:var(--gold-dk)}

/* 2 · Gliding glass lens — one soft pill that slides between menu items
   (JS in script.js positions it; it is skipped on touch devices). */
.nav-links{position:relative}
.nav-links>a,.nav-item{z-index:1}
.nav-item.drop-open{z-index:3}
.nav-lens{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;pointer-events:none;z-index:0;opacity:0;
  background:
    radial-gradient(120% 110% at 50% 0%,rgba(230,165,47,.16),rgba(230,165,47,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.58));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 1px rgba(30,58,95,.07),0 10px 20px -8px rgba(8,24,40,.28);
  will-change:transform,width;
  transition:transform .5s var(--ease),width .5s var(--ease),height .3s var(--ease),opacity .25s ease}
.nav-lens.no-anim{transition:opacity .25s ease}
.nav-lens.on{opacity:1}

/* 3 · Glass bar — more see-through, stronger blur + saturation, bright top
   edge, inner glow and a deeper floating drop shadow. */
.nav{
  background:linear-gradient(135deg,rgba(255,255,255,.60) 0%,rgba(238,245,255,.36) 50%,rgba(255,255,255,.52) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(200%) brightness(1.04);backdrop-filter:blur(28px) saturate(200%) brightness(1.04);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 0 0 1px rgba(30,58,95,.07),
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(30,58,95,.08),
    inset 0 0 26px rgba(255,255,255,.38),
    0 26px 48px -16px rgba(8,24,40,.30),
    0 10px 20px -8px rgba(8,24,40,.14),
    0 1px 2px rgba(8,24,40,.08)}
.nav.scrolled{
  background:linear-gradient(135deg,rgba(255,255,255,.74) 0%,rgba(242,248,255,.50) 55%,rgba(255,255,255,.68) 100%);
  box-shadow:
    0 0 0 1px rgba(30,58,95,.09),
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(30,58,95,.09),
    inset 0 0 26px rgba(255,255,255,.34),
    0 30px 54px -16px rgba(8,24,40,.36),
    0 12px 22px -8px rgba(8,24,40,.18),
    0 2px 4px rgba(8,24,40,.10)}
/* specular sheen: bright top fade + a diagonal glass streak + a faint gold warmth at the right */
.nav::before{background:
  linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 52%),
  linear-gradient(115deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.40) 32%,rgba(255,255,255,0) 44%),
  radial-gradient(55% 140% at 90% 0%,rgba(230,165,47,.10),rgba(230,165,47,0) 70%)}

/* 4 · Dropdowns — frosted panel that eases in, items rise one after another */
.nav-drop{
  border-radius:16px;transform-origin:50% 0;
  transform:translateX(-50%) translateY(10px) scale(.96);
  background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(246,249,253,.93));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);border-top:2px solid var(--gold);
  box-shadow:0 0 0 1px rgba(30,58,95,.08),inset 0 1px 0 rgba(255,255,255,.95),0 26px 50px -16px rgba(8,24,40,.32),0 8px 16px -8px rgba(8,24,40,.14);
  transition:opacity .28s ease,transform .45s var(--ease)}
.nav-item.drop-open .nav-drop{transform:translateX(-50%) translateY(0) scale(1)}
.nav-drop>*{opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .3s var(--ease),background .2s,color .2s}
.nav-item.drop-open .nav-drop>*{opacity:1;transform:none;
  transition:opacity .35s ease calc(var(--i,0)*45ms + 70ms),transform .5s var(--ease) calc(var(--i,0)*45ms + 70ms),background .2s,color .2s}
.nav-drop>:nth-child(1){--i:0}.nav-drop>:nth-child(2){--i:1}.nav-drop>:nth-child(3){--i:2}
.nav-drop>:nth-child(4){--i:3}.nav-drop>:nth-child(5){--i:4}.nav-drop>:nth-child(6){--i:5}
.nav-drop-all svg{transition:transform .3s var(--ease)}
.nav-drop-all:hover svg{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .nav-lens,.nav-drop,.nav-drop>*,.nav-item.drop-open .nav-drop>*,.nav-drop-all svg,
  .nav-links>a::after,.nav-item>a::after,.nav-item>button::after{transition:none}
  .nav-drop,.nav-item.drop-open .nav-drop{transform:translateX(-50%)}
  .nav-drop>*{transform:none}
}

/* tokens used by the passes below (dark mode re-points them) */
:root{--hi:rgba(255,255,255,.95);--cta-end:#eef2f8}

/* ==========================================================================
   HEADER FIX
   1 · No glass "lens" pill behind menu text on hover (removed).
   2 · Every menu trigger shares one box → identical text-to-line gap.
   3 · Dropdown keeps a rich open animation: a fluid "drop" that unrolls from
       the header with a 3D tilt, blur-to-sharp focus and a springy settle;
       the links then drop in one after another for depth.
   ========================================================================== */
.nav-lens{display:none !important}

.nav-links>a,.nav-item>a,.nav-item>button{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 0;margin:0;line-height:24px;height:auto}
.nav-links>a::after,.nav-item>a::after,.nav-item>button::after{bottom:0}
.nav-item{display:flex;align-items:center}

.nav-drop{
  top:calc(100% + 6px);
  transform-origin:50% 0;
  opacity:0;
  transform:translateX(-50%) perspective(800px) rotateX(-16deg) translateY(-14px) scale(.92,.88);
  clip-path:inset(0 0 100% 0 round 16px);
  filter:blur(6px);
  transition:
    opacity .28s ease,
    transform .7s cubic-bezier(.34,1.56,.64,1),
    clip-path .6s cubic-bezier(.22,1,.36,1),
    filter .4s ease}
.nav-item.drop-open .nav-drop{
  opacity:1;
  transform:translateX(-50%) perspective(800px) rotateX(0) translateY(0) scale(1);
  clip-path:inset(-24px -48px -70px -48px round 16px);
  filter:blur(0)}
.nav-drop::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px}

/* links fall into place one after another, with a small overshoot */
.nav-drop>*{
  opacity:0;transform:translateY(-16px) scale(.96);
  transition:opacity .2s ease,transform .25s ease,background .2s,color .2s}
.nav-item.drop-open .nav-drop>*{
  opacity:1;transform:none;
  transition:
    opacity .4s ease calc(var(--i,0)*60ms + 120ms),
    transform .65s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0)*60ms + 120ms),
    background .2s,color .2s}

@media(prefers-reduced-motion:reduce){
  .nav-drop,.nav-item.drop-open .nav-drop,.nav-drop>*,.nav-item.drop-open .nav-drop>*{
    transition:opacity .15s ease;filter:none;clip-path:none}
  .nav-drop,.nav-item.drop-open .nav-drop{transform:translateX(-50%)}
  .nav-drop>*,.nav-item.drop-open .nav-drop>*{transform:none}
}

/* ==========================================================================
   HEADER — fresh look
   · the yellow line on the bottom edge is gone
   · layered depth: navy-tinted floating shadow, bright top edge, inner glow
   · a slow glass sheen drifts across the bar (replaces the old line)
   · fluid morph on scroll: the bar tucks in, narrows and lifts higher
   ========================================================================== */
.nav::after{
  content:'';position:absolute;inset:0;left:0;right:0;bottom:0;height:auto;border-radius:inherit;
  pointer-events:none;opacity:1;overflow:hidden;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:130% 0;
  animation:navSheen 9s cubic-bezier(.45,.05,.25,1) 2.5s infinite}
@keyframes navSheen{0%,55%{background-position:130% 0}100%{background-position:-60% 0}}

.nav{
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    0 0 0 1px rgba(30,58,95,.08),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -10px 18px -12px rgba(30,58,95,.12),
    inset 0 0 26px rgba(255,255,255,.4),
    0 34px 50px -24px rgba(30,58,95,.38),
    0 14px 24px -12px rgba(8,24,40,.20),
    0 2px 4px rgba(8,24,40,.08);
  transition:
    padding .55s var(--ease),top .55s var(--ease),width .65s var(--ease),
    background .4s ease,box-shadow .55s var(--ease),border-radius .4s ease}
.nav.scrolled{
  box-shadow:
    0 0 0 1px rgba(30,58,95,.10),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -10px 18px -12px rgba(30,58,95,.14),
    inset 0 0 26px rgba(255,255,255,.34),
    0 40px 60px -22px rgba(30,58,95,.46),
    0 18px 28px -12px rgba(8,24,40,.26),
    0 3px 6px rgba(8,24,40,.10)}
@media(min-width:901px){
  .nav.scrolled{width:min(960px,calc(100% - 32px))}
}
.nav-logo-img{filter:drop-shadow(0 3px 5px rgba(8,24,40,.14))}

/* WhatsApp button: raised, with a soft green glow */
.nav-wa-btn{
  background:linear-gradient(180deg,#34dc74,var(--wa) 55%,#1fb955);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.08),0 10px 20px -8px rgba(37,211,102,.65);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s ease}
.nav-wa-btn:hover{
  background:linear-gradient(180deg,#34dc74,var(--wa) 55%,#1fb955);filter:brightness(1.04);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.08),0 16px 26px -8px rgba(37,211,102,.75)}

@media(prefers-reduced-motion:reduce){.nav::after{animation:none;opacity:0}}

/* ==========================================================================
   DEPTH PASS — layered surfaces, scroll-linked focus, fluid aurora
   Cards rest on stacked soft shadows and gain lift + a deeper shadow as they
   travel to the middle of the screen (script sets --focus 0→1). Hero areas
   get slow-moving liquid colour behind the content. All navy + logo gold.
   ========================================================================== */

/* 1 · Resting depth: glass-like surface + stacked shadows that deepen with focus */
.depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):not(:hover){
  background-color:var(--card);
  box-shadow:
    inset 0 1px 0 var(--hi),
    0 1px 1px rgba(15,27,45,.04),
    0 calc(4px + var(--focus,0)*8px) calc(10px + var(--focus,0)*14px) -6px rgba(30,58,95,calc(.08 + var(--focus,0)*.08)),
    0 calc(14px + var(--focus,0)*22px) calc(30px + var(--focus,0)*26px) -16px rgba(30,58,95,calc(.10 + var(--focus,0)*.14));
  scale:calc(.972 + var(--focus,0)*.028);
  translate:0 calc((1 - var(--focus,0))*6px);
}
/* hover: deeper, navy-tinted lift with a faint gold under-glow */
.depth-on .tilt3d:hover{
  box-shadow:
    inset 0 1px 0 var(--hi),
    0 40px 60px -24px rgba(30,58,95,.42),
    0 16px 28px -12px rgba(15,27,45,.18),
    0 34px 50px -34px rgba(230,165,47,.55);
}
.depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step){
  transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .7s var(--ease),scale .7s var(--ease),translate .7s var(--ease),border-color .3s ease,background-color .3s ease;
}

/* 2 · Large panels (CTA card, stat bar) float a little higher */
.depth-on .cta-card{
  scale:calc(.975 + var(--focus,0)*.025);
  box-shadow:0 calc(20px + var(--focus,0)*24px) calc(40px + var(--focus,0)*30px) -18px rgba(8,24,40,calc(.18 + var(--focus,0)*.16));
  transition:scale .8s var(--ease),box-shadow .8s var(--ease)}

/* 3 · Liquid aurora behind hero areas: three blurred blobs that drift and morph */
.aurora-host{position:relative;isolation:isolate}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;display:block;width:46vmax;height:46vmax;max-width:640px;max-height:640px;filter:blur(64px);opacity:.55;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;will-change:transform,border-radius;
  animation:auroraDrift 22s ease-in-out infinite alternate, auroraMorph 14s ease-in-out infinite}
.aurora i:nth-child(1){left:-12%;top:-30%;background:radial-gradient(circle at 40% 40%,rgba(30,58,95,.30),rgba(30,58,95,0) 68%)}
.aurora i:nth-child(2){right:-10%;top:-10%;background:radial-gradient(circle at 50% 50%,rgba(230,165,47,.32),rgba(230,165,47,0) 66%);animation-duration:27s,17s;animation-delay:-6s,-4s}
.aurora i:nth-child(3){left:32%;bottom:-45%;background:radial-gradient(circle at 50% 50%,rgba(96,148,214,.26),rgba(96,148,214,0) 66%);animation-duration:31s,19s;animation-delay:-11s,-9s}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,4vh,0) scale(1.12)}
  100%{transform:translate3d(-5vw,8vh,0) scale(.94)}}
@keyframes auroraMorph{
  0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
  33%{border-radius:60% 40% 38% 62% / 55% 36% 64% 45%}
  66%{border-radius:36% 64% 52% 48% / 62% 58% 42% 38%}}

/* 4 · Images ease-zoom as they scroll through the viewport (script sets --pz) */
.depth-on :is(.blog-card-media,.article-figure,.hub-card) img{scale:calc(1.02 + var(--pz,0)*.07);transition:scale .9s var(--ease)}

/* 5 · Fluid press: buttons squash slightly under the finger/cursor */
.hero-cta:active,.cta-btn:active,.link-btn:active,.nav-wa-btn:active{transform:scale(.965);transition-duration:.1s}

@media(max-width:700px){
  .aurora i{filter:blur(44px);opacity:.5}
  .depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):not(:hover){scale:calc(.982 + var(--focus,0)*.018)}
}
@media(prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):not(:hover),
  .depth-on .cta-card{scale:1;translate:none;transition:none}
  .depth-on :is(.blog-card-media,.article-figure,.hub-card) img{scale:1.02;transition:none}
}

/* ==========================================================================
   PREMIUM PASS
   A · smooth scrolling: nothing heavy is re-painted or re-rasterised per frame
   B · cards: gold (never blue) hover border
   C · CTA panels rebuilt as proper floating cards
   D · Google review card: sweeping gold edge, twinkling stars, shine button
   ========================================================================== */

/* A · smoothness ---------------------------------------------------------- */
.sheet.sheet-on{scale:1;border-radius:0;box-shadow:none}
.aurora i{filter:none;animation:auroraDrift 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){animation-duration:31s}
.aurora i:nth-child(3){animation-duration:36s}
.nav{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.nav::after{animation:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 46%,transparent 62%)}
.tilt3d{will-change:auto}
.tilt3d:hover{will-change:transform}
/* scroll-linked values track the scroll directly (no lag transition) and only
   use compositor properties; the shadow is static */
.depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):not(:hover){
  box-shadow:
    inset 0 1px 0 var(--hi),
    0 1px 1px rgba(15,27,45,.04),
    0 8px 16px -8px rgba(30,58,95,.14),
    0 22px 40px -22px rgba(30,58,95,.22);
  scale:calc(.982 + var(--focus,0)*.018);
  translate:none}
.depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step){
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .45s cubic-bezier(.2,.9,.25,1) var(--d,0s),box-shadow .5s var(--ease),border-color .35s ease,background-color .35s ease}
/* while hovered the card follows the cursor on one eased curve, no stagger delay */
.depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):hover{
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .5s var(--ease),border-color .35s ease,background-color .35s ease}
.depth-on :is(.blog-card-media,.article-figure,.hub-card) img{scale:calc(1.02 + var(--pz,0)*.05);transition:none}

/* B · gold hover border — just the border, no traced lines ------------------ */
.tilt3d:hover,.svc:hover,.sector:hover,.ccard:hover,.hub-card:hover,.cmethod:hover,.blog-card:hover,.content-card:hover,.feature-item:hover,.faq-item:hover{border-color:var(--gold)}
.tilt3d::after{background:radial-gradient(320px circle at var(--mx) var(--my),rgba(230,165,47,.13),transparent 68%)}

/* C · CTA panels ---------------------------------------------------------- */
.cta-section{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--cta-end))}
.cta-card,.depth-on .cta-card{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:880px;margin:0 auto;padding:clamp(48px,6vw,72px) clamp(22px,5vw,64px);
  border-radius:32px;text-align:center;scale:1;translate:none;
  background:linear-gradient(160deg,#ffffff 0%,#f7f9fd 55%,#fdf8ec 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 1px rgba(30,58,95,.08),
    inset 0 1.5px 0 #fff,
    inset 0 -14px 26px -18px rgba(30,58,95,.10),
    0 44px 70px -34px rgba(30,58,95,.40),
    0 18px 30px -16px rgba(8,24,40,.16);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* drifting light inside the card (transform-only animation) */
.cta-glow{display:block !important;position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform}
.cta-glow1{width:420px;height:420px;left:-140px;top:-170px;background:radial-gradient(circle,rgba(230,165,47,.26),rgba(230,165,47,0) 68%);animation:ctaFloat 16s ease-in-out infinite alternate}
.cta-glow2{width:460px;height:460px;right:-160px;bottom:-200px;background:radial-gradient(circle,rgba(96,148,214,.20),rgba(96,148,214,0) 68%);animation:ctaFloat 20s ease-in-out -7s infinite alternate-reverse}
@keyframes ctaFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(46px,30px,0) scale(1.14)}}
/* fine dotted texture, like brushed glass */
.cta-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(30,58,95,.10) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 45%,#000,transparent);mask-image:radial-gradient(70% 80% at 50% 45%,#000,transparent)}
.cta-content{position:relative;z-index:1}
.cta-seal{top:18px;right:20px}
@media(max-width:820px){.cta-card{border-radius:26px}}

/* D · Google review card -------------------------------------------------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.review-cta{
  position:relative;isolation:isolate;overflow:hidden;--mx:50%;--my:0%;
  background:linear-gradient(135deg,#ffffff 0%,#f5f8fd 100%);
  border:1px solid rgba(30,58,95,.08);border-radius:28px;
  box-shadow:inset 0 1.5px 0 #fff,0 30px 54px -30px rgba(30,58,95,.36),0 12px 22px -14px rgba(8,24,40,.14)}
/* a comet of gold circles the edge */
.review-cta::before{
  display:block;content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(230,165,47,.15) 72%,var(--gold) 88%,#fff3cf 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:reviewOrbit 7s linear infinite}
@keyframes reviewOrbit{to{--ang:360deg}}
/* pointer-following warm light */
.review-cta::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(230,165,47,.16),transparent 70%);
  transition:background-position .3s ease}
.review-cta>*{position:relative;z-index:1}
/* stars pop in one by one, then twinkle in a slow wave */
.review-stars svg{transform:scale(0) rotate(-40deg);opacity:0;filter:drop-shadow(0 2px 3px rgba(230,165,47,.45))}
.review-cta.visible .review-stars svg{animation:starPop .7s cubic-bezier(.34,1.56,.64,1) forwards,starTwinkle 3.6s ease-in-out 1.6s infinite}
.review-stars svg:nth-child(1){animation-delay:.15s,1.6s}
.review-stars svg:nth-child(2){animation-delay:.27s,1.9s}
.review-stars svg:nth-child(3){animation-delay:.39s,2.2s}
.review-stars svg:nth-child(4){animation-delay:.51s,2.5s}
.review-stars svg:nth-child(5){animation-delay:.63s,2.8s}
@keyframes starPop{to{transform:scale(1) rotate(0);opacity:1}}
@keyframes starTwinkle{0%,70%,100%{transform:scale(1) rotate(0)}82%{transform:scale(1.22) rotate(8deg)}}
/* button: light sweep + lift */
.review-btn{position:relative;overflow:hidden;box-shadow:0 14px 26px -12px rgba(8,24,40,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s ease}
.review-btn::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-156%) skewX(-20deg);
  transition:transform .8s var(--ease);pointer-events:none}
.review-btn:hover{transform:translateY(-3px);box-shadow:0 22px 34px -14px rgba(8,24,40,.6)}
.review-btn:hover::after{transform:translateX(289%) skewX(-20deg)}

@media(prefers-reduced-motion:reduce){
  .cta-glow,.review-cta::before{animation:none}
  .review-stars svg{transform:none;opacity:1;animation:none !important}
}

/* ==========================================================================
   PREMIUM PASS 2 — remaining plain containers get depth
   ========================================================================== */

/* navy call-out panels: deep gradient, drifting light, raised shadow */
.side-cta,.article-cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(150deg,#12294a 0%,var(--accent-dk) 55%,#0b1c33 100%);
  border-top:0;border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),0 34px 54px -28px rgba(8,24,40,.65),0 12px 22px -12px rgba(8,24,40,.35)}
.side-cta::before,.article-cta::before{
  content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,#ffd98a 50%,var(--gold) 70%,transparent)}
.side-cta::after,.article-cta::after{
  content:'';position:absolute;z-index:-1;width:320px;height:320px;right:-110px;top:-130px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,165,47,.30),rgba(230,165,47,0) 66%);
  animation:ctaFloat 14s ease-in-out infinite alternate;will-change:transform}
.side-cta .cta-btn,.article-cta .cta-btn{box-shadow:0 12px 22px -10px rgba(0,0,0,.55)}

/* quiet surfaces gain a lifted, glassy finish */
.article-checklist li,.dfact-card,.phero-badges span,.dhero-badges>*{
  background-color:var(--card);
  box-shadow:inset 0 1px 0 var(--hi),0 1px 1px rgba(15,27,45,.04),0 10px 20px -12px rgba(30,58,95,.22);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease}
.article-checklist li:hover,.dfact-card:hover,.phero-badges span:hover,.dhero-badges>*:hover{
  transform:translateY(-3px);border-color:var(--gold);
  box-shadow:inset 0 1px 0 var(--hi),0 22px 34px -18px rgba(30,58,95,.38)}
.article-pullquote{
  border-left:0;padding:22px 26px 22px 30px;border-radius:0 20px 20px 0;position:relative;
  background:linear-gradient(90deg,var(--gold-soft),rgba(253,243,220,0));}
.article-pullquote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--gold),#ffd98a)}
.article-figure img,.blog-card-media img,.hub-card img{border-radius:inherit}
.article-figure{box-shadow:0 34px 56px -30px rgba(30,58,95,.45),0 10px 20px -12px rgba(8,24,40,.18);border-radius:22px}

/* FAQ: rounder, deeper, smoother open */
.faq-item{border-radius:18px}
.faq-item.open{box-shadow:0 26px 44px -24px rgba(30,58,95,.38)}

/* footer: soft glow rising from the top edge, links glide */
.footer{position:relative;background:linear-gradient(180deg,var(--card) 0%,var(--surface) 100%);border-top:0}
.footer::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,165,47,.7),transparent)}
.f-col a{transition:color .25s ease,transform .35s var(--ease)}
.f-col a:hover{transform:translateX(4px)}
.f-quick-btn:hover{transform:translateY(-3px);box-shadow:0 14px 22px -10px rgba(30,58,95,.4)}

/* breadcrumbs, share buttons, chips: same lift */
.share-btn:hover,.chip:hover,.link-btn:hover{transform:translateY(-2px);box-shadow:0 14px 22px -12px rgba(30,58,95,.4)}

/* in-page links get a gliding underline in articles */
.article-body a:not(.cta-btn):not(.link-btn),.article a:not(.cta-btn):not(.link-btn):not(.share-btn){
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat;
  transition:background-size .35s var(--ease),color .25s ease}
.article-body a:not(.cta-btn):not(.link-btn):hover,.article a:not(.cta-btn):not(.link-btn):not(.share-btn):hover{background-size:100% 100%;color:var(--ink)}

/* text stays crisp while animating */
h1,h2,h3,h4,p,li{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media(prefers-reduced-motion:reduce){.side-cta::after,.article-cta::after{animation:none}}
.aurora-off .aurora i{animation-play-state:paused}
.aurora-off .aurora{visibility:hidden}

/* ==========================================================================
   THEME TOGGLE — day / night switch in the header
   A little sky in a pill: a sun with spinning rays slides across and turns
   into a crescent moon, clouds drift away, stars twinkle in. Sizes are all
   driven by three variables so the mobile version is just a re-declaration.
   ========================================================================== */
.theme-toggle{
  --sw-w:60px;--sw-h:32px;--sw-k:26px;
  position:relative;flex-shrink:0;width:var(--sw-w);height:var(--sw-h);padding:0;border-radius:999px;cursor:pointer;overflow:hidden;
  border:1px solid rgba(30,58,95,.16);
  background:linear-gradient(180deg,#bfe0fb 0%,#e6f3ff 100%);
  box-shadow:inset 0 2px 5px rgba(30,58,95,.16),0 1px 0 rgba(255,255,255,.85);
  -webkit-tap-highlight-color:transparent;
  transition:background .7s var(--ease),border-color .5s ease,box-shadow .5s ease,transform .3s var(--ease)}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:inset 0 2px 5px rgba(30,58,95,.16),0 6px 14px -4px rgba(30,58,95,.35)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px}

/* sky layer: clouds (day) + stars (night) */
.tt-sky{position:absolute;inset:0;pointer-events:none}
.tt-sky b{position:absolute;right:9px;bottom:6px;width:15px;height:6px;border-radius:6px;background:#fff;
  box-shadow:-7px -3px 0 -1px #fff,-12px 1px 0 -2px rgba(255,255,255,.85),0 1px 2px rgba(30,58,95,.12);
  transition:transform .7s var(--ease),opacity .5s ease}
.tt-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transform:translateY(-6px) scale(.2);
  transition:opacity .5s ease,transform .7s var(--ease)}
.tt-sky i:nth-child(1){left:9px;top:7px}
.tt-sky i:nth-child(2){left:18px;top:19px;width:2px;height:2px}
.tt-sky i:nth-child(3){left:25px;top:9px;width:2px;height:2px}
.tt-sky i:nth-child(4){left:14px;top:13px;width:2px;height:2px;background:var(--gold)}

/* knob: sun rays + disc */
.tt-knob{position:absolute;top:calc((var(--sw-h) - 2px - var(--sw-k)) / 2);left:3px;width:var(--sw-k);height:var(--sw-k);
  display:flex;align-items:center;justify-content:center;
  transition:transform .7s cubic-bezier(.68,-.45,.27,1.45)}
.tt-rays{position:absolute;inset:0;width:100%;height:100%;color:#f4b23a;
  animation:ttSpin 9s linear infinite;transition:opacity .35s ease,transform .6s var(--ease)}
.tt-disc{position:relative;width:calc(var(--sw-k) * .6);height:calc(var(--sw-k) * .6);border-radius:50%;
  background:#f6b73f;box-shadow:inset 0 0 0 0 transparent,0 0 12px rgba(246,183,63,.85),0 0 0 2px rgba(246,183,63,.25);
  transition:background .5s ease,box-shadow .6s var(--ease),transform .7s var(--ease)}
.tt-disc::before,.tt-disc::after{content:'';position:absolute;border-radius:50%;background:rgba(160,175,205,.55);opacity:0;transition:opacity .4s ease .2s}
.tt-disc::before{width:28%;height:28%;right:18%;bottom:14%}
.tt-disc::after{width:18%;height:18%;left:30%;top:22%}
@keyframes ttSpin{to{transform:rotate(360deg)}}

/* NIGHT state */
html[data-theme="dark"] .theme-toggle{
  background:linear-gradient(180deg,#050507 0%,#1a1a20 100%);border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .theme-toggle:hover{box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 6px 16px -4px rgba(143,185,240,.35)}
html[data-theme="dark"] .tt-knob{transform:translateX(calc(var(--sw-w) - 2px - var(--sw-k) - 6px))}
html[data-theme="dark"] .tt-rays{opacity:0;transform:scale(.4);animation-play-state:paused}
html[data-theme="dark"] .tt-disc{background:transparent;transform:rotate(-25deg);
  box-shadow:inset calc(var(--sw-k) * -.2) calc(var(--sw-k) * -.1) 0 0 #e8eef8,0 0 12px rgba(200,215,255,.45),0 0 0 0 transparent}
html[data-theme="dark"] .tt-disc::before,html[data-theme="dark"] .tt-disc::after{opacity:0}
html[data-theme="dark"] .tt-sky b{transform:translateY(14px);opacity:0}
html[data-theme="dark"] .tt-sky i{opacity:1;transform:none;animation:ttTwinkle 2.6s ease-in-out infinite}
html[data-theme="dark"] .tt-sky i:nth-child(2){animation-delay:.7s}
html[data-theme="dark"] .tt-sky i:nth-child(3){animation-delay:1.4s}
html[data-theme="dark"] .tt-sky i:nth-child(4){animation-delay:2s}
@keyframes ttTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}

@media(max-width:600px){.theme-toggle{--sw-w:52px;--sw-h:28px;--sw-k:22px}.nav-right{gap:8px}
  .tt-sky i:nth-child(1){left:8px;top:6px}.tt-sky i:nth-child(2){left:15px;top:17px}.tt-sky i:nth-child(3){left:21px;top:8px}.tt-sky i:nth-child(4){left:12px;top:12px}
  .tt-sky b{right:7px;bottom:5px;width:12px;height:5px;box-shadow:-6px -3px 0 -1px #fff,-10px 1px 0 -2px rgba(255,255,255,.85)}}

/* ── THEME SWITCH TRANSITION ──
   Browsers with the View Transitions API get a circular "ink spill" that
   grows out of the toggle button (driven from script.js). Everything else
   falls back to a short cross-fade of colours. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .5s ease,color .5s ease,border-color .5s ease,fill .5s ease,stroke .5s ease,box-shadow .5s ease !important}

/* ==========================================================================
   MOBILE ACTION DOCK  (WhatsApp + Email, phones only)
   A floating glass capsule instead of a flat full-width bar. Each button is
   its own rounded "pill" with an icon bubble + two-line label:
     · WhatsApp — green gradient, pulsing ring around the icon, light sweep
     · Email    — navy gradient with a gold light orbiting its border
   Both spring on press and the dock glides up when the page loads.
   ========================================================================== */
.mobile-actionbar{display:none}
@media(max-width:760px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .totop{right:16px;bottom:calc(98px + env(safe-area-inset-bottom,0px));width:44px;height:44px}

  .mobile-actionbar{
    display:flex;position:fixed;z-index:59;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    gap:8px;padding:7px;border-radius:32px;
    background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(244,248,253,.66));
    -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 0 0 1px rgba(30,58,95,.08),inset 0 1px 0 rgba(255,255,255,.95),0 22px 40px -12px rgba(8,24,40,.42),0 6px 14px -6px rgba(8,24,40,.18);
    animation:mabDockIn .8s cubic-bezier(.22,1,.36,1) .35s both;
    transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}

  .mab-btn{
    position:relative;isolation:isolate;overflow:hidden;min-width:0;flex:1;display:flex;align-items:center;gap:10px;
    padding:7px 14px 7px 7px;border-radius:26px;color:#fff;-webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,filter .3s ease}
  /* press in fast, spring back slowly */
  .mab-btn:active{transform:scale(.94);filter:brightness(1.08);transition-duration:.12s,.12s,.12s;transition-timing-function:ease-out}
  @media(hover:hover){.mab-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}}
  /* light sweep across each button, staggered so they never flash together */
  .mab-btn::after{content:'';position:absolute;z-index:1;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-156%) skewX(-22deg);
    animation:mabShine 4.8s ease-in-out infinite;will-change:transform}
  .mab-mail::after{animation-delay:2.4s}

  .mab-ic{position:relative;z-index:2;flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 4px 10px -2px rgba(0,0,0,.25)}
  .mab-ic svg{position:relative;z-index:1}
  .mab-tx{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0;line-height:1.15;text-align:left}
  .mab-t{font-family:var(--font-display);font-size:.9rem;font-weight:800;letter-spacing:.01em}
  .mab-s{font-size:.66rem;font-weight:600;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* WhatsApp */
  .mab-wa{background:linear-gradient(135deg,#2fe27f 0%,#16a34a 55%,#0f8a6d 100%);
    box-shadow:0 10px 20px -8px rgba(18,140,90,.8),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.08)}
  .mab-wa .mab-ic::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.55);animation:mabPing 2.2s ease-out infinite}
  .mab-wa .mab-ic svg{animation:mabRing 5s ease-in-out 1.5s infinite;transform-origin:50% 60%}

  /* Email */
  .mab-mail{background:linear-gradient(135deg,#2c5a90 0%,#1b3d68 50%,#0d2342 100%);
    box-shadow:0 10px 20px -8px rgba(13,35,66,.85),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.14)}
  .mab-mail .mab-ic{background:rgba(230,165,47,.18);box-shadow:inset 0 0 0 1px rgba(230,165,47,.45),0 4px 10px -2px rgba(0,0,0,.35)}
  .mab-mail .mab-ic svg{stroke:var(--gold);animation:mabFloat 2.8s ease-in-out infinite}
}
@keyframes mabDockIn{0%{opacity:0;transform:translateY(120%) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mabShine{0%,55%{transform:translateX(-156%) skewX(-22deg)}100%{transform:translateX(311%) skewX(-22deg)}}
@keyframes mabPing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.65);opacity:0}}
@keyframes mabRing{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-14deg)}92%{transform:rotate(12deg)}95%{transform:rotate(-8deg)}98%{transform:rotate(5deg)}}
@keyframes mabFloat{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}

@media(prefers-reduced-motion:reduce){
  .mobile-actionbar,.mab-btn::after,.mab-wa .mab-ic::before,.mab-ic svg,.tt-rays,html[data-theme="dark"] .tt-sky i{animation:none !important}
  .mobile-actionbar{opacity:1}
  .tt-knob,.tt-disc,.tt-sky b,.tt-sky i{transition-duration:.01ms}
}

/* ==========================================================================
   DARK THEME
   Light is the default; this only applies when html[data-theme="dark"].
   Strategy: re-point the design tokens, then patch the few places that
   hard-code a light colour or use navy as a *fill*.
   ========================================================================== */
html[data-theme="dark"]{
  color-scheme:dark;
  --hi:rgba(255,255,255,.06);
  --cta-end:#09090a;
  --bg:#000000;           /* jet black */
  --card:#0b0b0c;
  --surface:#050506;
  --surface-2:#131315;
  --line:#242427;
  --text:#f3f3f4;
  --muted:#a3a3aa;
  --accent:#8fb9f0;       /* text / icon / border accent: light blue */
  --accent-dk:#b7d3f8;
  --accent-soft:#16171a;
  --num-tint:#2c2c30;
  --navy:#8fb9f0;
  --fill:#2a5698;         /* solid button fill that carries white text */
  --fill-dk:#1f4380;
  --gold:#eeb13f;
  --gold-soft:rgba(238,177,63,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow-md:0 12px 28px rgba(0,0,0,.7);
  --shadow-lg:0 22px 50px rgba(0,0,0,.8)}
html[data-theme="dark"] ::selection{background:rgba(238,177,63,.3);color:#fff}

/* logo: swap to the light-ink version */
html[data-theme="dark"] img[src$="logo-colour.png"]{content:url("../assets/images/logo-colour-dark.png")}

/* header glass bar */
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav.scrolled{
  background:linear-gradient(135deg,rgba(20,20,22,.78) 0%,rgba(6,6,7,.62) 55%,rgba(18,18,20,.74) 100%);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 1.5px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 26px rgba(255,255,255,.02),0 26px 48px -16px rgba(0,0,0,.9),0 10px 20px -8px rgba(0,0,0,.45)}
html[data-theme="dark"] .nav::before{background:
  linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 52%),
  linear-gradient(115deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.07) 32%,rgba(255,255,255,0) 44%),
  radial-gradient(55% 140% at 90% 0%,rgba(238,177,63,.08),rgba(238,177,63,0) 70%)}
html[data-theme="dark"] .nav-links>a:hover,html[data-theme="dark"] .nav-links>a.active,
html[data-theme="dark"] .nav-item>button:hover,html[data-theme="dark"] .nav-item>button[aria-expanded="true"]{color:var(--text)}
html[data-theme="dark"] .nav-drop{background:linear-gradient(160deg,rgba(18,18,20,.98),rgba(6,6,7,.97));border-color:rgba(255,255,255,.08);border-top:2px solid var(--gold);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06),0 26px 50px -16px rgba(0,0,0,.75)}
html[data-theme="dark"] .nav-drop a:hover{background:rgba(238,177,63,.12);color:var(--text)}
html[data-theme="dark"] .drawer{background:var(--bg)}
html[data-theme="dark"] .hero-badge{background:rgba(12,12,13,.94)}
html[data-theme="dark"] .hero::before{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px)}
html[data-theme="dark"] .hero-photo::after{background:linear-gradient(200deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.3) 100%)}
html[data-theme="dark"] .cg-overlay{background:rgba(0,0,0,.94)}

/* buttons / elements that are a navy FILL with white text */
html[data-theme="dark"] .hero-cta,html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .link-btn:hover,html[data-theme="dark"] .review-btn,
html[data-theme="dark"] .page-btn.active,html[data-theme="dark"] .article-avatar,
html[data-theme="dark"] .totop,html[data-theme="dark"] .back-to-blog-btn:hover,
html[data-theme="dark"] .f-quick-btn:hover,html[data-theme="dark"] .share-btn:hover,
html[data-theme="dark"] .dfact-row:hover .dfact-ic,
html[data-theme="dark"] .tilt3d:hover :is(.svc-ring,.sector-ic,.hub-ic,.cc-ic,.cmethod-ic,.process-ic,.hv-svc-ic,.dfact-ic,.feature-ic){
  background:var(--fill);border-color:var(--fill)}
html[data-theme="dark"] .totop{border-color:var(--gold)}
html[data-theme="dark"] .f-quick-btn:hover,html[data-theme="dark"] .share-btn:hover,html[data-theme="dark"] .page-btn.active{border-color:var(--gold)}
html[data-theme="dark"] .hero-cta:hover,html[data-theme="dark"] .cta-btn:hover,
html[data-theme="dark"] .review-btn:hover,html[data-theme="dark"] .totop:hover{background:var(--fill-dk)}
html[data-theme="dark"] .cmethod-wa:hover .cmethod-ic{background:var(--wa);border-color:var(--wa)}
html[data-theme="dark"] .f-quick-btn.f-quick-wa:hover{background:var(--wa);border-color:var(--wa);color:#fff}
html[data-theme="dark"] .wa-tip,html[data-theme="dark"] .share-btn .copy-tip{background:#2a2a2e}
html[data-theme="dark"] .side-cta,html[data-theme="dark"] .article-cta{background:linear-gradient(150deg,#18191c 0%,#0e0f11 55%,#08080a 100%);border-top:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.05),0 34px 54px -28px rgba(0,0,0,.95),0 12px 22px -12px rgba(0,0,0,.6)}
/* white buttons sitting on those navy panels keep navy text */
html[data-theme="dark"] .side-cta .cta-btn,html[data-theme="dark"] .article-cta .cta-btn{background:#fff;color:#1e3a5f}
html[data-theme="dark"] .side-cta .cta-btn:hover,html[data-theme="dark"] .article-cta .cta-btn:hover{background:#f1f5fb}
/* the two inline-styled hero-cta buttons */
html[data-theme="dark"] .hero-cta[style*="--navy"]{background:var(--fill) !important;color:#fff !important}
html[data-theme="dark"] .hero-cta[style*="background:#fff"]{background:#fff !important;color:#12294a !important}

/* mobile dock + toggle — night variants */
@media(max-width:760px){
  html[data-theme="dark"] .mobile-actionbar{
    background:linear-gradient(135deg,rgba(22,22,24,.9),rgba(6,6,7,.8));border-color:rgba(255,255,255,.09);
    box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px -12px rgba(0,0,0,.95),0 6px 14px -6px rgba(0,0,0,.5)}
  html[data-theme="dark"] .mab-mail{background:linear-gradient(135deg,#3a6cae 0%,#27497d 50%,#16315a 100%)}
}

/* narrow phones (≤360px): tighter dock so labels never clip */
@media(max-width:360px){
  .mobile-actionbar{left:8px;right:8px;gap:6px;padding:6px}
  .mab-btn{gap:7px;padding:6px 9px 6px 6px}
  .mab-ic{width:32px;height:32px}
  .mab-ic svg{width:17px;height:17px}
  .mab-t{font-size:.8rem}
  .mab-s{font-size:.6rem}
}
@media(max-width:330px){.mab-s{display:none}}

/* dark-mode touch-ups: low-opacity navy tints are invisible on dark */
html[data-theme="dark"] .link-btn .lb-arrow{background:rgba(255,255,255,.1)}

/* ==========================================================================
   DARK MODE — header, cards and panels from the live design
   The live stylesheet hard-codes white/navy in its header, depth and premium
   passes. These re-point those spots so every one of them follows the theme.
   ========================================================================== */

/* header: same glass bar + travelling sheen as live, tuned for black */
html[data-theme="dark"] .nav::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0}
html[data-theme="dark"] .nav-logo-img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
html[data-theme="dark"] .nav-drop a:hover{background:rgba(255,255,255,.06);color:var(--text)}

/* cards: resting depth + hover, black-based shadows, gold edge */
html[data-theme="dark"] .depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):not(:hover){
  background-color:var(--card);
  box-shadow:inset 0 1px 0 var(--hi),0 1px 1px rgba(0,0,0,.6),0 8px 16px -8px rgba(0,0,0,.7),0 22px 40px -22px rgba(0,0,0,.85)}
html[data-theme="dark"] .depth-on .tilt3d:hover,
html[data-theme="dark"] .depth-on :is(.svc,.sector,.ccard,.hub-card,.cmethod,.content-card,.blog-card,.feature-item,.dfact-card,.faq-item,.office-panel,.hv-svc-item,.process-step):hover{
  box-shadow:inset 0 1px 0 var(--hi),0 34px 60px -28px rgba(0,0,0,1),0 12px 24px -12px rgba(0,0,0,.9),0 0 44px -22px rgba(238,177,63,.32)}
html[data-theme="dark"] .depth-on .cta-card{box-shadow:0 calc(20px + var(--focus,0)*24px) calc(40px + var(--focus,0)*30px) -18px rgba(0,0,0,.85)}
html[data-theme="dark"] .faq-item.open{box-shadow:0 26px 44px -24px rgba(0,0,0,.9)}

/* CTA band */
html[data-theme="dark"] .cta-card,html[data-theme="dark"] .depth-on .cta-card{
  background:linear-gradient(160deg,#101012 0%,#0a0a0b 55%,#15110a 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1.5px 0 rgba(255,255,255,.07),inset 0 -14px 26px -18px rgba(0,0,0,.6),0 44px 70px -34px rgba(0,0,0,.95),0 18px 30px -16px rgba(0,0,0,.7)}
html[data-theme="dark"] .cta-card::before{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px)}
html[data-theme="dark"] .cta-glow1{background:radial-gradient(circle,rgba(238,177,63,.16),rgba(238,177,63,0) 68%)}
html[data-theme="dark"] .cta-glow2{background:radial-gradient(circle,rgba(96,148,214,.12),rgba(96,148,214,0) 68%)}

/* Google review card */
html[data-theme="dark"] .review-cta{
  background:linear-gradient(135deg,#111113 0%,#09090a 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.06),0 30px 54px -30px rgba(0,0,0,.95),0 12px 22px -14px rgba(0,0,0,.7)}
html[data-theme="dark"] .review-cta::after{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(238,177,63,.10),transparent 70%)}
html[data-theme="dark"] .review-btn{box-shadow:0 14px 26px -12px rgba(0,0,0,.85)}
html[data-theme="dark"] .review-btn:hover{box-shadow:0 22px 34px -14px rgba(0,0,0,.9),0 0 0 3px rgba(238,177,63,.30)}

/* small surfaces */
html[data-theme="dark"] .article-checklist li,html[data-theme="dark"] .dfact-card,html[data-theme="dark"] .phero-badges span,html[data-theme="dark"] .dhero-badges>*{
  background-color:var(--card);
  box-shadow:inset 0 1px 0 var(--hi),0 1px 1px rgba(0,0,0,.6),0 10px 20px -12px rgba(0,0,0,.8)}
html[data-theme="dark"] .article-checklist li:hover,html[data-theme="dark"] .dfact-card:hover,html[data-theme="dark"] .phero-badges span:hover,html[data-theme="dark"] .dhero-badges>*:hover{
  box-shadow:inset 0 1px 0 var(--hi),0 22px 34px -18px rgba(0,0,0,.95)}
html[data-theme="dark"] .article-figure{box-shadow:0 34px 56px -30px rgba(0,0,0,.95),0 10px 20px -12px rgba(0,0,0,.6)}
html[data-theme="dark"] .article-pullquote{background:linear-gradient(90deg,rgba(238,177,63,.14),rgba(238,177,63,0))}
html[data-theme="dark"] .footer{background:linear-gradient(180deg,var(--card) 0%,var(--surface) 100%)}
html[data-theme="dark"] .f-quick-btn:hover,html[data-theme="dark"] .share-btn:hover,html[data-theme="dark"] .chip:hover,html[data-theme="dark"] .link-btn:hover{box-shadow:0 14px 22px -12px rgba(0,0,0,.9)}
html[data-theme="dark"] .f-quick-btn:hover{box-shadow:0 14px 22px -10px rgba(0,0,0,.9)}


/* ==========================================================================
   REFINEMENTS — smooth card hover, jet-black dark mode polish
   ========================================================================== */

/* 1 · Every tilt card glides on one eased curve (a .12s linear snap read as jitter) */
.tilt3d:hover{
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .35s ease}
.tilt3d::after{transition:opacity .5s ease}

/* 2 · Dark mode card hover — no white streak. The diagonal white sheen would
   flash on black, so it is replaced by a soft warm spotlight that follows the
   cursor; the border fades to gold and the shadow deepens (live behaviour). */
html[data-theme="dark"] .tilt3d:not(.process-step)::before{display:none;animation:none}
html[data-theme="dark"] .tilt3d::after{
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(238,177,63,.075),transparent 70%)}
html[data-theme="dark"] .tilt3d:hover,
html[data-theme="dark"] :is(.svc,.sector,.ccard,.hub-card,.cmethod,.blog-card,.content-card,.feature-item):hover{
  border-color:var(--gold);
  box-shadow:0 34px 60px -28px rgba(0,0,0,1),0 12px 24px -12px rgba(0,0,0,.9),0 0 44px -22px rgba(238,177,63,.30)}
/* icon bubble flips to the solid fill with a gentle ease instead of a hard swap */
html[data-theme="dark"] :is(.svc-ring,.sector-ic,.hub-ic,.cc-ic,.cmethod-ic,.process-ic,.hv-svc-ic,.dfact-ic,.feature-ic){
  transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .35s ease,color .35s ease,border-color .35s ease}

/* 3 · Dark mode — mail button on the dock stays neutral (no blue cast) */
@media(max-width:760px){
  html[data-theme="dark"] .mab-mail{background:linear-gradient(135deg,#2c2c30 0%,#1a1a1d 55%,#0c0c0d 100%);
    box-shadow:0 10px 20px -8px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.4)}
}

/* 4 · Dark mode loader — black card stock instead of a cream flash */
html[data-theme="dark"] .loader{--gp-bg:#000;--gp-card:#0e0e10;--gp-line:#27272b;--gp-muted:#7c7c85;--gp-ink:#e9e9ec}
html[data-theme="dark"] .gp-card{box-shadow:0 22px 50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
html[data-theme="dark"] .gp-word{color:#1E3A5F}


/* ==========================================================================
   BUTTONS — one consistent transition set (light + dark)
   Before, each button listed its own few properties, so in dark mode (where
   hover also changes colour + border) some parts eased and others snapped.
   Now every property a hover can touch is animated together, `translate` is
   kept for the magnetic pull, and pressing is fast while releasing is soft.
   ========================================================================== */
.hero-cta,.cta-btn,.review-btn,.nav-wa-btn,.link-btn,.back-to-blog-btn,.f-quick-btn,.share-btn,.page-btn,.totop,.chip,.related-row a{
  transition-property:transform,translate,box-shadow,background-color,color,border-color,filter,opacity;
  transition-duration:.35s,.25s,.35s,.3s,.3s,.3s,.3s,.3s;
  transition-timing-function:cubic-bezier(.22,1,.36,1),cubic-bezier(.2,.9,.25,1),ease,ease,ease,ease,ease,ease;
  transition-delay:0s}
:is(.hero-cta,.cta-btn,.review-btn,.nav-wa-btn,.link-btn,.back-to-blog-btn,.f-quick-btn,.share-btn,.page-btn,.totop,.chip,.related-row a):active{transition-duration:.1s,.1s,.1s,.1s,.1s,.1s,.1s,.1s}

/* shine sweep on the primary buttons: move with transform (GPU) not `left` (layout) */
.hero-cta::after,.cta-btn::after{left:0;transform:translateX(-150%) skewX(-20deg);transition:transform .8s var(--ease)}
.hero-cta:hover::after,.cta-btn:hover::after{left:0;transform:translateX(325%) skewX(-20deg)}

/* arrow / icon inside buttons */
.hero-cta svg,.cta-btn svg,.review-btn svg,.back-to-blog-btn svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .3s ease}

/* dark mode: the solid-fill buttons keep their eased colour change, and the
   hover colour is stated once so nothing falls back to a hard swap */
html[data-theme="dark"] :is(.hero-cta,.cta-btn,.review-btn,.page-btn.active,.totop){background-color:var(--fill)}
html[data-theme="dark"] :is(.hero-cta,.cta-btn,.review-btn,.totop):hover{background-color:var(--fill-dk)}
html[data-theme="dark"] :is(.link-btn,.back-to-blog-btn,.f-quick-btn,.share-btn):hover{background-color:var(--fill)}
html[data-theme="dark"] .f-quick-btn.f-quick-wa:hover{background-color:var(--wa)}
html[data-theme="dark"] .side-cta .cta-btn,html[data-theme="dark"] .article-cta .cta-btn{background-color:#fff}
html[data-theme="dark"] .side-cta .cta-btn:hover,html[data-theme="dark"] .article-cta .cta-btn:hover{background-color:#f1f5fb}

@media(prefers-reduced-motion:reduce){
  :is(.hero-cta,.cta-btn,.review-btn,.nav-wa-btn,.link-btn,.back-to-blog-btn,.f-quick-btn,.share-btn,.page-btn,.totop,.chip,.related-row a),.hero-cta::after,.cta-btn::after,.review-btn::after,.mab-btn,.mab-btn::after{transition-duration:.01ms !important}
}