/* ============================================================
   SERVICE PAGES - design system
   Built on the v4 brand tokens (teal / coral / navy / sand).

   The earlier version rendered every heading as a giant coral
   all-caps centred block with body copy floating under it, which
   gave 8000px of undesigned text. This replaces that with a real
   editorial architecture:

     hero photo + overlay  ->  two-column section (sticky heading
     left, prose right)  ->  alternating ground  ->  teal card band
     ->  numbered process  ->  check panel  ->  FAQ  ->  CTA
   ============================================================ */

/* ---------- 1. hero ------------------------------------------------ */
.svc-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(420px,58vh,620px);overflow:hidden;background:var(--navy-deep);
  padding:clamp(90px,12vw,140px) 0 clamp(38px,5vw,64px);
}
.svc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svc-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(15,49,64,.90) 0%,rgba(20,63,82,.74) 46%,rgba(5,127,126,.30) 100%);
}
.svc-hero .wrap{position:relative;z-index:2}
.svc-hero-in{max-width:760px}
.svc-kick{
  display:inline-flex;align-items:center;gap:10px;color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;
}
.svc-kick::before{content:"";width:28px;height:2px;background:var(--coral);display:block}
.svc-hero h1{
  color:#fff;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.028em;
  max-width:18ch;
}
.svc-hero .svc-hero-lede{
  color:rgba(255,255,255,.88);font-size:clamp(1rem,1.35vw,1.14rem);
  max-width:56ch;margin-top:20px;line-height:1.62;
}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.svc-hero-cta .btn-outline2{
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* breadcrumb strip under the hero */
.svc-crumbs{background:var(--sand);padding:13px 0;font-size:.82rem;color:var(--muted)}
.svc-crumbs a{color:var(--teal)}
.svc-crumbs a:hover{color:var(--coral)}
.svc-crumbs span{opacity:.5;margin:0 8px}

/* ---------- 2. content sections ------------------------------------ */
.svc-sec{padding:clamp(52px,6.5vw,96px) 0;background:var(--paper)}
.svc-sec.svc-mint{background:#EFF6F5}
.svc-sec.svc-sand{background:var(--sand)}
.svc-sec + .svc-sec{border-top:0}

.svc-sec > .wrap{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,4.5vw,70px);align-items:start;
}
.svc-sechead{position:sticky;top:156px}
.svc-kicker{
  display:block;color:var(--coral);font-size:.74rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px;
}
.svc-sechead h2{
  font-size:clamp(1.45rem,2.45vw,2.05rem);color:var(--navy);
  line-height:1.12;letter-spacing:-.022em;margin:0;
}
.svc-sechead::after{content:"";display:block;width:44px;height:3px;background:var(--coral);margin-top:20px;border-radius:2px}

.svc-prose{max-width:66ch}
.svc-prose:only-child{grid-column:1 / -1;max-width:78ch}
.svc-prose > p{color:var(--muted);font-size:1.04rem;line-height:1.72;margin:0 0 1.15em}
.svc-prose > p:last-child{margin-bottom:0}
.svc-prose strong{color:var(--navy);font-weight:600}
.svc-prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.svc-prose a:hover{color:var(--coral)}

/* the first section on the page reads as the lede */
.svc-sec:first-of-type .svc-prose > p:first-child{
  font-size:clamp(1.08rem,1.5vw,1.22rem);color:var(--ink);line-height:1.6;
}

/* ---------- 3. check panel (was: loose bullets) -------------------- */
.svc-checks{
  list-style:none;margin:6px 0 1.4em;padding:clamp(20px,2.4vw,28px);
  background:#fff;border:1px solid rgba(5,127,126,.16);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(16px,2vw,28px);
}
.svc-checks li{
  position:relative;padding-left:30px;color:var(--ink);font-size:.97rem;
  font-weight:500;line-height:1.5;
}
.svc-checks li::before{
  content:"";position:absolute;left:0;top:.16em;width:19px;height:19px;border-radius:50%;
  background:rgba(5,127,126,.10);
}
.svc-checks li::after{
  content:"";position:absolute;left:6px;top:.42em;width:6px;height:10px;
  border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(43deg);
}
.svc-sand .svc-checks,.svc-mint .svc-checks{border-color:rgba(5,127,126,.14)}

/* ---------- 4. condition-card band --------------------------------- */
.svc-band{background:var(--teal);padding:clamp(52px,6.5vw,92px) 0;color:#fff}
.svc-band.svc-band-navy{background:var(--navy)}
.svc-bandhead{max-width:60ch;margin:0 auto clamp(30px,3.6vw,46px);text-align:center}
.svc-bandhead .svc-kicker{color:#fff;opacity:.72}
.svc-bandhead h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.14;letter-spacing:-.022em}
.svc-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.7vw,20px);
}
.svc-card{
  border-radius:var(--radius);padding:clamp(22px,2.4vw,30px);text-align:left;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.055);
  transition:transform .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.svc-card-fill{background:var(--coral);border-color:transparent}
