/* ==========================================================================
   Sagar International Manpower — homepage
   ========================================================================== */

:root{
  --navy:        #022C84;
  --navy-deep:   #071F5C;
  --navy-ink:    #0B1B3F;
  --orange:      #FC7B05;
  --orange-dark: #E56C00;

  --text:        #17203C;
  --muted:       #5D6B8A;
  --line:        #E3E9F4;

  --bg:          #FFFFFF;
  --bg-soft:     #F5F8FD;
  --blue-soft:   #EDF3FD;
  --peach-soft:  #FEF2E9;

  --radius:      14px;
  --radius-lg:   18px;
  --shadow:      0 6px 22px rgba(10, 35, 95, .07);
  --shadow-lg:   0 14px 40px rgba(10, 35, 95, .12);

  --container:   1180px;
  --f-head:      'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:120px; }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--f-head); margin:0; line-height:1.15; letter-spacing:-.01em; }

/* ------------------------------------------------------- counting numbers */
/* main.js counts any [data-count] up when it scrolls into view, and it does so
   by writing textContent — which would swallow a "+" sitting inside the same
   element. So the digits stay in the HTML (the real figure, so the page still
   reads correctly with no JavaScript and under prefers-reduced-motion, where
   the counter never runs) and the plus is drawn by CSS instead.

   The homepage does the same job with a separate .stat__plus element; these
   bands cannot, because their own label rules would capture an extra span. */
.astat b[data-count]::after,
.dstat b[data-count]::after,
.cstat__num[data-count]:not(.cstat__num--pct):not(.cstat__num--plain)::after,
.empband__t--num[data-count]::after{ content:'+'; }
.cstat__num--pct[data-count]::after{ content:'%'; }   /* 100% satisfaction */
/* .cstat__num--plain takes no suffix at all — "23 Trades Supplied" */

/* Uniform digit widths, so a number only reflows when it gains a digit rather
   than on every frame of the count. */
[data-count]{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- line breaking */
/* Headings and short centred blocks were stranding a single word on the last
   line — most visible in the centred card copy, the section rules and the
   tile labels, where a one-word final line reads as a mistake rather than as
   rag. `balance` evens out the lines of a heading; `pretty` only steps in to
   stop an orphan, so long body copy keeps its normal rag and its normal
   line count. Both are progressive enhancements: a browser without them
   renders exactly what it renders today. */
h1, h2, h3, h4,
.rule-title span,
.acard__title, .tile__name, .stat__label,
.hfiteaser__title, .why__title, .assist__title{ text-wrap:balance; }

p, li, figcaption, .shot__cap, .acard__sub{ text-wrap:pretty; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.center{ text-align:center; }
.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;
}
.t-orange{ color:var(--orange); }

/* ------------------------------------------------------------ focus ring */
/* The site had no focus indicator at all outside two form-field rules, which
   left keyboard users with no way to see where they were. :focus-visible so a
   mouse click never paints a ring, only keyboard navigation does. */
:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}
/* on navy the orange ring is legible, but a white halo keeps it visible over
   the photographs the heroes carry */
.site-header .btn:focus-visible,
.footer a:focus-visible,
.phero a:focus-visible,
.crhero a:focus-visible,
.cthero a:focus-visible,
.chero a:focus-visible{
  outline-color:#fff; box-shadow:0 0 0 6px rgba(252,123,5,.55);
}
/* fields draw their own ring, so keep the outline off them and reuse it */
.field input:focus-visible,
.field select:focus-visible,
.ctform input:focus-visible,
.ctform textarea:focus-visible{ outline:none; }

/* --------------------------------------------------------- skip to content */
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:200;
  padding:12px 20px;
  background:var(--navy); color:#fff;
  font-size:13.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:0 0 8px 8px;
  transition:top .18s ease;
}
.skip-link:focus{ top:0; }
/* the skip target takes focus so the jump actually moves the caret, but it is
   a page region, not a control — it must never draw a focus ring */
main:focus,
main:focus-visible{ outline:none; }

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  font-family:var(--f-body);
  font-size:13.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid transparent; border-radius:8px;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--sm{ padding:10px 18px; font-size:12.5px; letter-spacing:.08em; }

.btn--orange{ background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(252,123,5,.28); }
.btn--orange:hover{ background:var(--orange-dark); box-shadow:0 10px 24px rgba(252,123,5,.36); }

.btn--navy{ background:var(--navy); color:#fff; box-shadow:0 6px 16px rgba(2,44,132,.24); }
.btn--navy:hover{ background:#021F63; box-shadow:0 10px 24px rgba(2,44,132,.32); }

.btn--ghost{ background:#fff; color:var(--navy); border-color:#CBD8EE; box-shadow:var(--shadow); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); }

/* arrow glyph */
.arw{
  width:14px; height:8px; flex:none; position:relative; display:inline-block;
  background:currentColor;
  clip-path:polygon(0 42%,72% 42%,72% 0,100% 50%,72% 100%,72% 58%,0 58%);
  transition:transform .18s ease;
}
.btn:hover .arw{ transform:translateX(3px); }

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-stuck{ box-shadow:0 4px 18px rgba(10,35,95,.08); }

.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  min-height:96px; padding-block:6px;
}

/* The supplied logo lockup. The artwork itself is unchanged — only the blank
   white margin baked into the file has been trimmed, so it fills the bar. */
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:78px; width:auto; }

.header__right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:1; min-width:0; }

.header__utility{ display:flex; align-items:center; gap:18px; }
/* three numbers beside "Enquire Now": two for the head office, one for the
   Lucknow branch, each office named in a small label ahead of its numbers */
.header__phones{ display:flex; align-items:center; gap:14px; }
.header__office{ display:flex; align-items:center; gap:9px; margin:0; white-space:nowrap; }
.header__office--branch{ padding-left:14px; border-left:1px solid var(--line); }
.header__lbl{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#7A88A6;
}
.header__phone{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:var(--navy-ink); white-space:nowrap;
}
.header__phone svg{ width:15px; height:15px; fill:var(--navy); flex:none; }
.header__phone:hover{ color:var(--orange); }
.header__phone--alt::before{ content:'/'; margin-right:2px; font-weight:500; color:#A9B4CA; }

/* the same numbers inside the phone menu — hidden until the header runs out
   of room for them (see the 620px breakpoint) */
.mainnav__call{ display:none; }

.mainnav{ display:flex; align-items:center; gap:18px; }
.mainnav a{
  position:relative; padding-block:4px;
  font-size:12.5px; font-weight:700; letter-spacing:.075em; text-transform:uppercase;
  color:#41506F; white-space:nowrap;
  transition:color .18s ease;
}
.mainnav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:2.5px;
  background:var(--orange); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.mainnav a:hover{ color:var(--navy); }
.mainnav a.is-active{ color:var(--orange); }
.mainnav a.is-active::after,
.mainnav a:hover::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:0 9px;
  background:var(--navy); border:0; border-radius:8px; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:#fff; border-radius:2px; transition:.22s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; overflow:hidden; background:#fff; }

/* the map art sits in its own right-anchored box so the pin labels can be
   positioned as a percentage of the artwork itself at any viewport width */
.hero__bg{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-end;
  overflow:hidden;
}
.hero__mapwrap{ position:relative; flex:none; width:64%; margin-bottom:-4%; }
.hero__mapwrap img{ width:100%; height:auto; }

/* looping background clip — decorative, so no controls and no interaction.
   Held back with opacity + desaturation so it reads as a backdrop and never
   competes with the headline. */
.hero__video{
  display:block; width:100%; height:auto;
  pointer-events:none; user-select:none;
  background:#fff;
  opacity:.42;
  filter:saturate(.55) contrast(.92);
}
/* belt and braces: hide every native control surface WebKit might draw */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0;
}

/* white wash so the headline stays legible over the artwork */
.hero__fade{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(100deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.98) 34%,
      rgba(255,255,255,.90) 42%,
      rgba(255,255,255,.52) 50%,
      rgba(255,255,255,.14) 58%,
      rgba(255,255,255,0)   64%);
}

.hero__inner{
  position:relative; z-index:4;
  display:grid; grid-template-columns:minmax(0,46%) minmax(0,54%);
  align-items:center;
  min-height:440px; padding-block:46px 52px;
}

.eyebrow{
  display:flex; align-items:center; gap:8px; margin:0 0 16px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.eyebrow__num{ color:var(--orange); }
.eyebrow .dot{ width:4px; height:4px; border-radius:50%; background:var(--orange); display:inline-block; }

.hero__title{
  font-size:clamp(32px, 3.3vw, 46px);
  font-weight:800; letter-spacing:-.02em; line-height:1.1;
  color:var(--navy); text-transform:uppercase;
  margin-bottom:20px;
}

.hero__lede{
  max-width:430px; margin:0 0 28px;
  font-size:15.5px; color:var(--muted); line-height:1.75;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* map labels */
.pin{
  position:absolute; left:var(--x); top:var(--y); z-index:5;
  transform:translate(13px,-50%);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-ink); white-space:nowrap;
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.9);
}
.pin--left{ transform:translate(-100%,-50%); margin-left:-13px; }

/* ----------------------------------------------------------------- stats */
.stats-wrap{ position:relative; background:var(--bg-soft); padding-bottom:0; }
/* soften the seam where the hero art meets the light section */
.stats-wrap::before{
  content:''; position:absolute; left:0; right:0; bottom:100%; height:70px;
  background:linear-gradient(rgba(245,248,253,0), var(--bg-soft));
  pointer-events:none;
}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(120deg, #082463 0%, #05205A 55%, #0A2A72 100%);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 44px rgba(6,30,85,.22);
  overflow:hidden;
}

.stat{ display:flex; align-items:flex-start; gap:15px; padding:24px 22px; position:relative; }
.stat + .stat::before{
  content:''; position:absolute; left:0; top:24px; bottom:24px; width:1px;
  background:rgba(255,255,255,.16);
}

/* outlined orange ring, matching the reference */
.stat__icon{
  flex:none; width:56px; height:56px; display:grid; place-items:center;
  background:transparent;
  border:2px solid rgba(252,123,5,.9); border-radius:50%;
}
.stat__icon svg{ width:29px; height:29px; fill:var(--orange); }

