/* ═══════════════════════════════════════════════════════════════
   STAFFONA — Unified Design System v21
   Brand: Navy #0B1F3A  ·  Gold #C8973A  ·  White #FFFFFF
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --navy:  #0B1F3A;
  --nvm:   #0F2444;
  --nvl:   #1B3460;
  --gold:  #C8973A;
  --glt:   #D9A84A;
  --gpl:   rgba(200,151,58,.10);

  /* Surface */
  --bg:    #FFFFFF;
  --bg2:   #F4F7FA;
  --card:  #FFFFFF;
  --bd:    rgba(11,31,58,.11);
  --bdk:   rgba(11,31,58,.20);

  /* Text */
  --tx:    #1A2B40;
  --sl:    #4A5E74;
  --sll:   #7A90A6;

  /* Shadows */
  --s1: 0 1px 4px rgba(11,31,58,.07);
  --s2: 0 3px 12px rgba(11,31,58,.09);
  --s3: 0 8px 28px rgba(11,31,58,.11);
  --s4: 0 16px 48px rgba(11,31,58,.13);
  --s5: 0 32px 80px rgba(11,31,58,.16);

  /* Radii */
  --r:  8px;  --rm: 12px;  --rl: 18px;  --rx: 26px;

  /* Misc */
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .22s;
  --nh: 70px;
  --fh: 'Playfair Display', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;

  /* Legacy aliases so existing inline styles still resolve */
  --off:    var(--bg2);
  --white:  var(--card);
  --border: var(--bd);
  --text:   var(--tx);
  --slate:  var(--sl);
  --slate-l: var(--sll);
  --navy-m: var(--nvm);
  --navy-lt: var(--nvl);
  --gold-lt: var(--glt);
  --gold-pl: var(--gpl);
  --sh1:var(--s1); --sh2:var(--s2); --sh3:var(--s3); --sh4:var(--s4); --sh5:var(--s5);
}

/* Dark mode */
[data-theme="dark"] {
  --bg:   #091828;
  --bg2:  #0C1F33;
  --card: rgba(255,255,255,.04);
  --bd:   rgba(255,255,255,.09);
  --bdk:  rgba(255,255,255,.16);
  --tx:   rgba(255,255,255,.88);
  --sl:   rgba(255,255,255,.52);
  --sll:  rgba(255,255,255,.32);
  --off:  #0C1F33;
  --white: rgba(255,255,255,.04);
}

/* Light mode */
[data-theme="light"] {
  --bg:   #FFFFFF;
  --bg2:  #F4F7FA;
  --card: #FFFFFF;
  --bd:   rgba(11,31,58,.11);
  --bdk:  rgba(11,31,58,.20);
  --tx:   #1A2B40;
  --sl:   #4A5E74;
  --sll:  #7A90A6;
  --off:  #F4F7FA;
  --white:#FFFFFF;
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; position:relative; }
body {
  font-family:var(--fb);
  font-size:16px;
  line-height:1.65;
  color:var(--tx);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background .25s, color .25s;
}
img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:var(--fb); }
ul { list-style:none; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.w   { width:100%; max-width:1200px; margin:0 auto; padding:0 28px; }
.sec { padding:88px 0; background:var(--bg); }
.sec-sm { padding:56px 0; background:var(--bg); }
.sec-alt { background:var(--bg2) !important; }
.sec-navy { background:var(--navy) !important; position:relative; overflow:hidden; }
.sec-navy::before { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 0%,rgba(200,151,58,.07),transparent);
  pointer-events:none; }
