/* ---------- Service intro (first section after the page header) ---------- */

.sintro__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 960px) { .sintro__inner { grid-template-columns: 1.08fr 1fr; gap: var(--space-2xl); } }
.sintro__copy { display: flex; flex-direction: column; gap: 20px; }
.sintro__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sintro__eyebrow .chip { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.sintro .t-lead { max-width: 560px; }
.sfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 0; border-top: 1px solid var(--line); }
.sfacts > div { padding: 16px 12px 0 0; }
.sfacts > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.sfacts dt { font: var(--weight-black) 22px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--navy-800); }
@media (min-width: 768px) { .sfacts dt { font-size: 28px; } }
.sfacts dd { margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
@media (min-width: 768px) { .sfacts dd { font-size: 13px; } }

.sintro__media { padding-bottom: 72px; }
@media (max-width: 959.98px) { .sintro__media { position: relative; } }
@media (min-width: 960px) { .sintro__media { padding: 0 0 0 28px; } }
.sintro__photo { width: 100%; aspect-ratio: 4 / 4.2; max-height: 520px; border-radius: var(--radius-xl); box-shadow: var(--shadow-hover); }
@media (min-width: 960px) { .sintro__photo { aspect-ratio: 4 / 4.4; max-height: 580px; } }
.sintro__photo .tile__cap { left: 16px; top: 16px; bottom: auto; }
.sintro__photo .tile__scrim { top: 0; bottom: auto; height: 40%; background: linear-gradient(to bottom, rgba(11, 26, 43, 0.55), transparent); }

/* ---------- Mini day ruler card ---------- */

.mruler { position: absolute; left: 14px; right: 14px; bottom: 0; z-index: 2; display: grid; gap: 10px; padding: 16px 18px; }
@media (min-width: 560px) { .mruler { left: auto; right: 24px; width: 300px; } }
@media (min-width: 960px) { .mruler { left: -8px; right: auto; bottom: 40px; } }
.mruler__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mruler__top span { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.mruler__top strong { font: var(--weight-black) 22px/1.15 var(--font-display); text-align: right; letter-spacing: -0.02em; color: var(--navy-800); }
.mruler__ticks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.mruler__ticks i { height: 22px; border-radius: 5px; background: var(--navy-050); border: 1px solid var(--ink-a08); transform-origin: bottom; transition: transform 500ms var(--ease-out), background var(--dur-hover); }
.mruler__ticks i.is-on { background: var(--clay-500); border-color: var(--clay-500); }
.mruler__ticks i.is-win { background: rgba(227, 163, 34, 0.35); border-color: rgba(227, 163, 34, 0.6); }
.mruler:hover .mruler__ticks i.is-on { background: var(--clay-600); }
.mruler__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-soft); }
.mruler small { font-size: 12px; color: var(--text-muted); }

/* ---------- What's included (written quote sheet) ---------- */

.incl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 960px) { .incl { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: start; } .incl__media { order: -1; } }
.incl__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.incl__main .section__head { margin: 0; }

.spec { padding: 0; overflow: hidden; }
.spec__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--chalk-000), var(--white)); }
@media (min-width: 768px) { .spec__head { padding: 22px 28px; } }
.spec__kicker { display: block; font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
.spec__head strong { font: var(--weight-black) 22px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--navy-800); }
.spec__list { padding: 6px 0; }
.spec__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 22px; border-top: 1px dashed var(--line); transition: background var(--dur-hover), padding-left var(--dur-hover) var(--ease-out); }
.spec__row:first-child { border-top: 0; }
@media (min-width: 768px) { .spec__row { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 15px 28px; } }
.spec__row:hover { background: var(--navy-050); padding-left: 30px; }
@media (min-width: 768px) { .spec__row:hover { padding-left: 36px; } }
.spec__num { font: var(--weight-black) 13px/1 var(--font-display); letter-spacing: 0.08em; color: var(--clay-600); }
.spec__item { font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink-900); line-height: 1.35; }
@media (min-width: 768px) { .spec__item { font-size: 16px; } }
.spec__tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); font: var(--weight-bold) 11px/1 var(--font-body); color: var(--navy-700); background: var(--navy-050); white-space: nowrap; }
.spec__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--navy-700); }
.spec__tag--opt { background: rgba(227, 163, 34, 0.16); color: #8A5A00; }
.spec__tag--opt::before { background: var(--amber-500); }
.spec__tag--trade { background: rgba(194, 69, 44, 0.1); color: var(--clay-600); }
.spec__tag--trade::before { background: var(--clay-600); }
@media (max-width: 479px) { .spec__row { grid-template-columns: 26px minmax(0, 1fr); row-gap: 6px; } .spec__tag { grid-column: 2; justify-self: start; } }
.spec__perf { position: relative; height: 0; margin: 4px 22px; border-top: 2px dashed var(--line-strong); }
.spec__perf::before, .spec__perf::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--chalk-000); box-shadow: inset 0 0 0 1px var(--ink-a08); }
.spec__perf::before { left: -35px; }
.spec__perf::after { right: -35px; }
.spec__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 18px 22px 22px; }
@media (min-width: 768px) { .spec__total { padding: 20px 28px 26px; } }
.spec__total span { font-size: 14px; color: var(--text-muted); }
.spec__total strong { font: var(--weight-black) 24px/1.1 var(--font-display); letter-spacing: -0.02em; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }

