/* ==========================================================================
   Pages: Services (index) + Service (detail)
   Layout signature — the only page that opens on cream rather than forest.
   A two-column typographic hero, one wide feature row, then a dense equal
   grid that includes an honest open slot. The detail page runs an included-
   list against stacked note cards and closes on a glass form over a photo.
   ========================================================================== */

.blob[data-pos="v1"]{--s:320px;left:-9%;top:6%;}
.blob[data-pos="v2"]{--s:280px;right:-6%;top:38%;--d:2.5s;}
.blob[data-pos="v3"]{--s:300px;left:-8%;top:22%;--d:1s;}

/* ==========================================================================
   INDEX
   ========================================================================== */
.serv-hero{background:var(--cream);padding:180px 0 var(--sec-tight);}
.serv-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:end;position:relative;z-index:var(--z-content);}
.serv-hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem);}
.serv-hero h1 em{font-style:normal;color:var(--forest-3);position:relative;}
/* A hivis wash behind the emphasised phrase, in place of a hero photograph. */
.serv-hero h1 em::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.34em;
  background:var(--hivis);opacity:.55;z-index:-1;border-radius:3px;
}
.serv-hero-side{padding-bottom:8px;}
.serv-hero-marks{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}

/* ---- Feature row ---- */
.serv-feature{padding:0 0 var(--sec-tight);}
.serv-feature-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;}
.serv-feature-ph{min-height:420px;border:none;}
.serv-feature-b{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;}
.serv-feature-b .chip{align-self:flex-start;margin-bottom:18px;}
.serv-feature-b h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px;}
.serv-feature-list{margin:22px 0 28px;display:grid;gap:10px;}
.serv-feature-list li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--muted);}
.serv-feature-list svg{color:var(--teal-ink);flex-shrink:0;margin-top:3px;}
.serv-feature-b .btn{align-self:flex-start;}

/* ---- Dense grid ---- */
.serv-grid-sec{padding:0 0 var(--sec);}
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.serv-cell{display:flex;flex-direction:column;}
.serv-cell-ph{height:190px;border:none;border-bottom:1px dashed rgba(18,16,12,.16);}
.serv-cell .card-body{display:flex;flex-direction:column;flex:1;}
.serv-cell h3{margin-bottom:8px;}
.serv-cell > .card-body > p{font-size:.9rem;color:var(--muted);margin-bottom:16px;}
.serv-cell-list{margin-bottom:18px;flex:1;}
.serv-cell-list li{
  font-size:.82rem;color:var(--muted);padding:6px 0;
  border-bottom:1px solid var(--line);
}
.serv-cell-list li:last-child{border-bottom:none;}

/* The open slot. Dashed and unfilled on purpose — the grid is meant to grow. */
.serv-cell--open{
  background:transparent;border:1.5px dashed var(--line-2);border-radius:var(--r);
  padding:34px 30px;display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.serv-cell--open h3{font-size:1.15rem;}
.serv-cell--open p{font-size:.9rem;color:var(--muted);margin-bottom:8px;}

/* ---- How it works ---- */
.serv-how{position:relative;background:var(--forest);padding:var(--sec) 0 150px;}
/* No photograph here either — a subtle grid field carries the ground. */
.serv-how::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
}
.serv-how .wrap{position:relative;z-index:var(--z-content);}
.serv-how-head{margin-bottom:48px;color:#fff;max-width:34ch;}
.serv-how-head h2{color:#fff;}
.serv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;}
.serv-step{border-radius:var(--r);padding:30px 26px;color:#fff;position:relative;}
.serv-step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--hivis);color:var(--forest);
  font-size:.78rem;font-weight:600;margin-bottom:18px;
}
.serv-step h3{font-size:1.02rem;margin-bottom:8px;color:#fff;}
.serv-step p{font-size:.86rem;color:var(--on-dark);}

/* ---- CTA ---- */
.serv-cta{padding:var(--sec) 0;}
.serv-cta-in{max-width:50ch;margin:0 auto;}
.serv-cta-lede{margin:14px auto 28px;}

/* ==========================================================================
   DETAIL
   ========================================================================== */
.crumbs--light{color:var(--muted);}
.crumbs--light a{color:var(--forest-3);}

.sshow-hero{background:var(--cream-2);padding:170px 0 var(--sec-tight);}
.sshow-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.sshow-hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem);}
.sshow-lede{margin:20px 0 30px;}
.sshow-hero-ph{height:360px;border-radius:var(--r);}

