/* ==========================================================================
   GOGPL — WorkersFromIndia.com — Shared stylesheet
   Module 1: Design tokens, base styles, site-header, site-footer
   All colours/spacing/type below come from the :root custom properties.
   No hardcoded hex values appear in any component rule past this point.
   ========================================================================== */

/* ---- Design tokens (confirmed from Phase 1 audit, canonicalised on the
   index.html palette per Phase 2 §2.3 — privacy-policy.html's variant
   navy/gold pair is retired in favour of this single set) ---- */
:root{
  --navy: #17356B;
  --navy-dark: #0E2447;
  --navy-mid: #24559B;
  --navy-mist: #EAF0F9;
  --gold: #E08A1A;
  --gold-dark: #A05E0C;
  --gold-soft: #F6D9A8;
  --ink: #182726;
  --slate: #5A6B6A;
  --line: #E3ECEA;
  --paper: #FFFFFF;
  --mist: #F4F8F7;
  --whatsapp-green: #25D366; /* floating button only — sole exception to single-CTA-colour rule */

  /* Third-party platform brand colours — used ONLY for social-icon hover/focus
     states per spec ("hover/focus = the platform's own brand colour"). These
     are not part of GOGPL's palette; named here so nothing is a bare hex
     inside a component rule. */
  --brand-linkedin: #0A66C2;   --brand-linkedin-bg: #E8F2FC;
  --brand-facebook: #1877F2;   --brand-facebook-bg: #E9F1FE;
  --brand-instagram: #E1306C;  --brand-instagram-bg: #FDEAF1;
  --brand-x: #000000;          --brand-x-bg: #EEEEEE;
  --brand-whatsapp-bg: #E7F9EF;
  --error: #D64533; /* form validation state, matches the value already live on the current site */


  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: clamp(32px,5vw,52px);
  --fs-h2: clamp(25px,3.3vw,34px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14.5px;
  --fs-eyebrow: 12px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --maxw: 1200px;
  --radius-btn: 3px;
  --radius-card: 14px;

  /* CTA colour: single sitewide primary is gold/saffron (implementation choice —
     flagged in Phase 2, not yet explicitly confirmed by client; navy is secondary/
     structural). See module report for reasoning and how to flip this if declined. */
}

/* ---- Reset / base ---- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper); /* white background, fixed sitewide, no dark mode */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-serif); font-weight: 700; color: var(--navy-dark); line-height: 1.14; margin: 0; }
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
p{ margin: 0; }
a{ color: var(--navy-mid); text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }
.band-mist{ background: var(--mist); } /* light-grey section separation, per fixed constraint */

/* Focus states — every interactive element keeps a visible focus ring;
   default outline is replaced, never just removed. */
:focus{ outline: none; }
:focus-visible{
  outline: 3px solid var(--navy-mid);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Screen-reader-only text — used for icon-only link fallbacks */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus{
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; padding: 10px 16px; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
  background: #17356B; color: #fff; border-radius: 8px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Buttons — one CTA colour sitewide (gold), WhatsApp green is the sole exception ---- */
.btn{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
  border: 1px solid transparent;
}
.btn-primary{ background: var(--gold); color: var(--navy-dark); } /* navy-dark text, not white — see contrast note in report */
.btn-primary:hover, .btn-primary:focus-visible{ background: var(--gold-dark); }
.btn-secondary{ background: var(--navy); color: var(--paper); }
.btn-secondary:hover, .btn-secondary:focus-visible{ background: var(--navy-dark); }
.btn-ghost{ background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover, .btn-ghost:focus-visible{ background: var(--navy-mist); }

/* ==========================================================================
   site-header
   ========================================================================== */
.site-header{ background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.header-inner{ display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; gap: 24px; }

.logo{ display: flex; align-items: center; gap: 12px; flex: none; }
.logo img{ width: 72px; height: 71px; mix-blend-mode: multiply; } /* dedicated header-2x.png asset, sized up from the reused 56x55 app-icon crop */
.logo-text{ font-family: var(--font-serif); color: var(--navy-dark); font-size: 19px; line-height: 1.1; }
.logo-text b{ display: block; color: var(--navy-dark); }
.logo-text small{ display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); margin-top: 3px; }

.menu-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; padding: 0;
}
.menu-toggle span{ width: 22px; height: 2px; background: var(--navy); display: block; }

.site-nav ul{ display: flex; align-items: center; gap: 22px; }
.navlink{ color: var(--ink); font-size: var(--fs-small); }
.navlink:hover, .navlink:focus-visible{ color: var(--navy-mid); }
.site-nav .btn{ margin-left: 4px; }

@media (max-width: 900px){
  .site-nav ul{ gap: 14px; }
}

/* ==========================================================================
   licence-badge
   ========================================================================== */
.licence-badge{ font-size: var(--fs-small); color: var(--ink); }
.licence-badge b{ color: var(--navy-dark); }
.licence-badge .verify-link{ color: var(--navy-mid); font-weight: 600; text-decoration: underline; }
.licence-badge .verify-link:hover, .licence-badge .verify-link:focus-visible{ color: var(--navy-dark); }

/* ==========================================================================
   social-bar (footer / contact / about placements share this)
   ========================================================================== */
.social-bar{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.social-bar a{
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--navy); transition: background-color .18s, color .18s, border-color .18s;
}
.social-bar svg{ width: 20px; height: 20px; }
.social-bar img{ width: 20px; height: 20px; object-fit: contain; display: block; border-radius: 5px; }
.social-bar img{ width: 20px; height: 20px; object-fit: contain; display: block; border-radius: 5px; }
.social-bar a:hover, .social-bar a:focus-visible{ background: var(--navy-mist); }
/* Platform hover colour, per spec — background circle + brand colour on hover/focus only */
.social-bar a.ic-linkedin:hover, .social-bar a.ic-linkedin:focus-visible{ color: var(--brand-linkedin); background: var(--brand-linkedin-bg); }
.social-bar a.ic-facebook:hover, .social-bar a.ic-facebook:focus-visible{ color: var(--brand-facebook); background: var(--brand-facebook-bg); }
.social-bar a.ic-instagram:hover, .social-bar a.ic-instagram:focus-visible{ color: var(--brand-instagram); background: var(--brand-instagram-bg); }
.social-bar a.ic-x:hover, .social-bar a.ic-x:focus-visible{ color: var(--brand-x); background: var(--brand-x-bg); }
.social-bar a.ic-whatsapp:hover, .social-bar a.ic-whatsapp:focus-visible{ color: var(--whatsapp-green); background: var(--brand-whatsapp-bg); }
.social-bar a.ic-website:hover, .social-bar a.ic-website:focus-visible{ color: var(--navy-dark); background: var(--navy-mist); }

/* Expanded variant — Contact page: bigger, handle text visible */
.social-bar.expanded a{ width: auto; height: auto; border-radius: 999px; padding: 10px 18px; gap: 10px; display: inline-flex; }
.social-bar.expanded svg{ width: 22px; height: 22px; }
.social-bar.expanded .handle{ font-size: var(--fs-small); font-weight: 600; }

/* ==========================================================================
   whatsapp-float — collision strategy per Phase 2 §2.5, verified at
   360 / 768 / 1024 / 1440px (see module report for the actual measurements)
   ========================================================================== */
.whatsapp-float{
  position: fixed;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--whatsapp-green); /* sole exception to single-CTA-colour rule */
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  z-index: 45;
  right: 16px; bottom: 88px; /* mobile: 70px sticky-cta bar height + 18px clearance, see Module 17 note below */
}
.whatsapp-float svg{ width: 28px; height: 28px; }
.whatsapp-float:hover, .whatsapp-float:focus-visible{ filter: brightness(1.08); }

@media (min-width: 1024px){
  .whatsapp-float{ width: 56px; height: 56px; right: 32px; bottom: 32px; }
  .whatsapp-float svg{ width: 28px; height: 28px; }
}

/* ==========================================================================
   site-footer
   ========================================================================== */
.site-footer{ background: var(--mist); border-top: 1px solid var(--line); padding: var(--space-8) 0 var(--space-6); }
.footer-top{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
.footer-brand p{ margin-top: var(--space-3); font-size: var(--fs-small); color: var(--slate); line-height: 1.6; }
.footer-brand img{ width: 64px; height: 63px; mix-blend-mode: multiply; }
.footer-col h4{ font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--navy-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-3); }
.footer-col a{ display: block; font-size: var(--fs-small); color: var(--ink); padding: 4px 0; }
.footer-col a:hover, .footer-col a:focus-visible{ color: var(--navy-mid); }
.footer-connect .social-bar{ margin-top: 4px; }

.disc{ font-size: 12.5px; color: var(--slate); line-height: 1.6; border-top: 1px solid var(--line); padding-top: var(--space-5); }
.foot-bottom{
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font-size: 12.5px; color: var(--slate); margin-top: var(--space-4);
}
.foot-bottom b{ color: var(--navy-dark); }

@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-top{ grid-template-columns: 1fr; }
  .foot-bottom{ flex-direction: column; }
}

/* ==========================================================================
   MODULE 2 additions — Home page components
   ========================================================================== */

.eyebrow{ font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
.sec-head{ max-width: 640px; }
.sec-head h2{ margin-top: var(--space-3); }
.sec-head p{ color: var(--slate); margin-top: 13px; font-size: var(--fs-body); }
.sec-head.center{ margin: 0 auto; text-align: center; }
section{ padding: var(--space-8) 0; }
@media (max-width: 640px){ section{ padding: var(--space-7) 0; } }

/* ---- hero ---- */
.hero{ padding-top: var(--space-8); }
.hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: stretch; }
.hero h1{ margin: 16px 0 0; letter-spacing: -.01em; }
.hero .lead{ font-size: clamp(16px,1.9vw,18px); color: var(--slate); margin: 20px 0 0; max-width: 540px; line-height: 1.65; }
.hero-cta{ display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-art{
  background: var(--navy-mist); border: 1px solid var(--line); border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.08);
  border-top: 4px solid var(--gold);
}
.hero-art h3{ font-size: var(--fs-body); font-family: var(--font-sans); font-weight: 700; color: var(--navy-dark); margin-bottom: var(--space-4); }

/* ---- corridor pills — real flag icon + name, neutral chip to match the
   site's existing .country-chips / .trust-bar .chip pattern (white bg,
   line border) rather than per-country colour, which read as off-brand. ---- */
.corridor-pills{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.corridor-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--paper); border: 1px solid var(--line); color: var(--navy-dark); }
.corridor-pill .flag{ flex: none; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); display: block; }
.corridor-pill .flag svg{ width: 100%; height: 100%; display: block; }

/* ---- credential cards — MEA licence / DUNS / presence, real data only ---- */
.cred-list{ display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: var(--space-5); }
.cred-card{ display: flex; gap: 13px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 13px 15px; }
.cred-card.accent-gold{ border-left-color: var(--gold); }
.cred-card.accent-navy{ border-left-color: var(--navy); }
.cred-ic{ flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--mist); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.cred-ic svg{ width: 17px; height: 17px; }
.cred-eyebrow{ font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.cred-card.accent-gold .cred-eyebrow{ color: var(--gold-dark); }
.cred-card.accent-navy .cred-eyebrow{ color: var(--navy); }
.cred-value{ font-family: var(--font-serif); font-size: 15.5px; color: var(--navy-dark); font-weight: 700; margin-top: 2px; }
.cred-value a{ color: inherit; text-decoration: none; }
.cred-value a:hover{ text-decoration: underline; }
.cred-desc{ font-size: 12px; color: var(--slate); margin-top: 2px; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; gap: 34px; } }

/* ---- trust-bar ----
   Light-grey band, not a dark section — originally drafted with a solid
   navy-mid background (same "white background only" conflict as the
   cta-band below), caught in the same self-review pass, corrected before
   shipping. */
.trust-bar{ padding: var(--space-5) 0; }
.trust-bar .container{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 40px; }
.trust-bar .chip{ font-size: var(--fs-small); color: var(--ink); }
.trust-bar .chip b{ color: var(--navy-dark); }
.trust-bar-band{ background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .verify-link{ color: var(--navy-mid); font-weight: 600; }
.trust-bar .verify-link:hover, .trust-bar .verify-link:focus-visible{ color: var(--navy-dark); }


/* ---- benefit-card / category-card / market-block shared grid rules ---- */
.card-grid{ display: grid; gap: var(--space-5); margin-top: var(--space-6); align-items: stretch; }
.card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }

/* 5-item case (e.g. About & Compliance "Our commitments"): a plain 3-col grid
   leaves the trailing row's 2 cards pinned left with dead space on the right.
   Switch to a 6-unit track and centre that row instead of left-aligning it. */
.card-grid.cols-3:has(> .resp-card:nth-child(5):last-child){ grid-template-columns: repeat(6, 1fr); }
.card-grid.cols-3:has(> .resp-card:nth-child(5):last-child) > .resp-card{ grid-column: span 2; }
.card-grid.cols-3:has(> .resp-card:nth-child(5):last-child) > .resp-card:nth-child(4){ grid-column: 2 / span 2; }
.card-grid.cols-3:has(> .resp-card:nth-child(5):last-child) > .resp-card:nth-child(5){ grid-column: 4 / span 2; }
@media (max-width: 900px){ .card-grid.cols-3:has(> .resp-card:nth-child(5):last-child){ grid-template-columns: 1fr 1fr; } .card-grid.cols-3:has(> .resp-card:nth-child(5):last-child) > .resp-card{ grid-column: auto; } }
@media (max-width: 640px){ .card-grid.cols-3:has(> .resp-card:nth-child(5):last-child){ grid-template-columns: 1fr; } }
/* Long unbreakable tokens (e.g. the RC number B-1873/GUJ/COM/100/5/10332/2023) set the min-content width of a 1fr card and pushed /about-and-compliance 14px past a 320px viewport; allow them to wrap, as .cred-strip / .country-facts already do. */
.resp-card p, .resp-card li{ overflow-wrap: anywhere; }
@media (max-width: 900px){ .card-grid.cols-3, .card-grid.cols-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .card-grid.cols-3, .card-grid.cols-4{ grid-template-columns: 1fr; } }

.benefit-card, .category-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.card-icon{
  width: 44px; height: 44px; border-radius: 10px; background: var(--navy-mist);
  color: var(--navy); display: flex; align-items: center; justify-content: center; flex: none;
}
.card-icon svg{ width: 22px; height: 22px; }
.benefit-card h3, .category-card h3{ font-size: 17px; }
.benefit-card p, .category-card p{ font-size: var(--fs-small); color: var(--slate); line-height: 1.6; }
.category-card .roles{ font-size: 13px; color: var(--slate); }
.category-card a.card-link, .resp-card a.card-link{ margin-top: auto; font-weight: 600; color: var(--navy-mid); font-size: var(--fs-small); }
.category-card a.card-link:hover, .category-card a.card-link:focus-visible, .resp-card a.card-link:hover, .resp-card a.card-link:focus-visible{ color: var(--navy-dark); }

/* ---- market-block ---- */
.markets-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); align-items: stretch; }
.market-block{
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-6);
  display: flex; flex-direction: column; /* so the CTA button below can be pinned to the bottom */
}
.market-block h3{ font-size: 22px; }
.market-block ul{ margin-top: var(--space-4); display: grid; gap: 6px; }
.market-block li{ font-size: var(--fs-small); color: var(--ink); padding-left: 18px; position: relative; }
.market-block li::before{ content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.market-block .btn{ margin-top: auto; align-self: flex-start; } /* pinned to the bottom regardless of list length, so every card in a row lines up */
.market-block ul{ margin-bottom: var(--space-5); } /* guarantees breathing room above the button even when auto-margin collapses to zero */

/* ---- process-stepper ---- */
.stepper{ display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.step{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
.step .fnum{
  width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy-dark);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3);
}
.step h3{ font-size: 15px; }
.step p{ font-size: 13.5px; color: var(--slate); margin-top: 6px; line-height: 1.55; }
@media (max-width: 900px){ .stepper{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px){ .stepper{ grid-template-columns: 1fr; } }

/* ---- cta-band ---- */
/* Light-grey band, not a dark section — "white background only" is a fixed,
   standing rule; this was originally drafted with a solid navy background,
   caught in self-review, and corrected before shipping. */
.cta-band{ background: var(--mist); text-align: center; padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.cta-band p{ color: var(--slate); margin-top: var(--space-3); max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-band .cta-buttons{ display: flex; gap: 14px; justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ==========================================================================
   enquiry-form-section — wraps the EXISTING verbatim Zoho form.
   Every rule below is container/label/input SKIN only (spacing, colour,
   border, radius, focus ring). None changes name/type/required/value or
   the .cform.active show/hide logic driven by scripts.js. The CSS `order`
   property is intentionally never used anywhere in this block.
   ========================================================================== */
.eq-layout{ display: grid; grid-template-columns: 1.3fr .8fr; gap: var(--space-6); margin-top: var(--space-6); }
.form-tabs{ display: flex; gap: 4px; }
.ftab{
  flex: 1; padding: 13px; border: 1px solid var(--line); background: var(--mist); color: var(--slate);
  font-weight: 600; font-size: var(--fs-small); border-radius: var(--radius-btn) var(--radius-btn) 0 0; cursor: pointer;
}
.ftab.active{ background: var(--paper); color: var(--navy-dark); border-bottom-color: var(--paper); }
.form-card{ background: var(--paper); border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius-card) var(--radius-card); }

.cform{ display: none; padding: var(--space-5) var(--space-5) 26px; }
.cform.active{ display: block; }
.cform label{ display: block; font-size: 12.5px; font-weight: 600; color: var(--navy-dark); margin-bottom: 5px; }
.cform label b{ color: var(--gold-dark); font-weight: 700; }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform input[type=url], .cform input[type=number], .cform input[type=month], .cform textarea, .cform select{
  width: 100%; font-family: var(--font-sans); font-size: 14.5px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.cform input:focus, .cform textarea:focus, .cform select:focus{
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(23,53,107,.12); background: var(--paper);
}
.cform textarea{ resize: vertical; min-height: 96px; }
.cform input.invalid, .cform textarea.invalid, .cform select.invalid{ border-color: var(--error); box-shadow: 0 0 0 3px rgba(214,69,51,.12); }
.frow{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fgrp{ margin-top: var(--space-4); }
.frow .fgrp{ margin-top: 0; }
@media (max-width: 640px){ .frow{ grid-template-columns: 1fr; gap: 0; } .frow .fgrp{ margin-top: var(--space-4); } }

/* Honeypot: visually and audibly hidden, purely positional — does not
   touch name/type/required/value, so submission behaviour is unaffected */
.hpf{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent{ display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-4); font-size: 13px; color: var(--slate); line-height: 1.5; }
.consent input{ margin-top: 3px; flex: none; }
.consent a{ color: var(--navy-mid); text-decoration: underline; }
.cbtn{
  margin-top: var(--space-5); width: 100%; background: var(--gold); color: var(--navy-dark);
  border: none; font-weight: 700; font-size: 15px; padding: 13px; border-radius: var(--radius-btn); cursor: pointer;
}
.cbtn:hover, .cbtn:focus-visible{ background: var(--gold-dark); }
.cmsg{ margin-top: var(--space-3); font-size: 13px; color: var(--error); min-height: 1em; }

.cform.submitted .frow, .cform.submitted .fgrp, .cform.submitted .consent, .cform.submitted .cbtn, .cform.submitted .hpf{ display: none; }
.form-success{ display: none; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-5); background: var(--mist); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius-card); }
.form-success.show{ display: flex; }
.form-success svg{ flex: none; width: 26px; height: 26px; color: var(--gold-dark); margin-top: 2px; }
.form-success h3{ margin: 0 0 4px; font-size: 16px; color: var(--navy-dark); }
.form-success p{ margin: 0; font-size: 14px; color: var(--slate); line-height: 1.5; }

/* ---- eq-side: direct-contact aside next to the form ---- */
.eq-side{ background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5); align-self: start; }
.eq-side h3{ font-size: 17px; margin-bottom: var(--space-4); }
.cline{ display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--space-4); }
.cline .ic{ width: 32px; height: 32px; border-radius: 50%; background: var(--navy-mist); color: var(--navy); display: flex; align-items: center; justify-content: center; flex: none; }
.cline .ic svg{ width: 16px; height: 16px; }
.cline .ct b{ display: block; font-size: 13px; color: var(--navy-dark); }
.cline .ct a, .cline .ct span{ font-size: var(--fs-small); color: var(--ink); }
.eq-note{ margin-top: var(--space-4); font-size: 13px; color: var(--slate); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-3); }
@media (max-width: 820px){ .eq-layout{ grid-template-columns: 1fr; gap: var(--space-5); } }

/* ==========================================================================
   MODULE 3 additions — breadcrumbs, inner-page header
   ========================================================================== */
.breadcrumbs{ padding: var(--space-4) 0 0; }
.breadcrumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--slate); }
.breadcrumbs a{ color: var(--slate); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible{ color: var(--navy-mid); }
.breadcrumbs li:not(:last-child)::after{ content: '/'; margin-left: 6px; color: var(--line); }
.breadcrumbs li[aria-current="page"]{ color: var(--navy-dark); font-weight: 600; }

.page-intro{ padding: var(--space-6) 0 0; }
.page-intro h1{ margin-top: var(--space-3); }
.page-intro .lead{ font-size: 17px; color: var(--slate); margin-top: var(--space-4); max-width: 640px; line-height: 1.65; }

/* ==========================================================================
   MODULE 4 additions — Contact page
   ========================================================================== */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.contact-info{ display: grid; gap: var(--space-4); }
.contact-cta-card{
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
}
.contact-cta-card p{ color: var(--slate); font-size: var(--fs-small); }
.contact-cta-card .btn{ margin-top: auto; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   MODULE 5 additions — market-detail page (responsibility split, country
   chip list, disclaimer callout)
   ========================================================================== */
.resp-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); align-items: stretch; }
.resp-card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5);
  display: flex; flex-direction: column;
}
.resp-card h3{ font-size: 17px; margin-bottom: var(--space-4); }
.resp-card ul{ display: grid; gap: 8px; margin-bottom: var(--space-4); }
.resp-card li{ font-size: var(--fs-small); color: var(--ink); padding-left: 18px; position: relative; }
.resp-card li::before{ content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.resp-card .btn{ margin-top: auto; align-self: flex-start; }
.resp-card .card-link{ margin-top: auto; align-self: flex-start; }
.resp-card .note{ font-size: 12.5px; color: var(--slate); margin-top: var(--space-3); }
@media (max-width: 820px){ .resp-grid{ grid-template-columns: 1fr; } }

.md-quote{ background: var(--paper); border: 1px solid var(--line); padding: var(--space-7) var(--space-6); margin-top: var(--space-7); }
.md-quote blockquote{ margin: 0; }
.md-quote blockquote p{ font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.65; color: var(--navy-dark); margin: 0 0 var(--space-4); }
.md-quote blockquote p:last-child{ margin-bottom: 0; }
.md-quote-by{ margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--slate); }
.md-quote-by b{ display: block; color: var(--navy-dark); font-family: var(--font-serif); font-size: 16px; margin-bottom: 2px; }
@media (max-width: 640px){ .md-quote{ padding: var(--space-6) var(--space-5); } .md-quote blockquote p{ font-size: 16.5px; } }

.country-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.country-chips span{ background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: var(--fs-small); color: var(--navy-dark); font-weight: 600; }

.disclaimer-callout{ background: var(--mist); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: var(--space-4) var(--space-5); font-size: 13px; color: var(--slate); line-height: 1.6; margin-top: var(--space-7); }

/* ==========================================================================
   MODULE 9 additions — legal-page typography (Privacy Policy, Terms of Use,
   Ethical Recruitment Policy, Disclaimer). Replaces the old privacy-policy
   page's own bespoke #0B1E3F/#C9A961 token pair entirely — canonicalised
   onto the site's single navy/gold set per the Phase 2 §2.3 decision.
   ========================================================================== */
.legal-meta{ color: var(--slate); font-size: 13.5px; margin-top: var(--space-3); }
.legal-body{ padding: var(--space-7) 0 var(--space-9); font-size: 15.5px; line-height: 1.68; }
.legal-body p{ margin: 9px 0; }
.legal-body ul, .legal-body ol.list{ margin: 9px 0 9px 22px; }
.legal-body li{ margin: 5px 0; }
.legal-body a{ color: var(--navy-mid); }

.legal-toc{ background: var(--mist); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-5); margin: var(--space-6) 0; }
.legal-toc h2{ font-family: var(--font-sans); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--slate); margin-bottom: 10px; }
.legal-toc ol{ margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; font-size: 14px; }
.legal-toc li{ margin-bottom: 5px; break-inside: avoid; }
@media (max-width: 640px){ .legal-toc ol{ columns: 1; } }