.incl__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.incl__shot { margin: 0; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform 600ms var(--ease-out), box-shadow var(--dur-hover); }
@media (min-width: 960px) {
  .incl__media { display: block; height: 640px; position: sticky; top: calc(var(--header-h) + var(--header-top) + 24px); }
  .incl__shot { position: absolute; width: 72%; box-shadow: var(--shadow-hover); }
  .incl__shot--a { right: 0; top: 0; transform: rotate(2.5deg); z-index: 1; }
  .incl__shot--b { left: 0; bottom: 0; width: 62%; transform: rotate(-3deg); z-index: 2; border: 6px solid var(--white); }
  .incl__media:hover .incl__shot--a { transform: rotate(1deg) translateY(-6px); }
  .incl__media:hover .incl__shot--b { transform: rotate(-1deg) translateY(-6px); }
}
.incl__shot .tile__cap { left: 12px; right: 12px; bottom: 12px; top: auto; }
.incl__shot .tile__cap .chip, .ptile figcaption { white-space: normal; max-width: 100%; line-height: 1.25; }
.ptile figcaption { right: 12px; justify-self: start; width: fit-content; }

/* ---------- How the job runs (navy panel) ---------- */

.runs .panel { padding: 56px 0 48px; }
@media (min-width: 768px) { .runs .panel { padding: 88px 0 80px; } }
.runs .section__head { margin-bottom: var(--space-xl); }
.runs .eyebrow { color: var(--navy-200); }
.runs .t-h2 { color: var(--chalk-000); }
.runs .t-lead { color: var(--paper-a70); max-width: 440px; }
.run { display: none; }
@media (min-width: 960px) { .run { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 22px; } }
.run__end { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-200); }
.run__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.run__seg { position: relative; height: 8px; border-radius: 8px; background: var(--paper-a14); overflow: hidden; transition: box-shadow var(--dur-hover); }
.run__seg::after { content: ""; position: absolute; inset: 0; background: var(--heat); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out); }
.run__seg.is-lit::after { transform: none; }
.run__seg.is-hot { box-shadow: 0 0 0 3px rgba(227, 163, 34, 0.35); }
.stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .stages { grid-template-columns: 1fr 1fr; } .stages .stage:last-child { grid-column: 1 / -1; } }
@media (min-width: 960px) { .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .stages .stage:last-child { grid-column: auto; } }
.stage { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--radius-md); background: var(--paper-a08); border: 1px solid var(--line-on-ink); transition: background var(--dur-hover), border-color var(--dur-hover), transform var(--dur-hover) var(--ease-out); }
.stage:hover, .stage.is-hot { background: var(--paper-a14); border-color: var(--paper-a32); transform: translateY(-4px); }
.stage__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-a14); color: var(--chalk-000); transition: background var(--dur-hover), color var(--dur-hover); }
.stage:hover .stage__ico, .stage.is-hot .stage__ico { background: var(--chalk-000); color: var(--navy-950); }
.stage__ico .ico { width: 22px; height: 22px; }
.stage__num { position: absolute; right: 18px; top: 18px; font: var(--weight-black) 13px/1 var(--font-display); letter-spacing: 0.1em; color: var(--amber-500); }
.stage h3 { font: var(--weight-black) 18px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--chalk-000); margin-top: 4px; }
.stage p { font-size: 14px; line-height: 1.5; color: var(--paper-a70); }
@media (max-width: 639px) {
  .stages { gap: 0; padding-left: 26px; position: relative; }
  .stages::before { content: ""; position: absolute; left: 7px; top: 24px; bottom: 24px; border-left: 2px dashed var(--line-on-ink); }
  .stage { margin-bottom: 10px; }
  .stage::before { content: ""; position: absolute; left: -26px; top: 32px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy-950); border: 2px solid var(--amber-500); }
}

