/* =====================================================================
   Homepage only. Shared rules live in assets/css/styles.css.
   No new colours, radii, shadows or type sizes: tokens only.
   ===================================================================== */

/* ---------- 1. Hero ---------------------------------------------- */
.hero{
  position:relative;background:var(--canvas);overflow:hidden;
  padding-top:clamp(2.5rem,1.8rem + 3vw,4.5rem);
  padding-bottom:clamp(7rem,5rem + 9vw,12rem);
}
.hero__grid{display:grid;gap:clamp(36px,4vw,64px);align-items:center;grid-template-columns:1fr;position:relative;z-index:2}
@media (min-width:1180px){ .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--sp-6);padding:6px 14px 6px 6px;
  border-radius:var(--r-pill);border:1px solid var(--saffron-200);background:var(--saffron-50);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--saffron-800);
}
.hero__eyebrow i{width:22px;height:22px;border-radius:50%;background:var(--grad-ribbon-saffron);display:grid;place-items:center;flex:none}
.hero__eyebrow i svg{width:13px;height:13px;color:var(--ink-900)}

.hero__headline{display:flex;gap:clamp(14px,1.6vw,22px);align-items:stretch;margin-bottom:var(--sp-6)}
.hero__headline h1{
  margin:0;font-size:clamp(1.75rem,1.35rem + 2.2vw,3.25rem);line-height:1.06;letter-spacing:-.032em;font-weight:700;
}
.hero__headline h1 span{display:block;white-space:nowrap}
.hero__headline .l1{color:var(--forest-700)}
.hero__headline .l2{color:var(--saffron-700)}
.hero__headline .l3{color:var(--forest-600)}

.hero__lead{max-width:52ch;margin-bottom:var(--sp-6)}

.hero__tabs{margin-bottom:var(--sp-5)}
/* The hero column is narrow on desktop, so the four audience pills sit 2 x 2
   rather than wrapping 3 + 1. */
@media (min-width:1180px){
  .hero__tabs .tabs{display:grid;grid-template-columns:repeat(2,auto);justify-content:start}
  .hero__tabs .tab{justify-content:flex-start}
}
.hero__panel[hidden]{display:none}
.hero__panel{animation:wk-fade 220ms var(--ease-out)}
@keyframes wk-fade{from{opacity:0}to{opacity:1}}
.hero__panel .cluster{margin-top:var(--sp-4)}
.hero__panel-note{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--sp-3) 0 0}

.hero__trending{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:var(--sp-4)}
.hero__trending>span{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}
.hero__trending .chip{min-height:32px;font-size:13px}

.hero__zero{
  display:flex;gap:9px;align-items:flex-start;margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55;
}
.hero__zero svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:2px}
.hero__zero b{color:var(--ink-800)}

/* --- right-hand product composite --- */
.hero__art{position:relative;z-index:2;min-height:340px}
@media (max-width:1179.98px){ .hero__art{margin-top:var(--sp-6)} }

.hero__field{
  position:absolute;inset:-14% -8% -6% -10%;z-index:0;pointer-events:none;
}
.hero__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--forest-300) 1.5px,transparent 1.6px);
  background-size:17px 17px;opacity:.5;
  -webkit-mask-image:radial-gradient(70% 66% at 52% 44%,#000 14%,transparent 78%);
  mask-image:radial-gradient(70% 66% at 52% 44%,#000 14%,transparent 78%);
}
.hero__india{position:absolute;left:46%;top:30%;width:24%;height:auto;opacity:.5}
.hero__skyline{position:absolute;left:-2%;right:-2%;bottom:-4%;width:104%;height:auto;opacity:.5}
/* Below the two-column breakpoint the composite is full width, so the skyline
   would sit in open space beside the cards. Keep the dot field only. */
@media (max-width:1179.98px){ .hero__skyline{display:none} }

/* Hero search: keyword on its own row, then experience, city and the button.
   Overrides the shared single-row .search-pill because the hero column is narrow. */
@media (min-width:560px){
  .hero__panel .search-pill{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    border-radius:var(--r-xl);padding:10px;gap:10px;
  }
  .hero__panel .search-pill__field{background:var(--ink-50);padding:11px 13px;border-left:0}
  .hero__panel .search-pill__field:first-of-type{grid-column:1 / -1}
  .hero__panel .search-pill__field:focus-within{background:var(--saffron-50);box-shadow:inset 0 0 0 1px var(--saffron-300)}
  .hero__panel .search-pill .btn{width:auto;padding-inline:26px}
}

.hero__mock{position:relative;z-index:3;transform:rotate(-1.2deg);margin-top:44px}
@media (max-width:640px){ .hero__mock{transform:none} }
.hero__mock .mock__body{padding:var(--sp-4) var(--sp-5)}
.hero__mock .rank-row:first-child{background:linear-gradient(90deg,var(--saffron-50),transparent 70%);border-radius:var(--r-md);padding-inline:10px;margin-inline:-10px}
.hero__mock-foot{
  display:flex;flex-wrap:wrap;gap:6px var(--sp-4);align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--text-muted);
}
.hero__mock-foot b{color:var(--ink-700)}

