/* James Woolford Design — service page balance and alignment v39 */

:root{
  --jw39-ink:#101010;
  --jw39-blue:#2458ff;
  --jw39-cream:#f3f1eb;
  --jw39-pale:#eef1fa;
  --jw39-muted:#615d56;
  --jw39-line:rgba(16,16,16,.14);
}

/* -------------------------------------------------------------------------- */
/* Service hero: three deliberate columns, rather than one oversized text pile. */
/* -------------------------------------------------------------------------- */
.service-detail-page .service-detail-hero{
  padding:clamp(116px,9vw,156px) 0 clamp(72px,7vw,104px)!important;
}

.service-detail-page .service-detail-hero__grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.48fr) minmax(230px,.62fr) minmax(320px,.76fr)!important;
  gap:clamp(30px,3.8vw,66px)!important;
  align-items:stretch!important;
  width:min(1480px,calc(100% - clamp(42px,7vw,140px)))!important;
  max-width:1480px!important;
  padding-bottom:clamp(46px,4.8vw,68px)!important;
}

.service-detail-page .service-detail-hero__copy{
  display:none!important;
}

.jw-service-hero-title{
  min-width:0;
  align-self:center;
}

.jw-service-hero-title .section-kicker{
  display:block;
  margin:0 0 20px!important;
}

.jw-service-hero-title h1{
  max-width:11.5ch!important;
  margin:0!important;
  color:var(--jw39-ink)!important;
  font-size:clamp(54px,4.45vw,72px)!important;
  line-height:.91!important;
  letter-spacing:-.068em!important;
  text-wrap:balance;
}

.jw-service-hero-details{
  align-self:center;
  min-width:0;
  padding-top:30px;
}

.jw-service-hero-details p{
  max-width:34ch!important;
  margin:0!important;
  color:var(--jw39-muted)!important;
  font-size:16px!important;
  line-height:1.72!important;
}

.jw-service-hero-details>a{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:28px!important;
  padding:16px 20px!important;
  border:0!important;
  background:var(--jw39-blue)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  transition:transform .3s ease,box-shadow .3s ease!important;
}

@media(hover:hover){
  .jw-service-hero-details>a:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(36,88,255,.22);
  }
}

.service-detail-page .jw-service-hero-panel{
  align-self:stretch!important;
  min-height:360px!important;
  height:100%!important;
  padding:28px!important;
}

.service-detail-page .jw-service-hero-panel h2{
  font-size:clamp(38px,3.15vw,52px)!important;
}

/* -------------------------------------------------------------------------- */
/* Process intro: heading block left, explanation right, both vertically aligned. */
/* -------------------------------------------------------------------------- */
.service-detail-page .service-process__intro{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(320px,.58fr)!important;
  gap:clamp(50px,8vw,132px)!important;
  align-items:center!important;
  margin:0 0 clamp(48px,5.6vw,76px)!important;
  padding-bottom:clamp(34px,3.8vw,48px)!important;
}

.jw-service-process-heading{
  min-width:0;
}

.jw-service-process-heading .section-kicker{
  display:block!important;
  margin:0 0 18px!important;
  color:var(--jw39-blue)!important;
}

.jw-service-process-heading h2{
  max-width:9ch!important;
  margin:0!important;
  color:var(--jw39-ink)!important;
  font-size:clamp(54px,5.1vw,78px)!important;
  line-height:.91!important;
  letter-spacing:-.068em!important;
  text-align:left!important;
}

.service-detail-page .jw-service-process-summary{
  align-self:center!important;
  max-width:37ch!important;
  margin:0!important;
  padding-left:28px;
  border-left:2px solid rgba(36,88,255,.42);
  color:var(--jw39-muted)!important;
  font-size:17px!important;
  line-height:1.72!important;
  text-align:left!important;
}

/* Keep each process card aligned to the same rhythm. */
.service-detail-page .service-process__steps article{
  min-height:310px!important;
}

.service-detail-page .service-process__steps article>div{
  display:flex!important;
  flex:1!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  margin-top:0!important;
}

.service-detail-page .service-process__steps h3{
  margin:64px 0 14px!important;
}

/* -------------------------------------------------------------------------- */
/* Intermediate desktop: keep the useful panel beside the content, but stack   */
/* the description under the title before the columns become too cramped.      */
/* -------------------------------------------------------------------------- */
@media(max-width:1250px){
  .service-detail-page .service-detail-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(310px,380px)!important;
    gap:clamp(34px,5vw,66px)!important;
  }

  .jw-service-hero-title,
  .jw-service-hero-details{
    grid-column:1!important;
  }

  .jw-service-hero-title{grid-row:1!important;align-self:end!important;}
  .jw-service-hero-details{grid-row:2!important;align-self:start!important;padding-top:0;}
  .service-detail-page .jw-service-hero-panel{grid-column:2!important;grid-row:1 / span 2!important;}

  .jw-service-hero-title h1{
    max-width:10.5ch!important;
    font-size:clamp(54px,5.4vw,70px)!important;
  }

  .jw-service-hero-details p{max-width:48ch!important;}
}

/* -------------------------------------------------------------------------- */
/* Tablet/mobile: one clean reading column; no overlapping or split alignment. */
/* -------------------------------------------------------------------------- */
@media(max-width:900px){
  .service-detail-page .service-detail-hero{
    padding-top:100px!important;
    padding-bottom:72px!important;
  }

  .service-detail-page .service-detail-hero__grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
    width:calc(100% - 36px)!important;
    padding-bottom:36px!important;
  }

  .jw-service-hero-title,
  .jw-service-hero-details,
  .service-detail-page .jw-service-hero-panel{
    grid-column:1!important;
    grid-row:auto!important;
  }

  .jw-service-hero-title h1{
    max-width:11ch!important;
    font-size:clamp(48px,12vw,66px)!important;
  }

  .jw-service-hero-details{
    padding:0!important;
  }

  .jw-service-hero-details p{
    max-width:42ch!important;
    font-size:15px!important;
  }

  .service-detail-page .jw-service-hero-panel{
    min-height:330px!important;
  }

  .service-detail-page .service-process__intro{
    grid-template-columns:1fr!important;
    gap:22px!important;
    align-items:start!important;
  }

  .jw-service-process-heading h2{
    max-width:9ch!important;
    font-size:clamp(46px,12vw,64px)!important;
  }

  .service-detail-page .jw-service-process-summary{
    max-width:38ch!important;
    padding-left:20px;
    font-size:15px!important;
  }
}

@media(max-width:560px){
  .jw-service-hero-title h1{
    font-size:clamp(44px,13vw,58px)!important;
  }

  .jw-service-hero-details>a{
    width:100%;
    justify-content:space-between;
  }

  .service-detail-page .jw-service-hero-panel{
    min-height:300px!important;
    padding:24px!important;
  }
}