.stat__text{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 4px; min-width:0; }
.stat__num,.stat__plus{
  font-family:var(--f-head); font-size:29px; font-weight:800; color:#fff; line-height:1;
}
.stat__plus{ margin-left:-3px; }
.stat__label{
  flex-basis:100%;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72); line-height:1.5; margin-top:3px;
}
.stat__label--lg{ font-size:13px; color:#fff; letter-spacing:.08em; margin-top:0; }
.stat__text--wide{ align-items:flex-start; }

/* ---------------------------------------------------------------- layout */
.section{ background:var(--bg-soft); padding-block:34px; }
.section--tight{ padding-block:22px; }
.section:last-of-type{ padding-bottom:44px; }

/* section rule title:  —— OUR SERVICES —— */
.rule-title{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:0 0 20px;
  font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.rule-title::before,
.rule-title::after{
  content:''; height:1px; width:clamp(40px,12vw,150px);
  background:linear-gradient(90deg, transparent, #F5B77A);
}
.rule-title::after{ background:linear-gradient(270deg, transparent, #F5B77A); }

/* -------------------------------------------------------- audience cards */
.audience{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }

.acard{
  display:flex; gap:18px; padding:26px 26px 24px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
}
.acard--blue{ background:var(--blue-soft); }
.acard--peach{ background:var(--peach-soft); }

.acard__icon{
  flex:none; width:96px; height:96px; display:grid; place-items:center;
  background:#DAE5F9; border-radius:50%;
}
.acard__icon svg{ width:54px; height:54px; fill:var(--navy); }
.acard__icon--orange{ background:#FBE2CC; }
.acard__icon--orange svg{ fill:var(--orange); }

.acard__title{
  font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  color:var(--navy); margin-bottom:5px;
}
.acard--peach .acard__title{ color:var(--orange); }
.acard__sub{ margin:0 0 12px; font-size:15px; color:var(--muted); }
.acard .btn{ margin-top:16px; }

/* tick lists */
.ticks li{
  position:relative; padding-left:22px; margin-bottom:7px;
  font-size:14.5px; color:#33415F;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:6px; width:13px; height:8px;
  border-left:2.2px solid var(--orange); border-bottom:2.2px solid var(--orange);
  transform:rotate(-45deg) scale(.85); transform-origin:center;
}
/* ticks pick up the card's own accent */
.acard--blue .ticks li::before{ border-color:var(--navy); }
.acard--peach .ticks li::before{ border-color:var(--orange); }

.ticks--two{ display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; }
.ticks--light li{ color:rgba(255,255,255,.9); font-size:14px; }

/* ------------------------------------------------------ destination/svc tiles */
.tilegrid{ display:grid; gap:14px; margin-bottom:18px; }
.tilegrid--8{ grid-template-columns:repeat(8,1fr); }
.tilegrid--6{ grid-template-columns:repeat(6,1fr); }

.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:18px 8px 15px; min-height:88px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover{ transform:translateY(-4px); border-color:#C9D9F2; box-shadow:var(--shadow-lg); }

.tile__flag{ display:block; width:40px; }
.tile__flag img{
  width:100%; height:27px; object-fit:cover;
  border-radius:3px; box-shadow:0 1px 4px rgba(10,35,95,.22);
}
.tile__ico{ display:grid; place-items:center; width:34px; height:34px; }
.tile__ico svg{ width:28px; height:28px; fill:var(--navy); transition:fill .2s ease; }
.tile:hover .tile__ico svg{ fill:var(--orange); }

.tile__name{
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy-ink); line-height:1.45;
  min-height:calc(2 * 1.45em);   /* see the note above about wrapping labels */
}
.tile--svc{ min-height:96px; }

/* ------------------------------------------------------------ why choose */
.why{
  display:grid; grid-template-columns:minmax(0,38%) minmax(0,62%);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 16px 40px rgba(6,30,85,.2);
}
.why__media{
  position:relative;
  background:url('../img/hero/why-choose.jpg') center/cover no-repeat;
  min-height:210px;
}
/* tie the photo to the navy panel beside it and take the glare off the sky */
.why__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(8,36,99,.42) 0%, rgba(8,36,99,.12) 55%, rgba(8,36,99,.30) 100%);
}
.why__panel{
  background:linear-gradient(120deg,#082463 0%,#05205A 60%,#0A2A72 100%);
  padding:26px 34px 28px;
}
.why__eyebrow{
  margin:0 0 7px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.why__title{
  font-size:clamp(21px,2.3vw,29px); font-weight:800; color:#fff; margin-bottom:16px;
}
.ticks--light li::before{ border-color:var(--orange); }

/* -------------------------------------------------------------- clients */
.logos{ display:grid; grid-template-columns:repeat(7,1fr); gap:14px; margin-bottom:18px; }

.logo{
  display:grid; place-items:center; height:74px; padding:6px 10px; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.logo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.logo img{
  max-height:72px; width:auto; object-fit:contain;
  transform:scale(1.14); /* the source files carry a wide white margin */
  transition:transform .25s ease;
}
.logo:hover img{ transform:scale(1.22); }

.logo--more{ gap:5px; }
.logo--more svg{ width:24px; height:24px; fill:var(--navy); }
.logo--more span{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-ink);
}

/* ---------------------------------------------- work-in-progress pages */
.wip{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:min(66vh, 560px);
  padding-block:70px 130px;
  background:#fff; text-align:center;
}
.wip__bg{
  position:absolute; left:0; right:0; bottom:0; height:62%;
  background:url('../img/hero/skyline.jpg') no-repeat center bottom;
  background-size:100% auto;
}
.wip__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(#fff 0%, rgba(255,255,255,.95) 22%, rgba(255,255,255,.85) 60%,
                             rgba(255,255,255,.80) 100%);
}
.wip__inner{ position:relative; z-index:2; }

.crumbs{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:18px;
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.crumbs a{ color:var(--navy); }
.crumbs a:hover{ color:var(--orange); }
.crumbs span[aria-hidden]{ color:#667694; }

.wip__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; margin-bottom:18px;
  background:rgba(252,123,5,.11); border:1px solid rgba(252,123,5,.28); border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--orange);
}
.wip__badge svg{ width:14px; height:14px; fill:var(--orange); }
.wip__badge--lost{
  background:rgba(2,44,132,.08); border-color:rgba(2,44,132,.2); color:var(--navy);
}
.wip__badge--lost svg{ fill:var(--navy); }

.wip__title{
  font-size:clamp(31px, 4.3vw, 48px); font-weight:800; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--navy);
  margin-bottom:14px;
}
.wip__text{
  max-width:540px; margin:0 auto 24px;
  font-size:16px; color:var(--muted); line-height:1.75;
}

/* indeterminate progress bar */
.wip__bar{
  width:min(300px, 70vw); height:5px; margin:0 auto 22px;
  background:#E6ECF7; border-radius:999px; overflow:hidden;
}
.wip__bar span{
  display:block; width:38%; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--navy), var(--orange));
  animation:wip-slide 1.9s ease-in-out infinite;
}
@keyframes wip-slide{
  0%   { transform:translateX(-105%); }
  100% { transform:translateX(320%); }
}

.wip__note{
  max-width:460px; margin:0 auto 28px;
  font-size:14.5px; color:#7A88A6;
}
.wip__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

@media (max-width:620px){
  .wip{ padding-block:48px 90px; min-height:0; }
  .wip__actions .btn{ flex:1 1 100%; justify-content:center; }
}

/* --------------------------------------------------------------- footer */
.footer{
  background:linear-gradient(120deg,#071F5C 0%,#05194B 55%,#082464 100%);
  color:rgba(255,255,255,.72);
  padding-top:38px;
  font-size:14px;
}
.footer__grid{
  /* The contact column has to fit "First Floor, Opposite Electricity Board," on
     one line — the client's spelling-out of "Opp." made that line 22px longer
     than the 1.6fr column, so it wrapped and the address rendered as four
     ragged lines. The width comes out of the brand column, whose paragraph is
     capped at 280px anyway. Below ~1230px it still wraps, cleanly, at "Board,". */
  display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1fr 1.7fr; gap:28px;
  padding-bottom:26px;
}

/* the logo has a white ground, so on the navy footer it sits on a white card */
.brand--light{
  display:inline-flex; padding:8px 14px;
  background:#fff; border-radius:10px;
}
.brand--light img{ height:62px; }
.footer__brand p{ margin:14px 0 16px; line-height:1.75; max-width:280px; }

.social{ display:flex; gap:9px; }
.social a{
  width:30px; height:30px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border-radius:7px;
  transition:background .2s ease, transform .2s ease;
}
.social a svg{ width:14px; height:14px; fill:#fff; }
.social a:hover{ background:var(--orange); transform:translateY(-2px); }

.footer__col h2{
  margin-bottom:13px;
  font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#fff;
}
.footer__col a{ display:block; margin-bottom:7px; transition:color .18s ease, padding-left .18s ease; }
.footer__col a:hover{ color:var(--orange); padding-left:3px; }

.footer__contact p{ display:flex; gap:9px; margin:0 0 10px; line-height:1.6; }
.footer__contact svg{ width:13px; height:13px; fill:var(--orange); flex:none; margin-top:4px; }
.footer__contact a{ display:inline; margin:0; }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:14px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;
}
.footer__bar p{ margin:0; }
.footer__legal{ display:flex; gap:22px; }
.footer__legal a:hover{ color:var(--orange); }

/* ------------------------------------------------------------- whatsapp */
.whatsapp{
  position:fixed; right:20px; bottom:22px; z-index:70;
  width:52px; height:52px; display:grid; place-items:center;
  background:#25D366; border-radius:50%;
  box-shadow:0 8px 22px rgba(37,211,102,.42);
  transition:transform .2s ease;
}
.whatsapp svg{ width:29px; height:29px; fill:#fff; }
.whatsapp:hover{ transform:scale(1.08); }

/* ----------------------------------------------------------- animations */
/* Anything that hides content until a script runs is gated on the `js` class,
   which the inline snippet in each page's <head> sets before the first paint.
   Without it — JavaScript switched off, or main.js failing to load — the page
   renders as plain, complete HTML rather than a blank screen. */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* --------------------------------------------------------- breakpoints */
@media (max-width:1140px){
  .mainnav{ gap:16px; }
  .mainnav a{ font-size:11.5px; letter-spacing:.05em; }
  /* one row of three numbers no longer clears the logo: each office gets its
     own line, stacked against the right edge beside the button */
  .header__utility{ gap:16px; }
  .header__phones{ flex-direction:column; align-items:flex-end; gap:3px; }
  .header__office{ gap:7px; }
  .header__office--branch{ padding-left:0; border-left:0; }
  .header__phone{ font-size:13px; }
  .header__phone svg{ width:13px; height:13px; }
  .header__lbl{ font-size:10px; }
  .tilegrid--8{ grid-template-columns:repeat(4,1fr); }
  .logos{ grid-template-columns:repeat(4,1fr); }
}

@media (max-width:980px){
  .header__inner{ min-height:74px; }
  .brand img{ height:56px; }
  /* The hamburger, and the collapsed drawer it drives, are both gated on `js`.
     A menu that starts at max-height:0 with no script to open it would leave a
     phone with no navigation at all — so without `js` the links stay a plain
     wrapping row instead. */
  .mainnav{ flex-wrap:wrap; justify-content:flex-end; gap:8px 14px; padding-bottom:8px; }

  .js .nav-toggle{ display:flex; }
  .js .mainnav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; padding-bottom:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(10,35,95,.12);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .js .mainnav.is-open{ max-height:600px; }
  .js .mainnav a{ padding:13px 24px; border-bottom:1px solid var(--line); font-size:13.5px; }
  .mainnav a::after{ display:none; }

  .header__phone{ font-size:12.5px; }

  /* Single column: the clip becomes a full-bleed backdrop behind the copy,
     strongest at the top and dissolving into white before the buttons. */
  .hero__inner{ grid-template-columns:1fr; min-height:0; padding-block:40px 48px; }
  .hero__lede{ max-width:none; }

  .hero__bg{ display:block; }
  .hero__mapwrap{ position:absolute; inset:0; width:auto; margin:0; }
  .hero__video{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    opacity:.62;
  }
  .hero__fade{
    background:linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.42) 22%,
      rgba(255,255,255,.76) 46%,
      rgba(255,255,255,.95) 68%,
      #fff 84%);
  }

  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(odd)::before{ display:none; }
  .stat:nth-child(n+3)::after{
    content:''; position:absolute; left:22px; right:22px; top:0; height:1px;
    background:rgba(255,255,255,.16);
  }

  .audience{ grid-template-columns:1fr; }
  .tilegrid--6{ grid-template-columns:repeat(3,1fr); }
  .why{ grid-template-columns:1fr; }
  .why__media{ min-height:170px; }
  .footer__grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
}

/* Below ~780px the stacked numbers, the button and the menu toggle no longer
   clear the logo. The header keeps a single call icon (head office) and the
   menu lists every number in full, with its office named. */
@media (max-width:780px){
  .header__phone span{ display:none; }
  .header__lbl,
  .header__phone--alt,
  .header__office--branch{ display:none; }
  .header__phone svg{ width:15px; height:15px; }
  .mainnav__call{
    display:block; flex-basis:100%;
    padding:12px 24px 14px; background:var(--bg-soft);
  }
  .mainnav__call p{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; margin:0; }
  .mainnav__call p + p{ margin-top:8px; }
  .mainnav__call span{
    flex-basis:100%;
    font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7A88A6;
  }
  .mainnav .mainnav__call a,
  .js .mainnav .mainnav__call a{
    padding:3px 0; border:0;
    font-size:15px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--navy-ink);
  }
  .mainnav .mainnav__call a:hover{ color:var(--orange); }
}
/* a narrow phone: close the gaps, and set the wide logo lockup a little
   shorter, so the call icon and the button still clear it */
@media (max-width:400px){
  .header__utility{ gap:10px; }
  .brand img{ height:40px; }
}

@media (max-width:620px){
  body{ font-size:15.5px; }
  .brand img{ height:44px; }
  .brand--light img{ height:54px; }

  .hero__inner{ padding-block:34px 40px; }
  .hero__title{ font-size:32px; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }

  .stats{ grid-template-columns:1fr; }
  .stat::before{ display:none !important; }
  .stat + .stat::after{
    content:''; position:absolute; left:22px; right:22px; top:0; height:1px;
    background:rgba(255,255,255,.16);
  }

  .acard{ flex-direction:column; }
  .tilegrid--8,.tilegrid--6{ grid-template-columns:repeat(2,1fr); }
  .logos{ grid-template-columns:repeat(2,1fr); }
  .ticks--two{ grid-template-columns:1fr; }
  .why__panel{ padding:24px 22px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__bar{ justify-content:center; text-align:center; }
}

/* ==========================================================================
   Our Clients page
   ========================================================================== */

.cpage{ background:#fff; }

/* ------------------------------------------------------------- page hero */
.phero{
  position:relative; overflow:hidden;
  padding-block:50px 74px;
  background:linear-gradient(100deg,#02205F 0%,#032468 46%,#052A79 100%);
}

/* the handshake photo holds the right side and dissolves into the navy */
.phero__media{
  position:absolute; top:0; right:0; bottom:0; left:34%;
  background:url('../img/hero/why-choose.jpg') center 44%/cover no-repeat;
  filter:saturate(.72) brightness(.94);
}
/* the photo is a backdrop, never a competitor — hold it well behind the type */
.phero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    #02205F 0%, rgba(2,32,95,.98) 14%, rgba(2,33,99,.82) 40%,
    rgba(3,36,106,.64) 70%, rgba(3,36,106,.58) 100%);
}

/* decorative connection mesh, masked so it never reaches the headline */
.phero__net{
  position:absolute; top:0; bottom:0; left:16%; right:4%;
  background:url('../img/hero/network.svg') center/cover no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 60%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 60%,transparent 100%);
}

.phero__inner{ position:relative; z-index:2; }
.phero__title{
  font-size:clamp(34px,5.2vw,60px); font-weight:900; line-height:1.02;
  letter-spacing:-.015em; text-transform:uppercase; color:#fff;
  margin-bottom:10px;
}
.phero__sub{ margin:0 0 12px; font-size:17px; font-weight:500; line-height:1.4; color:#fff; }
.phero__rule{
  display:block; width:52px; height:3px; margin-bottom:18px;
  background:var(--orange); border-radius:2px;
}
.phero__text{
  margin:0; max-width:378px;
  font-size:15px; line-height:1.78; color:rgba(255,255,255,.86);
}

/* -------------------------------------------------- overlapping stat card */
.cstats-wrap{ position:relative; z-index:5; margin-top:-55px; }
.cstats{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border:1px solid #EDF1F8; border-radius:10px;
  box-shadow:0 12px 38px rgba(8,32,90,.11);
}
.cstat{ position:relative; display:flex; align-items:center; gap:16px; padding:26px 22px; }
.cstat + .cstat::before{
  content:''; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:#E7EDF7;
}
.cstat__ico{
  flex:none; width:58px; height:58px; display:grid; place-items:center;
  background:#F3F7FE; border:1px solid #E1EAF8; border-radius:50%;
}
.cstat__ico svg{ width:29px; height:29px; fill:var(--navy); }
.cstat__body{ min-width:0; }
.cstat__num{
  display:block; font-family:var(--f-head);
  font-size:25px; font-weight:800; line-height:1.15; color:var(--orange);
}
.cstat__label{ display:block; font-size:14px; font-weight:700; color:var(--navy-ink); margin-bottom:5px; }
.cstat__note{ display:block; font-size:12.5px; line-height:1.5; color:var(--muted); }

/* ------------------------------------------------------- navy rule title */
.rule-title--navy{ color:var(--navy-ink); font-size:16.5px; letter-spacing:.05em; }
.rule-title--navy::before,
.rule-title--navy::after{
  height:2px; width:clamp(30px,6vw,58px); border-radius:2px;
  background:var(--orange);
}

/* --------------------------------------------------------- the logo wall */
.logogrid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.logogrid .logo{
  flex:0 1 calc((100% - 4 * 14px) / 5);
  height:96px; border-radius:10px; border-color:#E7EDF7;
}
.logogrid .logo img{ max-height:78px; }
.logo--more span{ line-height:1.4; }

/* ------------------------------------------------------------ testimonials */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote{
  display:flex; gap:12px;
  margin:0; padding:20px 22px 18px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.quote__mark{
  flex:none; margin-top:-2px;
  font-family:Georgia,'Times New Roman',serif; font-size:36px; font-weight:700;
  line-height:1; color:var(--navy);
}
.quote__body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.quote__text{
  margin:0 0 16px; font-size:14px; line-height:1.72; color:#3A4869;
}
.quote__text strong{ font-weight:700; color:var(--navy-ink); }
.quote__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-top:auto;
}
.quote__who strong{ display:block; font-size:13.5px; font-weight:700; color:var(--navy-ink); }
.quote__who span{ display:block; font-size:13.5px; color:var(--muted); }
.quote__flag{ flex:none; display:block; width:46px; }
.quote__flag img{
  width:100%; height:31px; object-fit:cover;
  border-radius:3px; box-shadow:0 1px 5px rgba(10,35,95,.22);
}

/* ---------------------------------------------------------- partner band */
.ctaband{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:24px;
  min-height:88px; padding:22px 28px;
  padding-right:clamp(24px,23%,280px);
  border-radius:10px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.ctaband__media{
  position:absolute; top:0; right:0; bottom:0; width:clamp(120px,24%,270px);
  background:url('../img/hero/why-choose.jpg') center 44%/cover no-repeat;
}
.ctaband__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#04205E 0%,rgba(4,32,94,.86) 46%,rgba(6,46,124,.52) 100%);
}
.ctaband__copy{ position:relative; z-index:2; flex:1 1 auto; min-width:0; }
.ctaband__eyebrow{
  margin:0 0 7px;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.ctaband__title{
  font-family:var(--f-head);
  font-size:clamp(16.5px,2.1vw,22px); font-weight:700; color:#fff; line-height:1.25;
}
.ctaband .btn{ position:relative; z-index:2; flex:none; }

/* -------------------------------------------- our clients — breakpoints */
@media (max-width:1140px){
  .cstat{ gap:12px; padding:24px 14px; }
  .cstat__ico{ width:52px; height:52px; }
  .cstat__ico svg{ width:26px; height:26px; }
  .cstat__num{ font-size:23px; }
  .cstat__label{ font-size:13.5px; }
  .logogrid{ gap:12px; }
  .logogrid .logo{ flex-basis:calc((100% - 4 * 12px) / 5); }
}

@media (max-width:900px){
  .cstats{ grid-template-columns:repeat(2,1fr); }
  .cstat{ padding:24px 22px; }
  .cstat:nth-child(odd)::before{ display:none; }
  .cstat:nth-child(n+3)::after{
    content:''; position:absolute; left:22px; right:22px; top:0; height:1px; background:#E7EDF7;
  }
  .logogrid .logo{ flex-basis:calc((100% - 3 * 12px) / 4); }
}

@media (max-width:980px){
  .phero{ padding-block:44px 92px; }
  .phero__media{ left:0; opacity:.82; }
  .phero__media::after{
    background:linear-gradient(90deg,
      rgba(2,32,95,.98) 0%, rgba(2,32,95,.95) 42%, rgba(3,36,106,.78) 100%);
  }
  .phero__net{ left:8%; right:0; }
  .phero__text{ max-width:none; }

  .quotes{ grid-template-columns:1fr; }

  .ctaband{ flex-direction:column; align-items:flex-start; padding:24px; padding-right:24px; }
  .ctaband__media{ width:100%; opacity:.34; }
  .ctaband__media::after{
    background:linear-gradient(180deg,#04205E 0%,rgba(4,32,94,.7) 60%,rgba(6,46,124,.4) 100%);
  }
}

@media (max-width:620px){
  .cstats{ grid-template-columns:1fr; }
  .cstat::before{ display:none !important; }
  .cstat + .cstat::after{
    content:''; position:absolute; left:22px; right:22px; top:0; height:1px; background:#E7EDF7;
  }
  .logogrid .logo{ flex-basis:calc((100% - 12px) / 2); height:86px; }
  .phero__net{ display:none; }
  .cstats-wrap{ margin-top:-56px; }
}

/* ==========================================================================
   For Candidates page
   ========================================================================== */

.candpage{ background:var(--bg-soft); }

/* ------------------------------------------------------------- page hero */
.chero{
  position:relative; overflow:hidden;
  padding-block:40px 34px; min-height:400px;
  background:linear-gradient(100deg,#02205F 0%,#04266F 30%,#0C4FBA 68%,#2079DC 100%);
}
.chero__globe{
  position:absolute; z-index:1;
  right:1%; top:52%; transform:translateY(-48%);
  width:min(53%,545px); aspect-ratio:1;
  background:url('../img/hero/globe.png') center/contain no-repeat;
  opacity:.86;
}
/* The hero art must never fight the headline for contrast. Two washes: one
   across, holding the copy column clear, and one up from the bottom so the
   feature row keeps its contrast where it crosses the globe. */
.chero__wash{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(2,28,86,0) 34%, rgba(2,28,86,.46) 74%, rgba(2,28,86,.66) 100%),
    linear-gradient(90deg,#02205F 0%,rgba(2,32,95,.90) 30%,rgba(4,40,116,.52) 58%,
                    rgba(4,40,116,.20) 80%,rgba(4,40,116,.10) 100%);
}
.chero__plane{
  position:absolute; z-index:1; fill:#fff;
  filter:drop-shadow(0 5px 12px rgba(0,20,60,.35));
}
.chero__plane--a{ width:clamp(52px,6.4vw,92px); left:46%; top:30%; transform:rotate(58deg); opacity:.95; }
.chero__plane--b{ width:clamp(24px,3vw,44px); right:4%; top:11%; transform:rotate(52deg); opacity:.75; }

/* The candidate cut-out, standing at the right of the hero and running off its
   bottom edge. The photograph is a public-domain studio shot with the backdrop
   removed (see assets/img/stock-credits.md), so it drops onto the navy with no
   frame around it. Painted as a background image, so a browser that cannot
   decode it — or a missing file — draws nothing and the hero falls back to the
   globe composition rather than breaking. It sits below .chero__inner in the
   stacking order, so the headline and feature row always win on overlap.

   aspect-ratio matches the artwork, so the box IS the figure: `right` places
   him exactly, with no invisible slack from `contain` letterboxing. */
.chero__figure{
  position:absolute; z-index:2; right:5%; bottom:0;
  height:100%; aspect-ratio:698/900;
  background:url('../img/candidates/professional.webp') bottom center/contain no-repeat;
  filter:drop-shadow(-14px 14px 30px rgba(0,12,40,.45));
  pointer-events:none;
}

.chero__inner{ position:relative; z-index:2; }
.chero__title{
  font-size:clamp(31px,5vw,54px); font-weight:900; line-height:1.04;
  letter-spacing:-.015em; text-transform:uppercase; color:#fff; margin-bottom:11px;
}
.chero__crumbs{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.chero__crumbs a{ color:#fff; }
.chero__crumbs a:hover{ color:var(--orange); }
.chero__crumbs .sep{ color:rgba(255,255,255,.45); }
.chero__crumbs .cur{ color:var(--orange); }
.chero__text{
  margin:0 0 24px; max-width:420px;
  font-size:15px; line-height:1.85; color:rgba(255,255,255,.9);
}

.cfeats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:72%;
}
.cfeat{ position:relative; display:flex; align-items:flex-start; gap:10px; padding-right:10px; }
.cfeat + .cfeat{ padding-left:12px; }
.cfeat + .cfeat::before{
  content:''; position:absolute; left:0; top:3px; bottom:3px; width:1px; background:rgba(255,255,255,.22);
}
.cfeat__ico{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  border:1.5px solid rgba(252,123,5,.85); border-radius:50%;
}
.cfeat__ico svg{ width:20px; height:20px; fill:var(--orange); }
.cfeat__t{ display:block; font-size:13px; font-weight:700; line-height:1.35; color:#fff; }
.cfeat__s{ display:block; margin-top:3px; font-size:11px; line-height:1.45; color:rgba(255,255,255,.64); }

/* ---------------------------------------------------------- shared cards */
.cbox{
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
  padding:22px 24px 24px;
}
.cbox__title{
  font-family:var(--f-head); margin-bottom:7px;
  font-size:17px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy-ink);
}
.cbox__sub{ margin:0; font-size:13px; color:var(--muted); }

.cgrid2{ display:grid; grid-template-columns:minmax(0,32%) minmax(0,1fr); gap:16px; }
/* Documents carries five tiles against the FAQ's single column, so it takes the
   wider half — five labels at an even split wrap to three lines. */
.cgrid-half{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:16px; align-items:start; }

/* -------------------------------------------------------------- job form */
.jobform{ display:grid; gap:11px; margin-top:15px; }
.field{ position:relative; }
.field input,
.field select{
  width:100%; padding:11px 34px 11px 13px;
  font-family:var(--f-body); font-size:14px; color:var(--text);
  background:#fff; border:1px solid #DDE5F2; border-radius:7px;
  -webkit-appearance:none; appearance:none;
}
.field input::placeholder{ color:#667694; }
.field select:invalid{ color:#667694; }
.field input:focus,
.field select:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(252,123,5,.12); }
.field__ico{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; fill:#667694; pointer-events:none;
}
.jobform .btn{ justify-content:center; }

.linkrow{
  display:flex; align-items:center; gap:9px;
  padding:11px 13px; border:1px solid #DDE5F2; border-radius:7px;
  font-size:13.5px; font-weight:600; color:var(--navy-ink);
  transition:border-color .18s ease, color .18s ease;
}
.linkrow svg{ width:14px; height:14px; fill:var(--navy); flex:none; transition:fill .18s ease; }
.linkrow .arw{ margin-left:auto; }
.linkrow:hover{ border-color:var(--orange); color:var(--orange); }
.linkrow:hover svg{ fill:var(--orange); }

/* --------------------------------------------------------- destinations */
.destgrid{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin-top:15px; }
.dest{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:13px 6px 11px; text-align:center;
  background:#fff; border:1px solid #E7EDF7; border-radius:8px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dest:hover{ transform:translateY(-3px); border-color:#C9D9F2; box-shadow:var(--shadow); }
.dest img{
  width:42px; height:29px; object-fit:cover;
  border-radius:3px; box-shadow:0 1px 4px rgba(10,35,95,.22);
}
.dest svg{ width:29px; height:29px; fill:var(--navy); }
.dest span{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy-ink); line-height:1.35;
}

.dstats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:18px; padding-top:17px; border-top:1px solid #EDF1F8;
}
.dstat{ position:relative; display:flex; align-items:flex-start; gap:13px; padding:0 20px; }
.dstat:first-child{ padding-left:4px; }
.dstat + .dstat::before{
  content:''; position:absolute; left:0; top:3px; bottom:3px; width:1px; background:#E7EDF7;
}
.dstat__ico{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  background:#F3F7FE; border:1px solid #E1EAF8; border-radius:50%;
}
.dstat__ico svg{ width:23px; height:23px; fill:var(--navy); }
/* Scoped to the inner <div>, not written as `.astat span`. The icon is also a
   <span>, and a direct child, so the loose selector matched it too — and at
   (0,1,1) it outranked `.astat__ico` at (0,1,0). display:block won, so
   place-items:center stopped applying and the glyph sat in the top-left corner
   of its ring. Same story for .dstat. */
.dstat > div b{
  display:block; font-family:var(--f-head);
  font-size:23px; font-weight:800; line-height:1.15; color:var(--orange);
}
.dstat > div span{ display:block; font-size:12.5px; line-height:1.45; color:var(--muted); }

/* ---------------------------------------------------- recruitment steps */
.steps{ display:flex; align-items:flex-start; }
.step{ flex:1 1 0; min-width:0; padding:0 5px; text-align:center; }
a.step .step__ico{ transition:border-color .2s ease, background .2s ease; }
a.step:hover .step__ico{ background:#FEF2E9; border-color:rgba(252,123,5,.45); }
a.step:hover .step__ico svg{ fill:var(--orange); }
a.step:hover .step__t{ color:var(--orange); }
.step__ico{
  width:56px; height:56px; margin:0 auto 13px; display:grid; place-items:center;
  background:#F3F7FE; border:1px solid #E1EAF8; border-radius:50%;
}
.step__ico svg{ width:27px; height:27px; fill:var(--navy); }
.step__num{
  display:block; font-family:var(--f-head);
  font-size:23px; font-weight:800; line-height:1; color:var(--orange); margin-bottom:8px;
}
/* Seven steps sit in one row and their titles are not the same length, so the
   titles reserve two lines' height. Without it a wrapping title pushes its own
   description down and the row reads ragged. */
.step__t{
  display:flex; align-items:center; justify-content:center;
  min-height:2.7em; margin-bottom:5px;
  font-size:13px; font-weight:700; line-height:1.35; text-wrap:balance;
  color:var(--navy-ink);
}
.step__d{ display:block; font-size:12px; line-height:1.55; color:var(--muted); }
.steps__sep{ flex:none; width:18px; margin-top:20px; display:grid; place-items:center; }
.steps__sep svg{ width:11px; height:11px; fill:#B9C6DE; }

/* ------------------------------------------------- eligibility / why us */
.elig{ display:grid; grid-template-columns:minmax(0,2.03fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.eligcard{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0; overflow:hidden; }
.eligcard__body{ padding:22px 24px 24px; }
.eligcard .ticks li{ font-size:13.5px; margin-bottom:9px; }
.eligcard .btn,
.whycard .btn{ margin-top:16px; max-width:100%; }

/* stand-in for the trades photo: brand icons over a soft skyline */
.tradepanel{
  position:relative; display:grid; place-items:center; padding:22px 8px;
  background:linear-gradient(180deg,#F8FBFF 0%,#E9F1FC 100%);
  border-left:1px solid #E7EDF7;
}
.tradepanel::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:58%;
  background:url('../img/hero/skyline.jpg') center bottom/cover no-repeat;
  opacity:.15;
}
/* the trades photograph, laid over the stand-in exactly as .shot does it:
   absent file -> nothing painted -> the icon panel below shows through */
.tradepanel::before{
  content:''; position:absolute; inset:0; z-index:3;
  background:url('../img/candidates/trades.jpg') center 42%/cover no-repeat;
}
.trades{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.trade{
  width:50px; height:50px; display:grid; place-items:center;
  background:#fff; border:1px solid #DDE7F6; border-radius:50%;
  box-shadow:0 4px 12px rgba(8,32,90,.09);
}
.trade svg{ width:27px; height:27px; fill:var(--navy); }
.trade:nth-child(even) svg{ fill:var(--orange); }

.whycard{ display:flex; flex-direction:column; }
.whycard .ticks{ margin-top:14px; }
.whycard .ticks li{ font-size:13.5px; margin-bottom:9px; }

/* --------------------------------------------------------- documents */
.docgrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-top:16px; }
.doc{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px;
  padding:14px 5px 12px; text-align:center;
  border:1px solid #E7EDF7; border-radius:8px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.doc:hover{ border-color:#C9D9F2; box-shadow:var(--shadow); }
.doc svg{ width:30px; height:30px; fill:var(--navy); }
.doc span{ font-size:11.5px; font-weight:700; line-height:1.4; color:var(--navy-ink); }
.docnote{
  margin:16px 0 0; padding:12px 14px;
  background:var(--bg-soft); border:1px solid #E7EDF7; border-radius:8px;
  font-size:12.5px; line-height:1.65; color:var(--muted);
}

/* --------------------------------------------------------------- faq */
.faq{ display:grid; gap:8px; margin-top:15px; }
.faq details{ background:var(--bg-soft); border:1px solid #E9EFF9; border-radius:7px; }
.faq summary{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  list-style:none; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--navy-ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; margin-left:auto; flex:none;
  font-size:20px; font-weight:400; line-height:1; color:var(--orange);
}
.faq details[open] summary::after{ content:'\2212'; }
.faq details[open]{ background:#fff; border-color:#DDE7F6; }
.faq p{ margin:0; padding:0 14px 13px; font-size:13px; line-height:1.7; color:var(--muted); }
.faq__foot{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:17px; }
.faq__foot p{ margin:0; font-size:14px; font-weight:600; color:var(--navy-ink); }

/* ------------------------------------------------------- assistance bar */
.assist{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.86fr) minmax(0,1fr);
  padding:20px 26px; border-radius:10px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.assist__col{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:2px 24px; }
.assist__col:first-child{ padding-left:0; }
.assist__col + .assist__col::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(255,255,255,.16);
}
.assist__ico{
  flex:none; width:48px; height:48px; display:grid; place-items:center;
  border:1.5px solid rgba(252,123,5,.85); border-radius:50%;
}
.assist__ico svg{ width:26px; height:26px; fill:var(--orange); }
.assist__title{ font-family:var(--f-head); font-size:19px; font-weight:800; color:#fff; margin-bottom:4px; }
.assist p{ margin:0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.72); }
.assist__phoneico{ flex:none; width:20px; height:20px; fill:#fff; }
.assist__phone{ display:block; font-size:17.5px; font-weight:700; color:#fff; margin-bottom:2px; }
.assist__phone:hover{ color:var(--orange); }
.assist__chat{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  background:var(--orange); border-radius:10px;
}
.assist__chat svg{ width:24px; height:24px; fill:#fff; }
.assist__chat-t{ display:block; font-size:13.5px; font-weight:700; color:#fff; line-height:1.4; }
.assist__qr{ flex:none; width:66px; height:66px; margin-left:auto; padding:5px; background:#fff; border-radius:6px; }
.assist__qr img{ width:100%; height:100%; }

/* ----------------------------------------- for candidates — breakpoints */
@media (max-width:1140px){
  .destgrid{ gap:8px; }
  .dest span{ letter-spacing:.03em; }
  .step{ padding:0 4px; }
  .steps__sep{ width:12px; }
}

/* On a laptop the feature row reaches towards the framed photograph: it is set
   smaller and tighter to the edge to keep them apart, and below 1080px it goes
   altogether — there the copy needs the room more than the hero needs a
   picture. */
@media (max-width:1360px){
  .chero__figure{ height:88%; right:3%; }
}
@media (max-width:1200px){
  .chero__figure{ height:76%; right:2%; }
}
@media (max-width:1080px){
  .chero__figure{ display:none; }
}

@media (max-width:980px){
  .chero{ padding-block:34px 30px; }
  .chero__globe{ right:-14%; width:min(74%,470px); opacity:.42; }
  .chero__wash{
    background:
      linear-gradient(180deg, rgba(2,28,86,0) 30%, rgba(2,28,86,.42) 100%),
      linear-gradient(90deg,#02205F 0%,rgba(2,32,95,.92) 46%,rgba(4,40,116,.68) 100%);
  }
  .chero__plane--a{ left:auto; right:8%; top:16%; width:clamp(40px,9vw,64px); }
  .chero__plane--b{ display:none; }
  .chero__text{ max-width:none; }
  .cfeats{ max-width:none; }
  /* the copy needs the full width here — the cut-out has nowhere to stand */
  .chero__figure{ display:none; }
  .chero{ min-height:0; }

  .destgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }

  /* seven steps wrap to 4 + 3 — centre the short row rather than leaving a gap */
  .steps{ flex-wrap:wrap; justify-content:center; row-gap:26px; }
  .step{ flex:0 0 25%; padding:0 8px; }
  .step__t{ min-height:0; }
  .steps__sep{ display:none; }

  .cgrid2,
  .cgrid-half,
  .elig{ grid-template-columns:1fr; }
  .eligcard{ grid-template-columns:1fr; }
  .tradepanel{ border-left:0; border-top:1px solid #E7EDF7; min-height:150px; }

  .assist{ grid-template-columns:1fr; gap:18px; }
  .assist__col{ padding:0; }
  .assist__col + .assist__col{ padding-top:18px; }
  .assist__col + .assist__col::before{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
  }
}

@media (max-width:620px){
  .cfeats{ grid-template-columns:1fr 1fr; row-gap:16px; }
  .cfeat:nth-child(odd){ padding-left:0; }
  .cfeat:nth-child(odd)::before{ display:none; }

  .destgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dstats{ grid-template-columns:1fr; row-gap:15px; }
  .dstat{ padding:0; }
  .dstat + .dstat::before{ left:0; right:0; top:-8px; bottom:auto; width:auto; height:1px; }

  .step{ flex:0 0 50%; }
  .docgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq__foot .btn{ flex:1 1 100%; justify-content:center; }
  .assist__qr{ margin-left:0; }
}

/* ==========================================================================
   Hire from India  —  homepage sections
   ========================================================================== */

/* ------------------------------------------------------- photo frames */
/* A frame paints a designed fallback first and lays the photograph over the
   top of it with ::after. A photo that has not been supplied yet therefore
   degrades to the fallback rather than a broken image: drop the JPEG into
   assets/img/india/ and it simply appears. The caption always sits on its
   own gradient, so it stays readable over whatever ends up behind it. */
.shot{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(150deg,#0A2A72 0%,#052166 54%,#03163F 100%);
}
.shot__ph{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px; padding:20px;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:15px 15px;
}
.shot__ph svg{ width:34px; height:34px; fill:rgba(255,255,255,.5); }
.shot__ph span{
  max-width:200px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.55; color:rgba(255,255,255,.46);
}
/* the photograph */
.shot::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:var(--shot); background-size:cover; background-position:center;
}
/* The photographs themselves. Until a file exists at these paths the frame
   shows its fallback instead — no markup change needed when they land. */
.shot--office  { --shot:url('../img/india/jalandhar-office.jpg'); }
.shot--briefing{ --shot:url('../img/india/pre-departure-briefing.jpg'); }

/* "Recruiting at source" is not one trade, so its frame is a labelled mosaic of
   six sectors rather than a single photograph. The grid re-flows with the
   frame — two across while the frame stands tall beside the copy, three across
   once it lies wide above it — so no sector is ever cropped out, which is what
   a single collage image under background-size:cover could not promise. Each
   tile keeps the frame's bargain: navy fallback first, photograph over it. */
.shot--trades::after{ display:none; }
.trademosaic{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr);
  gap:3px; margin:0; padding:0; list-style:none;
}
.trademosaic li{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,#0A2A72 0%,#052166 54%,#03163F 100%);
}
.trademosaic li::before,
.trademosaic li::after{ content:''; position:absolute; inset:0; }
.trademosaic li::before{ background-image:var(--shot); background-size:cover; background-position:center; }
/* the same navy wash .shot__cap uses, per tile, so every label reads on any photo */
.trademosaic li::after{
  background:linear-gradient(180deg, rgba(3,20,58,0) 42%, rgba(3,20,58,.55) 72%, rgba(3,20,58,.86) 100%);
}
.trademosaic span{
  position:absolute; z-index:1; left:12px; right:10px; bottom:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.3; color:#fff;
}
.trademosaic--construction{ --shot:url('../img/trades/construction.jpg'); }
.trademosaic--it          { --shot:url('../img/trades/it.jpg'); }
.trademosaic--oilgas      { --shot:url('../img/trades/oil-and-gas.jpg'); }
.trademosaic--warehouse   { --shot:url('../img/industries/logistics.jpg'); }
.trademosaic--farming     { --shot:url('../img/trades/farming.jpg'); }
.trademosaic--technicians { --shot:url('../img/trades/technicians.jpg'); }

/* and the wash that keeps the caption legible over it */
.shot__cap{
  position:absolute; z-index:3; left:0; right:0; bottom:0; margin:0;
  padding:40px 16px 13px;
  background:linear-gradient(180deg,
    rgba(3,20,58,0) 0%, rgba(3,20,58,.62) 52%, rgba(3,20,58,.90) 100%);
  font-size:12.5px; font-weight:600; line-height:1.5; color:#fff;
}

/* ------------------------------------------------------------ the lead */
.hfi__lead{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:22px; align-items:stretch;
  margin-bottom:26px;
}
.hfi__panel{
  display:flex; flex-direction:column;
  padding:28px 30px 30px;
  background:#fff; border:1px solid #E7EDF7; border-radius:var(--radius-lg);
  box-shadow:0 8px 26px rgba(8,32,90,.06);
}
.hfi__eyebrow{
  margin:0 0 8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.hfi__title{
  font-size:clamp(22px,2.5vw,30px); font-weight:800; line-height:1.16;
  color:var(--navy-ink); margin-bottom:12px;
}
.hfi__text{ margin:0 0 16px; font-size:15px; line-height:1.75; color:var(--muted); }
.hfi__lead .ticks{ margin-bottom:20px; }
.hfi__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }

/* the licence line — the single strongest trust signal on this section */
.hfi__licence{
  display:flex; align-items:flex-start; gap:11px;
  margin:18px 0 0; padding:12px 15px;
  background:var(--bg-soft); border:1px solid #E3EBF8; border-radius:8px;
}
.hfi__licence svg{ width:19px; height:19px; fill:var(--navy); flex:none; margin-top:2px; }
.hfi__licence span{ flex:1 1 0; min-width:0; font-size:12.5px; line-height:1.55; color:var(--muted); }
.hfi__licence b{ color:var(--navy-ink); font-weight:700; }

.hfi__lead .shot{ min-height:330px; }

/* ------------------------------------------------------ trade categories */
.hfi__sub{
  margin:0 0 14px;
  font-family:var(--f-head);
  font-size:16.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-ink); text-align:center;
}
.tradecats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tradecat{
  padding:20px 22px 22px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.tradecat__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tradecat__ico{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  background:#F3F7FE; border:1px solid #E1EAF8; border-radius:50%;
}
.tradecat__ico svg{ width:23px; height:23px; fill:var(--navy); }
.tradecat h3,
.tradecat h4{
  margin:0; font-family:var(--f-head);
  font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy-ink); line-height:1.3;
}
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chips li{
  padding:6px 12px;
  background:var(--bg-soft); border:1px solid #E3EBF8; border-radius:999px;
  font-size:12px; font-weight:600; color:#3A4869; white-space:nowrap;
}
.chips li.chips__more{
  background:rgba(252,123,5,.09); border-color:rgba(252,123,5,.3);
  color:var(--orange-dark); font-weight:700;
}

/* ------------------------------------------------------ the assurances */
.assure{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:22px; padding:22px 26px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  border-radius:10px; box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.assure__col{ position:relative; display:flex; align-items:flex-start; gap:13px; padding:2px 20px; }
.assure__col:first-child{ padding-left:0; }
.assure__col:last-child{ padding-right:0; }
.assure__col + .assure__col::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:rgba(255,255,255,.18);
}
.assure__ico{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  border:1.5px solid rgba(252,123,5,.85); border-radius:50%;
}
.assure__ico svg{ width:22px; height:22px; fill:var(--orange); }
.assure__t{ display:block; font-size:13px; font-weight:700; color:#fff; line-height:1.35; margin-bottom:4px; }
.assure__s{ display:block; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.66); }
a.assure__col:hover .assure__t{ color:var(--orange); }

/* ==========================================================================
   Head office + pre-departure briefing
   ========================================================================== */
.ho{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch; }
.hocard{
  overflow:hidden;
  background:#fff; border:1px solid #E7EDF7; border-radius:var(--radius-lg);
  box-shadow:0 8px 26px rgba(8,32,90,.06);
}
.hocard .shot{ border-radius:0; min-height:250px; }
.hocard__body{ padding:24px 28px 26px; }
.hocard__eyebrow{
  margin:0 0 7px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.hocard__title{
  font-size:21px; font-weight:800; line-height:1.2; color:var(--navy-ink); margin-bottom:11px;
}
.hocard__text{ margin:0 0 15px; font-size:14.5px; line-height:1.72; color:var(--muted); }
.hocard .ticks li{ font-size:14px; }

/* the address / contact strip at the foot of the office card */
.hocard__meta{
  display:grid; gap:10px;
  margin-top:18px; padding-top:16px; border-top:1px solid #EDF1F8;
}
.hocard__meta p{ display:flex; align-items:flex-start; gap:10px; margin:0; font-size:13.5px; line-height:1.6; color:var(--muted); }
.hocard__meta svg{ width:16px; height:16px; fill:var(--navy); flex:none; margin-top:3px; }
.hocard__meta a{ font-weight:700; color:var(--navy-ink); }
.hocard__meta a:hover{ color:var(--orange); }

/* ------------------------------- hire from india / offices — breakpoints */
@media (max-width:1140px){
  .assure__col{ padding:2px 14px; }
  .chips li{ padding:5px 10px; font-size:11.5px; }
}

/* four assurances across stop being readable well before the nav collapses */
@media (max-width:1080px){
  .assure{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .assure__col{ padding:0 16px; }
  .assure__col:nth-child(odd){ padding-left:0; }
  .assure__col:nth-child(even){ padding-right:0; }
  .assure__col:nth-child(odd)::before{ display:none; }
  .assure__col:nth-child(n+3){ padding-top:20px; }
  .assure__col:nth-child(n+3)::after{
    content:''; position:absolute; left:0; right:0; top:0; height:1px;
    background:rgba(255,255,255,.18);
  }
}

@media (max-width:980px){
  .hfi__lead{ grid-template-columns:1fr; }
  .hfi__lead .shot{ min-height:230px; order:-1; }
  .tradecats{ grid-template-columns:1fr; }
  .chips li{ white-space:normal; }
  .ho{ grid-template-columns:1fr; }

}

@media (max-width:620px){
  .hfi__panel{ padding:24px 22px 26px; }
  .hfi__actions .btn{ flex:1 1 100%; justify-content:center; }
  .hocard__body{ padding:22px 22px 24px; }
  .assure{ grid-template-columns:1fr; padding:22px; }
  .assure__col{ padding:0; }
  .assure__col + .assure__col{ padding-top:18px; }
  .assure__col:nth-child(n+3)::after,
  .assure__col + .assure__col::before{
    content:''; position:absolute; left:0; right:0; top:0; height:1px; width:auto; bottom:auto;
    background:rgba(255,255,255,.18);
  }
}

/* ==========================================================================
   Hire from India — the page
   ========================================================================== */

.indiapage{ background:var(--bg-soft); }

/* the page hero reuses .phero, swapping the handshake for the trades photo.
   With no photo present it falls back to the navy gradient plus the mesh,
   which is why the gradient underneath has to stand on its own. */
.phero--india .phero__media{
  background-image:url('../img/india/skilled-workers.jpg');
  background-position:center 28%;
}
.phero--india .chero__crumbs{ margin-bottom:14px; }

.tradenote{
  max-width:840px; margin:16px auto 0; padding:13px 18px;
  background:#fff; border:1px solid #E7EDF7; border-radius:8px;
  font-size:13px; line-height:1.7; color:var(--muted); text-align:center;
}
.tradenote a{ font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.tradenote a:hover{ color:var(--orange); }

/* ---------------------------------------------- the homepage teaser card */
.hfiteaser{
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
  overflow:hidden;
  background:#fff; border:1px solid #E7EDF7; border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(8,32,90,.07);
}
.hfiteaser .shot{ border-radius:0; min-height:300px; }
.hfiteaser__body{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:28px 32px 30px;
}
.hfiteaser__title{
  font-size:clamp(21px,2.4vw,28px); font-weight:800; line-height:1.18;
  color:var(--navy-ink); margin-bottom:11px;
}
.hfiteaser__text{
  margin:0 0 17px; max-width:640px;
  font-size:15px; line-height:1.75; color:var(--muted);
}
.hfiteaser .chips{ margin-bottom:22px; }
.hfiteaser .btn{ margin-top:auto; }

@media (max-width:980px){
  .hfiteaser{ grid-template-columns:1fr; }
  .hfiteaser .shot{ min-height:220px; }
  .hfiteaser__body{ padding:24px 22px 26px; }
  .hfiteaser .btn{ margin-top:4px; }
}

@media (max-width:620px){
  .hfiteaser .btn{ width:100%; justify-content:center; }
  .tradenote{ text-align:left; }
}

/* the six-sector mosaic, on both the homepage teaser and the Hire from India
   lead: lying wide above the copy it goes three across, and on a phone back to
   two across (three tiles cannot fit "Construction" at ~100px) with the height
   to keep each tile landscape */
@media (max-width:980px){
  .trademosaic{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hfiteaser .shot--trades,
  .hfi__lead .shot--trades{ min-height:270px; }
}
@media (max-width:620px){
  .trademosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hfiteaser .shot--trades,
  .hfi__lead .shot--trades{ min-height:330px; }
  .trademosaic span{ left:10px; bottom:8px; font-size:11px; letter-spacing:.05em; }
}

/* ==========================================================================
   About Us page
   ========================================================================== */

.aboutpage{ background:var(--bg-soft); }

/* ------------------------------------------------------------- page hero */
/* Reuses .chero's gradient and wash. The reference design puts a rendered
   office block on the right; there is no photograph of the real premises, so
   the right side carries the world map and skyline the rest of the site uses
   rather than a building the company does not have. */
.chero--about{ padding-block:34px 40px; min-height:0; }
.chero--about .chero__crumbs{ margin:0 0 10px; }
.chero--about .chero__title{ margin-bottom:14px; }
.chero--about .chero__text{ max-width:480px; margin-bottom:0; }

.ahero__map{
  position:absolute; inset:0; z-index:1;
  background:url('../img/hero/world-map.jpg') center/cover no-repeat;
  opacity:.16; mix-blend-mode:screen;
}
.ahero__city{
  position:absolute; z-index:1; right:0; bottom:0;
  width:min(58%,720px); height:74%;
  background:url('../img/hero/skyline.jpg') right bottom/cover no-repeat;
  opacity:.30;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 34%),
                     linear-gradient(0deg,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(100deg,transparent 0%,#000 34%),
                     linear-gradient(0deg,#000 55%,transparent 100%);
          mask-composite:intersect;
}

/* ------------------------------------------------ section heading + story */
/* the underlined heading the About page uses in place of .rule-title */
.ttl{
  position:relative; margin:0 0 18px; padding-bottom:12px;
  font-size:clamp(21px,2.4vw,27px); font-weight:800; letter-spacing:.01em;
  text-transform:uppercase; color:var(--navy-ink);
}
.ttl::after{
  content:''; position:absolute; left:0; bottom:0; width:56px; height:3px;
  background:var(--orange); border-radius:2px;
}

.storygrid{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:22px; align-items:start; }
.story p{ margin:0 0 14px; font-size:14px; line-height:1.85; color:var(--muted); }
.story p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------- the timeline */
.cbox__title--mid{ text-align:center; margin-bottom:20px; }
.jrnybox{ padding:24px 26px 26px; }
.jrny{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0; padding:0; list-style:none;
}
.jstep{ position:relative; padding:0 8px; text-align:center; }
/* the connector runs between the icons, never past the last one */
.jstep:not(:last-child)::before{
  content:''; position:absolute; z-index:0; top:28px; left:calc(50% + 32px); right:calc(-50% + 32px);
  height:1px; background:#D8E2F3;
}
.jstep__ico{
  position:relative; z-index:1;
  width:56px; height:56px; margin:0 auto 14px; display:grid; place-items:center;
  background:#fff; border:1px solid #DCE6F7; border-radius:50%;
  box-shadow:0 3px 10px rgba(8,32,90,.07);
}
.jstep__ico svg{ width:26px; height:26px; fill:var(--navy); }
.jstep__yr{
  display:block; font-family:var(--f-head);
  font-size:20px; font-weight:800; color:var(--navy-ink); margin-bottom:7px;
}
.jstep__d{ display:block; font-size:12px; line-height:1.6; color:var(--muted); }

/* --------------------------------------------- mission / vision / values */
.mvv{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  padding:26px 8px;
  background:#F1F5FC; border:1px solid #E4EBF8; border-radius:10px;
}
.mvv__col{ position:relative; display:flex; align-items:flex-start; gap:18px; padding:2px 26px; }
.mvv__col + .mvv__col::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:#DCE5F5;
}
.mvv__ico{
  flex:none; width:62px; height:62px; display:grid; place-items:center;
  background:#E3EBFA; border-radius:50%;
}
.mvv__ico svg{ width:30px; height:30px; fill:var(--navy); }
.mvv__t{
  font-family:var(--f-head); margin:0 0 9px;
  font-size:15.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-ink);
}
.mvv p{ margin:0; font-size:13.5px; line-height:1.75; color:var(--muted); }
.mvv .ticks li{ font-size:13.5px; margin-bottom:6px; }

/* ------------------------------------------------------------ the numbers */
.astats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  padding:26px 28px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  border-radius:10px; box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.astat{ position:relative; display:flex; align-items:flex-start; gap:16px; padding:2px 24px; }
.astat:first-child{ padding-left:4px; }
.astat + .astat::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,.2);
}
.astat__ico{
  flex:none; width:52px; height:52px; display:grid; place-items:center;
  border:1.5px solid rgba(252,123,5,.85); border-radius:50%;
}
.astat__ico svg{ width:26px; height:26px; fill:var(--orange); }
/* Scoped to the inner <div>, not written as `.astat span`. The icon is also a
   <span>, and a direct child, so the loose selector matched it too — and at
   (0,1,1) it outranked `.astat__ico` at (0,1,0). display:block won, so
   place-items:center stopped applying and the glyph sat in the top-left corner
   of its ring. Same story for .dstat. */
.astat > div b{
  display:block; font-family:var(--f-head);
  font-size:27px; font-weight:800; line-height:1.1; color:#fff;
}
.astat > div span{
  display:block; font-size:12.5px; font-weight:700; line-height:1.4;
  letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.78);
}
/* the fourth tile is a statement, not a number — it takes the number's weight */
.astat__lead{ font-size:14px !important; color:#fff !important; letter-spacing:.03em; }

/* ------------------------------------------------------ leadership & team */
.teamcard,
.credcard{ display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,1fr); gap:22px; align-items:center; }
.team__lead p,
.cred__lead p{ margin:0 0 18px; font-size:13.5px; line-height:1.8; color:var(--muted); }

/* Each portrait card carries a line on what the role does, which makes the
   cards far taller than the introduction. Beside them, the introduction left a
   tall empty column; so here it runs as a band across the top — heading and
   text on the left, the button on the right — and the six cards take the full
   width beneath it, three to a row. */
.teamcard{ grid-template-columns:minmax(0,1fr); gap:20px; align-items:stretch; }
.team__lead{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px; align-items:end;
  padding-bottom:20px; border-bottom:1px solid #EDF1F8;
}
.team__lead .ttl{ grid-column:1; }
.team__lead p{ grid-column:1; max-width:720px; margin-bottom:0; }
.team__lead .btn{ grid-column:2; grid-row:1 / span 2; align-self:end; }

/* three to a row, two rows */
.team__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tcard{
  margin:0; overflow:hidden;
  background:var(--bg-soft); border:1px solid #E7EDF7; border-radius:9px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tcard:hover{ transform:translateY(-3px); border-color:#C9D9F2; box-shadow:var(--shadow); }
/* the four portraits are normalised to one head size and eye line, so a plain
   square frame lines them up without any per-photo positioning */
.tcard img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.tcard figcaption{ padding:12px 10px 14px; text-align:center; }
.tcard__name{ display:block; font-size:13.5px; font-weight:700; color:var(--navy-ink); line-height:1.35; }
.tcard__role{ display:block; margin-top:4px; font-size:12px; font-weight:600; color:var(--orange); line-height:1.4; }
.tcard__exp{ display:block; margin-top:4px; font-size:11.5px; color:var(--muted); line-height:1.4; }
/* one line on what the role does — a short rule sets it apart from the
   designation, and it simply wraps however narrow the card gets */
.tcard__desc{
  display:block; margin:9px auto 0; padding-top:9px; max-width:250px;
  border-top:1px solid #E3EBF8;
  font-size:11.5px; line-height:1.55; color:var(--muted);
  overflow-wrap:break-word;
}

/* ---------------------------------------------------- licence & compliance */
/* The licence and RA ID cards each carry an official logo and the 33-character
   licence reference, so they share the row at equal width; the compliance
   statement has no number to show and runs beneath them as a strip. */
.cred__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cred.cred--strip{ grid-column:1 / -1; align-items:center; justify-content:center; padding-block:10px; }
.cred{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  background:var(--bg-soft); border:1px solid #E7EDF7; border-radius:9px;
}
.cred__ico{ flex:none; width:46px; height:46px; display:grid; place-items:center; }
.cred__ico svg{ width:38px; height:38px; fill:#4A5878; }
.cred__ico--plain svg{ width:30px; height:30px; fill:var(--orange); }
.cred__ico--check svg{ width:36px; height:36px; fill:var(--navy); }
.cred__t{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--navy-ink); line-height:1.4;
}
.cred__t--wide{ font-size:12.5px; letter-spacing:.05em; }
.cred__v{
  display:block; margin-top:5px; font-size:12.5px; font-weight:600;
  color:var(--navy); line-height:1.45;
  word-break:normal; overflow-wrap:break-word;   /* <wbr> marks the good breaks */
}
.cred__v--big{ font-size:20px; font-weight:800; font-family:var(--f-head); color:var(--orange); }
.cred__m{ display:block; margin-top:5px; font-size:11.5px; font-weight:600; color:var(--orange); }

/* Official logos. Each sits in a white tile of one fixed height so the two
   line up across the row; the artwork inside is height-bound with width:auto,
   so neither is ever stretched off its own aspect ratio. */
.cred__logo{
  flex:none; height:78px; padding:7px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #E1E9F6; border-radius:8px;
}
.cred__logo img{ display:block; height:100%; width:auto; max-width:none; }
.cred__logo--mea{ padding-inline:10px; }
/* the ministry's name, set the way it appears under its own emblem */
.cred__org{
  display:block; margin-bottom:9px; padding-bottom:9px; border-bottom:1px solid #E1E9F6;
  font-size:13px; font-weight:700; line-height:1.35; color:var(--navy-ink);
}
.cred__org span{ display:block; font-size:12px; font-weight:500; color:var(--muted); }
.cred__lic{
  display:block; margin-top:6px; font-size:11.5px; font-weight:600; line-height:1.5;
  color:var(--navy); overflow-wrap:break-word;
}
.cred__lic b{ color:var(--navy-ink); font-weight:700; }

/* --------------------------------------------------- licence certificate */
/* A scroll-snap strip rather than a scripted carousel: it swipes on touch and
   scrolls with the keyboard by itself, so every page of the certificate stays
   reachable with JavaScript off. main.js adds the arrows and the dots, and
   both are gated on `js` so neither appears as dead furniture without it. */
.licdeck{ position:relative; padding:22px 24px 20px; }
.licdeck__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid #EDF1F8;
}
.licdeck__eyebrow{
  margin:0 0 6px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange);
}
.licdeck__title{
  margin:0 0 6px; font-size:clamp(16px,1.9vw,20px); font-weight:800; line-height:1.3;
  color:var(--navy-ink); overflow-wrap:break-word;
}
.licdeck__note{ margin:0; font-size:13px; line-height:1.6; color:var(--muted); }

.licdeck__stage{ position:relative; }
.licdeck__track{
  display:flex; gap:18px; margin:0; padding:2px 0 10px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:#C9D4E8 transparent;
}
.licdeck__track::-webkit-scrollbar{ height:6px; }
.licdeck__track::-webkit-scrollbar-thumb{ background:#C9D4E8; border-radius:99px; }
/* one page fills the frame; the scan is portrait, so it is the height that is
   capped and the width follows from the file's own aspect ratio */
.licpage{
  flex:0 0 100%; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; gap:11px;
}
.licpage a{ display:block; max-width:100%; }
.licpage img{
  display:block; width:auto; max-width:100%; max-height:560px; height:auto;
  background:#fff; border:1px solid #DFE7F5; border-radius:8px;
  box-shadow:0 8px 24px rgba(8,32,90,.10);
  transition:border-color .18s ease;
}
.licpage a:hover img{ border-color:#B9CBEA; }
.licpage__cap{
  margin:0; max-width:560px; text-align:center;
  font-size:12.5px; line-height:1.6; color:var(--muted);
}
.licpage__cap b{ color:var(--navy-ink); font-weight:700; }

.licdeck__arrow{ display:none; }
.js .licdeck__arrow{
  position:absolute; top:calc(50% - 44px); z-index:3;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  background:#fff; border:1px solid #CBD8EE; border-radius:50%; cursor:pointer;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.licdeck__arrow svg{ width:20px; height:20px; fill:var(--navy); transition:fill .18s ease; }
.licdeck__arrow--prev{ left:-12px; }
.licdeck__arrow--next{ right:-12px; }
.js .licdeck__arrow:hover{ border-color:var(--orange); }
.js .licdeck__arrow:hover svg{ fill:var(--orange); }
.js .licdeck__arrow[disabled]{ opacity:.3; cursor:default; }
.js .licdeck__arrow[disabled]:hover{ border-color:#CBD8EE; }
.js .licdeck__arrow[disabled]:hover svg{ fill:var(--navy); }

.licdeck__foot{ display:flex; justify-content:center; margin-top:8px; }
.licdeck__dots{ display:flex; gap:9px; }
.licdeck__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:#CBD8EE; transition:background .18s ease, transform .18s ease;
}
.licdeck__dot:hover{ background:#9FB5DC; }
.licdeck__dot[aria-current="true"]{ background:var(--orange); transform:scale(1.3); }
/* only shown where the arrows are not: see the 620px breakpoint */
.licdeck__hint{
  display:none; margin:0;
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--muted);
}

@media (prefers-reduced-motion:reduce){
  .licdeck__track{ scroll-behavior:auto; }
}

@media (max-width:980px){
  .licdeck{ padding:20px 18px 18px; }
  .licpage img{ max-height:460px; }
  .js .licdeck__arrow--prev{ left:-8px; }
  .js .licdeck__arrow--next{ right:-8px; }
}

@media (max-width:620px){
  .licdeck__head{ gap:14px; }
  .licdeck__head .btn{ width:100%; justify-content:center; }
  .licpage img{ max-height:380px; }
  /* at this width an arrow would sit on top of the certificate itself — the
     strip swipes, and the dots below still step through it */
  .js .licdeck__arrow{ display:none; }
  .licdeck__foot{ flex-direction:column; align-items:center; gap:10px; }
  .licdeck__hint{ display:block; }
}

/* ------------------------------------------------ about us — breakpoints */
@media (max-width:1140px){
  .mvv__col{ padding:2px 16px; }
  .astat{ padding:2px 14px; gap:12px; }
  .jstep{ padding:0 4px; }
  .jstep:not(:last-child)::before{ left:calc(50% + 30px); right:calc(-50% + 30px); }
}

@media (max-width:980px){
  .chero--about .chero__text{ max-width:none; }
  .cred__grid{ grid-template-columns:1fr; }
  .ahero__city{ width:100%; opacity:.2; }

  .storygrid{ grid-template-columns:1fr; }

  .jrny{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
  .jstep:not(:last-child)::before{ display:none; }

  .mvv{ grid-template-columns:1fr; row-gap:22px; padding:24px 8px; }
  .mvv__col + .mvv__col::before{ left:26px; right:26px; top:-11px; bottom:auto; width:auto; height:1px; }

  .astats{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .astat:nth-child(odd){ padding-left:6px; }
  .astat:nth-child(odd)::before{ display:none; }

  .teamcard,
  .credcard{ grid-template-columns:1fr; gap:22px; }
  .cred__grid{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .jrny{ grid-template-columns:1fr; row-gap:20px; }
  .astats{ grid-template-columns:1fr; row-gap:18px; padding:22px; }
  .astat{ padding:0; }
  .astat + .astat::before{ left:0; right:0; top:-9px; bottom:auto; width:auto; height:1px; }
  .mvv__col{ padding:2px 18px; }
  /* the band stacks: heading, text, then a full-width button */
  .team__lead{ display:block; }
  .team__lead p{ margin-bottom:18px; }
  .team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .team__lead .btn,
  .cred__lead .btn{ width:100%; justify-content:center; }
  /* two cards to a row down here, so the longest name wraps and would push its
     designation a line below the card beside it — reserve the second line.
     Same for the two "HR Manager – …" designations, which wrap at this width:
     a px floor, because that en dash can fall back to a taller font. */
  .tcard__name{ min-height:calc(2 * 1.35em); }
  .tcard__role{ min-height:40px; }
}

/* ==========================================================================
   Services page
   ========================================================================== */

.svcpage{ background:var(--bg-soft); }

/* ------------------------------------------------------------- page hero */
/* The reference design puts a stock "hand holding a glowing people-network"
   photograph on the right. That exact shot is not licensable here, and the
   readable part of it is the network itself — so it is drawn, not photographed.
   The markup is inline in services.html (it was assets/img/services/
   network-people.svg loaded as a background until the piece had to animate).
   It stays crisp at any size and costs a few KB instead of a compressed JPEG. */
.chero--svc{ padding-block:36px 40px; min-height:420px; }
.chero--svc .chero__title{ margin-bottom:9px; }
.chero--svc .chero__crumbs{ margin-bottom:15px; }
.chero--svc .chero__text{ max-width:430px; margin-bottom:0; }

.svchero__mesh{
  position:absolute; z-index:1; top:0; bottom:0; left:34%; right:0;
  background:url('../img/hero/network.svg') center/cover no-repeat;
  opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
}
.svchero__cluster{
  position:absolute; z-index:2; right:3%; top:50%; transform:translateY(-50%);
  width:min(49%,600px); height:auto;
  filter:drop-shadow(0 12px 34px rgba(0,10,40,.45));
  animation:nwk-drift 9s ease-in-out infinite;
}
/* the whole cluster rises and settles, so the piece is never completely still
   even at the moment every node happens to be at the top of its own bob. The
   keyframes restate the centring translate rather than composing with it —
   a CSS transform replaces the one on the element, it does not add to it. */
@keyframes nwk-drift{
  0%,100%{ transform:translateY(calc(-50% - 5px)); }
  50%    { transform:translateY(calc(-50% + 5px)); }
}

/* ---------------------------------------------------------- the mesh */
.nwk__links line{ stroke:#8FB4FF; stroke-width:1.1; opacity:.55; }

.nwk__flow line{
  stroke:#FFD0A0; stroke-width:2.8; stroke-linecap:round;
  /* the spokes underneath are a pale blue and the pulse is a warm mid-tone —
     without the glow it disappears into them at this size */
  filter:drop-shadow(0 0 4px rgba(252,123,5,.9));
  /* 14 units of dash and a gap longer than the longest spoke (153 units), so
     exactly one pulse is in flight per line and the rest of the cycle is the
     quiet gap travelling through */
  stroke-dasharray:14 260;
  animation:nwk-flow 3.8s linear infinite;
  animation-delay:var(--d,0s);
}
@keyframes nwk-flow{
  from{ stroke-dashoffset:0; opacity:0; }
  8%  { opacity:.95; }
  70% { opacity:.95; }
  to  { stroke-dashoffset:-274; opacity:0; }
}

.nwk__dust circle{
  fill:#9DC0FF;
  animation:nwk-twinkle 4.5s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes nwk-twinkle{
  0%,100%{ opacity:.22; }
  50%    { opacity:.8; }
}

/* ------------------------------------------------------ the satellites */
.nwk__node circle{ fill:#0A2E7D; stroke:#7FA9F5; stroke-width:1.4; opacity:.95; }
.nwk__node path{ fill:#DCE8FF; }
.nwk__node{
  animation:nwk-bob 5.6s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes nwk-bob{
  0%,100%{ transform:translateY(-6px); }
  50%    { transform:translateY(6px); }
}

/* ------------------------------------------------------------- the hub */
/* fill-box on each of these: without it a scale runs off the SVG's 0,0 origin
   and throws the circle across the canvas instead of growing it in place. */
.nwk__halo{
  fill:none; stroke:#FC7B05; stroke-width:2;
  transform-box:fill-box; transform-origin:center;
  animation:nwk-halo 3.8s ease-out infinite;
}
@keyframes nwk-halo{
  0%     { transform:scale(1);    opacity:.55; }
  70%,100%{ transform:scale(1.7); opacity:0; }
}
.nwk__core{
  fill:#0B3491; stroke:#FC7B05; stroke-width:2;
  transform-box:fill-box; transform-origin:center;
  animation:nwk-breathe 3.8s ease-in-out infinite;
}
@keyframes nwk-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.045); }
}
.nwk__ring{
  fill:none; stroke:#FC7B05; stroke-width:1.6; opacity:.6;
  /* r=63 gives a 396-unit circumference; 9 repeats of 26+18 close it exactly,
     so the dashes meet seamlessly instead of showing a join as they turn */
  stroke-dasharray:26 18;
  transform-box:fill-box; transform-origin:center;
  animation:nwk-spin 22s linear infinite;
}
@keyframes nwk-spin{ to{ transform:rotate(360deg); } }
.nwk__hubico{ fill:#fff; }

/* ------------------------------------------------------- the service tiles */
.svcgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.svc{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:24px 20px 22px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc:hover{ transform:translateY(-4px); border-color:#C9D9F2; box-shadow:var(--shadow-lg); }
.svc__ico{
  width:64px; height:64px; margin-bottom:16px; display:grid; place-items:center;
  background:#EDF3FD; border-radius:50%;
}
.svc__ico svg{ width:31px; height:31px; fill:var(--navy); }
.svc h3{
  margin:0; font-family:var(--f-head);
  font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.45; color:var(--navy-ink);
  /* two lines reserved, so the orange rule sits at one height across the row */
  min-height:2.9em; display:flex; align-items:center;
}
.svc__rule{ display:block; width:34px; height:2px; margin:11px 0 13px; background:var(--orange); border-radius:2px; }
.svc p{ margin:0; font-size:12.5px; line-height:1.7; color:var(--muted); }

/* ------------------------------------------------------------ why choose */
.whyband{
  display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,1.68fr);
  gap:14px; align-items:center;
  padding:24px 28px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  border-radius:10px; box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.whyband__lead{
  margin:0; font-family:var(--f-head);
  font-size:clamp(15px,1.5vw,18.5px); font-weight:800; line-height:1.45;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}
.whyband__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.whyf{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:2px 18px; }
.whyf:last-child{ padding-right:0; }
.whyf::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,.18);
}
.whyf__ico{ flex:none; width:38px; height:38px; display:grid; place-items:center; }
.whyf__ico svg{ width:29px; height:29px; fill:var(--orange); }
.whyf__t{ display:block; font-size:12.5px; font-weight:700; line-height:1.4; color:#fff; margin-bottom:6px; }
.whyf__s{ display:block; font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.68); }

/* -------------------------------------------------------------- ticketing */
/* the photograph holds the right of the card and dissolves into it, so the
   copy never sits on sky */
.ticket{
  position:relative; overflow:hidden; min-height:296px;
  background:#EDF3FD;
  border:1px solid #E1EAF8; border-radius:10px;
}
/* the sky gets its own box rather than being sized off the card. As a card
   background it scaled to the card's height, and the card is as tall as its
   copy — which blew the aircraft up to twice the intended size. */
.ticket__media{
  position:absolute; z-index:1; top:0; right:0; bottom:0; width:66%;
  background:url('../img/services/ticketing.jpg') center/cover no-repeat;
}
.ticket__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    #EDF3FD 0%, rgba(237,243,253,.72) 24%, rgba(237,243,253,.22) 46%,
    rgba(237,243,253,0) 66%);
}
.ticket__body{ position:relative; z-index:2; max-width:430px; padding:26px 28px 28px; }
.ttl2{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:.01em;
  text-transform:uppercase; color:var(--navy-ink);
}
.ttl2__plane{ width:26px; height:26px; fill:var(--navy); flex:none; }
.ticket__text{ margin:0 0 15px; font-size:13.5px; line-height:1.75; color:var(--muted); }
.ticket .ticks{ margin-bottom:20px; }
.ticket .ticks li{ font-size:13px; margin-bottom:7px; }

/* the dedicated ticket desk — its own phone and inbox, set apart from the list */
.ticket__contact{
  margin:-4px 0 20px; padding:12px 15px 13px;
  background:#fff; border:1px solid #DCE6F6; border-left:3px solid var(--orange); border-radius:8px;
}
.ticket__label{
  margin:0 0 7px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange);
}
.ticket__lines{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0; }
.ticket__lines a{
  display:inline-flex; align-items:center; gap:8px; min-width:0;
  font-size:13.5px; font-weight:700; color:var(--navy-ink); overflow-wrap:anywhere;
}
.ticket__lines a:hover{ color:var(--orange); }
.ticket__lines svg{ flex:none; width:15px; height:15px; fill:var(--navy); }

/* ------------------------------------------------------ process, no numbers */
/* reuses .steps from the For Candidates page; this row has labels only, so the
   icon carries the gap the number used to */
.steps--plain{ margin-top:6px; }
.steps--plain .step__ico{ margin-bottom:15px; }
.steps--plain .step__t{ min-height:2.8em; }

/* -------------------------------------------------- services — breakpoints */
@media (max-width:1140px){
  .svcgrid{ gap:12px; }
  .svc{ padding:22px 15px 20px; }
  .whyf{ padding:2px 12px; }
  .whyband{ padding:22px 20px; }
}

@media (max-width:980px){
  .chero--svc{ min-height:0; padding-block:34px 30px; }
  .chero--svc .chero__text{ max-width:none; }
  /* no copy column to sit beside any more — it drops behind the text as
     texture, which is also why the hub's orange stops competing with it */
  .svchero__cluster{ right:-8%; width:min(62%,390px); opacity:.45; }
  .svchero__mesh{ left:0; opacity:.28; -webkit-mask-image:none; mask-image:none; }

  .svcgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc h3{ min-height:0; }

  .whyband{ grid-template-columns:1fr; gap:20px; }
  .whyband__grid{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .whyf:nth-child(odd){ padding-left:0; }
  .whyf:nth-child(odd)::before{ display:none; }
  .whyf:last-child{ padding-right:18px; }

  /* the sky has nowhere to go beside the copy — put it above it */
  .ticket{ min-height:0; padding-top:180px; }
  .ticket__media{ width:100%; bottom:auto; height:210px; }
  .ticket__media::after{
    background:linear-gradient(180deg, rgba(237,243,253,0) 0%,
      rgba(237,243,253,.55) 62%, #EDF3FD 96%);
  }
  .ticket__body{ max-width:none; }
}

@media (max-width:620px){
  .svcgrid{ grid-template-columns:1fr; }
  .whyband__grid{ grid-template-columns:1fr; row-gap:18px; }
  .whyf{ padding:0; }
  .whyf::before{ left:0; right:0; top:-9px; bottom:auto; width:auto; height:1px; }
  .whyf:first-child::before{ display:none; }
  .whyf:last-child{ padding-right:0; }
  .ticket__body{ padding:22px; }
  .ticket .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   Contact Us page
   ========================================================================== */

.ctpage{ background:var(--bg-soft); }

/* ------------------------------------------------------------- page hero */
/* The reference design puts a stock "headset on a desk" photograph on the
   right. Like the Services hero it is drawn instead of photographed
   (assets/img/contact/support-headset.svg) — same reason, same trade-off.
   The generous bottom padding is what the office cards overlap into. */
.cthero{
  position:relative; overflow:hidden;
  padding-block:52px 132px;
  background:linear-gradient(100deg,#02205F 0%,#032468 46%,#052A79 100%);
}
.cthero__mesh{
  position:absolute; z-index:1; top:0; bottom:0; left:32%; right:0;
  background:url('../img/hero/network.svg') center/cover no-repeat;
  opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
}
/* Anchored to the foot of the hero rather than centred in it: the office
   cards overlap the last 96px of the navy, and the boom mic is the bottom of
   the drawing — centre it and the microphone disappears behind a card. */
.cthero__art{
  position:absolute; z-index:2; right:5%; bottom:106px;
  width:min(32%,390px); aspect-ratio:620/470;
  background:url('../img/contact/support-headset.svg') center/contain no-repeat;
  filter:drop-shadow(0 12px 34px rgba(0,10,40,.45));
}
.cthero__inner{ position:relative; z-index:3; }
.cthero__title{
  font-size:clamp(34px,5.2vw,60px); font-weight:900; line-height:1.02;
  letter-spacing:-.015em; text-transform:uppercase; color:#fff;
  margin-bottom:16px;
}
.cthero__rule{
  display:block; width:52px; height:3px; margin-bottom:20px;
  background:var(--orange); border-radius:2px;
}
.cthero__sub{ margin:0 0 12px; font-size:19px; font-weight:700; line-height:1.35; color:#fff; }
.cthero__text{
  margin:0; max-width:360px;
  font-size:15px; line-height:1.85; color:rgba(255,255,255,.86);
}

/* ------------------------------------------------ overlapping office cards */
.ctinfo-wrap{ position:relative; z-index:5; margin-top:-102px; }
.ctinfo{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff; border:1px solid #EDF1F8; border-radius:10px;
  box-shadow:0 14px 40px rgba(8,32,90,.12);
}
.ctcard{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:30px 26px 26px;
}
.ctcard + .ctcard::before{
  content:''; position:absolute; left:0; top:30px; bottom:30px; width:1px; background:#E7EDF7;
}
.ctcard__ico{
  flex:none; width:58px; height:58px; margin-bottom:16px;
  display:grid; place-items:center; border-radius:50%; background:var(--navy);
}
.ctcard__ico svg{ width:28px; height:28px; fill:#fff; }
.ctcard__ico--orange{ background:var(--orange); }
.ctcard h2{
  margin:0 0 11px;
  font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy-ink);
}
.ctcard p{ margin:0 0 18px; font-size:13.5px; line-height:1.7; color:var(--muted); }
.ctcard a{ color:var(--muted); }
.ctcard a:hover{ color:var(--orange); }
/* the rule sits on the card's floor, so it lines up across a row of cards
   whose addresses run to different numbers of lines */
.ctcard__rule{
  display:block; width:34px; height:2px; margin-top:auto;
  background:var(--orange); border-radius:2px;
}

/* ------------------------------------------------------- message + map */
.ctmain{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px; align-items:start;
}
.cth2{
  margin:0 0 20px;
  font-family:var(--f-head);
  font-size:20px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy-ink);
}
.cth2::after{
  content:''; display:block; width:52px; height:3px; margin-top:12px;
  background:var(--orange); border-radius:2px;
}
.ctlead{ margin:-8px 0 16px; font-size:13.5px; color:var(--muted); }

/* the enquiry form */
.ctform{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ctform__full{ grid-column:1 / -1; }
.ctform input,
.ctform textarea{
  width:100%; padding:13px 15px;
  font-family:var(--f-body); font-size:14px; line-height:1.5; color:var(--text);
  background:#fff; border:1px solid #DDE5F2; border-radius:7px;
  -webkit-appearance:none; appearance:none;
}
.ctform textarea{ min-height:180px; resize:vertical; }
.ctform input::placeholder,
.ctform textarea::placeholder{ color:#667694; }
.ctform input:focus,
.ctform textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(252,123,5,.12);
}
.ctform .btn{ grid-column:1 / -1; justify-self:start; margin-top:2px; }
.ctform .btn svg{ width:16px; height:16px; fill:currentColor; }

/* the map */
.ctmap{
  overflow:hidden; background:#E8EEF8;
  border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.ctmap iframe{ display:block; width:100%; height:292px; border:0; }

/* both offices, side by side: a named card per office with its own map */
.ctlocs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ctloc{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.ctloc__head{ display:flex; align-items:flex-start; gap:9px; padding:13px 14px 12px; }
/* red, not the site orange: it is meant to read as the pin on the map below */
.ctloc__pin{
  flex:none; width:24px; height:24px; margin-top:1px; fill:#E4252B;
  filter:drop-shadow(0 2px 3px rgba(228,37,43,.28));
}
.ctloc__name{
  margin:0; font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.3; color:var(--navy-ink);
}
.ctloc__type{ margin:3px 0 0; font-size:12px; font-weight:700; line-height:1.45; color:var(--orange); }
.ctloc__type span{ display:block; font-size:12.5px; font-weight:400; color:var(--muted); }
.ctloc .ctmap{ margin-top:auto; border:0; border-top:1px solid #E7EDF7; border-radius:0; box-shadow:none; }
.ctloc .ctmap iframe{ height:236px; }

/* two numbers under "Still have questions?" — each stays whole, and they sit
   on one line when there is room for both */
.ctband__phones{ display:flex; flex-wrap:wrap; column-gap:22px; margin:0; }
.ctband__phones .ctband__big{ white-space:nowrap; }

/* working hours / overseas office, beneath the map */
.ctnote{
  display:flex; align-items:center; gap:18px;
  margin-top:16px; padding:20px 24px;
  background:var(--blue-soft); border:1px solid #E1EAF8; border-radius:10px;
}
.ctnote--top{ align-items:flex-start; }
.ctnote__ico{
  flex:none; width:58px; height:58px; display:grid; place-items:center;
  background:var(--navy); border-radius:50%;
}
.ctnote--top .ctnote__ico{ background:var(--orange); }
.ctnote__ico svg{ width:29px; height:29px; fill:#fff; }
.ctnote h3{
  margin:0 0 8px;
  font-size:16px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-ink);
}
.cthours{ display:grid; grid-template-columns:auto 1fr; gap:3px 0; margin:0; font-size:13.5px; }
.cthours dt{ position:relative; padding-right:24px; font-weight:600; color:var(--navy-ink); }
.cthours dt::after{ content:':'; position:absolute; right:10px; color:var(--muted); }
.cthours dd{ margin:0; color:var(--muted); }
.ctnote p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--muted); }
.ctnote p + p{ margin-top:5px; }
.ctnote a{ font-weight:600; color:var(--navy-ink); }
.ctnote a:hover{ color:var(--orange); }

/* ------------------------------------------------------- why reach out */
.ctwhy{
  padding:26px 14px 28px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.ctwhy__head{
  margin:0 0 24px; text-align:center;
  font-family:var(--f-head);
  font-size:18px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-ink);
}
.ctwhy__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.ctwhy__col{ position:relative; padding:0 20px; text-align:center; }
.ctwhy__col + .ctwhy__col::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:#E7EDF7;
}
.ctwhy__col svg{ width:40px; height:40px; margin-bottom:13px; fill:var(--navy); }
.ctwhy__col:nth-child(even) svg{ fill:var(--orange); }
.ctwhy__col h3{
  margin:0 0 7px;
  font-size:13.5px; font-weight:800; line-height:1.4; color:var(--navy-ink);
}
.ctwhy__col p{ margin:0; font-size:12.5px; line-height:1.7; color:var(--muted); }

/* ------------------------------------------------------------ call band */
.ctband{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  padding:24px 32px; border-radius:10px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.ctband__col{ position:relative; display:flex; align-items:center; gap:22px; padding:2px 32px; }
.ctband__col:first-child{ padding-left:0; }
.ctband__col + .ctband__col::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(255,255,255,.16);
}
.ctband__ico{ flex:none; width:68px; height:68px; fill:var(--orange); }
.ctband__ico--ring{
  display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.55); border-radius:50%;
}
.ctband__ico--ring svg{ width:32px; height:32px; fill:#fff; }
.ctband__eyebrow{ margin:0 0 3px; font-size:14.5px; font-weight:700; color:var(--orange); }
.ctband__label{ margin:0 0 3px; font-size:14.5px; color:rgba(255,255,255,.86); }
.ctband__big{
  display:block; font-family:var(--f-head);
  font-size:clamp(19px,2vw,25px); font-weight:800; line-height:1.2; color:#fff;
}
a.ctband__big:hover{ color:var(--orange); }
.ctband__note{ margin:5px 0 0; font-size:13.5px; color:rgba(255,255,255,.72); }

/* ------------------------------------------------- contact — breakpoints */
@media (max-width:1140px){
  .ctcard{ padding:26px 18px 22px; }
  .ctwhy__col{ padding:0 12px; }
  .ctband__col{ padding:2px 22px; gap:18px; }
}

@media (max-width:980px){
  .cthero{ padding-block:36px 108px; }
  .cthero__art{ right:-4%; bottom:auto; top:50%; transform:translateY(-50%);
                width:min(56%,340px); opacity:.5; }
  .cthero__mesh{ left:0; opacity:.28; -webkit-mask-image:none; mask-image:none; }
  .cthero__text{ max-width:none; }

  .ctinfo{ grid-template-columns:1fr 1fr; }
  /* on a 2 × 2 grid the dividers have to change axis, so they are redrawn
     rather than inherited from the single-row rule */
  .ctcard::before{ display:none; }
  .ctcard:nth-child(even)::before{
    display:block; content:''; position:absolute; left:0; top:26px; bottom:26px;
    width:1px; background:#E7EDF7;
  }
  .ctcard:nth-child(n+3)::after{
    content:''; position:absolute; left:22px; right:22px; top:0; height:1px; background:#E7EDF7;
  }

  .ctmain{ grid-template-columns:1fr; gap:28px; }
  .ctwhy__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:24px; }
  .ctwhy__col:nth-child(3n+1)::before{ display:none; }
  .ctwhy__col:nth-child(n+4)::after{
    content:''; position:absolute; left:12px; right:12px; top:-12px; height:1px; background:#E7EDF7;
  }

  .ctband{ grid-template-columns:1fr; padding:22px 24px; }
  .ctband__col{ padding:18px 0 0; }
  .ctband__col:first-child{ padding-top:0; }
  .ctband__col + .ctband__col::before{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
  }
}

@media (max-width:620px){
  .cthero__art{ display:none; }
  .ctinfo{ grid-template-columns:1fr; }
  .ctcard:nth-child(even)::before{ display:none; }
  .ctcard + .ctcard::after{
    content:''; display:block; position:absolute;
    left:22px; right:22px; top:0; height:1px; background:#E7EDF7;
  }
  .ctform{ grid-template-columns:1fr; }
  .ctform .btn{ width:100%; justify-content:center; }
  .ctlocs{ grid-template-columns:1fr; }
  .ctnote{ flex-direction:column; align-items:flex-start; gap:14px; }
  .ctwhy__grid{ grid-template-columns:1fr; row-gap:22px; }
  .ctwhy__col{ padding:0 8px; }
  .ctwhy__col::before{ display:none; }
  .ctwhy__col + .ctwhy__col::after{
    content:''; position:absolute; left:8px; right:8px; top:-11px; height:1px; background:#E7EDF7;
  }
  .ctband__col{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ==========================================================================
   For Employers page
   ========================================================================== */

.emppage{ background:var(--bg-soft); }

/* ------------------------------------------------------------- page hero */
/* Reuses .phero wholesale — the handshake photograph it already carries is
   exactly the shot the reference design puts here. Only the copy block
   changes: a breadcrumb, a wider lede and a pair of buttons. */
.phero--emp{ padding-block:40px 46px; }
/* .phero's overlay opens on solid #02205F, a shade darker than the section
   gradient has reached by the 34% mark where the photo box starts. On the
   Clients hero that is hidden by the copy; on this taller one it reads as a
   vertical seam. Fading the photograph in with a mask lets the section's own
   gradient carry the left half instead, so there is no edge to see. */
.phero--emp .phero__media{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%);
}
.phero--emp .phero__media::after{
  background:linear-gradient(90deg,
    rgba(2,32,95,.98) 0%, rgba(2,33,99,.88) 26%,
    rgba(3,36,106,.68) 58%, rgba(3,36,106,.56) 100%);
}
.phero--emp .phero__title{ margin-bottom:11px; }
.phero--emp .phero__text{ max-width:436px; margin-bottom:24px; }
.phero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* the outline button only ever sits on navy, so it lives with this page */
.btn--outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--outline:hover{ background:rgba(255,255,255,.06); border-color:var(--orange); color:var(--orange); }

/* ----------------------------------------------------- the credentials band */
.empband{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  padding:22px 26px; border-radius:10px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.empband__col{ position:relative; display:flex; align-items:flex-start; gap:13px; padding:2px 17px; }
.empband__col:first-child{ padding-left:0; }
.empband__col:last-child{ padding-right:0; }
.empband__col + .empband__col::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(255,255,255,.18);
}
.empband__ico{
  flex:none; width:50px; height:50px; display:grid; place-items:center;
  border:1.6px solid rgba(252,123,5,.9); border-radius:50%;
}
.empband__ico svg{ width:25px; height:25px; fill:var(--orange); }
.empband__t{
  display:block; font-family:var(--f-head);
  font-size:13.5px; font-weight:800; line-height:1.32; color:#fff; margin-bottom:3px;
}
.empband__t--num{ font-size:25px; line-height:1.05; }
.empband__s{ display:block; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.72); }

/* --------------------------------------------------- the recruitment process */
/* The row itself is .steps, borrowed from For Candidates. Six steps rather
   than seven, so the titles need one line less reserved than that page. */
.empbox{
  padding:24px 22px 26px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.steps--six .step__t{ min-height:2.7em; }
.steps--six .step__num{ font-size:25px; }

/* ------------------------------------------------------ industries we serve */
/* Same bargain as the "Hire from India" frames: the tile paints a designed
   navy fallback and lays the photograph over the top with ::after, so a shot
   that has not been supplied yet degrades to the fallback rather than a
   broken image. Drop a JPEG in at assets/img/industries/ and it appears. */
.indgrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
/* A flex column with a fixed-height photo and a bar that takes whatever is
   left. Two of the six labels run to two lines, so the grid stretches every
   tile to the tallest — and the bar, not a gap of background, absorbs it. */
.ind{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ind:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.ind__media{
  position:relative; flex:none; height:148px;
  background:linear-gradient(150deg,#0A2A72 0%,#052166 54%,#03163F 100%);
}
.ind__ph{
  position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:14px 14px;
}
.ind__ph svg{ width:40px; height:40px; fill:rgba(255,255,255,.4); }
/* The six photographs come from six different sources and clash — daylight
   blue, orange dusk, green factory, yellow forklift. A navy wash over each one
   pulls them into the same family and runs the bottom of the photo down into
   the label bar, so the tile reads as one object. Same device .why__media and
   .crhero__media already use, and it is layered into this rule rather than
   added as another element so nothing new enters the stacking order. */
.ind__media::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:linear-gradient(180deg, rgba(2,32,95,.10) 0%, rgba(2,32,95,.34) 100%),
                   var(--shot);
  background-size:cover; background-position:center;
}
.ind--construction{ --shot:url('../img/industries/construction.jpg'); }
.ind--oilgas     { --shot:url('../img/industries/oil-and-gas.jpg'); }
.ind--manufacture{ --shot:url('../img/industries/manufacturing.jpg'); }
.ind--logistics  { --shot:url('../img/industries/logistics.jpg'); }
.ind--hospitality{ --shot:url('../img/industries/hospitality.jpg'); }
.ind--facilities { --shot:url('../img/industries/facilities.jpg'); }

.ind__bar{
  position:relative; z-index:3; flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:12px 8px 13px; background:var(--navy-deep);
}
.ind__bar svg{ width:22px; height:22px; fill:#fff; }
.ind__bar span{
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.4; text-align:center; color:#fff;
}
.ind:hover .ind__bar{ background:#0A2E7D; }

/* "View more industries" is a real disclosure, not a link to a page that does
   not exist: <details> so it works with no JavaScript at all. */
.indmore{ margin-top:16px; text-align:center; }
.indmore > summary{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy); background:#fff;
  border:1px solid #CBD8EE; border-radius:8px; box-shadow:var(--shadow);
  transition:border-color .18s ease, color .18s ease;
}
.indmore > summary::-webkit-details-marker{ display:none; }
.indmore > summary:hover{ border-color:var(--orange); color:var(--orange); }
.indmore > summary .arw{ transition:transform .18s ease; }
.indmore[open] > summary .arw{ transform:rotate(90deg); }
.indmore__extra{ margin-top:16px; }

/* ---------------------------------------------------- why partner + the CTA */
.partner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.365fr);
  gap:16px; align-items:stretch;
}
.partner__main{
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05); overflow:hidden;
}
.partner__intro{ padding:26px 24px 26px 26px; border-right:1px solid #EDF1F8; }
.partner__title{
  margin-bottom:14px;
  font-size:23px; font-weight:800; line-height:1.28; text-transform:uppercase;
  color:var(--navy-ink);
}
.partner__intro p{ margin:0; font-size:13px; line-height:1.75; color:var(--muted); }

.partner__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.pfeat{ position:relative; padding:22px 14px 20px; text-align:center; }
.pfeat:not(:nth-child(3n+1))::before{
  content:''; position:absolute; left:0; top:16px; bottom:16px; width:1px; background:#EDF1F8;
}
.pfeat:nth-child(n+4)::after{
  content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:#EDF1F8;
}
.pfeat svg{ width:34px; height:34px; margin-bottom:11px; fill:var(--navy); }
.pfeat:nth-child(even) svg{ fill:var(--orange); }
.pfeat span{ display:block; font-size:12.5px; font-weight:700; line-height:1.45; color:var(--navy-ink); }

.partner__cta{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:28px 26px 30px; border-radius:10px;
  background:linear-gradient(150deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.partner__cta h3{
  margin-bottom:12px;
  font-size:23px; font-weight:800; line-height:1.25; text-transform:uppercase; color:#fff;
}
.partner__cta p{ margin:0 0 20px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.78); }
.partner__cta .btn{ margin-top:auto; }

/* ------------------------------------------------------------ the logo strip */
.logostrip{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05); overflow:hidden;
}
.logostrip__item{
  position:relative; display:grid; place-items:center; height:88px; padding:10px 12px;
}
.logostrip__item + .logostrip__item::before{
  content:''; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:#EDF1F8;
}
.logostrip__item img{
  max-height:62px; width:auto; object-fit:contain;
  transform:scale(1.14); /* the source files carry a wide white margin */
  transition:transform .25s ease;
}
.logostrip__item:hover img{ transform:scale(1.22); }
.logostrip__more{ display:flex; align-items:center; justify-content:center; gap:9px; }
.logostrip__more svg{ flex:none; width:26px; height:26px; fill:var(--navy); }
.logostrip__more span{
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.35; color:var(--navy-ink);
}

/* ------------------------------------------- for employers — breakpoints */
@media (max-width:1140px){
  .empband__col{ padding:2px 15px; gap:11px; }
  .empband__ico{ width:48px; height:48px; }
  .empband__ico svg{ width:24px; height:24px; }
  .partner__intro{ padding:22px 18px; }
  .pfeat{ padding:20px 9px 18px; }
}

@media (max-width:980px){
  .phero--emp .phero__text{ max-width:none; }

  .empband{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; }
  .empband__col{ padding:0 18px; }
  .empband__col:nth-child(odd){ padding-left:0; }
  .empband__col:nth-child(odd)::before{ display:none; }
  .empband__col:nth-child(n+3){ padding-top:20px; }
  .empband__col:nth-child(n+3)::after{
    content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.18);
  }
  /* five into a two-column grid leaves one on its own — let it run full width */
  .empband__col:last-child{ grid-column:1 / -1; padding-right:0; }

  /* six steps in a row stop being readable well before this — wrap to 3 + 3
     and drop the chevrons, which only make sense along a single line */
  .steps--six{ flex-wrap:wrap; row-gap:22px; }
  .steps--six .step{ flex:0 0 33.333%; }
  .steps--six .steps__sep{ display:none; }

  .indgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .partner{ grid-template-columns:1fr; }
  .partner__main{ grid-template-columns:1fr; }
  .partner__intro{ border-right:0; border-bottom:1px solid #EDF1F8; }

  .logostrip{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .logostrip__item:nth-child(4n+1)::before{ display:none; }
  .logostrip__item:nth-child(n+5)::after{
    content:''; position:absolute; left:0; right:0; top:0; height:1px; background:#EDF1F8;
  }
}

@media (max-width:620px){
  .phero__actions .btn{ flex:1 1 100%; justify-content:center; }

  .empband{ grid-template-columns:1fr; padding:22px; }
  .empband__col{ padding:0; }
  .empband__col:nth-child(n+2){ padding-top:18px; }
  .empband__col:nth-child(n+2)::after{
    content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.18);
  }
  .empband__col + .empband__col::before{ display:none; }

  .steps--six .step{ flex:0 0 50%; }
  .indgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .indmore > summary{ width:100%; justify-content:center; }

  .partner__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pfeat:not(:nth-child(3n+1))::before{ display:none; }
  .pfeat:not(:nth-child(2n+1))::before{
    content:''; display:block; position:absolute; left:0; top:16px; bottom:16px;
    width:1px; background:#EDF1F8;
  }
  .pfeat:nth-child(n+3)::after{
    content:''; position:absolute; left:14px; right:14px; top:0; height:1px; background:#EDF1F8;
  }

  .logostrip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logostrip__item:nth-child(4n+1)::before{ display:block; }
  .logostrip__item:nth-child(2n+1)::before{ display:none; }
  .logostrip__item:nth-child(n+3)::after{
    content:''; position:absolute; left:0; right:0; top:0; height:1px; background:#EDF1F8;
  }
}

/* ==========================================================================
   Careers page
   ========================================================================== */

.crpage{ background:var(--bg-soft); }

/* ------------------------------------------------------------- page hero */
/* The photograph fades in with a mask rather than sitting behind an opaque
   navy overlay — same reasoning as .phero--emp, and it means a missing file
   leaves a clean navy hero rather than a hard-edged empty box. */
.crhero{
  position:relative; overflow:hidden;
  padding-block:46px 118px;
  background:linear-gradient(100deg,#02205F 0%,#032468 46%,#052A79 100%);
}
.crhero__media{
  position:absolute; z-index:2; top:0; right:0; bottom:0; left:34%;
  background:url('../img/careers/team.jpg') center 26%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24%);
}
.crhero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(2,32,95,.96) 0%, rgba(2,33,99,.76) 30%,
    rgba(3,36,106,.40) 66%, rgba(3,36,106,.28) 100%);
}
.crhero__net{
  position:absolute; z-index:1; top:0; bottom:0; left:20%; right:2%;
  background:url('../img/hero/network.svg') center/cover no-repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);
}
.crhero__inner{ position:relative; z-index:3; }
.crhero__title{
  font-size:clamp(34px,5.2vw,60px); font-weight:900; line-height:1.02;
  letter-spacing:-.015em; text-transform:uppercase; color:#fff; margin-bottom:10px;
}
.crhero__sub{ margin:0 0 14px; font-size:21px; font-weight:600; line-height:1.3; color:#fff; }
.crhero__text{
  margin:0; max-width:440px;
  font-size:15px; line-height:1.85; color:rgba(255,255,255,.86);
}

/* ------------------------------------------------ overlapping value cards */
.crvalues-wrap{ position:relative; z-index:5; margin-top:-92px; }
.crvalues{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff; border:1px solid #EDF1F8; border-radius:10px;
  box-shadow:0 14px 40px rgba(8,32,90,.12);
}
.crvalue{ position:relative; display:flex; align-items:flex-start; gap:15px; padding:26px 22px; }
.crvalue + .crvalue::before{
  content:''; position:absolute; left:0; top:26px; bottom:26px; width:1px; background:#E7EDF7;
}
.crvalue__ico{
  flex:none; width:62px; height:62px; display:grid; place-items:center;
  background:#F3F7FE; border:1px solid #E1EAF8; border-radius:50%;
}
.crvalue__ico svg{ width:31px; height:31px; fill:var(--navy); }
.crvalue__t{ display:block; font-size:14.5px; font-weight:800; line-height:1.3; color:var(--navy-ink); margin-bottom:5px; }
.crvalue__s{ display:block; font-size:12.5px; line-height:1.55; color:var(--muted); }

/* ------------------------------------------- section heading + side button */
.crhead{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:18px;
}
.crhead .cth2{ margin-bottom:0; }

/* --------------------------------------------------------- openings table */
.jobs{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05); overflow:hidden;
}
.jobs th{
  padding:15px 20px; text-align:left;
  background:var(--navy-deep); color:#fff;
  font-family:var(--f-head);
  font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.jobs td{ padding:13px 20px; font-size:13.5px; color:var(--muted); }
.jobs tbody tr + tr td{ border-top:1px solid #EDF1F8; }
.jobs tbody tr:nth-child(even){ background:#F8FBFF; }
.jobs__role{ font-size:14px; font-weight:700; color:var(--navy); }
.jobs th:last-child,
.jobs td:last-child{ text-align:center; }

.btn--apply{
  padding:8px 15px; font-size:11px; letter-spacing:.07em;
  background:#fff; color:var(--orange); border-color:var(--orange); box-shadow:none;
}
.btn--apply:hover{ background:var(--orange); color:#fff; transform:none; }

/* ------------------------------------------------------- why work with us */
.crwhyhead{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.crwhyhead h2{
  margin:0; font-family:var(--f-head);
  font-size:17px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy-ink);
}
.crwhyhead::after{ content:''; flex:none; width:46px; height:2px; background:var(--orange); border-radius:2px; }

.crwhy{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.crwhycol{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:4px 18px; }
.crwhycol:first-child{ padding-left:0; }
.crwhycol:last-child{ padding-right:0; }
.crwhycol + .crwhycol::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:#E3E9F4;
}
.crwhycol__ico{
  flex:none; width:46px; height:46px; display:grid; place-items:center;
  background:#fff; border:1px solid #E1EAF8; border-radius:50%;
}
.crwhycol__ico svg{ width:24px; height:24px; fill:var(--navy); }
/* one of the five titles runs to two lines at container width — reserving
   both keeps every description starting on the same line */
.crwhycol__t{
  display:flex; align-items:center; min-height:2.6em; margin-bottom:5px;
  font-size:13px; font-weight:800; line-height:1.3; color:var(--navy-ink);
}
.crwhycol__s{ display:block; font-size:12px; line-height:1.6; color:var(--muted); }

/* ------------------------------------------- how to apply + work culture */
.crapply{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }

.applybox{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:26px 28px 28px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
/* the illustration holds the right of the card; the copy is kept clear of it
   with its own max-width rather than by floating anything */
.applybox__art{
  position:absolute; right:6px; top:50%; transform:translateY(-46%);
  width:min(40%,206px); aspect-ratio:420/380;
  background:url('../img/careers/how-to-apply.svg') center/contain no-repeat;
  pointer-events:none;
}
.applybox__body{ position:relative; z-index:2; max-width:60%; }
.applybox .ticks li{ margin-bottom:11px; font-size:13.5px; line-height:1.6; }
.applybox .btn{ position:relative; z-index:2; margin-top:auto; align-self:flex-start; }

/* The two cards stretch to a shared height. Rather than leave a slab of empty
   navy under the copy, the value row drops to the floor of the card. */
.culture{
  display:flex; flex-direction:column;
  padding:26px 28px 28px; border-radius:10px;
  background:linear-gradient(150deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.culture .cth2{ color:#fff; }
.culture p{ margin:0; font-size:13.5px; line-height:1.85; color:rgba(255,255,255,.82); }
.culture__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:auto; padding-top:26px;
}
.culture__col{ position:relative; text-align:center; padding:0 8px; }
.culture__col + .culture__col::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(255,255,255,.18);
}
.culture__col svg{ width:34px; height:34px; margin-bottom:10px; fill:#fff; }
.culture__col span{ display:block; font-size:12.5px; font-weight:600; color:#fff; }

/* -------------------------------------------------------------- CTA band */
.crband{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:26px 32px; border-radius:10px;
  background:linear-gradient(100deg,#04205E 0%,#052768 58%,#062E7C 100%);
  box-shadow:0 12px 34px rgba(8,32,90,.16);
}
.crband__eyebrow{ margin:0 0 5px; font-size:15px; line-height:1.4; color:rgba(255,255,255,.82); }
.crband__t{
  margin:0; font-family:var(--f-head);
  font-size:clamp(19px,2.3vw,27px); font-weight:800; line-height:1.2; color:#fff;
}

/* ----------------------------------------------- careers — breakpoints */
@media (max-width:1140px){
  .crvalue{ padding:22px 15px; gap:12px; }
  .crvalue__ico{ width:54px; height:54px; }
  .crvalue__ico svg{ width:27px; height:27px; }
  .crwhycol{ padding:4px 12px; gap:10px; }
  .applybox__body{ max-width:64%; }
}

@media (max-width:980px){
  .crhero{ padding-block:36px 108px; }
  .crhero__media{ left:52%; opacity:.5; }
  .crhero__text{ max-width:none; }

  .crvalues{ grid-template-columns:1fr 1fr; }
  .crvalue::before{ display:none; }
  .crvalue:nth-child(even)::before{
    display:block; content:''; position:absolute; left:0; top:22px; bottom:22px;
    width:1px; background:#E7EDF7;
  }
  .crvalue:nth-child(n+3)::after{
    content:''; position:absolute; left:20px; right:20px; top:0; height:1px; background:#E7EDF7;
  }

  .crwhy{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:22px; }
  .crwhycol:nth-child(3n+1){ padding-left:0; }
  .crwhycol:nth-child(3n+1)::before{ display:none; }
  .crwhycol:nth-child(n+4)::after{
    content:''; position:absolute; left:0; right:12px; top:-11px; height:1px; background:#E3E9F4;
  }

  .crapply{ grid-template-columns:1fr; }
  .culture__grid{ padding-top:22px; }
}

/* Five columns of table on a phone is unreadable, so each row becomes its own
   card and every cell carries its column name from the data-label attribute. */
@media (max-width:780px){
  .jobs thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .jobs,
  .jobs tbody,
  .jobs tr,
  .jobs td{ display:block; width:100%; }
  .jobs{ background:none; border:0; border-radius:0; box-shadow:none; overflow:visible; }
  .jobs tr{
    margin-bottom:12px; padding:6px 4px 12px;
    background:#fff; border:1px solid #E7EDF7; border-radius:10px;
    box-shadow:0 6px 20px rgba(8,32,90,.05);
  }
  .jobs tbody tr:nth-child(even){ background:#fff; }
  .jobs tbody tr + tr td{ border-top:0; }
  .jobs td{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 16px; }
  .jobs td::before{
    content:attr(data-label);
    flex:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:var(--navy-ink);
  }
  .jobs td:first-child{
    justify-content:flex-start; padding-top:14px; padding-bottom:12px;
    border-bottom:1px solid #EDF1F8; margin-bottom:4px;
  }
  .jobs td:first-child::before{ display:none; }
  .jobs td:last-child{ text-align:left; padding-top:12px; }
}

@media (max-width:620px){
  .crhero__media{ display:none; }
  .crvalues{ grid-template-columns:1fr; }
  .crvalue:nth-child(even)::before{ display:none; }
  .crvalue + .crvalue::after{
    content:''; display:block; position:absolute; left:20px; right:20px; top:0;
    height:1px; background:#E7EDF7;
  }

  .crhead{ align-items:flex-start; }
  .crhead .btn{ width:100%; justify-content:center; }

  .crwhy{ grid-template-columns:1fr; row-gap:18px; }
  .crwhycol{ padding:0; }
  .crwhycol::before{ display:none; }
  .crwhycol + .crwhycol::after{
    content:''; position:absolute; left:0; right:0; top:-9px; height:1px; background:#E3E9F4;
  }

  /* the illustration has nowhere to stand beside four steps — retire it */
  .applybox__art{ display:none; }
  .applybox__body{ max-width:none; }
  .applybox .btn{ width:100%; justify-content:center; }

  .culture__grid{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .culture__col:nth-child(odd)::before{ display:none; }
  .culture__col:nth-child(n+3)::after{
    content:''; position:absolute; left:0; right:0; top:-10px; height:1px; background:rgba(255,255,255,.18);
  }

  .crband{ padding:24px; }
  .crband .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   Recruitment Destinations page
   ========================================================================== */

.destpage{ background:var(--bg-soft); }

/* Reuses .phero, swapping the handshake for the globe — the artwork sits on
   the right at contain rather than filling the box, so it reads as an object
   rather than a backdrop. */
.phero--dest .phero__media{
  left:auto; right:2%; top:50%; bottom:auto; transform:translateY(-50%);
  width:min(38%,430px); aspect-ratio:1;
  background:url('../img/hero/globe.png') center/contain no-repeat;
  filter:none; opacity:.9;
}
.phero--dest .phero__media::after{ display:none; }
.phero--dest .phero__text{ max-width:452px; }

/* a group of destinations: navy rule title, then the flag tiles */
.destgroup + .destgroup{ margin-top:26px; }
.destgroup__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.destgroup__head h2{
  margin:0; font-family:var(--f-head);
  font-size:16px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-ink);
}
.destgroup__head::after{ content:''; flex:1; height:1px; background:#DFE7F5; }
.destgroup__count{
  flex:none; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange);
}
.destgroup .tilegrid{ margin-bottom:0; }

/* ==========================================================================
   Legal pages — Privacy Policy, Terms & Conditions
   ========================================================================== */

.legalpage{ background:var(--bg-soft); }

.phero--legal{ padding-block:38px 40px; }
.phero--legal .phero__media,
.phero--legal .phero__net{ opacity:.28; }
.phero--legal .phero__text{ max-width:560px; }
.phero__meta{
  display:inline-block; margin:16px 0 0; padding:6px 14px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:20px;
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.86);
}

.legal{
  display:grid; grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:22px; align-items:start;
}

/* the contents list tracks the reader down the page */
.legal__toc{
  position:sticky; top:118px;
  padding:20px 20px 22px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.legal__toc h2{
  margin:0 0 12px; font-family:var(--f-head);
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-ink);
}
.legal__toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.legal__toc li{ counter-increment:toc; }
.legal__toc a{
  display:flex; gap:9px; padding:5px 0;
  font-size:12.5px; line-height:1.5; color:var(--muted);
  transition:color .18s ease;
}
.legal__toc a::before{ content:counter(toc) '.'; flex:none; font-weight:700; color:#667694; }
.legal__toc a:hover{ color:var(--orange); }
.legal__toc a:hover::before{ color:var(--orange); }

.legal__body{
  padding:28px 32px 30px;
  background:#fff; border:1px solid #E7EDF7; border-radius:10px;
  box-shadow:0 6px 20px rgba(8,32,90,.05);
}
.legal__body > section + section{ margin-top:26px; padding-top:24px; border-top:1px solid #EDF1F8; }
.legal__body h2{
  margin:0 0 12px; font-family:var(--f-head);
  font-size:17px; font-weight:800; line-height:1.3; color:var(--navy-ink);
}
.legal__body h3{
  margin:18px 0 8px; font-family:var(--f-body);
  font-size:14px; font-weight:700; color:var(--navy);
}
.legal__body p{ margin:0 0 12px; font-size:14px; line-height:1.85; color:#44506E; }
.legal__body p:last-child{ margin-bottom:0; }
.legal__body a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal__body a:hover{ color:var(--orange); }
.legal__body ul{ margin:0 0 12px; padding:0; }
.legal__body li{
  position:relative; padding-left:19px; margin-bottom:7px;
  font-size:14px; line-height:1.75; color:#44506E;
}
.legal__body li::before{
  content:''; position:absolute; left:2px; top:10px;
  width:6px; height:6px; background:var(--orange); border-radius:50%;
}
.legal__body li:last-child{ margin-bottom:0; }

/* the one block on these pages that has to be impossible to skim past */
.legal__alert{
  padding:18px 20px; margin:0 0 12px;
  background:var(--peach-soft); border:1px solid #F6D3B2;
  border-left:3px solid var(--orange); border-radius:8px;
}
.legal__alert p:last-child{ margin-bottom:0; }
.legal__alert strong{ color:var(--navy-ink); }

.legal__contact{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:16px; padding:20px 24px;
  background:var(--blue-soft); border:1px solid #E1EAF8; border-radius:10px;
}
.legal__contact svg{ flex:none; width:34px; height:34px; fill:var(--navy); }
.legal__contact p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--muted); }
.legal__contact a{ font-weight:700; color:var(--navy-ink); }
.legal__contact a:hover{ color:var(--orange); }

/* --------------------------------- destinations + legal — breakpoints */
@media (max-width:980px){
  .phero--dest .phero__media{ right:-6%; width:min(50%,300px); opacity:.42; }
  .phero--dest .phero__text{ max-width:none; }

  .legal{ grid-template-columns:1fr; }
  .legal__toc{ position:static; }
  .legal__toc ol{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
}

@media (max-width:620px){
  .phero--dest .phero__media{ display:none; }
  .destgroup__head{ flex-wrap:wrap; gap:8px 12px; }
  .destgroup__head::after{ order:3; flex-basis:100%; }
  .legal__body{ padding:24px 22px 26px; }
  .legal__toc ol{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Polish layer
   --------------------------------------------------------------------------
   Everything below is scoped to `.fx` on <body>, which every page now carries.
   A page opts out by dropping the class, and the layer comes off the site
   entirely by deleting this block — nothing outside it depends on it.

   It is a layer on top of the design, not part of it: every effect here is
   opacity, transform, box-shadow or a colour already in :root. Nothing in it
   changes a box's size or position in flow, so the layout is untouched and
   CLS stays at zero.

   Two rules the rest of the stylesheet already lives by apply here too — the
   entrance states are gated on `.js` so the page still renders complete
   without JavaScript, and the whole layer stands down under
   prefers-reduced-motion (see the block at the end of this file).
   ========================================================================== */

.fx{
  --fx-ease:  cubic-bezier(.22,.61,.36,1); /* ease-out — settles, never bounces */
  --fx-in:    .55s;                        /* entrance duration */
  --fx-hover: .22s;                        /* hover / press duration */
  --fx-step:  55ms;                        /* stagger between siblings */
}

/* ------------------------------------------------------ page-load entrance */
/* Transform only, deliberately — there is no fade anywhere in this block.
   The hero holds the largest contentful paint on both presets (the title or
   the lede, whichever wins the run), and an element is not counted as painted
   while its opacity is 0. A fade-in from zero, even with no delay at all,
   measured 250–420ms of extra LCP on desktop; a translate costs nothing,
   because moving an element does not change when it was painted. So the
   entrance is carried entirely by the rise, and the stagger with it.

   These are CSS animations rather than JS-driven transitions: an animation
   finishes by itself, so no failure of main.js can leave the hero mid-flight. */
@keyframes fx-in-rise{ from{ transform:translateY(14px) } }

.fx .site-header{ animation:fx-in-rise .6s var(--fx-ease) backwards; }

/* Every page's hero holds its copy in one block, under a different name per
   template: the homepage in .hero__copy, the rest in a *hero__inner. Staggering
   by position rather than by class means a hero with a breadcrumb, a rule or a
   fourth paragraph cascades correctly without being listed here. */
.fx :is(.hero__copy, .phero__inner, .chero__inner,
        .cthero__inner, .crhero__inner, .wip__inner) > *{
  animation:fx-in-rise .72s var(--fx-ease) backwards;
}
.fx :is(.hero__copy,.phero__inner,.chero__inner,.cthero__inner,.crhero__inner,.wip__inner) > :nth-child(1){ animation-delay:calc(var(--fx-step) * 1); }
.fx :is(.hero__copy,.phero__inner,.chero__inner,.cthero__inner,.crhero__inner,.wip__inner) > :nth-child(2){ animation-delay:calc(var(--fx-step) * 2); }
.fx :is(.hero__copy,.phero__inner,.chero__inner,.cthero__inner,.crhero__inner,.wip__inner) > :nth-child(3){ animation-delay:calc(var(--fx-step) * 3); }
.fx :is(.hero__copy,.phero__inner,.chero__inner,.cthero__inner,.crhero__inner,.wip__inner) > :nth-child(4){ animation-delay:calc(var(--fx-step) * 4); }
.fx :is(.hero__copy,.phero__inner,.chero__inner,.cthero__inner,.crhero__inner,.wip__inner) > :nth-child(n+5){ animation-delay:calc(var(--fx-step) * 5); }

/* ------------------------------------------------------ scroll entrances */
/* `.reveal` and its IntersectionObserver already exist — this only softens the
   curve and lengthens the travel slightly. The observer, its rootMargin
   trigger and the `.js` gate are all unchanged. */
.js .fx .reveal{
  transform:translateY(22px);
  transition:opacity var(--fx-in) var(--fx-ease), transform var(--fx-in) var(--fx-ease);
}

/* A grid of separate cards should arrive as separate cards: the container stops
   animating and hands the entrance to its children, so the effect is one
   cascade rather than a block fade with a second fade inside it.

   Only grids whose children are genuinely separate boxes are listed. Anything
   that reads as ONE surface keeps the shared whole-block fade — the stats and
   assistance bands, the why panel, the teaser card, and .logostrip, which
   looks like a grid but is a single bordered card with internal dividers. */
.js .fx :is(.tilegrid, .logos, .svcgrid, .logogrid, .indgrid, .quotes).reveal{
  opacity:1; transform:none; transition:none;
}
.js .fx :is(.tilegrid, .logos, .svcgrid, .logogrid, .indgrid, .quotes).reveal > *{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--fx-in) var(--fx-ease), transform var(--fx-in) var(--fx-ease);
}
.js .fx :is(.tilegrid, .logos, .svcgrid, .logogrid, .indgrid, .quotes).reveal.is-in > *{ opacity:1; transform:none; }

.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(1){ transition-delay:calc(var(--fx-step) * 0); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(2){ transition-delay:calc(var(--fx-step) * 1); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(3){ transition-delay:calc(var(--fx-step) * 2); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(4){ transition-delay:calc(var(--fx-step) * 3); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(5){ transition-delay:calc(var(--fx-step) * 4); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(6){ transition-delay:calc(var(--fx-step) * 5); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(7){ transition-delay:calc(var(--fx-step) * 6); }
.js .fx :is(.tilegrid,.logos,.svcgrid,.logogrid,.indgrid,.quotes).reveal.is-in > :nth-child(n+8){ transition-delay:calc(var(--fx-step) * 7); }

/* the two audience cards observe separately; when they land together this
   keeps them from arriving in lockstep */
.js .fx .audience > .acard:nth-child(2){ transition-delay:calc(var(--fx-step) * 1.4); }

/* ---------------------------------------------------- hover micro-states */
/* Wrapped in (hover:hover) so a tap on a touch screen never leaves an element
   stuck in its hover state. Transform, shadow and colour only — nothing in
   here re-flows a box. */
@media (hover:hover){

  /* buttons: the shared rule already lifts them; this adds the press */
  .fx .btn{
    transition:transform var(--fx-hover) var(--fx-ease),
               background var(--fx-hover) ease,
               box-shadow var(--fx-hover) ease,
               color var(--fx-hover) ease;
  }
  .fx .btn:active{ transform:translateY(0) scale(.985); }
  .fx .btn:hover .arw{ transform:translateX(4px); }
  .fx .btn--ghost:hover{ box-shadow:var(--shadow-lg); }

  /* nav */
  .fx .mainnav a{
    transition:color var(--fx-hover) ease, transform var(--fx-hover) var(--fx-ease);
  }
  .fx .mainnav a:hover{ transform:translateY(-1px); }
  .fx .mainnav a::after{ transition:transform .26s var(--fx-ease); }

  .fx .header__phone svg{ transition:transform var(--fx-hover) var(--fx-ease); }
  .fx .header__phone:hover svg{ transform:translateY(-1px) scale(1.08); }

  /* audience cards — the only cards on the page with no hover state at all */
  .fx .acard{
    transition:transform var(--fx-hover) var(--fx-ease), box-shadow var(--fx-hover) ease;
  }
  .fx .acard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
  .fx .acard__icon{ transition:transform var(--fx-hover) var(--fx-ease); }
  .fx .acard:hover .acard__icon{ transform:scale(1.05); }

  /* destination + service tiles */
  .fx .tile{
    transition:transform var(--fx-hover) var(--fx-ease),
               box-shadow var(--fx-hover) ease,
               border-color var(--fx-hover) ease;
  }
  .fx .tile__name{ transition:color var(--fx-hover) ease; }
  .fx .tile__flag img{ transition:transform var(--fx-hover) var(--fx-ease); }
  .fx .tile__ico svg{ transition:transform var(--fx-hover) var(--fx-ease), fill var(--fx-hover) ease; }
  .fx .tile:hover .tile__flag img{ transform:scale(1.08); }
  .fx .tile:hover .tile__ico svg{ transform:scale(1.1); }
  .fx .tile:hover .tile__name{ color:var(--navy); }

  /* client logo strip */
  .fx .logo{
    transition:transform var(--fx-hover) var(--fx-ease),
               box-shadow var(--fx-hover) ease,
               border-color var(--fx-hover) ease;
  }
  .fx .logo:hover{ border-color:#C9D9F2; }

  /* the Hire From India teaser photograph, inside its own overflow:hidden box */
  .fx .hfiteaser .shot::after{ transition:transform .45s var(--fx-ease); }
  .fx .hfiteaser:hover .shot::after{ transform:scale(1.05); }
  .fx .hfiteaser .trademosaic li::before{ transition:transform .45s var(--fx-ease); }
  .fx .hfiteaser:hover .trademosaic li::before{ transform:scale(1.05); }

  /* the six industry photographs do the same — .ind already clips, so the
     photograph grows inside a tile that stays exactly where it is */
  .fx .ind__media::after{ transition:transform .45s var(--fx-ease); }
  .fx .ind:hover .ind__media::after{ transform:scale(1.06); }

  /* Footer links: the shared rule nudges them with padding-left, which lays the
     column out again on every hover. The same 3px as a transform costs nothing.
     .footer__contact is left alone — its links are display:inline, which a
     transform does not apply to. */
  .fx .footer__col:not(.footer__contact) a{
    transition:color var(--fx-hover) ease, transform var(--fx-hover) var(--fx-ease);
  }
  .fx .footer__col:not(.footer__contact) a:hover{ padding-left:0; transform:translateX(3px); }

  .fx .social a{
    transition:background var(--fx-hover) ease, transform var(--fx-hover) var(--fx-ease);
  }
  .fx .social a:hover{ transform:translateY(-3px); }

  .fx .whatsapp{
    transition:transform var(--fx-hover) var(--fx-ease), box-shadow var(--fx-hover) ease;
  }
  .fx .whatsapp:hover{ box-shadow:0 12px 30px rgba(37,211,102,.5); }

  /* -------------------------------------------------- forms stay instant */
  /* The brief this layer was built to keeps every form control out of it:
     nothing that submits an enquiry or a CV should move under the pointer.
     The homepage had no form, so this never applied there; contact.html and
     the job-enquiry box on candidates.html both submit with a .btn, which
     would otherwise pick up the press and the arrow travel above.

     This cancels only what the layer adds. The 2px lift on .btn:hover is the
     site's own long-standing style, defined far above and left alone — say so
     if those should be flat too. */
  .fx form .btn,
  .fx button[type="submit"],
  .fx input[type="submit"]{
    transition:background var(--fx-hover) ease, color var(--fx-hover) ease;
  }
  .fx form .btn:active,
  .fx button[type="submit"]:active,
  .fx input[type="submit"]:active{ transform:translateY(-2px); }
  .fx form .btn:hover .arw,
  .fx button[type="submit"]:hover .arw{ transform:none; }
  /* and the fields themselves never take a transition from this layer */
  .fx :is(input, textarea, select){ transition:none; }
}

/* ------------------------------------------------------------ the cursor */
/* Two fixed layers: a dot that tracks the pointer exactly and a ring that
   trails it. Both are pointer-events:none and aria-hidden, so they sit outside
   the layout and outside the accessibility tree. main.js writes their
   transform once per animation frame and stops the loop the moment the ring
   catches up — see "custom cursor" there.

   Colours are the brand orange, which reads on white and on navy alike; over
   the page's dark and orange surfaces the pair flips to white (`.on-dark`),
   because an orange ring on an orange button is an invisible ring. */
.fx-cursor{
  position:fixed; top:0; left:0; z-index:300;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  will-change:transform;
}
.fx-cursor.is-live{ opacity:1; }
.fx-cursor.is-out { opacity:0; }

.fx-cursor i{
  display:block; border-radius:50%;
  transition:transform var(--fx-hover) var(--fx-ease),
             background var(--fx-hover) ease,
             border-color var(--fx-hover) ease;
}
.fx-cursor--dot  i{ width:8px;  height:8px;  margin:-4px 0 0 -4px;    background:var(--orange); }
.fx-cursor--ring i{ width:34px; height:34px; margin:-17px 0 0 -17px;  border:1.5px solid rgba(252,123,5,.55); }

/* over something clickable the ring opens up and fills, and the dot folds away
   into it */
.fx-cursor--dot.is-hot  i{ transform:scale(0); }
.fx-cursor--ring.is-hot i{
  transform:scale(1.5);
  background:rgba(252,123,5,.12);
  border-color:rgba(252,123,5,.85);
}
/* pressed */
.fx-cursor--dot.is-down  i{ transform:scale(.7); }
.fx-cursor--ring.is-down i{ transform:scale(1.2); }

/* over navy, orange or photographic ground */
.fx-cursor--dot.on-dark  i{ background:#fff; }
.fx-cursor--ring.on-dark i{ border-color:rgba(255,255,255,.7); }
.fx-cursor--ring.on-dark.is-hot i{ background:rgba(255,255,255,.18); border-color:#fff; }

/* The native cursor is only hidden where a replacement is actually running:
   `fx-cursor-on` is set by main.js after the elements exist, and this rule only
   exists at all on a fine pointer that has not asked for reduced motion. A
   touch screen matches (pointer:coarse), never gets the elements, and keeps its
   native behaviour untouched. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.fx-cursor-on body.fx,
  html.fx-cursor-on body.fx *{ cursor:none; }
  /* text entry keeps its caret — the brief keeps form controls instant, and
     main.js hides the custom pair over them as well */
  html.fx-cursor-on body.fx :is(input, textarea, select){ cursor:auto; }
}

@media (max-width:620px){
  .fx{ --fx-step:40ms; }   /* two columns, so a long cascade would drag */
}

/* --------------------------------------------------------- reduced motion */
/* The shared block earlier in this file already stops every animation and
   shows every .reveal. These put the per-child cascade on screen too — its
   selectors outrank the shared rule — and take the movement out of the hover
   states, leaving the colour and shadow changes, which are not motion. */
@media (prefers-reduced-motion:reduce){
  .js .fx .reveal,
  .js .fx .reveal > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }

  .fx .btn:hover, .fx .btn:active, .fx .btn:hover .arw,
  .fx form .btn:active, .fx button[type="submit"]:active,
  .fx .mainnav a:hover,
  .fx .header__phone:hover svg,
  .fx .acard:hover, .fx .acard:hover .acard__icon,
  .fx .tile:hover, .fx .tile:hover .tile__flag img, .fx .tile:hover .tile__ico svg,
  .fx .logo:hover,
  .fx .hfiteaser:hover .shot::after, .fx .ind:hover .ind__media::after,
  .fx .hfiteaser:hover .trademosaic li::before,
  .fx .footer__col:not(.footer__contact) a:hover,
  .fx .social a:hover,
  .fx .whatsapp:hover{ transform:none; }

  /* the logo files carry a wide white margin that this scale crops off, so it
     is layout, not motion — put it back rather than zeroing the transform */
  .fx .logo:hover img{ transform:scale(1.14); }

  .fx-cursor{ display:none !important; }
}