/* ============================================================
   LUMA Integration — service page template
   One design, shared across all three service pages.
   Content is CMS-editable (data-cms tags); images are slots.
   ============================================================ */

/* ---- hero ------------------------------------------------ */
.svc-hero{position:relative;min-height:clamp(560px,82vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--charcoal);}
.svc-hero image-slot{position:absolute;inset:0;width:100%;height:100%;background:var(--charcoal-deep);}
.svc-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.svc-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(28,31,33,.6) 0%,rgba(28,31,33,.18) 32%,rgba(28,31,33,.32) 60%,rgba(20,22,24,.9) 100%),
    linear-gradient(90deg,rgba(20,22,24,.6) 0%,rgba(20,22,24,.12) 52%,rgba(20,22,24,0) 100%);}
.svc-hero .hero-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;width:100%;
  padding:0 var(--gutter) clamp(56px,8vw,96px);}
.svc-hero .hero-eyebrow{font-size:16px;font-weight:600;color:var(--gold);margin-bottom:18px;}
.svc-hero h1{color:#fff;max-width:16ch;}
.svc-hero .lead{color:rgba(255,255,255,.82);max-width:48ch;margin-top:22px;}

/* ---- overview ------------------------------------------- */
.svc-overview{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,6vw,90px);align-items:start;}
.svc-overview .svc-side h2{margin-bottom:0;}
.svc-overview .svc-side .gold-rule{margin-bottom:26px;}
.svc-statement{font-size:clamp(22px,2.3vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.28;
  color:var(--ink);text-wrap:pretty;}
.svc-overview .svc-body p{font-size:18px;line-height:1.62;color:var(--ink-soft);}
.svc-overview .svc-body p + p{margin-top:22px;}

/* ---- full-width feature image --------------------------- */
.svc-feature-img{margin:0;}
.svc-feature-img image-slot{display:block;width:100%;height:clamp(360px,52vw,640px);}

/* ---- what we deliver ------------------------------------ */
/* ---- typical services — full-bleed image with overlaid list -------- */
.svc-feat{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(560px,74vh,820px);padding:clamp(56px,9vh,110px) 0;}
.svc-feat-img{position:absolute;inset:0;z-index:0;}
.svc-feat-img .media,.svc-feat-img image-slot{width:100%;height:100%;object-fit:cover;display:block;}
.svc-feat-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(16,18,20,.92) 0%,rgba(16,18,20,.66) 40%,rgba(16,18,20,.2) 74%,rgba(16,18,20,.04) 100%),
    linear-gradient(0deg,rgba(16,18,20,.55),rgba(16,18,20,0) 46%);}
