/* Service pages (/renovations, /kitchens, ...) — layered on site.css.
   Two hard rules here:
   1. No JavaScript. These pages carry no <html class="js">, so site.css's
      `.js .rv{opacity:0}` never applies and nothing starts hidden. The FAQ is
      <details>/<summary>, which opens without script. What curl sees is what a
      reader sees.
   2. Reuse site.css tokens only — same fonts, same forest/gold/cream palette,
      so a service page reads as the same site as the home page. */

body.svcpage { background: var(--cream); }
body.svcpage main { display: block; }

/* the nav on these pages is solid from the start — there is no dark hero */
body.svcpage nav#nav.solid { position: fixed; }

/* WHY THIS BLOCK EXISTS — do not delete it.
   css/site.css line 43 styles the BARE element:
     nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;
         align-items:center;justify-content:space-between;padding:16px 38px;transition:.4s}
   It was written for John's one header, but it is not class-scoped, so EVERY
   <nav> on a service page — the breadcrumb, the services grid — was yanked to
   the top of the viewport at z-index 60 and landed on top of the logo and the
   "Request a consult" button. That rule styles the live home page, so it is not
   ours to narrow. Instead: every <nav> here that is not the header undoes it.
   Layout for those navs lives on an inner element (.svcgrid) or on inline
   children, so nothing has to fight this reset's display:block. */
body.svcpage nav:not(#nav) {
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  display: block; align-items: normal; justify-content: normal;
  padding: 0; transition: none;
}

/* ---------------------------------------------------------------- hero */
.svc-hero { padding: 132px 0 0; background: var(--cream); }
.crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.crumbs > * + * { margin-left: 4px; }
.crumbs a:hover { color: var(--gold); }
.svc-hero h1 { font-size: clamp(34px, 6vw, 68px); font-weight: 500; margin: 14px 0 20px; max-width: 20ch; }
.svc-lede { font-size: clamp(17px, 2.1vw, 21px); font-weight: 300; max-width: 58ch; color: #3a4640; }
.svc-creds { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 30px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.svc-creds span { position: relative; }
.svc-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.svc-hero .btn-line { border-color: var(--line); color: var(--ink); }
.svc-hero .btn-line:hover { background: rgba(22, 32, 27, .05); }
.svc-heroimg { margin-top: 54px; position: relative; width: 100%; aspect-ratio: 3 / 1; overflow: hidden; background: linear-gradient(150deg, #4a5a52, #26211a); }
.svc-heroimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .svc-heroimg { aspect-ratio: 3 / 2; } .svc-hero { padding-top: 104px; } }

/* -------------------------------------------------------------- sections */
body.svcpage section { padding: 92px 0; }
body.svcpage .shead { margin-bottom: 42px; }
body.svcpage .shead h2 { font-size: clamp(30px, 4.4vw, 52px); }

.svc-intro { padding-bottom: 0 !important; }
.svc-intro p { font-size: clamp(17px, 2vw, 20px); font-weight: 300; max-width: 68ch; margin-bottom: 20px; color: #33403a; }

.svc-inc { background: var(--paper); }
.incgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px 40px; }
.inc { border-top: 1px solid var(--line); padding-top: 16px; }
.inc b { display: block; font-family: var(--disp); font-size: 22px; font-weight: 500; margin-bottom: 7px; }
.inc span { display: block; color: var(--muted); font-size: 15.5px; }

/* project cards — same copy as the home-page modal, but readable without JS */
.pgridw { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.pcard { border: 1px solid var(--line); background: #fff; }
.pcard-img { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(150deg, #4a5a52, #26211a); }
.pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-b { padding: 24px 26px 28px; }
.pcard-b h3 { font-size: 26px; margin-bottom: 6px; }
.pcard-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.pcard-b p { font-size: 15.5px; color: #3a4640; }
.pcard-b ul { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.pcard-b ul li { font-size: 14px; color: var(--muted); padding-left: 18px; position: relative; margin-bottom: 6px; }
.pcard-b ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
body.svcpage .note { margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
body.svcpage .note a:hover { color: var(--gold); }

.svc-price { background: var(--paper); }
.big2 { font-family: var(--disp); font-size: clamp(21px, 2.6vw, 28px); font-weight: 400; line-height: 1.4; max-width: 62ch; margin-bottom: 46px; }

.proclist { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px 36px; }
.proclist li { counter-increment: s; border-top: 1px solid var(--line); padding-top: 16px; }
.proclist li::before { content: "0" counter(s); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--gold); margin-bottom: 10px; }
.proclist b { display: block; font-family: var(--disp); font-size: 21px; font-weight: 500; margin-bottom: 6px; }
.proclist span { color: var(--muted); font-size: 15px; }

.svc-area { background: var(--paper); }
body.svcpage .towns { display: flex; flex-wrap: wrap; gap: 10px 12px; }
body.svcpage .town { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); padding: 9px 15px; color: var(--ink); }

/* FAQ — <details> so it works with JS switched off */
.faqlist { border-top: 1px solid var(--line); max-width: 82ch; }
.faqlist details { border-bottom: 1px solid var(--line); }
.faqlist summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-family: var(--disp); font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; position: relative; }
.faqlist summary::-webkit-details-marker { display: none; }
.faqlist summary::after { content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: var(--body); font-size: 20px; }
.faqlist details[open] summary::after { content: "－"; }
.faqlist details p { padding: 0 0 24px; color: #3a4640; font-size: 16px; max-width: 74ch; }

/* Six services, so the column count has to divide six. auto-fit gave four
   columns at 1440 and left two dead grey cells (the .line background showing
   through the 1px gaps). Fixed counts instead: 3 / 2 / 1. */
.svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svcgrid a { display: block; background: var(--cream); padding: 24px 26px; transition: .25s; }
.svcgrid a:hover { background: #fff; }
.svcgrid b { display: block; font-family: var(--disp); font-size: 23px; font-weight: 500; margin-bottom: 6px; }
.svcgrid span { display: block; color: var(--muted); font-size: 14.5px; }
@media (max-width: 1000px) { .svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svcgrid { grid-template-columns: 1fr; } }

/* the umbrella page's grid sits high, on the cream ground, between two paper sections */
.svc-index { background: var(--cream); }

.svc-cta-band { background: var(--forest2); color: var(--cream); }
.svc-cta-band h2 { font-size: clamp(32px, 5vw, 58px); font-weight: 500; margin: 14px 0 18px; color: var(--cream); }
.svc-cta-band p { color: #cdd6cb; font-size: 17px; max-width: 52ch; font-weight: 300; margin-bottom: 26px; }
.svc-cta-band .btn-line { color: var(--cream); }
.info2 { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--gold2) !important; margin-top: 26px; }
.info2 a:hover { color: var(--cream); }

/* The footer link row — the secondary path to the seven pages. It was written
   for site.css line 33 (dark footer, --stone text), but line 260 overrides the
   footer to --paper, so --stone on cream came out at about 1.3:1 and was barely
   readable. Match .fdetail instead: --muted, centred, gold on hover. */
.fservices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.fservices a { color: var(--muted); }
.fservices a:hover { color: var(--gold); }

/* the home page's floating consult button and chat bubble are JS-driven; the
   service pages carry a plain CTA band instead, so nothing here needs script */
