/* ==========================================================================
   HORIZON — Cross-border recruitment, UK ↔ Europe
   Design tokens (Premium Light Theme Update - 2026)
   ========================================================================== */

:root{
  /* Premium Light Theme Colors */
  --ink:        #121A33;   /* Deep Blue for core typography & headers */
  --slate:      #FFFFFF;   /* Pure White for clean primary cards & elements */
  --slate-2:    #F4F7FC;   /* Soft Ice Blue for subtle hovering or secondary surfaces */
  --gold:       #B5793A;   /* Refined Rich Gold accent for links and titles */
  --ember:      #E0654B;   /* Secondary vibrant accent — sunrise coral */
  --pale:       #FFFFFF;   /* Light section background across layout */
  --paper:      #FFFFFF;   /* White Base */
  --mist:       #616D8A;   /* Muted readable gray-blue text on light background */
  --ink-soft:   #3A4566;   /* Rich intermediate tone for readable body prose */
  --line:       rgba(10,15,34,0.08);
  --line-dark:  rgba(10,15,34,0.12);

  --grad-horizon: linear-gradient(90deg, #D6A35A 0%, #E0654B 100%);
  --grad-orb: radial-gradient(circle at 35% 30%, #FCEFD8 0%, #E3A85C 45%, #D6753F 78%, #C4543A 100%);

  /* Type & Layout */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-sm: 10px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ background:var(--pale); }

svg{ width:1em; height:1em; display:inline-block; vertical-align:middle; }

body{
  font-family: var(--font-body);
  background: var(--pale);
  color: var(--ink-soft);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:var(--gold); color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background: var(--gold);
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
h1 em, h2 em, h3 em{
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
}

p.lede{
  font-size: 17px;
  color: var(--mist);
  max-width: 540px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s, border-color .35s;
}
.btn-primary{
  background: var(--grad-horizon);
  color: #FFFFFF;
  box-shadow: 0 10px 30px -8px rgba(224,101,75,0.4);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(224,101,75,0.55); }
.btn-ghost{
  border: 1px solid var(--line-dark);
  color: var(--ink);
  background: rgba(10,15,34,0.02);
}
.btn-ghost:hover{ border-color: var(--gold); background: rgba(214,163,90,0.06); }
.btn-sm{ padding: 10px 20px; font-size: 13px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  padding: 18px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  backdrop-filter: blur(8px);
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled{
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--line);
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space:nowrap;
  color: var(--ink);
}
@media (max-width: 480px){ .brand{ font-size:14px; } }
.brand img{
  width: 34px; height:34px; border-radius:9px; object-fit:cover;
  box-shadow: 0 0 0 1px var(--line);
}
.nav-links{
  display:flex; align-items:center; gap:28px;
  font-size: 14px; font-weight:500; color: var(--mist);
}
.nav-links a{ position:relative; transition: color .3s; }
.nav-links a:hover, .nav-links a.active{ color: var(--ink); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background: var(--grad-horizon);
  border-radius:2px;
}
.nav-social-top a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #1877F2; color: #fff;
  box-shadow: 0 2px 8px rgba(24,119,242,0.35);
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
.nav-social-top a svg{ width:20px; height:20px; }
.nav-social-top a:hover { background: #145FC4; transform: translateY(-2px); }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line-dark);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:18px; height:1.5px; background:var(--ink); display:block; }

@media (max-width: 920px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:20px;
    background: var(--paper); padding: 28px var(--pad) 32px;
    border-bottom:1px solid var(--line-dark);
    transform: translateY(-12px);
    opacity:0; pointer-events:none;
    transition: opacity .3s, transform .3s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  }
  .nav-links.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
}

/* ==========================================================================
   HERO + HORIZON ORB
   ========================================================================== */
.hero{
  position:relative;
  padding-top: 160px;
  padding-bottom: 100px;
  overflow:hidden;
  background: var(--pale);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: 40px;
}
.hero-stars{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(10,15,34,0.1) 1px, transparent 1.4px);
  background-size: 90px 90px;
  opacity:.4;
}
.hero-visual{
  position:relative;
  height: 520px;
}
.orb-stage{
  position:absolute;
  left:50%; top: 50%;
  width:1px; height:1px;
  z-index:1;
}
.orb{
  position:absolute;
  top: 0; left:0;
  width: 240px; height:240px;
  margin: -120px 0 0 -120px;
  border-radius:50%;
  background: var(--grad-orb);
  box-shadow: 0 16px 50px rgba(196,84,58,0.12), 0 0 90px rgba(227,168,92,0.08);
  will-change: transform;
  border: 1px solid rgba(255,255,255,0.7);
}
.orb-ring{
  position:absolute;
  top:0; left:0;
  border:1px solid rgba(10,15,34,0.06);
  border-radius:50%;
}
.orb-ring.r1{ width:380px; height:380px; margin:-190px 0 0 -190px; }
.orb-ring.r2{ width:500px; height:500px; margin:-250px 0 0 -250px; border-color: rgba(10,15,34,0.03); }
.orbit-chip{
  position:absolute;
  width:120px; height:120px;
  border-radius: 18px;
  overflow:hidden;
  border: 4px solid #FFFFFF;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  background:#fff;
}
.orbit-chip img{ width:100%; height:100%; object-fit:cover; }

.hero-content{
  position:relative; z-index:5;
  text-align:left;
}
.hero-content .eyebrow{ justify-content:flex-start; }
.hero h1{
  font-size: clamp(36px, 5vw, 60px);
  margin-top: 18px;
}
.hero p.lede{ margin: 22px 0 0; text-align:left; color: var(--ink-soft); max-width:520px; }
.hero-cta{
  display:flex; gap:16px; justify-content:flex-start; margin-top: 34px; flex-wrap:wrap;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-content{ text-align:center; order:1; }
  .hero-content .eyebrow, .hero-cta{ justify-content:center; }
  .hero p.lede{ margin-left:auto; margin-right:auto; }
  .hero-visual{ order:2; height:420px; margin-top:20px; }
}
@media (max-width: 520px){ .hero-visual{ height:340px; } .orb{ width:190px; height:190px; margin:-95px 0 0 -95px; } .orb-ring.r1{ width:300px; height:300px; margin:-150px 0 0 -150px; } .orb-ring.r2{ width:380px; height:380px; margin:-190px 0 0 -190px; } }

.trust-strip{
  position:relative; z-index:5;
  margin-top: 110px;
  text-align:center;
}
.trust-strip .eyebrow{ justify-content:center; }
.logo-row{
  margin-top: 26px;
  display:flex; align-items:center; justify-content:center;
  gap: clamp(24px, 5vw, 56px);
  flex-wrap:wrap;
  opacity: .75;
}
.logo-row .wordmark{
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--mist);
  font-weight: 600;
  white-space:nowrap;
}

/* ==========================================================================
   GENERIC SECTION SCAFFOLDING
   ========================================================================== */
section{ position:relative; padding: 90px 0; background: var(--pale); }
.section-light{ background: var(--slate); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width: 680px; margin: 0 auto 56px;
  gap: 14px;
}
.section-head .eyebrow{ justify-content:center; }
.section-head h2{ font-size: clamp(30px, 4vw, 44px); margin-top:0; max-width:none; }
.section-head .lede{ margin-top:0; color: var(--mist); }

/* ---------- Stats ---------- */
.stat-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}
.stat{
  background: var(--slate);
  padding: 36px 28px;
  text-align:left;
}
.stat .num{
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  color: var(--gold);
  display:flex; align-items:baseline; gap:2px;
  font-weight: 700;
}
.stat .label{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); letter-spacing:.02em; font-weight: 500; }
@media (max-width: 780px){ .stat-row{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Process steps ---------- */
.process-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.process-card{
  background: var(--slate);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s, box-shadow .4s;
  box-shadow: 0 4px 24px rgba(10,15,34,0.02);
}
.process-card:hover{ transform: translateY(-6px); border-color: var(--gold); background: var(--slate-2); box-shadow: 0 12px 30px rgba(10,15,34,0.05); }
.process-card .step-num{ font-family: var(--font-display); font-size: 14px; color: var(--gold); font-weight: 600; }
.process-card h3{ font-size: 21px; margin-top:14px; color:var(--ink); }
.process-card p{ font-size:14.5px; color:var(--ink-soft); margin-top:10px; }
.process-card .ico{ width:34px; height:34px; margin-top:6px; color:var(--gold); }
@media (max-width: 980px){ .process-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .process-grid{ grid-template-columns: 1fr; } }

/* ---------- Running projects (route cards) ---------- */
.route-scroll{
  display:flex; gap:22px; overflow-x:auto; padding-bottom: 14px;
  scrollbar-width:thin; scrollbar-color: var(--line-dark) transparent;
}
.route-card{
  flex: 0 0 320px; background: var(--slate); border:1px solid var(--line-dark);
  border-radius: var(--radius); padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}
.route-map{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--mist); }
.route-map .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.route-map .dot.end{ background:var(--ember); }
.route-map .line{ flex:1; height:1px; background: var(--grad-horizon); opacity:.3; }
.route-card h3{ font-size:21px; margin-top:18px; color:var(--ink); }
.route-card .meta{ display:flex; gap:18px; margin-top:14px; font-size:13px; color:var(--ink-soft); }
.route-card .meta b{ color:var(--gold); font-weight:700; }
.route-card .desc{ font-size:14px; color:var(--mist); margin-top:14px; }
.route-card .tag{
  display:inline-block; margin-top:18px; font-size:12px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--line-dark); color:var(--gold); font-weight: 600; background: var(--slate-2);
}

