/* ============================================================
   SERVICE / INDUSTRY LANDING — #ffffff
   Page layer. Loads after components.css and refines the shared
   .sv-* markup rendered by parts-service-body.php and the
   process-steps / differentiators / cta components.
   Body class is `sv-page` (see peepal_body_classes()).
   ============================================================ */
body.sv-page{background:#fff}

/* ---------- hero: image-led, copy anchored bottom-left ---------- */
.sv-page .sv-hero{min-height:70vh;background:#080808}
.sv-hero__media img,
.sv-hero__media .peepal-media,
.sv-hero__media .peepal-scene{width:100%;height:100%;object-fit:cover}

/* Deeper at the foot so the headline always clears the artwork. */
.sv-hero__scrim{background:linear-gradient(0deg,#080808 3%,rgba(8,8,8,.35) 44%,transparent 72%)}

/* .sv-hero is a flex row; .container's auto margins would centre a
   shrink-to-fit item, so claim the full row and stay left-aligned. */
.sv-hero__copy{width:100%;flex:1 1 auto;text-align:left}
.sv-hero__copy .eyebrow{margin-bottom:16px}
/*
 * Sized to hold the longest service name on one line. "Recruitment Process
 * Outsourcing" measures 15.24em in Playfair 800 at this tracking, and the
 * container is 1240px less its gutters — so anything above ~4.55rem wrapped
 * it onto a second line. 5.6vw / 4.4rem clears that with about six per cent
 * to spare at every width down to 640px, where the phone rule below takes
 * over and lets it wrap rather than shrink to nothing.
 *
 * No `white-space:nowrap`: the size alone does the work, so a longer name
 * than any of the four wraps evenly instead of running off the screen.
 */
.sv-hero__copy h1{
  font-family:var(--display);font-weight:800;
  font-size:var(--fs-service-hero-h1,var(--fs-h1,clamp(2.2rem,5.6vw,4.4rem)));line-height:.98;letter-spacing:-.02em;
  color:#fff;margin:0;text-wrap:balance;
}
/*
 * The headline's weight is the design's, not the editor's.
 *
 * hero_heading is a rich field, and pasting into it leaves inline markup
 * behind: eight of the ten service and industry pages carry a
 * `<span style="font-weight: 400">` around the whole headline, which is why
 * they read lighter than Executive Search and Product and Technology Hiring —
 * the only two whose H1 is clean and therefore renders at the 800 above.
 *
 * !important is not decoration here. An inline style beats any selector no
 * matter how specific, so this is the only way CSS can take the weight back,
 * and it has to reach the descendants because the span wraps the text rather
 * than sitting on the h1. Colour tinting a word — what the field is actually
 * for — is untouched.
 *
 * Clearing the formatting in the editor would fix those eight pages too, but
 * not the ninth one pasted next month.
 */
.sv-hero__copy h1,
.sv-hero__copy h1 *{font-weight:800 !important}

/*
 * Whole-heading size belongs to --fs-service-hero-h1 above. TinyMCE used to
 * write font-size on a span inside the H1, so choosing 14px and then 16px
 * could never return to the responsive design size. Inherit through those
 * legacy spans; colour and emphasis remain editable inline.
 */
.sv-hero__copy h1 *{font-size:inherit !important}

@media(max-width:640px){
  /*
   * The phone headline was capped at 2.2rem — 35px against a 17.6px intro,
   * so the two blocks carried nearly the same weight on screen and the fold
   * read as a wall of italic with a label on top. It leads properly at
   * 36-48px, and the intro is stepped down to match.
   */
  .sv-hero__copy h1{font-size:var(--fs-service-hero-h1,var(--fs-h1,clamp(2.25rem,9vw,3rem)))}
}
/*
 * The intro runs to the end of "Process" in the heading above it — a little
 * under two thirds of the line — so the two blocks share a right edge instead
 * of the intro stopping at an arbitrary point mid-word.
 *
 * A percentage, not a character count. Both this and the heading are measured
 * against the same container, so a percentage holds that alignment at every
 * width; 34ch drifted, because the heading scales on 5.6vw and this line on
 * 2vw, and the two only agreed at one viewport size.
 */
.sv-hero__copy .sub{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2vw,1.5rem);
  color:#fff;                 /* full opacity — no dimmed hero copy */
  margin:18px 0 0;max-width:62%;
}
.sv-hero__copy .sub + .sub{margin-top:12px}

/* On a phone the heading wraps to three or four lines of its own, so there is
   no long line left to align to — and 62% of a 375px screen is a column four
   words wide. The intro takes the full width instead. */
@media(max-width:640px){
  .sv-hero__copy .sub{max-width:none;font-size:1.02rem;line-height:1.52}
  .sv-hero__copy .sub + .sub{margin-top:10px}
}

/* ============================================================
   LOGO MARQUEE ON INDUSTRY PAGES
   The wall is the one fold an industry page has that a service
   page does not. Its base styling in base.css is written for
   fold 2 of the homepage — a white band between two dark folds,
   closed off with a hairline. Dropped onto this white page it
   reads as a leftover slab: a stray rule across the page and a
   stack of three paddings before the explainer.
   These rules make it a band of this page instead. Nothing here
   touches the homepage.
   ============================================================ */
.ind-page .fold2{
  /* No hairline: on the homepage it separates two dark folds — here
     there is nothing to separate, and it draws a line under a hero. */
  border-bottom:0;
  background:transparent;                 /* the page is already --paper */
  padding:clamp(44px,6vw,72px) 0 0;       /* clear the full-bleed hero */
}

/* Match the page's left-aligned eyebrow language rather than the
   homepage's centred caption, and hold the container gutter. */
.ind-page .fold2 .cap{
  max-width:var(--maxw);margin:0 auto 24px;padding:0 var(--pad);
  text-align:left;
}

/* The rail carries 56px of its own bottom padding to clear the hover
   tooltip; without this the explainer's top padding stacks on top of
   it and the fold floats in the middle of the page. */
.ind-page .marquee{padding-bottom:44px}
.ind-page .fold2 + .sv-explainer{padding-top:clamp(24px,3vw,44px)}

/* A shade smaller than the homepage wall: here it sits between an
   80px hero headline and the intro h2, and at homepage scale it
   competes with both. */
.ind-page .fold2{
  --peepal-logo-height:36px;
  --peepal-marquee-gap:56px;
}
.ind-page .fold2 .logo{font-size:1.28rem}
.ind-page .fold2 .logo .logo__img img{max-width:150px}

@media(max-width:760px){
  .ind-page .fold2{
    padding-top:clamp(32px,7vw,44px);
    --peepal-logo-height:28px;
    --peepal-marquee-gap:40px;
  }
  .ind-page .fold2 .logo{font-size:1.1rem}
  .ind-page .marquee{padding-bottom:34px}
}

/* ---------- explainer ---------- */
.sv-explainer{padding:clamp(64px,9vw,120px) 0 0}
.sv-intro{max-width:760px}
.sv-intro .eyebrow{margin-bottom:16px}
.sv-intro h2{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-h2,clamp(1.9rem,3.6vw,2.8rem));line-height:1.08;letter-spacing:-.01em;
  color:#0a0a0a;margin:0 0 24px;max-width:20ch;
}
.sv-intro .sec-lead{
  font-family:var(--body);
  font-size:var(--fs-lead,1.14rem);line-height:1.75;color:#2c2c2c;margin:0 0 20px;max-width:none;
}
.sv-intro .sec-lead:last-child{margin-bottom:0}

/*
 * Intro subheads are one role on every Service and Industry page. Rich-text
 * paste can put font-weight on a descendant span, which made Product and Tech
 * and IT Services alternate between regular and bold even though every label
 * is an H3. The role owns its weight; inline colour/emphasis remains intact.
 */
.sv-intro .peepal-rich :is(h3,h4,h5),
.sv-intro .peepal-rich :is(h3,h4,h5) *{font-weight:700 !important}
.sv-intro .peepal-rich :is(h3,h4,h5){
  clear:both;display:block !important;float:none;width:100%;
  margin:1.4em 0 .5em;
}

/* ---------- section heads inside steps / diffs / faq ---------- */
.sv-steps .head,.sv-diffs .head,.sv-faq .head{margin-bottom:4px}
.sv-steps .head .eyebrow,.sv-diffs .head .eyebrow,.sv-faq .head .eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.08em * var(--mono-track, 1));
  text-transform:uppercase;color:var(--neon);
}
.sv-steps .head h2,.sv-diffs .head h2,.sv-faq .head h2{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-h2,clamp(1.6rem,3vw,2.3rem));line-height:1.1;color:#0a0a0a;margin:12px 0 0;
}
.sv-steps .head .sec-lead,.sv-diffs .head .sec-lead,.sv-faq .head .sec-lead{
  font-family:var(--body);font-size:var(--fs-lead,1.05rem);line-height:1.7;color:#555;
  margin:14px 0 0;max-width:70ch;
}