/* ---------- Two story cards and the photo strip ---------- */

@media (min-width: 640px) { .stories--two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .stories--two { grid-template-columns: 1fr 1fr; } .stories--two .story .ba { height: 360px; } }
.stories--two .story:nth-child(n+3) { display: none; }
.pstrip { margin-top: var(--space-xl); }
.pstrip__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.pstrip__title { font: var(--weight-black) 18px/1.2 var(--font-display); color: var(--navy-700); }
@media (min-width: 768px) { .pstrip__title { font-size: 20px; } }
.pstrip__nav { display: flex; gap: 8px; }
.pstrip__btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: var(--navy-700); transition: background var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover), opacity var(--dur-hover); }
.pstrip__btn .ico { width: 18px; height: 18px; }
.pstrip__btn:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--chalk-000); }
.pstrip__btn:disabled { opacity: 0.35; pointer-events: none; }
.pstrip__rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pstrip__rail::-webkit-scrollbar { display: none; }
.ptile { position: relative; flex: 0 0 72%; margin: 0; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; scroll-snap-align: start; background: var(--chalk-200); }
@media (min-width: 560px) { .ptile { flex-basis: 44%; } }
@media (min-width: 960px) { .ptile { flex-basis: calc((100% - 36px) / 4); } }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.ptile:hover img { transform: scale(1.06); }
.ptile figcaption { position: absolute; left: 12px; bottom: 12px; }

/* ---------- Reviews (two quote cards) ---------- */

.srevs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 960px) { .srevs { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-2xl); align-items: start; } }
.srevs__lead { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (min-width: 960px) { .srevs__lead { position: sticky; top: calc(var(--header-h) + var(--header-top) + 24px); } }
.srevs__scores { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.srevs__score { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--ink-a08); box-shadow: var(--shadow-card); transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover); }
.srevs__score:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.srevs__score img { height: 16px; width: auto; }
.srevs__score strong { font: var(--weight-black) 26px/1 var(--font-display); letter-spacing: -0.02em; color: var(--navy-800); }
.srevs__score small { font-size: 14px; color: var(--text-soft); margin-left: 2px; }
.srevs__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .srevs__cards { grid-template-columns: 1fr 1fr; gap: 18px; } }
.qcard { position: relative; padding: 24px; gap: 18px; overflow: hidden; }
.qcard::before { content: "\201C"; position: absolute; right: 14px; top: -18px; font: 140px/1 var(--font-quote); background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.22; pointer-events: none; }
.qcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qcard blockquote { margin: 0; font: var(--weight-medium) 18px/1.45 var(--font-quote); color: var(--ink-900); flex: 1; }
@media (min-width: 768px) { .qcard blockquote { font-size: 19px; } }
.qcard figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.qcard figcaption span { display: grid; gap: 2px; }
.qcard figcaption b { font-size: 14px; color: var(--navy-800); }
.qcard figcaption small { font-size: 12px; color: var(--text-muted); }
.qcard figcaption img { height: 14px; width: auto; flex-shrink: 0; }
.qcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--navy-300); }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 960px) { .faq { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-2xl); align-items: start; } }
.faq__side { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 960px) { .faq__side { position: sticky; top: calc(var(--header-h) + var(--header-top) + 24px); } }
.faq__ask { padding: 20px 24px; display: grid; gap: 6px; }
.faq__ask span { font-size: 14px; color: var(--text-muted); }
.faq__ask a { font: var(--weight-black) 28px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--navy-800); transition: color var(--dur-hover); }
.faq__ask a:hover { color: var(--clay-600); }
.faq__q { display: flex; gap: 14px; align-items: baseline; }
.faq__q i { font: var(--weight-black) 12px/1 var(--font-display); font-style: normal; letter-spacing: 0.08em; color: var(--clay-600); flex-shrink: 0; width: 22px; }
.faq .acc__body { padding-left: 36px; }

/* ---------- Areas strip ---------- */