.sh  { margin-bottom:52px; }
.shc { text-align:center; }
.shc .sub { margin:0 auto; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ── Section alternation in light mode ─────────────────────── */
[data-theme="light"] .sec { background:#FFFFFF; }
[data-theme="light"] .sec-alt { background:#F4F7FA !important; }
[data-theme="light"] section.sec:nth-of-type(even) { background:#F4F7FA; }

/* ── DARK SECTIONS: force navy bg even when they also have .sec class ── */
/* These sections are intentionally dark in BOTH modes. The .sec rule above  */
/* would override them — these !important rules prevent that.                */
[data-theme="light"] .csec,
[data-theme="light"] .serve,
[data-theme="light"] .cta-sec,
[data-theme="light"] .cta-bg,
[data-theme="light"] .why-bg,
[data-theme="light"] .stat-band-dark,
[data-theme="light"] .sec-navy        { background:var(--navy) !important; }

/* Any section with inline style="background:var(--navy)..." keeps its navy bg */
[data-theme="light"] [style*="background:var(--navy)"] { background:var(--navy) !important; }
[data-theme="light"] [style*="background:var(--nvm)"]  { background:var(--nvm) !important; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
.lbl { display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px; }
.lbl::before { content:''; width:22px; height:2px; background:var(--gold); flex-shrink:0; }
.lblc,.lbl-c { justify-content:center; }
.lbllt,.lbl-lt { color:var(--glt); }
.lbllt::before,.lbl-lt::before { background:var(--glt); }

.h2 { font-family:var(--fh); font-size:clamp(26px,3.6vw,42px); font-weight:700;
  line-height:1.15; color:var(--tx); margin-bottom:14px; letter-spacing:-.02em; }
.h2 span,.h2 em { color:var(--gold); font-style:normal; }
.h2w,.h2-w { color:#fff; }
.h2c,.h2-c { text-align:center; }

.sub { font-size:16px; color:var(--sl); line-height:1.75; max-width:540px; }
.subw,.sub-w { color:rgba(255,255,255,.60); }
.subc,.sub-c { text-align:center; margin:0 auto; }
.subwide { max-width:700px; }
.desc { font-size:15px; color:var(--sl); line-height:1.8; max-width:600px; }

/* Old aliases */
.sh-c  { text-align:center; }
.sh-c .sub,.sh-c .sub-c { margin:0 auto; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:7px;
  padding:11px 22px; font-size:14px; font-weight:600;
  border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; transition:all var(--t) var(--ease);
  white-space:nowrap; line-height:1; }
.btn svg { width:14px; height:14px; flex-shrink:0; transition:transform .18s; }
.btn:hover svg { transform:translateX(3px); }
.btn-lg { padding:14px 28px; font-size:15px; }
.btn-sm { padding:7px 15px; font-size:13px; }

.btn-gold { background:var(--gold); color:var(--navy); border-color:var(--gold); font-weight:700; }
.btn-gold:hover { background:var(--glt); border-color:var(--glt); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(200,151,58,.35); }

.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.36); }
.btn-ghost:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.65); }

.btn-outline { background:transparent; color:var(--tx); border-color:var(--bdk); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

.btn-navy { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-navy:hover { background:var(--nvl); transform:translateY(-2px); box-shadow:var(--s2); }

/* Light mode button fixes */
[data-theme="light"] .btn-outline { color:var(--navy); border-color:rgba(11,31,58,.25); }
[data-theme="light"] .btn-outline:hover { color:var(--gold); border-color:var(--gold); }
[data-theme="light"] .ph .btn-ghost,
[data-theme="light"] .hero .btn-ghost { color:var(--navy); border-color:rgba(11,31,58,.28); }
/* Light mode: btn-ghost in all contexts */
/* light btn-ghost → see end of file */
[data-theme="light"] .ph .btn-ghost:hover,
[data-theme="light"] .hero .btn-ghost:hover { background:rgba(11,31,58,.07); border-color:rgba(11,31,58,.5); }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.rv  { opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.rv.in { opacity:1; transform:none; }
.rvl { opacity:0; transform:translateX(-20px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.rvl.in { opacity:1; transform:none; }
.rv-l { opacity:0; transform:translateX(-20px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.rv-l.in { opacity:1; transform:none; }
.rv-r { opacity:0; transform:translateX(20px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.rv-r.in { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ── NAVIGATION ──────────────────────────────────────────────── */
/* ── Nav: always solid — no transparent state ever ── */
.nav-wrap { position:fixed; top:0; left:0; right:0; z-index:999; height:var(--nh); overflow:visible;
  background:var(--navy); backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 2px 20px rgba(0,0,0,.20);
  transition:background var(--t),box-shadow var(--t); }

.nav-in { display:flex; align-items:center; justify-content:space-between;
  height:var(--nh); gap:16px; overflow:visible; }
.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ── Logo: single image, CSS handles dark/light theming ── */
.nav-logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
  /* Default (dark backgrounds): show as-is or invert to white */
  filter: brightness(0) invert(1);
  transition: filter 0.2s;
}
/* Light mode: show the original colored logo without inversion */
[data-theme="light"] .nav-logo-img {
  filter: none;
}
/* Legacy classes kept for backward compat but hidden */
.logo-light { display: none !important; }
.logo-dark  { display: none !important; }

.nlf { font-family:var(--fh); font-size:22px; font-weight:700; color:#fff; display:none; }
.nlf em { color:var(--gold); font-style:normal; }

.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a { display:block; padding:7px 11px; font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.72); border-radius:6px; transition:all var(--t); }
.nav-links a:hover,.nav-links a.active { color:#fff; background:rgba(255,255,255,.09); }

/* ── Services dropdown — hover stays open across the gap ── */
.ndrop { position:relative; z-index:100; }
.ndrop > a { display:block; }
/* invisible bridge: extends hover zone below the link into the menu */
.ndrop::after { content:''; position:absolute; bottom:-20px; left:0; right:0; height:20px; background:transparent; }
.ndrop-menu { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:220px; background:var(--nvm); border:1px solid rgba(255,255,255,.1); border-radius:var(--rm);
  padding:8px; box-shadow:var(--s4); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease); z-index:101; }
.ndrop:hover .ndrop-menu, .ndrop.open .ndrop-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.ndrop-menu a { display:block; padding:9px 14px; font-size:13px;
  color:rgba(255,255,255,.70); border-radius:6px; transition:all .18s; }
.ndrop-menu a:hover { background:rgba(255,255,255,.07); color:#fff; padding-left:18px; }


.nav-r { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-email { font-size:12.5px; color:rgba(255,255,255,.44); transition:color var(--t); }
.nav-email:hover { color:var(--gold); }
.lang-btn { padding:5px 11px; border-radius:6px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.62); transition:all var(--t); }
.lang-btn:hover { border-color:var(--gold); color:var(--gold); }
.dm-btn { display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.62); transition:all var(--t); flex-shrink:0; cursor:pointer; }
.dm-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.dm-btn svg { width:16px; height:16px; }

.hbg { display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px; cursor:pointer;
  min-width:40px; min-height:40px; align-items:center; justify-content:center; }
.hbg span { display:block; width:22px; height:2px; background:#fff;
  border-radius:2px; transition:all .24s; }

.mob-nav { display:none; position:fixed; top:var(--nh); left:0; right:0; bottom:0;
  background:var(--navy); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.08);
  overflow-y:auto; z-index:998; box-shadow:var(--s5); }
.mob-nav.open { display:flex; flex-direction:column; }
/* Nav links section */
.mob-links { padding:8px 0; flex:1; }
.mob-links a { display:flex; align-items:center; padding:13px 24px; 
  color:rgba(255,255,255,.78); font-size:15px; font-weight:500; 
  border-bottom:1px solid rgba(255,255,255,.05); transition:all var(--t); }
.mob-links a:hover { color:var(--gold); background:rgba(255,255,255,.04); padding-left:28px; }
.mob-links a:last-child { border-bottom:none; }
.mob-links a.mob-cta { color:var(--gold); font-weight:600; }
/* Mobile nav footer area */
.mob-foot { padding:16px 24px 24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:12px; }
.mob-foot-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mob-foot .btn-gold { flex:1; justify-content:center; }
.mob-lang { display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border:1px solid rgba(255,255,255,.18); border-radius:8px; font-size:13px;
  font-weight:600; color:rgba(255,255,255,.72); transition:all var(--t); }
.mob-lang:hover { border-color:var(--gold); color:var(--gold); }
.mob-dm { display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65); cursor:pointer; transition:all var(--t); }
.mob-dm:hover { background:rgba(255,255,255,.14); color:#fff; }
.mob-dm svg { width:16px; height:16px; }

/* Light mode nav */
/* Light mode: nav is white — applies to ALL nav states */
[data-theme="light"] .nav-wrap {
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 0 rgba(11,31,58,.12),0 2px 24px rgba(11,31,58,.12);
}
[data-theme="light"] .nav-links a { color:#1E293B; }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { color:var(--gold); background:rgba(200,151,58,.08); }
[data-theme="light"] .nav-email { color:var(--sl); }
[data-theme="light"] .nav-email:hover { color:var(--gold); }
[data-theme="light"] .lang-btn { color:var(--sl); border-color:var(--bd); }
[data-theme="light"] .lang-btn:hover { border-color:var(--gold); color:var(--gold); }
[data-theme="light"] .nav-wrap .dm-btn { color:var(--navy); background:rgba(11,31,58,.10); border-color:rgba(11,31,58,.25); }
[data-theme="light"] .nav-wrap .dm-btn:hover { background:rgba(11,31,58,.14); color:var(--navy); }
[data-theme="light"] .hbg span { background:#1E293B; }
[data-theme="light"] .nlf { color:var(--navy); }
[data-theme="light"] .ndrop-menu { background:#fff; border-color:var(--bd); box-shadow:var(--s3); }
[data-theme="light"] .ndrop-menu a { color:#1E293B; }
[data-theme="light"] .ndrop-menu a:hover { background:var(--bg2); color:var(--gold); }
/* Mobile nav is always navy regardless of mode */
[data-theme="light"] .mob-nav { background:rgba(9,24,40,.98); }

/* ── PAGE HERO (.ph) ─────────────────────────────────────────── */
.ph { background:var(--navy); padding:130px 0 72px; position:relative; overflow:hidden; }
.ph::before { content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(200,151,58,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,151,58,.04) 1px,transparent 1px);
  background-size:52px 52px; }
.ph-glow { position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,151,58,.09) 0%,transparent 65%);
  top:-150px; right:-80px; pointer-events:none; }
.ph-in { position:relative; z-index:1; }
.ph-pill { display:inline-flex; align-items:center; gap:8px;
  background:rgba(200,151,58,.11); border:1px solid rgba(200,151,58,.26);
  border-radius:100px; padding:5px 14px; font-size:11.5px; font-weight:600;
  color:var(--gold); letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; }
.ph h1 { font-family:var(--fh); font-size:clamp(30px,4.5vw,52px); font-weight:800;
  color:#fff; line-height:1.1; letter-spacing:-.025em; margin-bottom:16px; }
.ph h1 span { color:var(--gold); }
.ph .sub { color:rgba(255,255,255,.62); max-width:560px; }
.ph-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ph-tag { display:inline-flex; align-items:center; gap:7px;
  background:rgba(200,151,58,.10); border:1px solid rgba(200,151,58,.22);
  border-radius:100px; padding:5px 13px; font-size:12px; font-weight:600; color:var(--gold); }
.ph-btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.bc { display:flex; align-items:center; gap:7px; font-size:12px;
  color:rgba(255,255,255,.40); margin-bottom:20px; }
.bc a { color:rgba(255,255,255,.40); transition:color var(--t); }
.bc a:hover { color:var(--gold); }
.bc-sep { opacity:.4; }
.breadcrumb { display:flex; align-items:center; gap:7px; font-size:12px;
  color:rgba(255,255,255,.40); margin-bottom:20px; }
.breadcrumb a { color:rgba(255,255,255,.40); transition:color var(--t); }
.breadcrumb a:hover { color:var(--gold); }

/* Light mode page hero */
[data-theme="light"] .ph {
  background:linear-gradient(150deg,#F4F6FA 0%,#FFFFFF 55%,#F2F5FA 100%) !important; }
[data-theme="light"] .ph::before {
  background-image:linear-gradient(rgba(11,31,58,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,58,.035) 1px,transparent 1px); }
[data-theme="light"] .ph h1 { color:var(--navy); }
[data-theme="light"] .ph h1 span { color:var(--gold); }
[data-theme="light"] .ph .sub { color:var(--sl); }
[data-theme="light"] .ph-pill { background:rgba(11,31,58,.06); border-color:rgba(11,31,58,.14); color:var(--navy); }
[data-theme="light"] .ph-tag  { background:rgba(11,31,58,.06); border-color:rgba(11,31,58,.12); color:var(--navy); }
[data-theme="light"] .bc,
[data-theme="light"] .bc a,
[data-theme="light"] .breadcrumb,
[data-theme="light"] .breadcrumb a { color:var(--sl); }

/* ── CONTENT CARDS ───────────────────────────────────────────── */
/* Universal card style — every content box should use this */
.card {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--rl);
  padding:28px;
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.card:hover { box-shadow:var(--s3); border-color:rgba(200,151,58,.30); transform:translateY(-2px); }
[data-theme="dark"] .card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="light"] .card { background:#fff; border-color:rgba(11,31,58,.10); box-shadow:var(--s1); }
[data-theme="light"] .card:hover { box-shadow:var(--s3); border-color:rgba(200,151,58,.30); }

/* feat cards (about, service pillars) */
.feat {
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--rl);
  padding:22px;
  transition:all var(--t) var(--ease);
}
.feat:hover { box-shadow:var(--s2); border-color:rgba(200,151,58,.28); transform:translateY(-2px); }
[data-theme="dark"] .feat { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="light"] .feat { background:#fff; border-color:rgba(11,31,58,.10); box-shadow:var(--s1); }
[data-theme="light"] .feat:hover { box-shadow:var(--s3); border-color:rgba(200,151,58,.28); }

/* Inline cards (compliance, recruitment — bg:var(--off)) */
/* In light mode these need to look like white cards */
[data-theme="light"] [style*="background:var(--off)"],
[data-theme="light"] [style*="background: var(--off)"] {
  background:#FFFFFF !important;
}
[data-theme="light"] [style*="background:var(--white)"],
[data-theme="light"] [style*="background: var(--white)"] {
  background:#FFFFFF !important;
}

/* Icon box */
.ic { width:42px; height:42px; border-radius:var(--r);
  background:var(--gpl); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; color:var(--gold); flex-shrink:0; }
.ic svg { width:20px; height:20px; }

/* Pillar */
.pillar { display:flex; gap:15px; align-items:flex-start; margin-bottom:26px; }
.pillar:last-child { margin-bottom:0; }
.p-ic { width:44px; height:44px; border-radius:var(--r); flex-shrink:0;
  background:var(--card); border:1px solid var(--bd);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--s1); }
.p-ic svg { width:20px; height:20px; color:var(--gold); }
[data-theme="dark"] .p-ic svg { color:var(--gold); }
.p-t { font-size:15px; font-weight:600; color:var(--tx); margin-bottom:3px; }
.p-d { font-size:13.5px; color:var(--sl); line-height:1.65; }
[data-theme="light"] .p-ic { background:#fff; border-color:rgba(11,31,58,.10); }

/* Note box */
.note { padding:16px 20px; background:var(--bg2); border:1px solid var(--bd);
  border-left:3px solid var(--gold); border-radius:var(--rm);
  display:flex; align-items:flex-start; gap:12px; }
.note svg { width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:2px; }
.note p { font-size:13.5px; color:var(--sl); line-height:1.65; }
.note a { color:var(--gold); font-weight:600; }

/* Checklist */
.cklist { display:grid; gap:9px; }
.cklist li { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--sl); }
.cklist li svg { width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:3px; }
.cklist-w li { color:rgba(255,255,255,.68); }
.cklist-w svg { color:var(--glt); }

/* Tag */
.tag  { display:inline-block; padding:2px 9px; border-radius:100px;
  font-size:11px; font-weight:600; background:var(--gpl); color:var(--gold); }
.name { font-size:15px; font-weight:600; color:var(--tx); margin-bottom:4px; }
.lnk  { font-size:13.5px; font-weight:600; color:var(--gold);
  display:inline-flex; align-items:center; gap:5px; }

/* ── STATS BAND ──────────────────────────────────────────────── */
.stat-band      { background:var(--gold); padding:48px 0; }
.stat-band-dark { background:var(--navy); padding:48px 0; }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.stat-row::before { content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),
    rgba(11,31,58,.12) calc(25% - 1px),rgba(11,31,58,.12) 25%); }
.stat-row-dk::before { background:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),
    rgba(255,255,255,.06) calc(25% - 1px),rgba(255,255,255,.06) 25%); }
.stat-item { text-align:center; padding:0 24px; position:relative; z-index:1; }
.stat-n { font-family:var(--fh); font-size:46px; font-weight:800; line-height:1; margin-bottom:4px; }
.stat-l { font-size:13px; font-weight:600; opacity:.65; }
.stat-band .stat-n,.stat-band .stat-l { color:var(--navy); }
.stat-band-dark .stat-n { color:#fff; }
.stat-band-dark .stat-l { color:rgba(255,255,255,.50); }

/* ── TRUST STRIP ─────────────────────────────────────────────── */
.tstrip { background:var(--bg2); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); padding:18px 0; }
.ts-in  { display:flex; align-items:center; gap:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.ts-lbl,.tl { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sll); white-space:nowrap; padding-right:22px;
  border-right:1px solid var(--bd); margin-right:22px; flex-shrink:0; }
.ts-items { display:flex; align-items:center; gap:22px; }
.ts-item,.titem { font-size:13px; color:var(--sl); white-space:nowrap; }
.tstrip-in { display:flex; align-items:center; gap:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }

/* ── PROCESS STEPS ───────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.steps::before { content:''; position:absolute; top:25px;
  left:calc(12.5% + 14px); right:calc(12.5% + 14px);
  height:2px; background:var(--bd); z-index:0; }
.step { text-align:center; padding:0 14px; position:relative; z-index:1; }
.step-n { width:50px; height:50px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:16px; margin:0 auto 18px;
  background:var(--card); box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--bd); color:var(--sll); }
.step-n.act { background:var(--gold); color:var(--navy); box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--gold); }
.step-t { font-size:14.5px; font-weight:600; color:var(--tx); margin-bottom:7px; }
.step-d { font-size:13px; color:var(--sl); line-height:1.65; }
.step-badge { display:inline-block; background:var(--gpl); color:var(--gold);
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; margin-top:8px; }

[data-theme="light"] .step-n { background:#fff; box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(11,31,58,.16); color:var(--sll); }
[data-theme="light"] .step-n.act { background:var(--gold); color:var(--navy); box-shadow:0 0 0 4px #fff,0 0 0 6px var(--gold); }
[data-theme="light"] .steps::before { background:rgba(11,31,58,.12); }

/* HR-outsourcing step flow */
.step-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step-flow::before { content:''; position:absolute; top:25px;
  left:calc(12.5% + 12px); right:calc(12.5% + 12px);
  height:2px; background:var(--bd); }
.sf-i { text-align:center; padding:0 14px; position:relative; z-index:1; }
.sf-n { width:50px; height:50px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:16px; margin:0 auto 18px;
  background:var(--gold); color:var(--navy); box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--gold); }
.sf-t { font-size:14px; font-weight:600; color:var(--tx); margin-bottom:7px; }
.sf-d { font-size:13px; color:var(--sl); line-height:1.6; }
.sf-day { display:inline-block; background:var(--gpl); color:var(--gold);
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; margin-top:8px; }
.peo-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }

[data-theme="light"] .sf-n { box-shadow:0 0 0 4px #fff,0 0 0 6px var(--gold); }
[data-theme="light"] .step-flow::before { background:rgba(11,31,58,.12); }

/* ── COMPARISON TABLE ────────────────────────────────────────── */
.cmp-wrap { background:var(--navy); border-radius:var(--rx); overflow:hidden; box-shadow:var(--s5); }
.cmp-head { background:rgba(200,151,58,.10); border-bottom:1px solid rgba(200,151,58,.14); padding:14px 22px; }
.cmp-lbl  { font-size:11px; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
.cmp-tbl  { width:100%; border-collapse:collapse; }
.cmp-tbl th { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.30); text-align:left; padding:10px 22px; border-bottom:1px solid rgba(255,255,255,.08); }
.cmp-tbl th.cs { color:var(--gold); }
.cmp-tbl td { padding:11px 22px; font-size:13px; color:rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.05); }
.cmp-tbl tr:last-child td { border-bottom:none; }
.cmp-tbl td.cs { color:#fff; font-weight:600; }
.ok  { color:var(--gold); font-weight:600; }
.no  { color:rgba(255,255,255,.24); }

/* ── LAW CARDS ───────────────────────────────────────────────── */
.law-card { background:var(--card); border:1px solid var(--bd); border-radius:var(--rm);
  padding:16px 18px; display:flex; align-items:flex-start; gap:13px;
  box-shadow:var(--s1); transition:all var(--t) var(--ease); color:inherit; }
.law-card:hover { border-color:var(--gold); box-shadow:var(--s2); transform:translateX(4px); }
[data-theme="dark"] .law-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="light"] .law-card { background:#fff; border-color:rgba(11,31,58,.10); }
.law-badge { background:var(--navy); color:var(--gold); font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.law-title { font-size:13.5px; font-weight:600; color:var(--tx); margin-bottom:2px; }
.law-desc  { font-size:12px; color:var(--sl); line-height:1.6; }

/* Laws page grid cards */
.law-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lg-card { background:var(--card); border:1px solid var(--bd); border-radius:var(--rm);
  overflow:hidden; display:block; transition:all var(--t) var(--ease); color:inherit; }
.lg-card:hover { box-shadow:var(--s3); transform:translateY(-4px); border-color:rgba(200,151,58,.38); }
[data-theme="light"] .lg-card { background:#fff; border-color:rgba(11,31,58,.10); }
.lg-top { background:var(--navy); padding:24px; position:relative; overflow:hidden; }
.lg-top::before { content:''; position:absolute; top:-20px; right:-20px;
  width:100px; height:100px; border-radius:50%; background:rgba(200,151,58,.09); }
.lg-num { position:absolute; bottom:-8px; right:14px; font-family:var(--fh);
  font-size:56px; font-weight:800; color:rgba(255,255,255,.04); line-height:1; }
.lg-badge { display:inline-block; background:var(--gold); color:var(--navy);
  font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:4px;
  margin-bottom:10px; position:relative; z-index:1; }
.lg-title { font-family:var(--fh); font-size:17px; font-weight:700; color:#fff;
  line-height:1.25; position:relative; z-index:1; }
.lg-body { padding:20px; }
.lg-desc { font-size:13.5px; color:var(--sl); line-height:1.7; margin-bottom:14px; }
.lg-more { font-size:13px; font-weight:600; color:var(--gold);
  display:flex; align-items:center; gap:4px; }
.lg-more svg { width:12px; height:12px; transition:transform .18s; }
.lg-card:hover .lg-more svg { transform:translateX(4px); }

/* ── TABLES ──────────────────────────────────────────────────── */
.ref-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.ref-table th { background:var(--navy); color:var(--gold); padding:11px 16px;
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.ref-table td { padding:11px 16px; border-bottom:1px solid var(--bd);
  color:var(--tx); vertical-align:top; }
.ref-table tr:last-child td { border-bottom:none; }
.ref-table tr:nth-child(even) td { background:var(--bg2); }
.ref-table .gold { color:var(--gold); font-weight:600; }

.tax-tbl { width:100%; border-collapse:collapse; border-radius:var(--rm); overflow:hidden; }
.tax-tbl th { background:var(--navy); color:var(--gold); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:12px 16px; text-align:left; }
.tax-tbl td { padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--bd); color:var(--tx); }
.tax-tbl tr:last-child td { border-bottom:none; }
.tax-tbl tr:nth-child(even) td { background:var(--bg2); }

/* ── RESOURCE CARDS ──────────────────────────────────────────── */
.res-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rc { display:block; background:var(--card); border:1px solid var(--bd);
  border-radius:var(--rl); padding:24px; transition:all var(--t); color:inherit; }
.rc:hover { box-shadow:var(--s3); transform:translateY(-4px); border-color:rgba(200,151,58,.38); }
[data-theme="dark"] .rc { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="light"] .rc { background:#fff; border-color:rgba(11,31,58,.10); box-shadow:var(--s1); }
[data-theme="light"] .rc:hover { box-shadow:var(--s3); }
.rc-cat { display:inline-block; background:var(--gpl); color:var(--gold);
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:4px; margin-bottom:10px; }
.rc-title { font-size:15px; font-weight:700; color:var(--tx); margin-bottom:8px; line-height:1.4; }
.rc-desc  { font-size:13px; color:var(--sl); line-height:1.65; margin-bottom:14px; }
.rc-meta  { display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--sll); }
.rc-arrow { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--gold); }
.rc-arrow svg { width:12px; height:12px; transition:transform .18s; }
.rc:hover .rc-arrow svg { transform:translateX(4px); }

/* Featured resource */
/* rc-featured: always navy (featured = stands out) */
.rc-featured { background:var(--navy); border:1px solid rgba(200,151,58,.25); border-radius:var(--rl);
  overflow:hidden; display:block; transition:all var(--t); margin-bottom:28px; color:#fff; }
.rc-featured:hover { box-shadow:0 8px 32px rgba(11,31,58,.4); border-color:var(--gold); }
.rc-feat-title { font-family:var(--fh); font-size:22px; font-weight:800; color:#fff !important; line-height:1.25; margin-bottom:10px; }
.rc-feat-desc  { font-size:14px; color:rgba(255,255,255,.60) !important; line-height:1.7; margin-bottom:14px; }
.rc-feat-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(200,151,58,.12); border:1px solid rgba(200,151,58,.25); border-radius:100px; padding:4px 12px; font-size:11px; font-weight:700; color:var(--gold); margin-bottom:12px; }
.rc-feat-badge { display:inline-block; background:var(--gpl); color:var(--gold);
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:4px; margin-bottom:10px; }
.rc-feat-title { font-family:var(--fh); font-size:22px; font-weight:700; color:var(--tx); line-height:1.3; margin-bottom:10px; }
.rc-feat-desc  { font-size:14px; color:var(--sl); line-height:1.7; margin-bottom:18px; }
.rc-feat-meta  { font-size:12px; color:var(--sll); margin-bottom:18px; }
.rc-feat-cta   { display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--gold); }

/* ── SERVICES PAGE ───────────────────────────────────────────── */
.svc-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px; }
.svc-big { background:var(--navy); border-radius:var(--rl); padding:40px 36px;
  color:#fff; text-decoration:none; display:block; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.06); transition:all var(--t) var(--ease); }
.svc-big::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--glt)); }
.svc-big:hover { transform:translateY(-4px); box-shadow:var(--s5); }
.svc-big .ic { background:rgba(200,151,58,.14); margin-bottom:20px; }
.svc-big .ic svg { color:var(--gold); }
.svc-big h3 { font-family:var(--fh); font-size:22px; font-weight:700;
  color:#fff; margin-bottom:10px; }
.svc-big p { font-size:13.5px; color:rgba(255,255,255,.56); line-height:1.7; margin-bottom:20px; }
.svc-big ul { list-style:none; display:grid; gap:7px; margin-bottom:24px; }
.svc-big li { font-size:13px; color:rgba(255,255,255,.65); padding-left:14px; position:relative; }
.svc-big li::before { content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--gold); }
.svc-big .lnk { font-size:13px; font-weight:600; color:var(--gold); display:flex; align-items:center; gap:5px; }
.svc-big .lnk svg { width:12px; height:12px; transition:transform .18s; }
.svc-big:hover .lnk svg { transform:translateX(4px); }

.svc-sml { background:var(--card); border:1px solid var(--bd); border-radius:var(--rl);
  padding:30px; text-decoration:none; display:block; transition:all var(--t) var(--ease); }
.svc-sml:hover { border-color:var(--gold); box-shadow:var(--s2); transform:translateY(-3px); }
[data-theme="dark"] .svc-sml { background:rgba(255,255,255,.04); }
[data-theme="light"] .svc-sml { background:#fff; border-color:rgba(11,31,58,.10); }
.svc-sml .ic { background:var(--bg2); border:1px solid var(--bd); }
.svc-sml .ic svg { color:var(--navy); }
[data-theme="dark"] .svc-sml .ic svg { color:var(--gold); }
.svc-sml h3 { font-family:var(--fh); font-size:18px; font-weight:700;
  margin-bottom:8px; color:var(--tx); }
.svc-sml p { font-size:13px; color:var(--sl); line-height:1.65; margin-bottom:16px; }
.svc-sml .lnk { font-size:13px; font-weight:600; color:var(--gold); display:flex; align-items:center; gap:5px; }

/* ── PRICING ─────────────────────────────────────────────────── */
.price-row { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.price-c { background:var(--card); border:1px solid var(--bd); border-radius:var(--rx);
  padding:32px; transition:all var(--t); }
.price-c:hover { box-shadow:var(--s3); transform:translateY(-4px); }
[data-theme="dark"] .price-c { background:rgba(255,255,255,.04); }
[data-theme="light"] .price-c { background:#fff; border-color:rgba(11,31,58,.10); box-shadow:var(--s1); }
[data-theme="light"] .price-c:hover { box-shadow:var(--s3); }
.price-c.feat { background:var(--navy); border-color:var(--navy); }

/* Pricing page .pc cards */
.pc { background:var(--card); border:1px solid var(--bd); border-radius:var(--rx);
  padding:32px; display:flex; flex-direction:column; position:relative; transition:all var(--t); }
.pc:hover { box-shadow:var(--s3); transform:translateY(-4px); }
[data-theme="dark"] .pc { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="light"] .pc { background:#fff; border-color:rgba(11,31,58,.10); box-shadow:var(--s1); }
[data-theme="light"] .pc:hover { box-shadow:var(--s3); }
.pc.featured { background:var(--navy) !important; border-color:var(--gold) !important;
  box-shadow:0 0 0 1px var(--gold); }

/* ── JOB CARDS ───────────────────────────────────────────────── */
.job-card { background:var(--card); border:1px solid var(--bd); border-radius:var(--rl);
  padding:24px 28px; transition:all var(--t); }
.job-card:hover { box-shadow:var(--s2); border-color:rgba(200,151,58,.30); transform:translateY(-2px); }
[data-theme="dark"] .job-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="light"] .job-card { background:#fff; border-color:rgba(11,31,58,.10); box-shadow:var(--s1); }
[data-theme="light"] .job-card:hover { box-shadow:var(--s3); }
/* Featured job card: always navy */
.job-card.featured { background:var(--navy) !important; border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold),var(--s3) !important; color:#fff !important; }
.job-card.featured .jc-title { color:#fff !important; }
.job-card.featured .jc-dept  { color:rgba(255,255,255,.55) !important; }
.job-card.featured .jc-desc  { color:rgba(255,255,255,.70) !important; }
.job-card.featured .skill-tag { background:rgba(200,151,58,.15); border-color:rgba(200,151,58,.35); color:rgba(255,255,255,.85) !important; }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.tst-sec { background:var(--bg2); padding:80px 0; }
[data-theme="dark"] .tst-sec { background:var(--nvm); }
[data-theme="light"] .tst-sec { background:#F4F7FA; }
.tst-track-wrap { overflow:hidden; margin:0 -24px; padding:0 24px; }
.tst-track { display:flex; gap:20px; transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform; padding-bottom:8px; }
.tst-card { flex:0 0 calc(100% - 48px); max-width:520px;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--rx);
  padding:28px; box-shadow:var(--s2); display:flex; flex-direction:column; gap:18px; }
[data-theme="dark"] .tst-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
[data-theme="light"] .tst-card { background:#fff; border-color:rgba(11,31,58,.10); }
@media(min-width:700px)  { .tst-card { flex:0 0 460px; } }
@media(min-width:1024px) { .tst-card { flex:0 0 480px; } }
.tst-quote  { font-size:15px; line-height:1.75; color:var(--sl); font-style:italic; flex:1; }
[data-theme="dark"] .tst-quote { color:rgba(255,255,255,.65); }
.tst-footer { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tst-avatar { width:44px; height:44px; border-radius:50%; background:var(--gold);
  color:var(--navy); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tst-info { flex:1; min-width:0; }
.tst-name { font-weight:700; font-size:14px; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="dark"] .tst-name { color:#fff; }
[data-theme="light"] .tst-name { color:var(--navy); }
.tst-dot { width:7px; height:7px; border-radius:50%; background:var(--bd);
  cursor:pointer; transition:background var(--t); }
.tst-dot.active { background:var(--gold); }
.tst-dots { display:flex; gap:6px; margin-top:24px; justify-content:center; }

/* ── CONTACT FORMS ───────────────────────────────────────────── */
.fg { margin-bottom:14px; }
.fl { display:block; font-size:11px; font-weight:600;
  color:rgba(255,255,255,.50); margin-bottom:5px; letter-spacing:.05em; text-transform:uppercase; }
.fi,.fsel,.fta { width:100%; padding:10px 12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r); color:#fff; font-size:13.5px;
  font-family:var(--fb); transition:border-color var(--t); outline:none; }
.fi::placeholder,.fta::placeholder { color:rgba(255,255,255,.28); }
.fi:focus,.fsel:focus,.fta:focus { border-color:var(--gold); }
.fsel { color:rgba(255,255,255,.70); }
.fsel option { background:var(--navy); }
.fta { resize:vertical; min-height:90px; }
.frow2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fsub { width:100%; padding:12px; background:var(--gold); color:var(--navy);
  border:none; border-radius:var(--r); font-size:14px; font-weight:700;
  cursor:pointer; transition:all var(--t); margin-top:4px; }
.fsub:hover { background:var(--glt); transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(200,151,58,.36); }

/* Pricing page form overrides (light-surface form) */
.qf-wrap { background:var(--bg2); border:1px solid var(--bd);
  border-radius:var(--rx); padding:40px; max-width:680px; margin:0 auto; }
[data-theme="dark"] .qf-wrap { background:rgba(255,255,255,.04); }
[data-theme="light"] .qf-wrap { background:#fff; border-color:rgba(11,31,58,.10); }
.qf-title { font-family:var(--fh); font-size:24px; font-weight:700; color:var(--tx); margin-bottom:6px; }
.qf-sub   { font-size:14px; color:var(--sl); margin-bottom:28px; }

/* Light-surface form fields (pricing page, careers) */
[data-theme="light"] .qf-wrap .fi,
[data-theme="light"] .qf-wrap .fsel,
[data-theme="light"] .qf-wrap .fta,
[data-theme="light"] .qf-wrap .fl { background:#fff; border-color:rgba(11,31,58,.18);
  color:var(--tx); }
[data-theme="light"] .qf-wrap .fl { color:var(--sl); }
[data-theme="light"] .qf-wrap .fi::placeholder,
[data-theme="light"] .qf-wrap .fta::placeholder { color:var(--sll); }

/* Tab bars */
.sf-tabs,.tabs { display:flex; background:rgba(0,0,0,.22); border-radius:var(--r);
  overflow:hidden; margin-bottom:18px; }
.sf-tab,.tab { flex:1; padding:9px 12px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.44); cursor:pointer; text-align:center;
  border:none; background:none; font-family:var(--fb); transition:all var(--t); }
.sf-tab.on,.tab.on { background:var(--gold); color:var(--navy); }
.sf-pane,.pane { display:none; }
.sf-pane.on,.pane.on { display:block; }
.form-ok { display:none; text-align:center; padding:28px 0; }
.form-ok-icon  { font-size:36px; margin-bottom:9px; }
.form-ok-t,.form-ok-title { font-size:16px; font-weight:700; color:#fff; margin-bottom:4px; }
.form-ok-d,.form-ok-desc  { font-size:12.5px; color:rgba(255,255,255,.44); }

/* Contact panel */
.cpanel { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rx); padding:32px; }
.cpanel-t { font-size:17px; font-weight:700; color:#fff; margin-bottom:4px; }
.cpanel-d { font-size:12.5px; color:rgba(255,255,255,.40); margin-bottom:22px; }
.cont-opt { display:flex; align-items:center; gap:13px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rm); padding:14px 15px; text-decoration:none;
  transition:all var(--t); margin-bottom:10px; }
.cont-opt:hover { background:rgba(200,151,58,.07); border-color:rgba(200,151,58,.25); }
.cont-opt-ic { width:36px; height:36px; border-radius:var(--r); flex-shrink:0;
  background:rgba(200,151,58,.10); display:flex; align-items:center; justify-content:center; }
.cont-opt-ic svg { width:17px; height:17px; color:var(--gold); }
.cont-opt-t { font-size:13.5px; font-weight:600; color:#fff; }
.cont-opt-d { font-size:11.5px; color:rgba(255,255,255,.40); }

/* ── CTA / BRAND SECTIONS ────────────────────────────────────── */
.cta-sec { background:var(--navy); padding:80px 0; position:relative;
  overflow:hidden; text-align:center; }
.cta-sec::before,.cta-bg::before,.why-bg::before { content:''; position:absolute;
  inset:0; background:radial-gradient(ellipse 70% 70% at 50%,rgba(200,151,58,.07),transparent);
  pointer-events:none; }
.cta-in { position:relative; z-index:1; }
.cta-t { font-family:var(--fh); font-size:clamp(26px,4vw,44px); font-weight:800;
  color:#fff; margin-bottom:14px; letter-spacing:-.02em; }
.cta-t span { color:var(--gold); }
.cta-d { font-size:16px; color:rgba(255,255,255,.56); margin-bottom:30px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-bg { background:var(--navy); position:relative; overflow:hidden; text-align:center; }
.why-bg { background:var(--navy); position:relative; overflow:hidden; }
[data-theme="light"] .cta-sec,[data-theme="light"] .cta-bg,
[data-theme="light"] .why-bg { background:var(--navy); }
/* .serve section also stays navy in light mode (contains .sg dark card grid) */
[data-theme="light"] .serve { background:var(--navy); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item { border-bottom:1px solid var(--bd); }
.faq-q { padding:18px 0; display:flex; align-items:center; gap:14px;
  cursor:pointer; user-select:none; }
.faq-ic { width:24px; height:24px; border-radius:50%; background:var(--gpl);
  border:1px solid rgba(200,151,58,.25); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; font-weight:700; font-size:15px;
  color:var(--gold); transition:transform .22s; }
.faq-item.open .faq-ic { transform:rotate(45deg); }
.faq-qt { font-family:var(--fh); font-size:15px; font-weight:700; color:var(--tx); flex:1; }
.faq-a  { max-height:0; overflow:hidden; transition:max-height .35s ease,padding .3s; }
.faq-item.open .faq-a { max-height:1000px; padding-bottom:18px; }
.faq-a p { font-size:14px; color:var(--sl); line-height:1.8; }
[data-theme="light"] .faq-item { border-color:rgba(11,31,58,.09); }
[data-theme="light"] .faq-qt { color:var(--navy); }
[data-theme="light"] .faq-a p { color:var(--sl); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer { background:#06101E; padding-top:60px; }
.ftg { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.flb a { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
/* Footer logo — ALWAYS white (footer background is always dark) */
.footer-logo-img { height:52px; width:auto; display:block; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.9; margin-bottom:14px; }
.flb-fb { font-family:var(--fh); font-size:20px; font-weight:700; color:#fff; display:none; }
.flb-fb em { color:var(--gold); font-style:normal; }
.flb p { font-size:13px; color:rgba(255,255,255,.42); line-height:1.7; max-width:270px; margin-bottom:16px; }
.flci { display:flex; align-items:flex-start; gap:8px; font-size:12.5px;
  color:rgba(255,255,255,.42); margin-bottom:8px; transition:color var(--t); }
.flci:hover { color:var(--gold); }
.flci svg { width:13px; height:13px; flex-shrink:0; margin-top:2px; }
.flct { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.24); margin-bottom:14px; }
.flls { display:grid; gap:7px; }
.flls a { font-size:12.5px; color:rgba(255,255,255,.42); transition:color var(--t),padding-left var(--t); }
.flls a:hover { color:var(--gold); padding-left:4px; }
.ftbtm { border-top:1px solid rgba(255,255,255,.06); padding:18px 0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ftcopy,.f-copy { font-size:11.5px; color:rgba(255,255,255,.22); margin-bottom:4px; }
.ftdisc,.f-disc { font-size:10.5px; color:rgba(255,255,255,.16); line-height:1.6; max-width:620px; }
.ftbl,.fbl { display:flex; gap:16px; flex-shrink:0; }
.ftbl a,.fbl a { font-size:11.5px; color:rgba(255,255,255,.26); transition:color var(--t); }
.ftbl a:hover,.fbl a:hover { color:var(--gold); }

/* ── UTILITY ─────────────────────────────────────────────────── */
.cookie { position:fixed; bottom:max(20px,env(safe-area-inset-bottom,20px));
  left:20px; right:20px; max-width:540px; background:var(--nvm);
  border:1px solid rgba(255,255,255,.10); border-radius:var(--rm);
  padding:16px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  box-shadow:var(--s4); z-index:9998; font-size:13px; color:rgba(255,255,255,.65);
  transform:translateY(20px); opacity:0; transition:all .4s var(--ease); pointer-events:none; }
.cookie.show { transform:none; opacity:1; pointer-events:auto; }
.cookie p { margin:0; flex:1; min-width:160px; }
.cookie a { color:var(--gold); }
.cb-btns { display:flex; gap:8px; flex-shrink:0; align-items:center; }

.btt { position:fixed; bottom:28px; right:24px; width:42px; height:42px;
  border-radius:50%; background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--s2);
  opacity:0; pointer-events:none; transition:all var(--t) var(--ease);
  z-index:997; border:none; cursor:pointer; }
.btt.show { opacity:1; pointer-events:auto; }
.btt:hover { background:var(--glt); transform:translateY(-3px); }
.btt svg { width:18px; height:18px; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px) {
  .nav-links,.nav-email,.lang-btn,.btn-gold.btn-sm { display:none !important; }
  /* Hide desktop dm-btn but keep mobile one */
  .nav-in .dm-btn { display:none !important; }
  .hbg { display:flex !important; }
  .grid2,.grid3,.grid4 { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .steps::before { display:none; }
  .ftg { grid-template-columns:1fr 1fr; }
  .stat-row { grid-template-columns:1fr 1fr; }
  .stat-row::before { display:none; }
  .cmp-wrap { display:none; }
  .res-grid,.svc-sml,.price-row,.law-grid { grid-template-columns:1fr 1fr; }
  .svc-row { grid-template-columns:1fr; }
  .peo-grid { grid-template-columns:1fr; gap:36px; }
  .step-flow { grid-template-columns:1fr 1fr; gap:28px; }
  .step-flow::before { display:none; }
  .nav-logo img, .nav-logo-img { height:58px !important; }
}
@media(max-width:768px) {
  .sec,.sec-sm { padding:60px 0; }
  .w { padding:0 18px; }
  .grid2,.grid3,.grid4 { grid-template-columns:1fr; }
  .ftg { grid-template-columns:1fr; }
  .ftbtm { flex-direction:column; }
  .frow2 { grid-template-columns:1fr; }
  .cta-btns { flex-direction:column; align-items:center; }
  .res-grid,.price-row,.law-grid,.svc-sml { grid-template-columns:1fr; }
  .steps,.step-flow { grid-template-columns:1fr !important; }
  .steps::before,.step-flow::before { display:none; }
  .svc-row { grid-template-columns:1fr; }
  .svc-big { padding:24px 20px; }
  .feat { padding:20px 16px; }
  .ph, .ph-ar { padding:140px 0 64px !important; }
  .ph h1, .ph-ar h1 { font-size:clamp(26px,7vw,42px) !important; }
  .ph .sub, .ph-ar .sub { font-size:15px; }
  .ph-btns { flex-direction:column; gap:10px; }
  .ph-btns .btn { width:100%; text-align:center; justify-content:center; }
  .cta-btns .btn { width:100%; justify-content:center; }
  .flb { text-align:left; align-items:flex-start; }
  .flb a { justify-content:flex-start; }
  .ftbtm { text-align:left; gap:12px; }
  .ftbl,.fbl { justify-content:flex-start; flex-wrap:wrap; }
  table { font-size:13px; }
  .tst-card { padding:20px 16px; }
  .nav-wa { display:none; }
  .nav-in { padding:0 2px; }
  .hbg { padding:8px; margin-right:2px; }
  .flct { text-align:left; }
  .flls { text-align:left; }
  /* Inline grid override */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]  { grid-template-columns:1fr !important; gap:20px !important; }
  [style*="grid-template-columns:repeat(2"]  { grid-template-columns:1fr !important; gap:20px !important; }
  [style*="grid-template-columns:repeat(3"]  { grid-template-columns:1fr !important; gap:18px !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"]{ grid-template-columns:1fr !important; gap:16px !important; }
  [style*="gap:72px"],[style*="gap:64px"],[style*="gap:56px"] { gap:28px !important; }
  [style*="padding:52px 44px"] { padding:28px 20px !important; }
  [style*="padding:48px"]      { padding:28px !important; }
  .tst-dots { justify-content:center; }
  .ctc-grid { grid-template-columns:1fr !important; }
  .about-grid { grid-template-columns:1fr; }
  .cmp-table { display:none; }
  .cmp-mob   { display:block; }
  .tstrip-in { flex-wrap:wrap; gap:10px; }
  .titem { font-size:13px; }
  .nbg { grid-template-columns:1fr 1fr; }
  .law-grid  { grid-template-columns:1fr; }
  .alg { grid-template-columns:1fr; }
  .nav-logo img, .nav-logo-img { height:52px !important; }
}
@media(max-width:480px) {
  .h2 { font-size:clamp(22px,6.5vw,36px); }
  .w  { padding:0 14px; }
  .stat-row { grid-template-columns:1fr 1fr; }
  .flb img { height:80px; }
  [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  [style*="gap:28px"],[style*="gap:32px"] { gap:16px !important; }
  .nbg { grid-template-columns:1fr; }
}

/* ── HOMEPAGE HERO ───────────────────────────────────────────── */
/* Dark (default): navy bg, all white text — already set inline */
/* Light mode: pale blue bg, dark navy text */
/* ── Light mode: suppress navy glow that bleeds blue on mobile ── */
[data-theme="light"] .hglow2 { opacity: 0; }
[data-theme="light"] .hglow  { background:radial-gradient(circle,rgba(200,151,58,.05) 0%,transparent 65%); }

[data-theme="light"] .hero {
  background:linear-gradient(150deg,#F4F6FA 0%,#FFFFFF 55%,#F2F5FA 100%) !important; }
[data-theme="dark"] .hero {
  background:linear-gradient(150deg,var(--navy) 0%,#0F2444 55%,var(--navy) 100%);
}

[data-theme="light"] .hgrid {
  background-image:linear-gradient(rgba(11,31,58,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,58,.03) 1px,transparent 1px); }
[data-theme="light"] .h1     { color:var(--navy); }
[data-theme="light"] .h1 .g  { color:var(--gold); }
[data-theme="light"] .h1 .ul::after { background:var(--gold); }
[data-theme="light"] .hdesc  { color:var(--sl); }
[data-theme="light"] .htrust { border-top-color:rgba(11,31,58,.10); }
[data-theme="light"] .ht     { color:var(--sl); }
[data-theme="light"] .pill   { background:rgba(11,31,58,.06); border-color:rgba(11,31,58,.14); }
[data-theme="light"] .pill span { color:var(--navy); }
[data-theme="light"] .pill-dot { background:var(--gold); }
/* Hero stats card stays dark for contrast against light hero bg */
[data-theme="light"] .hcard  { background:rgba(11,31,58,.90); border-color:rgba(11,31,58,.15); }
[data-theme="light"] .hcs-n  { color:#fff; }
[data-theme="light"] .hcs-l  { color:rgba(255,255,255,.50); }
[data-theme="light"] .hc-live { color:rgba(255,255,255,.45); }
/* Homepage service cards */
[data-theme="light"] .svcc   { background:#fff; border-color:rgba(11,31,58,.10); }
[data-theme="light"] .svcc.p { background:var(--navy); }
[data-theme="light"] .svcc .st { color:var(--navy); }
[data-theme="light"] .svcc .sd { color:var(--sl); }
[data-theme="light"] .sic    { background:rgba(11,31,58,.06); }
[data-theme="light"] .sic svg { color:var(--navy); }
[data-theme="light"] .svcc.p .sic { background:rgba(200,151,58,.14); }
[data-theme="light"] .svcc.p .sic svg { color:var(--gold); }
[data-theme="light"] .svcc.p .st { color:#fff; }
[data-theme="light"] .svcc.p .sd { color:rgba(255,255,255,.52); }
[data-theme="light"] .svcc.p .sf li { color:rgba(255,255,255,.52); }
/* Numbers band */
[data-theme="light"] .nb  { background:var(--gold); }
[data-theme="light"] .nbv { color:#0B1F3A; }
[data-theme="light"] .nbl { color:rgba(11,31,58,.56); }
/* AR hero light */
[data-theme="light"] .hero .h-title { color:var(--navy); }
[data-theme="light"] .hero .h-desc  { color:var(--sl); }
[data-theme="light"] .hero .h-pill  { background:rgba(11,31,58,.06); border-color:rgba(11,31,58,.14); }
[data-theme="light"] .hero .h-pill-t { color:var(--navy); }
[data-theme="light"] .stats-card { background:rgba(255,255,255,.95); border-color:rgba(11,31,58,.12); }

/* ── LIGHT MODE — GLOBAL POLISH ──────────────────────────────── */
[data-theme="light"] body  { background:#fff; color:var(--tx); }
/* 
   Heading color: DO NOT set h1/h2/h3 tags globally - they inherit body color.
   Light mode body color = #1A2B40 (dark navy) = readable on white/light bg.
   Navy sections use hardcoded color:#fff on their headings = stays white.
   Only use class-based selectors to be precise.
*/
[data-theme="light"] .h2   { color:var(--navy); }
[data-theme="light"] .h2 span,[data-theme="light"] .h2 em { color:var(--gold); }
/* White variants — always white (used on navy backgrounds) */
[data-theme="light"] .h2.h2-w,
[data-theme="light"] .h2w,
[data-theme="light"] .h2-w { color:#fff !important; }
[data-theme="light"] .sub-w,
[data-theme="light"] .subw  { color:rgba(255,255,255,.60) !important; }
/* .subw inside light-bg .ph sections must darken */
[data-theme="light"] .ph .sub-w,
[data-theme="light"] .ph .subw { color:var(--sl) !important; }
/* .sub in light context */
[data-theme="light"] .sec .sub,
[data-theme="light"] .ph  .sub { color:var(--sl); }
[data-theme="light"] .ph p  { color:var(--sl); }
[data-theme="light"] .lbl  { color:var(--gold); }
[data-theme="light"] .lbl::before { background:var(--gold); }

/* ── DARK SECTIONS: force white text in light mode ───────────── */
/* Sections that keep navy bg in BOTH modes — need white text always */

/* .sec-navy — used as explicit dark section class */
[data-theme="light"] .sec-navy h1,
[data-theme="light"] .sec-navy h2,
[data-theme="light"] .sec-navy h3 { color:#fff !important; }
[data-theme="light"] .sec-navy .h2 { color:#fff !important; }
[data-theme="light"] .sec-navy .h2 span,
[data-theme="light"] .sec-navy .h2 em { color:var(--gold) !important; }
[data-theme="light"] .sec-navy p,
[data-theme="light"] .sec-navy .sub,
[data-theme="light"] .sec-navy .desc { color:rgba(255,255,255,.65) !important; }
[data-theme="light"] .sec-navy .lbl,
[data-theme="light"] .sec-navy .lbl::before { color:var(--gold) !important; background:var(--gold) !important; }

/* .cta-sec / .cta-bg — navy in both modes */
[data-theme="light"] .cta-t { color:#fff; }
[data-theme="light"] .cta-d { color:rgba(255,255,255,.60); }

/* .why-bg — navy in both modes */
[data-theme="light"] .why-bg .h2 { color:#fff; }
[data-theme="light"] .why-bg .sub { color:rgba(255,255,255,.65); }
[data-theme="light"] .why-bg .lbl { color:var(--gold); }
[data-theme="light"] .why-bg .lbl::before { background:var(--gold); }
[data-theme="light"] .why-bg .ptitle { color:#fff; }
[data-theme="light"] .why-bg .pdesc { color:rgba(255,255,255,.60); }

/* .stat-band-dark */
[data-theme="light"] .stat-band-dark .h2 { color:#fff; }

/* .cont-bg / .csec — contact sections on navy bg */
[data-theme="light"] .cont-bg h2,
[data-theme="light"] .cont-bg .h2,
[data-theme="light"] .cont-bg .ctitle,
[data-theme="light"] .cont-bg .cont-t { color:#fff; }
[data-theme="light"] .cont-bg .sub,
[data-theme="light"] .cont-bg .cdesc,
[data-theme="light"] .cont-bg .cont-d,
[data-theme="light"] .cont-bg p { color:rgba(255,255,255,.65); }
[data-theme="light"] .cont-bg .lbl { color:var(--gold); }

[data-theme="light"] .csec h2,
[data-theme="light"] .csec .h2,
[data-theme="light"] .csec .ctitle { color:#fff; }
[data-theme="light"] .csec .sub,
[data-theme="light"] .csec .cdesc,
[data-theme="light"] .csec p { color:rgba(255,255,255,.65); }
[data-theme="light"] .csec .lbl { color:var(--gold); }
/* Contact options */
[data-theme="light"] .csec .copt,
[data-theme="light"] .cont-bg .copt { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--rm); padding:13px 14px;
  text-decoration:none; transition:all .24s; margin-bottom:9px; color:rgba(255,255,255,.85); }
.copt:hover { background:rgba(255,255,255,.07); border-color:rgba(200,151,58,.3); }
[data-theme="light"] .csec .copt-t,
[data-theme="light"] .cont-bg .copt-t { font-size:13px; font-weight:600; color:#fff; }
[data-theme="light"] .csec .copt-d,
[data-theme="light"] .cont-bg .copt-d { font-size:11px; color:rgba(255,255,255,.34); }
/* Form panel — csec stays navy, form elements need explicit white-on-navy */
[data-theme="light"] .csec .fpt,
[data-theme="light"] .cont-bg .fpt { font-size:16px; font-weight:700; color:#fff; margin-bottom:3px; }
[data-theme="light"] .csec .fps { font-size:12px; color:rgba(255,255,255,.36); margin-bottom:18px; }
[data-theme="light"] .csec .fp { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rx); padding:28px; }
[data-theme="light"] .csec .tabs    { background:rgba(0,0,0,.25); }
[data-theme="light"] .csec .tab     { color:rgba(255,255,255,.45); }
[data-theme="light"] .csec .tab.on  { background:var(--gold); color:var(--navy); }
[data-theme="light"] .csec .fl      { color:rgba(255,255,255,.55); }
[data-theme="light"] .csec .fi,
[data-theme="light"] .csec .fsel,
[data-theme="light"] .csec .fta     { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);
                                       color:#fff; }
[data-theme="light"] .csec .fi::placeholder,
[data-theme="light"] .csec .fta::placeholder { color:rgba(255,255,255,.30); }
[data-theme="light"] .csec .fsel option       { background:var(--navy); }
[data-theme="light"] .csec .fi:focus,
[data-theme="light"] .csec .fsel:focus,
[data-theme="light"] .csec .fta:focus         { border-color:var(--gold); }

/* .serve section (homepage navy grid) */
[data-theme="light"] .serve .h2 { color:#fff; }
[data-theme="light"] .serve .sub { color:rgba(255,255,255,.65); }
/* svctitle/svcdesc/svclist in the serve section */
[data-theme="light"] .serve .svctitle,
[data-theme="light"] .serve h3 { color:#fff !important; }
[data-theme="light"] .serve .svcdesc,
[data-theme="light"] .serve p { color:rgba(255,255,255,.62) !important; }
[data-theme="light"] .serve .svclist li { color:rgba(255,255,255,.75) !important; }
[data-theme="light"] .serve .lbl { color:var(--gold); }

/* Footer always dark */
[data-theme="light"] .footer .h2 { color:#fff; }
[data-theme="light"] .footer p,
[data-theme="light"] .footer .sub { color:rgba(255,255,255,.60); }

/* ── INLINE NAVY BACKGROUNDS: universal white text override ──── */
/* Any element with inline style="background:var(--navy)..." keeps white text */
[data-theme="light"] [style*="background:var(--navy)"] .h2,
[data-theme="light"] [style*="background:var(--navy)"] h1,
[data-theme="light"] [style*="background:var(--navy)"] h2,
[data-theme="light"] [style*="background:var(--navy)"] h3 { color:#fff !important; }
[data-theme="light"] [style*="background:var(--navy)"] .h2 span,
[data-theme="light"] [style*="background:var(--navy)"] .h2 em { color:var(--gold) !important; }
[data-theme="light"] [style*="background:var(--navy)"] .sub { color:rgba(255,255,255,.65) !important; }
[data-theme="light"] [style*="background:var(--navy)"] .lbl { color:var(--gold) !important; }
[data-theme="light"] [style*="background:var(--navy)"] .lbl::before { background:var(--gold) !important; }

/* Section borders give subtle rhythm */
[data-theme="light"] .sec  { border-bottom:1px solid rgba(11,31,58,.04); }
[data-theme="light"] .cta-sec,[data-theme="light"] .cta-bg,
[data-theme="light"] .why-bg,[data-theme="light"] .stat-band-dark,
[data-theme="light"] .footer { border-bottom:none; background:#1A2D4A; }

/* Comparison table light */
/* cmp comparison table: always on navy background, always white text */
[data-theme="light"] .cmptbl th { color:var(--gold); }
[data-theme="light"] .cmptbl th.cs { color:var(--gold); }
[data-theme="light"] .cmptbl td { color:rgba(255,255,255,.60); }
[data-theme="light"] .cmptbl td.cs { color:#fff; }
[data-theme="light"] .cmptbl tr:nth-child(even) td { background:rgba(255,255,255,.04); }

/* Trust strip */
[data-theme="light"] .tstrip { background:#EEF1F6; border-color:rgba(11,31,58,.08); }
[data-theme="light"] .tl,[data-theme="light"] .titem,[data-theme="light"] .ts-lbl { color:var(--sll); }

/* Specific page overrides */
[data-theme="light"] .val-card,[data-theme="light"] .team-card,
[data-theme="light"] .about-card { background:#fff; border-color:rgba(11,31,58,.10); }
[data-theme="light"] .skill-tag  { background:#EEF1F6; border-color:rgba(11,31,58,.10); color:var(--sl); }
[data-theme="light"] .badge-ft,[data-theme="light"] .badge-loc { background:rgba(11,31,58,.06); color:var(--navy); }
/* Inside featured card (navy bg) badges must stay light */
[data-theme="light"] .job-card.featured .badge-ft  { background:rgba(255,255,255,.12); color:rgba(255,255,255,.80); }
[data-theme="light"] .job-card.featured .badge-loc { background:rgba(255,255,255,.10); color:rgba(255,255,255,.70); }
[data-theme="light"] .job-card.featured .badge-feat { background:var(--gold); color:var(--navy); }
[data-theme="light"] .cv-zone    { background:#F4F7FA; border-color:rgba(11,31,58,.12); }
/* app-wrap is always navy — cv-zone inside it must stay dark */
[data-theme="light"] .app-wrap .cv-zone { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
[data-theme="light"] .app-wrap .cv-zone:hover { background:rgba(200,151,58,.07); border-color:var(--gold); }
[data-theme="light"] .app-wrap .cv-lbl  { color:rgba(255,255,255,.60); }
[data-theme="light"] .app-wrap .cv-hint { color:rgba(255,255,255,.30); }
[data-theme="light"] .nbg .nb    { background:#fff; border-color:rgba(11,31,58,.10); }
[data-theme="light"] .cg-item    { background:#fff; border-color:rgba(11,31,58,.10); }

/* Article/resource pages */
[data-theme="light"] .art-body p       { color:var(--tx); }
[data-theme="light"] .art-body h2,
[data-theme="light"] .art-body h3      { color:var(--navy); }
[data-theme="light"] .art-body strong  { color:var(--navy); }
[data-theme="light"] .art-body .hl     { background:#FBF3E3; border-color:var(--gold); color:var(--tx); }
[data-theme="light"] .art-body td      { color:var(--tx); border-color:rgba(11,31,58,.09); }
[data-theme="light"] .art-body tr:nth-child(even) td { background:#F4F7FA; }
[data-theme="light"] .sb-card    { background:#fff; border-color:rgba(11,31,58,.10); }
[data-theme="light"] .sb-cta-box { background:var(--navy); }


/* ── DARK MODE TABLE BORDER BOOSTS ────────────────────────────
   var(--bd) = rgba(255,255,255,.09) is too faint for table rows in dark mode.
   Boost to .16 for clear row separation.
   ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .ref-table td,
[data-theme="dark"] .ref-table th  { border-color:rgba(255,255,255,.16); }
[data-theme="dark"] .tax-tbl td,
[data-theme="dark"] .tax-tbl th    { border-color:rgba(255,255,255,.16); }
[data-theme="dark"] .art-body td   { border-color:rgba(255,255,255,.14) !important; }
[data-theme="dark"] .art-body tr:nth-child(even) td { background:rgba(255,255,255,.04); }

/* Guarantee strip (pricing) */
[data-theme="light"] .guarantee-strip { background:rgba(200,151,58,.06); border-color:rgba(200,151,58,.20); }
[data-theme="light"] .g-title { color:var(--navy); }
[data-theme="light"] .g-desc  { color:var(--sl); }

/* Addon table (pricing) */
[data-theme="light"] .addon-row { background:#fff; }
[data-theme="light"] .addon-row.head { background:var(--navy); }
[data-theme="light"] .addon-row div { color:var(--tx); }
[data-theme="light"] .addon-price    { color:var(--gold); }
[data-theme="light"] .addon-desc     { color:var(--sl); }


/* ── INLINE CARD FIXES (compliance, recruitment inline bg:var(--off)) ── */
/* These pages use style="background:var(--off);border:1px solid var(--border)..." */
/* In light mode --off=#F4F7FA and white page bg makes them invisible — fix: */
[data-theme="light"] [style*="background:var(--off)"][style*="border:1px solid var(--border)"] {
  background:#FFFFFF !important;
  box-shadow:0 2px 8px rgba(11,31,58,.07) !important;
}
[data-theme="light"] [style*="background:var(--white)"][style*="border:1px solid var(--border)"] {
  background:#FFFFFF !important;
  box-shadow:0 2px 8px rgba(11,31,58,.07) !important;
}
/* Dark mode keeps these as-is since --off and --white resolve to dark values */

/* ── PRICING page .pc-cta-out in light mode ── */
[data-theme="light"] .pc-cta-out {
  background:transparent;
  border:2px solid rgba(11,31,58,.22);
  color:var(--navy);
}
[data-theme="light"] .pc-cta-out:hover {
  border-color:var(--gold);
  color:var(--gold);
}

/* ── PRICING .pc-amount, .pc-name light mode text ── */
[data-theme="light"] .pc-amount { color:var(--navy); }
[data-theme="light"] .pc-name   { color:var(--navy); }
[data-theme="light"] .pc-tagline,.pc-unit,.pc-from { color:var(--sl); }
[data-theme="light"] .pc-features li { color:var(--sl); }
[data-theme="light"] .pc.featured .pc-name,
[data-theme="light"] .pc.featured .pc-amount { color:#fff; }
[data-theme="light"] .pc.featured .pc-tagline,
[data-theme="light"] .pc.featured .pc-unit,
[data-theme="light"] .pc.featured .pc-from { color:rgba(255,255,255,.50); }
[data-theme="light"] .pc.featured .pc-features li { color:rgba(255,255,255,.65); }

/* ── ABOUT page stat numbers (inside navy box) ── */
/* These are inline style="font-family:var(--fh);font-size:30px;color:var(--gold)" — already fine */

/* ── RECRUITMENT skills/tags pill ── */
/* style="background:var(--white);border:1px solid var(--border);border-radius:100px..." */
[data-theme="light"] [style*="background:var(--white)"][style*="border-radius:100px"] {
  background:#F4F7FA !important;
  border-color:rgba(11,31,58,.12) !important;
}


/* ═══════════════════════════════════════════════════════════════
   UI/UX REFINEMENTS v24
   ═══════════════════════════════════════════════════════════════ */

/* ── Enhanced card hover depth ─────────────────────────────── */
.card, .feat, .law-card, .rc, .svc-sml, .price-c, .tst-card, .job-card {
  will-change:transform;
}

/* ── Improved .svc-big cards (service page) ───────────────── */
.svc-big { box-shadow:0 4px 24px rgba(11,31,58,.22); }
.svc-big:hover { box-shadow:0 12px 40px rgba(11,31,58,.38); }
/* Light mode: navy card on white section needs visible border */
[data-theme="light"] .svc-big { border-color:rgba(11,31,58,.18) !important; }
[data-theme="light"] .svc-big:hover { border-color:rgba(200,151,58,.45) !important; }

/* ── Better serve section cards (homepage) ────────────────── */
.svc { border:1px solid rgba(200,151,58,.04); }
.svc:hover { border-color:rgba(200,151,58,.14); }

/* ── Refined stat numbers ─────────────────────────────────── */
.stat-n, .stn, .h3n {
  background:linear-gradient(135deg, var(--gold), var(--glt));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Button: gold gets subtle shadow by default ────────────── */
.btn-gold {
  box-shadow:0 2px 12px rgba(200,151,58,.20);
  letter-spacing:.01em;
}
.btn-gold:hover {
  box-shadow:0 8px 28px rgba(200,151,58,.40);
}

/* ── .lbl label: refined styling ──────────────────────────── */
.lbl {
  font-size:10.5px;
  letter-spacing:.16em;
}

/* ── Section header margin tweak for rhythm ───────────────── */
.sh { margin-bottom:48px; }

/* ── Better .ph (inner page hero) ─────────────────────────── */
.ph-pill {
  font-size:11px;
  letter-spacing:.12em;
  font-weight:700;
}

/* ── Improved breadcrumb ──────────────────────────────────── */
.breadcrumb { font-size:12.5px; }

/* ── Card top accent line for key cards ───────────────────── */
.svc-sml {
  border-top:3px solid transparent;
  transition:all var(--t) var(--ease);
}
.svc-sml:hover {
  border-top-color:var(--gold);
}

/* ── Resources featured card inner padding ─────────────────── */
.rc-featured {
  padding:32px 36px;
}
@media(max-width:768px) {
  .rc-featured { padding:24px 20px; }
}

/* ── Better job card skill tags ───────────────────────────── */
.skill-tag {
  font-size:11.5px;
  font-weight:600;
  padding:4px 11px;
}

/* ── Improved mobile experience ───────────────────────────── */
@media(max-width:768px) {
  /* Ensure sections have consistent mobile padding */
  .ph, .ph-ar { padding:140px 0 64px !important; }
  .h2 { font-size:clamp(24px,7.5vw,36px); }
  .sub { font-size:15px; max-width:100%; }

  /* Serve cards full width on mobile */
  .sg { grid-template-columns:1fr; gap:2px; }
  .svc { padding:36px 28px; }

  /* Better mobile svc-big */
  .svc-big { padding:28px 22px; }
  .svc-big h3 { font-size:19px; }

  /* Better mobile buttons */
  .btn-lg { padding:13px 22px; font-size:14px; }

  /* Mobile card rhythm */
  .grid3, .grid2 { gap:14px; }

  /* Better mobile footer */
  .footer { padding:48px 0 28px; }
}

@media(max-width:480px) {
  .ph, .ph-ar { padding:130px 0 56px !important; }
  .lbl { font-size:10px; }
}

/* ── Light mode: ensure card borders are visible ──────────── */
[data-theme="light"] .svc-sml:hover { border-top-color:var(--gold); box-shadow:var(--s2); }
[data-theme="light"] .law-card:hover { box-shadow:var(--s2); border-color:rgba(200,151,58,.30); }
[data-theme="light"] .tst-card { box-shadow:var(--s1); }


/* ═══════════════════════════════════════════════════════════════
   UI/UX ENHANCEMENTS v27
   Surgical polish — no HTML changes. All overrides here.
   Rollback: remove this entire block to restore v26.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY — more spread & weight ─────────────────────
   lbl: larger, slightly wider tracking for authority
   h2:  bigger max, tighter letter-spacing for premium feel
   sub: slightly darker for readability
   ──────────────────────────────────────────────────────────── */
.lbl {
  font-size:11.5px;
  letter-spacing:.18em;
  font-weight:800;
  gap:12px;
}
.lbl::before {
  width:28px;
  height:2px;
}
.h2 {
  font-size:clamp(28px,3.8vw,46px);
  letter-spacing:-.025em;
  font-weight:800;
  line-height:1.12;
  margin-bottom:16px;
}
.sub {
  font-size:16.5px;
  line-height:1.8;
  color:var(--sl);
}
[data-theme="light"] .sub { color:#3D5166; }
[data-theme="dark"]  .sub { color:rgba(255,255,255,.55); }

/* ── 2. HERO STAT CARD — more presence & visual weight ────────
   Stronger border, gold top-accent, better stat cell separation
   ──────────────────────────────────────────────────────────── */
.hcard {
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-top:2px solid var(--gold);
  box-shadow:0 24px 64px rgba(0,0,0,.32), 0 0 0 1px rgba(200,151,58,.12);
}
.hc-top {
  background:rgba(200,151,58,.12);
  border-bottom:1px solid rgba(200,151,58,.18);
  padding:14px 22px;
}
.hc-stats {
  gap:1px;
  background:rgba(255,255,255,.07);
}
.hcs {
  background:rgba(6,20,40,.55);
  padding:20px 22px;
}
.hcs-n {
  font-size:30px;
  letter-spacing:-.02em;
  margin-bottom:4px;
}
.hcs-l {
  font-size:11.5px;
  color:rgba(255,255,255,.48);
  font-weight:500;
}
.flag {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  font-size:11.5px;
  font-weight:500;
}
.ctag {
  background:rgba(200,151,58,.12);
  border:1px solid rgba(200,151,58,.24);
  font-size:11px;
  font-weight:700;
  color:var(--glt);
  letter-spacing:.04em;
}
/* Light mode: hcard stays dark (intentional contrast in light hero) */
[data-theme="light"] .hcard {
  background:rgba(11,31,58,.88);
  border-color:rgba(11,31,58,.20);
  border-top-color:var(--gold);
  box-shadow:0 24px 64px rgba(11,31,58,.25), 0 0 0 1px rgba(200,151,58,.15);
}

/* ── 3. SECTION RHYTHM — deliberate light mode alternation ────
   Stronger contrast between white and off-white sections.
   Makes the page feel structured, not random.
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] section.sec:nth-of-type(even) { background:#EEF2F8; }
[data-theme="light"] .sec-alt { background:#EEF2F8 !important; }

/* Section headers: a little more breathing room above h2 */
.sh  { margin-bottom:52px; }
.sh-c { margin-bottom:52px; }

/* ── 4. CARD HIERARCHY — 3 clear tiers ───────────────────────
   Tier 1 (.card/.feat): quiet base, shadow on hover
   Tier 2 (.svcc): accent hover with gold underline
   Tier 3 (.svcc.p / .pc.featured): dominant — navy + gold border
   ──────────────────────────────────────────────────────────── */

/* Tier 1: slightly elevated base in light mode */
[data-theme="light"] .card  { box-shadow:0 1px 3px rgba(11,31,58,.06), 0 4px 16px rgba(11,31,58,.05); }
[data-theme="light"] .feat  { box-shadow:0 1px 3px rgba(11,31,58,.06), 0 4px 16px rgba(11,31,58,.05); }
[data-theme="light"] .card:hover { box-shadow:0 8px 32px rgba(11,31,58,.12); }
[data-theme="light"] .feat:hover { box-shadow:0 8px 32px rgba(11,31,58,.12); }

/* Tier 2: service cards — gold top accent on hover (cleaner than current) */
.svcc {
  border-radius:var(--rl);
  border-top:3px solid transparent;
  transition:all .26s var(--ease);
}
.svcc:hover { border-top-color:var(--gold); }
.svcc.p     { border-top-color:var(--gold); }

/* Tier 3: featured card stronger gold ring */
.pc.featured {
  box-shadow:0 0 0 2px var(--gold), var(--s4) !important;
}
[data-theme="light"] .pc.featured {
  box-shadow:0 0 0 2px var(--gold), 0 16px 48px rgba(11,31,58,.18) !important;
}

/* ── 5. SERVE SECTION CARDS — reduce noise, add structure ─────
   Left gold accent line gives each card a clear anchor.
   Better internal spacing between elements.
   ──────────────────────────────────────────────────────────── */
.svc {
  padding:52px 44px 52px 48px;
  border-left:none;
  border-top:none;
  border-radius:0;
  box-shadow:inset 3px 0 0 rgba(200,151,58,.18);
  transition:box-shadow .24s, background .24s;
}
.svc:hover {
  box-shadow:inset 3px 0 0 var(--gold);
  border-color:rgba(200,151,58,.08);
}
.svctag {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(200,151,58,.12);
  border:1px solid rgba(200,151,58,.26);
  border-radius:6px;   /* less pill, more badge */
  padding:5px 13px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--glt);
  margin-bottom:18px;
}
.svctitle {
  font-size:22px;
  margin-bottom:12px;
  line-height:1.2;
}
.svcdesc {
  font-size:14.5px;
  line-height:1.8;
  margin-bottom:26px;
}
.svclist {
  margin-bottom:30px;
}
.svclist li {
  font-size:14px;
  padding:5px 0 5px 22px;
  gap:9px;
}
.svclist li svg {
  width:15px;
  height:15px;
  color:var(--gold);
  flex-shrink:0;
  margin-right:8px;
}
/* The grid gap between the two serve cards */
.sg {
  gap:0;
  border-radius:var(--rx);
  overflow:hidden;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(200,151,58,.10);
}

/* ── 6. COMPARISON TABLE — premium feel ──────────────────────
   Staffona column gets a subtle gold background tint.
   Row hover state. Bigger padding, cleaner spacing.
   ──────────────────────────────────────────────────────────── */
.cmp {
  border:1px solid rgba(200,151,58,.22);
  box-shadow:0 32px 80px rgba(0,0,0,.30), 0 0 0 1px rgba(200,151,58,.10);
}
.cmp-head {
  background:rgba(200,151,58,.14);
  padding:16px 24px;
}
.cmptbl th {
  padding:12px 22px;
  font-size:11px;
  letter-spacing:.08em;
}
.cmptbl th.cs {
  background:rgba(200,151,58,.06);
}
.cmptbl td {
  padding:13px 22px;
  font-size:13.5px;
  color:rgba(255,255,255,.58);
  transition:background .15s;
}
.cmptbl td.cs {
  background:rgba(200,151,58,.05);
  font-weight:700;
  color:#fff;
}
.cmptbl tr:hover td { background:rgba(255,255,255,.03); }
.cmptbl tr:hover td.cs { background:rgba(200,151,58,.09); }
.ok { color:var(--glt); font-weight:700; }

/* ── 7. NUMBERS BAND (.nb) — bolder visual impact ─────────────
   Make the gold numbers band feel stronger as a divider.
   ──────────────────────────────────────────────────────────── */
.nbi {
  padding:28px 32px;
  position:relative;
}
.nbi::after {
  content:'';
  position:absolute;
  right:0; top:20%; bottom:20%;
  width:1px;
  background:rgba(11,31,58,.12);
}
.nbi:last-child::after { display:none; }
.nbv {
  font-size:clamp(28px,3.5vw,40px);
  letter-spacing:-.03em;
  font-weight:800;
  line-height:1;
  margin-bottom:5px;
}
.nbl {
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}
/* Dark mode numbers band */
[data-theme="dark"] .nbi::after { background:rgba(255,255,255,.07); }

/* ── 8. PROCESS STEPS — cleaner look ─────────────────────────
   Bigger step numbers, better connector line treatment
   ──────────────────────────────────────────────────────────── */
.ps-n {
  font-size:15px;
  font-weight:800;
  letter-spacing:.06em;
}
.ps-title {
  font-size:15px;
  font-weight:700;
}
.ps-day {
  font-size:11px;
  letter-spacing:.08em;
  font-weight:700;
}

/* ── 9. NAV POLISH ────────────────────────────────────────────
   Slightly more refined nav link hover state.
   ──────────────────────────────────────────────────────────── */
.nav-link {
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
}
.nav-link:hover { color:var(--gold); }
[data-theme="light"] .nav-link:hover { color:var(--gold); }

/* ── 10. TRUST STRIP — cleaner alignment ─────────────────────*/
.tstrip { padding:18px 0; }
.titem  { font-size:13.5px; font-weight:500; opacity:.65; }
.tl     { font-size:10.5px; letter-spacing:.14em; }

/* ── 11. TESTIMONIAL CARDS — more weight ─────────────────────*/
[data-theme="light"] .tst-card {
  box-shadow:0 2px 8px rgba(11,31,58,.06), 0 8px 24px rgba(11,31,58,.07);
}
[data-theme="light"] .tst-card:hover {
  box-shadow:0 8px 32px rgba(11,31,58,.13);
  transform:translateY(-2px);
}
.tst-card { transition:box-shadow .24s var(--ease), transform .24s var(--ease); }
.tst-quote {
  font-size:15.5px;
  line-height:1.8;
}

/* ── 12. FOOTER — tighter, cleaner ───────────────────────────*/
.footer-logo { margin-bottom:16px; }
.footer-desc { font-size:14px; line-height:1.8; }

/* ── 13. INNER PAGE HERO (.ph) — more visual pop ─────────────*/
.ph {
  padding:120px 0 80px;
}
.ph h1 {
  font-size:clamp(30px,4.5vw,54px);
  letter-spacing:-.025em;
  line-height:1.1;
}

/* ── 14. PILL (hero pill label) — slightly more refined ───────*/
.pill {
  padding:7px 18px 7px 12px;
  border-radius:100px;
  gap:10px;
}
.pill span {
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

/* ── RESPONSIVE OVERRIDES for enhancements ───────────────────*/
@media(max-width:768px) {
  .svc { padding:40px 28px 40px 32px; }
  .hcard { border-top-width:2px; }
  .nbi { padding:22px 20px; }
  .nbv { font-size:clamp(24px,7vw,36px); }
  .svctitle { font-size:20px; }
}
@media(max-width:480px) {
  .svc { padding:32px 22px 32px 26px; }
  .svctag { font-size:10px; padding:4px 10px; }
}


/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENT ADDITIONS — used by EN + AR pages
   ══════════════════════════════════════════════════════════════ */

/* ── Contact section ─────────────────────────────────────────── */
.cin  { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.copic{ width:38px; height:38px; border-radius:var(--r); flex-shrink:0;
        background:rgba(200,151,58,.1); border:1px solid rgba(200,151,58,.2);
        display:flex; align-items:center; justify-content:center; color:var(--gold); }
.copic svg { width:17px; height:17px; }

/* ── Tabs (contact form switcher) ───────────────────────────── */
.tabs { display:flex; background:rgba(0,0,0,.22); border-radius:var(--r); overflow:hidden; margin-bottom:16px; }
.tab-btn { flex:1; padding:9px 14px; font-size:13px; font-weight:600; color:rgba(255,255,255,.45);
           background:transparent; border:none; cursor:pointer; transition:all var(--t); }
.tab-btn.active { background:rgba(255,255,255,.1); color:#fff; }
.pane { display:none; }
.pane.active { display:block; }

/* ── Resources grid ─────────────────────────────────────────── */
.resg  { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.resc  { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--rm);
         padding:20px 16px; text-decoration:none; display:block; transition:all .24s; }
.resc:hover { border-color:var(--gold); transform:translateY(-2px); }
.restag  { display:inline-block; background:var(--gpl); color:var(--gold);
           font-size:10px; font-weight:700; padding:3px 9px; border-radius:4px; margin-bottom:9px; }
.resttl  { font-size:13.5px; font-weight:600; color:var(--tx); margin-bottom:5px; line-height:1.4; }
.resdesc { font-size:12px; color:var(--sl); line-height:1.6; }

/* ── Ticker strip (Aligned With) ────────────────────────────── */
.tstrip    { background:var(--bg2); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); padding:18px 0; overflow:hidden; }
.tstrip-in { display:flex; align-items:center; gap:0; overflow-x:auto;
             scrollbar-width:none; -ms-overflow-style:none; }
.tstrip-in::-webkit-scrollbar { display:none; }
.tl,.ts-lbl { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
              color:var(--sll); white-space:nowrap; padding-right:22px;
              border-right:1px solid var(--bd); margin-right:22px; flex-shrink:0; }
.titems,.ts-items { display:flex; align-items:center; gap:22px; }
.titem,.ts-item { font-size:12.5px; color:var(--sl); white-space:nowrap; font-weight:500; }

/* ── Hero shared (EN index, AR home) ────────────────────────── */
.hgrid { position:absolute; inset:0;
         background-image:linear-gradient(rgba(200,151,58,.042) 1px,transparent 1px),
           linear-gradient(90deg,rgba(200,151,58,.042) 1px,transparent 1px);
         background-size:54px 54px; pointer-events:none; }
.hglow  { position:absolute; width:800px; height:800px; border-radius:50%;
          background:radial-gradient(circle,rgba(200,151,58,.09) 0%,transparent 65%);
          top:-200px; right:-120px; pointer-events:none; }
.hglow2 { position:absolute; width:500px; height:500px; border-radius:50%;
          background:radial-gradient(circle,rgba(26,52,96,.65) 0%,transparent 70%);
          bottom:-80px; left:-60px; pointer-events:none; }

/* ── ph-ar (Arabic page hero) ───────────────────────────────── */
.ph-ar { background:var(--nvm); padding:130px 0 72px; position:relative; overflow:hidden; }

/* ── Form OK success ─────────────────────────────────────────── */
.form-ok { display:none; text-align:center; padding:32px 0; }

/* ── Light mode additions ────────────────────────────────────── */
[data-theme="light"] .resc { background:#fff; border-color:var(--bd); }
[data-theme="light"] .resc:hover { border-color:var(--gold); }
[data-theme="light"] .resttl { color:var(--navy); }
[data-theme="light"] .resdesc { color:var(--sl); }
[data-theme="light"] .tstrip { background:#EEF3FA; border-color:rgba(11,31,58,.1); }
[data-theme="light"] .tl,.tls-lbl { color:var(--sll); border-right-color:rgba(11,31,58,.12); }
[data-theme="light"] .copic { background:rgba(11,31,58,.06); border-color:rgba(11,31,58,.12); color:var(--navy); }
[data-theme="light"] .tabs { background:rgba(11,31,58,.07); }
[data-theme="light"] .tab-btn { color:rgba(11,31,58,.4); }
[data-theme="light"] .tab-btn.active { background:rgba(11,31,58,.1); color:var(--navy); }
[data-theme="light"] .ph-ar {
  background:linear-gradient(150deg,#F4F6FA 0%,#FFFFFF 55%,#F2F5FA 100%) !important;
}
[data-theme="light"] .ph-ar h1,
[data-theme="light"] .ph-ar .ph-in h1 { color:var(--navy); }
[data-theme="light"] .ph-ar h1 span { color:var(--gold); }
[data-theme="light"] .ph-ar .breadcrumb a { color:var(--sl); }
[data-theme="light"] .ph-ar .ph-pill { background:rgba(11,31,58,.07); border-color:rgba(11,31,58,.14); }
[data-theme="light"] .ph-ar .ph-pill span { color:var(--navy); }
[data-theme="light"] .ph-ar .ph-tag { background:rgba(11,31,58,.07); color:var(--navy); }

/* ── Responsive additions ────────────────────────────────────── */
@media(max-width:1024px) {
  .cin  { grid-template-columns:1fr; gap:40px; }
  .resg { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .cin  { gap:32px; }
  .resg { grid-template-columns:1fr; }
  .tstrip-in { gap:0; }
}

.frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }


/* ── Icon Size System ───────────────────────────────────── */
.icon-sm, .icon-sm svg { width:16px!important; height:16px!important; flex-shrink:0!important; }
.icon-md, .icon-md svg { width:20px!important; height:20px!important; flex-shrink:0!important; }
.icon-lg, .icon-lg svg { width:24px!important; height:24px!important; flex-shrink:0!important; }
/* Universal SVG restrict to prevent bloated UI elements without specific sizing */
svg:not(.svg-raw) { flex-shrink: 0; }
a svg, button svg, .lg-more svg, .lnk svg { max-width: 24px; max-height: 24px; }