/* ============================================================
   HOME: client logos + the six section previews.

   The home page now carries a slice of every section, so a visitor can read
   the whole story in one scroll and only leave the page when they want depth.
   Each preview links through to the full page, which keeps its own hero and
   animations exactly as they were.
   ============================================================ */

/* ============ LEAD (Who We Are) — full-width statement ============
   These rules and the CTA band below used to live in hero.css. They were
   lost when that file was rewritten for the new hero, which left the
   statement rendering as unstyled body text. They belong here: they are
   home-page furniture, not hero furniture. */
.lead{padding:clamp(120px,18vh,220px) 0;background:var(--ivory);
  display:flex;align-items:center;min-height:70vh}
.lead .wrap{max-width:min(1560px,94vw)}
.lead-single{width:100%;margin:0;text-align:left}
.lead .eyebrow{margin-bottom:clamp(32px,4.5vh,52px)}
.lead-statement{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3vw,46px);line-height:1.26;
  letter-spacing:-.026em;color:var(--ink);text-wrap:pretty;max-width:none;margin:0}
.lead-statement em{font-style:normal;color:var(--teal-deep)}
.lead-statement .hl{font-style:normal;color:var(--amber-deep)}
.lead-more{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:clamp(38px,5.5vh,60px);
  pointer-events:auto;font-family:var(--serif);font-size:clamp(18px,1.5vw,22px);font-weight:650;
  letter-spacing:.01em;color:var(--teal-deep);transition:gap .3s var(--ease)}
.lead-more svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.lead-more:hover{gap:18px}
/* glass cue bubble that pops up to tell the visitor the link is clickable */
.lead-more::after{content:"Click";position:absolute;left:50%;top:-14px;transform:translate(-50%,6px) scale(.85);
  font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);padding:7px 15px;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 10px 30px -12px rgba(28,42,40,.35),inset 0 1px 0 rgba(255,255,255,.8);
  opacity:0;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.lead-more:hover::after{opacity:1;transform:translate(-50%,0) scale(1)}
@media(max-width:820px){.lead{min-height:0;padding:96px 0}}

/* ============ CTA BAND ============ */
.cta-band{padding:clamp(60px,9vh,110px) 0 140px;background:var(--ivory);text-align:center}
.cta-panel{position:relative;max-width:940px;margin:0 auto;background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:26px;padding:clamp(58px,7vw,100px) clamp(28px,6vw,72px);overflow:hidden;
  box-shadow:0 50px 64px -64px var(--shadow)}
.cta-panel .glow{position:absolute;width:640px;height:640px;border-radius:50%;left:50%;top:-260px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(14,156,147,.15),transparent 62%);pointer-events:none}
.cta-band .eyebrow{justify-content:center;margin-bottom:26px}
.cta-band h2{font-family:var(--serif);font-size:clamp(32px,4.5vw,56px);font-weight:650;letter-spacing:-.03em;
  line-height:1.08;max-width:18ch;margin:0 auto;position:relative}
.cta-band h2 em{font-style:normal;color:var(--teal-deep)}
.cta-band p{font-size:17px;color:var(--ink-soft);max-width:52ch;margin:26px auto 0;line-height:1.75;font-weight:300;position:relative}
.cta-band .actions{display:flex;justify-content:center;margin-top:46px;position:relative}
.cta-band .btn{padding:18px 44px;font-size:16px}

/* ============ CLIENT LOGOS ============
   These marks are the page's strongest credibility signal, so the strip is
   given real height rather than treated as a footnote.

   Each logo sits in a fixed box with object-fit:contain. Sizing by height
   alone would make the square marks tower over the wide wordmarks; a box
   normalises them by area, which is how a reader actually perceives them,
   and nothing is distorted.

   The box height is set by the SMALLEST source we have. ICICI Securities
   is 237x37 and Blue Star 164x46, so anything taller than ~60px starts
   upscaling those two into mush while everything else stays sharp. The
   newer marks (L&T Defence, Protean, ZingHR, IBS FINtech, EMA, Hydron)
   are 620px wide and render at about 0.18x, so they have headroom to
   spare - the ceiling is the old files, not the new ones. Re-supply ICICI
   and Blue Star at 2x and the whole strip can grow. */
.hp-logos{background:var(--ivory);padding:clamp(64px,9vh,120px) 0 clamp(40px,5vh,68px)}
.hp-logos .wrap{max-width:var(--maxw)}
.hp-logos .eyebrow{justify-content:flex-start}
.hp-logos h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.1vw,42px);
  letter-spacing:-.025em;line-height:1.14;max-width:24ch;margin-top:14px;color:var(--ink)}
