/* ============================================================
   MJ International — Corporate Design System
   Premium · International · Mobile-first · EN + বাংলা typography
   ============================================================ */
:root{
  --navy-900:#04284A; --navy-800:#0A3D6D; --navy-700:#0E5493; --navy-600:#1773C4;
  --gold:#00A6E8; --gold-2:#56C7F5; --gold-soft:#E3F3FD;
  --bg:#F5F7FB; --ink:#1C2A3A; --muted:#5A6B80; --line:#E3E8F0;
  --white:#FFFFFF; --wa:#25D366; --red:#C0392B; --green:#1E8E5A; --blue:#1773C4;
  --shadow-sm:0 1px 3px rgba(4,43,74,.07), 0 4px 14px rgba(4,43,74,.06);
  --shadow-md:0 4px 10px rgba(4,43,74,.08), 0 12px 32px rgba(4,43,74,.10);
  --radius:14px; --radius-sm:9px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-head:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
html[data-lang="bn"]{
  --font:"Noto Sans Bengali","Hind Siliguri","SolaimanLipi","Inter",system-ui,sans-serif;
  --font-head:"Noto Sans Bengali","Hind Siliguri","SolaimanLipi",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--white);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--navy-600); text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--navy-800); line-height:1.25; margin:.2em 0 .4em}