.svc-card h3{
  color:#fff;font-size:1.06rem;margin:0 0 .6rem;letter-spacing:-.015em;line-height:1.24;
  text-decoration:none;
}
.svc-card p{color:rgba(255,255,255,.90);font-size:.93rem;margin:0;line-height:1.62}
.svc-card:hover{transform:translateY(-6px);background:var(--coral);border-color:transparent;box-shadow:var(--shadow-md)}

/* ---------- 5. numbered process ------------------------------------ */
.svc-steps{list-style:none;margin:6px 0 1.2em;padding:0;display:grid;gap:clamp(14px,1.8vw,20px)}
.svc-steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,24px);
  align-items:start;background:#fff;border:1px solid rgba(5,127,126,.14);
  border-radius:var(--radius);padding:clamp(20px,2.2vw,26px);box-shadow:var(--shadow-sm);
}
.svc-step-n{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;
  border-radius:50%;background:rgba(253,95,76,.10);color:var(--coral);
  font-weight:700;font-size:1.08rem;font-variant-numeric:tabular-nums;
}
.svc-step-b h3{color:var(--navy);font-size:1.06rem;margin:0 0 .4rem;letter-spacing:-.015em}
.svc-step-b p{color:var(--muted);font-size:.97rem;line-height:1.66;margin:0}

/* ---------- 6. mid-page CTA strip ---------------------------------- */
.svc-strip{background:var(--sand);padding:clamp(40px,5vw,66px) 0}
.svc-strip .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;background:#fff;border:1px solid rgba(5,127,126,.16);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px) clamp(24px,3.4vw,44px);
  box-shadow:var(--shadow-sm);
}
.svc-strip h2{font-size:clamp(1.3rem,2.1vw,1.7rem);color:var(--navy);line-height:1.18;max-width:22ch}
.svc-strip p{color:var(--muted);font-size:.98rem;margin-top:8px;max-width:48ch}
.svc-strip .svc-strip-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- responsive --------------------------------------------- */
@media (max-width:980px){
  .svc-sec > .wrap{grid-template-columns:1fr;gap:20px}
  .svc-sechead{position:static}
  .svc-sechead::after{margin-top:16px}
  .svc-prose,.svc-prose:only-child{max-width:none}
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .svc-cards{grid-template-columns:1fr}
  .svc-checks{grid-template-columns:1fr}
  .svc-hero h1{max-width:none}
  .svc-strip .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .svc-card{transition:none}
  .svc-card:hover{transform:none}
}

/* deck line under a section heading (the GHL marketing sentence) */
.svc-deck{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  color:var(--teal);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.4;
  margin-top:14px;letter-spacing:-.01em;
}
.svc-sechead::after{margin-top:20px}
.svc-bandhead .svc-deck{color:rgba(255,255,255,.82);margin-top:12px}