/* ============================================================================
   Service pages — "Clear Coast"
   Same system as the homepage (inspection-card metaphor, serif x grot headings,
   .tag section device). The body is a run of long-form technical sections, so
   the layout here is a two-column reading grid: a sticky heading rail on the
   left, prose on the right — never a stack of centred cards.
   ========================================================================== */

/* ------------------------------------------------------------ breadcrumb -- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);
  padding:20px 0 0;
}
.crumb a{transition:color .3s var(--ease)}
.crumb a:hover{color:var(--green)}
.crumb span[aria-current]{color:var(--ink)}

/* ------------------------------------------------------------------ hero -- */
.svc-hero{position:relative;overflow:clip;padding-bottom:clamp(40px,6vh,72px)}
.svc-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:52px;
  align-items:start;padding-top:clamp(28px,4vh,48px);
}
.svc-h1{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(31px,4.4vw,58px);line-height:1.02;letter-spacing:-.018em;
  margin-bottom:22px;text-wrap:balance;
}
.svc-lede-1{font-size:clamp(16.5px,1.45vw,19px)}
.svc-badges{
  display:flex;flex-wrap:wrap;gap:9px 22px;margin:24px 0 26px;
  padding-top:22px;border-top:1px solid var(--line-soft);
}
.svc-badges li{display:flex;align-items:center;gap:9px;font-size:13.6px;color:var(--ink-soft)}
.svc-badges svg{color:var(--green-br);flex-shrink:0}
.svc-acts{display:flex;flex-wrap:wrap;gap:12px}
.svc-call{margin-top:18px;font-size:14px;color:var(--ink-soft)}

.svc-hero-fig .fig{aspect-ratio:1;border:1px solid var(--line)}

/* ------------------------------------------------------------- sections -- */
.svc-sec{border-top:1px solid var(--line-soft)}
.svc-sec--alt{background:var(--paper-2)}

/* the reading grid: heading rail + prose column */
.svc-block{display:grid;grid-template-columns:.72fr 1.28fr;gap:52px;align-items:start}
.svc-block-hd{position:sticky;top:calc(var(--bar) + 30px);padding-right:20px}
/* a hairline dropping from the heading anchors the rail so the sticky column
   does not read as an empty half of the grid */
.svc-block-hd::after{
  content:"";display:block;width:1px;height:52px;margin-top:22px;
  background:linear-gradient(var(--line),transparent);
}
.svc-h2{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(23px,2.5vw,34px);line-height:1.1;letter-spacing:-.014em;
  text-wrap:balance;
}
.svc-block-body{max-width:70ch}
.svc-p{font-size:15.4px;line-height:1.76;color:var(--ink-soft);text-wrap:pretty}
.svc-p + .svc-p{margin-top:1.05em}
.svc-h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:13px;letter-spacing:-.005em;line-height:1.3;
  margin:30px 0 10px;padding-top:16px;border-top:1px solid var(--line-soft);
  color:var(--ink);
}
.svc-h3:first-child{margin-top:0;padding-top:0;border-top:0}

/* term lists: "Label: description" reads as a spec entry, not a bullet */
.svc-ul{margin:18px 0 4px;border-top:1px solid var(--line-soft)}
.svc-ul li{
  display:grid;grid-template-columns:minmax(140px,.34fr) 1fr;gap:8px 22px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-size:14.6px;line-height:1.6;color:var(--ink-soft);
}
.svc-ul li b{
  font-family:'Spline Sans Mono',monospace;font-weight:500;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green);
  padding-top:3px;
}
.svc-ul-solo{grid-column:1 / -1}
.svc-p + .svc-ul{margin-top:14px}

/* A list of bare short items (place names, vehicle details) flows in columns.
   One full-width row per item wasted most of a screen on 13 neighbourhoods. */
.svc-cols{
  margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line-soft);
  columns:3;column-gap:26px;
}
.svc-cols li{
  break-inside:avoid;font-size:14.4px;line-height:1.5;color:var(--ink-soft);
  padding:6px 0 6px 15px;position:relative;
}
.svc-cols li::before{
  content:"";position:absolute;left:0;top:1.06em;width:6px;height:1px;
  background:var(--green-br);
}
.svc-p + .svc-cols{margin-top:12px}
@media(max-width:860px){.svc-cols{columns:2}}
@media(max-width:460px){.svc-cols{columns:1}}

.svc-ul--inv{border-top-color:var(--line-inv)}
.svc-ul--inv li{border-bottom-color:var(--line-inv);color:rgba(247,244,237,.8)}

/* --------------------------------------------------------- other services */
.svc-other{background:var(--paper-2);border-top:1px solid var(--line-soft)}
.other-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);margin-top:26px;
}
.other{
  background:var(--paper);padding:19px 22px;
  transition:background .4s var(--ease),padding-left .4s var(--ease);
}
.other-t{
  display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:12.5px;letter-spacing:-.005em;line-height:1.25;
  transition:color .35s var(--ease);
}
.other-c{
  display:block;margin-top:6px;font-size:8.5px;letter-spacing:.15em;
  color:var(--ink-mute);transition:color .35s var(--ease);
}
@media(hover:hover){
  .other:hover{background:var(--green-wash);padding-left:28px}
  .other:hover .other-t,.other:hover .other-c{color:var(--green)}
}