.hero__chip{position:absolute;z-index:4}
.hero__chip--match{top:0;left:-14px}
.hero__chip--wa{right:-6px;bottom:-30px;z-index:5}
.hero__pipeline{position:absolute;left:-30px;bottom:-72px;z-index:4;width:250px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.hero__pipeline-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);margin:0 0 9px}
.hero__pipe-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hero__pipe{background:var(--ink-50);border-radius:var(--r-sm);padding:7px 8px}
.hero__pipe span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.hero__pipe i{display:block;height:4px;border-radius:2px;margin-top:6px;background:var(--forest-200)}
.hero__pipe:nth-child(2) i{background:var(--saffron-400)}
.hero__pipe:nth-child(3) i{background:var(--forest-400)}
@media (max-width:1179.98px){
  .hero__pipeline{position:static;width:auto;max-width:340px;margin-top:var(--sp-6);box-shadow:var(--sh-md)}
  .hero__chip--wa{position:static;margin-top:var(--sp-4)}
}
@media (max-width:520px){
  .hero__chip--match{left:0;scale:.94;transform-origin:left top}
}

/* ---------- 2. Ribbon sections ----------------------------------- */


/* ---------- 3. Industries ---------------------------------------- */
.ind-caption{text-align:center;margin-top:var(--sp-8);font-size:var(--fs-sm);color:var(--text-muted)}
.ind-caption b{color:var(--forest-700);font-weight:600}

/* ---------- 4. How we hire for you -------------------------------- */
/* Five steps across the desktop row. The shared .stepper--row sets the
   columns; these rules only settle the rhythm of the closing callout. */
.hire-steps{margin-top:clamp(24px,3vw,40px)}
.hire-note{margin-top:clamp(28px,3vw,44px)}
.hire-note .callout__title{margin-bottom:6px}

/* ---------- 5. Featured jobs -------------------------------------- */


/* ---------- 6. Four portals --------------------------------------- */
.portal-card{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
/* .portal-card__tag / --green are shared components now (styles.css section 7). */
.portal-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.portal-card__list li{display:flex;gap:8px;font-size:13.5px;color:var(--ink-700);margin:0;line-height:1.45}
.portal-card__list svg{width:15px;height:15px;color:var(--forest-500);flex:none;margin-top:3px}
.portal-card .link-arrow{margin-top:auto;padding-top:var(--sp-3)}

/* ---------- 7. ATS pipeline --------------------------------------- */
.ats-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ats-points li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--ink-700);margin:0;line-height:1.55}
.ats-points svg{width:19px;height:19px;color:var(--forest-500);flex:none;margin-top:1px}
.ats-board{margin-top:clamp(28px,3vw,48px)}

/* ---------- 8. Our technology band (the one dark band) ------------ */
/* Small qualifier pill in a bento head: "On every mandate", "A recruiter
   edits it", "Free for candidates". Not a .badge, because the dark ground
   needs the reversed treatment. */
.ai-tag{
  margin-left:auto;display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.07);
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;
  color:var(--text-on-dark-muted);white-space:nowrap;
}
/* Height only. Stretching the columns, reserving the label strip and lifting
   the label into it are all shared behaviour now (styles.css section 15). */