p{margin:.4em 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
.container{width:min(1180px,92%); margin-inline:auto}
.narrow{max-width:760px}
.center-text{text-align:center}
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:8px; top:8px; z-index:999; background:#fff; padding:8px 14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  font-family:var(--font); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.8rem 1.5rem; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  line-height:1.2; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn .ic{width:18px; height:18px}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:var(--navy-900); box-shadow:0 6px 18px rgba(0,166,232,.35)}
.btn-gold:hover{color:var(--navy-900); box-shadow:0 8px 22px rgba(0,166,232,.45)}
.btn-navy{background:var(--navy-800); color:#fff}
.btn-navy:hover{background:var(--navy-600); color:#fff}
.btn-white{background:#fff; color:var(--navy-800)}
.btn-white:hover{color:var(--navy-600)}
.btn-outline{background:transparent; color:var(--navy-800); border-color:var(--navy-800)}
.btn-outline:hover{background:var(--navy-800); color:#fff}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.22); color:#fff}
.btn-ghost-dark{background:transparent; color:var(--muted); border-color:var(--line)}
.btn-ghost-dark:hover{color:var(--navy-800); border-color:var(--navy-800)}
.btn-danger{background:#fff; color:var(--red); border-color:#E6B0AA}
.btn-danger:hover{background:var(--red); color:#fff}
.btn-wa{background:var(--wa); color:#fff}
.btn-wa:hover{color:#fff; filter:brightness(1.05)}
.btn-sm{padding:.45rem .9rem; font-size:.83rem}
.btn-lg{padding:.95rem 2rem; font-size:1.02rem}
.btn-block{width:100%}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; color:var(--navy-600)}
.link-arrow .ic{width:16px; height:16px; transition:transform .15s}
.link-arrow:hover .ic{transform:translateX(3px)}
.link-arrow.small{font-size:.85rem}

/* ---------- badges / chips / alerts ---------- */
.badge{display:inline-block; padding:.22rem .65rem; border-radius:999px; font-size:.75rem; font-weight:700; background:#EEF2F8; color:var(--navy-700); letter-spacing:.02em}
.badge-gold{background:var(--gold-soft); color:#8A6D0B}
.badge-green{background:#E4F4EC; color:var(--green)}
.badge-red{background:#FCEBE9; color:var(--red)}
.badge-blue{background:#E7EEF8; color:var(--navy-600)}
.chip{display:inline-flex; align-items:center; padding:.45rem 1rem; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.88rem; font-weight:600; color:var(--navy-700); margin:.2rem .25rem}
.chip.active,.chip:hover{background:var(--navy-800); color:#fff; border-color:var(--navy-800)}
.filter-chips{margin:.6rem 0 1.2rem}
.alert{padding:.9rem 1.15rem; border-radius:var(--radius-sm); margin:.8rem 0; font-size:.95rem; border:1px solid}
.alert-ok{background:#E4F4EC; border-color:#BFE3D0; color:#14663F}
.alert-err{background:#FCEBE9; border-color:#F0C4BE; color:#8E2B1E}
.alert-warn{background:#FDF6E3; border-color:#EFE0AE; color:#7A6108}
.alert-info{background:#E7EEF8; border-color:#C6D6EC; color:var(--navy-700)}
.note-line{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--muted); background:#F7F9FC; border-left:3px solid var(--gold); padding:.8rem 1rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1rem 0}
.note-line .ic{width:18px;height:18px; flex:none; color:var(--gold); margin-top:2px}
.empty-note{text-align:center; color:var(--muted); padding:2.5rem 1rem; background:#F7F9FC; border-radius:var(--radius); border:1px dashed var(--line)}
.hint{color:var(--muted); font-size:.88rem}
.hint.tiny{font-size:.78rem}
.opt{color:var(--muted); font-weight:500; font-size:.85em}

/* ---------- top bar ---------- */
.topbar{background:var(--navy-900); color:#C9D4E4; font-size:.86rem}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.45rem 0; flex-wrap:wrap}
.topbar-left,.topbar-right{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.topbar-item{display:inline-flex; align-items:center; gap:.4rem; color:#C9D4E4}
.topbar-item:hover{color:var(--gold-2)}
.topbar-item .ic{width:15px;height:15px; color:var(--gold)}
.lang-switch{display:inline-flex; align-items:center; gap:.35rem}
.lang-link{color:#C9D4E4; font-weight:600; padding:.1rem .3rem; border-radius:4px}
.lang-link.active{color:var(--navy-900); background:var(--gold-2)}
.lang-link:hover{color:#fff}
.lang-link.active:hover{color:var(--navy-900)}
.lang-sep{opacity:.4}

/* ---------- navbar ---------- */
/* v4.32 - sticky fix: the header wrapper bounded the sticky navbar (parent height ~= nav height
   => zero sticky range, nav scrolled away with the page). display:contents removes the wrapper
   box so topbar scrolls away naturally while .navbar pins for the whole page. The wrapper itself
   is unstyled, and print rules still hide it via !important. */
.site-header{display:contents}
.navbar{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(4,43,74,.04)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px}
.brand{display:flex; align-items:center; gap:.8rem}
.logo-mark{width:62px; height:62px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:var(--font-head); font-size:1.16rem; color:var(--navy-800); letter-spacing:.01em}
.brand-tag{font-size:.72rem; color:var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.nav-menu{display:flex; align-items:center; gap:.15rem}
.nav-link{
  display:inline-flex; align-items:center; gap:.3rem; padding:.65rem .78rem; color:var(--navy-800);
  font-weight:600; font-size:.93rem; border:0; background:none; cursor:pointer; border-radius:8px;
  font-family:var(--font);
}
.nav-link:hover{color:var(--navy-600); background:#F3F6FB}
.caret{width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6}
.nav-item{position:relative}
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  padding:.4rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s ease;
}
.nav-item.has-drop:hover .dropdown,.nav-item.has-drop.open .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{display:block; padding:.55rem .85rem; border-radius:7px; color:var(--ink); font-size:.92rem; font-weight:500}
.dropdown a:hover{background:#F3F6FB; color:var(--navy-600)}
.nav-cta-item{margin-left:.5rem}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{width:24px; height:2.5px; background:var(--navy-800); border-radius:2px}

/* ---------- hero ---------- */
.hero{position:relative; background-size:cover; background-position:center; color:#fff; margin-top:0}
.hero-inner{padding:6.5rem 0 7.5rem; min-height:480px; display:flex; align-items:center}
.hero-content{max-width:640px}
.hero-eyebrow{color:var(--gold-2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; margin-bottom:.8rem}
.hero-title{color:#fff; font-size:clamp(2rem, 4.6vw, 3.3rem); margin:.1em 0 .35em; text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero-sub{color:#DCE5F2; font-size:1.1rem; max-width:560px; margin-bottom:1.8rem}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap}
.hero-strip{background:rgba(7,26,51,.92); backdrop-filter:blur(6px); border-top:1px solid rgba(0,166,232,.35)}
.hero-strip-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.3rem 0}
.stat{text-align:center; color:#fff}
.stat-num{display:block; font-family:var(--font-head); font-size:1.9rem; color:var(--gold-2); font-weight:700}
.stat-num small{font-size:1rem; margin-left:2px}
.stat-num.stat-text{font-size:1.15rem; padding-top:.35rem}
.stat-label{font-size:.82rem; color:#B9C6DA; letter-spacing:.04em}

/* ---------- sections ---------- */
.section{padding:5rem 0}
.section-alt{background:var(--bg)}
.section-navy{background:linear-gradient(160deg,var(--navy-900),var(--navy-700)); color:#DCE5F2}
.section-navy .section-title{color:#fff}
.section-head{max-width:680px; margin:0 auto 2.6rem; text-align:center}
.section-head.left{margin:0 0 1.8rem; text-align:left}
.section-head.row{max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; text-align:left}
.section-head.light .section-title{color:#fff}
.eyebrow{color:var(--gold); font-weight:700; letter-spacing:.13em; text-transform:uppercase; font-size:.78rem; margin:0 0 .4rem}
.eyebrow.gold{color:var(--gold-2)}
.section-title{font-size:clamp(1.5rem, 3vw, 2.15rem)}
.section-desc,.page-sub{color:var(--muted); font-size:1.03rem}
.section-navy .section-desc{color:#B9C6DA}
.lead{font-size:1.08rem; color:#3A4A5E}
.sub-title{font-size:1.2rem; margin-top:2rem}
.center-action{text-align:center; margin-top:2.2rem}
.page-hero{background:linear-gradient(120deg,var(--navy-900),var(--navy-700)); color:#fff; padding:3.4rem 0}
.page-title{color:#fff; font-size:clamp(1.7rem, 3.4vw, 2.5rem); margin:0 0 .3rem}
.page-hero .page-sub{color:#C2CFE2; max-width:640px}
.breadcrumb{display:flex; gap:.55rem; align-items:center; font-size:.86rem; color:#9FB0C8; margin-top:.9rem; flex-wrap:wrap}
.breadcrumb a{color:var(--gold-2)}
.breadcrumb a:hover{color:#fff}

/* ---------- split layout ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:center}
.split.reverse .split-media{order:2}
.split-media img{border-radius:var(--radius); box-shadow:var(--shadow-md); width:100%; object-fit:cover; max-height:430px}
.media-badge{position:relative; margin:-2.2rem 1.2rem 0; background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:.9rem 1.2rem; display:inline-block}
.media-badge strong{display:block; color:var(--navy-800); font-family:var(--font-head)}
.media-badge span{font-size:.78rem; color:var(--gold); font-weight:700; letter-spacing:.06em}
.check-list{margin:1.2rem 0 1.8rem}
.check-list li{display:flex; gap:.65rem; align-items:flex-start; padding:.4rem 0; font-weight:500}
.check-list .ic{width:20px; height:20px; color:var(--gold); flex:none; margin-top:2px}

/* ---------- cards ---------- */
.cards{display:grid; gap:1.5rem}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card-media{aspect-ratio:16/10; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.card-title{font-size:1.12rem; margin:.1rem 0 .2rem}
.card-title.small{font-size:1rem}
.card-text{color:var(--muted); font-size:.94rem; margin:.2rem 0 .6rem; flex:1}
.card-text.small{font-size:.88rem}
.card-icon{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#EEF2F8; color:var(--navy-700); margin-bottom:.5rem;
}
.card-icon .ic{width:27px; height:27px}
.card-icon.gold-bg{background:var(--gold-soft); color:#8A6D0B}
.panel-card{padding:0}
.service-card .card-media{aspect-ratio:16/9}
.why-card{text-align:left}
.product-card{color:inherit}
.product-card:hover{color:inherit}
.product-meta{color:var(--muted); font-size:.84rem; margin:.1rem 0 .4rem}
.news-date{color:var(--gold); font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.stars{color:var(--gold); letter-spacing:.15em; font-size:.95rem}
.story-role{color:var(--muted); font-size:.88rem; font-weight:600; margin:.1rem 0 .4rem}
.country-card .card-body{align-items:flex-start}
.flag-emoji{font-size:2.6rem; line-height:1}
.flag-emoji.big{font-size:3.4rem}
.flag-emoji.inline{font-size:.9em; margin-right:.3rem}

/* jobs */
.job-top{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.3rem}
.job-flag{font-size:1.9rem}
.job-flag.big{font-size:2.6rem}
.job-meta{display:flex; flex-direction:column; gap:.35rem; margin:.4rem 0 1rem; color:var(--muted); font-size:.9rem}
.job-meta.inline{flex-direction:row; flex-wrap:wrap; gap:1.1rem}
.job-meta li{display:flex; align-items:center; gap:.45rem}
.job-meta .ic{width:16px; height:16px; color:var(--gold); flex:none}
.job-list{display:flex; flex-direction:column; gap:1rem}
.job-row{
  display:flex; gap:1.2rem; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:1.25rem 1.5rem; box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s;
}
.job-row:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
.job-row-flag{font-size:2.2rem}
.job-row-main{flex:1}
.job-row-title{font-size:1.12rem; margin:0 0 .3rem}
.job-row-title a{color:var(--navy-800)}
.job-row-title a:hover{color:var(--navy-600)}
.job-row-cta{display:flex; flex-direction:column; align-items:center; gap:.5rem}
.filter-bar{
  display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:1rem; align-items:end;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem;
  box-shadow:var(--shadow-sm); margin-bottom:2rem;
}
.filter-field label{display:block; font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:.35rem}
.filter-actions{display:flex; gap:.5rem}
.job-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.9rem;
  background:#F7F9FC; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; margin:1.2rem 0;
}
.job-facts li{display:flex; flex-direction:column; gap:.15rem}
.fact-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}

/* detail */
.detail-layout{display:grid; grid-template-columns:1.7fr 1fr; gap:2.2rem; align-items:start}
.detail-title{font-size:1.5rem; margin:.1rem 0}
.detail-media{border-radius:var(--radius-sm); overflow:hidden; margin-bottom:1.2rem}
.prose h3{font-size:1.08rem; margin-top:1.4rem; color:var(--navy-700)}
.prose p{color:#3A4A5E}
.detail-side{position:sticky; top:96px}
.apply-card{box-shadow:var(--shadow-md)}
.side-list li{padding:.55rem 0; border-bottom:1px dashed var(--line)}
.side-list a{display:flex; flex-direction:column; color:var(--ink); font-weight:600; font-size:.93rem}
.side-list a:hover{color:var(--navy-600)}
.side-date{font-size:.78rem; color:var(--muted); font-weight:500}
.status-result{margin-top:1.2rem; border-top:1px solid var(--line); padding-top:1rem}

/* steps */
.steps{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; counter-reset:step}
.steps.compact{grid-template-columns:repeat(3,1fr); margin-top:1rem}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.3rem 1.1rem; position:relative; box-shadow:var(--shadow-sm)}
.step-num{
  display:inline-flex; width:36px; height:36px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--navy-800); color:var(--gold-2); font-family:var(--font-head); font-weight:700; margin-bottom:.6rem;
}
.step-title{font-size:.98rem; margin:.1rem 0 .3rem}
.step-desc{color:var(--muted); font-size:.85rem; margin:0}

/* flags grid */
.flag-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.flag-card{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:1.5rem 1rem; color:#fff; transition:.18s;
}
.flag-card:hover{background:rgba(255,255,255,.12); color:#fff; transform:translateY(-3px)}
.flag-name{font-weight:700}
.flag-link{display:inline-flex; gap:.35rem; align-items:center; color:var(--gold-2); font-size:.83rem; font-weight:600}
.flag-link .ic{width:14px; height:14px}

/* mini services */
.mini-services{display:flex; flex-direction:column; gap:1.1rem; margin-top:1.2rem}
.mini{display:flex; gap:1rem; align-items:flex-start}
.mini h3{font-size:1rem; margin:0 0 .15rem}
.mini p{color:var(--muted); font-size:.9rem; margin:0}
.mini .card-icon{margin-bottom:0; width:46px; height:46px}

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.gallery-item{margin:0; border-radius:var(--radius-sm); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.gallery-item img{aspect-ratio:4/3; width:100%; object-fit:cover}
.gallery-item figcaption{padding:.65rem .85rem; font-size:.85rem; color:var(--muted); font-weight:600}

/* downloads */
.download-list{display:flex; flex-direction:column}
.download-row{display:flex; align-items:center; gap:1rem; padding:1.05rem 1.3rem; border-bottom:1px solid var(--line)}
.download-row:last-child{border-bottom:0}
.download-icon{width:44px; height:44px; border-radius:10px; background:var(--gold-soft); color:#8A6D0B; display:flex; align-items:center; justify-content:center; flex:none}
.download-icon .ic{width:22px; height:22px}
.download-info{flex:1; display:flex; flex-direction:column}
.download-info strong{color:var(--navy-800)}

/* contact */
.contact-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-bottom:2rem}
.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); min-height:320px}
.map-wrap iframe{width:100%; height:340px; border:0; display:block}
.cta-actions.local{margin-top:1.4rem}
.cta-actions.local.center{justify-content:center}

/* forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form-group{display:flex; flex-direction:column; gap:.35rem}
.form-group.full{grid-column:1 / -1}
.label{font-size:.83rem; font-weight:700; color:var(--navy-800)}
.input,.textarea,.select{
  width:100%; padding:.72rem .95rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font); font-size:.95rem; color:var(--ink); background:#fff; transition:border .15s, box-shadow .15s;
}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(27,64,121,.12)}
.textarea{resize:vertical}
.file-input{padding:.5rem; background:#F7F9FC}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--navy-800),var(--navy-600)); color:#fff; padding:3.6rem 0}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.cta-title{color:#fff; font-size:1.7rem; margin:0 0 .3rem}
.cta-desc{color:#C2CFE2; margin:0}
.cta-actions{display:flex; gap:.8rem; flex-wrap:wrap}

/* thanks / 404 */
.thanks-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:3rem 2.4rem}
.thanks-icon{width:72px; height:72px; margin:0 auto 1rem; border-radius:50%; background:#E4F4EC; color:var(--green); display:flex; align-items:center; justify-content:center}
.thanks-icon .ic{width:40px; height:40px}
.error-code{font-size:4.5rem; color:var(--gold); margin:0}

/* footer */
.site-footer{background:var(--navy-900); color:#B9C6DA; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2.4rem; padding:4rem 0 2.8rem}
.footer-title{color:#fff; font-size:1rem; margin:0 0 1rem; letter-spacing:.04em}
.brand-footer .brand-name{color:#fff}
.footer-desc{font-size:.92rem; margin:.8rem 0; line-height:1.7}
.footer-line{color:var(--gold-2); font-size:.85rem; letter-spacing:.05em}
.footer-links li{padding:.28rem 0}
.footer-links a{color:#B9C6DA; font-size:.93rem}
.footer-links a:hover{color:var(--gold-2)}
.footer-contact li{display:flex; gap:.6rem; padding:.35rem 0; font-size:.92rem; align-items:flex-start}
.footer-contact .ic{width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px}
.footer-contact a{color:#B9C6DA}
.footer-contact a:hover{color:var(--gold-2)}
.footer-social{display:flex; gap:.6rem; margin-top:1rem}
.soc{
  width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.soc:hover{background:var(--gold); color:var(--navy-900)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding:1.1rem 0}
.footer-bottom-inner{display:flex; justify-content:space-between; gap:1rem; font-size:.84rem; flex-wrap:wrap}
.footer-admin-link{color:#7C8BA5}
.footer-admin-link:hover{color:var(--gold-2)}

/* floating actions */
.float-actions{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:.7rem; z-index:90}
.fab{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.25); transition:transform .15s;
}
.fab:hover{transform:translateY(-2px); color:#fff}
.fab .ic{width:26px; height:26px}
.fab-wa{background:var(--wa)}
.fab-call{background:var(--navy-700)}

/* ============ responsive ============ */
@media (max-width: 1080px){
  .cards-4{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .flag-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 920px){
  .nav-toggle{display:flex}
  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    border-top:1px solid var(--line); box-shadow:var(--shadow-md); flex-direction:column;
    align-items:stretch; padding:.8rem 5%; gap:.1rem;
  }
  .nav-menu.open{display:flex}
  .nav-menu .nav-link{width:100%; justify-content:space-between; padding:.85rem .4rem}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 .3rem 1rem; display:none; min-width:0}
  .nav-item.has-drop.open .dropdown{display:block}
  .nav-cta-item{margin:.6rem 0}
  .nav-cta-item .btn{width:100%}
  .split,.detail-layout{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
  .detail-side{position:static}
  .filter-bar{grid-template-columns:1fr 1fr}
  .cards-3,.cards-2{grid-template-columns:repeat(2,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .hero-strip-inner{grid-template-columns:repeat(2,1fr); gap:1.4rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps,.steps.compact{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .flag-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 620px){
  .section{padding:3.4rem 0}
  .hero-inner{padding:4.4rem 0 5.2rem; min-height:0}
  .cards-3,.cards-2,.cards-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filter-bar{grid-template-columns:1fr}
  .job-row{flex-direction:column; align-items:flex-start}
  .job-row-cta{flex-direction:row; width:100%; margin-top:.4rem}
  .job-row-cta .btn{flex:1}
  .section-head.row{flex-direction:column; align-items:flex-start}
  .steps,.steps.compact{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:1.8rem}
  .contact-cards{grid-template-columns:1fr}
  .topbar-hours{display:none}
  .job-facts{grid-template-columns:1fr 1fr}
  .thanks-box{padding:2rem 1.2rem}
}

/* ============================================================
   PREMIUM UPGRADE LAYER v2
   ============================================================ */
::selection{background:var(--gold-soft); color:var(--navy-900)}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:4px}

/* refined section titles with gold underline */
.section-title{position:relative}
.section-head .section-title::after{
  content:''; display:block; width:58px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2)); margin:.85rem auto 0;
}
.section-head.left .section-title::after{margin-left:0}
.section-head.row .section-title::after{margin-left:0}
.section-head.light .section-title::after{background:linear-gradient(90deg,var(--gold-2),var(--gold))}

/* hero premium pattern + polish */
.hero{position:relative; overflow:hidden}
.hero-inner{position:relative; z-index:1}
.hero-title{letter-spacing:.005em}
.hero-sub{line-height:1.75}

/* condensed sticky header on scroll */
.navbar{transition:min-height .2s ease, box-shadow .2s ease}
.nav-inner{transition:min-height .2s ease}
.navbar.scrolled{box-shadow:0 6px 24px rgba(4,43,74,.10)}
.navbar.scrolled .nav-inner{min-height:72px}
.navbar.scrolled .logo-mark{width:56px; height:56px}

/* premium card edges */
.card{position:relative}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; opacity:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:opacity .2s; z-index:1;
}
.card:hover::before{opacity:1}
.panel-card::before{display:none}

/* buttons premium */
.btn{letter-spacing:.012em}
.btn-gold{border:1px solid rgba(255,255,255,.25)}

/* share bar */
.share-bar{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  border-top:1px dashed var(--line); margin-top:1.5rem; padding-top:1.1rem;
}
.share-label{font-size:.83rem; font-weight:700; color:var(--muted); margin-right:.2rem}
.share-btn{
  display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .9rem; border-radius:999px;
  font-size:.83rem; font-weight:700; border:1.5px solid var(--line); background:#fff; color:var(--navy-700);
  cursor:pointer; font-family:var(--font); transition:.15s;
}
.share-btn:hover{transform:translateY(-1px)}
.share-btn.wa{background:#E9F9EF; border-color:#BFE8CE; color:#128C4A}
.share-btn.fb{background:#EAF1FB; border-color:#C9D9F0; color:#1773C4}
.share-btn.copy:hover{border-color:var(--gold); color:#8A6D0B}
.share-btn.print:hover{border-color:var(--navy-800)}
.share-btn.copied{background:#E4F4EC; border-color:#BFE3D0; color:var(--green)}

/* application journey timeline */
.timeline{
  display:flex; gap:0; margin:1.4rem 0 .6rem; padding:0; counter-reset:tl;
}
.tl-step{
  flex:1; text-align:center; position:relative; padding-top:34px; font-size:.78rem; color:var(--muted);
}
.tl-step::before{
  content:''; position:absolute; top:15px; left:calc(-50% + 22px); right:calc(50% + 22px);
  height:3px; background:var(--line); border-radius:2px;
}
.tl-step:first-child::before{display:none}
.tl-step.done::before,.tl-step.current::before{background:var(--gold)}
.tl-dot{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#EEF2F8; color:var(--muted); font-weight:800; font-size:.8rem;
  border:3px solid var(--line); z-index:1;
}
.tl-step.done .tl-dot{background:var(--gold); border-color:var(--gold); color:#fff}
.tl-step.current .tl-dot{
  background:#fff; border-color:var(--gold); color:var(--gold);
  box-shadow:0 0 0 4px rgba(0,166,232,.18);
}
.tl-step.current .tl-label{color:var(--navy-800); font-weight:800}
.tl-step.done .tl-label{color:var(--navy-700); font-weight:600}
.tl-label{display:block; line-height:1.3}
.timeline.rejected .tl-step.current .tl-dot{border-color:var(--red); color:var(--red); box-shadow:0 0 0 4px rgba(192,57,43,.15)}

/* FAQ accordion */
.faq-list{display:flex; flex-direction:column; gap:.7rem}
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .15s;
}
.faq-item[open]{border-color:var(--gold)}
.faq-item summary{
  cursor:pointer; padding:1.05rem 3rem 1.05rem 1.3rem; font-weight:700; color:var(--navy-800);
  list-style:none; position:relative; font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+'; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--gold); font-weight:600; transition:transform .2s;
}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin:0; padding:0 1.3rem 1.15rem; color:var(--muted); font-size:.95rem; line-height:1.75}

/* pagination */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2.6rem;
}
.page-btn{
  padding:.55rem 1.2rem; border-radius:var(--radius-sm); border:1.5px solid var(--navy-800);
  color:var(--navy-800); font-weight:700; font-size:.9rem;
}
.page-btn:hover{background:var(--navy-800); color:#fff}
.page-info{color:var(--muted); font-weight:600; font-size:.9rem}

/* back to top */
.fab-top{background:#fff; color:var(--navy-800); border:1px solid var(--line); box-shadow:var(--shadow-md)}
.fab-top:hover{color:var(--gold)}

/* sticky mobile CTA bar */
.mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(4,43,74,.12);
}
.mobile-cta a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.6rem .3rem calc(.6rem + env(safe-area-inset-bottom, 0px)); font-size:.72rem; font-weight:800;
  color:var(--navy-800); letter-spacing:.02em;
}
.mobile-cta .ic{width:20px; height:20px; color:var(--gold)}
.mobile-cta .m-wa-ico{
  width:20px; height:20px; border-radius:50%; background:var(--wa); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:900;
}

/* image + misc polish */
img{transition:opacity .2s}
.card-media img,.gallery-item img,.detail-media img{background:#EEF2F8}
.divider-gold{width:58px; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); border-radius:2px; margin:1rem 0}
.check-list li{transition:transform .15s}
.check-list li:hover{transform:translateX(2px)}

/* print styles (job circular / CV-friendly) */
@media print{
  .topbar,.navbar,.float-actions,.mobile-cta,.share-bar,.site-footer,.detail-side .apply-card .form-grid,.page-hero .breadcrumb{display:none !important}
  .detail-layout{grid-template-columns:1fr}
  .hero{background:#fff !important; color:#000}
  body{font-size:12pt}
  a{color:#000; text-decoration:underline}
}

@media (max-width: 620px){
  .mobile-cta{display:flex}
  .float-actions{bottom:78px}
  .timeline{flex-direction:column; gap:.2rem; text-align:left}
  .tl-step{padding:0 0 1.1rem 2.6rem; text-align:left; min-height:36px}
  .tl-step::before{left:15px; right:auto; top:32px; bottom:-2px; width:3px; height:auto}
  .tl-dot{left:0; transform:none}
  .tl-label{margin-top:.35rem; font-size:.85rem}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

/* v3 — candidate auth, appointment, dropdown separator */
.auth-card{max-width:520px; margin:0 auto}
.drop-sep{border-top:1px solid var(--line); margin:.35rem 0}
.dropdown .drop-sep{height:0; padding:0}

/* ============================================================
   PREMIUM UI UPGRADE LAYER v3
   Typography · depth · micro-polish · (no flashy animation)
   ============================================================ */

/* ---------- global type & rhythm ---------- */
h1,h2,h3,h4{letter-spacing:-.018em; text-wrap:balance}
p{line-height:1.72}
.page-title{letter-spacing:-.022em}
.section-title{position:relative}
.section-title::after{
  content:''; display:block; width:58px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  margin:.85rem auto 0; box-shadow:0 2px 10px rgba(0,166,232,.35);
}
.section-head.left .section-title::after,
.section-head.row .section-title::after{margin-left:0}
.eyebrow, .hero-eyebrow{letter-spacing:.18em; font-weight:800}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(0,166,232,.45);
  padding:.5rem 1rem; border-radius:999px; backdrop-filter:blur(4px);
}
::selection{background:rgba(0,166,232,.3); color:var(--navy-900)}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:2px}

/* refined scrollbar */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#C4CEDC; border-radius:8px; border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--navy-600)}

/* ---------- buttons: micro-lift ---------- */
.btn{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-sm)}
.btn-navy{box-shadow:0 4px 14px rgba(4,43,74,.22)}
.btn-navy:hover{box-shadow:0 8px 22px rgba(4,43,74,.3)}
.btn-sm{padding:.55rem 1.05rem; font-size:.86rem}
.link-arrow{font-weight:700}
.link-arrow::after{content:'→'; display:inline-block; margin-left:.35rem; transition:transform .18s ease}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- cards: layered depth ---------- */
.card{
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D5DEEC}
.panel-card:hover{transform:none} /* forms/cards-with-forms stay steady */
.card-title{letter-spacing:-.012em}
.country-card::before, .story-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  opacity:0; transition:opacity .22s ease;
}
.card{position:relative; overflow:hidden}
.country-card:hover::before, .story-card:hover::before{opacity:1}

/* ---------- job rows ---------- */
.job-row{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.job-row::before{
  content:''; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  opacity:0; transition:opacity .2s ease;
}
.job-row:hover::before{opacity:1}
.job-row:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#D5DEEC}
.job-row-flag{
  width:56px; height:56px; border-radius:15px; flex:none;
  background:linear-gradient(135deg,#F3F7FC,#E7EEF8);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
}
.job-row-title a{transition:color .15s ease}
.job-row-title a:hover{color:var(--gold)}
.job-meta strong{
  color:var(--navy-800); background:var(--gold-soft);
  padding:.12rem .5rem; border-radius:6px; border:1px solid #B8DFF5;
}
.job-row-cta{display:flex; flex-direction:column; align-items:flex-end; gap:.55rem}

/* ---------- steps ---------- */
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#D5DEEC}
.step-num{
  box-shadow:0 6px 16px rgba(0,166,232,.35);
  outline:3px solid rgba(0,166,232,.18); outline-offset:2px;
}

/* ---------- hero ---------- */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1100px 480px at 85% 18%, rgba(0,166,232,.16), transparent 60%);
}
.hero-inner{position:relative; z-index:1}
.hero-strip{border-top:1px solid rgba(0,166,232,.35)}
.stat-num{font-variant-numeric:tabular-nums; text-shadow:0 2px 14px rgba(0,166,232,.35)}
.stat-label{letter-spacing:.08em; text-transform:uppercase; font-size:.72rem}

/* ---------- page hero ---------- */
.page-hero{position:relative; overflow:hidden}
.page-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 28px);
}
.page-hero > .container{position:relative; z-index:1}
.breadcrumb a{color:#C9D6E8}
.breadcrumb a:hover{color:var(--gold-2)}
.breadcrumb span:last-child{color:#fff; font-weight:600}

/* ---------- forms ---------- */
.input,.textarea,.select{
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:hover,.textarea:hover,.select:hover{border-color:#C6D2E2}
.file-input{padding:.55rem}
.form-group{gap:.45rem}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

/* ---------- alerts / notes ---------- */
.alert{box-shadow:var(--shadow-sm)}
.hint.tiny{opacity:.85}
.note-line{
  display:flex; align-items:flex-start; gap:.6rem;
  background:#F8FAFD; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); padding:.85rem 1.1rem; margin:1.2rem 0;
}

/* ---------- badges ---------- */
.badge{letter-spacing:.02em; font-weight:700}
.badge-gold{background:var(--gold-soft); border:1px solid #B8DFF5; color:#0B5A7A}
.badge-green{background:#E4F4EC; border:1px solid #BFE3D0; color:#14663F}
.badge-red{background:#FCEBE9; border:1px solid #F0C4BE; color:#8E2B1E}
.badge-blue{background:#E7EEF8; border:1px solid #C6D6EC; color:var(--navy-700)}

/* ---------- timeline ---------- */
.tl-step.current .tl-dot{
  box-shadow:0 0 0 5px rgba(0,166,232,.18), 0 4px 12px rgba(0,166,232,.35);
}

/* ---------- thanks / empty ---------- */
.thanks-icon{
  width:88px; height:88px; border-radius:50%; margin:0 auto 1.2rem;
  background:linear-gradient(135deg,var(--gold-soft),#fff);
  border:1px solid #B8DFF5; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,166,232,.28);
}
.thanks-icon svg{width:40px; height:40px; color:var(--gold)}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden}
.cta-band::after{
  content:''; position:absolute; top:0; left:8%; right:8%; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ---------- header / nav underline slide ---------- */
.nav-link{position:relative}
.nav-link::after{
  content:''; position:absolute; left:.95rem; right:.95rem; bottom:.4rem; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-link:hover::after{transform:scaleX(1)}
.dropdown{box-shadow:var(--shadow-md); border-top:2px solid var(--gold)}

/* ---------- footer ---------- */
.footer a:hover{color:var(--gold-2); text-decoration:underline; text-underline-offset:3px}

/* ---------- subtle reveal (JS) ---------- */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .btn:hover, .card:hover, .job-row:hover, .step:hover{transform:none}
}

/* ---------- mobile refinements ---------- */
@media (max-width:760px){
  .job-row{flex-wrap:wrap}
  .job-row-cta{flex-direction:row; width:100%; justify-content:space-between; align-items:center}
  .card:hover{transform:none}
  .hero-eyebrow{font-size:.68rem}
}

/* ============================================================
   v3.1 — media aspect locks (CLS-safe) · image micro-zoom · tablet
   ============================================================ */
.card-media{aspect-ratio:16/10; overflow:hidden}
.detail-media{aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius)}
.split-media{aspect-ratio:4/3; overflow:hidden}
.card-media img, .detail-media img, .split-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  background:linear-gradient(135deg,#F3F7FC,#E7EEF8);
}
.card-media img{transition:transform .45s ease}
.card:hover .card-media img{transform:scale(1.045)}
@media (prefers-reduced-motion: reduce){ .card:hover .card-media img{transform:none} }

/* tablet (761–1080px): tighter grids */
@media (min-width:761px) and (max-width:1080px){
  .cards-3, .cards-4{grid-template-columns:repeat(2,1fr)}
  .split{gap:2.2rem}
  .detail-layout{grid-template-columns:1.45fr 1fr; gap:1.5rem}
  .steps{grid-template-columns:repeat(3,1fr)}
  .filter-bar{grid-template-columns:1fr 1fr; }
  .hero-inner{padding:5.2rem 0 5.6rem}
  .hero-title{font-size:clamp(1.9rem, 4.1vw, 2.7rem)}
  .section{padding:3.6rem 0}
}
/* mobile: steps stack readable */
@media (max-width:760px){
  .steps{grid-template-columns:1fr 1fr}
  .detail-media{aspect-ratio:16/10}
}

/* ============================================================
   v3.2 — MJ International · pill buttons · dashboard stat cards
   ============================================================ */
.btn{border-radius:999px}
.btn-sm{border-radius:999px}

/* brand logo — sizes come from the primary .logo-mark rule (62px) + .navbar.scrolled (56px);
   v3.2 duplicate previously re-set 44px here and silently won the cascade */
.logo-mark{flex:none; display:block; object-fit:contain}
.footer .logo-mark{width:42px; height:42px}
.addr-multi{white-space:pre-line}

/* dashboard-style floating stat cards over hero */
.hero-strip{background:transparent; border-top:none; margin-top:-3.2rem; position:relative; z-index:3}
.hero-strip-inner{padding:0}
.stat{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:16px; padding:1.15rem 1.3rem; text-align:left;
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:.1rem;
}
.stat-num{color:var(--navy-800); text-shadow:none; font-size:1.85rem}
.stat-num small{color:var(--gold)}
.stat-label{color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:.7rem}

/* footer dev credit */
.dev-credit{font-size:.8rem; opacity:.8}
.dev-credit strong{color:var(--gold-2); letter-spacing:.02em}
.footer-bottom-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}

@media (max-width:760px){
  .hero-strip{margin-top:-2.2rem}
  .stat{padding:.95rem 1.05rem}
  .stat-num{font-size:1.55rem}
}

/* ============================================================
   v3.3 — LUXURY FINISH · glass · grain · shine · display type
   ============================================================ */

/* ---------- scroll progress hairline (JS) ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:2000;
  background:linear-gradient(90deg,var(--navy-600),var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(0,166,232,.5);
}

/* ---------- display typography ---------- */
.hero-title{font-size:clamp(2.1rem, 5vw, 3.6rem); letter-spacing:-.025em}
.page-title{font-size:clamp(1.9rem, 4.2vw, 3rem)}
.section-title{font-size:clamp(1.65rem, 2.9vw, 2.35rem)}
.hero-sub{font-size:1.15rem; line-height:1.75}
.eyebrow, .hero-eyebrow{letter-spacing:.22em}

/* ---------- glass header (scrolled) ---------- */
#navbar.scrolled, #navbar.scrolled .navbar{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
}
#navbar.scrolled{box-shadow:0 10px 30px rgba(4,43,74,.10), inset 0 -1px 0 rgba(0,166,232,.18)}

/* ---------- grain texture on dark bands ---------- */
.hero::before, .page-hero::before, .cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-hero > .container, .cta-band > .container{position:relative; z-index:2}

/* ---------- page-hero: blueprint grid + corner glow ---------- */
.page-hero{
  background:
    radial-gradient(720px 320px at 88% -10%, rgba(0,166,232,.28), transparent 60%),
    linear-gradient(120deg,var(--navy-900),var(--navy-700) 58%,#0E5493);
}
.page-hero::after{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.5;
}

/* ---------- buttons: shine sweep ---------- */
.btn{position:relative; overflow:hidden}
.btn::after{
  content:''; position:absolute; top:0; left:-85%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.btn:hover::after{left:135%}
.btn-gold::after{background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent)}

/* ---------- cards: hairline highlight + depth ---------- */
.card, .panel-card, .job-row, .step, .stat{
  box-shadow:0 1px 2px rgba(4,43,74,.06), 0 10px 28px rgba(4,43,74,.09);
  border-color:#E7EDF5;
}
.card, .job-row, .step, .stat{box-shadow:0 1px 2px rgba(4,43,74,.06), 0 10px 28px rgba(4,43,74,.09), inset 0 1px 0 rgba(255,255,255,.75)}

/* stat cards: mini sparkline bar */
.stat::after{
  content:''; display:block; width:44px; height:3px; border-radius:2px; margin-top:.65rem;
  background:linear-gradient(90deg,var(--gold),rgba(0,166,232,0));
}

/* ---------- CTA band: deep luxury + hairline ---------- */
.cta-band{
  background:
    radial-gradient(600px 260px at 15% 0%, rgba(0,166,232,.22), transparent 55%),
    linear-gradient(135deg,var(--navy-900),var(--navy-700) 55%,#0E5493);
}

/* ---------- forms: inset highlight ---------- */
.input, .textarea, .select{
  box-shadow:inset 0 1px 2px rgba(4,43,74,.06);
}
.input:focus, .textarea:focus, .select:focus{
  box-shadow:0 0 0 3.5px rgba(0,166,232,.16), inset 0 1px 2px rgba(4,43,74,.05);
}

/* ---------- footer: luxury hairline ---------- */
.footer{border-top:1px solid rgba(0,166,232,.25)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .btn::after{display:none}
  .scroll-progress{display:none}
}

/* ============================================================
   v3.4 — DE-AI PASS · restraint · editorial rhythm · candid grade
   ============================================================ */

/* ---- 1) RESTRAINT: এফেক্ট কমানো (stacking বন্ধ) ---- */
.hero::before, .page-hero::before, .cta-band::before{opacity:.025}
.page-hero::after{opacity:.25}
.btn::after{display:none}                 /* shine শুধু প্রধান CTA-তে */
.btn-gold::after{display:block}

/* ---- 2) EDITORIAL SECTION NUMBERS (মানুষের ম্যাগাজিন টাচ) ---- */
body{counter-reset:sec-idx}
.section-head{counter-increment:sec-idx}
.section-head .eyebrow::before{
  content:counter(sec-idx, decimal-leading-zero) " — ";
  opacity:.55; font-weight:700; letter-spacing:.12em;
}

/* ---- 3) অসিমেট্রি: perfect 50/50 + perfect grid ভাঙা ---- */
.split{grid-template-columns:1.12fr .88fr}
/* v4.26: card stagger removed — ALL cards equal level (user decision) */

/* ---- 4) CANDID PHOTO GRADE + আলাদা আলাদা aspect ---- */
.card-media img, .detail-media img, .split-media img{
  filter:contrast(1.03) saturate(.93);
}
/* v4.26: per-card media aspect variation removed — equal media height */

/* ---- 5) সূক্ষ্ম রিদম: even সেকশনে প্রায়-অদৃশ্য টিন্ট ---- */
.section:nth-of-type(even){background:#FBFCFF}

/* ---- 6) hover lift একটু মানুষিক কম ---- */
.card:hover{transform:translateY(-2px)}
.job-row:hover{transform:translateY(-2px)}
.step:hover{transform:translateY(-2px)}

/* ============================================================
   v3.5 — MOTION & DYNAMICS · realistic, not flashy
   ============================================================ */

/* ---- 1) HERO ENTRANCE (লোডে ধাপে ধাপে ফুটে ওঠে) ---- */
.hero-eyebrow, .hero-title, .hero-sub, .hero-actions{
  animation:heroIn .8s cubic-bezier(.22,.8,.3,1) both;
}
.hero-title{animation-delay:.10s}
.hero-sub{animation-delay:.22s}
.hero-actions{animation-delay:.34s}
@keyframes heroIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* ---- 2) PAGE FADE-IN / OUT (পেজ বদল মসৃণ) ---- */
body{animation:pgIn .32s ease both}
body.exiting{opacity:0; transition:opacity .16s ease}
@keyframes pgIn{from{opacity:0} to{opacity:1}}

/* ---- 3) SMART HEADER (নিচে স্ক্রলে লুকায়, উপরে ফেরে) ---- */
#navbar{transition:transform .32s cubic-bezier(.22,.8,.3,1), background .3s ease, box-shadow .3s ease}
#navbar.nav-hidden{transform:translateY(-100%)}

/* ---- 4) COUNT-UP STATS (সংখ্যা বাড়তে বাড়তে আসে) ---- */
.stat-num{font-variant-numeric:tabular-nums}

/* ---- 5) MAGNETIC PRIMARY CTA (মাউসের দিকে টানে) ---- */
.btn-gold{will-change:transform}

/* ---- 6) WA FAB সূক্ষ্ম পিং ---- */
.fab-wa{position:relative}
.fab-wa::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wa); opacity:0; pointer-events:none;
  animation:fabPing 5s ease-out infinite;
}
@keyframes fabPing{
  0%{transform:scale(1); opacity:.55}
  12%{transform:scale(1.55); opacity:0}
  100%{transform:scale(1.55); opacity:0}
}

/* ---- 7) HERO/PAGE-HERO প্যারাল্যাক্স সাপোর্ট (JS bg shift) ---- */
.hero, .page-hero{will-change:auto}

/* ---- 8) dropdown আরও মসৃণ ---- */
.dropdown{transition:opacity .22s ease, transform .22s ease, visibility .22s}

/* ---- 9) reveal একটু বেশি মানুষিক গতি ---- */
.reveal{transform:translateY(14px); transition:opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1)}

/* ---- reduced motion: সব বন্ধ ---- */
@media (prefers-reduced-motion: reduce){
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions, body{animation:none}
  .fab-wa::after{animation:none; display:none}
  #navbar{transition:none}
}

/* ============================================================
   v3.6 — SUNDOR MOTION SUITE · marquee · tilt · success draw · preloader
   ============================================================ */

/* ---- 1) COUNTRIES MARQUEE (ধীর, সুন্দর প্রবাহ) ---- */
.marquee{overflow:hidden; position:relative; width:100%}
.marquee::before, .marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:72px; z-index:2; pointer-events:none;
}
.marquee::before{left:0; background:linear-gradient(90deg, rgba(7,26,51,.9), transparent)}
.marquee::after{right:0; background:linear-gradient(270deg, rgba(7,26,51,.9), transparent)}
.marquee-track{display:flex; width:max-content; animation:mqScroll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .flag-card{width:210px; flex:none; margin-right:1.1rem}
@keyframes mqScroll{to{transform:translateX(-50%)}}

/* ---- 2) TILT frame (ছবির ফ্রেম মাউস অনুসারে ঘোরে) ---- */
.card-media{transform-style:preserve-3d}

/* ---- 3) SUCCESS CHECKMARK DRAW (ফর্ম জমা দিলে) ---- */
.success-overlay{
  position:fixed; inset:0; z-index:3500; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s ease;
}
.success-overlay.show{opacity:1}
.success-svg{width:104px; height:104px}
.s-circle{
  fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:176; stroke-dashoffset:176;
  animation:sDraw .6s cubic-bezier(.22,.8,.3,1) forwards;
  transform:rotate(-90deg); transform-origin:center;
}
.s-check{
  fill:none; stroke:var(--navy-800); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:42; stroke-dashoffset:42;
  animation:sDraw .38s .42s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes sDraw{to{stroke-dashoffset:0}}

/* ---- 4) PRELOADER (প্রথম ভিজিটে MJ লোগো পালস) ---- */
#preloader{
  position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(900px 500px at 50% 40%, #0A3D6D, #04284A);
  transition:opacity .55s ease, visibility .55s ease;
}
#preloader.done{opacity:0; visibility:hidden; pointer-events:none}
.pl-inner{display:flex; flex-direction:column; align-items:center; gap:1.4rem}
.pl-logo{width:86px; height:86px; animation:plPulse 1.7s ease-in-out infinite}
.pl-bar{width:132px; height:2.5px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden}
.pl-bar span{
  display:block; height:100%; width:45%; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  animation:plSlide 1.15s ease-in-out infinite;
}
@keyframes plPulse{0%,100%{transform:scale(1); opacity:.92} 50%{transform:scale(1.07); opacity:1}}
@keyframes plSlide{0%{transform:translateX(-110%)} 100%{transform:translateX(330%)}}

@media (prefers-reduced-motion: reduce){
  /* marquee keeps moving by explicit user request (continuous country strip) */
  .marquee-track{animation:mqScroll 46s linear infinite !important}
  .success-overlay{display:none}
  #preloader{display:none}
}

/* ============================================================
   v3.7 — LUXE EDIT · editorial serif · gradient hairlines · caps
   ============================================================ */

/* ---- 1) SERIF ITALIC ACCENTS (হাই-এন্ড এডিটোরিয়াল ছোঁয়া) ---- */
.brand-tag{
  font-family:"Playfair Display","Georgia",serif; font-style:italic; font-weight:500;
  letter-spacing:.015em; font-size:1.02em;
}
.page-sub{
  font-family:"Playfair Display","Georgia",serif; font-style:italic; font-weight:500;
  font-size:1.14rem; line-height:1.65; color:#D7E3F3;
}
.stat-num{font-family:"Playfair Display","Georgia",serif; font-weight:600; font-style:normal}
html[data-lang="bn"] .brand-tag,
html[data-lang="bn"] .page-sub{font-family:var(--font-head); font-style:normal}

/* ---- 2) লেটারস্পেসড ক্যাপস বাটন (luxury house style) ---- */
.btn{
  text-transform:uppercase; letter-spacing:.09em; font-size:.83rem; font-weight:700;
}
.btn-sm{letter-spacing:.07em; font-size:.75rem}

/* ---- 3) GRADIENT HAIRLINE কার্ড (১px স্তরের মায়া) ---- */
.card, .stat, .step{
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, #C9E7F7, #E7EDF5 45%, #B7D8F3) border-box;
}
.panel-card{background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, #C9E7F7, #E7EDF5 45%, #B7D8F3) border-box;}

/* ---- 4) উদার spacing (expensive = শ্বাস নেওয়ার জায়গা) ---- */
.section{padding:5.4rem 0}
.section-head{margin-bottom:3rem}
@media (max-width:760px){ .section{padding:3.4rem 0} }

/* ---- 5) গাঢ় ফিল্ম-গ্রেড ছবি (rich print look) ---- */
.card-media img, .detail-media img, .split-media img{
  filter:contrast(1.06) saturate(.88) brightness(.97);
}

/* ---- 6) DROP CAPS (ম্যাগাজিন স্টাইল প্রথম অক্ষর) ---- */
.prose > p:first-of-type::first-letter,
.prose p:first-of-type::first-letter{
  float:left; font-family:"Playfair Display","Georgia",serif; font-weight:600;
  font-size:3.1rem; line-height:.86; padding:.16rem .55rem 0 0;
  color:var(--navy-800);
}

/* ---- 7) page-hero: এক ডিগ্রি বেশি গভীর ---- */
.page-hero{
  background:
    radial-gradient(720px 320px at 88% -10%, rgba(0,166,232,.22), transparent 60%),
    linear-gradient(120deg,#03203C,var(--navy-900) 30%,var(--navy-700) 62%,#0E5493);
}

/* ---- 8) নেভিগেশন: ছোট ক্যাপস, বেশি ট্র্যাকিং ---- */
.nav-link{text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; font-weight:700}
.dropdown a{text-transform:none; letter-spacing:normal}

@media (prefers-reduced-motion: reduce){ /* no motion here */ }

/* ===== v3.9 CANDIDATE PORTAL SUITE ===== */
.cand-wrap{display:grid; gap:1.4rem}
.cand-head-row{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap}
.cand-head-actions{display:flex; gap:.5rem; flex-wrap:wrap}
.comp{margin-top:1.2rem}
.comp-top{display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.4rem}
.comp-label{letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; color:var(--muted)}
.comp-bar{height:10px; border-radius:99px; background:#E7EDF4; overflow:hidden}
.comp-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--navy-700),var(--gold)); transition:width .9s cubic-bezier(.22,1,.36,1)}
.comp-missing{margin-top:.5rem; font-size:.85rem; color:var(--muted)}
.comp-missing a{color:var(--navy-700)}
.sub-title{margin:1.4rem 0 .6rem; font-size:1.02rem}
.sub-title.full, .full{grid-column:1/-1}
.form-grid.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem}
@media(max-width:720px){.form-grid.two{grid-template-columns:1fr}}
.thumb{width:64px; height:80px; object-fit:cover; border-radius:8px; margin-top:.4rem; border:1px solid #E7EDF4}
.file-link{display:inline-block; margin-top:.35rem; font-size:.85rem}
.row-head{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.5rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.35rem}
.row-line{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) 34px; gap:.5rem; margin-bottom:.5rem; align-items:center}
.btn-row-del{width:30px; height:30px; border-radius:8px; border:1px solid #E7EDF4; background:#fff; color:#B44; font-size:1.05rem; cursor:pointer}
.btn-row-del:hover{background:#FDECEC}
.check-line{display:flex; gap:.55rem; align-items:center}
.doc-up{display:grid; grid-template-columns:200px 1fr 1fr auto; gap:.6rem; margin:1rem 0}
@media(max-width:860px){.doc-up{grid-template-columns:1fr}}
.doc-list{list-style:none; display:grid; gap:.55rem}
.doc-row{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; padding:.6rem .8rem; border:1px solid #E7EDF4; border-radius:12px}
.doc-status{font-size:.8rem; color:var(--muted)}
.msg-thread{display:grid; gap:.6rem; margin:.9rem 0}
.msg-bubble{max-width:80%; padding:.7rem .9rem; border-radius:14px 14px 14px 4px; background:#F2F6FA}
.msg-bubble.mine{margin-left:auto; background:var(--gold-soft); border-radius:14px 14px 4px 14px}
.msg-who{display:block; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem}
.msg-bubble p{margin:0}
.msg-form{display:grid; gap:.6rem}
.pdo-list{padding-left:1.2rem; display:grid; gap:.8rem}
.pdo-list strong{display:block; margin-bottom:.15rem}
.pdo-list p{margin:0; color:var(--muted)}
.oauth-row{display:grid; gap:.55rem; margin-bottom:.9rem}
.oauth-btn{text-align:center}
.or-line{display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.8rem; margin:.9rem 0}
.or-line::before,.or-line::after{content:''; flex:1; height:1px; background:#E7EDF4}
.quick-apply{padding:.9rem 0}
.card-head-line{display:flex; gap:.8rem; align-items:center}
.card-head-line .brand-logo, .card-head-line svg{width:44px; height:44px}
.hair{border:none; border-top:1px solid #E7EDF4; margin:1rem 0}
.card-table th{width:38%}
.app-extra{margin-top:.35rem}
.app-extra .extra-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.5rem; margin-top:.4rem}
.app-extra .mini{display:grid; gap:.2rem; font-size:.75rem; color:var(--muted)}
.inline-form{display:inline-flex; gap:.3rem; align-items:center}

/* flash messages (public) */
.flash-wrap{margin-top:1rem}
.alert{padding:.85rem 1.1rem; border-radius:12px; font-size:.92rem; border:1px solid transparent}
.alert-ok{background:#E8F7EF; color:#14683F; border-color:#BCE6CF}
.alert-err{background:#FDECEC; color:#8A2A2A; border-color:#F3C4C4}
.alert-info{background:var(--gold-soft); color:var(--navy-800); border-color:#C4E4F7}
.alert-warn{background:#FFF6E5; color:#7A5A18; border-color:#F0DCAE}

/* ===== v4.0 HOME — SERVICE SHORTCUTS + HUMAN TOUCH ===== */
.shortcuts{margin-top:2.6rem}
.shortcuts-eyebrow{text-align:center; font-family:var(--font-head); font-style:italic; font-size:1.05rem; color:var(--navy-700); margin-bottom:1.2rem}
.shortcut-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.shortcut{
  position:relative; display:grid; gap:.3rem; justify-items:start;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.25rem 1.1rem 1.1rem;
  box-shadow:0 10px 30px rgba(4,40,74,.07); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.shortcut:hover{transform:translateY(-5px); box-shadow:0 18px 44px rgba(4,40,74,.14); border-color:rgba(0,166,232,.45)}
.shortcut-ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--navy-800),var(--navy-600)); color:#fff; margin-bottom:.35rem}
.shortcut-ic .ic{width:22px; height:22px}
.shortcut strong{font-size:.98rem; color:var(--navy-900); line-height:1.3}
.shortcut small{color:var(--muted); font-size:.8rem; line-height:1.45}
.shortcut-arrow{position:absolute; top:1.1rem; right:1rem; color:var(--gold); opacity:0; transform:translateX(-4px); transition:.3s}
.shortcut-arrow .ic{width:16px; height:16px}
.shortcut:hover .shortcut-arrow{opacity:1; transform:none}
@media(max-width:1100px){.shortcut-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.shortcut-grid{grid-template-columns:repeat(2,1fr); gap:.8rem} .shortcut{padding:1rem .9rem}}

.pull-quote{margin:1.4rem 0; padding:1.1rem 1.3rem; border-left:3px solid var(--gold); background:linear-gradient(135deg,#F7FBFF,#EEF6FD); border-radius:0 14px 14px 0}
.pull-quote p{font-family:var(--font-head); font-style:italic; font-size:1.08rem; color:var(--navy-800); margin:0 0 .5rem; line-height:1.6}
.pull-quote cite{font-style:normal; font-size:.82rem; letter-spacing:.06em; color:var(--muted)}

.badge-amber{background:#FFF4E0; color:#8A5A12}
.badge-red{background:#FDECEC; color:#9B2C2C}
.badge-green{background:#E8F7EF; color:#14683F}

.cta-ps{margin-top:1.2rem; font-family:var(--font-head); font-style:italic; color:rgba(255,255,255,.85); font-size:1.02rem; text-align:center}
@media(min-width:900px){.cta-ps{text-align:left}}

.job-top{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}


/* ===== v4.1 SAFE ICON DEFAULT (prevents unsized-SVG blowups) ===== */
svg.ic{width:20px; height:20px}



/* ===== v4.3 HYBRID EDIT - clean premium base + human touches =====
   Kept: one signature wave, squiggle, asymmetric intro, organic photo
   corners, ticket job cards, polaroid stories. Restraint wins. */

/* -- one signature wave under the hero -- */
.wave{position:absolute; top:0; left:0; right:0; line-height:0; transform:translateY(-98%); pointer-events:none; z-index:3}
.wave svg{display:block; width:100%; height:56px}
@media(max-width:640px){.wave svg{height:32px}}
.shortcuts{margin-top:0; padding-top:3.2rem; position:relative}

/* -- handwritten squiggle under the shortcuts line -- */
.shortcuts-eyebrow::after{
  content:''; display:block; width:84px; height:8px; margin:.45rem auto 0; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 8' fill='none' stroke='%2300A6E8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 5 Q 12 1 22 5 T 42 5 T 62 5 T 82 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain;
}

/* -- asymmetric intro + organic photo corners (no tape) -- */
.intro-sec .split{grid-template-columns:.92fr 1.08fr; gap:3.8rem}
.organic-frame img{border-radius:30px 72px 34px 66px}
@media(max-width:900px){.intro-sec .split{grid-template-columns:1fr; gap:2.6rem}}

/* -- pull-quote: big open quote, stays straight -- */
.pull-quote{position:relative; border-radius:0 16px 4px 16px}
.pull-quote::before{
  content:'\201C'; position:absolute; top:-.5rem; left:.7rem;
  font-family:Georgia,serif; font-size:3.2rem; line-height:1; color:var(--gold); opacity:.32;
}
.pull-quote p{position:relative}

/* -- job tickets: perforation line + tiny stamp tilt -- */
.job-card{border-radius:10px 24px 10px 24px}
.job-card:nth-child(2n){border-radius:24px 10px 24px 10px}
.job-top{padding-bottom:.7rem; border-bottom:2px dashed var(--gold-soft); margin-bottom:.7rem}
.job-top .badge{rotate:-2deg; font-weight:700}
.job-top .badge:nth-child(3){rotate:2.5deg}

/* -- polaroid stories: white frame, barely tilted -- */
.polaroids .story-card{
  background:#fff; border:1px solid var(--line); padding:.7rem .7rem 0;
  border-radius:8px; box-shadow:0 12px 30px rgba(4,40,74,.09);
  transition:transform .3s, rotate .3s, box-shadow .3s;
}
.polaroids .story-card:nth-child(odd){rotate:-.8deg}
.polaroids .story-card:nth-child(even){rotate:.7deg}
.polaroids .story-card:hover{rotate:0deg; translate:0 -5px; box-shadow:0 18px 40px rgba(4,40,74,.13)}
.polaroids .story-card .card-media{border-radius:4px}
.polaroids .story-card .card-body{padding:1rem .7rem 1.4rem}
.polaroids .story-role{font-style:italic; color:var(--muted); font-size:.85rem; margin:.15rem 0 .5rem}

@media (prefers-reduced-motion: reduce){
  .shortcut, .polaroids .story-card{transition:none}
}


/* ===== v4.4 BRAND LOCKUP - name & slogan, equal weight ===== */
.brand-lockup{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin:0 0 1.1rem}
.lockup-name, .lockup-slogan{
  font-family:var(--font-head); font-size:1.35rem; line-height:1.3; letter-spacing:.01em;
}
.lockup-name{font-weight:800; color:var(--gold-2)}
.lockup-slogan{font-weight:400; color:#fff; font-style:italic}
.lockup-rule{width:1px; height:1.55rem; background:rgba(255,255,255,.4)}
@media(max-width:640px){
  .brand-lockup{gap:.5rem}
  .lockup-name, .lockup-slogan{font-size:1.02rem}
  .lockup-rule{display:none}
}

/* name & slogan equal in header/footer brand */
.brand-name{font-size:1.05rem}
.brand-tag{font-size:1.05rem; font-weight:500; line-height:1.3}


/* ===== v4.5 CLEAR CONTRAST - every word readable ===== */

/* navy section: solid fallback first, gradient on top (can never render invisible) */
.section.section-navy{
  background-color:#04284A;
  background-image:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  color:#E6EDF7;
}
.section.section-navy .section-title{color:#fff}

/* accent text on LIGHT backgrounds -> deep blue (pale cyan was unreadable) */
.eyebrow{color:var(--navy-700)}
.news-date{color:var(--navy-700)}
.link-arrow{color:var(--navy-700)}
.stars{color:#B8860B}

/* on NAVY: crisp bright text */
.flag-name{color:#fff}
.flag-link{color:var(--gold-2)}
.breadcrumb{color:#B9C6DA}
.marquee::before{background:linear-gradient(90deg, rgba(4,40,74,.96), transparent)}
.marquee::after{background:linear-gradient(270deg, rgba(4,40,74,.96), transparent)}


/* ===== v4.6 UNIFORM CARDS + SLOGAN SMALL CAPS ===== */

/* every card: same image height, same body rhythm, dead level rows */
.cards{align-items:stretch}
.cards .card{display:flex; flex-direction:column; rotate:0deg !important}
.card-media{height:210px; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover}
.cards .card .card-body{display:flex; flex-direction:column; flex:1}
.card-text{flex:1}
.link-arrow{align-self:flex-start; margin-top:auto}
.job-card .card-body{display:flex; flex-direction:column; flex:1}
.job-card .btn-block{margin-top:auto}

/* one arrow only (pseudo-element arrow + icon = double) */
.link-arrow::after{content:none; display:none}

/* polaroid stories: keep the frame, lose the tilt -> level cards */
.polaroids .story-card{rotate:0deg !important}
.polaroids .story-card:hover{translate:0 -4px}

/* slogan: SMALL CAPS, always smaller than the company name */
.lockup-name{font-size:1.5rem; font-weight:800}
.lockup-slogan{
  font-size:.8rem; font-weight:600; font-style:normal;
  text-transform:uppercase; letter-spacing:.17em; color:#E6EDF7;
}
.lockup-rule{height:1.15rem}
.brand-name{font-size:1.05rem}
.brand-tag{
  font-size:.78rem; font-weight:600; line-height:1.45;
  text-transform:uppercase; letter-spacing:.12em;
}
@media(max-width:640px){
  .lockup-name{font-size:1.15rem}
  .lockup-slogan{font-size:.72rem; letter-spacing:.14em}
}


/* ===== v4.7 STALE-PROOF POLISH + FORM FIXES ===== */

/* form-grid: buttons always own full row (was cramping beside last field) */
.form-grid > .btn{grid-column:1/-1; justify-self:start; align-self:start; margin-top:.3rem}

/* readable sub-copy on white cards (was pale/italic) */
.panel-card .page-sub, .card .page-sub{color:var(--muted); font-style:normal; font-size:1rem}

/* one arrow only — kill LUXE pseudo-arrow (icon already draws it) */
.link-arrow::after{content:none; display:none; margin:0 !important; transform:none !important}

/* uniform cards re-asserted */
.cards{align-items:stretch}
.card-media{height:210px; overflow:hidden}


/* ===== v4.8 FORM CARD PADDING + CLEAN TYPE ===== */
.panel-card{padding:1.8rem 1.7rem}
.panel-card:has(.card-body){padding:0}
.panel-card h1, .panel-card h2{margin-top:0}
.panel-card .form-grid{margin-top:1.15rem}

/* form sub-copy: clean sans on white cards (never the dark-hero serif) */
.panel-card .page-sub, .card .page-sub{
  font-family:var(--font) !important; font-style:normal !important;
  font-weight:400 !important; color:var(--muted) !important; font-size:1rem !important;
  line-height:1.6; margin:.35rem 0 0;
}

@media(max-width:640px){
  .panel-card{padding:1.3rem 1.15rem}
}


/* ===== v4.9 SLOGAN - normal case (chotohater likha), EQUAL to name ===== */
.lockup-name{font-size:1.5rem; font-weight:800}
.lockup-slogan{
  font-size:1.5rem !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:.01em !important;
  font-style:normal !important; color:#fff;
}
.brand-name{font-size:1.05rem; font-weight:800}
.brand-tag{
  font-family:var(--font-head) !important; font-style:normal !important;
  font-size:1.05rem !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:.01em !important;
}
.about-slogan{
  font-family:var(--font); font-size:1.3rem; font-weight:500;
  color:var(--muted); margin:.1rem 0 1.1rem;
}
@media(max-width:640px){
  .lockup-name, .lockup-slogan{font-size:1.05rem !important}
}


/* ===== v4.10 SLOGAN FITS - smaller font, never overflows ===== */
.lockup-name{font-size:1.5rem; font-weight:800}
.lockup-slogan{
  font-size:1.05rem !important; font-weight:500 !important; color:#fff;
  min-width:0; overflow-wrap:break-word;
}
.brand-name{font-size:1.05rem; font-weight:800}
.brand-tag{
  font-family:var(--font-head) !important; font-style:normal !important;
  font-size:.74rem !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:.01em !important;
  min-width:0; line-height:1.4;
}
.about-slogan{font-size:1.05rem !important}
@media(max-width:640px){
  .lockup-name{font-size:1.15rem}
  .lockup-slogan{font-size:.9rem !important}
}


/* ======================= v4.11 RECRUITMENT SECTION ======================= */
.worker-types{ text-align:center; max-width:880px; margin:0 auto; }
.wt-row{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:0; margin:1rem 0 .6rem; }
.wt-chip{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem .8rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--navy-800); }
.wt-ico{ width:38px; height:38px; border-radius:11px; background:var(--gold-soft); color:var(--navy-700); display:inline-flex; align-items:center; justify-content:center; }
.wt-ico svg{ width:19px; height:19px; }
.wt-chip strong{ font-size:.86rem; font-weight:600; line-height:1.35; }
.wt-note{ color:var(--ink-2); font-size:.86rem; margin:.4rem 0 0; }
.detail-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin:1.1rem 0 .4rem; }
@media (max-width:760px){ .wt-row{ grid-template-columns:repeat(2,1fr); } }


/* ======================= v4.12 WORKER TYPE FILTER ======================= */
.wt-chip{ text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.wt-chip:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(4,40,74,.10); border-color:var(--gold-2); }
.wt-chip.active{ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 2px rgba(0,166,232,.18); }
.wt-row li{ display:flex; }
.badge-blue{ background:var(--gold-soft); color:var(--navy-700); }


/* ======================= v4.13 EMPLOYER CTA ======================= */
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin:1.1rem 0 .4rem; }
.hero-cta .btn{ min-width:200px; }


/* ======================= v4.14 STUDY ABROAD ======================= */
.note-pill{ grid-column:1/-1; display:flex; gap:.55rem; align-items:flex-start; background:var(--gold-soft); color:var(--navy-800); border:1px solid rgba(0,166,232,.25); border-radius:12px; padding:.85rem 1rem; font-size:.85rem; margin:.4rem 0 0; }
.note-pill svg{ flex:none; width:18px; height:18px; margin-top:1px; }
.inst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.inst-card{ padding:1.4rem; }
.jsteps{ list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; padding:0; margin:0; counter-reset:j; }
.jstep{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem .9rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--navy-800); }
.jnum{ width:32px; height:32px; border-radius:50%; background:var(--navy-800); color:#fff; font-size:.85rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.jstep strong{ font-size:.85rem; font-weight:600; line-height:1.35; }
@media (max-width:900px){ .inst-grid{ grid-template-columns:1fr; } .jsteps{ grid-template-columns:repeat(2,1fr); } }


/* ======================= v4.15 TRADE UPGRADE ======================= */
.bs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; max-width:920px; margin:0 auto; }
.bs-card{ padding:1.5rem 1.6rem; }
.bs-card .card-title{ display:flex; align-items:center; gap:.55rem; }
.bs-card .card-title svg{ width:20px; height:20px; color:var(--navy-700); }
.bs-list{ list-style:none; padding:0; margin:.9rem 0 0; display:grid; gap:.65rem; }
.bs-list li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--ink-2); font-size:.9rem; }
.bs-list li svg{ flex:none; width:17px; height:17px; color:var(--gold); margin-top:2px; }
.cat-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.4rem; }
.cat-chips .chip{ display:inline-block; padding:.42rem .95rem; border:1px solid var(--line); border-radius:999px; font-size:.82rem; color:var(--navy-700); background:var(--card); text-decoration:none; }
.cat-chips .chip.active{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
@media (max-width:760px){ .bs-grid{ grid-template-columns:1fr; } }


/* ======================= v4.16 DYNAMIC EXTRAS ======================= */
.partners-sec{ padding-top:1.6rem; padding-bottom:1.6rem; }
.partners-sec .section-head{ margin-bottom:.9rem; }
.partners-strip{ list-style:none; display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; padding:0; margin:0; }
.partner-chip{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.9rem 1.4rem; display:flex; align-items:center; min-height:56px; }
.partner-chip strong{ color:var(--navy-800); font-size:.9rem; font-weight:600; }
.partner-chip img{ max-height:38px; max-width:150px; object-fit:contain; }
.cookie-bar{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60; background:var(--navy-900); color:#fff; border-radius:14px; padding:.9rem 1.1rem; display:flex; gap:1rem; align-items:center; justify-content:space-between; box-shadow:0 14px 40px rgba(4,40,74,.35); }
.cookie-bar p{ margin:0; font-size:.83rem; color:#DCE6F2; }
.cookie-bar a{ color:var(--gold-2); }
@media (max-width:600px){ .cookie-bar{ flex-direction:column; align-items:stretch; text-align:center; } }


/* ======================= v4.17 TRADE DESK ======================= */
.trade-desk{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; background:var(--gold-soft); border:1px solid rgba(0,166,232,.22); border-radius:12px; padding:.7rem .95rem; font-size:.82rem; color:var(--navy-800); margin:.2rem 0 1rem; }
.trade-desk svg{ width:15px; height:15px; color:var(--navy-700); }
.trade-desk a{ color:var(--navy-700); font-weight:600; text-decoration:none; }
.trade-desk a:hover{ text-decoration:underline; }


/* === v4.18 P5/P6: 404 quick links, staff list, media CLS guards === */
.err-links{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.3rem}
.err-links a{display:inline-block; padding:.55rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy-700); font-weight:600; font-size:.92rem}
.err-links a:hover{border-color:var(--gold); color:var(--navy-900)}
.staff-list{list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.staff-list li{display:flex; gap:.7rem; align-items:center}
.staff-list li img{width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none}
.story-card img, .product-card img{aspect-ratio:16/10; width:100%; object-fit:cover}
.check-list li{gap:.6rem}

/* === v4.19 — PDO Desk design system (P12: portal + latest/immigration/legal) === */
.btn.full{width:100%; justify-content:center; text-align:center}
.btn-outline.light{border-color:rgba(255,255,255,.65); color:#fff; background:transparent}
.btn-outline.light:hover{background:#fff; color:var(--navy-900); border-color:#fff}
.cards-1{grid-template-columns:1fr}
.split-2{display:grid; grid-template-columns:1.25fr .9fr; gap:1.5rem; align-items:start}
@media (max-width: 920px){ .split-2{grid-template-columns:1fr} }

.pdo-hero{overflow:hidden}
.pdo-hero.has-bg{background-size:cover; background-position:center; isolation:isolate}
.pdo-hero.has-bg::before{content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(4,40,74,.94) 0%, rgba(10,61,109,.86) 55%, rgba(14,84,147,.72) 100%); z-index:0}
.pdo-hero.has-bg > .container{position:relative; z-index:1}
.pdo-stamp{position:absolute; top:1.5rem; right:1.3rem; border:2px solid rgba(255,255,255,.55); border-radius:10px; padding:.45rem .85rem; transform:rotate(-4deg); z-index:2; background:rgba(4,40,74,.25)}
.pdo-stamp span{display:block; letter-spacing:.2em; font-size:.68rem; font-weight:800; color:#fff; text-transform:lowercase; line-height:1}
.pdo-stamp.small{position:static; transform:rotate(-3deg); border-color:var(--gold); background:#fff; padding:.5rem .9rem}
.pdo-stamp.small span{color:var(--navy-800)}
.pdo-hero .eyebrow.gold{color:#9FD4F2}
@media (max-width: 700px){ .pdo-stamp{top:.9rem; right:.8rem; padding:.35rem .6rem} .pdo-stamp span{font-size:.6rem} }

.pdo-rail{background:#fff; border-bottom:1px solid var(--line)}
.rail-inner{display:flex; gap:.5rem; align-items:center; overflow-x:auto; padding:.7rem 0; scrollbar-width:thin}
.rail-tag{display:inline-flex; align-items:center; gap:.35rem; flex:none; font-weight:800; color:var(--navy-900); font-size:.85rem; margin-right:.35rem}
.rail-pill{flex:none; display:inline-block; padding:.42rem .95rem; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--navy-700); font-size:.85rem; font-weight:600; text-decoration:none; white-space:nowrap}
.rail-pill:hover{border-color:var(--gold); color:var(--navy-900)}
.rail-pill.on{background:var(--navy-900); border-color:var(--navy-900); color:#fff}

.pdo-cards .card{height:100%}
.pdo-cards .card-body{display:flex; flex-direction:column; height:100%}
.pdo-cards .step-no{width:2.4rem; height:2.4rem; border-radius:50%; background:var(--gold-soft); color:var(--navy-900); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; margin-bottom:.85rem; flex:none}

.stage-track{list-style:none; margin:0; padding:0}
.stage-track.vertical{display:flex; flex-direction:column}
.stage-track.vertical .stage-node{position:relative; padding:0 0 1.7rem 2.3rem; border-left:2px dashed var(--line); margin-left:.72rem}
.stage-track.vertical .stage-node:last-child{border-left-color:transparent; padding-bottom:0}
.stage-track.vertical .node-dot{position:absolute; left:-.82rem; top:.1rem; width:1.45rem; height:1.45rem; border-radius:50%; background:#fff; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800; color:var(--navy-900)}
.stage-track.vertical .stage-body .card-title{margin-bottom:.25rem}

.stage-track.horizontal{display:flex; gap:.4rem; list-style:none; margin:1.2rem 0 0; padding:0}
.stage-track.horizontal.wide{margin:0}
.stage-track.horizontal .stage-node{flex:1; text-align:center; position:relative; min-width:0}
.stage-track.horizontal .stage-node:not(:last-child)::after{content:''; position:absolute; top:.58rem; left:58%; right:-42%; border-top:2px dotted var(--line); z-index:0}
.stage-track.horizontal .node-dot{position:relative; z-index:1; width:1.25rem; height:1.25rem; border-radius:50%; border:2px solid var(--line); background:#fff; display:block; margin:0 auto .45rem}
.stage-track.horizontal .stage-node.done .node-dot{border-color:var(--gold); background:var(--gold-soft)}
.stage-track.horizontal .stage-node.current .node-dot{border-color:var(--navy-900); background:var(--navy-900)}
.stage-track.horizontal .node-label{font-size:.78rem; font-weight:600; color:var(--navy-700); display:block}
.stage-track.horizontal .stage-node.current .node-label{color:var(--navy-900); font-weight:800}
@media (max-width: 640px){ .stage-track.horizontal .node-label{font-size:.62rem} }

.track-box .card-body.track-row{display:flex; gap:.7rem; align-items:flex-end; flex-wrap:wrap}
.track-box .track-row .form-group{flex:1; min-width:200px}
.track-box .track-row .label{font-weight:700}
.track-result{margin-top:1.3rem; border-top:3px solid var(--gold); box-shadow:var(--shadow-md)}
.track-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem}
.track-result .stage-track{margin-top:1.1rem}

.note-strip{display:flex; gap:1.1rem; align-items:center; margin-top:1.7rem; padding:1.15rem 1.4rem; background:#fff; border:1px dashed var(--gold); border-radius:var(--radius)}
.note-strip p{margin:0; color:var(--ink)}

.latest-feed{display:flex; flex-direction:column; gap:.7rem}
.feed-item{display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.95rem 1.1rem; text-decoration:none; transition:border-color .2s}
.feed-item:hover{border-color:var(--gold)}
.feed-item strong{color:var(--navy-900)}
.feed-item p{margin:.2rem 0 0}
.feed-date{flex:none; display:inline-block; padding:.28rem .55rem; border:1px solid var(--line); border-radius:8px; font-size:.72rem; font-weight:800; color:var(--navy-700); background:var(--bg); transform:rotate(-2deg); white-space:nowrap}

.side-card .btn{margin-top:1rem}
.doc-card{text-decoration:none}
.doc-card .card-title{color:var(--navy-900)}

@media (prefers-reduced-motion: reduce){ .feed-item{transition:none} }

/* ============================================================
   v4.20 — SUNDOR PASS · slogan-rule fix · contrast repair · details
   ============================================================ */

/* ---- A) SLOGAN RULE (user law): lowercase, smaller than name, quiet ---- */
.brand-tag{
  text-transform:lowercase; letter-spacing:.02em; font-size:.8rem; font-weight:500;
}
.navbar .brand-tag{color:var(--navy-700)}          /* contrast on white */
.brand-footer .brand-tag{color:var(--gold-2)}      /* contrast on navy */

/* home hero lockup — name BIG, slogan choto + lowercase */
.brand-lockup{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:1.15rem}
.lockup-name{font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:.01em; line-height:1.2; display:inline-block}
.lockup-rule{display:inline-block; width:2px; height:1.15rem; background:var(--gold-2); transform:translateY(.15rem); flex:none}
.lockup-slogan{
  font-family:"Playfair Display","Georgia",serif; font-style:italic; font-weight:500;
  font-size:1.05rem; color:#C2CFE2; text-transform:lowercase; letter-spacing:.02em;
}
html[data-lang="bn"] .lockup-slogan{font-family:var(--font-head); font-style:normal}
@media (max-width:640px){
  .lockup-name{font-size:1.3rem}
  .lockup-slogan{font-size:.95rem}
}

/* ---- B) CONTRAST REPAIR ---- */
.page-sub{
  font-family:var(--font); font-style:normal; font-weight:400;
  color:var(--muted); font-size:1.02rem; line-height:1.7;
}
.page-hero .page-sub{
  font-family:"Playfair Display","Georgia",serif; font-style:italic;
  color:#D7E3F3; font-size:1.14rem;
}
html[data-lang="bn"] .page-hero .page-sub{font-family:var(--font-head); font-style:normal}
.hero-strip .stat{background:none; border:0; box-shadow:none}   /* keep stats on dark strip readable */
.footer-admin-link{color:#9AA9C2}
.footer-admin-link:hover{color:var(--gold-2)}

/* ---- C) SUNDOR DETAILS ---- */
.page-hero .page-title::after{
  content:''; display:block; width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2)); margin:.75rem 0 0;
}
.hero-title, .page-title, .section-title, .card-title{letter-spacing:-.012em}
.hero-title{text-wrap:balance}
.footer-title{position:relative; padding-bottom:.55rem}
.footer-title::after{content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; border-radius:2px; background:var(--gold)}
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5; pointer-events:none}
::selection{background:#BFE7F8; color:var(--navy-900)}
img{background:#F0F4F9}
.input::placeholder, .textarea::placeholder{color:#8E9DB3}
@media (max-width:620px){ .input,.textarea,.select{font-size:16px} }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ============================================================
   v4.21 — SENTENCE-CASE (user-approved): buttons + nav un-caps
   ============================================================ */
.btn{
  text-transform:none; letter-spacing:.01em; font-size:.95rem; font-weight:600;
}
.btn-sm{font-size:.85rem; letter-spacing:.01em}
.btn-lg{font-size:1.05rem; letter-spacing:.01em}
.nav-link{
  text-transform:none; letter-spacing:normal; font-size:.95rem; font-weight:600;
}

/* ============================================================
   v4.22 — STAT CARD REPAIR (undoes bad v4.20 edit on .hero-strip .stat)
   Floating white dashboard cards: gold top-rule, navy numbers, clear labels
   ============================================================ */
.hero-strip .stat{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:16px; padding:1.15rem 1.3rem; text-align:left;
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:.1rem;
}
.hero-strip .stat-num{color:var(--navy-800); text-shadow:none; font-size:1.85rem}
.hero-strip .stat-num small{color:var(--gold); font-size:1rem; margin-left:2px}
.hero-strip .stat-num.stat-text{font-size:1.15rem; padding-top:.35rem}
.hero-strip .stat-label{color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:.7rem}
@media (max-width:760px){
  .hero-strip .stat{padding:.95rem 1.05rem}
  .hero-strip .stat-num{font-size:1.55rem}
}

/* ============================================================
   v4.23 — HERO CONTRAST REPAIR + NAV FIT
   1) grain layer set opacity .025 on .page-hero::before — killed dark overlays
   2) has-bg heroes need dark base even if an image fails
   3) nav items + slogan must never wrap ugly
   ============================================================ */
.pdo-hero.has-bg{background-color:var(--navy-900); background-size:cover; background-position:center}
.pdo-hero.has-bg::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:1;
  background:linear-gradient(115deg, rgba(4,40,74,.94) 0%, rgba(10,61,109,.86) 55%, rgba(14,84,147,.72) 100%);
}
.brand-tag{white-space:nowrap}
.nav-link{white-space:nowrap}
@media (max-width:1320px) and (min-width:921px){
  .nav-link{padding:.55rem .52rem; font-size:.86rem}
  .nav-inner{gap:.5rem}
  .navbar .brand-tag{font-size:.72rem}
}

/* ============================================================
   v4.24 — TEXT VISIBILITY SWEEP (user: colors not visible in many places)
   eyebrow/news-date/media-badge gold-on-white = washed -> navy-700
   dark contexts keep light gold; slogan lowercase truly enforced (wins v4.9/v4.10 !important)
   ============================================================ */
.eyebrow{color:var(--navy-700)}
.page-hero .eyebrow, .pdo-hero .eyebrow, .section-navy .eyebrow, .hero .eyebrow, .cta-band .eyebrow{color:var(--gold-2)}
.eyebrow.gold{color:#9FD4F2}
.news-date{color:var(--navy-700)}
.media-badge span{color:var(--navy-700)}
.lockup-slogan{text-transform:lowercase !important}
.brand-tag{text-transform:lowercase !important}

/* ============================================================
   v4.25 - HERO + STAT CARDS premium pack
   ============================================================ */
.hero-inner{flex-direction:column; align-items:flex-start}
.hero-squiggle{display:block; width:116px; height:12px; margin:.1rem 0 1.05rem; color:var(--gold-2); opacity:.95}
.hero-actions{display:grid; grid-template-columns:1fr; gap:.65rem; width:100%; max-width:820px}
.hero-actions .btn{justify-content:center; height:48px}
.hero .btn-white{background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5); color:#fff}
.hero .btn-white:hover{background:rgba(255,255,255,.24); color:#fff}
@media(min-width:400px){.hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:760px){.hero-actions .btn{white-space:nowrap}}
@media(min-width:1150px){.hero-actions{grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none}}
.hero::after{opacity:.6; background:radial-gradient(1100px 480px at 85% 18%, rgba(0,166,232,.16), transparent 60%), linear-gradient(180deg, transparent 58%, rgba(6,24,48,.4) 100%)}
.hero-strip{margin-top:-4.6rem}
.hero-strip-inner{gap:1.1rem}
.stat{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#F6FAFE 100%);
  border:1px solid #E3EAF3; border-top:1px solid #E3EAF3;
  border-radius:18px 18px 30px 18px;
  padding:1.35rem 1.4rem 1.15rem;
  box-shadow:0 14px 34px -14px rgba(7,26,51,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat::before{content:''; position:absolute; top:0; left:1.4rem; width:58px; height:4px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,#00A6E8,rgba(0,166,232,0)); transition:width .25s ease}
.stat:hover{transform:translateY(-3px); box-shadow:0 22px 44px -16px rgba(7,26,51,.34)}
.stat:hover::before{width:96px}
.stat-head{display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem}
.stat-ico{flex:none; width:42px; height:42px; border-radius:13px 13px 13px 5px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#1773C4,#00A6E8); box-shadow:0 8px 18px -6px rgba(23,115,196,.55)}
.stat-ico .ic{width:21px; height:21px}
.stat-num{font-size:2.3rem; line-height:1.05}
.stat-num small{font-size:1.15rem}
.stat-num.stat-text{font-size:1.32rem; padding-top:.55rem}
.stat-label{margin-top:.5rem}
.stat-sub{display:block; margin-top:auto; padding-top:.55rem; font-size:.8rem; line-height:1.45; color:#51617A}
@media(max-width:760px){
  .hero-strip{margin-top:-2.6rem}
  .stat{padding:1.05rem 1.1rem .95rem; border-radius:14px 14px 22px 14px}
  .stat-num{font-size:1.7rem}
  .stat-num.stat-text{font-size:1.06rem; padding-top:.45rem}
  .stat-ico{width:36px; height:36px; border-radius:11px 11px 11px 4px}
  .stat-ico .ic{width:18px; height:18px}
  .stat-sub{font-size:.74rem; padding-top:.4rem}
}
@media(max-width:379px){.hero-actions{grid-template-columns:1fr}}

/* ============================================================
   v4.26 - equal cards guarantee (sob card soman)
   ============================================================ */
.cards{align-items:stretch}
.cards > .card{height:100%; margin-top:0 !important}
.card .card-body{display:flex; flex-direction:column; flex:1}
.card .card-body > .btn{margin-top:auto}
.cards-3 .card-media, .cards-4 .card-media{aspect-ratio:16/10}

/* ============================================================
   v4.28 - UI/UX fix pack: cookie/floats/footer/focus
   ============================================================ */
.cookie-bar{z-index:120}
body.cookie-open .float-actions{bottom:7.4rem}
.cookie-bar .btn-navy{background:#fff; color:var(--navy-800); border-color:#fff}
.cookie-bar .btn-navy:hover{background:var(--gold-soft); color:var(--navy-900)}
:focus-visible{outline:3px solid rgba(0,166,232,.55); outline-offset:2px}
.btn:focus-visible, .fab:focus-visible, .nav-link:focus-visible{outline-color:var(--gold-2)}
@media (max-width:620px){
  body.cookie-open .mobile-cta{display:none}
  body.cookie-open .float-actions{bottom:10.5rem}
  body{padding-bottom:calc(3.55rem + env(safe-area-inset-bottom, 0px))}
}

/* ============================================================
   v4.34 — CEO message section · country flag cards · reveal
   ============================================================ */
.reveal{opacity:0; transform:translateY(26px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1)}
.reveal.d1.in{transition-delay:.06s}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important; transform:none !important; transition:none !important}}

/* CEO message */
.ceo-sec{background:var(--bg)}
.ceo-wrap{
  display:grid; grid-template-columns:300px 1fr; gap:2.6rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:2.6rem;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.ceo-wrap::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--gold),var(--gold-2))}
.ceo-media{position:relative; width:min(260px,72%); margin:0 auto}
.ceo-photo{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; display:block;
  position:relative; z-index:1; transition:transform .5s ease;
}
.ceo-wrap:hover .ceo-photo{transform:scale(1.02)}
.ceo-monogram{
  display:flex; align-items:center; justify-content:center;
  font-size:3.6rem; font-weight:800; letter-spacing:.05em; color:#fff;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
}
.ceo-ring{position:absolute; right:-13px; bottom:-13px; width:68%; height:64%; border:3px solid var(--gold); border-radius:18px; z-index:0; opacity:.55}
.ceo-badge{
  position:absolute; z-index:2; right:-9px; top:-9px; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:var(--navy-900);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(4,43,74,.20);
}
.ceo-badge .ic, .ceo-badge svg{width:20px; height:20px}
.ceo-body{position:relative}
.ceo-mark{font-family:Georgia,'Times New Roman',serif; font-size:4.4rem; line-height:1; color:var(--gold); display:block; margin:-.3rem 0 .1rem}
.ceo-msg{font-size:1.12rem; line-height:1.85; color:var(--ink); white-space:pre-line}
.ceo-sign{margin-top:1.3rem; display:flex; flex-direction:column; gap:.15rem}
.ceo-sign strong{font-size:1.14rem; color:var(--navy-900)}
.ceo-sign span{font-size:.86rem; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-weight:600}
@media (max-width:760px){
  .ceo-wrap{grid-template-columns:1fr; padding:1.9rem 1.4rem; gap:1.7rem; text-align:left}
  .ceo-media{width:min(210px,62%); margin:0}
  .ceo-mark{font-size:3.4rem}
  .ceo-msg{font-size:1.02rem}
}

/* country flag cards (home navy section + countries page) */
.flag-box{
  width:88px; height:58px; border-radius:9px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(255,255,255,.35);
  font-size:2.5rem; line-height:1; box-shadow:0 3px 10px rgba(4,43,74,.14);
}
.flag-box img{width:100%; height:100%; object-fit:cover}
.flag-box.big{width:100px; height:64px; font-size:2.9rem}
.flag-card .flag-name{font-size:1.02rem}
.flag-card:hover .flag-box{transform:scale(1.05)}
.flag-box{transition:transform .25s ease}
.country-card .flag-box{border:1px solid var(--line); background:#EEF4FA}
.country-card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.country-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold)}
.country-card .ct-view{margin-top:.5rem; display:inline-flex; gap:.4rem; align-items:center; justify-content:center}
.ct-view .ic, .ct-view svg{width:14px; height:14px}

/* country detail: sectors + benefits */
.ct-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.4rem}
.ct-info .card-title{display:flex; align-items:center; gap:.55rem; color:var(--navy-900)}
.ct-info .card-title .ic, .ct-info .card-title svg{width:18px; height:18px; color:var(--gold)}
.ct-info .addr-multi{margin-top:.6rem; color:#3C4C61; line-height:1.85}
@media (max-width:760px){.ct-info-grid{grid-template-columns:1fr}}

/* footer bottom: © left · credit right */
.footer-bottom-inner .dev-credit a{color:#A7CBEF; text-decoration:none}
.footer-bottom-inner .dev-credit a:hover{text-decoration:underline}

/* country items chips */
.ct-items{list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.ct-items li{
  display:flex; align-items:center; gap:.6rem; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:.6rem .85rem; font-weight:600; color:#26364B; font-size:.95rem;
}
.ct-items li .ic, .ct-items li svg{width:15px; height:15px; color:var(--blue); flex:none}

/* ============================================================
   v4.36 — slim, even-height footer
   ============================================================ */
.footer-grid{padding:2.3rem 0 1.6rem; gap:2.2rem}
.footer-title{margin:0 0 .65rem}
.footer-desc{margin:.55rem 0; line-height:1.62}
.footer-line{margin-top:.1rem}
.footer-links li{padding:.15rem 0}
.footer-links a{font-size:.9rem}
.footer-contact li{padding:.24rem 0; font-size:.9rem}
.footer-social{margin-top:.75rem}
.footer-links-2col{display:grid; grid-template-columns:1fr 1fr; column-gap:1.1rem}
.footer-bottom{padding:.7rem 0}
@media (max-width:520px){ .footer-links-2col{grid-template-columns:1fr} }

/* v4.37 — footer column balance: stop the long email line from
   inflating the contact column (grid min-width floor) */
.footer-grid>*{min-width:0}
.footer-contact li{overflow-wrap:anywhere}
@media (min-width:1025px){
  .footer-grid{grid-template-columns:1.25fr 1.35fr 1fr 1.4fr}
}

/* v4.37b — navbar overflow on phones (brand-tag nowrap pushed the
   hamburger 9px past the viewport) + footer slim pass 2 */
@media (max-width:480px){
  .brand{min-width:0}
  .brand-text{min-width:0; max-width:calc(100vw - 150px)}
  .brand-tag{white-space:normal; line-height:1.3}
}
body{overflow-x:clip}

.footer-grid{padding:2rem 0 1.3rem; gap:2rem}
.footer-title{margin:0 0 .55rem; padding-bottom:.45rem}
.footer-desc{margin:.45rem 0; line-height:1.55}
.footer-links li{padding:.12rem 0}
.footer-contact li{padding:.18rem 0; line-height:1.5}
.footer-social{margin-top:.6rem}
.footer-bottom{padding:.6rem 0}
@media (min-width:1025px){
  .footer-grid{grid-template-columns:1.15fr 1.3fr .95fr 1.6fr}
}

/* ============================================================
   v4.38 — FOOTER REDESIGN: structured contact rows (icon chips),
   brand-color top hairline, floats hide over footer
   ============================================================ */
.site-footer{position:relative}
.site-footer::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #00A6E8, #0E5493 72%, rgba(14,84,147,0))}
.footer-grid{padding:2.4rem 0 1.7rem; gap:2.3rem}
.contact-list{list-style:none; margin:.4rem 0 0; padding:0}
.c-item{display:flex; align-items:flex-start; gap:.7rem; padding:.26rem 0}
.c-ico{width:30px; height:30px; flex:none; margin-top:.12rem; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); color:#9FD4F2}
.c-ico .ic{width:14px; height:14px}
.c-body{min-width:0; flex:1}
.c-label{display:block; font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#9FD4F2; margin-bottom:.1rem}
.c-val{display:block; min-width:0; color:#DCE7F3; font-size:.9rem; line-height:1.5; overflow-wrap:anywhere}
a.c-val:hover{color:#9FD4F2}
.c-note{font-size:.78rem; color:#B9C6DA; line-height:1.55; margin:.8rem 0 0}
.footer-about .footer-social{margin-top:1rem}
.float-actions{transition:opacity .25s ease, transform .25s ease}
.float-actions.fab-hide{opacity:0; pointer-events:none; transform:translateY(10px)}

/* v4.39 — contact column slimmed to match sibling columns */
.contact-list{margin-top:.2rem}
.c-item{padding:.1rem 0}
.c-ico{width:25px; height:25px; margin-top:.08rem; border-radius:8px}
.c-ico .ic{width:13px; height:13px}
.c-label{font-size:.6rem; margin-bottom:.04rem}
.c-val{font-size:.86rem; line-height:1.45}
.c-note{font-size:.74rem; margin:.5rem 0 0}
.footer-links li{padding:.2rem 0}


/* v4.40 — quick links / services tuned to match sibling column heights */
.footer-links li{padding:.06rem 0}
/* v4.40b — logo is now a transparent PNG: no white plate needed anywhere */
.logo-mark{background:transparent}

/* ============================================================
   v4.41 — cookie bar really hides (display:flex beat [hidden]) +
   country detail overview paragraphs
   ============================================================ */
.cookie-bar[hidden]{display:none !important}
.country-details{margin-top:.85rem; border-top:1px solid var(--line); padding-top:.85rem}
.country-details p{margin:.45rem 0; color:#3C4C61; line-height:1.75; font-size:.95rem}


/* ============================================================
   v4.42 — uploaded flag images inside job cards/rows +
   footer slogan stays inside its column (small, wrapped)
   ============================================================ */
.job-flag img, .job-row-flag img{height:1.7em; width:auto; display:inline-block; vertical-align:middle; border-radius:4px; box-shadow:0 1px 4px rgba(4,40,74,.18)}
.job-row-flag img{height:32px}
.brand-footer .brand-tag{white-space:normal; font-size:.72rem; letter-spacing:.04em; line-height:1.4; margin-top:.15rem}


/* ============================================================
   v4.43 — trust / accreditation badges (BOESL enlisted + e-GP registered)
   ============================================================ */
.trust-sec{padding:1.9rem 0 2.1rem; background:var(--bg-soft, #F5F8FC); border-bottom:1px solid var(--line)}
.trust-sec .eyebrow.center{display:block; text-align:center; margin-bottom:1.1rem}
.trust-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; max-width:900px; margin:0 auto}
.trust-badge{display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:16px; padding:.9rem 1.15rem; box-shadow:0 8px 22px rgba(4,40,74,.07); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease}
.trust-badge:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(4,40,74,.13)}
.trust-badge img{height:56px; width:auto; flex:none}
.trust-text{display:flex; flex-direction:column; min-width:0}
.trust-text strong{color:var(--navy-800); font-size:.98rem; letter-spacing:.01em}
.trust-text span{color:#5B6B7F; font-size:.77rem; line-height:1.4}
@media (max-width:760px){ .trust-grid{grid-template-columns:1fr} .trust-badge img{height:48px} }