.astrip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; border-radius: var(--radius-xl); color: var(--chalk-000); box-shadow: var(--shadow-hero); }
@media (min-width: 768px) { .astrip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 28px 32px; } }
.astrip__copy { position: relative; z-index: 1; display: grid; gap: 10px; }
.astrip__eyebrow { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-200); }
.astrip__text { font: var(--weight-black) 20px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--chalk-000); max-width: 620px; }
@media (min-width: 768px) { .astrip__text { font-size: 24px; } }
.astrip__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.astrip__go { position: relative; z-index: 1; justify-self: start; }

/* ---------- Timescale statement card (pages without day ranges) ---------- */

.tstate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px; overflow: hidden; }
@media (min-width: 900px) { .tstate { grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 36px 40px; } }
.tstate__main { display: grid; gap: 10px; }
.tstate__label { font: var(--weight-bold) 12px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.tstate__big { font: var(--weight-black) clamp(44px, 28px + 3.4vw, 76px)/1.08 var(--font-display); letter-spacing: -0.04em; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.tstate__side { display: grid; gap: 10px; }
@media (min-width: 900px) { .tstate__side { padding-left: 40px; border-left: 1px dashed var(--line-strong); } }
.tstate__side .mruler__ticks i { height: 30px; border-radius: 7px; }
.tstate__side p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin-top: 6px; }
.days__foot { margin-top: 14px; font-size: 14px; color: var(--text-muted); max-width: 720px; padding-left: 14px; border-left: 3px solid var(--amber-500); }

/* ---------- List panel (bundled maintenance days) ---------- */

.listp { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 24px; border-radius: var(--radius-xl); color: var(--chalk-000); background: linear-gradient(150deg, #122A45 0%, #1C3A5C 55%, #7A3327 100%); box-shadow: var(--shadow-hero); }
@media (min-width: 900px) { .listp { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 32px 36px; } }
.listp__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--paper-a14); color: var(--chalk-000); }
@media (min-width: 900px) { .listp__ico { width: 64px; height: 64px; } }
.listp__ico .ico { width: 26px; height: 26px; }
.listp__copy { display: grid; gap: 6px; }
.listp__eyebrow { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-200); }
.listp h2 { font: var(--weight-black) clamp(26px, 20px + 1.2vw, 34px)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--chalk-000); }
.listp__copy p:last-child { font-size: 16px; color: var(--paper-a70); }
.listp__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- One story, one review ---------- */