.legal-body h2.sec{ font-family: var(--font-serif); font-size: 20px; color: var(--navy-dark); margin: 30px 0 10px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.legal-body h2.sec:first-of-type{ border-top: none; margin-top: 0; }
.legal-body h3{ font-size: 15.5px; color: var(--navy-dark); margin: 16px 0 5px; font-family: var(--font-sans); }

.legal-body .card{ background: var(--mist); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin: 14px 0; }
.legal-body .card p{ margin: 5px 0; }

.legal-body table{ width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.legal-body th, .legal-body td{ border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.legal-body th{ background: var(--navy); color: var(--paper); font-weight: 600; }
.legal-body tr:nth-child(even) td{ background: var(--mist); }

/* ==========================================================================
   MODULE 10 additions — faq-accordion, responsibility-matrix, info-block
   ========================================================================== */

/* faq-accordion: native <details>/<summary>, zero JS. The browser handles
   keyboard operation and expand/collapse state natively — more robust than
   a JS-simulated accordion, and satisfies "keyboard-operable" by construction. */
.faq-accordion{ display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.faq-item{ background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.faq-item summary{
  padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 600; color: var(--navy-dark);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: '+'; font-size: 20px; font-weight: 400; color: var(--gold-dark); flex: none; }
.faq-item[open] summary::after{ content: '−'; }
.faq-item summary:hover, .faq-item summary:focus-visible{ background: var(--mist); }
.faq-item .faq-answer{ padding: 0 var(--space-5) var(--space-4); color: var(--slate); font-size: var(--fs-small); line-height: 1.65; }

/* responsibility-matrix: 4-party breakdown (Employer / GOGPL / Candidate / Authorities) */
.resp-matrix{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.resp-matrix .resp-card h3{ font-size: 15px; }
@media (max-width: 900px){ .resp-matrix{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .resp-matrix{ grid-template-columns: 1fr; } }

/* info-block: labelled sub-sections used on Why Indian Workers */
.info-block{ margin-top: var(--space-7); }
.info-block h2{ margin-bottom: var(--space-4); }
.info-block ul{ display: grid; gap: 8px; margin-top: var(--space-4); }
.info-block li{ font-size: var(--fs-small); color: var(--ink); padding-left: 18px; position: relative; line-height: 1.6; }
.info-block li::before{ content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ==========================================================================
   MODULE 14 additions — employer guide articles
   ========================================================================== */
.guide-body{ padding-top: 0; }
.more-guides{ margin-top: var(--space-4); display: grid; gap: 6px; }
.more-guides li{ margin: 0; }
.more-guides a{ color: var(--navy-mid); font-weight: 600; font-size: var(--fs-small); }
.more-guides a:hover, .more-guides a:focus-visible{ color: var(--navy-dark); }

/* ==========================================================================
   MODULE 17 addition — sticky-requirement-cta
   Discovered missing during final QA: the hard requirement for a sticky
   "Submit Manpower Requirement" button, and the acceptance checklist's
   whatsapp-float/sticky-CTA collision check, both assumed this component
   existed. It didn't. Built now, with .whatsapp-float's offsets corrected
   to match its real measured height (not the earlier placeholder guess).

   Mobile/tablet (<1024px): full-width fixed bar.
   Button: padding 11px 22px, font-size 14px, line-height 1.6 (inherited)
     -> rendered button height = 14*1.6 + 11*2 = 44.4px
   Bar: 12px vertical padding + 1px top border
     -> total bar height = 44.4 + 24 + 1 = 69.4px, rounded up to 70px
   whatsapp-float bottom offset set to 88px = 70px bar + 18px clearance.

   Desktop (>=1024px): floating pill, bottom-left — opposite corner from
   whatsapp-float (bottom-right), so no overlap is possible regardless of
   exact size at this breakpoint. Omitted on Home and Submit Requirement,
   where the page's own embedded form submit button already serves this
   role — a redundant floating duplicate risked exactly the kind of overlap
   the acceptance checklist warns against. */
.sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 12px 16px; display: flex; justify-content: center;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.sticky-cta .btn{ width: 100%; max-width: 480px; text-align: center; }

@media (min-width: 1024px){
  .sticky-cta{
    left: 32px; right: auto; bottom: 32px; top: auto;
    background: none; border: none; box-shadow: none; padding: 0;
    display: block;
  }
  .sticky-cta .btn{ width: auto; max-width: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
}

/* ==========================================================================
   VISUAL POLISH PASS — stronger boxes, icon bullets, clearer highlighting.
   All changes are in this shared stylesheet so every page picks them up
   automatically — no per-page HTML edits needed for this pass.
   ========================================================================== */

/* Logo — "Green Outdoors Global" is longer than the old name; give the
   wordmark a touch more room and keep it on one line at all header widths. */
.logo-text b{ white-space: nowrap; }
@media (max-width: 480px){ .logo-text small{ display: none; } } /* tagline drops first on very narrow screens rather than wrapping the name */

/* ---- Proper boxes: real depth instead of a flat hairline border, every
   card type gets a coloured top accent so cards read as a deliberate,
   highlighted set rather than plain bordered boxes ---- */
.benefit-card, .category-card, .resp-card, .market-block, .contact-cta-card, .step, .md-quote{
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.08);
  border-top-width: 3px; border-top-style: solid;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.benefit-card, .category-card, .contact-cta-card{ border-top-color: var(--gold); }
.resp-card, .md-quote{ border-top-color: var(--navy); }
.market-block{ border-top-color: var(--gold); border-top-width: 4px; } /* slightly heavier — market cards are the primary CTA set on this page */
.step{ border-top-color: var(--navy-mist); } /* subtle on the numbered stepper, where the number badge already carries the accent colour */

.benefit-card:hover, .category-card:hover, .step:hover{
  box-shadow: 0 6px 16px rgba(16,24,40,.08), 0 14px 32px rgba(16,24,40,.12);
  transform: translateY(-3px);
  border-top-color: var(--gold-dark);
}
.resp-card:hover{ box-shadow: 0 6px 16px rgba(16,24,40,.08), 0 14px 32px rgba(16,24,40,.12); }

/* ---- Icon bullets instead of plain dots — checkmark, not a dash ---- */
.market-block li::before, .resp-card li::before, .info-block li::before{
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  top: 3px;
  display: flex; align-items: center; justify-content: center;
}
.market-block li, .resp-card li, .info-block li{ padding-left: 22px; }
.market-block li::after, .resp-card li::after, .info-block li::after{
  content: '';
  position: absolute; left: 5px; top: 6px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: rotate(45deg);
}

/* category-card "Learn more" link becomes a clearer pill-style call to action on hover */
.category-card a.card-link, .resp-card a.card-link{
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap .15s ease;
}
.category-card a.card-link:hover, .resp-card a.card-link:hover{ gap: 8px; }

/* ---- Clearer highlighting on nav + interactive text ---- */
.navlink{ position: relative; padding-bottom: 2px; }
.navlink::after{
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .18s ease;
}
.navlink:hover::after, .navlink:focus-visible::after{ right: 0; }

/* card-icon badges get a subtle ring so they read as a distinct icon "chip", not just a tinted square */
.card-icon{ box-shadow: 0 0 0 1px var(--line) inset; }

/* trust-bar chips get a light pill background so credentials look like distinct badges, not a run-on text line */
.trust-bar .chip{
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}


/* ==========================================================================
   BEAUTIFY PASS - 2026-08-02
   Visual refinement layer, appended last so it overrides the rules above.
   Palette family, page markup and copy are unchanged; light backgrounds only.
   To revert: delete everything from this comment block to the end of file
   (original saved at /home1/green2ud/_backup/styles.css.workersfromindia.2026-08-02.bak).
   ========================================================================== */
:root{
  --cta-ink: #1B1206;
  --line-soft: #E8EEF6;
  --slate-2: #4B5A6B;
  --tint-gold: #FDF4E6;
  --tint-navy: #F5F8FD;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 14px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.05);
  --shadow-lg: 0 14px 34px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.06);
  --shadow-gold: 0 6px 18px rgba(224,138,26,.28);
  --radius-btn: 10px;
  --radius-card: 16px;
  --grad-gold: linear-gradient(135deg,#F2A83E 0%,#E08A1A 55%,#C97710 100%);
  --grad-navy: linear-gradient(135deg,#2A5EA8 0%,#17356B 60%,#0E2447 100%);
  --grad-page: radial-gradient(1100px 520px at 88% -10%, #E9F0FA 0%, rgba(233,240,250,0) 70%),
               radial-gradient(760px 420px at -8% 2%, #FDF3E4 0%, rgba(253,243,228,0) 68%);
}

html{ scroll-behavior: smooth; }
body{ background-image: var(--grad-page); background-repeat: no-repeat; }
[id]{ scroll-margin-top: 96px; }
::selection{ background: var(--gold-soft); color: var(--navy-dark); }

h1,h2{ letter-spacing: -.015em; text-wrap: balance; }
h1{ line-height: 1.07; }
.hero .lead, .page-intro .lead, .sec-head p{ color: var(--slate-2); text-wrap: pretty; }

/* ---- Header: sticky and glassy; nav labels no longer wrap mid-phrase ---- */
.site-header{
  position: sticky; top: 0;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(16,24,40,.05);
}
.header-inner{ padding: 12px 20px; gap: 12px; }
.logo{ gap: 10px; }
.logo img{ width: 68px; height: 67px; mix-blend-mode: multiply; }
.logo-text b{ font-size: 17.5px; letter-spacing: -.01em; }
.logo-text small{ font-size: 9.5px; letter-spacing: .12em; }
.site-nav ul{ gap: 0; }
.navlink{
  white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--navy-dark);
  padding: 8px 10px; border-radius: 9px;
  transition: background-color .18s ease, color .18s ease;
}
.navlink::after{ display: none; }
.navlink:hover, .navlink:focus-visible{ background: var(--tint-navy); color: var(--navy); }
.site-nav .btn{ margin-left: 10px; font-size: 13.5px; padding: 11px 18px; white-space: nowrap; }
@media (max-width: 1340px){
  .logo img{ width: 60px; height: 59px; }
  .logo-text b{ font-size: 16.5px; }
  .navlink{ font-size: 12.8px; padding: 8px 7px; }
  .site-nav .btn{ font-size: 13px; padding: 10px 15px; }
}
/* ---- Buttons ---- */
.btn{
  font-size: 14.5px; font-weight: 700; padding: 12px 24px; border-radius: var(--radius-btn);
  transition: transform .16s ease, box-shadow .18s ease, background-color .2s, color .2s, filter .18s ease;
}
.btn-primary{ background-image: var(--grad-gold); color: var(--cta-ink); box-shadow: var(--shadow-gold); }
.btn-primary:hover, .btn-primary:focus-visible{ background-image: var(--grad-gold); background-color: var(--gold-dark); filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(224,138,26,.34); }
.btn-secondary{ background-image: var(--grad-navy); box-shadow: 0 6px 18px rgba(23,53,107,.22); }
.btn-secondary:hover, .btn-secondary:focus-visible{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23,53,107,.28); }
.btn-ghost{ background: rgba(255,255,255,.72); border-color: #C6D3E8; }
.btn-ghost:hover, .btn-ghost:focus-visible{ background: var(--navy-mist); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

/* ---- Section rhythm and headings ---- */
section{ padding: var(--space-9) 0; }
@media (max-width: 640px){ section{ padding: var(--space-8) 0; } }
.sec-head h2{ margin-top: 14px; }
.sec-head h2::after{
  content: ''; display: block; width: 58px; height: 3px; margin-top: 18px;
  border-radius: 3px; background-image: var(--grad-gold);
}
.sec-head.center{ max-width: 720px; }
.sec-head.center h2::after{ margin-left: auto; margin-right: auto; }
.sec-head .eyebrow{
  display: inline-block; background: var(--tint-gold); border: 1px solid var(--gold-soft);
  border-radius: 999px; padding: 6px 14px; letter-spacing: .14em; font-size: 11.5px;
}

/* ---- Hero ---- */
.hero{ padding-top: var(--space-8); padding-bottom: var(--space-8); }
.hero-grid{ gap: 56px; }
.hero h1{ margin-top: 18px; }
.hero .lead{ font-size: clamp(16.5px,1.9vw,18.5px); }
.hero-cta{ margin-top: 32px; }
.hero-art{
  border-radius: 20px; padding: 30px; box-shadow: var(--shadow-lg);
  background-image: linear-gradient(180deg,#F8FBFF 0%,#E9F0FA 100%);
  border-color: var(--line-soft); border-top-width: 4px;
}
.hero-art h3{ letter-spacing: .01em; }
.corridor-pill{ box-shadow: var(--shadow-sm); transition: box-shadow .16s ease, transform .16s ease; }
.corridor-pill:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cred-card{ border-radius: 12px; box-shadow: var(--shadow-sm); border-color: var(--line-soft); }
.cred-ic{ background-image: var(--grad-navy); color: var(--paper); border-radius: 10px; box-shadow: 0 3px 8px rgba(23,53,107,.2); }

/* ---- Trust bar ---- */
.trust-bar-band{ background-image: linear-gradient(180deg,#F8FAFC 0%,#EEF3F8 100%); }
.trust-bar .chip{ box-shadow: var(--shadow-sm); border-color: var(--line-soft); }

/* ---- Cards ---- */
.benefit-card, .category-card, .resp-card, .market-block, .contact-cta-card, .step, .md-quote{
  border-radius: var(--radius-card); border-color: var(--line-soft); box-shadow: var(--shadow-md);
}
.benefit-card:hover, .category-card:hover, .step:hover, .resp-card:hover{
  box-shadow: var(--shadow-lg); transform: translateY(-4px);
}
.market-block{
  background-image: linear-gradient(180deg,#FFFFFF 0%,#F6FAF9 100%);
  transition: box-shadow .18s ease, transform .18s ease;
}
.market-block:hover{ box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card-icon{
  background-image: var(--grad-navy); color: var(--paper); border-radius: 12px;
  box-shadow: 0 4px 12px rgba(23,53,107,.22); width: 46px; height: 46px;
}
.benefit-card h3, .category-card h3, .resp-card h3{ font-size: 17.5px; }
.step .fnum{
  width: 30px; height: 30px; background-image: var(--grad-gold);
  color: var(--cta-ink); box-shadow: 0 3px 8px rgba(224,138,26,.3);
}
.country-chips span{ box-shadow: var(--shadow-sm); border-color: var(--line-soft); }

/* ---- FAQ accordion ---- */
.faq-item{ border-radius: 12px; border-color: var(--line-soft); box-shadow: var(--shadow-sm); transition: box-shadow .18s ease; }
.faq-item[open]{ box-shadow: var(--shadow-md); }
.faq-item[open] summary{ background: var(--tint-navy); }

/* ---- CTA band ---- */
.cta-band{
  background-image: radial-gradient(900px 320px at 50% 0%, #E9F0FA 0%, rgba(233,240,250,0) 72%),
                    linear-gradient(180deg,#F8FAFC 0%,#F3F7F6 100%);
  border-top-color: var(--line-soft);
}

/* ---- Forms (skin only, no field or logic changes) ---- */
.ftab{ border-radius: 12px 12px 0 0; }
.ftab.active{ box-shadow: inset 0 3px 0 var(--gold); }
.form-card{ border-color: var(--line-soft); border-radius: 0 0 var(--radius-card) var(--radius-card); box-shadow: var(--shadow-md); }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform input[type=url], .cform input[type=number], .cform input[type=month], .cform textarea, .cform select{
  border-radius: 10px; border-color: #DCE5F0; background: #FCFDFE;
}
.cbtn{ background-image: var(--grad-gold); color: var(--cta-ink); border-radius: var(--radius-btn); box-shadow: var(--shadow-gold); transition: filter .18s ease, transform .16s ease; }
.cbtn:hover, .cbtn:focus-visible{ filter: brightness(1.05); transform: translateY(-2px); }
.eq-side{ border-color: var(--line-soft); box-shadow: var(--shadow-md); background-image: linear-gradient(180deg,#FFFFFF 0%,#F6FAF9 100%); }

/* ---- Footer ---- */
.site-footer{ background-image: linear-gradient(180deg,#F8FAFC 0%,#EDF2F1 100%); border-top-color: var(--line-soft); }
.footer-col h4{ letter-spacing: .1em; color: var(--slate); }
.footer-col a{ transition: color .15s ease, padding-left .15s ease; }
.footer-col a:hover, .footer-col a:focus-visible{ padding-left: 4px; }
.social-bar a{ box-shadow: var(--shadow-sm); border-color: var(--line-soft); transition: transform .16s ease, background-color .18s, color .18s, border-color .18s; }
.social-bar a:hover, .social-bar a:focus-visible{ transform: translateY(-2px); }

/* ---- Floating elements ---- */
.whatsapp-float{ box-shadow: 0 10px 26px rgba(37,211,102,.38); transition: transform .18s ease, filter .18s ease; }
.whatsapp-float:hover, .whatsapp-float:focus-visible{ transform: scale(1.06); }
.sticky-cta{ backdrop-filter: blur(8px); background: rgba(255,255,255,.92); }
@media (min-width: 1024px){ .sticky-cta{ background: none; backdrop-filter: none; } }

/* ---- Breadcrumbs: suppress the stray ordered-list numbering, soften the separator ---- */
.breadcrumbs ol{ list-style: none; margin: 0; padding: 0; }
.breadcrumbs li{ display: inline-flex; align-items: center; }
.breadcrumbs li:not(:last-child)::after{ color: #B9C6D6; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible{ text-decoration: underline; }

/* ---- Legal and long-form pages ---- */
.legal-toc{ border-color: var(--line-soft); box-shadow: var(--shadow-sm); background-image: linear-gradient(180deg,#F8FAFC 0%,#F2F7F6 100%); }
.legal-body .card{ border-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.legal-body table{ border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.legal-body th{ background-image: var(--grad-navy); }
.disclaimer-callout{ border-radius: 12px; box-shadow: var(--shadow-sm); }
.md-quote{ background-image: linear-gradient(180deg,#FFFFFF 0%,#F7FAF9 100%); }
.form-success{ border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }

/* ---- Cookie consent banner ---- */
.wfi-cookie-banner{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:9999; background:var(--navy-dark); color:#fff; padding:14px 20px; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:14px; box-shadow:0 -2px 12px rgba(0,0,0,.15); }
.wfi-cookie-banner.show{ display:flex; }
.wfi-cookie-banner p{ margin:0; flex:1 1 320px; max-width:720px; }
.wfi-cookie-banner a{ color:#BFD6F5; text-decoration:underline; }
.wfi-cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.wfi-cookie-actions button{ padding:8px 16px; border-radius:8px; font-size:14px; cursor:pointer; border:1px solid rgba(255,255,255,.45); font-family:inherit; }
.wfi-cookie-actions .btn-primary{ background:#fff; color:var(--navy-dark); border-color:#fff; font-weight:600; }
.wfi-cookie-actions .btn-ghost{ background:transparent; color:#fff; }
.wfi-cookie-actions .btn-ghost:hover, .wfi-cookie-actions .btn-primary:hover{ opacity:.9; }


/* ==========================================================================
   V2 DESIGN PASS - 2026-09-21
   Typography, hierarchy, imagery and rhythm layer, appended last so it overrides
   everything above. Standing rules honoured: light backgrounds only, gold is the
   one CTA colour, and the enquiry form's markup and behaviour are untouched.
   To revert: delete everything from this comment block to the end of the file.
   ========================================================================== */

/* ---- Fonts: the same self-hosted pair workvisacrm.com uses (Fraunces + IBM Plex Sans) ---- */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/fraunces-600.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/fraunces-700.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
/* Metric-adjusted stand-ins so text does not jump when the web fonts arrive */
@font-face{ font-family:'Fraunces Fallback'; src:local('Georgia'); size-adjust:106%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }
@font-face{ font-family:'IBM Plex Sans Fallback'; src:local('Arial'); size-adjust:102%; ascent-override:101%; descent-override:27%; line-gap-override:0%; }

:root{
  --font-serif: 'Fraunces','Fraunces Fallback',Georgia,'Times New Roman',serif;
  --font-sans: 'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-h1: clamp(2.35rem, 1.4rem + 3.3vw, 3.6rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2vw, 2.65rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-eyebrow: .75rem;

  --ink: #1B2638;
  --slate: #566277;
  --slate-2: #46526A;
  --mist: #F7F5EF;
  --line: #E8E3D8;
  --line-soft: #EEEAE0;
  --tint-navy: #F3F6FC;
  --tint-gold: #FDF3E1;
  --radius-btn: 12px;
  --radius-card: 20px;
  --shadow-sm: 0 1px 2px rgba(20,32,60,.05);
  --shadow-md: 0 2px 4px rgba(20,32,60,.04), 0 10px 24px rgba(20,32,60,.07);
  --shadow-lg: 0 4px 10px rgba(20,32,60,.05), 0 22px 48px rgba(20,32,60,.11);
  --grad-page: radial-gradient(1000px 520px at 92% -8%, rgba(36,85,155,.10) 0%, rgba(36,85,155,0) 70%),
               radial-gradient(760px 460px at -6% 4%, rgba(224,138,26,.11) 0%, rgba(224,138,26,0) 68%);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Base type ---- */
body{ font-size: var(--fs-body); line-height: 1.65; text-rendering: optimizeLegibility; }
h1{ font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.022em; line-height: 1.03; }
h2{ font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.018em; line-height: 1.1; }
h3{ font-weight: 600; letter-spacing: -.005em; }
.eyebrow{ font-family: var(--font-sans); font-weight: 600; }
.breadcrumbs ol{ font-size: .875rem; }
.consent{ font-size: .875rem; }
.disc, .foot-bottom{ font-size: .8125rem; }

/* ---- Header: bigger targets, clearer current page ---- */
.site-header{ background: rgba(255,255,255,.86); }
.header-inner{ padding: 10px 20px; max-width: 1400px; } /* wider than the content column so the menu never spills past the page edge */
.logo img{ width: 58px; height: 57px; }
.logo-text b{ font-size: 18px; }
.navlink{ display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; padding: 0 9px; color: var(--navy-dark); }
.navlink[aria-current="page"]{ background: var(--tint-navy); color: var(--navy); font-weight: 600; }
.site-nav .btn{ min-height: 44px; padding: 0 18px; font-size: 14px; margin-left: 10px; }
/* Placed after the rules above so it actually wins the cascade at this width (an earlier
   attempt at the same idea, higher up in this file, was being silently overridden here). */
@media (max-width: 1340px){
  .logo img{ width: 52px; height: 51px; }
  .logo-text b{ font-size: 15.5px; }
  .logo-text small{ font-size: 8.5px; }
  .navlink{ font-size: 12.5px; padding: 0 6px; min-height: 40px; }
  .site-nav .btn{ font-size: 12.5px; padding: 0 13px; min-height: 40px; margin-left: 6px; }
}
/* Collapse to the hamburger menu below the width where even the compacted nav above still
   overflows (measured: the 8-item bar needs ~1320px compacted). Kept as the last word on
   .navlink/.site-nav so it reliably overrides every rule above it, mobile included. */
@media (max-width: 1140px){
  .menu-toggle{ display: flex; }
  .site-nav ul{
    position: fixed; top: var(--header-h, 77px); left: 0; right: 0; z-index: 29;
    background: var(--paper); flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 0; border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    display: none;
  }
  .site-nav ul.open{ display: flex; }
  .site-nav ul li{ width: 100%; }
  .navlink{ display: block; width: 100%; padding: 13px 24px; font-size: 15px; min-height: 0; }
  .site-nav .btn{ margin: 10px 24px; text-align: center; font-size: 14px; min-height: 44px; }
}
/* ---- Buttons ---- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 26px; font-size: 15px; font-weight: 600; letter-spacing: .005em; border-radius: var(--radius-btn); }
.btn-lg{ min-height: 54px; padding: 0 30px; font-size: 16px; }
.cbtn{ min-height: 54px; font-size: 1rem; border-radius: 14px; }

/* ---- Rhythm ---- */
section{ padding: 88px 0; }
@media (max-width: 900px){ section{ padding: 72px 0; } }
@media (max-width: 640px){ section{ padding: 56px 0; } }
.sec-head{ max-width: 720px; }
.sec-head p{ font-size: 1.0625rem; max-width: 60ch; }
.sec-head.center p{ margin-left: auto; margin-right: auto; }

/* ==== Hero ==== */
.hero{ position: relative; padding: 56px 0 120px; overflow: hidden; }
.hero::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(23,53,107,.12) 1.2px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 90% at 78% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(70% 90% at 78% 30%, #000 0%, transparent 72%);
}
.hero-grid{ position: relative; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero .eyebrow{ display: inline-block; letter-spacing: .1em; font-size: .78rem; line-height: 1.5; }
.hero h1{ margin-top: 20px; }
.hero h1 .hl{ background: linear-gradient(transparent 62%, var(--gold-soft) 62%, var(--gold-soft) 90%, transparent 90%); padding: 0 .06em; margin: 0 -.06em; }
.hero .lead{ font-size: clamp(1.0625rem, .95rem + .35vw, 1.1875rem); max-width: 34em; color: var(--slate-2); margin-top: 22px; }
.hero-cta{ margin-top: 34px; gap: 14px; }
.hero-cta .btn{ min-height: 54px; padding: 0 30px; font-size: 16px; }
.hero-proof{ display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-proof li{ display: flex; flex-direction: column; }
.hero-proof b{ font-family: var(--font-serif); font-size: 2.1rem; line-height: 1; color: var(--navy); font-weight: 700; }
.hero-proof span{ font-size: .875rem; color: var(--slate); margin-top: 8px; }

.hero-art{
  position: relative; background: rgba(255,255,255,.95); background-image: none;
  border: 1px solid var(--line-soft); border-top-width: 1px; border-radius: 28px;
  padding: 22px 22px 22px; box-shadow: var(--shadow-lg);
}
.hero-art::before{
  content: ''; position: absolute; z-index: -1; top: -34px; right: -34px; width: 280px; height: 280px;
  background: radial-gradient(closest-side, rgba(224,138,26,.24), rgba(224,138,26,0));
}
.art-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.art-head h3{ font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--navy-dark); margin: 0; }
.art-count{ font-size: .8125rem; color: var(--slate); }
.corridor-map{ display: block; width: 100%; height: auto; margin: 6px 0 14px; overflow: visible; }
.corridor-map .arc{ fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 3 6; opacity: .95; }
.corridor-map .node{ fill: var(--navy); stroke: #fff; stroke-width: 2; }
.corridor-map .node.origin{ fill: var(--gold); }
.corridor-map .pulse{ fill: rgba(224,138,26,.28); transform-box: fill-box; transform-origin: center; }
.corridor-map text{ font: 600 12.5px var(--font-sans); fill: var(--navy-dark); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.corridor-map text.sub{ font-weight: 500; font-size: 11px; fill: var(--slate); }
.corridor-map text.origin-label{ fill: var(--gold-dark); font-size: 13.5px; }
@media (prefers-reduced-motion: no-preference){
  .corridor-map .arc{ animation: wfi-arc-flow 2.6s linear infinite; }
  .corridor-map .pulse{ animation: wfi-pulse 2.8s ease-out infinite; }
}
@keyframes wfi-arc-flow{ to{ stroke-dashoffset: -18; } }
@keyframes wfi-pulse{ 0%{ transform: scale(.6); opacity: .9; } 80%, 100%{ transform: scale(2.4); opacity: 0; } }
.corridor-pills{ gap: 8px; margin-top: 0; }
.corridor-pill{ font-size: .8125rem; padding: 5px 12px 5px 6px; }

/* ==== Credentials strip (floats over the hero's bottom edge) ==== */
.trust-bar-band{ position: relative; z-index: 2; margin-top: -68px; padding: 0 0 8px; background: transparent; background-image: none; border: none; }
.trust-bar .container{ display: block; }
.cred-strip{ display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; }
.cred-strip .cred-card{ margin: 0; align-items: center; gap: 16px; padding: 24px 28px; background: transparent; border: none; border-radius: 0; box-shadow: none; }
.cred-strip .cred-card + .cred-card{ border-left: 1px solid var(--line-soft); }
.cred-strip .cred-ic{ width: 44px; height: 44px; border-radius: 14px; }
.cred-strip .cred-ic svg{ width: 21px; height: 21px; }
.cred-strip .cred-card.accent-gold .cred-ic{ background-image: var(--grad-gold); color: var(--cta-ink); box-shadow: 0 4px 12px rgba(224,138,26,.3); }
.cred-eyebrow{ font-size: .6875rem; letter-spacing: .08em; }
.cred-value{ font-size: 1.125rem; margin-top: 3px; line-height: 1.25; }
.cred-desc{ font-size: .8125rem; margin-top: 3px; }
.trust-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 24px; }
.trust-bar .chip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: .9375rem; background: rgba(255,255,255,.7); border-color: var(--line-soft); box-shadow: none; }
.trust-bar .chip::before{ content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.trust-bar .chip:last-child::before{ display: none; }

/* ==== Cards ==== */
.benefit-card, .category-card{
  position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-top-width: 1px; border-radius: var(--radius-card);
  padding: 26px 24px 28px; gap: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.benefit-card::after, .category-card::after{
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background-image: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.benefit-card:hover, .category-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-soft); border-top-color: var(--gold-soft); }
.benefit-card:hover::after, .category-card:hover::after{ transform: scaleX(1); }
.card-icon{
  width: 52px; height: 52px; border-radius: 16px; background: var(--tint-navy); background-image: none; color: var(--navy);
  border: 1px solid #DCE6F6; box-shadow: none; transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.card-icon svg{ width: 24px; height: 24px; }
.benefit-card:hover .card-icon, .category-card:hover .card-icon{ background: var(--navy); color: #fff; border-color: var(--navy); transform: rotate(-5deg) scale(1.05); }
.benefit-card h3, .category-card h3, .resp-card h3{ font-size: 1.1875rem; line-height: 1.25; color: var(--navy-dark); }
.benefit-card p, .category-card p{ font-size: .96875rem; color: var(--slate); line-height: 1.65; }
.category-card .roles{ font-size: .9375rem; color: var(--slate); }
.category-card a.card-link, .resp-card a.card-link{ font-size: .9375rem; color: var(--navy); }
.card-grid{ gap: 22px; margin-top: 48px; }
.card-grid.cols-4{ counter-reset: wfi-n; }
.card-grid.cols-4 > .benefit-card{ counter-increment: wfi-n; }
.card-grid.cols-4 > .benefit-card::before{
  content: counter(wfi-n, decimal-leading-zero); position: absolute; top: 20px; right: 24px;
  font-family: var(--font-serif); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--gold-soft);
}

/* ==== Markets ==== */
.markets-grid{ gap: 22px; margin-top: 48px; }
.market-block{
  background-color: var(--paper); background-image: linear-gradient(180deg, var(--tint-gold) 0, rgba(253,243,225,0) 150px);
  border: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); border-radius: 24px; padding: 36px 32px 32px; box-shadow: var(--shadow-md);
}
.market-block h3{ font-size: 1.75rem; font-weight: 700; }
.market-block > p{ margin-top: 12px; font-size: .96875rem; color: var(--slate); line-height: 1.65; }
.market-block ul{ display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.market-block li{ position: static; padding: 6px 14px; background: var(--tint-navy); border: 1px solid #E1E9F6; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--navy-dark); }
.market-block li::before, .market-block li::after{ display: none; }

/* ==== Process: connected timeline ==== */
.stepper{ position: relative; grid-template-columns: repeat(6, 1fr); gap: 0 24px; margin-top: 52px; }
.step, .step:hover{ position: relative; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; transform: none; }
.step .fnum{
  position: relative; z-index: 1; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%;
  background: var(--paper); background-image: none; color: var(--navy); border: 2px solid var(--gold);
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; box-shadow: 0 0 0 6px var(--paper), var(--shadow-md);
}
.step:not(:last-child)::after{
  content: ''; position: absolute; top: 23px; left: 62px; right: -18px; height: 2px;
  background-image: linear-gradient(90deg, var(--gold) 50%, transparent 50%); background-size: 10px 2px;
}
.step h3{ font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.step p{ font-size: .9375rem; color: var(--slate); margin-top: 8px; line-height: 1.6; }
@media (max-width: 900px){
  .stepper{ grid-template-columns: repeat(3, 1fr); gap: 44px 24px; }
  .step:nth-child(3n)::after{ display: none; }
}
@media (max-width: 640px){
  .stepper{ grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .step{ padding: 0 0 34px 68px; }
  .step .fnum{ position: absolute; left: 0; top: 0; margin: 0; }
  .step:not(:last-child)::after{
    display: block; top: 56px; bottom: 6px; left: 23px; right: auto; width: 2px; height: auto;
    background-image: linear-gradient(180deg, var(--gold) 50%, transparent 50%); background-size: 2px 10px;
  }
}

/* ==== Group platform (WorkVisaCRM) ==== */
.platform{ padding: 32px 0 88px; }
.platform-card{
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; overflow: hidden;
  padding: 44px; background-image: linear-gradient(135deg, #FFFFFF 0%, var(--tint-navy) 100%); background-color: var(--paper);
  border: 1px solid var(--line-soft); border-radius: 32px; box-shadow: var(--shadow-lg);
}
.platform-card::before{
  content: ''; position: absolute; top: -120px; left: -80px; width: 380px; height: 380px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224,138,26,.14), rgba(224,138,26,0));
}
.platform-copy, .platform-visual{ position: relative; }
.platform-copy h2{ margin-top: 14px; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.platform-copy > p{ margin-top: 16px; color: var(--slate-2); max-width: 46ch; }
.platform-points{ display: grid; gap: 12px; margin: 26px 0 32px; }
.platform-points li{ position: relative; padding-left: 32px; color: var(--ink); line-height: 1.5; }
.platform-points li::before{ content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); }
.platform-points li::after{ content: ''; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.platform-cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.platform-note{ margin-top: 22px; max-width: 52ch; font-size: .8125rem; color: var(--slate); line-height: 1.55; }
.platform-visual{ background: #fff; border: 1px solid var(--line-soft); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-md); }
.pv-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.pv-head img{ height: 42px; width: auto; }
.pv-tag{ font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--tint-gold); color: var(--gold-dark); }
.pv-stages{ display: grid; gap: 14px; margin-top: 20px; }
.pv-stages li{ display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; font-size: .875rem; font-weight: 500; color: var(--navy-dark); }
.pv-stages i{ position: relative; display: block; height: 8px; border-radius: 8px; background: var(--navy-mist); overflow: hidden; }
.pv-stages i::after{ content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 8px; background-image: linear-gradient(90deg, #2A5EA8, #17356B); }
.pv-stages li.active i::after{ background-image: var(--grad-gold); }
@media (max-width: 900px){
  .platform-card{ grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
}
@media (max-width: 640px){
  .platform{ padding: 40px 0 64px; }
  .platform-card{ padding: 32px 20px; border-radius: 26px; }
  .pv-stages li{ grid-template-columns: 116px 1fr; font-size: .8125rem; }
}

/* ==== Enquiry form (skin only) ==== */
.eq-layout{ gap: 40px; align-items: start; margin-top: 48px; }
.form-tabs{ gap: 0; padding: 6px; background: var(--tint-navy); border-radius: 18px 18px 0 0; }
.ftab{ min-height: 48px; border: none; background: transparent; border-radius: 13px; padding: 12px; font-size: .9375rem; color: var(--slate); box-shadow: none; }
.ftab.active{ background: var(--paper); color: var(--navy-dark); box-shadow: var(--shadow-sm); }
.form-card{ border: 1px solid var(--line-soft); border-top: none; border-radius: 0 0 24px 24px; box-shadow: var(--shadow-md); }
.cform{ padding: 28px 30px 32px; }
.cform label{ font-size: .875rem; margin-bottom: 8px; }
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform input[type=url], .cform input[type=number], .cform input[type=month], .cform textarea, .cform select{
  min-height: 50px; padding: 12px 16px; font-size: 1rem; border-radius: 12px; border: 1px solid #DAD5C8; background: #fff;
}
.cform input:focus, .cform textarea:focus, .cform select:focus{ border-color: var(--navy); box-shadow: 0 0 0 4px rgba(23,53,107,.14); }
.eq-side{ padding: 30px; border-radius: 24px; background-color: var(--paper); background-image: linear-gradient(180deg, var(--tint-navy) 0%, #fff 62%); }
.cline .ct b{ font-size: .875rem; }
.eq-note{ font-size: .875rem; border-radius: 14px; }

/* ==== CTA band ==== */
.cta-band{
  padding: 72px 0; background-color: var(--paper);
  background-image: radial-gradient(720px 300px at 18% 0%, rgba(224,138,26,.14), rgba(224,138,26,0) 70%),
                    radial-gradient(820px 320px at 86% 100%, rgba(36,85,155,.12), rgba(36,85,155,0) 70%);
}
.cta-band h2{ max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-band p{ font-size: 1.0625rem; }

/* ==== Footer ==== */
.site-footer{ background-color: var(--mist); background-image: none; padding: 72px 0 32px; }
.footer-top{ grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 40px 48px; padding-bottom: 44px; }
.footer-connect{ grid-column: 5; grid-row: 1; }
.footer-col[aria-label="Recruitment Network"]{
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 40px;
  align-content: start; padding-top: 32px; border-top: 1px solid var(--line);
}
.footer-col[aria-label="Recruitment Network"] h4{ grid-column: 1 / -1; }
.footer-col h4{ font-size: .75rem; }
.footer-col a, .footer-current{ font-size: .9375rem; }
.footer-current{ display: block; padding: 5px 0; color: var(--slate); }
.footer-brand p{ font-size: .9375rem; }
@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-connect{ grid-column: auto; grid-row: auto; }
  .footer-col[aria-label="Recruitment Network"]{ grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-top{ grid-template-columns: 1fr; }
  .footer-col[aria-label="Recruitment Network"]{ grid-template-columns: 1fr; }
}

/* ==== Small screens: shorter page, swipeable card rows on the Home page ==== */
@media (max-width: 900px){
  .hero{ padding-bottom: 116px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .cred-strip{ grid-template-columns: 1fr; }
  .cred-strip .cred-card + .cred-card{ border-left: none; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 640px){
  .hero{ padding: 40px 0 104px; }
  .hero h1{ font-size: 2.35rem; }
  .hero-proof{ gap: 16px 28px; margin-top: 32px; }
  .hero-proof b{ font-size: 1.75rem; }
  .card-grid{ margin-top: 36px; }
  .home .card-grid.cols-3, .home .card-grid.cols-4{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 32px -24px 0; padding: 6px 24px 22px; scrollbar-width: none;
  }
  .home .card-grid.cols-3::-webkit-scrollbar, .home .card-grid.cols-4::-webkit-scrollbar{ display: none; }
  .home .card-grid > *{ scroll-snap-align: center; }
  .market-block{ padding: 30px 24px 26px; }
  .cta-band{ padding: 64px 0; }
  .cform{ padding: 22px 18px 26px; }
}

/* ==== Inner pages: a quieter H1 than the Home hero, so the hierarchy reads Home > page > section ==== */
.page-intro h1{ font-size: clamp(2rem, 1.3rem + 2.5vw, 3rem); }
.page-intro .lead{ font-size: 1.125rem; }

/* Pre-existing bug fix: `.footer-col a { display: block; padding: 4px 0 }` (declared later in this file) was
   cancelling the social bar's flex centring, so every footer social icon sat top-left inside its circle.
   The icons are now one-colour SVG glyphs that inherit the link colour, so the platform colour on hover works. */
.social-bar a{ width: 40px; height: 40px; }
.footer-col .social-bar a{ display: flex; align-items: center; justify-content: center; padding: 0; color: var(--navy); }
.footer-col .social-bar a:hover, .footer-col .social-bar a:focus-visible{ padding: 0; }
.social-bar svg{ flex: none; }

/* Pre-existing bug fix: the centred last row for a five-card grid kept its column placement on phones,
   pushing the 4th and 5th cards off-screen to the right (About & Compliance overflowed sideways). */
@media (max-width: 900px){
  .card-grid.cols-3:has(> .resp-card:nth-child(5):last-child) > .resp-card:nth-child(n){ grid-column: auto; }
}

/* ==== Phones: swipeable market cards, a scrolling trust row, no decorative preview, a compact footer ==== */
@media (max-width: 640px){
  section{ padding: 48px 0; }
  .home .markets-grid{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 32px -24px 0; padding: 6px 24px 22px; scrollbar-width: none;
  }
  .home .markets-grid::-webkit-scrollbar{ display: none; }
  .home .markets-grid > *{ scroll-snap-align: center; }
  .platform-visual{ display: none; }
  .trust-chips{ flex-wrap: nowrap; justify-content: flex-start; align-items: center; overflow-x: auto; margin: 22px -24px 0; padding: 4px 24px 8px; scrollbar-width: none; }
  .trust-chips::-webkit-scrollbar{ display: none; }
  .trust-bar .chip{ flex: none; white-space: nowrap; font-size: .875rem; }
  /* The licence chip is much longer than the rest: let it wrap inside one screen width instead of scrolling off it. */
  .trust-bar .chip:last-child{ white-space: normal; max-width: calc(100vw - 48px); }
  .site-footer{ padding: 48px 0 24px; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 28px; }
  .footer-brand, .footer-connect, .footer-col[aria-label="Recruitment Network"]{ grid-column: 1 / -1; }
  .footer-col[aria-label="Recruitment Network"]{ grid-template-columns: 1fr; padding-top: 24px; }
  .footer-col a{ padding: 6px 0; }
}


/* ==========================================================================
   DESTINATION MARKETS - 2026-09-25
   /countries directory, /countries/{slug} employer pages, homepage Target Markets block and hero map.
   Data-driven from _src/_data/destinations.json. Sits before the V3 layer so V3 tokens/overrides still apply.
   ========================================================================== */
:is(.country-intro, .country-card, .dest-fixed) .flag{ display: inline-block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); vertical-align: -2px; margin-right: 8px; flex: none; }
:is(.country-intro, .country-card, .dest-fixed) .flag svg{ width: 100%; height: 100%; display: block; }
.country-intro .eyebrow{ display: inline-flex; align-items: center; }
.country-intro .hero-cta{ margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.country-facts{ list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.country-facts li{ background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.country-facts b{ font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.country-facts span{ font-weight: 600; color: var(--navy-dark); overflow-wrap: anywhere; }
.country-facts small{ font-weight: 400; color: var(--slate); }
.advisory-note{ margin-top: var(--space-4); display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); color: var(--navy-dark); background: var(--navy-mist); border-radius: 10px; padding: var(--space-3) var(--space-4); }
.advisory-note .ic{ width: 18px; height: 18px; flex: none; margin-top: 2px; }
.country-prose{ max-width: 72ch; }
.country-prose p{ margin: 0 0 var(--space-4); }
.country-prose .note{ font-size: var(--fs-small); color: var(--slate); border-left: 3px solid var(--gold-soft); padding-left: var(--space-3); }
.route-steps{ list-style: none; counter-reset: rs; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.route-steps li{ counter-increment: rs; position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 36px); }
.route-steps li::before{ content: counter(rs); position: absolute; left: var(--space-4); top: var(--space-5); width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.route-steps h3{ font-size: 1.05rem; margin-bottom: 6px; }
.route-steps p{ margin: 0; color: var(--slate); font-size: var(--fs-small); line-height: 1.6; }
.src-ref{ font-size: 12px; white-space: nowrap; }
.consider-list{ margin: var(--space-5) 0 0; padding-left: 1.2em; max-width: 80ch; display: grid; gap: var(--space-3); }
.stepper-list{ list-style: none; counter-reset: sl; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.stepper-list li{ counter-increment: sl; border-top: 3px solid var(--gold); padding-top: var(--space-3); color: var(--slate); font-size: var(--fs-small); }
.stepper-list li b{ display: block; color: var(--navy-dark); font-size: var(--fs-body); }
.stepper-list li b::before{ content: counter(sl) ". "; color: var(--gold-dark); }
.more-link{ margin-top: var(--space-3); font-size: var(--fs-small); }
.source-list{ margin: var(--space-4) 0 var(--space-5); padding-left: 1.6em; display: grid; gap: 6px; font-size: var(--fs-small); overflow-wrap: anywhere; }
.dest-fixed{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--mist); border-radius: 8px; font-size: var(--fs-small); }
.dest-fixed a{ margin-left: auto; }
/* Country cards: homepage Target Markets, /countries, /target-markets */
.country-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.country-card{ display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5); color: inherit; transition: border-color .15s, box-shadow .15s; }
.country-card:hover, .country-card:focus-visible{ border-color: var(--navy-mid); box-shadow: 0 6px 18px rgba(23,53,107,.08); }
.country-card .cc-head{ display: flex; align-items: center; gap: 4px; }
.country-card .cc-head .flag{ width: 30px; height: 20px; }
.country-card h3{ font-size: 1.15rem; }
.country-card p{ margin: 0; font-size: var(--fs-small); color: var(--slate); flex: 1; }
.country-card .cc-tag{ align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--navy-dark); background: var(--navy-mist); border-radius: 999px; padding: 3px 10px; }
.country-card .cc-cta{ font-weight: 600; color: var(--navy-mid); font-size: var(--fs-small); }
.markets-foot{ margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: center; font-size: var(--fs-small); color: var(--slate); }
@media (max-width: 820px){
  .country-facts{ grid-template-columns: 1fr; }
  .route-steps{ grid-template-columns: 1fr; }
  .stepper-list{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){ .stepper-list{ grid-template-columns: 1fr; } }

/* European case-by-case markets (2026-09-25 local): /markets/europe grid, /target-markets, homepage Europe card. */
.eu-grid{ list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-2, 8px) var(--space-3); }
.eu-item{ display: flex; align-items: center; gap: 0; min-height: 50px; padding: 7px 10px; line-height: 1.25; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-small); color: var(--navy-dark); min-width: 0; }
.eu-item .flag{ display: inline-block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); margin-right: 10px; flex: none; }
.eu-item .flag svg{ width: 100%; height: 100%; display: block; }
.iso-badge{ display: inline-grid; place-items: center; width: 22px; height: 15px; margin-right: 10px; flex: none; border-radius: 3px; background: var(--navy-mist); color: var(--navy); font-size: 9px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.eu-name{ font-weight: 600; font-size: 13.5px; overflow-wrap: break-word; }
.eu-name a{ text-decoration: underline; text-underline-offset: 2px; }
.eu-adv{ margin-left: 3px; font-weight: 700; color: var(--gold-dark); }
.eu-legend{ margin: var(--space-3) 0 0; font-size: 12.5px; color: var(--slate); }
.eu-legend span{ font-weight: 700; color: var(--gold-dark); }
.eu-hero{ margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.eu-hero-label{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.eu-hero-label b{ font-family: var(--font-serif); font-size: 1.25rem; color: var(--navy-dark); }
.eu-hero-label span{ font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.eu-hero-sub{ margin: 6px 0 0; max-width: 72ch; font-size: var(--fs-small); color: var(--slate); }
.eu-hero .eu-grid{ margin-top: var(--space-4); }
.eu-note{ margin-top: var(--space-5); max-width: 80ch; font-size: var(--fs-small); color: var(--slate); }
.europe-card{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--paper); border: 1px dashed var(--navy-mid); border-radius: var(--radius-card); color: inherit; }
.europe-card:hover, .europe-card:focus-visible{ border-style: solid; box-shadow: 0 6px 18px rgba(23,53,107,.08); }
.europe-card .ec-flags{ display: flex; gap: 4px; }
.europe-card .ec-flags .flag{ display: block; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.europe-card .ec-flags .flag svg{ width: 100%; height: 100%; display: block; }
.europe-card .ec-tx b{ display: block; font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy-dark); }
.europe-card .ec-tx small{ font-size: var(--fs-small); color: var(--slate); }
.europe-card .cc-cta{ font-weight: 600; color: var(--navy-mid); font-size: var(--fs-small); white-space: nowrap; }
@media (max-width: 700px){ .europe-card{ grid-template-columns: 1fr; gap: var(--space-2, 8px); } .europe-card .cc-cta{ white-space: normal; } }

/* ==========================================================================
   V3 DESIGN PASS - 2026-09-22
   Line icons, grouped navigation, navy accent bands, motion and page modules.
   Owner-approved change to a standing rule: a few deep-navy bands are now allowed (the process steps and
   the closing call to action); everything else stays light and gold stays the only button colour.
   Every animation is skipped for prefers-reduced-motion. To revert: delete from here to the end of the file.
   Source lives in .claude/tools/v3.css and is applied with .claude/tools/apply-v3.js.
   ========================================================================== */
:root{
  --navy-deep: #0B1D3D;
  --navy-band: linear-gradient(160deg, #0E2447 0%, #143063 55%, #1B3F7E 100%);
  --glass: rgba(255,255,255,.07);
  --glass-line: rgba(255,255,255,.16);
  --on-dark: #F4F7FC;
  --on-dark-2: rgba(244,247,252,.80);
  --header-h: 77px;
}

/* ---- Icons (Lucide, inlined by the {% icon %} shortcode) ---- */
.ic{ width: 1.25em; height: 1.25em; flex: none; }
.card-icon .ic{ width: 26px; height: 26px; }
.tile{ display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--tint-navy); border: 1px solid #DCE6F6; color: var(--navy); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.tile .ic{ width: 22px; height: 22px; }

/* ---- Header: shadow on scroll, grouped menu ---- */
.site-header{ transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled{ background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--line), 0 12px 32px rgba(16,24,40,.09); }
.mobile-only{ display: none; }
.has-menu{ position: relative; }
.has-menu .menu-row{ display: flex; align-items: center; }
.has-menu .navlink{ padding-right: 4px; }
.menu-caret{ display: grid; place-items: center; width: 26px; height: 44px; margin-left: -2px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--navy-dark); cursor: pointer; }
.menu-caret .ic{ width: 16px; height: 16px; transition: transform .25s var(--ease); }
.has-menu:hover .menu-caret .ic, .has-menu:focus-within .menu-caret .ic, .has-menu.open .menu-caret .ic{ transform: rotate(180deg); }
.mega{
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%; min-width: 340px; padding: 12px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .22s var(--ease), visibility 0s linear .22s;
}
.mega::before{ content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps the panel open while the pointer crosses the gap */
.mega-right{ left: auto; right: -24px; transform: translate(0, 8px); }
.has-menu:hover .mega, .has-menu:focus-within .mega, .has-menu.open .mega{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.has-menu:hover .mega-right, .has-menu:focus-within .mega-right, .has-menu.open .mega-right{ transform: translate(0, 0); }
.mega-list{ display: grid; gap: 2px; }
.mega-cols-2{ grid-template-columns: 1fr 1fr; min-width: 600px; }
.mega-item{ display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ink); transition: background-color .18s ease; }
.mega-item:hover, .mega-item:focus-visible{ background: var(--tint-navy); }
.mega-ic{ display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--tint-navy); color: var(--navy); border: 1px solid #DCE6F6; transition: background-color .25s, color .25s; }
.mega-ic .ic{ width: 20px; height: 20px; }
.mega-item:hover .mega-ic{ background: var(--navy); color: #fff; border-color: var(--navy); }
.mega-tx b{ display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--navy-dark); }
.mega-tx small{ display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--slate); }
.mega-all{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 12px 14px 4px; border-top: 1px solid var(--line-soft); font-size: .9375rem; font-weight: 600; color: var(--navy); }
.mega-all .ic{ width: 18px; height: 18px; transition: transform .2s var(--ease); }
.mega-all:hover .ic{ transform: translateX(4px); }
/* Mobile-dropdown-accordion adaptation for .has-menu/.mega - only correct once the hamburger
   itself is active. Was pinned to 1340px, which matched the hamburger breakpoint when written;
   now that the hamburger triggers at 1140px, this must match it exactly or the 1141-1340px
   "desktop, compacted" zone gets stuck with mobile-accordion caret spacing and click-to-open
   behaviour instead of the desktop hover-flyout mega-menu. */
@media (max-width: 1140px){
  .mobile-only{ display: list-item; }
  /* dvh follows the visible viewport as mobile browser toolbars show and hide (100vh line kept as the fallback);
     the bottom padding lets the last items scroll clear of the cookie banner (--banner-h, kept by scripts.js). */
  .site-nav ul{ max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(6px + var(--banner-h, 0px)); }
  /* scripts.js sets body.menu-open while the menu is open: the fixed WhatsApp button and sticky CTA bar would sit
     on top of the menu's last items. */
  body.menu-open .whatsapp-float, body.menu-open .sticky-cta{ display: none; }
  .has-menu .menu-row{ justify-content: space-between; }
  .has-menu .navlink{ flex: 1; padding-right: 24px; }
  .menu-caret{ width: 52px; height: 48px; margin: 0; }
  .mega, .mega-right{
    position: static; min-width: 0; padding: 0 14px 10px 22px; border: 0; border-radius: 0; box-shadow: none; background: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; display: none; transition: none;
  }
  .mega::before{ display: none; }
  .has-menu:hover .mega, .has-menu:focus-within .mega{ display: none; }
  /* The desktop open-state rule (.has-menu.open .mega{ transform: translate(-50%, 0) }) is more specific than the
     .mega reset above, so it kept centring the panel by -50% of its width and pushed the accordion content off the
     left edge on phones. Reset it here at equal specificity (this rule comes later). .mega-right has its own
     translate(0, 0) open rule and was never affected. */
  .has-menu.open .mega{ display: block; transform: none; }
  .mega-cols-2{ grid-template-columns: 1fr; min-width: 0; }
  .mega-item{ padding: 9px 10px; }
  .mega-all{ padding: 10px 10px 2px; }
}

/* ---- Navy accent band (process) ---- */
.band-navy{ position: relative; isolation: isolate; overflow: hidden; background: var(--navy-band); color: var(--on-dark); }
.band-navy::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(620px 300px at 10% 0%, rgba(224,138,26,.18), transparent 70%),
                    radial-gradient(720px 380px at 92% 100%, rgba(90,140,230,.26), transparent 70%),
                    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}
.band-navy h2, .band-navy h3{ color: #fff; }
.band-navy .sec-head p{ color: var(--on-dark-2); }
.band-navy .sec-head .eyebrow{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--gold-soft); }
.band-navy .stepper{ align-items: stretch; }
.band-navy .step{ display: flex; flex-direction: column; }
.band-navy .step .fnum{ background: #0E2447; color: #fff; border-color: var(--gold); box-shadow: 0 0 0 6px #133060, 0 10px 24px rgba(0,0,0,.3); }
.band-navy .step-card{
  flex: 1; margin-top: 4px; padding: 20px 18px 22px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line);
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.band-navy .step:hover .step-card{ transform: translateY(-4px); background: rgba(255,255,255,.11); border-color: rgba(246,217,168,.5); }
.step-ic{ display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 13px; background: rgba(224,138,26,.16); color: var(--gold-soft); }
.step-ic .ic{ width: 22px; height: 22px; }
.band-navy .step h3{ font-size: 1.02rem; color: #fff; }
.band-navy .step p{ color: var(--on-dark-2); }
@media (max-width: 640px){ .band-navy .step-card{ margin-top: 0; } }

/* ---- Closing call to action: a floating navy card (every page that carries .cta-band) ---- */
.cta-band{ padding: 40px 0 96px; background: none; background-image: none; border-top: 0; }
.cta-band .container{
  position: relative; isolation: isolate; overflow: hidden; width: min(1152px, calc(100% - 48px)); max-width: none; padding: 64px 40px;
  border-radius: 32px; background: var(--navy-band); color: var(--on-dark); box-shadow: 0 30px 70px rgba(11,29,61,.28);
}
.cta-band .container::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(520px 260px at 14% 0%, rgba(224,138,26,.24), transparent 70%),
                    radial-gradient(560px 300px at 92% 100%, rgba(90,140,230,.3), transparent 70%),
                    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.cta-band h2{ color: #fff; }
.cta-band p{ color: var(--on-dark-2); }
.cta-band .btn-ghost{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
.cta-band .btn-ghost:hover, .cta-band .btn-ghost:focus-visible{ background: rgba(255,255,255,.18); }
@media (max-width: 640px){ .cta-band{ padding: 24px 0 64px; } .cta-band .container{ padding: 44px 22px; border-radius: 26px; width: calc(100% - 32px); } }

/* ---- Footer ---- */
.site-footer{ position: relative; }
.site-footer::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold) 50%, var(--navy-mid)); }
.badge-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.badge-row li{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); font-size: .8125rem; font-weight: 600; color: var(--navy-dark); }
.badge-row .ic{ width: 16px; height: 16px; color: var(--gold-dark); }
.footer-col a[aria-current="page"]{ color: var(--navy); font-weight: 600; }

/* ---- Contents bar (long guides) ---- */
.toc-bar{ position: sticky; top: var(--header-h); z-index: 25; background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.toc-bar .container{ display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.toc-bar .container::-webkit-scrollbar{ display: none; }
.toc-label{ display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.toc-label .ic{ width: 16px; height: 16px; color: var(--gold-dark); }
.toc-bar ul{ display: flex; gap: 8px; }
.toc-bar a{ display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--navy-dark); background: var(--tint-navy); transition: background-color .2s, color .2s; }
.toc-bar a:hover, .toc-bar a:focus-visible, .toc-bar a.is-active{ background: var(--navy); color: #fff; }
h2[id]{ scroll-margin-top: 150px; }
.read-progress{ position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), var(--navy-mid)); }

/* ---- Related pages ---- */
.related{ padding: 24px 0 88px; }
.related .sec-head h2{ font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.related-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 28px; }
.related-card{ position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.related-card:hover, .related-card:focus-visible{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.related-card:hover .tile{ background: var(--navy); color: #fff; border-color: var(--navy); }
.rc-tx{ flex: 1; min-width: 0; }
.rc-tx b{ display: block; font-size: .96875rem; font-weight: 600; line-height: 1.3; color: var(--navy-dark); }
.rc-tx small{ display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.4; color: var(--slate); }
.rc-arrow{ width: 20px; height: 20px; color: var(--navy); transition: transform .25s var(--ease); }
.related-card:hover .rc-arrow{ transform: translateX(4px); }
@media (max-width: 640px){ .related{ padding: 8px 0 56px; } }

/* ---- Bullet points: gold check badges in long-form content ---- */
.guide-body ul:not(.more-guides), .legal-body ul:not(.more-guides){ margin-left: 0; padding-left: 0; list-style: none; }
.guide-body ul:not(.more-guides) > li, .legal-body ul:not(.more-guides) > li{ position: relative; margin: 9px 0; padding-left: 32px; }
.guide-body ul:not(.more-guides) > li::before, .legal-body ul:not(.more-guides) > li::before{
  content: ''; position: absolute; left: 0; top: .22em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A05E0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---- Page intro: a soft dotted accent ---- */
.page-intro{ position: relative; }
@media (min-width: 900px){
  .page-intro::after{
    content: ''; position: absolute; right: 24px; top: 8px; width: 260px; height: 130px; pointer-events: none;
    background-image: radial-gradient(rgba(23,53,107,.2) 1.4px, transparent 1.6px); background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
  }
}

/* ---- Effects ---- */
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn-primary:hover::after, .btn-primary:focus-visible::after{ left: 130%; }
.market-block, .related-card{ position: relative; overflow: hidden; }
.category-card::before, .market-block::before, .related-card::before{
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(224,138,26,.13), transparent 65%);
}
.category-card:hover::before, .market-block:hover::before, .related-card:hover::before{ opacity: 1; }
.category-card > *, .market-block > *, .related-card > *{ position: relative; z-index: 1; }
.js-reveal .reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.js-reveal .reveal.in{ opacity: 1; transform: none; }
@media print{ .js-reveal .reveal{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .btn-primary::after{ display: none; } .js-reveal .reveal{ opacity: 1; transform: none; transition: none; } }

/* ---- WorkVisaCRM logo (Home, "From the same group"). Multiply lets the logo's white margin melt into the card ---- */
.platform-logo{ display: block; width: 176px; height: auto; margin: 0 0 22px -6px; mix-blend-mode: multiply; }
@media (max-width: 640px){ .platform-logo{ width: 150px; margin-bottom: 18px; } }

/* ---- Inline links in running text are underlined, so they never rely on colour alone (WCAG 1.4.1).
        :where() keeps the base rule's weight at zero; the exceptions below then win without !important ---- */
main :where(p, li, dd) a:not([class]){ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(36,85,155,.45); }
main :where(p, li, dd) a:not([class]):hover, main :where(p, li, dd) a:not([class]):focus-visible{ color: var(--navy-dark); text-decoration-thickness: 2px; text-decoration-color: currentColor; }
main :is(.toc-bar, .breadcrumbs, .more-guides, .related) a:not([class]){ text-decoration: none; }

/* ---- Footer group labels (were <h4>, which skipped heading levels on every page) ---- */
.footer-h{ margin: 0 0 12px; font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.footer-col[aria-label="Recruitment Network"] .footer-h{ grid-column: 1 / -1; }

/* ---- "Cookie settings" (footer) reopens the consent banner ---- */
.linkbtn{ padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.linkbtn:hover, .linkbtn:focus-visible{ color: var(--gold-soft); }

/* ==========================================================================
   V3 MARKET CARDS (2026-09-22): Europe / Russia / Vietnam on Home and /target-markets.
   Markup comes from the shared macro _src/_includes/market-card.njk. Owner request: "beautify this" (the old cards were
   plain text with wrapping pills, uneven empty space, and a gold button whose label wrapped to two left-aligned lines).
   Design: icon tile + count pill on top, a hairline, then flag rows (Europe) or role rows with icons (Russia, Vietnam),
   and a one-line centred button pinned to the bottom so the three cards always line up.
   ========================================================================== */
.market-card{ display: flex; flex-direction: column; padding: 32px 30px 28px; }
.market-card::after{ /* a soft warm glow in the top-left corner, behind the content */
  content: ''; position: absolute; z-index: 0; top: -96px; left: -72px; width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224,138,26,.15), rgba(224,138,26,0));
}
.market-card .mc-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.market-card .mc-icon{
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #fff;
  background: var(--grad-navy); box-shadow: 0 12px 24px rgba(23,53,107,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.market-card .mc-icon .ic{ width: 27px; height: 27px; }
.market-card .mc-count{
  padding: 6px 13px; border-radius: 999px; background: var(--tint-gold); border: 1px solid var(--gold-soft);
  color: var(--gold-dark); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.market-card h3{ margin: 0; }
.market-card > p:not(.mc-label){ margin-top: 12px; }
.market-card .mc-label{
  margin: 24px 0 14px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.market-card .mc-list{ display: grid; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.market-card .mc-countries{ grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.market-card .mc-list li{
  display: flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; border-radius: 0;
  font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--ink);
}
.market-card .mc-list li::before, .market-card .mc-list li::after{ display: none; }
.market-card .mc-ri{
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px;
  background: var(--tint-navy); border: 1px solid var(--line-soft); color: var(--navy);
}
.market-card .mc-ri .ic{ width: 18px; height: 18px; }
.market-card .flag{
  flex: none; display: block; width: 30px; height: 20px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.market-card .flag svg{ display: block; width: 100%; height: 100%; }
.market-card .mc-cta{
  margin-top: auto; align-self: stretch; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 20px;
  font-size: .9375rem; line-height: 1.3; text-align: center; white-space: normal;
}
.market-card .mc-cta .ic{ flex: none; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.market-card .mc-cta:hover .ic, .market-card .mc-cta:focus-visible .ic{ transform: translateX(4px); }
@media (max-width: 640px){
  .market-card{ padding: 26px 22px 24px; }
  .market-card .mc-icon{ width: 48px; height: 48px; border-radius: 15px; }
  .market-card .mc-icon .ic{ width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce){ .market-card .mc-cta .ic{ transition: none; } }

/* Countries are tiles, so the short Europe list carries the same visual weight as the six role rows next to it */
.market-card .mc-countries li{ padding: 8px 12px; min-height: 46px; background: var(--tint-navy); border: 1px solid var(--line-soft); border-radius: 12px; }

/* Three columns: the cards share their row tracks (subgrid), so every title, divider, list and button lines up across
   the three cards, and a shorter list spreads out to the height of the tallest one instead of leaving a gap. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 901px){
    .markets-grid{ row-gap: 0; }
    .market-card{ display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .market-card .mc-list{ align-content: space-between; }
    .market-card .mc-cta{ align-self: end; }
  }
}

/* ==========================================================================
   V3 FIXES (2026-09-22): accessibility and responsive bugs found by the UX audit. Kept apart from the design
   layer so each can be reviewed or dropped on its own; apply-v3.js appends this file after v3.css.
   ========================================================================== */

/* ---- Side gutters. These three carry .container but reset its padding with a "padding: X 0 Y" shorthand, so on
        tablets and phones the breadcrumb, the page title and every guide and legal page sat against the screen edge ---- */
.breadcrumbs.container, .page-intro.container, .legal-body.container{ padding-left: var(--space-5); padding-right: var(--space-5); }

/* ---- Reading width: long-form text stops at about 74 characters, where it is comfortable to read
        (guide lines reached 170+ characters on a wide screen). Tables, the contents box and callouts keep the full width ---- */
.legal-body :is(p, ul, ol, h2, h3, h4){ max-width: 74ch; }
.legal-body :is(h2, h3)[id], .guide-body :is(h2, h3)[id]{ scroll-margin-top: 150px; } /* clears the sticky header (77px) and contents bar (61px) */

/* ---- Narrow phones: nothing may be clipped or push the page wider.
        Home: the MEA licence number (one unbroken 31-character string) was wider than its card, and the strip clips overflow,
        so the end of the number was cut off. About: a no-wrap button set the minimum width of a card at 320px. ---- */
.cred-strip .cred-card > div{ min-width: 0; }
.cred-strip .cred-value, .cred-strip .cred-eyebrow{ overflow-wrap: anywhere; }
.resp-card{ min-width: 0; }
@media (max-width: 400px){
  .resp-card .btn{ white-space: normal; height: auto; min-height: 48px; padding: 10px 18px; text-align: center; }
}

/* ---- Home hero: four proof items now (the MEA licence joined the three counters), so the desktop gap is tighter to keep them on one row ---- */
@media (min-width: 641px){ .hero-proof{ gap: 20px 22px; } .hero-proof span{ font-size: .8125rem; } }

/* ---- Overlays on phones ---- */
.whatsapp-float{ bottom: 20px; } /* the 88px lift was reserved for a sticky call-to-action bar that no page carries */
@media (min-width: 901px){ .whatsapp-float{ bottom: 32px; } }
.wfi-cookie-banner.show ~ .whatsapp-float{ bottom: calc(var(--banner-h, 0px) + 16px); } /* sits above the banner while it is open */
.wfi-cookie-banner :focus-visible{ outline: 2px solid var(--gold-soft); outline-offset: 2px; }
@media (max-width: 640px){
  .wfi-cookie-banner{ padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; font-size: 13px; line-height: 1.4; }
  .wfi-cookie-banner p{ flex-basis: 100%; }
  .wfi-cookie-actions{ width: 100%; }
  .wfi-cookie-actions button{ flex: 1; padding: 9px 10px; }
}

/* ---- Enquiry forms (skin only: the form's markup and submit logic are untouched) ---- */
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform input[type=url], .cform input[type=number], .cform input[type=month], .cform textarea, .cform select{ border-color: var(--field-line, #788AA8); }
.cform input[type=text]:hover, .cform input[type=email]:hover, .cform input[type=tel]:hover, .cform input[type=url]:hover, .cform input[type=number]:hover, .cform input[type=month]:hover, .cform textarea:hover, .cform select:hover{ border-color: var(--navy-mid); }
.cform input:focus-visible, .cform textarea:focus-visible, .cform select:focus-visible{ outline: 2px solid var(--navy-mid); outline-offset: 2px; }
.cform input[type=checkbox]{ accent-color: var(--navy); }
.cform input[type=checkbox]:focus-visible{ outline: 3px solid var(--navy-mid); outline-offset: 2px; box-shadow: none; }
.cform [aria-invalid="true"]{ border-color: var(--error); box-shadow: 0 0 0 3px rgba(192,57,43,.16); }
.cform input[type=checkbox][aria-invalid="true"]{ outline: 2px solid var(--error); outline-offset: 2px; box-shadow: none; }
.form-success:focus{ outline: none; }

/* ---- Home hero card title: was an <h3> straight after the <h1> (a skipped heading level); now a plain label, same look ---- */
.art-head .art-title{ margin: 0; font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--navy-dark); }

/* ---- A menu dismissed with Esc stays closed until the pointer or focus leaves it (WCAG 1.4.13) ---- */
.has-menu.dismissed:hover .mega, .has-menu.dismissed:focus-within .mega{ opacity: 0; visibility: hidden; pointer-events: none; }

/* ==========================================================================
   THEME: PORCELAIN & NAVY - 2026-09-22
   Owner request: "change the website background colour theme, decide what is ideal for this kind of website".
   Decision, in one line: trust comes from a cool, clean, blue-tinted canvas with deep navy for weight, and
   gold is kept for the one thing a visitor should do (send a requirement).
     - Canvas  #F3F7FC  cool porcelain: calmer than pure white for long compliance reading, and white cards
                        lift off it, which the old white-on-white page could not do
     - Bands   #E8EFF9  a deeper tint for alternating sections
     - Navy    #0B1D3D  process band, closing card and footer: the weight and authority of a licensed agency
     - Gold    #E08A1A  buttons and small highlights only (warm against cool, so the action stands out)
   Everything is driven by the tokens below. To go back to the ivory look, delete this block (from this comment
   to the end of the file), or remove theme.css from .claude/tools/apply-v3.js and run it again.
   ========================================================================== */
:root{
  --canvas: #F3F7FC;
  --mist: #E8EFF9;
  --tint-navy: #EDF3FC;
  --tint-gold: #FFF3DC;
  --line: #D6E1F0;
  --line-soft: #E0E8F4;
  --slate: #536078;
  --gold-dark: #96560A;   /* 5.0:1 on the band tint (was 4.4:1): small gold text and eyebrows */
  --error: #C0392B;       /* 5.4:1 on white (was 4.4:1) */
  --field-line: #788AA8;  /* form field borders: 3.5:1 on white, 3.0:1 on the band tint (was 1.3:1) */
  --grad-page: radial-gradient(1000px 520px at 92% -8%, rgba(36,85,155,.14) 0%, rgba(36,85,155,0) 70%),
               radial-gradient(760px 460px at -6% 4%, rgba(224,138,26,.10) 0%, rgba(224,138,26,0) 68%);
}
body{ background-color: var(--canvas); }

/* Surfaces that carried the old warm / green-grey tints */
.hero-art{ background-image: linear-gradient(180deg, #FFFFFF 0%, #EAF1FB 100%); }
.market-block, .eq-side{ background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F7FD 100%); }
.md-quote{ background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F7FD 100%); }
.legal-toc{ background-image: linear-gradient(180deg, #FAFCFF 0%, #EDF3FC 100%); }

/* Footer: deep navy, so the page ends with the same weight it opens the process section with */
.site-footer{
  background-color: var(--navy-deep); border-top: 0; color: var(--on-dark-2);
  background-image: radial-gradient(900px 360px at 8% 0%, rgba(43,98,180,.34), transparent 70%),
                    radial-gradient(720px 320px at 100% 100%, rgba(224,138,26,.12), transparent 70%);
}
.site-footer::before{ background: linear-gradient(90deg, var(--navy-mid), var(--gold) 50%, var(--navy-mid)); }
.footer-brand img{ mix-blend-mode: normal; box-sizing: content-box; padding: 7px; background: #fff; border-radius: 18px; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.footer-brand p, .footer-current{ color: rgba(244,247,252,.76); }
.footer-col h4{ color: var(--gold-soft); }
.footer-col a{ color: rgba(244,247,252,.88); }
.footer-col a:hover, .footer-col a:focus-visible{ color: #fff; }
.footer-col a[aria-current="page"]{ color: #fff; font-weight: 600; }
.footer-col[aria-label="Recruitment Network"]{ border-top-color: rgba(255,255,255,.14); }
.disc{ color: rgba(244,247,252,.7); border-top-color: rgba(255,255,255,.14); }
.foot-bottom, .foot-bottom > span, .licence-badge{ color: rgba(244,247,252,.72); }
.foot-bottom b, .licence-badge b{ color: #fff; }
.licence-badge .verify-link{ color: var(--gold-soft); }
.licence-badge .verify-link:hover, .licence-badge .verify-link:focus-visible{ color: #fff; }
.badge-row li{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.badge-row .ic{ color: var(--gold-soft); }
.social-bar a{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); box-shadow: none; }
.footer-col .social-bar a{ color: #fff; }
.footer-col .social-bar a:hover, .footer-col .social-bar a:focus-visible{ border-color: transparent; }
.footer-col .social-bar a.ic-linkedin:hover, .footer-col .social-bar a.ic-linkedin:focus-visible{ color: var(--brand-linkedin); }
.footer-col .social-bar a.ic-facebook:hover, .footer-col .social-bar a.ic-facebook:focus-visible{ color: var(--brand-facebook); }
.footer-col .social-bar a.ic-instagram:hover, .footer-col .social-bar a.ic-instagram:focus-visible{ color: var(--brand-instagram); }
.footer-col .social-bar a.ic-x:hover, .footer-col .social-bar a.ic-x:focus-visible{ color: var(--brand-x); }
.footer-col .social-bar a.ic-whatsapp:hover, .footer-col .social-bar a.ic-whatsapp:focus-visible{ color: var(--whatsapp-green); }
.footer-col .social-bar a.ic-website:hover, .footer-col .social-bar a.ic-website:focus-visible{ color: var(--navy-dark); }

/* Keyboard focus must stay visible on every dark surface */
.site-footer :focus-visible, .band-navy :focus-visible, .cta-band .container :focus-visible{ outline: 2px solid var(--gold-soft); outline-offset: 3px; }

@media print{
  .site-footer{ background: #fff; color: #000; }
  .site-footer *{ color: #000 !important; }
}
.footer-col .footer-h{ color: var(--gold-soft); }
/* ==========================================================================
   2026-09-25 audit fixes (A2-05, A2-08, A5-11)
   ========================================================================== */
/* Hero route map on phones: the 520-unit SVG scales down to roughly half size, so its labels were rendering at
   ~7px. Larger label text in SVG units; the two edge labels are nudged inward so the bigger text stays inside the
   map (needs class="lbl-gulf" / "lbl-my" on those <text> elements in index.njk). */
@media (max-width: 480px){
  .corridor-map text{ font-size: 19px; stroke-width: 5px; }
  .corridor-map text.origin-label{ font-size: 20px; }
  .corridor-map text.lbl-gulf{ transform: translate(0, 6px); }
  .corridor-map text.lbl-my{ transform: translate(-14px, 0); }
}
@media (max-width: 359px){
  .corridor-map text{ font-size: 21px; }
  .corridor-map text.origin-label{ font-size: 22px; }
  .corridor-map text.lbl-my{ transform: translate(-20px, 0); }
}
/* Minimum 24px pointer targets (WCAG 2.5.8) for the small inline links and buttons */
.linkbtn{ display: inline-flex; align-items: center; min-height: 24px; vertical-align: middle; }
.breadcrumbs a{ display: inline-flex; align-items: center; min-height: 24px; }
.verify-link{ display: inline-flex; align-items: center; min-height: 24px; }
/* Consent / confirmation checkboxes: a larger box, and a visible error state (the form script marks it invalid) */
.cform .consent input[type=checkbox]{ width: 18px; height: 18px; margin-top: 1px; }
.cform .consent input[type=checkbox].invalid{ outline: 2px solid var(--error); outline-offset: 2px; box-shadow: none; }