.svc-feat-inner{position:relative;z-index:2;width:100%;}
.svc-feat-panel{max-width:760px;display:flex;flex-direction:column;gap:clamp(22px,3vw,34px);color:#fff;}
.svc-feat-head{display:flex;flex-direction:column;gap:14px;}
.svc-feat-head .gold-rule{margin-bottom:2px;}
.svc-feat-panel .h2{color:#fff;}
.svc-feat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(28px,3.4vw,56px);border-top:1px solid rgba(255,255,255,.2);}
.svc-feat-list li{position:relative;padding:17px 0 17px 30px;font-size:16.5px;font-weight:500;
  color:rgba(255,255,255,.88);border-bottom:1px solid rgba(255,255,255,.13);
  transition:color .3s var(--ease);}
.svc-feat-list li::before{content:"";position:absolute;left:0;top:25px;width:14px;height:2px;
  background:var(--gold);transition:width .3s var(--ease);}
.svc-feat-list li:hover{color:#fff;}
.svc-feat-list li:hover::before{width:26px;}

/* ---- credentials (dark band) ---------------------------- */
.svc-cred-head{max-width:620px;margin:0 auto clamp(40px,5vw,60px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;}
.svc-cred-head .gold-rule{margin:0 auto;}
.svc-cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);border-radius:var(--r);overflow:hidden;}
.svc-cred{background:var(--charcoal);padding:clamp(34px,4vw,52px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.svc-cred .n{font-weight:800;font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1;color:#fff;}
.svc-cred .t{font-size:16px;color:rgba(255,255,255,.62);max-width:18ch;}

/* ---- other services ------------------------------------- */
.svc-others-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,48px);}
.svc-others-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px);}
.svc-other{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  min-height:clamp(300px,32vw,420px);background:var(--charcoal-deep);}
.svc-other image-slot{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.1s var(--ease);}
.svc-other:hover image-slot{transform:scale(1.06);}
.svc-other .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,22,24,.08) 28%,rgba(14,16,18,.86));transition:background .3s var(--ease);}
.svc-other:hover .scrim{background:linear-gradient(180deg,rgba(20,22,24,.18) 24%,rgba(14,16,18,.92));}
.svc-other .inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(28px,3vw,42px);gap:9px;}
.svc-other .ey{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.svc-other h3{color:#fff;font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.05;}
.svc-other .go{position:absolute;top:clamp(24px,3vw,36px);right:clamp(24px,3vw,36px);z-index:3;
  width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);}
.svc-other:hover .go{background:var(--gold);border-color:var(--gold);color:var(--charcoal);transform:translateY(-2px);}

/* ---- why / benefits (image + key points) ---------------- */
.svc-why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;}
.svc-why.reverse .svc-why-media{order:2;}
.svc-why-media{width:100%;}
.svc-why image-slot{width:100%;height:clamp(360px,46vw,580px);border-radius:var(--r);overflow:hidden;display:block;}
.svc-why-text{display:flex;flex-direction:column;gap:18px;}
.svc-why-text .gold-rule{margin-bottom:2px;}
.svc-why-text > .lead{margin-bottom:6px;}
.svc-points{display:flex;flex-direction:column;}
.svc-point{padding:22px 0;border-top:1px solid var(--line);}
.svc-point:last-child{border-bottom:1px solid var(--line);}
.svc-point h3{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px;}
.svc-point p{font-size:16px;line-height:1.55;color:var(--ink-soft);}
.dark .svc-point{border-top-color:var(--line-dk);}
.dark .svc-point:last-child{border-bottom-color:var(--line-dk);}
.dark .svc-point h3{color:#fff;}
.dark .svc-point p{color:rgba(255,255,255,.62);}

/* ---- process / how we work (image + numbered steps) ----- */
.svc-process{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,80px);align-items:center;}
.svc-process.reverse .svc-process-media{order:2;}
.svc-process-media{width:100%;}
.svc-process image-slot{width:100%;height:clamp(380px,46vw,580px);border-radius:var(--r);overflow:hidden;display:block;}
.svc-process-text{display:flex;flex-direction:column;gap:18px;}
.svc-process-text > .gold-rule{margin-bottom:2px;}
.svc-process-text > .lead{margin:0 0 6px;max-width:46ch;}
.svc-why-text > .lead,.svc-process-text > .lead{margin-top:19px;}
.svc-steps{display:flex;flex-direction:column;}
.svc-step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line);}
.svc-step:last-child{border-bottom:1px solid var(--line);}
.svc-step .k{font-size:15px;font-weight:600;color:var(--gold-deep);padding-top:3px;font-variant-numeric:tabular-nums;}
.svc-step h3{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px;}
.svc-step p{font-size:16px;line-height:1.5;color:var(--ink-soft);}

/* ---- cta band ------------------------------------------- */
.cta-band{text-align:center;}
.cta-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;}

@media(max-width:980px){
  .svc-overview,.svc-why,.svc-process,.svc-why.reverse,.svc-process.reverse{grid-template-columns:1fr;}
  .svc-why .svc-why-media,.svc-why.reverse .svc-why-media,
  .svc-process .svc-process-media,.svc-process.reverse .svc-process-media{order:-1;}
  .svc-others-grid{grid-template-columns:1fr;}
  .svc-cred-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .svc-feat-list{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .svc-feat-scrim{background:linear-gradient(90deg,rgba(16,18,20,.92) 0%,rgba(16,18,20,.74) 60%,rgba(16,18,20,.5) 100%);}
}

/* sticky header: solid charcoal, matching the footer */
.nav.solid,
.nav.nav-fixed.scrolled{background:var(--charcoal);backdrop-filter:none;}