/* ---------- faq (sits under "Why Peepal") ---------- */
.sv-faq{padding:clamp(40px,6vw,80px) 0}
/* The rows span the container so both gutters match; only the answer copy is
   held to a reading measure. */
.sv-faq .peepal-faq__list{margin-top:30px}
.sv-faq .peepal-faq__item summary{font-size:1.12rem;color:#0a0a0a}
.sv-faq .peepal-faq__answer p{font-size:.98rem;color:#555;line-height:1.7;max-width:80ch}

/* ---------- steps ---------- */
.sv-steps{padding:clamp(40px,6vw,80px) 0 0}
.steps{grid-template-columns:repeat(4,1fr)}
.step{border-top:2px solid #0a0a0a}
.step__idx{font-size:.72rem;letter-spacing:calc(.056em * var(--mono-track, 1))}
.step h3{font-size:var(--fs-h3,1.5rem);font-weight:700;color:#0a0a0a}
.step p{font-size:.98rem}

/* ---------- differentiators ---------- */
.diffs{grid-template-columns:repeat(3,1fr)}
.diff{border:1px solid #ececec;padding:28px}
.diff h3{font-size:var(--fs-h3,1.35rem);font-weight:700;color:#0a0a0a}
.diff p{font-size:.96rem}

@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .diffs{grid-template-columns:1fr}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
}