/* ==========================================================================
   WorkSphere — Polish Layer  (assets/css/ws-polish.css)
   Theme: light silver + brand purple.

   RULE OF THIS FILE: paint only.
   Colours, gradients, shadows, glow and shine. No padding, margin, size,
   font-size, display or border-width changes, so nothing on the page moves.
   Images are never touched.
   ========================================================================== */

:root {
  --ws-purple: #4d0085;
  --ws-purple-2: #5a00a5;
  --ws-violet: #7b2fd6;
  --ws-line: #e1e4ed;
  --ws-grad: linear-gradient(135deg, #3f0080 0%, #5a00a5 55%, #7b2fd6 100%);
  --ws-grad-silver: linear-gradient(135deg, #ffffff 0%, #e6e9f0 45%, #f8f9fb 70%, #d9dde6 100%);
  --ws-shadow-sm: 0 6px 18px -8px rgba(45, 20, 90, .22);
  --ws-shadow: 0 18px 40px -18px rgba(45, 20, 90, .32);
  --ws-shadow-lg: 0 30px 60px -24px rgba(45, 20, 90, .42);
}

::selection { background: #5a00a5; color: #fff; }

@keyframes wsShine { 0%, 65% { left: -70%; } 100% { left: 130%; } }

/* ==========================================================================
   Header
   ========================================================================== */
/* glass header — transparent, no white band / shadow line on scroll */
.header,
.index-page .header,
.scrolled .header,
.index-page.scrolled .header {
  --background-color: transparent;
  background: transparent;
  box-shadow: none; border: 0;
}
.header::before {                       /* blur lives on a layer so the mobile menu (position:fixed) still covers the screen */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(90, 0, 165, .08);
  box-shadow: 0 10px 30px -18px rgba(20, 13, 71, .45);
  transition: background .3s, box-shadow .3s;
}
.scrolled .header::before { background: rgba(255, 255, 255, .97); box-shadow: 0 14px 34px -18px rgba(20, 13, 71, .55); }
@media (min-width: 1200px) {           /* crisp nav: soft pill on hover / active */
  .header .navmenu > ul > li > a { position: relative; transition: color .2s; }
  .header .navmenu > ul > li > a::after { display: none; }
  .header .navmenu > ul > li > a::before {
    content: ""; position: absolute; z-index: -1; left: 6px; right: -6px; top: 50%; height: 36px; transform: translateY(-50%) scale(.9);
    border-radius: 999px; background: #f3edfc; opacity: 0; transition: opacity .2s, transform .2s;
  }
  .header .navmenu > ul > li:last-child > a::before { right: -10px; }
  .header .navmenu > ul > li > a:hover::before, .header .navmenu > ul > li > a.active::before { opacity: 1; transform: translateY(-50%) scale(1); }
  .header .navmenu > ul > li > a:hover, .header .navmenu > ul > li > a.active { color: #5a00a5; }
}
@media (min-width: 1200px) {           /* keep Login on the right at exactly 1200px */
  .header .logo, .header .navmenu, .header .btn-getstarted { order: initial; }
  .header .btn-getstarted { margin: 0 0 0 26px; }
}

@media (min-width: 1200px) {
  .navmenu > ul > li > a { position: relative; }
  .navmenu > ul > li > a::after {
    content: ""; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #5a00a5, #b9bdca);
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease; pointer-events: none;
  }
  .navmenu > ul > li:last-child > a::after { right: 0; }
  .navmenu > ul > li:hover > a::after,
  .navmenu > ul > li > a.active::after { transform: scaleX(1); }
}

/* Login — solid gradient pill so it stands out */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, #5a00a5, #7b2fd6 60%, #2563eb); color: #fff; font-weight: 600; font-size: 14.5px;
  padding: 9px 20px; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(90, 0, 165, .75);
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover { background: linear-gradient(135deg, #4a0088, #6a1fc6 60%, #1d4ed8); color: #fff; box-shadow: 0 14px 26px -10px rgba(90, 0, 165, .9); transform: translateY(-1px); }

/* ==========================================================================
   Section titles (all pages)
   ========================================================================== */
.section-title h2 {
  background: var(--ws-grad-silver); color: var(--ws-purple-2);
  box-shadow: 0 6px 16px -10px rgba(45, 20, 90, .45), inset 0 0 0 1px #d6dae4;
}
/* small purple-silver line under the heading — drawn inside the existing
   bottom padding, so it takes no extra space */
.section-title::after {
  content: ""; position: absolute; left: 50%; bottom: 34px; width: 64px; height: 4px; margin-left: -32px; border-radius: 4px;
  background: linear-gradient(90deg, #5a00a5, #b4b9c8, #5a00a5); pointer-events: none;
}

/* ==========================================================================
   Hero (search banner)
   ========================================================================== */
.hero-section::before {
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(232, 235, 243, .20), transparent 60%),
    radial-gradient(500px 340px at 5% 110%, rgba(123, 47, 214, .55), transparent 62%),
    linear-gradient(120deg, #3a0078 0%, #4d0085 50%, #6a00b8 100%);
}
.hero-section::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .08;
  background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 70% 50%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 70% 50%, #000, transparent 75%);
}
/* the hero heading is now an <h1> for SEO; these lines keep it exactly the
   size and spacing the old <h2> had in main.css (32px, line-height 1.2) */
.hero-content h1 {
  color: #fff; font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0 0 .5rem;
}
.hero-content h1,
.hero-content h2 {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #d7dbe6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.search-box { box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5), 0 0 0 6px rgba(225, 228, 238, .18); transition: box-shadow .3s; }
.search-box:focus-within { box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5), 0 0 0 6px rgba(225, 228, 238, .45); }
.hero-search-btn { background: var(--ws-grad); box-shadow: 0 12px 24px -10px rgba(90, 0, 165, .9); }
.hero-search-btn:hover { background: var(--ws-grad); box-shadow: 0 16px 28px -10px rgba(90, 0, 165, 1); }

/* ==========================================================================
   Job Categories — photos untouched; silver ring + deeper shadow
   ========================================================================== */
.job-categories-section { background: linear-gradient(180deg, #f6f7fa 0%, #eef0f5 100%); }
.job-card { box-shadow: var(--ws-shadow); }
.job-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: box-shadow .4s;
}
.job-card:hover { box-shadow: var(--ws-shadow-lg); }
.job-card:hover::after { box-shadow: inset 0 0 0 2px rgba(225, 228, 238, .9); }

/* ==========================================================================
   Most Viewed Jobs — photos untouched
   ========================================================================== */
.most-view-jobs { background: linear-gradient(180deg, #eef0f5 0%, #ffffff 100%); }
.job-card-new { box-shadow: var(--ws-shadow); }
.job-card-new::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: box-shadow .4s;
}
.job-card-new:hover { box-shadow: var(--ws-shadow-lg); }
.job-card-new:hover::after { box-shadow: inset 0 0 0 2px rgba(225, 228, 238, .9); }
.job-country { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.btn-job-new { background: var(--ws-grad); box-shadow: 0 10px 22px -10px rgba(90, 0, 165, .9), inset 0 0 0 1px rgba(225, 228, 238, .45); }
.btn-job-new:hover { background: var(--ws-grad); }

/* ==========================================================================
   About (Who We Are)
   ========================================================================== */
.about .content { position: relative; background: linear-gradient(135deg, #fbfbfd 0%, #eef0f5 100%); }
.about .content::before {
  content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #5a00a5, #b9bdca); pointer-events: none;
}
.about .content .btn-read-more { background: var(--ws-grad); box-shadow: 0 14px 28px -12px rgba(90, 0, 165, .85); }
.about .content .btn-read-more:hover { color: #fff; }

/* ==========================================================================
   Why Choose — gradient icons with a soft silver halo (no size change)
   ========================================================================== */
.alt-features .icon-box { position: relative; isolation: isolate; }
.alt-features .icon-box::before {
  content: ""; position: absolute; z-index: -1; top: -8px; left: calc(var(--bs-gutter-x, 1.5rem) * .5 - 8px);
  width: 60px; height: 60px; border-radius: 18px; pointer-events: none;
  background: var(--ws-grad-silver); box-shadow: var(--ws-shadow-sm), inset 0 0 0 1px #dfe2ea;
  transition: transform .3s;
}
.alt-features .icon-box:hover::before { transform: rotate(-6deg) scale(1.06); }
.alt-features .icon-box i {
  background: var(--ws-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Looking for Employees (talent guide) — image untouched
   ========================================================================== */
.talent-guide-wrapper {
  background:
    radial-gradient(480px 300px at 100% 0, rgba(90, 0, 165, .08), transparent 60%),
    linear-gradient(135deg, #fbfbfd 0%, #eceef4 100%);
  box-shadow: var(--ws-shadow), inset 0 0 0 1px var(--ws-line);
}
.download-guide-btn { background: var(--ws-grad); box-shadow: 0 14px 28px -12px rgba(90, 0, 165, .85); }
.download-guide-btn:hover { background: var(--ws-grad); color: #fff; }

/* ==========================================================================
   Footer (all pages)
   ========================================================================== */
.footer { background: linear-gradient(180deg, #ffffff 0%, #f1f2f6 100%); }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #5a00a5, #c9cdd8, #5a00a5);
}
.footer .footer-links ul a { transition: color .25s, transform .25s; }
.footer .footer-links ul li:hover a { transform: translateX(4px); color: var(--ws-purple-2); }
.footer .social-links a { background: var(--ws-grad-silver); color: var(--ws-purple-2); border-color: #d6dae4; box-shadow: var(--ws-shadow-sm); }
.footer .social-links a:hover { background: var(--ws-grad); color: #fff; border-color: transparent; transform: translateY(-3px); }
.footer .copyright { background: linear-gradient(90deg, #eceef3, #f7f8fa, #eceef3); }

/* ==========================================================================
   Scroll-to-top
   ========================================================================== */
.scroll-top { background: var(--ws-grad); box-shadow: 0 12px 24px -10px rgba(90, 0, 165, .9); }
.scroll-top:hover { background: var(--ws-grad); }

/* ==========================================================================
   Shine animation on every action button (all pages)
   ========================================================================== */
.header .btn-getstarted, .hero-search-btn, .btn-job-new, .about .content .btn-read-more,
.download-guide-btn, .all-jobs-btn, .btn-cta, .job-detail-apply-btn, .job-detail-hero__apply-btn,
.apply-submit-btn, .apply-upload-card__btn, .legal-contact-strip__cta {
  position: relative; overflow: hidden;
}
.header .btn-getstarted::after, .hero-search-btn::after, .btn-job-new::after, .about .content .btn-read-more::after,
.download-guide-btn::after, .all-jobs-btn::after, .btn-cta::after, .job-detail-apply-btn::after, .job-detail-hero__apply-btn::after,
.apply-submit-btn::after, .apply-upload-card__btn::after, .legal-contact-strip__cta::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: wsShine 3.6s ease-in-out infinite;
}
.header .btn-getstarted::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .header .btn-getstarted::after, .hero-search-btn::after, .btn-job-new::after, .about .content .btn-read-more::after,
  .download-guide-btn::after, .all-jobs-btn::after, .btn-cta::after, .job-detail-apply-btn::after, .job-detail-hero__apply-btn::after,
  .apply-submit-btn::after, .apply-upload-card__btn::after, .legal-contact-strip__cta::after { animation: none; }
}

/* ==========================================================================
   MOBILE COMPACT VIEW (phones only, up to 767px)
   Laptop and tablet stay exactly as they are. On phones the page is
   tightened like the laptop view: 2-column job grids, small flags,
   compact cards and a shorter footer, so far less scrolling is needed.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* ---- spacing + section titles ---- */
  .index-page section, .index-page .section { padding: 34px 0; }
  .index-page .job-categories-section.py-5, .index-page section.py-5 { padding: 30px 0 !important; }
  .index-page .most-view-jobs { padding: 34px 0; }
  .index-page .section-title { padding-bottom: 26px; }
  .index-page .section-title h2 { font-size: 13px; padding: 6px 14px; }
  .index-page .section-title p { font-size: 19px; line-height: 1.3; margin-top: 8px; }
  .index-page .section-title::after { bottom: 10px; width: 48px; margin-left: -24px; height: 3px; }

  /* ---- hero + search ---- */
  .index-page .hero-section { padding: 26px 0 24px; }
  .index-page .hero-content h1 { font-size: 23px; margin-bottom: 14px; text-align: center; }
  .index-page .search-box { padding: 8px 10px; border-radius: 18px; }
  .index-page .search-box .form-control, .index-page .search-box .form-select { height: 44px; font-size: 14.5px; }
  .index-page .search-box .row > .col-md-3 { flex: 0 0 50%; max-width: 50%; border-top: 1px solid #eceef3; }
  .index-page .search-box .row > .col-md-3:nth-child(2) { border-left: 0 !important; }
  .index-page .hero-search-btn { height: 44px; font-size: 15px; margin-top: 6px; }

  /* ---- countries: 4 small flags in view ---- */
  .index-page .clients .swiper-slide img { max-width: 62px; margin: 0 auto; display: block; }
  .index-page .clients .swiper-slide h5 { margin-top: 8px !important; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

  /* ---- job categories: 2 small tiles per row ---- */
  .index-page .job-categories-section .row.g-4 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .index-page .job-categories-section .row.g-4 > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .index-page .job-card { height: 118px; border-radius: 14px; }
  .index-page .job-content { bottom: 10px; left: 8px; right: 8px; }
  .index-page .job-content h5 { font-size: 13px; line-height: 1.25; }

  /* ---- most viewed jobs: 2 compact cards per row ---- */
  .index-page .most-view-jobs .row.g-4 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .index-page .most-view-jobs .row.g-4 > .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
  .index-page .job-card-new { height: 236px; border-radius: 14px; }
  .index-page .job-overlay { padding: 10px; }
  .index-page .job-country { max-width: 100%; padding: 4px 8px; font-size: 9.5px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
  .index-page .job-overlay h5 { font-size: 14px; line-height: 1.25; margin-bottom: 2px; }
  .index-page .job-overlay .salary { font-size: 11.5px; padding: 3px 0 6px; white-space: nowrap; }
  .index-page .btn-job-new { width: 100%; font-size: 12.5px; padding: 7px 6px; border-radius: 8px; }

  /* ---- who we are ---- */
  .index-page .about .content { padding: 22px 18px 24px 20px; }
  .index-page .about .content::before { top: 22px; bottom: 22px; }
  .index-page .about .content h2 { font-size: 19px; line-height: 1.35; }
  .index-page .about .content p { font-size: 14.5px; line-height: 1.6; margin: 10px 0 16px; }
  .index-page .about .content .btn-read-more { padding: 13px 30px; }

  /* ---- why choose: 2 x 3 feature cards ---- */
  .index-page .alt-features .row.gy-5 { --bs-gutter-y: 18px; }
  .index-page .alt-features img.img-fluid { max-width: 250px; margin: 0 auto; display: block; }
  .index-page .alt-features .row.align-self-center { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; width: 100%; }
  .index-page .alt-features .row.align-self-center > .icon-box {
    width: auto; max-width: none; margin: 0; padding: 14px 12px;
    flex-direction: column; background: #fff; border-radius: 14px;
    box-shadow: 0 8px 20px -12px rgba(45, 20, 90, .35), inset 0 0 0 1px #eceef3;
  }
  .index-page .alt-features .icon-box i { font-size: 26px; line-height: 30px; margin: 0 0 8px; }
  .index-page .alt-features .icon-box::before { top: 9px; left: 6px; width: 42px; height: 42px; border-radius: 12px; }
  .index-page .alt-features .icon-box h4 { font-size: 14px; line-height: 1.3; margin: 0 0 4px; }
  .index-page .alt-features .icon-box p { font-size: 12.5px; line-height: 1.45; }

  /* ---- looking for employees ---- */
  .index-page .talent-guide-wrapper { padding: 22px 16px 24px; border-radius: 18px; }
  .index-page .talent-guide-wrapper > .row.g-5 { --bs-gutter-y: 18px; }
  .index-page .talent-content h2 { font-size: 24px; margin-bottom: 10px; }
  .index-page .talent-content p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
  .index-page .guide-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
  .index-page .feature-item { margin: 0; font-size: 12.5px; font-weight: 600; text-align: left; padding: 9px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e6e1f2; }
  .index-page .feature-item i { margin-right: 5px; }
  .index-page .download-guide-btn { padding-top: 13px; padding-bottom: 13px; }

  /* ---- footer (phones, every page) ---- */
  .footer .footer-top { padding-top: 26px; }
  .footer .footer-top > .row.gy-4 { --bs-gutter-y: 16px; }
  .footer .footer-about .footer-logo { width: 120px; }
  .footer .footer-tagline { margin-top: 8px; margin-bottom: 0; font-size: 13px; }
  .footer .footer-links { flex: 0 0 50%; max-width: 50%; margin-bottom: 0; }
  .footer .footer-contact { flex: 0 0 100%; max-width: 100%; }
  .footer h4 { font-size: 14.5px; margin-bottom: 8px; padding-bottom: 0; }
  .footer .footer-links ul li { padding: 5px 0; font-size: 13.5px; }
  .footer .footer-links ul i { font-size: 10px; }
  .footer .footer-contact-list li { padding: 5px 0; font-size: 13.5px; }
  .footer .footer-divider { margin: 16px 0 14px; }
  .footer .footer-bottom-row { --bs-gutter-y: 10px; }
  .footer .footer-recruit-for { margin-bottom: 0 !important; padding-bottom: 14px; }
  .footer .recruit-flags { gap: 10px 6px; justify-content: space-between; }
  .footer .recruit-flag-item { width: calc(25% - 6px); gap: 4px; }
  .footer .recruit-flag-item img { width: 34px; height: 34px; }
  .footer .recruit-flag-item span { font-size: 11px; line-height: 1.2; }
  .footer .footer-follow { display: flex; align-items: center; gap: 10px; }
  .footer .footer-follow h4 { margin: 0; }
  .footer .footer-follow .social-links a { width: 40px; height: 40px; margin: 0 4px; font-size: 16px; }
  .footer .copyright { padding-top: 14px; padding-bottom: 14px; }
  .footer .copyright p { font-size: 12.5px; }
  .footer .footer-bottom-links a { white-space: nowrap; }
  .footer .footer-bottom-links .divider { margin: 0 5px; }
}
@media (max-width: 380px) {
  .index-page .job-overlay .salary { font-size: 10.5px; }
}

/* ==========================================================================
   MOBILE FINISHING TOUCHES (phones only, paint only — nothing moves)
   ========================================================================== */
@media (max-width: 767.98px) {
  .index-page a, .index-page button, .footer a { -webkit-tap-highlight-color: transparent; }

  /* hero: soft glow behind the heading */
  .index-page .hero-content h1 { text-shadow: 0 6px 24px rgba(20, 0, 50, .35); }

  /* countries: ringed flags + brand-coloured names */
  .index-page .clients .swiper-slide img { border-radius: 50%; box-shadow: 0 8px 18px -10px rgba(45, 20, 90, .55), 0 0 0 3px #fff, 0 0 0 4px #e3dcf3; }
  .index-page .clients .swiper-slide h5 { color: #3a0a6e; }

  /* job category tiles: clearer text + small arrow, press feedback */
  .index-page .job-card .overlay { background: linear-gradient(to top, rgba(30, 0, 60, .92) 0%, rgba(30, 0, 60, .35) 55%, rgba(0, 0, 0, .05) 100%); }
  .index-page .job-content h5 { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); letter-spacing: .1px; }
  .index-page .job-card > a::before {
    content: "\2197"; position: absolute; top: 8px; right: 8px; z-index: 4; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font: 700 13px/1 sans-serif; color: #4d0085;
    background: rgba(255, 255, 255, .92); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); pointer-events: none;
  }
  .index-page .job-card, .index-page .job-card-new, .index-page .alt-features .icon-box, .index-page .feature-item { transition: transform .15s ease, box-shadow .2s ease; }
  .index-page .job-card:active, .index-page .job-card-new:active { transform: scale(.97); }
  .index-page .btn-job-new:active, .index-page .hero-search-btn:active, .index-page .download-guide-btn:active, .index-page .about .content .btn-read-more:active { transform: scale(.96); }

  /* most viewed jobs: glass location pill, gold salary */
  .index-page .job-country { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
  .index-page .job-overlay .salary { color: #ffd76a; }

  /* why choose cards: thin brand accent on top */
  .index-page .alt-features .row.align-self-center > .icon-box { overflow: hidden; }
  .index-page .alt-features .row.align-self-center > .icon-box::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, #4d0085, #7b2fd6, #c9cdd8);
  }
  .index-page .alt-features .icon-box h4 { color: #2a0a5e; }

  /* looking for employees: purple tick chips */
  .index-page .feature-item i { color: #5a00a5; }
  .index-page .feature-item { color: #2d2648; }

  /* footer: neat link rows */
  .footer .footer-links ul a, .footer .footer-contact-list li a, .footer .footer-contact-list li span { color: #2d2648; }
  .footer h4 { color: #3a0a6e; }
}
/* ==========================================================================
   MOBILE COMPACT VIEW — ALL INNER PAGES (phones only, up to 767px)
   Same feel as the homepage: tighter spacing, 2-column card grids,
   smaller headings. Laptop and tablet are not affected.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* ---- shared: sections + titles ---- */
  section, .section { padding: 34px 0; }
  .section-title { padding-bottom: 26px; }
  .section-title h2 { font-size: 13px; padding: 6px 14px; }
  .section-title p { font-size: 19px; line-height: 1.3; margin-top: 8px; }
  .section-title::after { bottom: 10px; width: 48px; margin-left: -24px; height: 3px; }
  .destinations-intro { font-size: 14px; line-height: 1.65; margin-bottom: 18px; }

  /* ---- shared: purple page headers ---- */
  .about-page-header { padding: 110px 0 30px; }
  .about-page-header h1 { font-size: 22px; line-height: 1.3; margin-bottom: 10px; }
  .about-page-header p { font-size: 14px; line-height: 1.6; }
  .about-eyebrow { font-size: 11px; padding: 6px 14px; margin-bottom: 12px; }
  .header-cta-row { margin-top: 16px; gap: 10px; }
  .header-cta-row .btn-cta { padding: 10px 18px; font-size: 13.5px; }

  /* ---- shared: CTA band at page bottom ---- */
  .about-cta-section { padding: 36px 0; }
  .about-cta-section h2 { font-size: 21px; margin-bottom: 10px; }
  .about-cta-section p { font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
  .about-cta-buttons { gap: 10px; }
  .about-cta-section .btn-cta { padding: 11px 18px; font-size: 14px; }

  /* ---- shared: country chips ---- */
  .country-grid { gap: 8px; }
  .country-chip { font-size: 12.5px; padding: 7px 12px; gap: 6px; }

  /* ---- shared: trust / compliance list in 2 columns ---- */
  .trust-box { padding: 18px 14px; }
  .trust-box .row { --bs-gutter-x: 10px; --bs-gutter-y: 12px; }
  .trust-box .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .trust-item { font-size: 13px; line-height: 1.35; gap: 7px; align-items: flex-start; }
  .trust-item i { font-size: 15px; margin-top: 1px; }
  .trust-note { font-size: 13px; }

  /* ---- shared: 2-column card grids ---- */
  .value-box, .wwd-box, .industry-box { padding: 18px 12px 28px; }
  #values .row.g-4, #what-we-do .row.g-4, #industries .row.g-4, #industries-served .row.g-4,
  #framework .row.g-4 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
  #values .row.g-4 > [class*="col-"], #what-we-do .row.g-4 > [class*="col-"],
  #industries .row.g-4 > [class*="col-"], #industries-served .row.g-4 > [class*="col-"],
  #framework .row.g-4 > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .value-box i { font-size: 28px; margin-bottom: 8px; }
  .value-box h4, .wwd-box h4 { font-size: 15px; margin-bottom: 6px; }
  .value-box p, .wwd-box p { font-size: 12.5px; line-height: 1.5; }
  .wwd-box i { font-size: 26px; margin-bottom: 8px; }
  .industry-box i { font-size: 24px; margin-bottom: 8px; }
  .industry-box h5 { font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
  .industry-box p { font-size: 12px; line-height: 1.5; }
  [data-wsfx]:not([data-wsfx=big])::after { bottom: 7px; font-size: 10.5px; }
  .industry-box[data-wsfx]::after { left: 12px; }

  /* ---- shared: recruitment journey in 2 columns ---- */
  .journey-track, .journey-track-7 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .journey-step { padding: 16px 12px 28px; }
  .journey-num { font-size: 26px; margin-bottom: 4px; }
  .journey-step h5 { font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
  .journey-step p { font-size: 12.5px; line-height: 1.5; }
  .journey-step[data-wsfx]::after { left: 12px; }
  .journey-track-7 > .journey-step:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ================= ABOUT US ================= */
  #who-we-are .row { --bs-gutter-y: 16px; }
  #who-we-are .content { padding: 22px 18px 22px 20px; }
  #who-we-are .content h2 { font-size: 19px; line-height: 1.35; }
  #who-we-are .content p { font-size: 14px; line-height: 1.65; margin: 10px 0 0; }
  .our-story-box { padding: 22px 18px; }
  .our-story-box h4 { font-size: 18px; margin-bottom: 10px; }
  .our-story-box p { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
  #mission-vision .row { --bs-gutter-y: 12px; }
  .mv-card { padding: 22px 18px; }
  .mv-card .mv-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 12px; border-radius: 12px; }
  .mv-card h3 { font-size: 19px; margin-bottom: 8px; }
  .mv-card p { font-size: 14px; line-height: 1.65; }
  #why-us .row { --bs-gutter-y: 12px; }
  .why-us-card { padding: 22px 16px; }
  .why-us-card h3 { font-size: 19px; margin-bottom: 16px; }
  .why-us-tag { font-size: 11px; padding: 5px 12px; margin-bottom: 10px; }
  .why-us-item { gap: 12px; margin-bottom: 14px; }
  .why-us-item i { font-size: 19px; }
  .why-us-item h5 { font-size: 14.5px; margin-bottom: 2px; }
  .why-us-item p { font-size: 13px; line-height: 1.5; }

  /* ================= EMPLOYERS ================= */
  .intro-lead { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
  #employer-intro p { font-size: 14px; line-height: 1.65; }
  #solutions .row.g-4 { --bs-gutter-y: 12px; }
  .solution-card { padding: 20px 16px; }
  .solution-icon { width: 46px; height: 46px; font-size: 21px; margin-bottom: 12px; border-radius: 12px; }
  .solution-card h4 { font-size: 17px; margin-bottom: 6px; }
  .solution-card > p, .category-card > p { font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }
  .solution-label { font-size: 11px; margin-bottom: 8px; }
  .solution-card ul, .category-card ul { gap: 6px; }
  .solution-card ul li, .category-card ul li { font-size: 12px; padding: 5px 10px; }
  #categories .row.g-4 { --bs-gutter-y: 12px; }
  .category-card { padding: 20px 16px; }
  .category-tag { font-size: 11px; padding: 5px 12px; margin-bottom: 10px; }
  .category-card h4 { font-size: 17px; margin-bottom: 6px; }
  .partner-heading { font-size: 22px; margin: 10px 0 10px; }
  .partner-lead { font-size: 14px; line-height: 1.65; }
  #partner-benefits .row.g-5 { --bs-gutter-y: 16px; }
  #partner-benefits .row.g-3 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
  #partner-benefits .row.g-3 > .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .partner-benefit { padding: 10px 10px; font-size: 12.5px; line-height: 1.3; gap: 7px; height: 100%; }
  .partner-benefit i { font-size: 15px; }
  .framework-step { padding: 14px 6px; background: #fff; border-radius: 14px; height: 100%;
    box-shadow: 0 8px 20px -12px rgba(45, 20, 90, .35), inset 0 0 0 1px #eceef3; }
  .framework-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 10px; }
  .framework-step h5 { font-size: 14px; margin-bottom: 4px; }
  .framework-step p { font-size: 12.5px; line-height: 1.45; }
  .employer-form { padding: 18px 14px; border-radius: 14px; }
  .form-block { margin-bottom: 20px; }
  .form-block h4 { font-size: 15px; margin-bottom: 12px; padding-bottom: 8px; }
  .employer-form .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
  .employer-form .row > .col-md-6, .employer-form .row > .col-md-4, .employer-form .row > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .employer-form .form-label { font-size: 12.5px; margin-bottom: 4px; line-height: 1.25; }
  .employer-form .form-control, .employer-form .form-select { height: 42px; font-size: 14px; padding: 8px 10px; }
  .employer-form textarea.form-control { height: auto; min-height: 90px; }
  .employer-form .form-check-label { font-size: 13px; }
  .employer-form .btn-lg { width: 100%; font-size: 16px; padding: 12px 16px; }

  /* ================= JOB SEARCH ================= */
  .job-results-section { padding: 26px 0 34px; }
  .job-results-header { margin-bottom: 16px; }
  .job-results-header h2 { font-size: 20px; }
  .job-results-count { font-size: 13.5px; }
  .job-results-section .row.g-4 { --bs-gutter-y: 12px; }
  .job-result-card { padding: 16px 16px 12px; border-radius: 14px; }
  .job-result-card__title { font-size: 17px; margin-bottom: 8px; padding-right: 0; }
  .job-result-card__meta { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin-bottom: 8px; }
  .job-result-card__meta li { gap: 4px; }
  .job-result-card__meta li i { font-size: 13px; width: auto; }
  .job-result-card__desc { font-size: 13px; line-height: 1.55; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .job-result-card__readmore { font-size: 13.5px; padding-top: 10px; }
  .hero-section .search-box .row > .col-md-3:has(select), .hero-section .search-box .row > .col-md-2:has(select) { flex: 0 0 50%; max-width: 50%; }

  /* ================= JOB DETAIL ================= */
  .job-detail-section .row.gy-5 { --bs-gutter-y: 18px; }
  .job-detail-lead { font-size: 15px; line-height: 1.6; }
  .job-detail-content p, .job-detail-content li { font-size: 14px; line-height: 1.65; }
  .job-detail-sidebar { padding: 18px 14px; position: static; }
  .job-detail-sidebar__heading { font-size: 18px; margin-bottom: 12px; }
  .job-detail-sidebar__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .job-detail-sidebar__list li, .job-detail-sidebar__list li:first-child, .job-detail-sidebar__list li:last-child {
    padding: 9px 8px; border: 0; border-radius: 12px; background: #f6f4fb; font-size: 12.5px; line-height: 1.35;
    gap: 8px; min-width: 0; overflow-wrap: anywhere; }
  .job-detail-sidebar__list li span { font-size: 12.5px; }
  .job-detail-sidebar__icon { width: 28px !important; height: 28px !important; min-width: 28px; font-size: 13px; }
  .job-detail-sidebar__text { font-size: 12.5px; line-height: 1.35; }
  .job-detail-sidebar .job-detail-apply-btn--block { margin-top: 14px; }

  /* ================= APPLY + REFER FORMS ================= */
  .apply-page-section { padding: 108px 0 36px; }
  .apply-heading { margin-bottom: 18px; }
  .apply-heading h1 { font-size: 23px; }
  .apply-heading__sub { font-size: 15px; }
  .apply-heading__note { font-size: 13px; }
  .apply-block { padding: 18px 14px; margin-bottom: 14px; border-radius: 14px; }
  .apply-block__header { margin-bottom: 14px; padding-bottom: 10px; }
  .apply-block__header h2 { font-size: 15px; }
  .apply-block__num { width: 28px; height: 28px; font-size: 13px; }
  .apply-form .row.g-4 { --bs-gutter-x: 10px; --bs-gutter-y: 12px; }
  .apply-form .row.g-4 > .col-md-4 { flex: 0 0 50%; max-width: 50%; }
  .apply-form .row.g-4 > .col-md-4:has(.apply-phone-group), .apply-form .row.g-4 > .col-md-4:has(input[type=email]),
  .apply-form .row.g-4 > .col-md-4:has(.apply-radio-group) { flex: 0 0 100%; max-width: 100%; }
  .apply-label { font-size: 12.5px; margin-bottom: 5px; line-height: 1.25; }
  .apply-input, .apply-form .form-select, .refer-form-wrap .form-select { height: 42px; font-size: 14px; padding-left: 10px; }
  .apply-textarea { height: auto !important; min-height: 90px; }
  .apply-upload-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .apply-upload-card { padding: 14px 8px; }
  .apply-upload-card__title { font-size: 12.5px; }
  .apply-upload-card__icon { font-size: 22px; margin: 6px 0; }
  .apply-upload-card__btn { font-size: 12px; padding: 6px 10px; }
  .apply-upload-card__hint { font-size: 10.5px; }
  .apply-submit-btn { width: 100%; }

  /* ================= REFER A FRIEND ================= */
  #how-it-works .row { --bs-gutter-y: 16px; }
  #how-it-works .intro-lead { font-size: 15px; }
  .refer-steps-list { gap: 10px; }
  .refer-step { padding: 16px 14px; }
  .refer-step__num { width: 38px; height: 38px; font-size: 14px; margin-bottom: 8px; }
  .refer-step h4 { font-size: 15.5px; margin-bottom: 4px; }
  .refer-step p { font-size: 13px; line-height: 1.55; }
  .refer-share-box, .refer-cta-box { padding: 18px 16px; }
  .referral-tiers-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tier-card { padding: 14px 6px; }
  .tier-badge { font-size: 9.5px; padding: 4px 7px; margin-bottom: 8px; letter-spacing: .3px; }
  .tier-num { font-size: 11px; line-height: 1.3; }
  .tier-amount { font-size: 22px; margin: 4px 0; }
  .tier-desc { font-size: 11px; line-height: 1.4; }
  .refer-terms-note { font-size: 12.5px; margin-top: 14px; }
  .refer-form-section { padding: 34px 0; }
  .refer-form-wrap .row.g-3 { --bs-gutter-y: 10px; }

  /* ================= LEGAL PAGES ================= */
  .legal-page-header { padding: 106px 0 24px; }
  .legal-page-header h1 { font-size: 22px; margin-bottom: 6px; }
  .legal-page-header p { font-size: 13.5px; line-height: 1.6; }
  .legal-header-icon { display: none; }
  .legal-body-section { padding: 18px 0 30px; }
  .legal-body-section .row.gy-4 { --bs-gutter-y: 12px; }
  .legal-toc { padding: 12px; position: static; }
  .legal-toc h5 { margin-bottom: 8px; }
  .legal-toc ul { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .legal-toc ul::-webkit-scrollbar { display: none; }
  .legal-toc li { flex: 0 0 auto; margin: 0; }
  .legal-toc a { white-space: nowrap; font-size: 12.5px; padding: 6px 10px; }
  .legal-content { padding: 16px 14px; }
  .legal-block { padding-bottom: 16px; margin-bottom: 16px; gap: 10px; }
  .legal-block__icon { width: 34px; height: 34px; font-size: 15px; }
  .legal-block__text h2 { font-size: 16.5px; margin-bottom: 8px; }
  .legal-block__text p, .legal-plain-list li { font-size: 13.5px; line-height: 1.65; margin-bottom: 10px; }
  .legal-block__text.wsm-clip { max-height: 210px; overflow: hidden; position: relative; }
  .legal-block__text.wsm-clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%); }
  .wsm-more { align-self: flex-start; width: auto; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 7px 14px; border: 0; border-radius: 50px;
    background: #f2ecfb; color: #4d0085; font: 600 13px/1 var(--heading-font, Poppins, sans-serif); cursor: pointer; }
  .wsm-more::after { content: "\25BE"; font-size: 12px; transition: transform .2s; }
  .wsm-more[aria-expanded="true"]::after { transform: rotate(180deg); }
  .legal-trust-strip { padding: 20px 0; }
  .trust-strip-item { font-size: 12.5px; }

  /* ================= TRACK APPLICATION ================= */
  .trk-hero { padding: 106px 0 30px; }
  .trk-hero__title { font-size: 24px; }
  .trk-search-input { min-width: 0; width: 100%; padding: 14px 14px; font-size: 1rem; }
  .trk-search-btn { padding: 14px 16px; }

  /* ================= APPLICATION SUBMITTED ================= */
  .ws-success-section { padding-top: 100px; }
  .ws-success-card { padding: 28px 18px; }
  .ws-next-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ws-next-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* footer links that wrapped badly on inner pages */
  .footer .footer-bottom-links a { white-space: nowrap; }
}

/* ==========================================================================
   ABOUT PAGE — EXTRA COMPACT PHONE VIEW
   Short previews with "Read more", 3-column icon grids, one-line country
   row. Every word stays in the page; laptop/tablet unchanged.
   ========================================================================== */
@media (max-width: 767.98px) {
  .about-us-page section, .about-us-page .section { padding: 26px 0; }
  .about-us-page .section-title { padding-bottom: 20px; }
  .about-us-page .section-title p { font-size: 17.5px; }
  .about-us-page .section-title::after { bottom: 7px; }

  /* header */
  .about-us-page .about-page-header { padding: 104px 0 22px; }
  .about-us-page .about-page-header h1 { font-size: 20px; }
  .about-us-page .about-page-header p { font-size: 13px; line-height: 1.55; }

  /* long text boxes: short preview + Read more (added by ws-mobile.js) */
  .wsm-fold p { margin-bottom: 0 !important; }
  .wsm-fold:not(.wsm-open) p ~ p { display: none; }
  .wsm-fold:not(.wsm-open) p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .wsm-fold.wsm-open p + p { margin-top: 10px; }
  .wsm-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 0; border: 0; background: none;
    color: #5a00a5; font: 700 13px/1.4 var(--heading-font, Poppins, sans-serif); cursor: pointer; }
  .wsm-toggle::after { content: "\203A"; font-size: 16px; line-height: 1; transition: transform .2s; }
  .wsm-open .wsm-toggle::after { transform: rotate(90deg); }
  .mv-card-alt .wsm-toggle { color: #fff; }

  /* who we are + our story */
  .about-us-page #who-we-are .row { --bs-gutter-y: 10px; }
  .about-us-page #who-we-are .content { padding: 16px 16px 16px 18px; }
  .about-us-page #who-we-are .content h3 { font-size: 11.5px; margin-bottom: 4px; }
  .about-us-page #who-we-are .content h2 { font-size: 17px; margin-bottom: 0; }
  .about-us-page #who-we-are .content p, .about-us-page .our-story-box p { font-size: 13.5px; line-height: 1.6; margin-top: 8px; }
  .about-us-page .our-story-box { padding: 16px; }
  .about-us-page .our-story-box h3 { font-size: 11.5px; margin-bottom: 4px; }
  .about-us-page .our-story-box h4 { font-size: 16px; margin-bottom: 6px; }

  /* mission + vision side by side */
  .about-us-page #mission-vision .row { --bs-gutter-x: 10px; }
  .about-us-page #mission-vision .row > .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .about-us-page .mv-card { padding: 14px 12px; border-radius: 14px; }
  .about-us-page .mv-card .mv-icon { width: 36px; height: 36px; font-size: 17px; margin-bottom: 8px; border-radius: 10px; }
  .about-us-page .mv-card h3 { font-size: 15px; margin-bottom: 4px; }
  .about-us-page .mv-card p { font-size: 12.5px; line-height: 1.5; }
  .about-us-page .mv-card.wsm-fold:not(.wsm-open) p { -webkit-line-clamp: 6; }

  /* values: 3 per row, icon + name (tap for full card) */
  .about-us-page #values .row.g-4 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
  .about-us-page #values .row.g-4 > [class*="col-"] { flex: 0 0 33.333%; max-width: 33.333%; }
  .about-us-page .value-box { padding: 14px 6px 24px; border-radius: 14px; }
  .about-us-page .value-box i { font-size: 24px; margin-bottom: 4px; }
  .about-us-page .value-box h4 { font-size: 13px; margin: 0; }
  .about-us-page .value-box p { display: none; }

  /* what we do + industries: 2 per row, 2-line preview */
  .about-us-page .wwd-box, .about-us-page .industry-box { padding: 14px 10px 24px; border-radius: 14px; }
  .about-us-page .wwd-box i { font-size: 22px; margin-bottom: 4px; }
  .about-us-page .wwd-box h4 { font-size: 13.5px; margin-bottom: 4px; }
  .about-us-page .industry-box i { font-size: 20px; margin-bottom: 4px; }
  .about-us-page .industry-box h5 { font-size: 13px; margin-bottom: 4px; }
  .about-us-page .wwd-box p, .about-us-page .industry-box p { font-size: 11.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .about-us-page [data-wsfx]:not([data-wsfx=big])::after { bottom: 6px; font-size: 10px; }

  /* destinations: one swipeable row of countries + compact map card */
  .about-us-page .destinations-intro { font-size: 13px; line-height: 1.55; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .about-us-page .country-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 6px; padding: 2px 2px 8px;
    margin: 0 -12px; padding-left: 12px; padding-right: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .about-us-page .country-grid::-webkit-scrollbar { display: none; }
  .about-us-page .country-grid { align-items: center; }
  .about-us-page .country-chip { flex: 0 0 auto; height: auto; white-space: nowrap; font-size: 12px; padding: 6px 11px; }
  .about-us-page .country-grid.wsci-hint::after { display: none; }
  .about-us-page .country-grid { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .about-us-page #destinations .row.mt-4 { margin-top: 14px !important; }
  .about-us-page .wsmap-head { padding: 14px 16px 0; }
  .about-us-page .wsmap-head h3 { font-size: 16px; }
  .about-us-page .wsmap-legend, .about-us-page .wsmap-note { display: none; }
  .about-us-page .wsmap-foot { padding: 10px 14px 14px; gap: 10px; }
  .about-us-page .wsmap-stats { gap: 6px 18px; flex-wrap: nowrap; }
  .about-us-page .wsmap-stats b { font-size: 16px; }
  .about-us-page .wsmap-stats span { font-size: 10.5px; }
  .about-us-page .wsmap-cta { padding-top: 10px; padding-bottom: 10px; font-size: 13.5px; }

  /* why us: 2-column feature tiles */
  .about-us-page #why-us .row { --bs-gutter-y: 10px; }
  .about-us-page .why-us-card { padding: 16px 12px; }
  .about-us-page .why-us-card h3 { font-size: 16px; margin-bottom: 10px; }
  .about-us-page .why-us-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
  .about-us-page .why-us-card > .why-us-tag, .about-us-page .why-us-card > h3 { grid-column: 1 / -1; justify-self: start; }
  .about-us-page .why-us-card > h3 { margin-bottom: 2px; }
  .about-us-page .why-us-item { flex-direction: column; gap: 4px; margin: 0; padding: 10px; border-radius: 12px; background: rgba(90, 0, 165, .05); }
  .about-us-page .why-us-card-alt .why-us-item { background: rgba(255, 255, 255, .08); }
  .about-us-page .why-us-item i { font-size: 17px; margin: 0; }
  .about-us-page .why-us-item h5 { font-size: 12.5px; line-height: 1.3; margin: 0; }
  .about-us-page .why-us-item p { display: none; }
  .about-us-page .why-us-item { flex-direction: row; align-items: center; gap: 8px; padding: 9px 8px; }

  /* journey: 3 per row, step number + name (tap for full step) */
  .about-us-page .journey-track { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .about-us-page .journey-step { padding: 12px 8px 24px; border-radius: 14px; }
  .about-us-page .journey-num { font-size: 22px; margin-bottom: 2px; }
  .about-us-page .journey-step h5 { font-size: 12px; line-height: 1.3; margin: 0; }
  .about-us-page .journey-step p { display: none; }
  .about-us-page .journey-step[data-wsfx]::after { left: 8px; }

  /* trust */
  .about-us-page .trust-box { padding: 14px 12px; }
  .about-us-page .trust-item { font-size: 12px; }
  .about-us-page .trust-note { font-size: 11.5px; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .about-us-page .trust-box .row { --bs-gutter-y: 8px; }

  /* bottom CTA: three buttons in one row */
  .about-us-page .about-cta-section { padding: 26px 0; }
  .about-us-page .about-cta-section h2 { font-size: 18px; }
  .about-us-page .about-cta-section p { font-size: 13px; line-height: 1.55; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .about-us-page .about-cta-buttons { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
  .about-us-page .about-cta-section .btn-cta { flex: 1 1 0; padding: 10px 4px; font-size: 12.5px; gap: 4px; white-space: nowrap; }
}

/* ==========================================================================
   FOOTER — tighter on phones (every page)
   ========================================================================== */
@media (max-width: 767.98px) {
  .footer .footer-top { padding-top: 20px; }
  .footer .footer-top > .row.gy-4 { --bs-gutter-y: 12px; }
  .footer .footer-about { display: flex; align-items: center; gap: 12px; }
  .footer .footer-about .footer-logo { width: 96px; }
  .footer .footer-tagline { margin: 0; font-size: 12.5px; }
  .footer .footer-links ul li { padding: 3px 0; font-size: 13px; }
  .footer .footer-contact-list li { padding: 3px 0; font-size: 13px; gap: 8px; }
  .footer .footer-divider { margin: 12px 0 10px; }
  .footer .footer-recruit-for h4, .footer .footer-follow h4 { font-size: 13.5px; }
  .footer .recruit-flags { flex-wrap: wrap; gap: 8px 0; justify-content: flex-start; }
  .footer .recruit-flag-item { width: 25%; flex: 0 0 25%; gap: 3px; }
  .footer .recruit-flag-item img { width: 28px; height: 28px; }
  .footer .recruit-flag-item span { font-size: 10.5px; white-space: nowrap; }
  .footer .footer-recruit-for { padding-bottom: 10px; }
  .footer .footer-follow .social-links a { width: 36px; height: 36px; font-size: 15px; }
  .footer .copyright { padding-top: 10px; padding-bottom: 10px; }
  .footer .copyright p { font-size: 11.5px; }
}

/* ==========================================================================
   EMPLOYERS PAGE — EXTRA COMPACT PHONE VIEW
   ========================================================================== */
@media (max-width: 767.98px) {
  .employer-page section, .employer-page .section { padding: 26px 0; }
  .employer-page .section-title { padding-bottom: 20px; }
  .employer-page .section-title p { font-size: 17.5px; }
  .employer-page .section-title::after { bottom: 7px; }
  .employer-page .destinations-intro { font-size: 13px; line-height: 1.55; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* header: two buttons side by side */
  .employer-page .about-page-header { padding: 104px 0 22px; }
  .employer-page .about-page-header h1 { font-size: 20px; }
  .employer-page .about-page-header p { font-size: 13px; line-height: 1.55; }
  .employer-page .header-cta-row { flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
  .employer-page .header-cta-row .btn-cta { flex: 1 1 0; justify-content: center; padding: 10px 6px; font-size: 13px; white-space: nowrap; }

  /* intro + partner text: preview with Read more */
  .employer-page #employer-intro .intro-lead { font-size: 14.5px; line-height: 1.55; }
  .employer-page #employer-intro p { font-size: 13.5px; line-height: 1.6; }
  .employer-page .wsm-fold { text-align: left; }

  /* why worksphere checklist */
  .employer-page .trust-box { padding: 14px 12px; }
  .employer-page .trust-box .row { --bs-gutter-y: 8px; }
  .employer-page .trust-item { font-size: 12px; }

  /* solutions: 2 per row, icon + name + 2-line text */
  .employer-page #solutions .row.g-4 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
  .employer-page #solutions .row.g-4 > .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .employer-page .solution-card { padding: 14px 10px; border-radius: 14px; }
  .employer-page .solution-icon { width: 38px; height: 38px; font-size: 18px; margin-bottom: 8px; border-radius: 10px; }
  .employer-page .solution-card h4 { font-size: 13.5px; line-height: 1.3; margin-bottom: 4px; }
  .employer-page .solution-card > p, .employer-page .category-card > p { font-size: 11.5px; line-height: 1.45; margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .employer-page .solution-card .solution-label, .employer-page .solution-card ul,
  .employer-page .category-card .solution-label, .employer-page .category-card ul { display: none; }

  /* industries: 2 per row, 2-line roles */
  .employer-page .industry-box { padding: 14px 10px 24px; border-radius: 14px; }
  .employer-page .industry-box i { font-size: 20px; margin-bottom: 4px; }
  .employer-page .industry-box h5 { font-size: 13px; margin-bottom: 4px; }
  .employer-page .industry-box p { font-size: 11.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .employer-page [data-wsfx]:not([data-wsfx=big])::after { bottom: 6px; font-size: 10px; }

  /* workforce categories: 3 in one row */
  .employer-page #categories .row.g-4 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
  .employer-page #categories .row.g-4 > .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .employer-page .category-card { padding: 12px 6px; border-radius: 14px; }
  .employer-page .category-tag { font-size: 9px; padding: 4px 7px; margin-bottom: 6px; letter-spacing: .3px; }
  .employer-page .category-card h4 { font-size: 12.5px; line-height: 1.3; margin-bottom: 4px; }
  .employer-page .category-card > p { -webkit-line-clamp: 4; font-size: 11px; }

  /* recruitment process: 2 per row, 2-line text */
  .employer-page .journey-track-7 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .employer-page .journey-step { padding: 12px 10px; border-radius: 14px; }
  .employer-page .journey-num { font-size: 20px; margin-bottom: 2px; }
  .employer-page .journey-step h5 { font-size: 13px; margin-bottom: 3px; }
  .employer-page .journey-step p { font-size: 11.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* countries: one swipeable row */
  .employer-page .country-grid { flex-wrap: nowrap; justify-content: flex-start; align-items: center; overflow-x: auto; gap: 6px;
    margin: 0 -12px; padding: 2px 12px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .employer-page .country-grid::-webkit-scrollbar { display: none; }
  .employer-page .country-grid.wsci-hint::after { display: none; }
  .employer-page .country-chip { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 6px 11px; }

  /* partner benefits */
  .employer-page #partner-benefits .row.g-5 { --bs-gutter-y: 12px; }
  .employer-page .partner-heading { font-size: 18px; margin: 8px 0 6px; }
  .employer-page .partner-lead { font-size: 13.5px; line-height: 1.6; }
  .employer-page .partner-benefit { font-size: 12px; padding: 9px 8px; }

  /* success framework: 2 per row, 2-line text */
  .employer-page .framework-step { padding: 12px 6px; }
  .employer-page .framework-icon { width: 40px; height: 40px; font-size: 17px; margin-bottom: 6px; }
  .employer-page .framework-step h5 { font-size: 13px; margin-bottom: 3px; }
  .employer-page .framework-step p { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* inquiry form: optional sections fold away (opened with a tap) */
  .employer-page .employer-form { padding: 14px 12px; }
  .employer-page .form-block { margin-bottom: 12px; }
  .employer-page .form-block h4 { font-size: 14px; margin-bottom: 10px; }
  .wsm-acc > h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
    padding: 11px 12px !important; margin: 0 !important; border-radius: 12px; background: #f6f3fc; border: 0 !important; }
  .wsm-acc > h4::after { content: "+ Add"; flex: 0 0 auto; font: 700 11.5px/1 var(--heading-font, Poppins, sans-serif); color: #5a00a5;
    padding: 5px 9px; border-radius: 50px; background: #fff; box-shadow: inset 0 0 0 1px #e3d8f6; }
  .wsm-acc.wsm-open > h4::after { content: "\2212 Hide"; }
  .wsm-acc.wsm-open > h4 { margin-bottom: 10px !important; }
  .wsm-acc:not(.wsm-open) > :not(h4) { display: none !important; }

  /* bottom CTA: buttons compact */
  .employer-page .about-cta-section { padding: 26px 0; }
  .employer-page .about-cta-section h2 { font-size: 18px; }
  .employer-page .about-cta-section p { font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
  .employer-page .about-cta-buttons { gap: 8px; }
  .employer-page .about-cta-section .btn-cta { padding: 10px 12px; font-size: 13px; }
}

/* ==========================================================================
   JOB SEARCH + JOB DETAIL — EXTRA COMPACT PHONE VIEW
   ========================================================================== */
@media (max-width: 767.98px) {
  /* search hero (job search page only — homepage keeps its own) */
  body:not(.index-page) .hero-section { padding: 24px 0 18px; }
  body:not(.index-page) .hero-section .hero-content { margin-bottom: 0; }
  body:not(.index-page) .hero-section .hero-content h2 { font-size: 21px; margin-bottom: 12px !important; }
  body:not(.index-page) .hero-section .search-box { padding: 8px; border-radius: 16px; }
  body:not(.index-page) .hero-section .search-box .form-control,
  body:not(.index-page) .hero-section .search-box .form-select { height: 42px; font-size: 14px; }
  body:not(.index-page) .hero-section .hero-search-btn { height: 42px; font-size: 15px; }
  body:not(.index-page) .hero-section a.cta-strapline { display: inline-block; font-size: 13px !important; margin: 2px 0 4px !important; text-decoration: underline; }

  /* results: 2 compact job cards per row */
  .job-results-section { padding: 18px 0 28px; }
  .job-results-header { margin-bottom: 10px; align-items: center; }
  .job-results-header h2 { font-size: 17px; }
  .job-results-count { font-size: 12.5px; }
  .job-results-section .row.g-4 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
  .job-results-section .row.g-4 > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .job-result-card { padding: 12px 10px 10px; border-radius: 14px; }
  .job-result-card__title { font-size: 14px; line-height: 1.3; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .job-result-card__meta { flex-direction: column; gap: 3px; font-size: 11.5px; margin-bottom: 8px; }
  .job-result-card__meta li { gap: 5px; min-width: 0; }
  .job-result-card__meta li:nth-child(2) { color: #4d0085; font-weight: 700; }
  .job-result-card__meta li:nth-child(3) { font-size: 10.5px; opacity: .75; }
  .job-result-card__meta li i { font-size: 12px; }
  .job-result-card__desc { display: none; }
  .job-result-card__readmore { font-size: 12.5px; padding-top: 8px; margin-top: auto; }
  .job-results-pagination { margin-top: 16px; }

  /* job detail */
  .job-detail-hero { padding-bottom: 18px; }
  .job-detail-hero__title { font-size: 21px !important; margin-top: 8px !important; margin-bottom: 6px; }
  .job-detail-hero__meta { font-size: 12.5px; gap: 6px; }
  .job-detail-hero__apply-btn { margin-top: 10px; }
  .job-detail-section { padding: 18px 0 28px; }
  .job-detail-section .row.gy-5 { --bs-gutter-y: 14px; }
  .job-detail-lead { font-size: 14px; margin-bottom: 10px; }
  .job-detail-title-row { display: none; }
  .job-detail-content__inline-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .job-detail-content__inline-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 50px;
    background: #f3eefc; color: #2d2648; font-size: 12.5px; margin: 0 !important; }
  .job-detail-content p, .job-detail-content li { font-size: 13.5px; line-height: 1.6; }
  .job-detail-content ul { padding-left: 18px; margin-bottom: 8px; }
  .job-detail-sidebar { padding: 14px 10px; border-radius: 14px; }
  .job-detail-sidebar__heading { font-size: 16px; margin-bottom: 10px; }
  .job-detail-sidebar__list { gap: 6px; }
  .job-detail-sidebar__list li, .job-detail-sidebar__list li:first-child, .job-detail-sidebar__list li:last-child { padding: 7px 7px; gap: 6px; }
  .job-detail-sidebar__icon { width: 24px !important; height: 24px !important; min-width: 24px; font-size: 11.5px; }
  .job-detail-sidebar__text, .job-detail-sidebar__list li span { font-size: 11.5px; line-height: 1.3; }

  /* sticky "Apply Now" bar on job pages (added by ws-mobile.js) */
  .wsm-applybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 995; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    box-shadow: 0 -10px 24px -12px rgba(45, 20, 90, .45); transform: translateY(110%); transition: transform .25s ease; }
  .wsm-applybar.on { transform: none; }
  .wsm-applybar__t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .wsm-applybar__t b { display: block; font-size: 13.5px; color: #1d1442; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wsm-applybar__t span { font-size: 12px; color: #4d0085; font-weight: 600; }
  .wsm-applybar a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 50px;
    background: linear-gradient(135deg, #3f0080, #5a00a5 55%, #7b2fd6); color: #fff !important; font: 700 14px/1 var(--heading-font, Poppins, sans-serif);
    box-shadow: 0 10px 20px -10px rgba(90, 0, 165, .9); }
  body.wsm-has-applybar .scroll-top { bottom: 78px; }
  body.wsm-has-applybar .footer .copyright { padding-bottom: 76px; }
}

/* ---- Job Search + Job Detail: phone polish (alignment, wording, numbers) ---- */
@media (max-width: 767.98px) {
  /* search box: neat secondary link */
  body:not(.index-page) .hero-section a.cta-strapline { text-decoration: none; color: #5a00a5 !important; font-weight: 700; }
  body:not(.index-page) .hero-section a.cta-strapline::after { content: " \2192"; }

  /* results header: one tidy line */
  .job-results-header { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; }
  .job-results-count { font-size: 12px; color: #6b6785; }

  /* job cards: equal height, aligned rows, salary on one line */
  .job-results-section .row.g-4 > .col-md-6 { display: flex; }
  .job-result-card { width: 100%; }
  .job-result-card__title { min-height: 2.6em; }
  .job-result-card { overflow: hidden; }
  .job-result-card__meta { min-width: 0; }
  .job-result-card__meta li { display: block; max-width: 100%; padding-left: 18px; text-indent: -18px; line-height: 1.35; }
  .job-result-card__meta li i { display: inline-block; width: 14px; margin-right: 4px; text-indent: 0; text-align: center; vertical-align: -1px; }
  .job-result-card__meta li:nth-child(2) { font-size: 11.5px; }
  .job-result-card__readmore { font-size: 0; justify-content: space-between; }
  .job-result-card__readmore::before { content: "View & Apply"; font-size: 12.5px; }
  .job-result-card__readmore i { font-size: 13px; }

  /* single page of results: no empty Prev / Next bar */
  .job-results-pagination:not(:has(.job-pagination-btn:not(.is-disabled))) { display: none; }

  /* job detail hero: clean meta line + matching Apply button */
  .job-detail-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .job-detail-hero__meta-sep { display: none; }
  .job-detail-hero__meta > span { display: inline-flex; align-items: center; gap: 5px; }
  .job-detail-hero__apply-btn { padding-top: 7px; padding-bottom: 7px; font-size: 15px; }

  /* "About the job": small grey label above a bold value */
  .job-detail-sidebar__list li { display: flex; align-items: center; }
  .job-detail-sidebar__text { display: block; font-weight: 700; color: #1d1442; }
  .job-detail-sidebar__text > span { display: block; margin: 0 0 1px !important; font-size: 10px !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .4px; color: #8a86a3 !important; }
  .job-detail-sidebar .job-detail-apply-btn--block { background: linear-gradient(135deg, #3f0080, #5a00a5 55%, #7b2fd6); border: 0;
    border-radius: 50px; box-shadow: 0 12px 24px -12px rgba(90, 0, 165, .9); }
}

/* ---- Job pages: attractive finish on phones (paint only — no size changes) ---- */
@media (max-width: 767.98px) {
  /* job cards: brand accent line, soft lift, press feedback */
  .job-result-card { position: relative; border-color: #ece6f7;
    box-shadow: 0 10px 24px -16px rgba(45, 20, 90, .45), 0 1px 0 rgba(255, 255, 255, .8) inset;
    background: linear-gradient(180deg, #ffffff 0%, #fcfaff 100%); transition: transform .15s ease, box-shadow .2s ease; }
  .job-result-card::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #4d0085, #7b2fd6, #c9cdd8); pointer-events: none; }
  .job-result-card:active { transform: scale(.98); }
  .job-result-card__title a { color: #1d1442; }
  .job-result-card__meta li i { color: #7b2fd6; }
  .job-result-card__readmore { border-top-color: #efe9f8; }
  .job-result-card__readmore::before { background: linear-gradient(90deg, #4d0085, #7b2fd6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .job-results-count strong { color: #5a00a5; }

  /* job detail: gradient icons, soft tiles, glowing chips */
  .job-detail-content__inline-meta span { box-shadow: inset 0 0 0 1px #e6dcf6; }
  .job-detail-content__inline-meta i { color: #7b2fd6; }
  .job-detail-sidebar { box-shadow: 0 14px 30px -18px rgba(45, 20, 90, .45), inset 0 0 0 1px #efe9f8; }
  .job-detail-sidebar__heading { color: #1d1442; }
  .job-detail-sidebar__list li, .job-detail-sidebar__list li:first-child, .job-detail-sidebar__list li:last-child {
    background: linear-gradient(135deg, #f8f5fd 0%, #f2edfb 100%); box-shadow: inset 0 0 0 1px #ebe3f7; }
  .job-detail-sidebar__icon { background: linear-gradient(135deg, #4d0085, #7b2fd6) !important; color: #fff !important;
    box-shadow: 0 6px 12px -6px rgba(90, 0, 165, .7); }
  .job-detail-sidebar__icon i { color: #fff !important; }
  .wsm-applybar { box-shadow: 0 -10px 24px -12px rgba(45, 20, 90, .45), inset 0 1px 0 #efe9f8; }
}

/* ==========================================================================
   APPLY FORM — EXTRA COMPACT PHONE VIEW
   ========================================================================== */
@media (max-width: 767.98px) {
  .apply-page-section { padding: 102px 0 28px; }
  .apply-heading { margin-bottom: 12px; }
  .apply-heading h1 { font-size: 21px; margin-bottom: 2px; }
  .apply-heading__sub { font-size: 14px; margin-bottom: 4px; }
  .apply-heading__divider { margin: 4px auto 6px; }
  .apply-heading__note { font-size: 12px; line-height: 1.45; margin-bottom: 0; }

  .apply-block { padding: 14px 12px; margin-bottom: 10px; }
  .apply-block__header { margin-bottom: 10px; padding-bottom: 8px; gap: 8px; }
  .apply-block__header h2 { font-size: 14px; letter-spacing: .3px; }
  .apply-block__num { width: 24px; height: 24px; font-size: 12px; border-radius: 7px;
    background: linear-gradient(135deg, #3f0080, #7b2fd6) !important; color: #fff !important; }
  .apply-form .row.g-4 { --bs-gutter-x: 8px; --bs-gutter-y: 9px; }
  .apply-label { font-size: 12px; margin-bottom: 4px; }
  .apply-input, .apply-form .form-select { height: 40px; font-size: 13.5px; border-radius: 10px; }
  .apply-textarea { min-height: 70px !important; }
  .apply-radio-group { gap: 14px; }

  /* phone + WhatsApp: country code and number on one line */
  .apply-phone-group { flex-direction: row !important; gap: 6px; }
  .apply-phone-group .apply-input--code { flex: 0 0 112px; width: 112px; margin: 0 !important; }
  .apply-phone-group input { flex: 1 1 auto; min-width: 0; margin: 0 !important; }

  /* documents: 3 small tiles per row */
  .apply-upload-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .apply-upload-card { padding: 10px 6px; border-radius: 12px; }
  .apply-upload-card__title { font-size: 11.5px; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
  .apply-upload-card__icon { font-size: 18px; margin: 2px 0 6px; }
  .apply-upload-card__btn { font-size: 11px; padding: 5px 9px; }
  .apply-upload-card__hint { font-size: 9.5px; line-height: 1.3; margin-top: 5px; }

  .apply-block--declaration { padding-top: 12px; padding-bottom: 12px; }
  .apply-checkbox { font-size: 13px; line-height: 1.45; }
  .apply-submit-btn { padding-top: 13px; padding-bottom: 13px; }
  .apply-submit-note { font-size: 11.5px; margin-top: 8px; }
}
@media (max-width: 767.98px) {
  /* apply form polish: inputs line up even when a label wraps; selects show full text */
  .apply-form .row.g-4 > [class*="col-"] { display: flex; flex-direction: column; justify-content: flex-end; }
  .apply-form .row.g-4 > .col-md-4:has(#location) { flex: 0 0 100%; max-width: 100%; }
  .apply-form .form-select { font-size: 12px; padding-left: 8px; padding-right: 22px; background-position: right 6px center; background-size: 11px 9px; }
  .apply-phone-group .apply-input--code { flex-basis: 122px; width: 122px; }
}

/* ==========================================================================
   REFER A FRIEND — EXTRA COMPACT PHONE VIEW
   ========================================================================== */
@media (max-width: 767.98px) {
  .refer-friend-page section, .refer-friend-page .section { padding: 24px 0; }
  .refer-friend-page .section-title { padding-bottom: 18px; }
  .refer-friend-page .section-title p { font-size: 17px; }
  .refer-friend-page .section-title::after { bottom: 6px; }

  /* header */
  .refer-friend-page .about-page-header { padding: 104px 0 22px; }
  .refer-friend-page .about-page-header h1 { font-size: 19px; }
  .refer-friend-page .about-page-header p { font-size: 13px; line-height: 1.55; }

  /* how it works: small eyebrow + bold title, compact numbered rows */
  .refer-friend-page #how-it-works .row { --bs-gutter-y: 12px; }
  .refer-friend-page #how-it-works .content h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #7b2fd6; margin-bottom: 4px; }
  .refer-friend-page #how-it-works .content h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
  .refer-friend-page #how-it-works .intro-lead { font-size: 13px; line-height: 1.5; font-weight: 600; margin-bottom: 10px; }
  .refer-friend-page .refer-steps-list { gap: 8px; margin: 0; }
  .refer-friend-page .refer-step { display: flex; flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; text-align: left; }
  .refer-friend-page .refer-step > div:last-child { min-width: 0; }
  .refer-friend-page .refer-step__num { flex: 0 0 32px; width: 32px; height: 32px; font-size: 12px; margin: 0;
    background: linear-gradient(135deg, #3f0080, #7b2fd6); color: #fff; }
  .refer-friend-page .refer-step h4 { font-size: 14px; margin: 1px 0 2px; }
  .refer-friend-page .refer-step p { font-size: 12px; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* share + quick CTA side by side */
  .refer-friend-page .refer-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .refer-friend-page .refer-share-box, .refer-friend-page .refer-cta-box { margin: 0; padding: 12px 10px; border-radius: 14px; }
  .refer-friend-page .refer-share-box h4, .refer-friend-page .refer-cta-box h4 { font-size: 13px; margin-bottom: 8px; }
  .refer-friend-page .refer-share-links { gap: 6px; flex-wrap: wrap; }
  .refer-friend-page .refer-share-links a { width: 32px; height: 32px; font-size: 14px; }
  .refer-friend-page .refer-cta-box p { display: none; }
  .refer-friend-page .refer-cta-box .btn-cta { width: 100%; justify-content: center; padding: 8px 6px; font-size: 12px; gap: 4px; }

  /* rewards */
  .refer-friend-page .tier-card { padding: 12px 6px; }
  .refer-friend-page .tier-amount { font-size: 21px; }
  .refer-friend-page .refer-terms-note { font-size: 12px; line-height: 1.5; margin-top: 10px; }

  /* form: name + email side by side */
  .refer-friend-page .refer-form-section { padding: 24px 0; }
  .refer-friend-page .apply-heading { margin-bottom: 10px; }
  .refer-friend-page .apply-heading h1, .refer-friend-page .apply-heading h2 { font-size: 20px !important; margin-bottom: 2px; }
  .refer-friend-page .apply-heading__sub { font-size: 13.5px; }
  .refer-friend-page .apply-block { padding: 14px 12px; margin-bottom: 10px; }
  .refer-friend-page .apply-block__header { margin-bottom: 10px; padding-bottom: 8px; }
  .refer-friend-page .apply-block__header h2 { font-size: 14px; }
  .refer-friend-page .apply-block__num { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; background: linear-gradient(135deg, #3f0080, #7b2fd6) !important; color: #fff !important; }
  .refer-friend-page .refer-form-wrap .row.g-3 { --bs-gutter-x: 8px; --bs-gutter-y: 9px; }
  .refer-friend-page .refer-form-wrap .row.g-3 > .col-md-6 { flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: column; justify-content: flex-end; }
  .refer-friend-page .refer-form-wrap .row.g-3 > .col-md-6:has(.apply-phone-group),
  .refer-friend-page .refer-form-wrap .row.g-3 > .col-md-6:has(select:not(.ws-phone-code)) { flex: 0 0 100%; max-width: 100%; }
  .refer-friend-page .apply-label { font-size: 12px; margin-bottom: 4px; }
  .refer-friend-page .apply-input, .refer-friend-page .refer-form-wrap .form-select { height: 40px; font-size: 13.5px; border-radius: 10px; }
  .refer-friend-page .apply-phone-group { flex-direction: row !important; gap: 6px; }
  .refer-friend-page .apply-phone-group .apply-input--code { flex: 0 0 122px; width: 122px; margin: 0 !important; }
  .refer-friend-page .apply-phone-group input { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
  .refer-friend-page .apply-textarea { min-height: 70px !important; height: 70px; }
  .refer-friend-page .apply-checkbox { font-size: 12.5px; line-height: 1.45; }

  /* bottom CTA: buttons side by side */
  .refer-friend-page .about-cta-section { padding: 24px 0; }
  .refer-friend-page .about-cta-section h2 { font-size: 17px; }
  .refer-friend-page .about-cta-section p { font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
  .refer-friend-page .about-cta-buttons { flex-direction: row; gap: 8px; }
  .refer-friend-page .about-cta-section .btn-cta { flex: 1 1 0; padding: 10px 6px; font-size: 13px; }
}

/* ==========================================================================
   REFER A FRIEND — share box (all screens) + end-of-page placement on phones
   ========================================================================== */
.refer-share-sub { font-size: 13.5px; line-height: 1.5; color: #6b6785; margin: -8px 0 14px; }
.refer-share-links { flex-wrap: wrap; }
.refer-share-links a, .refer-share-links button { width: 44px; height: 44px; border: 0; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 18px; color: #fff; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .55); }
.refer-share-links a:hover, .refer-share-links button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6); }
.refer-share-links .rs-wa { background: #25d366; }
.refer-share-links .rs-fb { background: #1877f2; }
.refer-share-links .rs-tg { background: #229ed9; }
.refer-share-links .rs-in { background: #0a66c2; }
.refer-share-links .rs-em { background: linear-gradient(135deg, #3f0080, #7b2fd6); }
.refer-share-links .rs-copy { background: #eef0f5; color: #4d0085; font-size: 22px; }
.refer-share-links .rs-copy:hover { background: #e3e0ef; color: #4d0085; }
.refer-share-links .rs-copy.copied { background: #059652; color: #fff; }

@media (max-width: 767.98px) {
  /* "Ready to refer" box takes the full row once the share box moves down */
  .refer-friend-page .refer-sidebar { grid-template-columns: 1fr; }
  .refer-friend-page .refer-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
  .refer-friend-page .refer-cta-box h4 { margin: 0; font-size: 14px; }
  .refer-friend-page .refer-cta-box .btn-cta { width: auto; flex: 0 0 auto; padding: 9px 14px; font-size: 12.5px; }

  /* share card at the end of the page */
  .wsm-share-end { padding: 0 0 24px !important; background: transparent; }
  .wsm-share-end .refer-share-box { margin: 0; padding: 16px 14px; text-align: center; border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f3fd 100%); box-shadow: 0 14px 30px -18px rgba(45, 20, 90, .45), inset 0 0 0 1px #ece4f8; }
  .wsm-share-end .refer-share-box h4 { font-size: 16px; margin-bottom: 4px; }
  .wsm-share-end .refer-share-sub { font-size: 12.5px; margin: 0 0 12px; }
  .wsm-share-end .refer-share-links { justify-content: center; gap: 10px; }
  .wsm-share-end .refer-share-links a, .wsm-share-end .refer-share-links button { width: 42px; height: 42px; font-size: 17px; }
  .wsm-share-end .refer-share-links .rs-copy { font-size: 21px; }
}

/* ==========================================================================
   PRIVACY / TERMS / COOKIE — EXTRA COMPACT PHONE VIEW
   ========================================================================== */
@media (max-width: 767.98px) {
  .legal-page-header { padding: 102px 0 18px; }
  .legal-breadcrumb { font-size: 12px; margin-bottom: 6px; }
  .legal-page-header h1 { font-size: 20px; margin-bottom: 4px; }
  .legal-page-header p { font-size: 12.5px; line-height: 1.5; }
  .legal-body-section { padding: 12px 0 22px; }
  .legal-body-section .row.gy-4 { --bs-gutter-y: 10px; }
  .legal-toc { padding: 10px 10px 8px; border-radius: 14px; }
  .legal-toc h5 { font-size: 10.5px; margin-bottom: 6px; }
  .legal-toc a { font-size: 12px; padding: 5px 10px; }
  .legal-content { padding: 4px 12px; border-radius: 14px; }

  /* each section: small icon beside a bold title, short preview */
  .legal-block { display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; padding: 12px 0; margin: 0; }
  .legal-block:last-of-type { border-bottom: 0; }
  .legal-block__icon { width: 30px; height: 30px; font-size: 14px; border-radius: 9px;
    background: linear-gradient(135deg, #3f0080, #7b2fd6); color: #fff; box-shadow: 0 6px 12px -6px rgba(90, 0, 165, .7); }
  .legal-block__icon i { color: #fff !important; }
  .cookie-page .legal-block__icon { background: linear-gradient(135deg, #0b5d4c, #13896f) !important; }
  .legal-block__text { min-width: 0; }
  .legal-block__text h2 { font-size: 15px; line-height: 1.3; margin: 5px 0 6px; }
  .legal-block__text p, .legal-plain-list li { font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
  .legal-block__text.wsm-clip { max-height: 128px; }
  .legal-block__text.wsm-clip::after { height: 52px; }
  .wsm-more { margin: 6px 0 0; padding: 6px 12px; font-size: 12px; grid-column: 2; justify-self: start; }
  .legal-updated { font-size: 12px; margin: 10px 0 6px; }

  /* terms trust strip: 4 in one row */
  .legal-trust-strip { padding: 14px 0; }
  .legal-trust-strip .row { --bs-gutter-x: 6px; --bs-gutter-y: 0; }
  .legal-trust-strip .row > .col-6 { flex: 0 0 25%; max-width: 25%; }
  .trust-strip-item { flex-direction: column; text-align: center; gap: 4px; font-size: 10.5px; line-height: 1.3; }
  .trust-strip-item i { font-size: 18px; }

  /* cookie bar: compact */
  .cookie-consent-bar { padding: 12px 0; }
  .cookie-consent-bar p { font-size: 12.5px; line-height: 1.45; text-align: center; }
  .cookie-consent-bar .gap-3 { gap: 8px !important; }
  .btn-cookie { padding: 8px 16px; font-size: 13px; }
}
@media (max-width: 767.98px) {
  .cookie-page .wsm-more { background: #e6f4f0; color: #0b5d4c; }
}

/* ==========================================================================
   TRACK APPLICATION + APPLICATION SUBMITTED — compact phone view
   ========================================================================== */
@media (max-width: 767.98px) {
  .trk-hero { padding: 100px 0 22px; }
  .trk-hero__sub { font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
  .trk-process { padding: 22px 0 26px; }
  .trk-process__intro { margin-bottom: 16px; }
  .trk-process__title { font-size: 18px; }
  .trk-process__sub { font-size: 13px; }
  .trk-process__grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .trk-process__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trk-process__card { padding: 16px 10px 12px; }
  .trk-process__num { top: -8px; left: -6px; width: 24px; height: 24px; font-size: .72rem; }
  .trk-process__icon { width: 40px; height: 40px; font-size: 18px; margin: 0 auto 8px; }
  .trk-process__card-title { font-size: 13.5px; margin-bottom: 4px; }
  .trk-process__card-desc { font-size: 11.5px; line-height: 1.45; }

  .trk-body { padding: 18px 0 26px; }
  .trk-journey-card, .trk-info-card { padding: 16px 14px; }
  .trk-info-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .ws-success-section { padding: 96px 12px 26px; min-height: 0; }
  .ws-success-card { padding: 22px 16px; }
  .ws-success-icon { width: 60px; height: 60px; font-size: 26px; margin-bottom: 12px; }
  .ws-success-title { font-size: 22px; }
  .ws-success-card p { font-size: 13.5px; }
  .ws-ref-box { padding: 14px; margin: 16px 0; }
  .ws-ref-number { font-size: 1.5rem; }
  .ws-step-box { padding: 12px 10px; }
  .ws-step-title { font-size: 13px; }
  .ws-step-desc { font-size: 11.5px; }
  .ws-success-sub { font-size: 13.5px; }
  .ws-success-note { font-size: 12px; }
}

/* Footer logo block at the bottom on phones */
@media (max-width: 767.98px) {
  .footer .footer-about.wsm-foot-logo { width: 100%; max-width: 100%; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; margin: 4px 0 0; padding: 14px 0 12px; border-top: 1px solid #ece8f4; }
  .footer .footer-about.wsm-foot-logo .footer-logo { width: 110px; }
  .footer .footer-about.wsm-foot-logo .footer-tagline { font-size: 13px; margin: 0; }
}

/* ==========================================================================
   MOBILE MENU (below 1200px, where the ☰ button shows)
   Brand-styled toggle, icon rows, current page highlighted, Track Application
   as a feature card, Jobs list that actually opens. Desktop menu unchanged.
   ========================================================================== */
@media (min-width: 1200px) {
  .wsm-nav-ic, .wsm-nav-t, .wsm-nav-head, .wsm-nav-help { display: none !important; }
  .navmenu > ul > li.wsm-nav-track > a { padding-right: 0; }
  .navmenu > ul > li.wsm-nav-track > a::after { right: 0; }
  .navmenu > ul > li > a.wsm-current { color: var(--nav-hover-color, #5a00a5); }
  .navmenu > ul > li > a.wsm-current::after { transform: scaleX(1); }
}
@media (max-width: 1199.98px) {
  /* ☰ button */
  .mobile-nav-toggle { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; margin-right: 0;
    border-radius: 12px; font-size: 24px; color: #4d0085; background: linear-gradient(135deg, #f7f3fd, #ece4f8);
    box-shadow: inset 0 0 0 1px #e1d6f3, 0 6px 14px -8px rgba(77, 0, 133, .5); transition: transform .15s ease, background .2s; }
  .mobile-nav-toggle:active { transform: scale(.92); }
  .mobile-nav-active .mobile-nav-toggle { position: fixed; top: 18px; right: 16px; width: 40px; height: 40px; font-size: 26px;
    color: #4d0085; background: #fff; border-radius: 50%; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }

  /* overlay + panel */
  .mobile-nav-active .navmenu { background: rgba(22, 6, 48, .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .mobile-nav-active .navmenu > ul { animation: wsmNavIn .25s ease both; }
  @keyframes wsmNavIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
  .navmenu > ul { inset: 70px 12px auto 12px; max-height: calc(100vh - 84px); padding: 10px; border-radius: 20px;
    background: #fff; box-shadow: 0 30px 60px -20px rgba(20, 0, 50, .6); }

  .wsm-nav-head { padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #f0ebf8; }
  .wsm-nav-head b { display: block; font: 700 11px/1 var(--heading-font, Poppins, sans-serif); letter-spacing: 1.2px; text-transform: uppercase; color: #7b2fd6; }
  .wsm-nav-head span { display: block; margin-top: 4px; font-size: 13px; color: #6b6785; }

  /* rows */
  .navmenu > ul > li > a, .navmenu > ul > li > a:focus { justify-content: flex-start; gap: 12px; padding: 9px 10px; margin: 2px 0;
    border-radius: 14px; font-size: 15.5px; font-weight: 600; color: #1d1442; }
  .navmenu > ul > li > a:active { background: #f6f2fc; }
  .wsm-nav-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: #f3eefc; color: #5a00a5; transition: background .2s, color .2s; }
  .navmenu a .wsm-nav-ic i { width: auto; height: auto; margin: 0; font-size: 16px; line-height: 1; background: none !important;
    color: inherit !important; transform: none !important; border-radius: 0; }
  .navmenu > ul > li > a .toggle-dropdown { margin-left: auto; }
  .navmenu > ul > li > a.wsm-current { background: linear-gradient(90deg, #f3ecfd, #faf7fe); color: #4d0085; box-shadow: inset 3px 0 0 #5a00a5; }
  .navmenu > ul > li > a.wsm-current .wsm-nav-ic { background: linear-gradient(135deg, #3f0080, #7b2fd6); color: #fff; }
  .navmenu > ul > li > a.active:not(.wsm-current) { color: #1d1442; }

  /* Categories list */
  .navmenu .listing-dropdown ul { margin: 4px 0 6px 46px; padding: 6px; border: 0; border-radius: 12px; background: #f8f6fc; }
  .navmenu .listing-dropdown ul li a { padding: 8px 10px; font-size: 14px; font-weight: 500; border-radius: 10px; white-space: normal; }

  /* Jobs list (was invisible on phones) */
  .navmenu .jobs-mega-menu { position: static; transform: none; width: auto; display: none; visibility: visible; opacity: 1;
    margin: 4px 0 6px 46px; padding: 8px; border: 0; border-radius: 12px; background: #f8f6fc; box-shadow: none; }
  .navmenu .jobs-mega-menu.dropdown-active { display: block; }
  .navmenu .jobs-menu-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .navmenu .jobs-menu-header h4 { font-size: 13px; margin: 0; }
  .navmenu .jobs-menu-header p { display: none; }
  .navmenu .jobs-menu-header .all-jobs-btn { padding: 6px 10px; font-size: 12px; border-radius: 50px; white-space: nowrap; }
  .navmenu .jobs-mega-menu .container-fluid { padding: 0; }
  .navmenu .jobs-mega-menu .row { margin: 0; }
  .navmenu .jobs-mega-menu .row > div { padding: 0; margin-bottom: 4px !important; }
  .navmenu .jobs-mega-menu .mega-job-item { display: block; padding: 8px 10px; border-radius: 10px; background: #fff; white-space: normal; }
  .navmenu .jobs-mega-menu .job-title { font-size: 13.5px; margin: 0 0 2px; color: #1d1442; }
  .navmenu .jobs-mega-menu .job-meta, .navmenu .jobs-mega-menu .job-footer { font-size: 11.5px; display: flex; gap: 8px; flex-wrap: wrap; color: #6b6785; }
  .navmenu .jobs-mega-menu .job-meta i { width: auto; height: auto; margin: 0 3px 0 0; font-size: 11px; background: none; display: inline; }
  .navmenu .jobs-mega-menu .job-salary { color: #5a00a5; font-weight: 700; }

  /* Track Application: feature card */
  .navmenu > ul > li.wsm-nav-track { margin-top: 8px; }
  .wsm-nav-orig { display: none; }
  .navmenu > ul > li.wsm-nav-track > a, .navmenu > ul > li.wsm-nav-track > a:focus { position: relative; overflow: hidden; padding: 12px; color: #fff;
    background: radial-gradient(220px 120px at 100% 0, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(135deg, #3f0080, #5a00a5 55%, #7b2fd6);
    box-shadow: 0 14px 26px -14px rgba(77, 0, 133, .9); white-space: normal; }
  .navmenu > ul > li.wsm-nav-track > a .wsm-nav-ic { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
  .navmenu > ul > li.wsm-nav-track > a .wsm-nav-t { display: flex; flex-direction: column; line-height: 1.2; }
  .wsm-nav-sub { font-size: 12px; font-weight: 500; opacity: .85; margin-top: 3px; }
  .navmenu > ul > li.wsm-nav-track > a::after { content: "\2192"; margin-left: auto; font-size: 18px; }
  .navmenu > ul > li.wsm-nav-track > a.wsm-current { box-shadow: 0 14px 26px -14px rgba(77, 0, 133, .9), inset 0 0 0 2px rgba(255, 255, 255, .5); }

  .wsm-nav-help { padding: 10px 10px 4px; font-size: 12.5px; color: #6b6785; text-align: center; }
  .wsm-nav-help a, .wsm-nav-help a:focus { display: inline; padding: 0; font-size: 12.5px; font-weight: 600; color: #5a00a5; }
}
@media (max-width: 1199.98px) {
  .navmenu .wsm-nav-help a, .navmenu .wsm-nav-help a:focus { display: inline; padding: 0; margin: 0; font-size: 12.5px; font-weight: 600; color: #5a00a5; white-space: normal; }
  .navmenu .jobs-menu-header h4 { display: none; }
  .navmenu .jobs-menu-header .all-jobs-btn { flex: 1 1 auto; justify-content: center; display: flex; padding: 8px 10px; font-size: 12.5px; }
  .navmenu .jobs-mega-menu .job-meta span { padding: 0 !important; background: none !important; border: 0 !important; font-size: 11.5px; }
  .navmenu .jobs-mega-menu .job-meta { margin: 0 0 2px; gap: 10px; }
  .navmenu .jobs-mega-menu .job-footer { margin: 0; padding: 0; border: 0; }
  .navmenu .jobs-mega-menu .job-salary { font-size: 12.5px !important; }
}
@media (max-width: 767.98px) {
  /* room for the "… Read more" hint so it never sits on top of the text */
  .employer-page .journey-step[data-wsfx] { padding-bottom: 26px; }
  .employer-page .journey-step[data-wsfx]::after { left: 10px; bottom: 7px; }
}

/* ==========================================================================
   App-style header on phones & tablets (like Google Play):
   menu on the left · logo in the centre · small login icon on the right
   ========================================================================== */
@media (max-width: 1199.98px) {
  .header { padding: 8px 0; }
  .header > .container-xl { display: grid !important; grid-template-columns: 48px 1fr 48px; align-items: center; column-gap: 8px; }
  .header .navmenu { order: initial; grid-column: 1; grid-row: 1; justify-self: start; }
  .header .logo { order: initial; grid-column: 2; grid-row: 1; justify-self: center; margin: 0 !important; }
  .header .logo img { max-height: 46px; margin: 0; }
  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    order: initial; grid-column: 3; grid-row: 1; justify-self: end;
    width: 42px; height: 42px; padding: 0 !important; margin: 0 !important; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0 !important; line-height: 0; gap: 0;
    background: #f3edfc; color: #5a00a5; box-shadow: inset 0 0 0 1px #e4d8fb;
  }
  .header .btn-getstarted i { font-size: 21px !important; margin: 0 !important; line-height: 1; }
  .header .btn-getstarted:hover, .header .btn-getstarted:focus:hover { background: #5a00a5; color: #fff; transform: none; }
  .header .mobile-nav-toggle { margin: 0 !important; }
  .mobile-nav-active .header .navmenu { justify-self: stretch; align-self: stretch; }
  .mobile-nav-active .mobile-nav-toggle { right: auto; left: 16px; }
}