/* ==========================================================================
   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;
}

@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: 56px; height: 55px; } /* was 40x39 — too small next to the wordmark; matches the footer logo's size */
.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; }
}
@media (max-width: 640px){
  .menu-toggle{ display: flex; }
  .site-nav ul{
    position: fixed; top: 68px; 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; padding: 13px 24px; }
  .site-nav .btn{ margin: 10px 24px; text-align: center; }
}

/* ==========================================================================
   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 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: 56px; height: 55px; }
.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; } }
@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 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);
}