.hp-logos h2 em{font-style:normal;color:var(--teal-deep)}
.hp-logos .hp-logos-n{font-family:var(--disp);font-size:clamp(11px,.92vw,13px);
  letter-spacing:.02em;color:var(--ink-soft);margin-top:14px;max-width:56ch;line-height:1.6}

.hp-track-wrap{position:relative;overflow:hidden;margin-top:clamp(34px,5vh,58px);
  padding:clamp(10px,1.6vh,18px) 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hp-track{display:flex;align-items:center;width:max-content;gap:clamp(30px,3.6vw,56px);
  animation:hpScroll 38s linear infinite}
.hp-track-wrap:hover .hp-track{animation-play-state:paused}
/* the fixed box is what normalises marks of wildly different proportion */
.hp-track img{flex:none;
  width:clamp(128px,13vw,172px);height:clamp(48px,4.6vw,60px);
  object-fit:contain;object-position:center;opacity:1;
  transition:transform .4s var(--ease),filter .4s}
.hp-track img:hover{transform:translateY(-3px);filter:saturate(1.06)}
@keyframes hpScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hp-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@media(max-width:560px){
  .hp-track{gap:24px}
  .hp-track img{width:112px;height:44px}
}

/* Failsafe for the reveal.
   Site-wide, .rv starts at opacity:0 and only becomes visible when site.js's
   ScrollTrigger batch adds .in. These previews are now the main content of the
   home page, so they must never depend on that: if GSAP fails to load, an
   observer misfires, or rAF is throttled, the page would be blank below the
   hero. This animation forces them visible after 2.5s no matter what. When the
   reveal does work it fires long before then, so nothing changes visually. */
@keyframes hpFailsafe{to{opacity:1;transform:none}}
.hp-row,.hp-track-wrap,.hp-logos h2,.hp-logos .eyebrow,.hp-logos-n,
.fdr-head,.fdr-card,.fdr-note{animation:hpFailsafe .3s linear 2.5s forwards}
@media(prefers-reduced-motion:reduce){
  .hp-row,.hp-track-wrap,.hp-logos h2,.hp-logos .eyebrow,.hp-logos-n,
  .fdr-head,.fdr-card,.fdr-note{animation:none;opacity:1;transform:none}
}

/* ============ BOOK → RESEARCH HANDOFF ============
   Sits on static ground below the pinned book so it is a plain anchor that
   is always clickable, the same reason the Amazon button on the research
   page lives outside its pin. No .rv class: nothing here should need JS to
   become visible. */
.hbk{background:var(--ivory);text-align:center;
  padding:clamp(8px,1.4vh,22px) 0 clamp(70px,10vh,124px)}
.hbk-k{font-family:var(--disp);font-size:clamp(9.5px,.85vw,11.5px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-mut);margin-bottom:clamp(16px,2.2vh,26px)}
.hbk-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.hbk-alt{display:inline-flex;align-items:center;gap:12px;
  padding:clamp(14px,1.5vw,19px) clamp(22px,2.4vw,30px);border-radius:999px;
  text-decoration:none;color:var(--ink);border:1px solid var(--line);background:transparent;
  font-family:var(--disp);font-size:clamp(12.5px,1.05vw,15px);font-weight:600;letter-spacing:.03em;
  transition:border-color .42s var(--ease),color .42s,background .42s,transform .42s var(--ease)}
.hbk-alt:hover{border-color:var(--teal);color:var(--teal-deep);
  background:rgba(14,156,147,.06);transform:translateY(-3px)}
.hbk-alt:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.hbk-alt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .42s var(--ease)}
.hbk-alt:hover svg{transform:translateX(4px)}

.hbk-go{position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:clamp(14px,1.5vw,19px) clamp(24px,2.6vw,34px);border-radius:999px;
  text-decoration:none;color:#fff;background:var(--grad);
  font-family:var(--disp);font-size:clamp(12.5px,1.05vw,15px);font-weight:600;letter-spacing:.03em;
  box-shadow:0 22px 46px -20px rgba(11,133,125,.62),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.hbk-go:hover{transform:translateY(-3px);
  box-shadow:0 30px 60px -20px rgba(11,133,125,.76),inset 0 1px 0 rgba(255,255,255,.28)}
.hbk-go:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.hbk-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .42s var(--ease)}
.hbk-go:hover svg{transform:translateX(5px)}