/* ---------- Success stories ---------- */
.story-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.story-card{
  background: var(--slate); color: var(--ink-soft); border-radius: var(--radius);
  overflow:hidden; border: 1px solid var(--line-dark); box-shadow: 0 6px 24px rgba(0,0,0,0.02);
}
.story-photo{
  position:relative; height: 230px;
  background: var(--slate-2);
  overflow:hidden;
}
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-photo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:70px;
  background: linear-gradient(180deg, rgba(10,15,34,0), rgba(10,15,34,0.55));
  pointer-events:none;
}
.story-route{
  position:absolute; bottom:14px; left:0; right:0; text-align:center; z-index:1;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff; font-weight: 700;
}
.story-body{ padding: 24px 24px 28px; }
.story-body .role{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ember); font-weight:700; }
.story-body h3{ font-size:19px; margin-top:10px; color: var(--ink); }
.story-body p{ font-size:14.5px; margin-top:12px; color: var(--ink-soft); }
@media (max-width: 980px){ .story-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .story-grid{ grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.testi-card{ background: var(--slate); border:1px solid var(--line-dark); border-radius: var(--radius); padding: 30px 26px; box-shadow: 0 4px 20px rgba(0,0,0,0.01); }
.testi-card .quote-mark{ font-family:var(--font-display); font-size:46px; color:var(--gold); line-height:.4; }
.testi-card p.quote{ font-size:15px; color: var(--ink-soft); margin-top: 6px; }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.testi-person img{ width:50px; height:50px; border-radius: 8px; object-fit:cover; border: 1px solid var(--line-dark); }
.testi-person .name{ font-size:14px; font-weight:600; color: var(--ink); }
.testi-person .role{ font-size:12.5px; color:var(--mist); }
@media (max-width: 980px){ .testi-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .testi-grid{ grid-template-columns: 1fr; } }

/* ---------- Values ---------- */
.value-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.value-card{ padding: 26px 4px; border-top: 1px solid var(--line-dark); }
.value-card .num{ font-family: var(--font-display); font-size:14px; color:var(--gold); font-weight: 700; }
.value-card h3{ font-size:19px; margin-top:14px; color: var(--ink); }
.value-card p{ font-size:14px; margin-top:10px; color: var(--ink-soft); }
@media (max-width: 980px){ .value-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .value-grid{ grid-template-columns: 1fr; } }

/* ---------- Team / People behind placement ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.team-grid-3{ grid-template-columns: repeat(3, 1fr); max-width: 940px; margin: 0 auto; gap: 28px; }
.team-card{ text-align:center; background: var(--slate); padding: 28px 20px; border-radius: var(--radius); border: 1px solid var(--line-dark); box-shadow: 0 4px 20px rgba(0,0,0,0.01); transition: transform 0.3s, box-shadow .3s; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(27,35,54,0.16); }
.team-photo{ width: 200px; height: 200px; margin: 0 auto; border-radius: var(--radius-sm); overflow:hidden; background:var(--slate-2); border: 3px solid var(--gold); }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-card h3{ font-size:19px; margin-top:18px; color:var(--ink); font-weight: 600; }
.team-card .role{ font-size:14px; color:var(--gold); margin-top:4px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
@media (max-width: 980px){ .team-grid{ grid-template-columns: 1fr 1fr; } .team-grid-3{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .team-grid-3{ grid-template-columns: 1fr; max-width:320px; } }
@media (max-width: 520px){ .team-grid{ grid-template-columns: 1fr; } }

/* ---------- Contact / Footer ---------- */
/* ==========================================================================
   FOOTER — 4-column rich layout
   ========================================================================== */
footer{
  background: var(--ink);
  color: #B7BEDB;
  padding-top: 64px;
  padding-bottom: 0;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr 1.4fr;
  gap: 48px;
  padding-bottom: 52px;
}

/* Brand column */
.fbrand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size:17px; color:#fff; font-weight:600;
}
.fbrand img{ width:34px; height:34px; border-radius:8px; object-fit:cover; }
.footer-tagline{ font-size:13.5px; line-height:1.7; color:#8892AE; margin-top:16px; }

/* Column heading */
.footer-col-title{
  font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; margin-bottom:18px;
}

/* Quick links list */
.footer-nav{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-nav a{ font-size:14px; color:#8892AE; transition: color .2s; }
.footer-nav a:hover{ color: var(--gold); }

/* Contact list */
.footer-contact{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-contact li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:#8892AE; line-height:1.55;
}
.footer-contact svg{ flex:none; margin-top:2px; color: var(--gold); }
.footer-contact a{ color:#8892AE; transition: color .2s; }
.footer-contact a:hover{ color: var(--gold); }

/* Social icons — large, labelled */
.footer-socials{
  display:flex; flex-direction:column; gap:10px;
}
.footer-socials a{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #B7BEDB;
  font-size:13.5px; font-weight:500;
  transition: background .2s, color .2s, transform .2s;
}
.footer-socials a svg{ flex:none; color: var(--gold); }
.footer-socials a:hover{
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateX(4px);
}

/* Bottom bar */
.footer-bottom-bar{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  font-size:12px; color:#5A6480;
}

/* Responsive */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:36px; }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns: 1fr; gap:32px; }
  .footer-bottom-bar{ flex-direction:column; text-align:center; }
}
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px; padding-bottom: 70px; }
.contact-info-list{ margin-top:30px; display:flex; flex-direction:column; gap:22px; }
.contact-info-list .item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-list .ico{
  width:40px; height:40px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(214,163,90,0.1); color: var(--gold);
}
.contact-info-list .label{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mist); font-weight: 600; }
.contact-info-list .value{ font-size:15.5px; margin-top:4px; color:var(--ink); font-weight: 500; }
.contact-info-list .value a:hover { color: var(--gold); text-decoration: underline; }