@media (min-width: 768px) {
  .stories--one { grid-template-columns: minmax(0, 1fr); }
  .stories--one .story { display: grid; grid-template-columns: 1.2fr 1fr; }
  .stories--one .story .ba { height: 100%; min-height: 360px; }
  .stories--one .story .card__body { padding: 32px; align-content: center; gap: 14px; }
  .stories--one .story__title { font-size: 26px; }
}
.pstrip--first { margin-top: 0; }
.srevs__cards--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .srevs__cards--one { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
.srevs__cards--one .qcard blockquote { font-size: 20px; }
@media (min-width: 768px) { .srevs__cards--one .qcard { padding: 32px; } .srevs__cards--one .qcard blockquote { font-size: 22px; } }

/* ---------- Maintenance contracts: plans and repair flow ---------- */

.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.plan { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; }
.plan > * { position: relative; z-index: 1; }
.plan > .panel__glow { position: absolute; z-index: 0; }
.plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan__num { font: var(--weight-black) 13px/1 var(--font-display); letter-spacing: 0.1em; color: var(--clay-600); }
.plan__name { font: var(--weight-black) 26px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--navy-700); }
.plan__text { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.plan__pts { display: grid; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.plan__pts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--navy-800); }
.plan__pts .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--navy-050); color: var(--clay-600); }
.plan__go { margin-top: auto; padding-top: 6px; }
.plan--lead { color: var(--chalk-000); background: var(--navy-950); border-color: transparent; box-shadow: var(--shadow-hero); }
.plan--lead .plan__num { color: var(--amber-500); }
.plan--lead .plan__name { color: var(--chalk-000); }
.plan--lead .plan__text { color: var(--paper-a70); }
.plan--lead .plan__pts { border-top-color: var(--line-on-ink); }
.plan--lead .plan__pts li { color: var(--chalk-000); }
.plan--lead .plan__pts .ico { background: var(--paper-a14); color: var(--amber-500); }
.plan--lead .link { color: var(--chalk-000); }
.pflow { margin-top: var(--space-lg); padding: 22px 22px 24px; border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--ink-a08); }
.pflow__title { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.pflow__track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.pflow__track::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--heat); opacity: 0.45; }
.pflow__step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; align-items: center; }
.pflow__dot { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-950); color: var(--chalk-000); font: var(--weight-black) 14px/1 var(--font-display); box-shadow: 0 0 0 5px var(--white); transition: background var(--dur-hover), transform var(--dur-hover) var(--ease-out); }
.pflow__step:hover .pflow__dot { background: var(--clay-600); transform: scale(1.08); }
.pflow__step strong { font: var(--weight-black) 17px/1.2 var(--font-display); color: var(--navy-700); }
.pflow__step > span:last-child { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
@media (min-width: 768px) {
  .pflow { padding: 26px 30px 28px; }
  .pflow__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .pflow__track::before { left: 18px; right: 18px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .pflow__step { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
  .pflow__dot { grid-row: auto; margin-bottom: 8px; }
}

/* ---------- Topic rows (Full House Renovation: insulation and heating) ---------- */

.topics { display: grid; gap: 16px; }
.topic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 14px; border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--ink-a08); scroll-margin-top: calc(var(--header-h) + var(--header-top) + 24px); transition: box-shadow var(--dur-hover), border-color var(--dur-hover); }
.topic:hover { border-color: var(--navy-300); box-shadow: var(--shadow-card); }
.topic__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: 380px; width: 100%; border-radius: var(--radius-lg); margin: 0; }
.topic__media .tile__img { transition: transform 900ms var(--ease-out); }
.topic:hover .topic__media .tile__img { transform: scale(1.04); }
.topic__copy { display: grid; gap: 12px; align-content: center; padding: 4px 8px 10px; }
.topic__num { font: var(--weight-black) 13px/1 var(--font-display); letter-spacing: 0.1em; color: var(--clay-600); }
.topic__title { font: var(--weight-black) clamp(24px, 20px + 0.8vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--navy-700); }
.topic__copy > p { font-size: 16px; line-height: 1.65; color: var(--text-muted); max-width: 560px; }
.topic__copy > p a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-hover); }
.topic__copy > p a:hover { color: var(--clay-600); }
.topic .plan__pts { padding-top: 14px; }
.topic .link { justify-self: start; margin-top: 4px; }
@media (min-width: 900px) {
  .topic { grid-template-columns: 0.85fr 1.15fr; gap: 40px; padding: 16px; align-items: center; }
  .topic--flip { grid-template-columns: 1.15fr 0.85fr; }
  .topic--flip .topic__media { order: 2; }
  .topic__copy { padding: 8px 16px 8px 0; }
  .topic--flip .topic__copy { padding: 8px 0 8px 16px; }
}
@media (max-width: 399px) {
  .sfacts { grid-template-columns: minmax(0, 1fr); }
  .sfacts > div, .sfacts > div + div { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .sfacts dt { flex-shrink: 0; font-size: 20px; }
  .sfacts dd { margin: 0; }
}

/* ---------- More work in the same trade, under the written quote (27 October 2026, from tools/trades-data.js) ---------- */

.more { display: grid; gap: 14px; margin-top: 20px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--navy-050); border: 1px solid var(--line); }
.more__head { font: var(--weight-black) 17px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--navy-800); }
.more__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
@media (max-width: 479px) { .more__list { grid-template-columns: minmax(0, 1fr); } }
.more__list li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--ink-900); }
.more__list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid var(--clay-600); border-bottom: 2px solid var(--clay-600); transform: rotate(-45deg); }
.more__note { font-size: 12.5px; color: var(--text-muted); }

/* Mobile type scale: normal-case small text at least 12px */
@media (max-width: 599px) { .spec__tag, .mruler__scale { font-size: 12px; } }

/* ---------- Links to other areas and towns (shared by service, area and town pages) ---------- */

.oareas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--space-lg); }
.oareas__label { font: var(--weight-bold) 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.oareas a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: var(--weight-semibold); color: var(--navy-800); transition: background var(--dur-hover), border-color var(--dur-hover), color var(--dur-hover); }
.oareas a:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--chalk-000); }

/* ---------- What affects the cost (no prices) ---------- */

.cost { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 960px) { .cost { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: start; } }
.cost__head { display: flex; flex-direction: column; gap: 16px; }
.cost__list { display: grid; list-style: none; padding: 0; margin: 0; }
.cost__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.cost__list li:last-child { border-bottom: 1px solid var(--line); }
.cost__num { font: var(--weight-black) 14px/1.5 var(--font-display); color: var(--clay-600); }
.cost__list h3 { font: var(--weight-bold) 18px/1.3 var(--font-display); color: var(--navy-700); }
.cost__list p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }