/* =========================================================================
   HIJRAT — Design System  (updated 2026-05 — desktop preserved, mobile fixed)
   Replace your existing assets/css/style.css with this file.
   ========================================================================= */

:root{
  /* Brand */
  --color-primary: #0B3D91;
  --color-primary-dark:#082C68;
  --color-accent:  #2E8B57;
  --color-accent-dark:#1F6B3E;
  --color-gold:    #C9A227;
  --color-coral:   #E76F51;

  /* Neutrals */
  --color-bg:      #FBFAF7;
  --color-surface: #FFFFFF;
  --color-soft:    #F2F4F8;
  --color-border:  #E2E6EE;
  --color-text:    #14213D;
  --color-text-muted:#5C6478;

  /* Status */
  --color-success: #1E9E5C;
  --color-warn:    #E0A22C;
  --color-error:   #D63B3B;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10:40px;
  --s-12:48px; --s-16:64px; --s-20:80px;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --shadow-sm: 0 1px 2px rgba(11,61,145,.06), 0 1px 4px rgba(11,61,145,.04);
  --shadow-md: 0 4px 12px rgba(11,61,145,.08), 0 2px 6px rgba(11,61,145,.04);
  --shadow-lg: 0 12px 32px rgba(11,61,145,.10), 0 4px 12px rgba(11,61,145,.06);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;

  --content-max: 1200px;
}

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px; line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
body[dir="rtl"]{ font-family:var(--font-urdu), var(--font-sans); }