.ai-chart{margin-top:auto;height:112px}
.bento__tile--lg .jd-mock{margin-top:var(--sp-2);flex:1}
.bento__tile--lg .jd-mock__out{height:100%}
/* Between 640 and 1024 the bento is two even columns, and the lg job-brief tile
   is roughly three times the height of an md tile. Paired with one, it kept the
   shared 620px jd-mock split inside half the page (a draft column about
   eighteen characters wide) and stretched its neighbour to match, leaving some
   350px of empty dark panel. Give the lg tile the full row instead: its draft
   gets the width the two-up split was designed for, and the six md tiles fall
   into three even pairs with no hole and no orphan. */
@media (min-width:640px) and (max-width:1023.98px){
  #ai .bento__tile--lg{grid-column:1 / -1}
}
.ai-honesty{
  margin-top:clamp(20px,2vw,28px);display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line-dark);background:rgba(255,255,255,.05);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--text-on-dark-muted);line-height:1.6;
}
.ai-honesty svg{width:19px;height:19px;color:var(--saffron-300);flex:none;margin-top:2px}

/* ---------- 9. Services band -------------------------------------- */
/* Long two-clause heading: one step down so each clause holds a single line. */
#serv-h{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem)}
.services-photo{position:relative}
.services-photo img{border-radius:var(--r-xl);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sh-lg)}
.services-photo .float-chip{position:absolute;right:-8px;bottom:22px}
@media (max-width:520px){ .services-photo .float-chip{right:0;bottom:12px;scale:.92;transform-origin:right bottom} }
/* From 1100px the copy column carries the engagement tiles, the mandate
   checklist and two buttons and runs to roughly 700px, while a 4:3 photo stops
   near 520 and leaves the band ending in empty ivory. Stretch the photo column
   to the copy instead of centring a short image in it. The subject is centred
   in the frame, so the taller crop keeps him whole. */
@media (min-width:1100px){
  #services .duo{align-items:stretch}
  .services-photo{display:flex;flex-direction:column}
  .services-photo img{aspect-ratio:auto;height:100%;min-height:520px}
}
.eng-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){ .eng-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.eng-tile{
  display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-800);
  text-decoration:none;transition:all var(--dur-fast) var(--ease-hover);
}
.eng-tile svg{width:17px;height:17px;color:var(--saffron-700);flex:none}
.eng-tile:hover{border-color:var(--saffron-300);background:var(--saffron-50);color:var(--saffron-800);transform:translateY(-2px)}
/* "What you get on every mandate" checklist, on the ivory ground. */
.home-mandate{border-top:1px solid var(--line-strong);padding-top:var(--sp-6)}
.home-mandate__title{font-size:var(--fs-h4);margin:0 0 var(--sp-4)}
.home-mandate__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.home-mandate__list li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--ink-700);margin:0;line-height:1.5}
.home-mandate__list svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:2px}

/* ---------- 10. Training loop ------------------------------------- */

.gap-card{display:flex;flex-direction:column;gap:var(--sp-4)}
.gap-card__ring{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap}

/* ---------- 11. Day one band (redesigned, with skyline) ----------- */
.dayone{position:relative;overflow:hidden;padding-bottom:clamp(6rem,5rem + 6vw,9rem)}
.dayone__grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(12,minmax(0,1fr));position:relative;z-index:2}
.dayone__lead{grid-column:span 12;display:flex;flex-direction:column;gap:var(--sp-5);padding:clamp(24px,2.6vw,34px)}
@media (min-width:860px){ .dayone__lead{grid-column:span 5} }
.dayone__big{display:flex;align-items:baseline;gap:12px}
.dayone__big .stat__num{font-size:clamp(3rem,2.2rem + 3vw,4.5rem)}
.dayone__portals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.dayone__portals li{display:flex;align-items:center;gap:11px;margin:0;padding:11px 0;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--ink-700)}
.dayone__portals li:first-child{border-top:0}
.dayone__portals svg{width:18px;height:18px;color:var(--forest-500);flex:none}
.dayone__portals b{color:var(--ink-800);font-weight:600}
.dayone__tiles{grid-column:span 12;display:grid;gap:clamp(12px,1.5vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){ .dayone__tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Two columns beside the lead card, not three: six tiles then fall into three
   rows that match the height of the engagement list, instead of two very tall
   rows with a hole in each. */
@media (min-width:860px){ .dayone__tiles{grid-column:span 7;grid-template-columns:repeat(2,minmax(0,1fr))} }
.dayone__tile{
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:var(--sp-5);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);position:relative;overflow:hidden;
}
.dayone__tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-ribbon-saffron)}
.dayone__tile:nth-child(even)::after{background:var(--grad-ribbon-green)}
.dayone__tile .stat__num{font-size:clamp(1.75rem,1.4rem + 1.1vw,2.375rem)}
.dayone__tile:nth-child(even) .stat__num{color:var(--forest-600)}
.dayone__icon{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--saffron-50);color:var(--saffron-700)}
.dayone__tile:nth-child(even) .dayone__icon{background:var(--forest-50);color:var(--forest-600)}
.dayone__icon svg{width:18px;height:18px}
.dayone__note{grid-column:1/-1;margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-subtle);text-align:center}
.skyline-strip{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(80px,9vw,140px);z-index:1;pointer-events:none;display:block}