/* ============ THE FOUNDERS ============
   Two stages. The claim gets a screen of its own at display size, then
   the people arrive. Each card is a single anchor, so the whole surface
   is the target rather than a small button inside it. */
.fdr{position:relative;background:var(--ivory)}

/* ---- stage one: the statement, alone ---- */
/* The statement screen carries the gradient, and its foot is the same
   colour as the top of .fdr-people below, so the two stages read as one
   transition rather than two stacked bands. */
.fdr-stage{position:relative;min-height:88vh;display:flex;align-items:center;
  padding:clamp(70px,10vh,120px) 0;overflow:hidden;
  background:linear-gradient(168deg,var(--ivory) 0%,#F3F6F3 42%,var(--surface) 100%)}
.fdr-stage::before{content:"";position:absolute;right:-12%;top:-24%;
  width:min(760px,72%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,156,147,.14),rgba(14,156,147,.04) 58%,transparent 74%)}
.fdr-stage .wrap{position:relative;z-index:1}
.fdr-head{max-width:22ch;text-align:left}
.fdr-head .eyebrow{margin-bottom:clamp(22px,3vh,34px)}
.fdr-head h2{font-family:var(--serif);font-weight:800;
  font-size:clamp(40px,7.4vw,116px);letter-spacing:-.042em;line-height:.96;color:var(--ink)}
.fdr-head h2 em{font-style:normal;color:var(--teal-deep)}
.fdr-cue{position:absolute;left:50%;bottom:clamp(22px,4vh,42px);transform:translateX(-50%);
  color:var(--ink-mut)}
.fdr-cue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;animation:fdrNudge 2.4s ease-in-out infinite}
@keyframes fdrNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.fdr-cue svg{animation:none}}
@media(max-width:820px){.fdr-stage{min-height:0;padding:clamp(64px,9vh,100px) 0}.fdr-cue{display:none}}

/* ---- stage two: the people ---- */
.fdr-people{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 52%,var(--ivory) 100%);
  border-top:1px solid var(--line-soft);
  padding:clamp(66px,10vh,120px) 0 clamp(74px,11vh,130px)}
/* one soft teal bloom behind the cards so they sit on light rather than flat paper */
.fdr-glow{position:absolute;left:50%;top:-22%;width:min(1100px,120%);aspect-ratio:1.6;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,156,147,.16),rgba(14,156,147,.05) 58%,transparent 72%)}
.fdr-people .wrap{position:relative;z-index:1}

.fdr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.2vw,46px)}

.fdr-card{display:block;text-decoration:none;color:inherit;position:relative;
  padding:clamp(26px,3vw,40px);border-radius:20px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 30px 60px -48px rgba(28,42,40,.55);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .55s var(--ease),background .55s var(--ease)}