a{ color:var(--color-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ color:var(--color-text); line-height:1.25; margin:0 0 var(--s-4); font-weight:700; letter-spacing:-0.01em; }
h1{ font-size:clamp(2rem,4vw,3rem); }
h2{ font-size:clamp(1.5rem,2.8vw,2.25rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 var(--s-4); }

.container{ max-width:var(--content-max); margin:0 auto; padding:0 var(--s-5); }
section{ padding:var(--s-16) 0; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:12px 22px; border-radius:var(--r-pill);
  font-weight:600; font-size:.95rem; line-height:1; cursor:pointer;
  border:none; transition:transform .15s, box-shadow .15s, background .15s, color .15s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--color-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--color-primary-dark); box-shadow:var(--shadow-md); }
.btn-accent { background:var(--color-accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-accent:hover { background:var(--color-accent-dark); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--color-primary); border:1.5px solid var(--color-primary); }
.btn-ghost:hover{ background:var(--color-primary); color:#fff; }
.btn-light{ background:#fff; color:var(--color-primary); }
.btn-light:hover{ background:var(--color-soft); }
.btn-sm{ padding:8px 14px; font-size:.85rem; }
.btn-lg{ padding:16px 28px; font-size:1.05rem; }
.btn-block{ display:flex; width:100%; }

/* ===== Header / Navigation ===== */
.topbar{
  background:var(--color-primary);
  color:#fff;
  font-size:.85rem;
  padding:var(--s-2) 0;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); flex-wrap:wrap; }
.topbar a{ color:#fff; opacity:.9; }
.topbar a:hover{ opacity:1; }

.site-header{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  width:100%;
}
.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) 0;
  gap:var(--s-3);
  width:100%;
}
.brand{
  display:flex; align-items:center; gap:var(--s-2);
  font-weight:800; font-size:1.5rem; color:var(--color-primary);
  letter-spacing:-.02em;
}
.brand:hover{ text-decoration:none; }
.brand-mark{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  display:grid; place-items:center; color:#fff; font-weight:900;
  box-shadow:var(--shadow-sm);
}
.brand-sub{ font-size:.7rem; color:var(--color-text-muted); font-weight:500; margin-left:8px;
  display:inline-block; padding:2px 8px; border-radius:var(--r-pill); background:var(--color-soft); }

.nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:var(--s-2); align-items:center;
}
.nav-list a{
  color:var(--color-text); font-weight:500; font-size:.95rem;
  padding:8px 12px; border-radius:8px;
  transition:background .15s, color .15s;
}
.nav-list a:hover{ background:var(--color-soft); color:var(--color-primary); text-decoration:none; }
.nav-list a.active{ color:var(--color-primary); background:var(--color-soft); }
.nav-actions{ display:flex; align-items:center; gap:var(--s-3); }

.lang-toggle{
  border:1px solid var(--color-border); background:#fff; cursor:pointer;
  padding:6px 12px; border-radius:var(--r-pill); font-size:.85rem; font-weight:600;
  color:var(--color-text);
}
.lang-toggle:hover{ border-color:var(--color-primary); color:var(--color-primary); }

.hamburger{
  display:none;
  background:transparent;
  border:1.5px solid var(--color-border);
  border-radius:8px;
  cursor:pointer;
  width:44px; height:44px;
  padding:10px;
  align-items:center; justify-content:center;
  flex-direction:column;
}
.hamburger:hover{ border-color:var(--color-primary); }
.hamburger span{
  display:block;
  width:22px; height:2.5px;
  background:var(--color-text);
  margin:3px 0;
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}

/* ===== MOBILE NAV — visible hamburger + slide-down menu ===== */
@media (max-width: 900px){
  .nav{ flex-wrap:nowrap; }

  /* Show hamburger, make it obviously tappable */
  .hamburger{
    display:inline-flex !important;
    order:3;
    margin-left:auto;
    z-index:70;
    position:relative;
  }

  /* On mobile, hide the language toggle (saves space); keep Sign-in */
  .nav-actions .lang-toggle{ display:none; }
  .nav-actions{ order:2; gap:var(--s-2); }

  /* Slide-down menu */
  .nav-list{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; align-items:stretch;
    padding:var(--s-3) var(--s-4) var(--s-4);
    border-top:1px solid var(--color-border);
    box-shadow:var(--shadow-lg);
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
    z-index:60;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    margin:0;
  }
  .nav-list li{ list-style:none; }
  .nav-list a{
    display:block;
    padding:14px 16px;
    border-radius:10px;
    font-size:1rem;
    border-bottom:1px solid var(--color-soft);
  }
  .nav-list a:last-child{ border-bottom:none; }
  .nav.is-open .nav-list{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transition:transform .2s ease, opacity .2s ease, visibility 0s linear 0s;
  }

  /* Animate the burger into an X when open */
  .nav.is-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .hamburger span:nth-child(2){ opacity:0; }
  .nav.is-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width: 480px){
  .nav-actions .btn{ padding:8px 14px; font-size:.82rem; }
  .brand{ font-size:1.15rem; gap:6px; }
  .brand-sub{ display:none; }
  .brand-mark{ width:28px; height:28px; font-size:.95rem; }
}

/* ===== Hero ===== */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(46,139,87,.10), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(11,61,145,.10), transparent 50%),
    linear-gradient(180deg,#FBFAF7,#fff);
  padding:var(--s-20) 0 var(--s-16);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-12); align-items:center;
}
.hero h1{
  font-size:clamp(2.2rem,4.5vw,3.5rem); letter-spacing:-.02em; margin-bottom:var(--s-5);
}
.hero h1 .accent{ color:var(--color-primary); }
.hero h1 .accent2{ color:var(--color-accent); }
.hero-sub{ font-size:1.15rem; color:var(--color-text-muted); margin-bottom:var(--s-8); max-width:540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-8); }
.hero-trust{ display:flex; gap:var(--s-6); flex-wrap:wrap; }
.hero-trust .item{ display:flex; align-items:center; gap:var(--s-2); font-size:.9rem; color:var(--color-text-muted); }
.hero-trust .item strong{ color:var(--color-text); }

.hero-card{
  background:#fff; border-radius:var(--r-xl); padding:var(--s-6);
  box-shadow:var(--shadow-lg); border:1px solid var(--color-border);
}
.hero-card h3{ margin:0 0 var(--s-4); font-size:1.1rem; }
.hero-card .row{ display:flex; gap:var(--s-3); margin-bottom:var(--s-3); flex-wrap:wrap; }
.hero-card label{ display:block; font-size:.78rem; color:var(--color-text-muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.hero-card select, .hero-card input{
  width:100%; padding:12px 14px; border-radius:var(--r-md);
  border:1px solid var(--color-border); background:#fff; font-size:.95rem; color:var(--color-text);
  font-family:inherit;
}
.hero-card select:focus, .hero-card input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(11,61,145,.15); }
.hero-card .field{ flex:1; min-width:140px; }

@media (max-width: 900px){
  .hero{ padding:var(--s-12) 0; }
  .hero-grid{ grid-template-columns:1fr; gap:var(--s-8); }
}

/* ===== Section heads ===== */
.section-head{ text-align:center; max-width:720px; margin:0 auto var(--s-12); }
.section-head .eyebrow{
  display:inline-block; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--color-soft); color:var(--color-primary);
  font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:var(--s-4);
}
.section-head p{ color:var(--color-text-muted); font-size:1.05rem; }