.contact-form{ background: var(--slate); border:1px solid var(--line-dark); border-radius: var(--radius); padding: 34px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
.contact-form h3{ color:var(--ink); font-size:21px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:20px; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; background: var(--slate-2); border:1px solid var(--line-dark); color:var(--ink);
  padding: 13px 15px; border-radius: 10px; font-size:14px; font-family:inherit; transition: border-color 0.3s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--gold); outline: none; }
.contact-form textarea{ margin-top:14px; min-height:100px; resize:vertical; }
.contact-form label{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:6px; font-weight: 500; }
.contact-form .btn{ margin-top:18px; width:100%; }
@media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } .form-row{ grid-template-columns: 1fr; } }

/* old footer rules removed */

/* ==========================================================================
   JOBS PAGE TOOLBAR & GROUPING
   ========================================================================== */
.jobs-hero{ padding-top:140px; padding-bottom:50px; background: var(--paper); border-bottom: 1px solid var(--line-dark); }
.jobs-hero h1{ font-size: clamp(34px, 5vw, 52px); margin-top:16px; }

.jobs-toolbar{
  position:sticky; top:80px; z-index:50; margin-top: 36px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line-dark);
  border-radius: 16px; padding: 18px 20px; backdrop-filter: blur(8px);
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.search-box{ flex: 1 1 240px; display:flex; align-items:center; gap:10px; background: var(--slate-2); border:1px solid var(--line-dark); border-radius: 10px; padding: 11px 14px; }
.search-box input{ background:none; border:none; color:var(--ink); font-size:14px; width:100%; font-family:inherit; }
.search-box svg{ color:var(--mist); flex:none; width:16px; height:16px; }
.filter-chip{ padding: 9px 16px; border-radius:999px; font-size:13px; border:1px solid var(--line-dark); color:var(--ink-soft); font-weight: 500; transition: all .25s; background: #fff; }
.filter-chip:hover{ border-color: var(--gold); color: var(--ink); }
.filter-chip.active{ background: var(--grad-horizon); color:#FFFFFF; border-color:transparent; font-weight:600; box-shadow: 0 4px 12px rgba(224,101,75,0.25); }
.filter-group{ display:flex; gap:10px; flex-wrap:wrap; }

.job-list{ margin-top: 30px; display:flex; flex-direction:column; gap:18px; }
.job-card{
  background: var(--slate); border:1px solid var(--line-dark); border-radius: var(--radius);
  padding: 28px 30px; display:grid; grid-template-columns: 1fr auto; gap: 24px; align-items:center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.01); transition: border-color .3s, transform .3s, box-shadow .3s;
}
.job-card:hover{ border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.04); }
.job-card .jtop{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.job-card .jcat{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(214,163,90,0.3); padding:4px 11px; border-radius:999px; font-weight: 600; background: var(--slate-2); }
.job-card .jcountry{ font-size:13px; color:var(--mist); font-weight: 500; }
.job-card h3{ font-size:22px; margin-top:14px; color:var(--ink); font-weight:600; }
.job-card .jdesc{ font-size:14.5px; color:var(--ink-soft); margin-top:8px; max-width:620px; }
.job-card .jmeta{ display:flex; gap:22px; margin-top:16px; flex-wrap:wrap; }
.job-card .jmeta .m{ font-size:12.5px; color:var(--mist); font-weight: 500; }
.job-card .jmeta .m b{ color:var(--ink); display:block; font-size:14.5px; margin-top:2px; font-weight: 600; }
.job-card .jactions{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.job-card .openings{ font-family:var(--font-display); font-size:28px; color:var(--gold); font-weight: 700; text-align: right; }
.job-card .openings span{ font-family:var(--font-body); font-size:11px; color:var(--mist); display:block; font-weight: 500; }
@media (max-width: 760px){
  .job-card{ grid-template-columns: 1fr; }
  .job-card .jactions{ align-items:flex-start; flex-direction:row; justify-content:space-between; width:100%; }
  .job-card .openings { text-align: left; }
}
.empty-state{ text-align:center; padding: 60px 20px; color:var(--mist); display:none; }
.empty-state.show{ display:block; }

/* ---------- About, Timeline, Split ---------- */
.about-hero{ padding-top:140px; padding-bottom: 40px; background: var(--paper); border-bottom: 1px solid var(--line-dark); }
.about-hero .grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:50px; align-items:center; }
.map-panel{ background: var(--slate-2); border:1px solid var(--line-dark); border-radius: var(--radius); padding: 26px; aspect-ratio: 1/0.9; position:relative; overflow:hidden; }
@media (max-width: 880px) { .about-hero .grid{ grid-template-columns: 1fr; } }

.split{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; align-items:center; }
.split-media{ border-radius: var(--radius); overflow:hidden; background:var(--slate-2); border:1px solid var(--line-dark); padding: 30px; }
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; } }

