/* ==========================================================================
   Eshcol Global — homepage redesign
   Palette locked to the verified brand sRGB values.
   Weighting: Royal Aubergine leads the dark surfaces and headings; Primary Green
   carries the accent surfaces, tints, rules and graphic fills. Dark Green is kept
   for anything with white text on it, because Primary Green fails AA at 3.71:1.
   Imagery pulled from the live eshcolglobal.com media library (absolute URLs);
   on the real site these become local /wp-content paths.
   ========================================================================== */
/* Brand typefaces, self-hosted. Both are variable fonts, latin subset only —
   the page uses no character outside it (only © · — beyond ASCII).
   Plus Jakarta Sans 27 KB, Lora 37 KB. Self-hosted rather than loaded from
   Google so there is no third-party connection and no external dependency. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/fonts/PlusJakartaSans-var-latin.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("/fonts/Lora-var-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  /* Brand */
  --aubergine:#320A67;
  --plum:#573A73;
  --grape:#7946B2;
  --lilac:#C8B6E6;
  --grey:#C8C8C8;
  --green:#69903D;
  --green-dark:#42612D;

  /* Functional */
  --ink:#1C1030;
  --ink-2:#655D74;       /* secondary text — slightly deepened so it holds AA on the deeper ground */
  --divider:#E7E2EF;
  --paper:#FFFFFF;
  --paper-2:#FAF8FD;
  --paper-3:#F3EFFA;
  /* Tinted grounds, mixed from Royal Aubergine — white cards sit on these and lift.
     --ground is the page itself; --ground-2 is the deeper alternating band. */
  --ground:#EEE7F6;      /* cool lavender page ground — deep enough to read at normal brightness */
  --ground-1:#EEE7F6;
  --ground-2:#E1D7F0;    /* deeper alternating band, kept a clear step below --ground */
  --divider-2:#DCD3EE;
  /* Primary Green over white, same treatment as the aubergine grounds:
     ~7% for the light band, ~11% for the deeper one. */
  --ground-green:#EDF2E8;
  --tint-green:#E7EDE0;
  --tint-green-line:#D9E6C6;
  --tint-green-line-2:#E4EDD6;
  /* Warm cream alternating ground — the same tone used by the HR-Solutions
     "How we work" band. Used to break up two same-coloured light sections. */
  --cream:#F2EFE7;

  --radius:16px;
  --radius-lg:24px;
  --maxw:1180px;
  --shadow-sm:0 1px 2px rgba(50,10,103,.07), 0 4px 14px rgba(50,10,103,.07);
  --shadow-md:0 2px 6px rgba(50,10,103,.09), 0 18px 40px rgba(50,10,103,.12);
  --shadow-lg:0 8px 20px rgba(50,10,103,.14), 0 34px 70px rgba(50,10,103,.20);

  --sans:"Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif:"Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--grape);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grape);margin-bottom:14px;
}
/* larger eyebrow in the hero across all pages */
.svc-hero .eyebrow,.svc-hero--cs .eyebrow,.cn-hero .eyebrow{font-size:15.5px;letter-spacing:.15em}
.eyebrow--on-dark{color:var(--lilac)}
.lede{font-size:19px;color:var(--ink-2);max-width:62ch}
.section{padding:96px 0}
/* Compact variant — used on Careers and Contact, where the content is short and
   the full 96px rhythm left the band looking half empty. */
.section--tight{padding:52px 0}
.section--tight .sec-head{margin-bottom:30px}
.section--tight .sec-head h2::after{margin-top:14px}
.section--tight .sec-head p{margin-top:12px}

.section--greenlight{background:var(--ground-green);border-top:1px solid var(--tint-green-line-2);border-bottom:1px solid var(--tint-green-line-2)}
/* ---- Two-ground rhythm: pale green #F5F8F0 alternating with solid aubergine.
   Dark bands carry their own type colours so a section can be moved without
   its text breaking. Buttons follow the standing rule: green or ghost on dark. ---- */