/* ===== Pillars / Service cards ===== */
.pillars{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5);
}
@media (max-width:1100px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

.pillar{
  background:#fff; border-radius:var(--r-lg);
  padding:var(--s-6); border:1px solid var(--color-border);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  display:flex; flex-direction:column; height:100%;
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--color-primary); text-decoration:none; }
.pillar-icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center; font-size:1.5rem;
  background:var(--color-soft); color:var(--color-primary);
  margin-bottom:var(--s-4);
}
.pillar h3{ font-size:1.1rem; margin-bottom:var(--s-2); color:var(--color-text); }
.pillar p{ color:var(--color-text-muted); font-size:.92rem; margin:0; flex:1; }
.pillar .arrow{ margin-top:var(--s-4); color:var(--color-primary); font-weight:600; font-size:.9rem; }

.pillar.v-visit  .pillar-icon{ background:#E8F0FF; color:var(--color-primary); }
.pillar.v-work   .pillar-icon{ background:#E8F5EC; color:var(--color-accent); }
.pillar.v-study  .pillar-icon{ background:#FFF6E0; color:#B5871A; }
.pillar.v-family .pillar-icon{ background:#FFE8E1; color:#C8472E; }
.pillar.v-biz    .pillar-icon{ background:#E5F4F8; color:#0D7490; }
.pillar.v-events .pillar-icon{ background:#F1E8FF; color:#6B3FA0; }
.pillar.v-attest .pillar-icon{ background:#E8F0FF; color:var(--color-primary); }
.pillar.v-trans  .pillar-icon{ background:#E8F5EC; color:var(--color-accent); }

/* ===== How it works ===== */
.how{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ text-align:center; }
.step .num{
  width:56px; height:56px; margin:0 auto var(--s-4);
  border-radius:50%; background:var(--color-primary); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.3rem;
  box-shadow:var(--shadow-md);
}
.step h3{ font-size:1.05rem; margin-bottom:var(--s-2); }
.step p{ color:var(--color-text-muted); font-size:.9rem; }

/* ===== Trust band ===== */
.trust-band{
  background:var(--color-primary); color:#fff;
  padding:var(--s-12) 0;
}
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); text-align:center; }
@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-stat .n{ font-size:2.5rem; font-weight:800; color:#fff; letter-spacing:-.02em; }
.trust-stat .l{ opacity:.85; font-size:.95rem; }

/* ===== Testimonials ===== */
.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
@media (max-width:900px){ .testimonials{ grid-template-columns:1fr; } }
.tcard{
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--shadow-sm);
}
.tcard p{ font-style:italic; color:var(--color-text); margin-bottom:var(--s-5); }
.tcard .person{ display:flex; align-items:center; gap:var(--s-3); }
.avatar{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--color-soft); color:var(--color-primary);
  font-weight:700;
}
.tcard .name{ font-weight:600; font-size:.95rem; }
.tcard .role{ color:var(--color-text-muted); font-size:.82rem; }
.stars{ color:var(--color-gold); margin-bottom:var(--s-3); font-size:.95rem; }

/* ===== CTA banner ===== */
.cta-banner{
  background:linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color:#fff; border-radius:var(--r-xl); padding:var(--s-16) var(--s-10);
  text-align:center; margin:var(--s-12) 0;
}
.cta-banner h2{ color:#fff; margin-bottom:var(--s-4); }
.cta-banner p{ opacity:.9; margin-bottom:var(--s-6); font-size:1.05rem; }

/* ===== Footer ===== */
.site-footer{
  background:#0A1F4A; color:#cfd6e6; padding:var(--s-16) 0 var(--s-8);
  margin-top:var(--s-16);
}
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s-8); margin-bottom:var(--s-10); }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:var(--s-4); }
.foot-list{ list-style:none; margin:0; padding:0; }
.foot-list li{ margin-bottom:var(--s-2); }
.foot-list a{ color:#cfd6e6; font-size:.9rem; }
.foot-list a:hover{ color:#fff; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:var(--s-6);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3);
  font-size:.85rem; opacity:.8;
}
.payment-strip{ display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; }
.payment-chip{
  display:inline-block; padding:4px 10px; border-radius:6px; background:rgba(255,255,255,.1);
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
}

/* ===== WhatsApp FAB ===== */
.wa-fab{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  font-size:1.6rem; text-decoration:none;
  transition:transform .2s;
}
.wa-fab:hover{ transform:scale(1.1); text-decoration:none; color:#fff; }

/* ===== Page hero (inner pages) ===== */
.page-hero{
  background:linear-gradient(180deg,#FBFAF7,#fff);
  padding:var(--s-12) 0 var(--s-8); border-bottom:1px solid var(--color-border);
}
.page-hero .breadcrumb{ font-size:.85rem; color:var(--color-text-muted); margin-bottom:var(--s-3); }
.page-hero .breadcrumb a{ color:var(--color-text-muted); }
.page-hero h1{ margin-bottom:var(--s-3); }
.page-hero p{ color:var(--color-text-muted); font-size:1.05rem; max-width:680px; }

/* ===== Card grid ===== */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
@media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s;
  display:flex; flex-direction:column; height:100%;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card h3{ font-size:1.05rem; margin-bottom:var(--s-2); }
.card p{ color:var(--color-text-muted); font-size:.9rem; flex:1; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
}
.badge-success{ background:#E1F5EA; color:var(--color-success); }
.badge-warn{ background:#FFF3DA; color:#B57D14; }
.badge-info{ background:#E5F0FF; color:var(--color-primary); }
.badge-soft{ background:var(--color-soft); color:var(--color-text); }

/* ===== Toolbar ===== */
.toolbar{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg);
  padding:var(--s-4); display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--s-6);
}
.toolbar select, .toolbar input{
  padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--r-md);
  background:#fff; font-size:.9rem; font-family:inherit; color:var(--color-text);
}
.toolbar .grow{ flex:1; min-width:220px; }
.chip{
  padding:6px 14px; border-radius:var(--r-pill); background:var(--color-soft);
  font-size:.82rem; font-weight:600; color:var(--color-text); cursor:pointer; border:1px solid transparent;
}
.chip:hover{ border-color:var(--color-primary); }
.chip.active{ background:var(--color-primary); color:#fff; }

/* ===== Consultant card ===== */
.consultant{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg);
  padding:var(--s-5); display:flex; gap:var(--s-4); align-items:flex-start;
}
.consultant .av{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.3rem;
}
.consultant .body{ flex:1; }
.consultant .name{ font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:var(--s-2); }
.consultant .meta{ color:var(--color-text-muted); font-size:.85rem; margin-bottom:var(--s-2); }
.consultant .tags{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-3); }
.consultant .actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; justify-content:space-between; }
.consultant .price{ font-weight:700; color:var(--color-primary); }

/* ===== Apply / multi-step form ===== */
.apply-wrap{ display:grid; grid-template-columns:1fr 380px; gap:var(--s-8); align-items:start; }
@media (max-width:900px){ .apply-wrap{ grid-template-columns:1fr; } }

.progress{ display:flex; gap:var(--s-3); margin-bottom:var(--s-8); flex-wrap:wrap; }
.progress .pstep{
  flex:1; min-width:120px; padding:var(--s-3) var(--s-4); background:var(--color-soft); border-radius:var(--r-md);
  font-size:.85rem; color:var(--color-text-muted); border-left:4px solid transparent;
}
.progress .pstep.active{ background:#fff; color:var(--color-text); border-left-color:var(--color-primary); box-shadow:var(--shadow-sm); }
.progress .pstep.done{ background:#E1F5EA; color:var(--color-success); border-left-color:var(--color-success); }
.progress .pstep .pn{ font-weight:800; margin-right:6px; }

.form-section{ background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg); padding:var(--s-6); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); margin-bottom:var(--s-4); }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-group label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--color-text); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--r-md);
  font-size:.95rem; font-family:inherit; background:#fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(11,61,145,.12);
}
.helper{ font-size:.8rem; color:var(--color-text-muted); margin-top:4px; }

.summary{
  position:sticky; top:90px;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg);
  padding:var(--s-6); box-shadow:var(--shadow-md);
}
.summary h3{ margin-bottom:var(--s-4); }
.summary .line{ display:flex; justify-content:space-between; padding:var(--s-2) 0; border-bottom:1px dashed var(--color-border); font-size:.92rem; }
.summary .line:last-of-type{ border-bottom:none; }
.summary .line .label{ color:var(--color-text-muted); }
.summary .total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:var(--s-3); border-top:2px solid var(--color-text); margin-top:var(--s-3); font-weight:700; font-size:1.1rem; }
.summary .total .amt{ color:var(--color-accent); font-size:1.3rem; }
.transparency{
  background:#FFF8E7; border:1px solid var(--color-gold);
  border-radius:var(--r-md); padding:var(--s-3); font-size:.82rem; color:#6B5715;
  margin-top:var(--s-4);
}