/* ---------- 12. How our fees work ---------------------------------
   Three principle cards, then a split footer: who never pays on the left,
   the quote call to action on the right. No plan cards, no prices: the
   number is quoted per engagement, never published. */
.fees-grid{align-items:stretch}
.fee-card{display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.fee-card .feature-tile__icon{margin-bottom:var(--sp-1)}
.fee-card .card__title{margin:0}
.fee-card .card__body{margin:0}
.fee-card__note{
  margin:auto 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.6;
}
.fees-foot{
  margin-top:clamp(28px,3vw,44px);padding-top:clamp(24px,2.4vw,36px);border-top:1px dashed var(--line-strong);
  display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:900px){ .fees-foot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }
.fees-free h3{font-size:var(--fs-h4);margin:0 0 var(--sp-4)}
.fees-free__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fees-free__list li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--ink-700);margin:0;line-height:1.5}
.fees-free__list svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:2px}
.fees-free__list b{color:var(--ink-800);font-weight:600}
.fees-cta{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);
  padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);
  background:var(--surface-warm);border:1px solid var(--line);
}
.fees-cta p{margin:0 0 var(--sp-1);font-size:var(--fs-sm);color:var(--text-muted)}
@media (min-width:480px){ .fees-cta{flex-flow:row wrap;align-items:center} .fees-cta p{flex:1 1 100%;margin-bottom:0} }

/* ---------- 13. Trust and safety ---------------------------------- */
.trust-grid{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr}
@media (min-width:640px){ .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- 14. FAQ ----------------------------------------------- */


/* ---------- 15. CTA band art --------------------------------------
   The ridges stretch horizontally (preserveAspectRatio="none"), so nothing
   with a recognisable shape may live in them. The climbers sit in their own
   uniformly scaled SVG, parked exactly on the ridge's flat crest: the crest
   sits at --crest of --ridge-h from the bottom at every width, so the two
   line up from 320px to 1920px and there is no rectangular seam. */


/* The page's closing moment ends on a number you can ring, not only a form.
   It lands exactly where the sunrise gradient is at its brightest, so plain
   text on it would fail AA. The same glass treatment as .float-chip, in the
   dark direction, gives every item a ground of its own: measured 5.7:1 for the
   copy and 4.9:1 for the links over the orange. */
.cta-band__contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2px var(--sp-3);width:fit-content;max-width:100%;
  margin:var(--sp-7) auto 0;padding:10px var(--sp-5);
  border-radius:var(--r-xl);background:rgba(12,26,10,.72);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:var(--fs-sm);line-height:1.7;color:var(--text-on-dark);
}
.cta-band__contact>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* Separator trails its own item rather than leading the next one, so a wrapped
   line starts on a word instead of a stray middot. */
.cta-band__contact>span:not(:last-child)::after{content:"\00B7";color:var(--text-on-dark-muted)}
/* Below 560 every item is on its own line anyway; stack it deliberately and
   drop the separators instead of leaving three dangling dots. */
@media (max-width:559.98px){
  .cta-band__contact{flex-direction:column;gap:2px}
  .cta-band__contact>span:not(:last-child)::after{content:none}
}
.cta-band__contact a{
  color:var(--saffron-200);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(253,208,162,.45);text-underline-offset:3px;
}
.cta-band__contact a:hover{color:var(--white);text-decoration-color:currentColor}
.cta-band__contact a:focus-visible{outline:2px solid var(--focus-on-dark);outline-offset:3px;border-radius:var(--r-sm)}