.section--dark{background:var(--aubergine);color:#fff}
.section--dark h2,.section--dark .sec-head h2{color:#fff}
.section--dark .lede,.section--dark .sec-head p{color:rgba(255,255,255,.82)}
.section--dark .eyebrow{color:var(--lilac)}
.section--dark .sec-head h2::after{background:linear-gradient(90deg,var(--lilac) 0%, #A8CC7A 100%)}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--green-dark);color:#fff;box-shadow:0 6px 18px rgba(66,97,45,.28)}
.btn--primary:hover{background:#375226;box-shadow:0 10px 26px rgba(66,97,45,.34)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(200,182,230,.55)}
.btn--ghost:hover{background:rgba(200,182,230,.14);border-color:var(--lilac)}
/* Buttons run against the ground they sit on: green on the purple-tinted bands,
   purple on the green-tinted ones. */
.btn--outline{background:#fff;color:var(--green-dark);border-color:var(--tint-green-line);box-shadow:var(--shadow-sm)}
.btn--outline:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.btn--purple{background:var(--grape);color:#fff;box-shadow:0 6px 18px rgba(121,70,178,.26)}
.btn--purple:hover{background:var(--aubergine);box-shadow:0 10px 26px rgba(50,10,103,.30)}
.btn--outline-purple{background:#fff;color:var(--aubergine);border-color:var(--divider-2);box-shadow:var(--shadow-sm)}
.btn--outline-purple:hover{background:var(--grape);color:#fff;border-color:var(--grape)}
.btn .arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- Top bar ---------- */
/* Grape ground. Lilac text fails AA here (3.38:1), so the band uses a near-white
   flattened from white at 88% over grape — 5.29:1, comfortably AA at 13.5px. */
.topbar{background:var(--grape);color:#EFE9F6;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:42px;flex-wrap:wrap}
.topbar a{color:#EFE9F6}
.topbar a:hover{color:#fff}
.topbar-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--divider);
}
.site-header .wrap{display:flex;align-items:center;gap:28px;min-height:96px}
.brand{display:block;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:74px;width:auto}
nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main a{
  color:var(--ink);font-size:15px;font-weight:500;padding:10px 14px;border-radius:8px;
  text-decoration:none;transition:background .15s ease,color .15s ease;
}
nav.main a:hover{background:rgba(105,144,61,.10);color:var(--green-dark);text-decoration:none}
.nav-cta{margin-left:12px}
.nav-toggle{display:none}
/* Practice-scoped services dropdown in the main menu. CSS-only (hover + focus-within),
   so it works even when the combined preview re-injects a page. */
.main .has-sub{position:relative;display:flex;align-items:center}
.main .sub-parent .caret{font-size:10px;margin-left:5px;opacity:.75;display:inline-block;transition:transform .15s ease}
.main .has-sub:hover .sub-parent .caret,
.main .has-sub:focus-within .sub-parent .caret{transform:rotate(180deg)}
/* invisible bridge so the menu doesn't close in the gap between label and panel */
.main .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.main .submenu{
  position:absolute;top:100%;left:0;margin-top:6px;min-width:236px;
  background:#fff;border:1px solid var(--divider);border-radius:14px;
  box-shadow:var(--shadow-md);padding:8px;display:none;flex-direction:column;gap:2px;z-index:80;
}
.main .has-sub:hover .submenu,
.main .has-sub:focus-within .submenu{display:flex}
.main .submenu a{padding:10px 13px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.main .submenu a:hover{background:rgba(105,144,61,.10);color:var(--green-dark)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--aubergine);
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;
  gap:52px;align-items:center;padding-top:96px;padding-bottom:96px}
.hero h1{font-size:clamp(38px,4.6vw,60px);color:#fff;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--lilac)}
.hero-sub{margin-top:22px;font-size:20px;line-height:1.6;color:rgba(255,255,255,.86);max-width:52ch}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:30px;font-size:14.5px;color:rgba(200,182,230,.92);display:flex;align-items:center;gap:12px}
.hero-note svg{flex:0 0 auto}

/* Hero image */
.hero-media{position:relative}
.hero-shot{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(200,182,230,.28);aspect-ratio:4/3.1;background:rgba(255,255,255,.06);
}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.hero-badge{
  position:absolute;left:-26px;bottom:-26px;background:#fff;border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:16px;max-width:290px;
}
.hero-badge .ico{
  width:52px;height:52px;flex:0 0 52px;border-radius:13px;background:rgba(105,144,61,.13);
  color:var(--green-dark);display:grid;place-items:center;
}
.hero-badge .v{display:block;font-family:var(--serif);font-size:25px;font-weight:600;color:var(--aubergine);line-height:1.15}
.hero-badge .v .count{font-variant-numeric:tabular-nums;display:inline-block;min-width:1.6ch}
.hero-badge .l{display:block;font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:4px}

/* ---------- Client logo strip ---------- */
.clients{background:var(--aubergine);color:#fff}
.clients .wrap{padding-top:52px;padding-bottom:52px}
.clients .cap{
  text-align:center;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac);margin-bottom:34px;
}
/* Flex, not grid — 11 logos leave a ragged cell in a fixed 6-column grid.
   Every mark sits in the same 130×36 box and is fitted inside it, so a wide wordmark
   and a compact emblem read at the same visual weight instead of the wordmark dominating. */
/* The strip sits on a white panel inside the aubergine band. Knocking the marks
   out to white was tried and fails: most of these files have opaque backgrounds,
   so invert() turns them into solid white blocks rather than white wordmarks.
   A panel also keeps the original greyscale-to-colour hover intact. */
.logo-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 40px;
  background:#fff;border-radius:var(--radius-lg);padding:34px 40px;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.14);
}
.logo-row img{
  flex:0 0 auto;width:130px;height:36px;object-fit:contain;
  filter:grayscale(0);opacity:1;transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.logo-row img:hover{filter:grayscale(1);opacity:.62;transform:scale(1.04)}

/* ---------- Section head ---------- */
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head h2{font-size:clamp(29px,3.2vw,40px);color:var(--aubergine)}
/* Primary Green rule — a colour beat under every section heading. Decorative
   only, so the 3.71:1 contrast limit doesn't apply. */
.sec-head h2::after{
  content:"";display:block;width:58px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--grape) 0%, var(--green) 100%);margin-top:20px;
}
.sec-head p{margin-top:16px}
.sec-head--split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.sec-head--split > div{max-width:660px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:40px}
.sec-head--center h2::after{margin-left:auto;margin-right:auto}
.sec-head--center .lede{margin-left:auto;margin-right:auto}

/* ---------- Complete HR partner band ---------- */
/* The band sits on the light green tint (.section--greenlight) so it does not share
   a lavender ground with the Services band directly below it. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stat{
  background:var(--paper);border:1px solid var(--divider);border-radius:22px;
  padding:36px 30px;text-align:center;
  box-shadow:0 1px 2px rgba(50,10,103,.04), 0 10px 26px rgba(50,10,103,.06);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.stat:hover{border-color:var(--grape);box-shadow:var(--shadow-md)}
.stat .n{
  display:block;font-family:var(--serif);font-size:46px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--aubergine);
}
.stat .n .count{font-variant-numeric:tabular-nums;display:inline-block}
.stat .k{display:block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dark)}
.stat .t{display:block;margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---------- Services ---------- */
/* Service cards: photograph inset inside the card with its own radius, then a small
   icon + uppercase label, the service name, the copy, and an outlined pill action.
   No scrim over the photograph — the icon no longer overlaps it, so none is needed. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
  position:relative;background:var(--paper);border:1px solid var(--divider);border-radius:22px;
  box-shadow:0 1px 2px rgba(50,10,103,.04), 0 10px 26px rgba(50,10,103,.06);
  padding:13px 13px 26px;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--grape)}
.svc-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:var(--paper-3)}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc:hover .svc-media img{transform:scale(1.05)}
.svc-body{padding:22px 13px 0;display:flex;flex-direction:column;flex:1}
.svc-kicker{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.svc-ico{flex:0 0 auto;display:grid;place-items:center;color:var(--green-dark)}
.svc-ico svg{width:19px;height:19px}
.svc-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.svc h3{font-size:22px;color:var(--aubergine);margin-bottom:10px;line-height:1.2}
.svc p{font-size:15.5px;color:var(--ink-2);line-height:1.62;flex:1}
.svc .more{
  margin-top:24px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 19px;border:1px solid var(--divider);border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--aubergine);text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
/* Stretch the "Explore" link over the whole card so a click anywhere navigates. */
.svc .more::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:1}
.svc:hover .more{background:var(--grape);border-color:var(--grape);color:#fff}
.svc .more .arw{transition:transform .15s ease}
.svc:hover .more .arw{transform:translateX(3px)}

.step .n{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  color:var(--green-dark);display:block;margin-bottom:9px;
}

/* ---------- Advantage ---------- */
.adv{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.adv-media{position:relative}
.adv-media .a1{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  border:1px solid var(--divider);aspect-ratio:4/3.4;
}
.adv-media .a1 img{width:100%;height:100%;object-fit:cover}
.adv-media .a2{
  position:absolute;right:-30px;bottom:-42px;width:56%;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);border:4px solid #fff;aspect-ratio:4/3;
}
.adv-media .a2 img{width:100%;height:100%;object-fit:cover}
.adv-items{display:grid;gap:30px;margin-top:34px}
.adv-item{display:flex;gap:22px;align-items:flex-start}
.adv-item .ico{
  width:60px;height:60px;flex:0 0 60px;border-radius:16px;display:grid;place-items:center;
  background:rgba(105,144,61,.13);color:var(--green-dark);
}
.adv-item h3{font-size:20px;color:var(--aubergine);margin-bottom:7px}
.adv-item p{font-size:15.5px;color:var(--ink-2);line-height:1.62}

/* ---------- Case study ---------- */
/* Dark plum band, same gradient family as .process. The four-column grid puts the text
   in the left half of the content width and lets the photograph span the right half
   plus the right-hand gutter, so it bleeds to the viewport edge. */
/* Solid Royal Aubergine — the page's midpoint anchor and its only full-strength
   brand colour at this scale. The radial keeps it from reading dead flat. */
.case-dark{color:#fff;position:relative;overflow:hidden;background:var(--aubergine)}
.case-grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(24px,1fr) minmax(0,calc(var(--maxw)/2 - 24px)) minmax(0,calc(var(--maxw)/2 - 24px)) minmax(24px,1fr)}
.case-txt{grid-column:2;padding:96px 56px 96px 0}
.case-dark h2{font-size:clamp(28px,3.1vw,38px);color:#fff}
.case-dark .lede{color:rgba(255,255,255,.82)}
.case-media{grid-column:3 / 5;position:relative;min-height:600px}
.case-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* Soft plum edge on the photograph's left so it meets the band rather than butting against it */
.case-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(50,10,103,.55) 0%, rgba(50,10,103,0) 45%)}
.case-media .case-panel{position:absolute;left:-44px;bottom:64px;width:380px;z-index:3;box-shadow:var(--shadow-md)}
.case-panel{
  background:linear-gradient(150deg,var(--paper-3),#fff);
  border:1px solid var(--divider);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-sm);
}
.case-metrics{display:grid;gap:24px}
.metric .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.metric .name{font-size:14.5px;font-weight:600;color:var(--ink)}
.metric .val{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--green)}
.bar{height:10px;border-radius:999px;background:var(--divider);overflow:hidden}
.bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--green-dark))}
.bar.g span{background:linear-gradient(90deg,var(--grape),var(--aubergine))}

.case-dark ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.case-dark ul li{display:flex;gap:14px;font-size:16px;color:rgba(255,255,255,.8);line-height:1.55}
.case-dark ul li b{color:#fff}
.tick{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(105,144,61,.13);
  color:var(--green-dark);display:grid;place-items:center;margin-top:1px}
.case-dark .tick{background:rgba(200,182,230,.2);color:var(--lilac)}

.job .role{font-family:var(--serif);font-size:17.5px;color:var(--aubergine);line-height:1.3;margin-top:14px}

.job .go .arw{transition:transform .15s ease}
.job:hover .go .arw{transform:translateX(4px)}

/* ---------- Job detail page (jobs/<slug>/) ---------- */
.jd-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px}
.jd-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:#fff}
.jd-meta span svg{opacity:.85}
.prose h3{font-size:19px;color:var(--aubergine);margin:30px 0 12px}
.jd-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.jd-list li{position:relative;padding-left:32px;font-size:16px;line-height:1.62;color:var(--ink)}
.jd-list li::before{content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;
  background:rgba(105,144,61,.14) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="%2342612D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-11"/></svg>') center/12px no-repeat}
.jd-facts{list-style:none;margin:0;padding:0}
.jd-facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--divider);font-size:14px}
.jd-facts li:last-child{border-bottom:0}
.jd-facts .k{color:var(--ink-2);flex:0 0 auto}
.jd-facts .v{color:var(--aubergine);font-weight:600;text-align:right}
.rail-box.jd-apply{background:var(--aubergine);color:#fff;border:0}
.rail-box.jd-apply h4{color:var(--lilac)}
.rail-box.jd-apply p{font-size:13.5px;color:rgba(255,255,255,.84);margin:0 0 14px;line-height:1.55}
.rail-box.jd-apply .btn{width:100%;justify-content:center}
/* reassurance list on the purple "For candidates" band: light text + light tick */
.band-mid .jd-list li{color:#fff}
.band-mid .jd-list li::before{background:rgba(255,255,255,.18) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-11"/></svg>') center/12px no-repeat}

@media(max-width:1024px){}
@media(max-width:560px){}
/* Opportunity cards (Option 1) — homepage #careers and Careers #openings */
.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:16px}
.op-grid.cols4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.op-grid,.op-grid.cols4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.op-grid,.op-grid.cols4{grid-template-columns:1fr}}
.op-card{background:#fff;border:1px solid var(--divider);border-top:5px solid var(--aubergine);border-radius:var(--radius);padding:24px 26px 22px;display:flex;flex-direction:column;gap:13px;text-decoration:none;box-shadow:0 1px 2px rgba(50,10,103,.05);transition:transform .16s ease,box-shadow .16s ease}
.op-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);text-decoration:none}
.op-eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6E3AA6}
.op-role{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.14;color:var(--aubergine);margin:2px 0 0}
.op-desc{font-size:14.5px;line-height:1.6;color:var(--ink-2);flex:1}
.op-meta{font-size:13.5px;color:var(--ink-2);font-weight:700}
.op-foot{border-top:1px solid var(--divider);margin-top:6px;padding-top:15px}
.op-go{color:#6E3AA6;font-weight:700;font-size:14px;display:inline-flex;gap:7px;align-items:center}
.op-go .arw{transition:transform .15s ease}
.op-card:hover .op-go .arw{transform:translate(2px,-2px)}
/* Careers openings header: heading left, LinkedIn "stay updated" card right */
.openings-top{display:grid;grid-template-columns:1fr minmax(260px,320px);gap:30px 34px;align-items:center;margin-bottom:30px}
.openings-top .sec-head{margin-bottom:0}
.li-follow{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:#fff;border:1px solid var(--divider);border-radius:var(--radius);padding:22px 24px;box-shadow:0 1px 2px rgba(50,10,103,.05);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.li-follow:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#0A66C2;text-decoration:none}
.li-follow .li-mark{width:40px;height:40px}
.li-follow .li-tx{display:flex;flex-direction:column;gap:3px}
.li-follow .li-h{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--aubergine)}
.li-follow .li-k{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.li-follow .li-go{color:#0A66C2;font-weight:700;font-size:14px;display:inline-flex;gap:7px;align-items:center;margin-top:2px}
.li-follow .li-go .arw{transition:transform .15s ease}
.li-follow:hover .li-go .arw{transform:translateX(3px)}
@media(max-width:900px){.openings-top{grid-template-columns:1fr;gap:20px}}
#apply{scroll-margin-top:90px}  /* land the apply form clear of the sticky header */

.jcard:hover .jgo .arw{transform:translateX(4px)}
.jgo .arw{transition:transform .15s ease}
   /* Human resources — blue */
@media(prefers-reduced-motion:reduce){}

/* ---------- Estate band ---------- */
/* The second practice gets a real colour block: Dark Green #42612D with white
   text (7.05:1, AA), chosen 6 Sep to replace the earlier light #96B177. */
.estate{background:#42612D;border-top:1px solid #375226;border-bottom:1px solid #375226;color:#fff}
.estate .eyebrow{color:#C2D6A8}
.estate p{color:rgba(255,255,255,.9)}              /* white on #42612D ≈ 7:1 */
.estate .wrap{display:flex;align-items:center;gap:48px;flex-wrap:wrap;padding-top:64px;padding-bottom:64px}
.estate-ico{
  width:88px;height:88px;flex:0 0 88px;border-radius:24px;display:grid;place-items:center;
  background:#fff;border:1px solid #375226;color:var(--green-dark);
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 10px 26px rgba(0,0,0,.2);
}
.estate h2{font-size:clamp(26px,2.8vw,34px);color:#fff;max-width:16ch}
.estate p{margin-top:14px;font-size:17px;max-width:56ch}
.estate-side{margin-left:auto}

/* ---------- CTA ---------- */
.cta{background:var(--ground-green);border-top:1px solid var(--tint-green-line-2)}
.cta .wrap{display:grid;grid-template-columns:230px .95fr 1.2fr;gap:48px;padding-top:52px;padding-bottom:52px;align-items:start}
.cta h2{font-size:clamp(26px,2.7vw,33px);color:var(--aubergine)}
.contact-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.ci{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#fff;border:1px solid var(--divider);
  color:var(--green-dark);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.contact-list .lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.contact-list .val{display:block;font-size:16px;color:var(--ink);line-height:1.5;margin-top:2px}
.contact-list .val a{color:var(--ink)}
.contact-list .val a:hover{color:var(--grape)}
.form{background:#fff;border:1px solid var(--divider);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-md)}
.form h3{font-size:20px;color:var(--aubergine);margin-bottom:5px}
.form .fine{font-size:13.5px;color:var(--ink-2);margin-bottom:18px}
/* Two columns — pairs the short fields so the form is half as tall */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field--full{grid-column:1 / -1}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper-2);
  border:1.5px solid var(--divider);border-radius:10px;padding:10px 13px;
  transition:border-color .15s ease, background .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--grape);background:#fff;box-shadow:0 0 0 4px rgba(121,70,178,.10)}
.field textarea{resize:vertical;min-height:78px}
.form .btn{width:100%;justify-content:center;margin-top:2px}
.form .legal{font-size:12px;color:var(--ink-2);margin-top:11px;text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field .req{font-weight:400;color:var(--ink-2);font-size:11.5px}
.field input[type=file]{padding:9px 11px;font-size:13.5px;background:#faf8fd;cursor:pointer}
.field input[type=file]::file-selector-button{margin-right:12px;border:1px solid var(--divider);background:#fff;color:var(--aubergine);font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer}
/* rupee prefix / "days" suffix adornments on numeric fields */
.field .money,.field .suffix{position:relative;display:block}
.field .money::before{content:"\20B9";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-2);font-size:15px;pointer-events:none}
.field .money input{padding-left:30px}
.field .suffix::after{content:"days";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-2);font-size:13px;pointer-events:none}
.field .suffix input{padding-right:48px}
.field input[type=file]::file-selector-button:hover{border-color:var(--grape);color:var(--grape)}
.form-status{font-size:13.5px;font-weight:600;margin-top:12px;padding:10px 14px;border-radius:10px;text-align:center;line-height:1.45}
.form-status.is-ok{background:rgba(105,144,61,.14);color:#375226}
.form-status.is-err{background:rgba(192,57,43,.1);color:#a3342a}

/* ---------- Footer ---------- */
.site-footer{background:var(--aubergine);color:var(--cream);font-size:15px}
.site-footer a{color:var(--cream)}
.site-footer a:hover{color:#fff;text-decoration:none}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-top:66px;padding-bottom:66px}
.f-logo{display:inline-block}
.f-logo img{height:66px;width:auto}
.f-brand p{margin-top:22px;font-size:14.5px;line-height:1.65;max-width:34ch}
.f-col h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lilac);margin-bottom:18px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px}
.social{display:flex;gap:12px;margin-top:24px}
.social a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(200,182,230,.3);
  display:grid;place-items:center;color:var(--lilac);
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.social a:hover{background:rgba(200,182,230,.16);border-color:var(--lilac);transform:translateY(-2px)}
.f-legal{
  border-top:1px solid rgba(200,182,230,.2);padding-top:24px;padding-bottom:24px;font-size:13.5px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(242,239,231,.72);
}
.f-legal .ids{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:56px;padding-top:76px;padding-bottom:80px}
  .hero-badge{left:16px;bottom:-22px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr);gap:16px}
  .stat{padding:30px 22px}

  .adv,.cta .wrap{grid-template-columns:1fr;gap:48px}
  .adv-media{margin-bottom:44px}
  /* Case study stacks: text, then the photograph with the panel overlapping its foot */
  .case-grid{grid-template-columns:1fr}
  .case-txt{grid-column:1;padding:72px 24px 32px}
  .case-media{grid-column:1;min-height:0;padding-bottom:56px}
  .case-media img{position:static;aspect-ratio:16/10;height:auto}
  .case-media::after{display:none}
  .case-media .case-panel{position:static;width:auto;margin:-40px 24px 0}
  /* Photograph first on small screens, so the page doesn't open on two screens of text */
  .hero-media{order:-1}
  .hero-shot{aspect-ratio:16/10}

  .logo-row{gap:26px 38px}
  .f-top{grid-template-columns:1fr 1fr;gap:36px}
  nav.main,.nav-cta{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:68px 0}
  .svc-grid,.steps,.f-top,.stats,.jobs,.form-grid{grid-template-columns:1fr}
  .logo-row{gap:22px 30px}
  .logo-row img{max-height:44px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-badge{position:static;margin-top:22px;max-width:none}
  .adv-media .a2{position:static;width:100%;margin-top:16px;border-width:0}
  .adv-media{margin-bottom:0}

  .estate-side{margin-left:0}
  .topbar-links{display:none}
  .brand img{height:44px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Service pages — one chassis, two accents.
   A page declares .practice-hr or .practice-estate on <body>; the accent
   tokens below are the only thing that changes between the two practices.
   Dark grounds take green or ghost buttons; green grounds take purple ones.
   ========================================================================== */
.practice-hr{--acc-bg:var(--aubergine);--acc-fg:#fff;--acc-sub:rgba(255,255,255,.84);--acc-eyebrow:var(--lilac);--acc-line:rgba(255,255,255,.18)}
.practice-estate{--acc-bg:#42612D;--acc-fg:#fff;--acc-sub:rgba(255,255,255,.84);--acc-eyebrow:#C2D6A8;--acc-line:rgba(255,255,255,.18)}
/* ---- Two coloured surfaces per practice, alternating with white ----
   Service pages run: dark · white · mid · white · dark, so no two coloured bands
   ever touch and aubergine appears twice rather than four times.
   HR    — dark = Royal Aubergine, mid = Grape (both take white type)
   Estate— dark = Dark Green #42612D, mid = Dark Green #42612D too (6 Sep: the
           lighter #96B177 was replaced), both with white type at ~7:1 */
.practice-hr{
  --sec-dark-bg:var(--aubergine); --sec-dark-fg:#fff;            --sec-dark-eb:var(--lilac);
  --sec-mid-bg:var(--grape);      --sec-mid-fg:#fff;             --sec-mid-eb:#E4DAF0;
  --band-bg:var(--grape);--band-fg:#fff;--band-sub:#E4DAF0;--band-mark:#D8C9EE;
}
.practice-estate{
  --sec-dark-bg:var(--green-dark); --sec-dark-fg:#fff;           --sec-dark-eb:#C2D6A8;
  --sec-mid-bg:#42612D;            --sec-mid-fg:#fff;            --sec-mid-eb:#C2D6A8;
  --band-bg:var(--green-dark);--band-fg:#fff;--band-sub:#DDE3D9;--band-mark:#C2D6A8;
}
.band-dark{background:var(--sec-dark-bg);color:var(--sec-dark-fg)}
.band-mid {background:var(--sec-mid-bg); color:var(--sec-mid-fg)}
.band-dark h2,.band-dark h3{color:var(--sec-dark-fg)}
.band-mid  h2,.band-mid  h3{color:var(--sec-mid-fg)}
.band-dark .eyebrow{color:var(--sec-dark-eb)}
.band-mid  .eyebrow{color:var(--sec-mid-eb)}
.band-dark .lede,.band-dark p{color:var(--sec-dark-fg)}
.band-mid  .lede,.band-mid  p{color:var(--sec-mid-fg)}
.band-dark .sec-head h2::after,.band-mid .sec-head h2::after{background:linear-gradient(90deg,var(--lilac) 0%, #A8CC7A 100%)}
.practice-estate .band-mid .sec-head h2::after{background:linear-gradient(90deg,#C2D6A8 0%, #A8CC7A 100%)}
/* White bands: no background of their own, so the page shows through. */
.band-white{background:var(--ground)}   /* soft lavender ground; white cards inside lift off it */
.band-cream{background:var(--cream)}    /* warm cream alternate; white cards still lift off it */

/* A service page's footer lists only its own practice — an HR page has no reason to
   offer property services in the footer, and vice versa. The homepage carries both,
   because it introduces both. */
.practice-hr .f-col--estate,
.practice-estate .f-col--hr{display:none}
.page-service:not(.brand-page) .f-top{grid-template-columns:1.6fr 1.1fr 1.3fr}

/* Company-wide pages (Our Story, Careers, Contact) use the service-page chassis and
   the master brand accent (aubergine/grape), but belong to neither practice — so
   they keep the homepage's full footer with both practices shown. */
.brand-page{
  --acc-bg:var(--aubergine);--acc-fg:#fff;--acc-sub:rgba(255,255,255,.84);--acc-eyebrow:var(--lilac);--acc-line:rgba(255,255,255,.18);
  --sec-dark-bg:var(--aubergine);--sec-dark-fg:#fff;--sec-dark-eb:var(--lilac);
  --sec-mid-bg:var(--grape);--sec-mid-fg:#fff;--sec-mid-eb:#E4DAF0;
  --band-bg:var(--grape);--band-fg:#fff;--band-sub:#E4DAF0;--band-mark:#D8C9EE;
}

/* Breadcrumb */
.crumbs{background:#E9E2F5;border-bottom:1px solid var(--divider)}
.crumbs ol{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--ink-2)}
.crumbs li+li::before{content:"\203A";margin-right:10px;color:var(--divider-2)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--grape)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* Hero */
.svc-hero{background:var(--acc-bg);color:var(--acc-fg);position:relative;overflow:hidden}
.svc-hero .wrap{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.svc-hero .eyebrow{color:var(--acc-eyebrow)}
.svc-hero h1{font-size:clamp(32px,3.9vw,50px);color:var(--acc-fg);max-width:18ch;line-height:1.1}
.svc-hero .lede{color:var(--acc-sub);margin-top:20px;font-size:19px;max-width:54ch}
.svc-hero .hero-actions{margin-top:32px}

/* Typographic hero — one message in the first frame, no decorative image.
   Photography on these pages appears lower down, against the claim it supports. */
.svc-hero--type .wrap{display:block;padding-top:84px;padding-bottom:84px;max-width:1000px}
/* The practice/service line is a wayfinder, not a caption — it tells a visitor which
   of the two practices they are in, so it is set to be read, not squinted at. */
.svc-hero--type .eyebrow{
  font-size:15px;letter-spacing:.2em;margin-bottom:26px;
  display:inline-flex;align-items:center;gap:14px;
}
.svc-hero--type .eyebrow::before{
  content:"";width:34px;height:3px;border-radius:2px;flex:0 0 34px;
  background:linear-gradient(90deg,var(--lilac) 0%, var(--green) 100%);
}
.practice-estate .svc-hero--type .eyebrow::before{background:linear-gradient(90deg,var(--aubergine) 0%, var(--grape) 100%)}
.svc-hero--type h1{font-size:clamp(34px,5.1vw,62px);max-width:20ch;letter-spacing:-.018em}
.svc-hero--type h1 em{font-style:normal;color:var(--acc-eyebrow)}
.practice-estate .svc-hero--type h1 em{color:#C2D6A8}
.svc-hero--type .lede{font-size:20px;max-width:56ch;margin-top:24px}
.svc-hero--type .hero-actions{margin-top:36px}
/* A quiet rule rather than a picture: brand presence without competing with the type. */
.svc-hero--type::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--lilac) 0%, var(--green) 60%, var(--green) 100%);
}
.practice-estate .svc-hero--type::after{background:linear-gradient(90deg,var(--aubergine) 0%, var(--grape) 100%)}

/* Photograph as evidence, not decoration. A split band rather than text over the
   image: the photograph is busy, and type laid on it is never reliably legible.
   Half photo, half solid field — guaranteed contrast, and it reads as deliberate. */
.photoband figure{margin:0;display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch}
.photoband img{display:block;width:100%;height:auto;aspect-ratio:1585/992;min-height:clamp(280px,34vw,420px);object-fit:cover}
.photoband figcaption{
  background:var(--band-bg);color:var(--band-fg);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,4.5vw,64px);
}
/* HR hub: this photoband sits between an aubergine feature band and the grape CTA;
   plum keeps it a dark panel while distinct from both neighbours. */
.photoband.pb-plum figcaption{background:var(--plum)}
/* Estate pages: the photoband panel would otherwise be the same green-dark as the
   feature band directly above it. Mid-green keeps it in-brand but distinct. */
.practice-estate .photoband figcaption{background:var(--green)}
.practice-estate .photoband .attrib{color:#EAF0E1}
/* Named pb-mark, not .q — .q is the FAQ accordion item and carries a white card
   background, which this span was inheriting as a stray white bar. */
.photoband .pb-mark{font-family:var(--serif);font-size:64px;line-height:.55;color:var(--band-mark);display:block;margin-bottom:14px}
.photoband p{font-family:var(--serif);font-size:clamp(20px,2.1vw,29px);line-height:1.32;margin:0;max-width:22ch;text-wrap:balance}
.photoband .attrib{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--band-sub);margin-top:20px}
@media (max-width:820px){ .photoband figure{grid-template-columns:1fr} .photoband img{min-height:240px} }

/* Proof strip — facts already published in the page's own FAQ */
.proof{background:var(--ground);border-bottom:1px solid var(--divider)}
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:26px;padding-bottom:26px}

.proof-item .ico{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#fff;border:1px solid var(--tint-green-line);color:var(--green-dark);display:grid;place-items:center}
.proof-item .v{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--aubergine);line-height:1.15;display:block}
.proof-item .v .count{font-variant-numeric:tabular-nums;display:inline-block;min-width:1.2ch}
.proof-item .k{font-size:13.5px;color:var(--ink-2);line-height:1.45;display:block;margin-top:3px}

/* Body copy with a sticky rail */
.svc-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;padding-top:72px;padding-bottom:72px;align-items:start}
.prose{max-width:66ch}
.prose h2{font-size:clamp(26px,2.8vw,34px);color:var(--aubergine);margin-bottom:18px}
.prose p{font-size:17px;line-height:1.72;color:var(--ink);margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.rail{position:sticky;top:24px;display:grid;gap:18px}
.rail-box{background:#fff;border:1px solid var(--divider);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm)}
.rail-box h4{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.rail-box ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rail-box li a{display:block;padding:7px 10px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none;border-left:2px solid transparent;transition:background .15s ease}
.rail-box li a:hover{background:var(--paper-3);text-decoration:none}
.rail-box li a.is-current{border-left-color:var(--grape);color:var(--aubergine);font-weight:600;background:var(--paper-3)}
.rail-rel{background:var(--aubergine);color:#fff;border:0}
.rail-rel h4{color:var(--lilac)}
.rail-rel p{font-size:14px;color:rgba(255,255,255,.84);margin:0 0 14px;line-height:1.55}
.rail-rel .btn{width:100%;justify-content:center}
/* Our Story "Who we are": 3-column layout — Join us (left) · intro (middle, widest) · On this page (right) */
.ov3 .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);gap:40px}
@media (min-width:1001px){.ov3 .ov-join{order:1}.ov3 .prose{order:2}.ov3 .ov-toc{order:3}}

/* Signature: process timeline (the line draws itself as it scrolls into view) */
.how .wrap{padding-top:72px;padding-bottom:80px}
/* On a coloured band the step type inherits the band's foreground. These need two
   class levels to beat `.tl-step h3`, which sets the light-ground aubergine and
   would otherwise render the heading invisible against aubergine. */
.band-dark .tl-step h3,.band-mid .tl-step h3{color:inherit}
.band-dark .tl-step p,.band-mid .tl-step p{color:inherit;opacity:.86}
/* On a dark band the step dots invert: white circle, brand icon, light rules. */
.band-dark .tl-step .dot,.band-mid .tl-step .dot{background:#fff;border-color:#fff;color:var(--green-dark)}
.band-dark .tl-step .n{color:var(--sec-dark-eb)}
.band-mid  .tl-step .n{color:var(--sec-mid-eb)}
.band-dark .timeline .track,.band-mid .timeline .track{background:rgba(255,255,255,.25)}
.band-dark .timeline .track::after{background:#A8CC7A}
.band-mid  .timeline .track::after{background:#fff}
.practice-estate .band-mid .timeline .track{background:rgba(255,255,255,.25)}
.practice-estate .band-mid .timeline .track::after{background:#A8CC7A}

.tl-step .n{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--green-dark);margin-top:18px}

/* Testimonials on a service page: one featured, one secondary */
.svc-quotes .wrap{padding-top:80px;padding-bottom:80px}
.svc-quotes .quotes{grid-template-columns:1.25fr 1fr;margin-top:36px}

/* Candidate band (Recruitment only) */
.cand .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:64px}
.cand .prose p{font-size:16px}
.band-mid .prose h2,.band-dark .prose h2{color:inherit}
.band-mid .prose p,.band-dark .prose p{color:inherit;opacity:.92}
.cand-card{background:#fff;border:1px solid var(--divider);border-radius:var(--radius-lg);padding:30px 32px;box-shadow:var(--shadow-md)}
.cand-card h3{font-size:20px;color:var(--aubergine);margin-bottom:8px}
.cand-card p{font-size:15px;color:var(--ink-2);margin-bottom:16px;line-height:1.6}
.cand-card .mail{font-family:var(--serif);font-size:21px;color:var(--aubergine);display:block;margin:4px 0 18px;word-break:break-all}
.cand-card .btn{width:100%;justify-content:center}

/* FAQ — native <details>, exclusive via name=, tabs only when JS is present */
.faq .wrap{max-width:900px;padding-top:80px;padding-bottom:80px}
.faq .sec-head{margin-bottom:28px}
.tabs{display:inline-flex;gap:6px;background:var(--paper-3);padding:5px;border-radius:999px;margin:0 0 26px}
.tab{border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease}
.tab[aria-selected="true"]{background:#fff;color:var(--aubergine);box-shadow:var(--shadow-sm)}
.tab:focus-visible{outline:2px solid var(--grape);outline-offset:2px}
html:not(.js-tabs) .tabs{display:none}
.faq-group h3{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
html.js-tabs .faq-group h3{display:none}
.faq-group+.faq-group{margin-top:34px}
html.js-tabs .faq-group+.faq-group{margin-top:0}
.q{border:1px solid var(--divider);border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.q:hover{border-color:var(--divider-2)}
.q[open]{border-color:var(--lilac);box-shadow:var(--shadow-sm)}
.q summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:16.5px;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary:focus-visible{outline:2px solid var(--grape);outline-offset:-2px;border-radius:14px}
.q summary .chev{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--paper-3);color:var(--grape);display:grid;place-items:center;transition:transform .25s ease,background .2s ease}
.q[open] summary .chev{transform:rotate(180deg);background:var(--lilac);color:var(--aubergine)}
.q[open] summary{color:var(--aubergine)}
.q .a{padding:0 22px 20px;color:var(--ink-2);font-size:15.5px;line-height:1.68}
.q .a p{margin:0}
@supports (interpolate-size: allow-keywords){
  .q{interpolate-size:allow-keywords}
  .q::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
  .q[open]::details-content{height:auto}
}

/* Service CTA band */
/* Colour comes from .band-mid / .band-dark on the section itself now. */
.svc-cta .wrap{display:grid;grid-template-columns:230px .95fr 1.2fr;gap:40px;padding-top:36px;padding-bottom:36px;align-items:center}
.svc-cta h2{font-size:clamp(25px,2.6vw,32px)}
.svc-cta .lede{margin-top:10px;font-size:16.5px;max-width:46ch}
.svc-cta .fine{font-size:14px;margin-top:8px;opacity:.9}
.svc-cta .contact-list{margin-top:18px;gap:10px}
.svc-cta .contact-list .ci{width:38px;height:38px;flex:0 0 38px;border-radius:10px}
.svc-cta .contact-list .val{font-size:15px}
.svc-cta .form{padding:22px 24px}
.svc-cta .form h3{font-size:18px}
.svc-cta .form .fine{margin-bottom:14px;opacity:1}
.svc-cta .field{margin-bottom:9px}
.svc-cta .field label{margin-bottom:4px;font-size:12px}
.svc-cta .field input,.svc-cta .field select,.svc-cta .field textarea{padding:8px 12px;font-size:14.5px}
.svc-cta .field textarea{min-height:52px}
.svc-cta .form .legal{margin-top:8px}
.band-mid .contact-list .ci{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.band-dark .contact-list .ci{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--sec-dark-eb);box-shadow:none}
.practice-estate .band-mid .contact-list .ci{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.band-mid .contact-list .lbl{color:var(--sec-mid-eb)}
.band-dark .contact-list .lbl{color:var(--sec-dark-eb)}
.band-mid .contact-list .val,.band-mid .contact-list .val a{color:var(--sec-mid-fg)}
.band-dark .contact-list .val,.band-dark .contact-list .val a{color:var(--sec-dark-fg)}
.svc-cta .form{box-shadow:var(--shadow-lg);color:var(--ink)}
.svc-cta .form h3,.svc-cta .form .fine,.svc-cta .form label,.svc-cta .form .legal{color:inherit}
.svc-cta .form h3{color:var(--aubergine)}
.svc-cta .form .fine,.svc-cta .form .legal{color:var(--ink-2)}
.svc-cta .form label{color:var(--ink)}
/* Contact illustration — dedicated left column on wide screens; hidden below 1200px so it never crowds the form */
.cta-illo{align-self:center}
.cta-illo img{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
@media (min-width:1001px) and (max-width:1200px){.svc-cta .wrap,.cta .wrap{grid-template-columns:.92fr 1.08fr}}
@media (max-width:1200px){.cta-illo{display:none}}

/* Related services */
.related .wrap{padding-top:64px;padding-bottom:72px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.rel{background:#fff;border:1px solid var(--divider);border-radius:var(--radius);padding:22px 24px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.rel:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--grape);text-decoration:none}
.rel h3{font-size:19px;color:var(--aubergine)}
.rel p{font-size:14.5px;color:var(--ink-2);line-height:1.6;flex:1}
.rel .more{color:var(--green-dark);font-weight:600;font-size:14px;display:inline-flex;gap:7px;align-items:center}
.rel .more .arw{transition:transform .15s ease}
.rel:hover .more .arw{transform:translateX(3px)}

/* Motion. Only <html class="js-anim"> (set by site.js when motion is allowed)
   switches the hidden starting states on — nothing is hidden without a script
   present to reveal it. */
.js-anim .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.33,1,.68,1)}
.js-anim .rv.in{opacity:1;transform:none}
.js-anim .rv-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.33,1,.68,1)}
.js-anim .rv-stagger.in>*{opacity:1;transform:none}
.js-anim .rv-stagger.in>*:nth-child(2){transition-delay:.07s}
.js-anim .rv-stagger.in>*:nth-child(3){transition-delay:.14s}
.js-anim .rv-stagger.in>*:nth-child(4){transition-delay:.21s}
.js-anim .rv-stagger.in>*:nth-child(5){transition-delay:.28s}
.js-anim .rv-stagger.in>*:nth-child(6){transition-delay:.35s}
.js-anim .rv-stagger.in>*:nth-child(7){transition-delay:.42s}
.js-anim .rv-stagger.in>*:nth-child(8){transition-delay:.49s}
.js-anim .timeline .track::after{transform:scaleX(0)}
.js-anim .timeline.in .track::after{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.33,1,.68,1) .1s}
.js-anim .svc-hero .hero-in{opacity:0;transform:translateY(12px);animation:heroIn .7s cubic-bezier(.33,1,.68,1) forwards}
.js-anim .svc-hero .hero-in:nth-child(2){animation-delay:.08s}
.js-anim .svc-hero .hero-in:nth-child(3){animation-delay:.16s}
.js-anim .svc-hero .hero-in:nth-child(4){animation-delay:.24s}
.js-anim .svc-hero-media{animation:mediaIn .9s cubic-bezier(.33,1,.68,1) both}
@keyframes heroIn{to{opacity:1;transform:none}}
@keyframes mediaIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js-anim .rv,.js-anim .rv-stagger>*,.js-anim .svc-hero .hero-in,.js-anim .svc-hero-media{opacity:1;transform:none;animation:none}
  .js-anim .timeline .track::after{transform:none}
}

/* Responsive */
@media (max-width:1000px){
  .svc-hero .wrap,.svc-body .wrap,.cand .wrap,.svc-cta .wrap{grid-template-columns:1fr;gap:40px}
  .svc-hero .wrap{padding-top:56px;padding-bottom:56px}
  .rail{position:static}

  .svc-quotes .quotes{grid-template-columns:1fr}
}
@media (max-width:680px){
  .proof .wrap,.timeline,.rel-grid{grid-template-columns:1fr}
  .svc-hero h1{font-size:32px}
  .tabs{display:inline-flex;flex-wrap:wrap;border-radius:16px}
  .q summary{padding:15px 16px;font-size:15.5px}
  .q .a{padding:0 16px 16px}
}

/* ==========================================================================
   Signature modules — the one bespoke room on each service page.
   Built from that page's own copy; reused across pages so nine pages stay one
   system. A grid of white cards ("what we manage / do / help"), a split panel
   (buyers|sellers, owners|tenants), coverage/delivery chips, and an NRI
   spotlight. They sit on a coloured band (like the recruitment timeline), so
   the white cards lift; chips get a light-on-dark variant to match.
   ========================================================================== */
.feature .wrap{padding-top:72px;padding-bottom:80px}
.feature .sec-head{margin-bottom:38px}

/* Coverage / delivery chips */
.chips-lead{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:36px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--divider);
  color:var(--aubergine);box-shadow:var(--shadow-sm);
}
.chip svg{flex:0 0 auto;color:var(--green-dark)}
/* On a coloured band the chips and the lead read light */
.band-dark .chips-lead,.band-mid .chips-lead{color:var(--sec-dark-eb)}
.band-mid .chips-lead{color:var(--sec-mid-eb)}
.band-dark .chip,.band-mid .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.band-dark .chip svg,.band-mid .chip svg{color:inherit;opacity:.9}
.practice-estate .band-mid .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.practice-estate .band-mid .chip svg{color:inherit;opacity:.9}

.duo-list .tick{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:rgba(105,144,61,.13);color:var(--green-dark);display:grid;place-items:center;margin-top:1px}

/* Spotlight — the NRI guardianship panel on Property Management */
.spotlight{
  margin-top:22px;background:linear-gradient(150deg,var(--paper-3),#fff);
  border:1px solid var(--divider);border-radius:var(--radius-lg);padding:34px 36px;box-shadow:var(--shadow-md);
}
.spotlight .eyebrow{color:var(--grape);margin-bottom:10px}
.spotlight h3{font-size:22px;color:var(--aubergine);margin-bottom:12px}
.spotlight p{font-size:15.5px;color:var(--ink-2);line-height:1.62;max-width:70ch}
/* Two-column spotlight: heading left, body right — fills the width, no empty gap */
.spotlight--split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px 34px;align-items:center}
.spotlight--split .sp-head .eyebrow{margin-bottom:8px}
.spotlight--split .sp-head h3{margin-bottom:0}
.spotlight--split .sp-body p{max-width:none;margin:0}
.spotlight--split .sp-body p + p{margin-top:12px}
.spotlight--split .sp-sched{font-size:14.5px;color:var(--ink-2)}
.spotlight--split .sp-sched strong{color:var(--aubergine);font-weight:700}
@media(max-width:760px){.spotlight--split{grid-template-columns:1fr;gap:14px;align-items:start}}

/* A single testimonial: centre it rather than leave the second column empty */
.svc-quotes .quotes.quotes--one{grid-template-columns:minmax(0,780px);justify-content:center}

/* Estate-green icon fills, so a green practice page doesn't read HR-green
   everywhere: the mcard/chip icon wells already use --green-dark, which is
   correct for both practices. Nothing to override. */

@media (max-width:1000px){

}
@media (max-width:680px){

}

/* ==========================================================================
   Mobile menu — the header hid nav entirely under 1000px with no way to open
   the services. A JS-inserted hamburger (adds .js-nav) toggles .menu-open on
   the header; the practice dropdowns render expanded (no hover) on the panel.
   ========================================================================== */
.nav-burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;margin-left:auto;
  border:1px solid var(--divider);border-radius:11px;background:#fff;color:var(--aubergine);cursor:pointer;flex:0 0 auto}
.nav-burger svg{width:23px;height:23px}
.nav-burger:hover{border-color:var(--grape);color:var(--grape)}
@media (max-width:1000px){
  .js-nav .nav-burger{display:inline-flex}
  .js-nav .nav-toggle{display:none}
  .site-header .wrap{flex-wrap:wrap}
  .js-nav nav.main{display:none}
  .js-nav .site-header.menu-open nav.main{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;order:3;flex-basis:100%;
    margin-top:10px;padding-top:12px;border-top:1px solid var(--divider);
  }
  .js-nav .site-header.menu-open nav.main a{padding:12px 10px;border-radius:9px;font-size:16px}
  .js-nav .site-header.menu-open nav.main a:hover{background:rgba(105,144,61,.10);color:var(--green-dark)}
  .js-nav .main .has-sub{display:block;position:static}
  .js-nav .site-header.menu-open .main .has-sub::after{display:none}
  .js-nav .site-header.menu-open .main .submenu{
    display:flex;position:static;box-shadow:none;border:0;background:transparent;
    padding:0 0 6px 16px;margin:0 0 4px;min-width:0;
  }
  .js-nav .site-header.menu-open .main .submenu a{font-size:14.5px;padding:9px 10px;color:var(--ink-2)}
  .js-nav .site-header.menu-open .main .sub-parent{font-weight:700}
  .js-nav .site-header.menu-open .main .sub-parent .caret{display:none}
}

/* Contact-page map */
.map .wrap{padding-top:60px;padding-bottom:72px}
.map .sec-head{margin-bottom:26px}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--divider);box-shadow:var(--shadow-md);line-height:0}
.map-frame iframe{width:100%;height:440px;border:0;display:block;filter:saturate(.9)}
@media (max-width:680px){ .map-frame iframe{height:340px} }

/* Square dark-mode lockup in the footer (replaces the wide white lockup) */
.f-logo--sq img{height:88px}

/* Our Story — director portrait beside the bio */
.director-wrap{display:grid;grid-template-columns:380px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.director-photo{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--acc-line,rgba(255,255,255,.18));box-shadow:var(--shadow-lg);background:rgba(255,255,255,.05)}
.director-photo img{display:block;width:100%;height:auto;aspect-ratio:1122/1402;object-fit:cover}
.director-bio .eyebrow{margin-bottom:10px}
.director-bio h2{margin-bottom:6px}
.director-bio .lede{margin-bottom:18px}
.director-bio .prose{max-width:none}
@media (max-width:820px){ .director-wrap{grid-template-columns:1fr} .director-photo{max-width:360px} }

/* ============================================================================
   TESTIMONIALS — isolated t-/tba-/tbc-/tc- prefixes (never reuse .q .v .k .n .a
   .who .nm .rl here — those belong to other components and caused the estate
   text to go invisible once before). Rolled in from _designs on 6 Sep 2026.
   ============================================================================ */
/* ---- A · OUR STORY — portrait cards with a coloured role bar ---- */
.ta-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tba{position:relative;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(50,10,103,.05),0 14px 34px rgba(50,10,103,.10);transition:transform .18s ease,box-shadow .18s ease}
.tba:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tba-in{padding:26px 30px 24px;display:flex;flex-direction:column;flex:1}
.tba-nm{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--aubergine);line-height:1.2;margin:0 0 14px}
.tba-mid{display:grid;grid-template-columns:1fr 104px;gap:22px;align-items:center;flex:1}
.tba-qt{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0}
.tba-av{position:relative;width:104px;height:104px;justify-self:end}
.tba-av img{width:104px;height:104px;border-radius:50%;object-fit:cover;border:4px solid #fff;
  box-shadow:0 2px 6px rgba(50,10,103,.12),0 12px 26px rgba(50,10,103,.18)}
.tba-badge{position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:var(--paper-3);display:grid;place-items:center;font-family:var(--serif);color:var(--grape);font-size:26px;line-height:0;box-shadow:var(--shadow-sm)}
.tba-role{padding:15px 30px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.tba-role.r1{background:var(--aubergine)} .tba-role.r2{background:var(--grape)}
.tba-role.r3{background:var(--green-dark)} .tba-role.r4{background:var(--plum)}
.tba-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;margin-bottom:14px}
.tba-rel{display:flex;flex-direction:column;line-height:1.15}
.tba-rel-k{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9488a8}
.tba-rel-v{font-size:13.5px;font-weight:700;color:var(--grape)}
.tba-co{height:34px;width:auto;max-width:118px;object-fit:contain;object-position:right center;flex:0 0 auto}

/* ---- B · HOME — one tidy block: feature bubble on top, three cards below ---- */
.tbw{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.tbc{position:relative;background:#fff;border:1px solid var(--divider);border-radius:16px;padding:24px 26px;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(50,10,103,.04),0 10px 26px rgba(50,10,103,.07)}
.tbc::after{content:"";position:absolute;left:30px;bottom:-9px;width:16px;height:16px;background:#fff;
  border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);transform:rotate(45deg)}
.tbc .t-logo{height:36px;width:auto;max-width:150px;object-fit:contain;object-position:left center;margin-bottom:16px;display:block}
.tbc .t-qt{font-size:14.6px;line-height:1.6;color:var(--ink);margin:0 0 18px;flex:1}
.tbc .t-who{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--divider)}
.tbc .t-who img{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;border:2px solid var(--lilac)}
.tbc .t-nm{display:block;font-size:13.8px;font-weight:700;color:var(--aubergine);line-height:1.2}
.tbc .t-rl{display:block;font-size:11.8px;color:var(--ink-2);line-height:1.35}
.tbc-feature{grid-column:1 / -1;background:var(--aubergine);border-color:var(--aubergine);color:#fff;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:30px 34px}
.tbc-feature::after{background:var(--aubergine);border-color:var(--aubergine)}
.tbc-feature .t-tag{display:inline-flex;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--aubergine);background:#fff;border-radius:999px;padding:4px 11px;margin-bottom:14px}
.tbc-feature .t-hd{font-family:var(--serif);font-size:22px;line-height:1.28;margin:0 0 12px;color:#fff}
.tbc-feature .t-qt{color:rgba(255,255,255,.9);font-size:15.3px;margin:0}
.tbc-feature .t-fwho{display:flex;align-items:center;gap:12px;flex-direction:column;text-align:center;min-width:150px}
.tbc-feature .t-fwho img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--lilac)}
.tbc-feature .t-nm{color:#fff;font-size:15px} .tbc-feature .t-rl{color:var(--lilac);font-size:12.5px}
/* higher specificity than .tbc-feature .t-fwho img so the logo isn't forced into the 72px portrait circle */
.tbc-feature .t-fwho img.t-flogo{height:54px;width:auto;max-width:210px;border-radius:10px;object-fit:contain;
  margin-top:8px;background:#fff;padding:10px 18px;box-shadow:0 4px 14px rgba(0,0,0,.14)}

/* ---- C · ESTATE — full band, white-on-dark-green (contrast fixed) ---- */
.tc{display:grid;grid-template-columns:1.02fr .98fr;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(50,10,103,.16)}
.tc-photo{position:relative;min-height:460px}
.tc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tc-body{background:#42612D;color:#fff;padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center}
.tc-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C2D6A8;margin:0 0 16px}
.tc-g{font-family:var(--serif);font-size:64px;line-height:.5;color:#C2D6A8;display:block;margin-bottom:14px}
.tc-hd{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.2vw,27px);line-height:1.26;color:#fff;margin:0 0 14px;text-wrap:balance}
.tc-qt{font-size:15.6px;line-height:1.66;color:#fff;margin:0 0 22px}
.tc-who{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.24)}
.tc-who img{width:56px;height:56px;flex:0 0 56px;border-radius:50%;object-fit:cover;border:2px solid #C2D6A8}
.tc-nm{display:block;font-size:15.5px;font-weight:700;color:#fff;line-height:1.25}
.tc-rl{display:block;font-size:12.8px;color:#DDE3D9;line-height:1.4;margin-top:2px}
.tc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tc-chips span{font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 13px}

@media (max-width:900px){
  .ta-grid,.tbw{grid-template-columns:1fr}
  .tbc-feature{grid-column:auto;grid-template-columns:1fr}
  .tc{grid-template-columns:1fr}.tc-photo{min-height:260px}
}

/* ============================================================================
   DATA STRIPS — the three-point "proof" strip below the header, redesigned.
   Everything is scoped under .dstrip so it cannot leak into other components.
   A page's .proof section gets:  class="proof dstrip pal-XXX"
   and its three cards get acc1 / acc2 / acc3 (the palette's three hues).
   Added 6 Sep 2026 (designs approved from _proof/).
   ============================================================================ */
.dstrip .wrap{display:block;padding-top:34px;padding-bottom:34px}  /* override .proof .wrap's 3-col grid so .ds-grid spans full width */
/* One colour site-wide (grape), regardless of the page category. */
.dstrip{--c:#7946B2;--gh:#C8B6E6;--ghH:#9B78C9;--bd:#CBB4E6;--cellH:#E7DAF5}
.dstrip .acc1,.dstrip .acc2,.dstrip .acc3{--c:#7946B2}
/* One fused container holding the three cards, hairline dividers between them (Lexington-style).
   Its background matches the card hover-fill so the 3px lift on hover shows no pale strip. */
.dstrip .ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:var(--cellH)}
@media(max-width:860px){.dstrip .ds-grid{grid-template-columns:1fr}}

/* Each card = a cell: soft diagonal gradient, hairline divider; on hover it lifts and fills solid. */
.dstrip .p1{position:relative;background:linear-gradient(150deg,#FCFBFE 0%,#EFE7F7 100%);
  border:0;border-right:1px solid var(--bd);border-radius:0;padding:30px 26px 28px;text-align:left;min-height:150px;
  transition:background .2s ease, transform .2s ease}
.dstrip .p1:last-child{border-right:0}
.dstrip .p1:hover{background:var(--cellH);transform:translateY(-3px)}
.dstrip .p1:hover .p1-ico{color:var(--ghH)}
@media(max-width:860px){.dstrip .p1{border-right:0;border-bottom:1px solid var(--bd)}.dstrip .p1:last-child{border-bottom:0}}
.dstrip .p1-h{font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--c);margin:0 0 10px}
.dstrip .p1-k{font-size:13.4px;color:var(--ink-2);line-height:1.55;margin:0;max-width:32ch}
/* Icon = a large, faint mark in the top-right corner (replaces the old foot-badge disc). */
.dstrip .p1-ico{position:absolute;top:14px;right:18px;left:auto;bottom:auto;transform:none;
  width:auto;height:auto;background:none;border-radius:0;box-shadow:none;color:var(--gh);
  display:block;transition:color .2s ease}
.dstrip .p1-ico svg{width:44px;height:44px;stroke-width:1.5}
@media(prefers-reduced-motion:reduce){.dstrip .p1{transition:none}}

/* ==== HR services puzzle — "Take what your business needs" (HR hub #services) ==== */
.pz6-wrap{overflow-x:clip}
.pz6-fig{max-width:800px;margin:26px auto 0}
.pz6-fig svg{width:100%;height:auto;display:block;overflow:visible}
.pz6-piece,.pz6-piece:hover{cursor:pointer;text-decoration:none}   /* beat site a:hover underline */
.pz6-piece .pg{transform-box:fill-box;transform-origin:center;
  transform:translate(var(--tx,0),var(--ty,0));
  transition:transform .32s cubic-bezier(.34,1.4,.64,1)}
.pz6-piece .pg path{transition:filter .28s ease;filter:drop-shadow(0 9px 16px rgba(50,10,103,.24))}
/* hover any piece → the whole puzzle locks flush into place (pointer devices only;
   on touch the pieces stay in the resting grid so the first tap navigates) */
@media (hover:hover){
  #pz6g:hover .pg{transform:translate(0,0)}
  /* the piece under the cursor lifts and brightens as it clicks in */
  .pz6-piece:hover .pg path{filter:drop-shadow(0 20px 30px rgba(50,10,103,.42)) brightness(1.07)}
}
.pz6-piece text{pointer-events:none;text-decoration:none}
.p6-name{font-family:var(--sans);font-weight:800;font-size:18px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.p6-sub{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.12em;fill:#fff;fill-opacity:.9;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
@media(prefers-reduced-motion:reduce){.pz6-piece .pg,.pz6-piece .pg path{transition:none}}

/* ==== "How we work" cards (homepage process section) ==== */
.hw-band{background:var(--ground);overflow:hidden}
.hw-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.hw-dots{position:absolute;z-index:0;width:230px;height:190px;pointer-events:none;
  background-image:radial-gradient(#9b7fc7 2.4px,transparent 2.4px);background-size:19px 19px;opacity:.6}
.hw-dots--tr{top:-96px;right:-96px;
  -webkit-mask-image:radial-gradient(170px at 60% 50%,#000 30%,transparent 82%);mask-image:radial-gradient(170px at 60% 50%,#000 30%,transparent 82%)}
.hw-dots--bl{bottom:-96px;left:-96px;
  -webkit-mask-image:radial-gradient(170px at 40% 50%,#000 30%,transparent 82%);mask-image:radial-gradient(170px at 40% 50%,#000 30%,transparent 82%)}
.hw-card{position:relative;z-index:1;background:#fff;border:1px solid var(--divider);border-radius:16px;
  padding:28px 26px 30px;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 2px rgba(50,10,103,.05),0 14px 32px rgba(50,10,103,.09);
  border-bottom:4px solid var(--a);transition:transform .25s ease,box-shadow .25s ease}
.hw-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(50,10,103,.08),0 22px 44px rgba(50,10,103,.16)}
.hw-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;color:#fff;
  background:linear-gradient(140deg,var(--a),color-mix(in srgb,var(--a) 68%,#000 6%));
  box-shadow:0 8px 18px color-mix(in srgb,var(--a) 40%,transparent)}
.hw-n{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--a);display:block;margin-bottom:8px}
.hw-card h3{font-family:var(--serif);font-size:19px;color:var(--aubergine);margin:0 0 9px}
.hw-card p{font-size:14.6px;color:var(--ink-2);line-height:1.6;margin:0}
.hw-c1{--a:#4285F4}.hw-c2{--a:#7843af}.hw-c3{--a:#66AF16}.hw-c4{--a:#FF6200}
@media(max-width:900px){.hw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hw-grid{grid-template-columns:1fr}}

/* ==== "How a search runs" pinned notes (recruitment #how) ==== */
.hs-band{background:#F4F2EE;background-image:repeating-linear-gradient(#F4F2EE 0 33px,#EAE7E1 33px 34px)}
.hs-row{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:40px}
.hs-card{position:relative;flex:1 1 0;min-width:0;max-width:250px;background:var(--tint);border-radius:16px;
  padding:30px 24px 26px;box-shadow:0 2px 4px rgba(50,10,103,.06),0 18px 34px rgba(50,10,103,.14);
  transform:rotate(var(--rot,0deg));transition:transform .25s ease,box-shadow .25s ease}
.hs-card:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 8px 14px rgba(50,10,103,.10),0 26px 48px rgba(50,10,103,.20)}
.hs-pin{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:42px;height:52px;filter:drop-shadow(0 5px 6px rgba(0,0,0,.30))}
.hs-no{display:block;font-family:var(--serif);font-weight:700;font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--a);margin:6px 0 8px}
.hs-card h3{font-family:var(--serif);font-size:19px;color:var(--aubergine);margin:0 0 9px}
.hs-card p{font-size:13.8px;color:#514a5e;line-height:1.55;margin:0}
.hs-c1{--tint:#FCE9D9;--a:#EA6A1E}.hs-c2{--tint:#E0E8FB;--a:#3B6FE0}.hs-c3{--tint:#ECE0F7;--a:#7843af}.hs-c4{--tint:#E7F1D7;--a:#5E9E12}
.hs-link{flex:0 0 46px;align-self:flex-start;margin-top:66px}
.hs-link svg{display:block;width:46px;height:70px;overflow:visible}
.hs-link .guide{fill:none;stroke:#C3BAD2;stroke-width:2.4;stroke-linecap:round}
.hs-link .trav{fill:#6E6284}
@media(max-width:900px){.hs-row{flex-wrap:wrap;gap:40px 6px}.hs-card{flex:1 1 40%;max-width:none;transform:rotate(0deg)}.hs-link{display:none}}
@media(max-width:560px){.hs-card{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.hw-card,.hs-card{transition:none}}

/* single testimonial in the Our-Story (.tba) style — centred, not half-width */
.ta-grid--one{grid-template-columns:minmax(0,600px);justify-content:center}

/* ==== HR Solutions "How we work" — planner-style checklist cards ==== */
.mw{background:#F2EFE7;padding:56px 0 70px}
.mw .wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mw-head{max-width:62ch;margin-bottom:8px}
.mw-head .eyebrow{color:#7C8A63}
.mw-head h2{font-family:var(--serif);font-size:clamp(24px,2.7vw,32px);color:#3B4A33;margin:8px 0 10px;line-height:1.16}
.mw-head .lede{margin:0;color:#5f6b54}
.mw-row{display:flex;align-items:flex-start;justify-content:center;gap:2px;margin-top:36px}
.mw-card{flex:1 1 0;min-width:0;max-width:270px;background:#FBFAF6;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 4px rgba(59,74,51,.06),0 16px 30px rgba(59,74,51,.12)}
.mw-htop{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#7F8C6B,#6B7A5A);color:#fff;padding:15px 16px}
.mw-ico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);color:#5f6b4a;display:grid;place-items:center}
.mw-htx{flex:1;min-width:0}
.mw-step{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;opacity:.82}
.mw-name{display:block;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.15}
.mw-body{padding:8px 16px 16px}
.mw-item{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid #EDE8DC}
.mw-item:last-child{border-bottom:0}
.mw-chk{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:#E6EEDA;border:1.5px solid #A9C08A;color:#5E8A2E;display:grid;place-items:center}
.mw-lbl{flex:1;min-width:0;font-size:13.6px;color:#43492f;line-height:1.35}
.mw-tag{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.10em}
.mw-tag.t1{color:#C0685B}.mw-tag.t2{color:#C08A3E}.mw-tag.t3{color:#7C8A63}
.mw-link{flex:0 0 46px;align-self:flex-start;margin-top:44px}
.mw-link svg{display:block;width:46px;height:96px;overflow:visible}
.mw-link .guide{fill:none;stroke:#CFC9B8;stroke-width:2;stroke-linecap:round}
.mw-link .trav{fill:#6B7A5A}
@media(max-width:940px){.mw-row{flex-wrap:wrap;gap:22px}.mw-card{flex:1 1 44%;max-width:none}.mw-link{display:none}}
@media(max-width:560px){.mw-card{flex:1 1 100%}}

/* ==== Must–Should–Could tab-cards (feature-grid restyle on service pages) ==== */
.msc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.msc-grid.cols2{grid-template-columns:repeat(2,1fr);max-width:860px}
.msc-card{display:flex;background:#F7F4EC;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.22)}
.msc-spine{flex:0 0 30px;background:var(--c);position:relative}
.msc-spine::after{content:"";position:absolute;left:50%;top:15px;bottom:15px;width:9px;transform:translateX(-50%);
  background-image:radial-gradient(circle 3.3px at center,rgba(255,255,255,.75) 3.3px,transparent 3.5px);
  background-size:9px 29px;background-repeat:repeat-y}
.msc-main{flex:1;min-width:0;padding:22px 22px 15px 24px}
.msc-htop{display:flex;align-items:center;gap:12px}
.msc-ico{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center}
.msc-ico svg{display:block}
.msc-card .msc-title{font-family:var(--sans);font-weight:800;font-size:16.5px;letter-spacing:.02em;color:var(--c);text-transform:uppercase;line-height:1.14;text-wrap:balance;margin:0}
.msc-rule{height:2px;background:var(--c);opacity:.28;border-radius:2px;margin:13px 0 3px}
.msc-list{list-style:none;margin:0;padding:0}
.msc-li{display:flex;align-items:flex-start;gap:11px;padding:9px 2px;border-bottom:1px solid rgba(60,45,20,.09);font-size:13.8px;color:#453f33;line-height:1.4}
.msc-li:last-child{border-bottom:0}
.msc-box{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1.6px solid var(--c);position:relative;margin-top:1px}
.msc-box::after{content:"";position:absolute;left:7.5px;top:4px;width:5px;height:9px;border:solid var(--c);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
@media(max-width:900px){.msc-grid,.msc-grid.cols2{grid-template-columns:1fr;max-width:520px}}

/* ==== HR Outsourcing "What we manage" — icon-tab cards (3-col) ==== */
.tl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px;margin-top:36px}
.tl-card{display:flex;align-items:stretch;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.12),0 10px 22px rgba(0,0,0,.18)}
.tl-tab{flex:0 0 52px;background:var(--c);display:grid;place-items:center;color:#fff}
.tl-title{flex:1;min-width:0;display:flex;align-items:center;padding:12px 15px;font-family:var(--sans);font-size:14px;font-weight:600;color:#39333f;line-height:1.28}
@media(max-width:900px){.tl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tl-grid{grid-template-columns:1fr}}

/* ==== Our Story — Mission / Vision / Promise checkerboard ==== */
.mvsec{background:var(--cream)}
.mv-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:0;margin-top:34px;border-radius:14px;overflow:hidden;box-shadow:0 2px 4px rgba(50,10,103,.06),0 18px 40px rgba(50,10,103,.16)}
.mv-block{background:var(--c);color:#fff;padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.mv-h{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.mv-text{font-size:14px;line-height:1.62;color:rgba(255,255,255,.93);margin:0}
.mv-text + .mv-text{margin-top:11px}
.mv-art{background:#fff;display:grid;place-items:center;padding:24px}
.mv-art img{width:100%;max-width:200px;height:auto;display:block}
.p-mb{grid-column:1;grid-row:1}.p-ms{grid-column:1;grid-row:2}
.p-vs{grid-column:2;grid-row:1}.p-vb{grid-column:2;grid-row:2}
.p-pb{grid-column:3;grid-row:1}.p-ps{grid-column:3;grid-row:2}
.mvb1{--c:#7946B2}.mvb2{--c:#3E8E86}.mvb3{--c:#C39A3E}
@media(max-width:820px){.mv-grid{grid-template-columns:1fr;grid-template-rows:none}.p-mb,.p-ms,.p-vs,.p-vb,.p-pb,.p-ps{grid-column:1;grid-row:auto}.p-mb{order:1}.p-ms{order:2}.p-vb{order:3}.p-vs{order:4}.p-pb{order:5}.p-ps{order:6}}

/* ==== Our Story — Core values comparison cards ==== */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.vcard{background:#fff;border:1px solid var(--divider);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(50,10,103,.05),0 12px 28px rgba(50,10,103,.09)}
.vcard-hood{height:9px;background:var(--c)}
.vcard-body{padding:24px 22px;display:flex;flex-direction:column;flex:1;text-align:center}
.vcard-ico{width:104px;height:84px;margin:2px auto 12px;display:grid;place-items:center}
.vcard-ico img{width:100%;height:100%;object-fit:contain;display:block}
.vcard-title{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--aubergine);margin:0 0 4px}
.vcard-tag{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-2);margin:0}
.vcard-div{position:relative;height:1px;background:var(--divider);margin:16px 8px}
.vcard-div::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--c);transform:translate(-50%,-50%) rotate(45deg)}
.vcard-text{font-size:13.8px;color:var(--ink-2);line-height:1.6;margin:0;text-align:left}
.vc1{--c:#5E7B36}.vc2{--c:#C07B5E}.vc3{--c:#4A6DA8}.vc4{--c:#7E56A6}
@media(max-width:960px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}}

/* ============================================================
   Optimisation & responsive fixes — 20 Sep 2026
   ============================================================ */

/* Soft brand-tint placeholder behind hero photos while they load
   (avoids a blank/white flash before the image paints). */
.cn-photo,.cs-photo,.es-photo{background:#EDE7F6;height:auto!important}

/* TABLET & below (<=1024px): the floating hero proof-badge
   ("30+ years", "NRI-ready", etc.) overlapped the photo, so hide it
   wherever the hero is not the full 2-column desktop layout. */
@media(max-width:1024px){
  .cn-badge,.cs-badge,.es-badge{display:none!important}
}

/* TABLET (901-1024px): stack the hero to a single column so the copy
   never crowds the photo. All three families share the 40/60 grid. */
@media(min-width:901px) and (max-width:1024px){
  .cn-hero .wrap,.svc-hero--cs .wrap,.es-hero .wrap{grid-template-columns:1fr!important;gap:44px!important}
  .cn-visual,.cs-visual,.es-visual{margin:0 auto!important;max-width:720px!important;width:100%}
  /* decorative shapes poke into the copy when the hero is stacked — hide them */
  .cn-shape,.cs-shape,.es-shape{display:none!important}
}

/* MOBILE (<=900px, already single-column): give the hero photo a little
   more width by removing its side margin. */
@media(max-width:900px){
  .cn-visual,.cs-visual,.es-visual{margin:0!important}
}

/* Cross-page jump-to bar (consolidated from per-page inline <style> blocks) */
.jumpbar{position:sticky;top:0;z-index:200;background:#1C1030;color:#fff;display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;padding:9px clamp(16px,4vw,40px);font:600 12.5px/1 'Plus Jakarta Sans',system-ui,sans-serif}
.jumpbar b{color:#C8B6E6;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;margin-right:8px;flex:none}
.jumpbar a{color:#EFE9F6;text-decoration:none;padding:5px 10px;border-radius:999px;border:1px solid rgba(200,182,230,.3);white-space:nowrap;flex:none}
.jumpbar a:hover{background:rgba(200,182,230,.16)}
.jumpbar a.on{background:#7946B2;border-color:#7946B2;color:#fff}
@media(max-width:760px){.jumpbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.jumpbar::-webkit-scrollbar{display:none}}