/* ===== Dashboard ===== */
.dash{ display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 80px); }
@media (max-width:900px){ .dash{ grid-template-columns:1fr; } }
.dash-side{ background:#fff; border-right:1px solid var(--color-border); padding:var(--s-6) 0; }
.dash-side a{
  display:flex; align-items:center; gap:var(--s-3);
  padding:12px 24px; color:var(--color-text); font-size:.9rem; font-weight:500;
  border-left:3px solid transparent;
}
.dash-side a:hover{ background:var(--color-soft); text-decoration:none; }
.dash-side a.active{ border-left-color:var(--color-primary); background:var(--color-soft); color:var(--color-primary); font-weight:700; }
.dash-main{ padding:var(--s-8); background:var(--color-bg); }
.dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-8); }
@media (max-width:900px){ .dash-stats{ grid-template-columns:repeat(2,1fr); } }
.dash-stat{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg);
  padding:var(--s-5);
}
.dash-stat .n{ font-size:1.8rem; font-weight:800; color:var(--color-primary); letter-spacing:-.02em; }
.dash-stat .l{ font-size:.85rem; color:var(--color-text-muted); }
.app-list .app{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--r-md);
  padding:var(--s-4); margin-bottom:var(--s-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
}
.app .flag{ font-size:1.5rem; }
.app .title{ font-weight:600; }
.app .sub{ font-size:.85rem; color:var(--color-text-muted); }
.app .stage{
  background:var(--color-soft); padding:6px 12px; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600;
}
.app .stage.in-review{ background:#FFF3DA; color:#B57D14; }
.app .stage.approved{ background:#E1F5EA; color:var(--color-success); }
.app .stage.draft{ background:var(--color-soft); color:var(--color-text); }

/* ===== Utility ===== */
.center{ text-align:center; }
.mt-4{ margin-top:var(--s-4);} .mt-6{ margin-top:var(--s-6);} .mt-8{ margin-top:var(--s-8);}
.mb-4{ margin-bottom:var(--s-4);} .mb-6{ margin-bottom:var(--s-6);} .mb-8{ margin-bottom:var(--s-8);}
.flex{ display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; }
.muted{ color:var(--color-text-muted); }

[dir="rtl"] .pillar .arrow::after{ content:"←"; }
[dir="ltr"] .pillar .arrow::after{ content:"→"; }

/* ===== Image hero (homepage) ===== */
.hero-image-wrap{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
}
.hero-image-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-image-wrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,61,145,0) 50%, rgba(11,61,145,.55) 100%);
}
.hero-image-badge{
  position:absolute; left:var(--s-4); bottom:var(--s-4); z-index:2;
  background:rgba(255,255,255,.95); color:var(--color-primary);
  padding:8px 14px; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:700;
  box-shadow:var(--shadow-md);
}