.timeline{ margin-top:40px; display:flex; flex-direction:column; }
.tl-row{ display:grid; grid-template-columns: 110px 1fr; gap:24px; padding: 26px 0; border-top:1px solid var(--line-dark); }
.tl-row:first-child{ border-top:none; }
.tl-year{ font-family:var(--font-display); font-size:22px; color:var(--gold); font-weight: 700; }
.tl-row h4{ font-size:18px; color:var(--ink); font-weight: 600; }
.tl-row p{ font-size:14.5px; margin-top:6px; color: var(--ink-soft); }

@media (max-width: 600px) {
  .tl-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

.reveal{ opacity:0; transform: translateY(28px); }
.reveal.is-in{ opacity:1; transform:none; transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }

.cta-band{
  background: linear-gradient(120deg, #FFFFFF, var(--slate-2)); border-radius: 28px; padding: 60px; text-align:center; position:relative; overflow:hidden; border: 1px solid var(--line-dark);
  box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.cta-band h2{ font-size: clamp(28px,4vw,40px); color: var(--ink); }
.cta-band .lede{ margin: 16px auto 0; color: var(--ink-soft); }
.cta-band .hero-cta{ margin-top:30px; justify-content:center; }

/* ---------- Glossy Orbiting Flight Paths ---------- */
.orb-core{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 24%, transparent 55%); mix-blend-mode: screen; pointer-events:none; }
.orb-rim{ position:absolute; inset:-2px; border-radius:50%; box-shadow: inset 0 -4px 10px rgba(10,15,34,0.03); pointer-events:none; }
.orbit-path{ position:absolute; top:50%; left:50%; border-radius:50%; border: 1px dashed rgba(10,15,34,0.1); pointer-events:none; }
.orbit-path.p1{ width:420px; height:420px; margin:-210px 0 0 -210px; }
.orbit-path.p2{ width:560px; height:560px; margin:-280px 0 0 -280px; border-color: rgba(214,163,90,0.15); }
.flight{ position:absolute; top:0; left:50%; width:22px; height:22px; margin-left:-11px; color:var(--gold); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); will-change: offset-distance; }
.flight.f1{ offset-path: circle(210px at 210px 210px); animation: fly 13s linear infinite; }
.flight.f2{ offset-path: circle(280px at 280px 280px); animation: fly 19s linear infinite reverse; color:var(--ember); }
@keyframes fly{ from{ offset-distance:0%; } to{ offset-distance:100%; } }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background: var(--slate); border:1px solid var(--line-dark); border-radius: 14px; overflow:hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.01); }
.faq-item.is-open{ border-color: var(--gold); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 20px 24px; cursor:pointer; user-select:none; }
.faq-q span.t{ font-size:16px; font-weight:600; color:var(--ink); }
.faq-q .chev{ width:20px; height:20px; color:var(--gold); transition: transform .3s; }
.faq-item.is-open .faq-q .chev{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; padding: 0 24px; }
.faq-item.is-open .faq-a{ max-height: 240px; }
.faq-a p{ font-size:14.5px; color:var(--ink-soft); padding-bottom:22px; line-height:1.6; }

