/* ==========================================================================
   Service landing pages — compact hero, process ladder, FAQ, proof strip
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.crumbs{
  max-width:var(--maxw);margin:0 auto clamp(28px,4vw,48px);
  padding:calc(var(--nav-h) + 28px) 0 0;
  font-size:.72rem;font-weight:700;letter-spacing:var(--track-mid);
  text-transform:uppercase;color:var(--grey-dim);
}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:'/';color:var(--line-strong)}
.crumbs a{color:var(--grey);transition:color var(--duration-fast)}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current]{color:var(--blue)}

/* ---------- service hero ---------- */
.svc-hero{
  position:relative;overflow:hidden;
  padding:0 var(--gutter) clamp(3rem,5vw,5rem);
  border-bottom:1px solid var(--line);
}
.svc-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 70% at 82% 12%,rgba(69,182,230,.14),transparent 62%),
    linear-gradient(180deg,#0a1016 0%,var(--black) 100%);
}
.svc-hero > *{position:relative;z-index:1}
.svc-hero-wrap{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
}
.svc-hero h1{
  font-size:clamp(2.6rem,1.4rem + 4.6vw,5.4rem);line-height:.98;margin-top:10px;
}
.svc-hero .lede{
  color:var(--grey);font-size:var(--text-lead);line-height:1.75;
  margin:26px 0 34px;max-width:54ch;
}
.svc-hero .lede strong{color:var(--white);font-weight:600}
.svc-hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.svc-hero-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);background:var(--steel);
}
.svc-hero-media img{width:100%;height:100%;object-fit:cover}
.svc-hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 45%,rgba(7,10,13,.55) 100%);
}

/* ---------- key points ---------- */
.points{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  max-width:var(--maxw);margin:0 auto;
}
.point{background:var(--carbon);padding:38px 32px}
.point-num{
  font-family:var(--font-display);font-size:1.1rem;color:var(--blue);
  letter-spacing:.06em;margin-bottom:14px;
}
.point h3{font-size:1.15rem;margin-bottom:10px}
.point p{color:var(--grey);font-size:.9rem;line-height:1.7}

/* ---------- process ladder ---------- */
.process{max-width:var(--maxw);margin:0 auto;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:90px 1fr;gap:30px;
  padding:34px 0;border-bottom:1px solid var(--line);align-items:start;
}
.step:first-child{border-top:1px solid var(--line)}
.step-n{
  font-family:var(--font-display);font-size:2.6rem;line-height:.9;
  color:var(--blue);opacity:.4;
}
.step h3{margin-bottom:10px}
.step p{color:var(--grey);line-height:1.75;max-width:var(--maxw-prose)}

/* ---------- inclusions list ---------- */
.incl{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 44px;max-width:var(--maxw);margin:0 auto;
}
.incl li{
  display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-bottom:1px solid var(--line);color:var(--grey);line-height:1.6;
}
.incl li svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:4px}
.incl li strong{color:var(--white);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:var(--maxw);margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:26px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  text-transform:uppercase;letter-spacing:.02em;
  transition:color var(--duration-fast);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary::after{
  content:'';flex:none;width:14px;height:14px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform var(--duration-normal) var(--ease-out-quart);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .faq-a{padding:0 0 28px;color:var(--grey);line-height:1.8;max-width:var(--maxw-prose)}

/* ---------- proof strip ---------- */
.proof{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:var(--maxw);margin:0 auto;
}
.proof figure{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.proof img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out-quart)}
.proof figure:hover img{transform:scale(1.06)}
.proof figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(transparent,rgba(7,10,13,.92));
  font-size:.7rem;font-weight:700;letter-spacing:var(--track-mid);text-transform:uppercase;
}

/* ---------- closing CTA band ---------- */
.cta-band{
  background:var(--carbon);border-block:1px solid var(--line);text-align:center;
}
.cta-band .wrap{max-width:760px}
.cta-band h2{margin-bottom:20px}
.cta-band p{color:var(--grey);line-height:1.75;margin-bottom:34px}
.cta-band .hero-ctas{justify-content:center}

/* ---------- sibling service links ---------- */
.siblings{
  display:flex;flex-wrap:wrap;gap:12px;max-width:var(--maxw);margin:0 auto;
}
.siblings a{
  border:1px solid var(--line);background:var(--carbon);padding:14px 24px;
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);transition:color var(--duration-fast),border-color var(--duration-fast);
}
.siblings a:hover{color:var(--blue);border-color:var(--blue)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:980px){
  .svc-hero-wrap{grid-template-columns:1fr;gap:40px}
  .svc-hero-media{aspect-ratio:16/9}
  .points{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .crumbs{
    margin-bottom:16px;padding-top:calc(var(--nav-h) + 16px);
    font-size:.62rem;letter-spacing:.12em;
  }
  .svc-hero{padding-bottom:clamp(1.75rem,5vw,2.5rem)}
  .svc-hero-wrap{gap:22px}
  .svc-hero .lede{margin:14px 0 20px;line-height:1.6}
  .svc-hero-ctas{gap:10px}
  .svc-hero-ctas .btn{flex:1 1 100%}
  .svc-hero-media{aspect-ratio:16/10}

  .point{padding:20px 16px}
  .point-num{margin-bottom:8px;font-size:.95rem}
  .point h3{font-size:1rem;margin-bottom:6px}
  .point p{font-size:.82rem;line-height:1.55}

  .step{grid-template-columns:40px 1fr;gap:14px;padding:18px 0}
  .step-n{font-size:1.5rem}
  .step h3{margin-bottom:5px}
  .step p{font-size:.85rem;line-height:1.6}

  .incl{grid-template-columns:1fr;gap:0}
  .incl li{padding:10px 0;font-size:.85rem;gap:10px}
  .incl li svg{width:15px;height:15px;margin-top:3px}

  /* two-up proof strip keeps all three shots near the fold */
  .proof{grid-template-columns:1fr 1fr;gap:8px}
  .proof figure{aspect-ratio:1/1}
  .proof figure:first-child{grid-column:span 2;aspect-ratio:16/10}
  .proof figcaption{padding:20px 10px 8px;font-size:.58rem;letter-spacing:.12em}

  .faq summary{padding:16px 0;gap:14px}
  .faq summary::after{width:11px;height:11px}
  .faq .faq-a{padding-bottom:18px;font-size:.85rem;line-height:1.65}

  .cta-band p{margin-bottom:22px;font-size:.88rem}
  .siblings{gap:8px}
  .siblings a{padding:11px 15px;font-size:.66rem;letter-spacing:.12em}
}