/* ===== Service photo cards ===== */
.service-photo{
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--color-border);
  display:flex; flex-direction:column; height:100%;
  transition:transform .2s, box-shadow .2s;
}
.service-photo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none; }
.service-photo .ph{
  aspect-ratio: 16 / 10;
  background:linear-gradient(135deg, var(--color-primary), var(--color-accent));
  position:relative; overflow:hidden;
}
.service-photo .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-photo .ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.30) 100%);
}
.service-photo .body{ padding:var(--s-5); flex:1; display:flex; flex-direction:column; }
.service-photo h3{ font-size:1.1rem; margin-bottom:var(--s-2); color:var(--color-text); }
.service-photo p{ color:var(--color-text-muted); font-size:.92rem; flex:1; }
.service-photo .arrow{ color:var(--color-primary); font-weight:600; margin-top:var(--s-3); }

/* ===== Country grid ===== */
.region-block{ margin-bottom:var(--s-12); }
.region-head{
  display:flex; align-items:center; gap:var(--s-3);
  margin-bottom:var(--s-5); padding-bottom:var(--s-3);
  border-bottom:2px solid var(--color-border);
}
.region-head h2{ margin:0; font-size:1.5rem; }
.region-head .count{
  font-size:.78rem; font-weight:700;
  background:var(--color-soft); color:var(--color-primary);
  padding:4px 10px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.04em;
}
.country-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4);
}
@media (max-width:1100px){ .country-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .country-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px) { .country-grid{ grid-template-columns:1fr; } }
.country-card{
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; height:100%;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  text-decoration:none; color:inherit;
}
.country-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-md);
  border-color:var(--color-primary); text-decoration:none;
}
.country-card .img{
  aspect-ratio: 16 / 9;
  position:relative;
  background-size:cover; background-position:center;
  background-color:var(--color-primary);
  display:flex; align-items:flex-end;
  padding:var(--s-4);
}
.country-card .img::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.65) 100%);
}
.country-card .img .flag{ position:relative; z-index:1; font-size:2.2rem; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.country-card .img .name{
  position:absolute; right:var(--s-4); top:var(--s-4);
  background:rgba(255,255,255,.92);
  color:var(--color-text); font-weight:700; font-size:.85rem;
  padding:4px 12px; border-radius:var(--r-pill); z-index:1;
}
.country-card .body{ padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2); flex:1; }
.country-card .title{ font-weight:700; font-size:.98rem; color:var(--color-text); }
.country-card .types{ display:flex; flex-wrap:wrap; gap:4px; }
.country-card .types span{
  font-size:.72rem; font-weight:600;
  background:var(--color-soft); color:var(--color-text-muted);
  padding:3px 8px; border-radius:var(--r-pill);
}
.country-card .meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:auto; padding-top:var(--s-2);
  border-top:1px dashed var(--color-border);
}
.country-card .price{ font-weight:700; color:var(--color-primary); font-size:.95rem; }
.country-card .time{ color:var(--color-text-muted); font-size:.78rem; }