/* ---- Included ---- */
.sshow-incl{padding:var(--sec) 0;}
.sshow-incl-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;position:relative;z-index:var(--z-content);}
.sshow-incl-main h2{margin-bottom:26px;}
.incl-list{display:grid;gap:2px;}
.incl-list li{
  display:flex;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-size:1rem;
}
.incl-list li:last-child{border-bottom:none;}
.incl-tick{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.incl-tick--teal{background:var(--teal);}
.incl-tick--coral{background:var(--coral);}
.incl-tick--hivis{background:var(--hivis-2);color:var(--forest);}
.incl-tick--forest{background:var(--forest-3);}

.sshow-incl-side{display:grid;gap:16px;}
.sshow-note .card-body{padding:24px 24px;}
.sshow-note h3{font-size:.96rem;margin-bottom:8px;}
.sshow-note p{font-size:.88rem;color:var(--muted);}

/* ---- Get Started form ----
   Glass is legitimate here: the panel sits over a dark photographic ground.
   It is the only glass surface in this part of the page, so the budget holds.
   ------------------------------------------------------------------------ */
.sshow-form{position:relative;background:var(--forest);padding:var(--sec) 0;}
.sshow-form-media{position:absolute;inset:0;z-index:0;}
.sshow-form-media .ph{width:100%;height:100%;}
.sshow-form-media::after{content:"";position:absolute;inset:0;background:rgba(14,31,23,.9);}
.sshow-form .wrap{position:relative;z-index:var(--z-content);}
.sshow-form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
.sshow-form-intro h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:14px;}
.sshow-assure{margin:28px 0;display:grid;gap:11px;}
.sshow-assure li{display:flex;gap:11px;align-items:center;font-size:.9rem;color:var(--on-dark);}
.sshow-assure svg{color:var(--hivis);flex-shrink:0;}
.sshow-alt{font-size:.86rem;color:var(--on-dark-soft);}
.sshow-alt a{color:var(--hivis);text-decoration:underline;}
.sshow-form-card{border-radius:var(--r);padding:38px 36px;}
.sshow-form-card .form-note{margin-bottom:22px;}

/* ---- Other services ---- */
.sshow-more{padding:var(--sec) 0;}
.sshow-more .kicker{margin-bottom:26px;}
.sshow-more-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.sshow-more-card .card-body{padding:28px 26px;}
.sshow-more-card h3{margin-bottom:8px;}
.sshow-more-card p{font-size:.9rem;color:var(--muted);margin-bottom:16px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .serv-hero-grid{grid-template-columns:1fr;gap:34px;align-items:start;}
  .serv-grid{grid-template-columns:1fr 1fr;}
  .serv-steps{grid-template-columns:1fr 1fr;}
  .sshow-incl-grid{grid-template-columns:1fr;gap:40px;}
  .sshow-form-grid{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:860px){
  .serv-hero{padding:150px 0 var(--sec-tight);}
  .serv-feature-card{grid-template-columns:1fr;}
  .serv-feature-ph{min-height:240px;}
  .serv-feature-b{padding:32px 26px;}
  .serv-grid{grid-template-columns:1fr;}
  .serv-steps{grid-template-columns:1fr;}
  .sshow-hero-grid{grid-template-columns:1fr;gap:32px;}
  .sshow-hero-ph{height:240px;}
  .sshow-form-card{padding:28px 22px;}
  .sshow-more-row{grid-template-columns:1fr;}
}