.fdr-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.92);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 44px 76px -46px rgba(28,42,40,.62)}
.fdr-card:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.fdr-shot{display:block;width:clamp(116px,11.5vw,158px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;background:var(--surface-2);
  border:4px solid #fff;box-shadow:0 16px 34px -16px rgba(28,42,40,.55);margin-bottom:24px}
.fdr-shot img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block;
  transition:transform .7s var(--ease)}
.fdr-card:hover .fdr-shot img{transform:scale(1.06)}

.fdr-body{display:block}
.fdr-name{display:block;font-family:var(--serif);font-weight:750;
  font-size:clamp(19px,1.8vw,27px);letter-spacing:-.026em;line-height:1.1;color:var(--ink)}
.fdr-role{display:block;font-family:var(--disp);font-size:clamp(9.5px,.8vw,11.5px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-top:9px;font-weight:600}
.fdr-bio{display:block;font-size:clamp(13.5px,.98vw,15.5px);color:var(--ink-soft);
  line-height:1.72;margin-top:16px}

/* The credentials list lived here and now lives only on the leadership
   page. On the home page the job is a face, a name and one paragraph; the
   detail is what the click is for. */
.fdr-go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-family:var(--disp);font-size:clamp(11.5px,.92vw,13px);font-weight:600;letter-spacing:.03em;
  color:var(--c);transition:gap .4s var(--ease)}
.fdr-card:hover .fdr-go{gap:16px}
.fdr-go svg{width:15px;height:15px}

.fdr-note{text-align:left;margin-top:clamp(30px,4vh,46px);
  font-family:var(--disp);font-size:clamp(11px,.88vw,13px);letter-spacing:.03em;color:var(--ink-mut)}
.fdr-note em{font-style:italic;color:var(--ink-soft)}

@media(max-width:1000px){.fdr-grid{grid-template-columns:1fr}}

/* ============ SECTION PREVIEWS ============ */
.hp{background:var(--ivory);padding:clamp(48px,7vh,92px) 0}
.hp:nth-of-type(even){background:linear-gradient(180deg,var(--ivory),var(--surface) 55%,var(--ivory))}
.hp .wrap{max-width:var(--maxw)}

.hp-row{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;
  gap:clamp(30px,4.6vw,76px)}
.hp-row.alt .hp-mark{order:2}
.hp-row.alt .hp-body{order:1}

/* --- the mark: a symbol for the section, not a photograph --- */
.hp-mark{position:relative;display:grid;place-items:center;aspect-ratio:16/11;
  border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 24% 14%,color-mix(in srgb,var(--c) 15%,transparent),transparent 62%),
    linear-gradient(158deg,#fff 0%,var(--surface) 100%);
  box-shadow:0 26px 52px -42px rgba(28,42,40,.5)}
/* two quiet concentric rings give the glyph somewhere to sit */
.hp-mark::before{content:"";position:absolute;width:min(72%,330px);aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}
.hp-mark::after{content:"";position:absolute;width:min(50%,232px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,color-mix(in srgb,var(--c) 16%,transparent),transparent 72%)}
.hp-glyph{position:relative;z-index:2;width:min(33%,140px);height:auto;
  fill:none;stroke:var(--c);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .8s var(--ease)}
.hp-row:hover .hp-glyph{transform:scale(1.05) rotate(-2deg)}
.hp-num{position:absolute;left:20px;top:15px;z-index:2;font-family:var(--serif);font-weight:800;
  font-size:clamp(28px,3.2vw,46px);letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1.3px color-mix(in srgb,var(--c) 34%,transparent)}

/* --- the words --- */
.hp-k{display:inline-block;font-family:var(--disp);
  font-size:clamp(9.5px,.82vw,11.5px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--c);font-weight:600}
.hp-body h2{font-family:var(--serif);font-weight:750;font-size:clamp(26px,3.3vw,46px);
  letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin-top:14px}
.hp-body h2 em{font-style:normal;color:var(--c)}
.hp-body > p{font-size:clamp(14.5px,1.05vw,17px);color:var(--ink-soft);line-height:1.72;
  margin-top:16px;max-width:52ch}

.hp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,2.6vw,44px);margin-top:clamp(18px,2.4vh,26px);list-style:none;
  border-top:1px solid var(--line)}
.hp-list.one{grid-template-columns:1fr}
.hp-list li{display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--disp);font-size:clamp(11.5px,.94vw,14px);font-weight:500;
  letter-spacing:.012em;color:var(--ink);line-height:1.35}
.hp-list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--c);opacity:.9}
@media(max-width:560px){.hp-list{grid-template-columns:1fr}}

/* figures variant, used by the engagements preview */
.hp-figs{display:flex;gap:clamp(20px,3vw,42px);margin-top:clamp(16px,2.2vh,24px);flex-wrap:wrap}
.hp-figs div{min-width:max-content}
.hp-figs b{display:block;font-family:var(--serif);font-weight:800;
  font-size:clamp(26px,3vw,44px);letter-spacing:-.035em;line-height:1;color:var(--c)}
.hp-figs span{display:block;font-family:var(--disp);font-size:clamp(8.5px,.74vw,10.5px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mut);margin-top:7px}

/* --- the link through to the full page --- */
.hp-go{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(20px,2.8vh,32px);
  padding:12px 22px 12px 24px;border-radius:999px;text-decoration:none;
  font-family:var(--disp);font-size:clamp(11.5px,.95vw,13.5px);font-weight:600;letter-spacing:.04em;
  color:#fff;background:var(--c);position:relative;
  box-shadow:0 18px 34px -20px color-mix(in srgb,var(--c) 80%,transparent);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .4s}
.hp-go:hover{transform:translateY(-2px);filter:saturate(1.08);
  box-shadow:0 24px 44px -20px color-mix(in srgb,var(--c) 92%,transparent)}
.hp-go:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.hp-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .4s var(--ease)}
.hp-go:hover svg{transform:translateX(4px)}

@media(max-width:900px){
  .hp-row{grid-template-columns:1fr;gap:24px}
  .hp-row.alt .hp-mark{order:0}
  .hp-row.alt .hp-body{order:0}
  .hp-mark{aspect-ratio:16/9}
}