/* Country gradient backgrounds */
.bg-gcc      { background-image:linear-gradient(135deg,#1F6B3E 0%,#2E8B57 50%,#C9A227 100%); }
.bg-arabia   { background-image:linear-gradient(135deg,#0E4A2A 0%,#1F6B3E 60%,#0A1F4A 100%); }
.bg-uk       { background-image:linear-gradient(135deg,#012169 0%,#0B3D91 60%,#C8102E 100%); }
.bg-usa      { background-image:linear-gradient(135deg,#002868 0%,#0B3D91 50%,#BF0A30 100%); }
.bg-canada   { background-image:linear-gradient(135deg,#D52B1E 0%,#A0231C 100%); }
.bg-australia{ background-image:linear-gradient(135deg,#012169 0%,#0B3D91 60%,#E4002B 100%); }
.bg-germany  { background-image:linear-gradient(135deg,#1A1A1A 0%,#DD0000 60%,#FFCE00 100%); }
.bg-turkey   { background-image:linear-gradient(135deg,#A41523 0%,#E30A17 100%); }
.bg-france   { background-image:linear-gradient(135deg,#002395 0%,#0B3D91 50%,#ED2939 100%); }
.bg-italy    { background-image:linear-gradient(135deg,#008C45 0%,#FFFFFF 50%,#CD212A 100%); }
.bg-spain    { background-image:linear-gradient(135deg,#AA151B 0%,#F1BF00 60%,#AA151B 100%); }
.bg-greece   { background-image:linear-gradient(135deg,#0D5EAF 0%,#FFFFFF 50%,#0D5EAF 100%); }
.bg-portugal { background-image:linear-gradient(135deg,#006600 0%,#FF0000 100%); }
.bg-netherlands{background-image:linear-gradient(135deg,#AE1C28 0%,#FFFFFF 50%,#21468B 100%); }
.bg-swiss    { background-image:linear-gradient(135deg,#D52B1E 0%,#A0231C 100%); }
.bg-sweden   { background-image:linear-gradient(135deg,#006AA7 0%,#FECC00 100%); }
.bg-norway   { background-image:linear-gradient(135deg,#BA0C2F 0%,#00205B 100%); }
.bg-austria  { background-image:linear-gradient(135deg,#ED2939 0%,#FFFFFF 50%,#ED2939 100%); }
.bg-belgium  { background-image:linear-gradient(135deg,#000000 0%,#FAE042 50%,#ED2939 100%); }
.bg-hungary  { background-image:linear-gradient(135deg,#CE2939 0%,#FFFFFF 50%,#477050 100%); }
.bg-ireland  { background-image:linear-gradient(135deg,#169B62 0%,#FFFFFF 50%,#FF883E 100%); }
.bg-japan    { background-image:radial-gradient(circle at 50% 50%,#BC002D 35%,#FFFFFF 36%); }
.bg-korea    { background-image:linear-gradient(135deg,#0F2A56 0%,#0B3D91 50%,#CD2E3A 100%); }
.bg-china    { background-image:linear-gradient(135deg,#DE2910 0%,#FFDE00 100%); }
.bg-thailand { background-image:linear-gradient(135deg,#A51931 0%,#F4F5F8 33%,#2D2A4A 66%,#A51931 100%); }
.bg-malaysia { background-image:linear-gradient(135deg,#010066 0%,#CC0001 50%,#FFCC00 100%); }
.bg-singapore{ background-image:linear-gradient(135deg,#ED2E38 0%,#FFFFFF 100%); }
.bg-indonesia{ background-image:linear-gradient(180deg,#FF0000 0%,#FF0000 50%,#FFFFFF 50%,#FFFFFF 100%); }
.bg-hk       { background-image:linear-gradient(135deg,#DE2910 0%,#A41522 100%); }
.bg-vietnam  { background-image:linear-gradient(135deg,#DA251D 0%,#FFFF00 100%); }
.bg-nz       { background-image:linear-gradient(135deg,#012169 0%,#0B3D91 60%,#C8102E 100%); }
.bg-azerbaijan{background-image:linear-gradient(135deg,#00B5E2 0%,#EF3340 50%,#509E2F 100%); }
.bg-kazakhstan{background-image:linear-gradient(135deg,#00ABC9 0%,#FEC50C 100%); }
.bg-egypt    { background-image:linear-gradient(135deg,#CE1126 0%,#FFFFFF 50%,#000000 100%); }
.bg-southafrica{background-image:linear-gradient(135deg,#007749 0%,#FFB81C 50%,#DE3831 100%); }

/* Region pill nav */
.region-nav{
  display:flex; gap:var(--s-2); flex-wrap:wrap;
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--r-lg); padding:var(--s-3);
  margin-bottom:var(--s-8);
  position:sticky; top:74px; z-index:30;
  box-shadow:var(--shadow-sm);
}
.region-nav a{
  font-size:.85rem; font-weight:600;
  padding:6px 14px; border-radius:var(--r-pill);
  color:var(--color-text); background:var(--color-soft);
}
.region-nav a:hover{ background:var(--color-primary); color:#fff; text-decoration:none; }

/* ===== Photo strip ===== */
.photo-strip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-3);
}
@media (max-width:900px){ .photo-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .photo-strip{ grid-template-columns:repeat(2,1fr); } }
.photo-strip .ps{
  aspect-ratio:1; border-radius:var(--r-md); overflow:hidden;
  background:var(--color-soft);
}
.photo-strip .ps img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Footer address ===== */
.address-block{ display:flex; gap:var(--s-3); align-items:flex-start; margin-bottom:var(--s-3); }
.address-block .ic{ font-size:1rem; opacity:.85; }
.address-block .tx{ font-size:.88rem; opacity:.88; }
.address-block .tx a{ color:#cfd6e6; }
.address-block .tx a:hover{ color:#fff; }
.social-row{ display:flex; gap:var(--s-2); margin-top:var(--s-4); }
.social-row a{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1);
  display:grid; place-items:center;
  color:#fff; font-size:.95rem;
  transition:background .15s;
}
.social-row a:hover{ background:var(--color-primary); text-decoration:none; }

/* =========================================================================
   BULLETPROOF MOBILE OVERRIDES  ≤900px
   These come last so they win against any inline style="" attributes.
   ========================================================================= */

@media (max-width: 900px){

  /* Kill horizontal scroll for good */
  html, body{ overflow-x:hidden !important; max-width:100vw !important; }
  .container{ max-width:100% !important; padding:0 var(--s-4) !important; }

  /* Topbar — single tight row, hide the long address text */
  .topbar{ font-size:.75rem; padding:6px 0; }
  .topbar .container{
    flex-direction:row; justify-content:center; gap:8px;
    flex-wrap:wrap; padding:0 var(--s-3);
  }
  .topbar .container > span:first-child{ display:none; }
  .topbar a{ white-space:nowrap; }

  /* Section padding */
  section{ padding:var(--s-10) 0; }
  .cta-banner{ padding:var(--s-10) var(--s-4); margin:var(--s-6) 0; }
  h1{ font-size:1.85rem; }
  h2{ font-size:1.4rem; }

  /* Hero "Find your visa" card — stack the 4 fields */
  .hero-card .row{ flex-direction:column !important; flex-wrap:wrap; gap:var(--s-3); }
  .hero-card .row .field{ width:100% !important; flex:1 1 100% !important; min-width:0; }

  /* ANY grid declared inline as 3+ columns — force to 1 column.
     Catches the home services grid (repeat(4,1fr)) and similar. */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"]{
    grid-template-columns:1fr !important;
  }
  .card-grid,
  .card-grid[style*="grid-template-columns"],
  .pillars{
    grid-template-columns:1fr !important;
  }

  /* "Meet our team" — the inline 1fr 1.4fr 2-col layout in index.html */
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.4fr"]{
    grid-template-columns:1fr !important;
    gap:var(--s-6) !important;
  }
  /* The circular avatar inside it shouldn't be tiny */
  [style*="grid-template-columns:1fr 1.4fr"] .hero-image-wrap,
  [style*="grid-template-columns: 1fr 1.4fr"] .hero-image-wrap{
    aspect-ratio:1.4/1 !important;
    max-width:480px;
    margin:0 auto;
  }

  /* Buttons in CTAs wrap properly */
  .hero-cta, .flex{ flex-wrap:wrap; }
  .btn-lg{ padding:14px 20px; font-size:1rem; }
  .btn-block{ width:100%; }

  /* Apply form */
  .apply-wrap{ grid-template-columns:1fr !important; gap:var(--s-5); }
  .form-section{ padding:var(--s-4); }
  .progress{ gap:var(--s-2); }
  .progress .pstep{ font-size:.78rem; padding:var(--s-2) var(--s-3); min-width:0; flex:1 1 30%; }
  .summary{ position:static; }
  .form-section input, .form-section select, .form-section textarea{ max-width:100%; }

  /* Footer payment-strip wrap */
  .payment-strip{ flex-wrap:wrap; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }

  /* WhatsApp FAB smaller so it doesn't cover form buttons */
  .wa-fab{ width:48px; height:48px; bottom:16px; right:16px; font-size:1.3rem; }

  /* Photo strip a bit smaller */
  .photo-strip{ grid-template-columns:repeat(2,1fr); }
}

/* Very narrow phones */
@media (max-width: 380px){
  .container{ padding:0 12px !important; }
  h1{ font-size:1.65rem; }
  .nav-actions .btn{ padding:6px 10px; font-size:.78rem; }
}