/* ==========================================================================
   ATTRACTIVE WHATSAPP FLOATING BADGE (Fixed and Revamped)
   ========================================================================== */
.wa-float{
  position:fixed; right: 24px; bottom: 24px; z-index: 600;
  display:flex; align-items:center; gap:11px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color:#FFFFFF;
  padding: 14px 22px; border-radius: 999px;
  box-shadow: 0 12px 36px rgba(37,211,102,0.45);
  font-size:14px; font-weight:700; letter-spacing: 0.02em;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.wa-float svg{ width:22px; height:22px; flex:none; fill: currentColor; }
.wa-float:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 40px rgba(37,211,102,0.6); }
.wa-float .pulse-ring {
  position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.6);
  animation: waPulseAnimation 2s infinite;
  pointer-events: none;
}
@keyframes waPulseAnimation {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 600px){ .wa-float span.label{ display:none; } .wa-float{ padding:14px; right:16px; bottom:16px; } }

.country-head{ display:flex; align-items:center; gap:14px; margin: 46px 0 18px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.country-head:first-child{ margin-top:0; border-top:none; padding-top:0; }
.country-head .flag{ font-size:26px; line-height:1; }
.country-head h3{ font-size:21px; color:var(--ink); font-family:var(--font-display); font-weight: 600; }
.country-head .ctags{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.country-head .ctags span{ font-size:11.5px; color:var(--ink-soft); border:1px solid var(--line-dark); padding:4px 10px; border-radius:999px; font-weight: 500; background: var(--slate); }

.doc-note{ background: rgba(214,163,90,0.06); border:1px solid rgba(214,163,90,0.25); border-radius: 14px; padding: 20px 24px; margin-top: 36px; font-size:14px; color: var(--ink-soft); line-height: 1.6; }
.doc-note b{ color: var(--gold); }

.social-row{ display:flex; gap:14px; margin-top:28px; }
.social-row a{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition: border-color .3s, color .3s, transform .2s; background: var(--slate); }
.social-row a:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:900; background: rgba(10,15,34,0.4); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding: 24px; opacity:0; visibility:hidden; transition: opacity .25s ease; }
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-box{ position:relative; width:100%; max-width: 560px; background: var(--slate); border:1px solid var(--line-dark); border-radius: var(--radius); padding: 36px; max-height: 88vh; overflow-y:auto; transform: translateY(16px) scale(.98); transition: transform .25s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.modal-overlay.is-open .modal-box{ transform: translateY(0) scale(1); }
.modal-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line-dark); background:transparent; color:var(--mist); font-size:20px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover{ border-color:var(--gold); color:var(--gold); }
.modal-box h3{ color:var(--ink); font-size:24px; }
.modal-sub{ font-size:14px; color:var(--ink-soft); margin-top:10px; }
.modal-box form{ margin-top:22px; }
.modal-view{ display:none; }
.modal-view.is-active{ display:block; }
.modal-success{ text-align:center; padding: 10px 0; }
.modal-success .success-ico{ color: var(--gold); margin-bottom: 14px; width:52px; height:52px; }
/* Real flag images instead of unicode emoji — emoji flags don't render as
   flags on Windows (shows plain two-letter codes instead), so we use
   actual flag images for guaranteed cross-platform display. */
.flag-icon{ width:22px; height:auto; border-radius:3px; vertical-align:middle; margin-right:4px; box-shadow: 0 0 0 1px rgba(10,15,34,0.1); }
.country-head .flag-icon{ width:28px; margin-right:8px; }

/* Offices + destination countries panel (about page) */
.office-list{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.office-row{ display:flex; align-items:center; gap:12px; }
.office-row .flag-icon{ width:30px; }
.office-row div{ display:flex; flex-direction:column; }
.office-row b{ font-size:14.5px; color:var(--ink); }
.office-row span{ font-size:12.5px; color:var(--mist); margin-top:1px; }
.dest-grid{ margin-top:14px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.dest-item{ display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.dest-item .flag-icon{ width:22px; }
.dest-item span{ font-size:13px; color:var(--ink); font-weight:500; }

/* Blog post page */
.blog-hero{ padding-bottom: 30px; }
.blog-byline{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.blog-byline img{ width:60px; height:60px; border-radius: 10px; object-fit:cover; border:2px solid var(--gold); }
.blog-byline b{ display:block; font-size:14.5px; color:var(--ink); }
.blog-byline span{ display:block; font-size:13px; color:var(--mist); margin-top:2px; }

.blog-feature-img{ margin-top:34px; border-radius: var(--radius); overflow:hidden; box-shadow: 0 24px 50px -20px rgba(27,35,54,0.18); }
.blog-feature-img img{ width:100%; height:auto; display:block; aspect-ratio:16/7.5; object-fit:cover; }

.blog-post{ margin-top:38px; }
.blog-post p{ font-size:16px; line-height:1.8; color:var(--ink-soft); margin-top:20px; }
.blog-post p:first-of-type{ margin-top:0; }
.blog-lead{ font-size:19px !important; color:var(--ink) !important; font-weight:500; line-height:1.7 !important; }

.blog-quote{
  margin: 32px 0; padding: 26px 30px; border-left: 3px solid var(--gold);
  background: var(--slate); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--ink);
  line-height: 1.55;
}

.blog-h3{ font-size:22px; margin-top:40px; margin-bottom:6px; }
.blog-points{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:18px; }
.blog-point{ display:flex; gap:14px; background:var(--slate); border:1px solid var(--line); border-radius: var(--radius-sm); padding:18px; }
.blog-point .ico{ color:var(--gold); flex:none; }
.blog-point b{ display:block; font-size:14.5px; color:var(--ink); }
.blog-point p{ font-size:13.5px !important; margin-top:4px !important; line-height:1.55 !important; }
@media (max-width:640px){ .blog-points{ grid-template-columns: 1fr; } }

.blog-cta{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--line); }

/* social-links block removed - now in footer */

/* Update footer-bottom to also handle social row */
.footer-bottom .social-links{ margin-top:14px; }
@media (max-width:640px){ .social-links a{ width:44px; height:44px; } .social-links a svg{ width:20px; height:20px; } }