/* ------------------------------------------------------------- close band */
.close-2{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.close-2-b .lede + .lede{margin-top:1em}

/* ============================== RESPONSIVE ================================= */
@media(max-width:1080px){
  .svc-block{grid-template-columns:.8fr 1.2fr;gap:38px}
}
@media(max-width:980px){
  .svc-hero-grid{grid-template-columns:1fr;gap:34px}
  .svc-hero-fig{max-width:520px}
  .svc-block{grid-template-columns:1fr;gap:22px}
  .svc-block-hd{position:static}
  .close-2{grid-template-columns:1fr;gap:26px}
  .svc-hero .frac{opacity:.4}
}
@media(max-width:760px){
  .other-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* restack the term lists — never hide the description column */
  .svc-ul li{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .svc-ul li b{padding-top:0}
}

/* ============================================================ ARCHETYPES ==
   Section layouts keyed to content type, so the page stops reading as one
   uniform column of prose. See section_kind() in inc/service-page.php.
   ========================================================================== */

/* wide variants give the grid-based archetypes more room than prose needs */
.svc-block--wide{grid-template-columns:.52fr 1.48fr}

/* ---------------------------------------------------------------- STEPS --
   The process as a drawn sequence: a hairline runs through the numerals. */
.steps{counter-reset:step;margin-top:6px;position:relative}
.step{
  display:grid;grid-template-columns:56px 1fr;gap:24px;
  padding:0 0 30px;position:relative;
}
.step:last-child{padding-bottom:0}
/* the drawn line linking the stages */
.step::before{
  content:"";position:absolute;left:27px;top:40px;bottom:-6px;width:1px;
  background:linear-gradient(var(--line),var(--line-soft));
}
.step:last-child::before{display:none}
.step-n{
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);
  display:grid;place-items:center;
  font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.1em;
  color:var(--green);position:relative;z-index:1;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.svc-sec--alt .step-n{background:var(--paper-2)}
.step-b{padding-top:13px}
.step-t{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:13px;letter-spacing:-.005em;
  line-height:1.3;margin-bottom:8px;
}
.step-p{font-size:15px;line-height:1.72;color:var(--ink-soft);text-wrap:pretty}
.step-p + .step-p{margin-top:.85em}
@media(hover:hover){
  .step:hover .step-n{background:var(--green-btn);border-color:var(--green-btn);color:#fff}
}

/* ----------------------------------------------------------------- COST --
   The price the client quoted, lifted out as a figure on a corner-ticked
   plate. The full sentence still reads underneath — the figure never
   replaces the client's own wording. */
.cost-plate{
  position:relative;border:1px solid var(--line);background:var(--paper);
  padding:26px 28px;margin-bottom:24px;
}
.svc-sec--alt .cost-plate{background:var(--paper)}
.cost-plate::before,.cost-plate::after{content:"";position:absolute;width:13px;height:13px}
.cost-plate::before{top:-1px;left:-1px;border-top:2px solid var(--green-br);border-left:2px solid var(--green-br)}
.cost-plate::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green-br);border-right:2px solid var(--green-br)}
.cost-l{display:block;color:var(--ink-mute);margin-bottom:10px}
.cost-f{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.02em;
  color:var(--green);margin-bottom:14px;
}
.cost-p{
  font-size:14.6px;line-height:1.7;color:var(--ink-soft);text-wrap:pretty;
  padding-top:14px;border-top:1px solid var(--line-soft);
}

/* ------------------------------------------------------------- PT CARDS --
   Sub-topics (scope / why / detail) as a ruled grid instead of a run of
   headings down a single column. */
.pts{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);margin-top:8px;
}
.pt{background:var(--paper);padding:24px 22px;transition:background .4s var(--ease)}
.svc-sec--alt .pt{background:var(--paper-2)}
.pt-n{display:block;color:var(--green);margin-bottom:12px;font-size:9.5px;letter-spacing:.2em}
.pt-t{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:12.5px;letter-spacing:-.005em;
  line-height:1.28;margin-bottom:9px;
}
.pt-p{font-size:14.2px;line-height:1.66;color:var(--ink-soft);text-wrap:pretty}
.pt-p + .pt-p{margin-top:.8em}
@media(hover:hover){
  .pt:hover{background:var(--green-wash)}
  .svc-sec--alt .pt:hover{background:var(--green-wash)}
}
.pts + .svc-p{margin-top:20px}

/* the coverage archetype gets the column list at full width */
.svc-sec--areas .svc-cols{columns:3}

@media(max-width:1080px){
  .svc-block--wide{grid-template-columns:.62fr 1.38fr}
}
@media(max-width:980px){
  .svc-block--wide{grid-template-columns:1fr}
}
@media(max-width:700px){
  .pts{grid-template-columns:1fr}
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step-n{width:42px;height:42px;font-size:11px}
  .step::before{left:21px;top:32px}
  .step-b{padding-top:8px}
}

/* --------------------------------------------------- consecutive plains --
   Some documents (semi-truck, RV) run six short prose sections in a row with
   no H3s to give the archetype system anything to work with. Mirroring the
   reading grid on alternate plain sections keeps the eye moving instead of
   presenting six identical left-rail blocks. Content order is unchanged —
   only the column placement flips. */
@media(min-width:981px){
  .svc-sec--plain.svc-sec--alt .svc-block{grid-template-columns:1.28fr .72fr}
  .svc-sec--plain.svc-sec--alt .svc-block-hd{order:2;padding-right:0;padding-left:20px}
  .svc-sec--plain.svc-sec--alt .svc-block-body{order:1;justify-self:end}
  /* the anchoring hairline hangs on the inside edge when mirrored */
  .svc-sec--plain.svc-sec--alt .svc-block-hd::after{margin-left:0}
}
/* a lone list in a short prose section reads better as a bordered plate */
.svc-sec--plain .svc-cols,
.svc-sec--warranty .svc-cols{
  padding:16px 20px;border:1px solid var(--line-soft);background:var(--paper);
}
.svc-sec--plain.svc-sec--alt .svc-cols,
.svc-sec--warranty.svc-sec--alt .svc-cols{background:var(--paper-2)}