/* ============================================================
   Service pages.
   Everything visual is borrowed from styles.css — .sect-title,
   .outline, .btn, .acc-item, .discover__grid, --section-spacing.
   This file only adds layout the homepage has no equivalent for.
   ============================================================ */

.svc{padding-top:var(--header-h)}

/* breadcrumb */
.crumbs{padding:1.1rem 0 0;font-size:var(--fs-sm);color:var(--navy);font-weight:600}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{opacity:.4;margin-inline:.4rem}
.crumbs [aria-current]{opacity:.65;font-weight:500}

/* ── hero ─────────────────────────────────────────────────── */
.svc-hero{padding-block:clamp(1.5rem,3vw,3rem) var(--section-spacing)}
.svc-hero__inner{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.svc-eyebrow{
  font-weight:700;font-size:var(--fs-sm);color:var(--gold);
  margin:0 0 .7rem;letter-spacing:.01em;
}
/* h1 sits between the homepage h1 and h2 in scale */
.svc-h1{font-size:clamp(2rem,1.3rem + 2.4vw,3.6rem);margin:0}
.svc-hero .sect-lede{margin-top:1.2rem;max-width:54ch}
.svc-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.svc-reassure{margin:1.1rem 0 0;font-size:var(--fs-sm);opacity:.72;max-width:46ch}
.svc-hero__img{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:7/5;box-shadow:var(--shadow-md)}
.svc-hero__img img{width:100%;height:100%;object-fit:cover}

/* ── body: article + sticky rail, on the alternating tint ──── */
.svc-body{background:var(--off);padding-block:var(--section-spacing)}
.svc-body__inner{
  display:grid;grid-template-columns:minmax(0,1fr) 20rem;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
.svc-main{min-width:0}
.svc-block{margin-bottom:clamp(2rem,3.5vw,3.25rem)}
.svc-block:last-child{margin-bottom:0}
.svc-block h2{
  font-size:clamp(1.3rem,1.05rem + .7vw,1.85rem);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;
  margin-bottom:.9rem;color:var(--navy);
}
.svc-block p{max-width:68ch}
.svc-block--faq .sect-head{margin-bottom:1.25rem}

/* lists */
.svc-list{margin:0 0 1em;padding:0;display:grid;gap:.65rem;max-width:68ch}
.svc-list li{position:relative;padding-left:1.55rem}
.svc-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);
}
.svc-steps{margin:0 0 1em;padding-left:0;counter-reset:step;display:grid;gap:.9rem;max-width:68ch}
.svc-steps li{position:relative;padding-left:2.7rem;list-style:none}
.svc-steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:-.15em;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:700;
}

.svc-fig{margin:0 0 clamp(2rem,3.5vw,3rem);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.svc-fig img{width:100%;height:auto;display:block;aspect-ratio:7/5;object-fit:cover}
.svc-fig figcaption{
  padding:.8rem 1rem;background:var(--navy);color:#fff;
  font-size:var(--fs-sm);line-height:1.45;
}

/* ── FAQ: <details> dressed as the homepage accordion ─────── */
.accordion--faq{gap:.75rem}
.faq{overflow:hidden}                    /* .acc-item supplies border/radius/bg */
.faq > .acc-head{list-style:none;cursor:pointer}
.faq > .acc-head::-webkit-details-marker{display:none}
/* each open FAQ box cycles through the logo's 5 arc colours, same pattern
   as the hero trust-chips -- teal by default, then sky/purple/rose/gold
   in document order, repeating every 5 items. */
.faq[open]{background:var(--chip-c,var(--teal));border-color:var(--chip-c,var(--teal))}
.faq:nth-of-type(5n+2)[open]{--chip-c:var(--sky)}
.faq:nth-of-type(5n+3)[open]{--chip-c:var(--purple)}
.faq:nth-of-type(5n+4)[open]{--chip-c:var(--rose)}
.faq:nth-of-type(5n+5)[open]{--chip-c:var(--gold)}
.faq[open] > .acc-head{color:#fff;padding-bottom:.35rem}
/* reuse .acc-icon's plus, and turn it into a minus when open */
.faq[open] .acc-icon::after{transform:rotate(90deg);opacity:0}
.faq > .acc-body__inner{
  padding:0 clamp(1.1rem,1.8vw,2rem) clamp(1.25rem,2vw,2rem);
}
.faq[open] .acc-body__inner p{color:#fff;margin:0}

/* ── sector card rail (homepage .discover__grid, plus body copy) ── */
.svc-sectors{padding-block:var(--section-spacing)}
.svc-sectors .sect-head{align-items:flex-start}
.svc-sectors .sect-lede{margin-top:0;max-width:46ch}
.svc-sectors .discover__grid li{background:var(--bg)}
.svc-sectors .discover__body{display:block}
.svc-sectors .discover__body h3{margin:0 0 .55rem;font-size:var(--fs-h3)}
.svc-sectors .discover__body p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:#fff}

/* ── accordion + image panel (homepage .services__layout) ──────── */
.svc-detail{padding-block:var(--section-spacing);background:var(--off)}
.svc-detail .sect-title{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
/* the lead panel is permanently open, so it is a div rather than <details> */
.svc-detail__lead{background:var(--navy);border-color:var(--navy)}
.svc-detail__lead .acc-head{color:#fff;padding-bottom:.35rem;cursor:default}
.svc-detail__lead .acc-body__inner{
  padding:0 clamp(1.1rem,1.8vw,2rem) clamp(1.25rem,2vw,2rem);
}
.svc-detail__lead .acc-body__inner p{color:#fff;margin:0 0 1em;max-width:none}
.svc-detail__lead .acc-body__inner p:last-child{margin-bottom:0}
.svc-detail__media{aspect-ratio:566/379}
.svc-detail__media img{width:100%;height:100%;object-fit:cover}

/* ── town pages (homepage-clone layout) ───────────────────── */
/* main no longer carries .svc padding, so the breadcrumb must clear the
   fixed header itself; the hero then only needs modest spacing of its own */
main > .crumbs:first-child{padding-top:calc(var(--header-h) + 1.1rem)}
/* .svc mains already clear the fixed header with their own padding — without
   this override the rule above cleared it a second time, leaving a dead band
   above every service/about/why breadcrumb */
.svc > .crumbs:first-child{padding-top:1.1rem}
.hero--town{padding-top:clamp(1rem,2vw,2rem)}
.hero__cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 1.9rem}
.join__sub{font-size:var(--fs-h3);margin:1rem 0 .4rem;color:var(--navy)}
.join__areas-label{margin:1rem 0 .2rem}
.town-faq{padding-block:var(--section-spacing);background:var(--off)}
/* FAQ cards on town pages show the answer on the card, so the FAQPage
   schema matches what a visitor can actually read */
.news-card__ans{color:#fff;font-size:var(--fs-sm);line-height:1.65;margin:.7rem 0 0;opacity:.95}

/* ── town pages ───────────────────────────────────────────── */
.town-pills{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0;padding:0;list-style:none;
}
.town-pills li{
  padding:.42rem .85rem;border-radius:999px;
  background:#fff;border:1px solid var(--navy-10);
  font-size:var(--fs-sm);font-weight:600;color:var(--navy);
}
/* same pill, but as a link (the "Areas We Cover" list on service/guide/why
   pages) -- :has() lets the plain-text version above keep working
   untouched while a linked li gets its padding moved onto the anchor. */
.town-pills li:has(a){padding:0}
.town-pills li a{
  display:block;padding:.42rem .85rem;border-radius:999px;
  color:inherit;text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.town-pills li a:hover,.town-pills li a:focus-visible{background:var(--navy);color:#fff}
/* the areas index has no images, so let the cards size to their text */
.areas__grid li .discover__body{min-height:0}
.areas__grid .discover__body p{margin:.35rem 0 .9rem;font-size:var(--fs-sm);opacity:.85}

/* ── closing CTA band ─────────────────────────────────────── */
.svc-final{background:var(--navy);padding-block:var(--section-spacing);color:#fff}
.svc-final .sect-title{color:#fff}
/* Solid gold, not hollow. -webkit-text-stroke centres the stroke on the glyph
   edge, so with a transparent fill half of it eats inward: on a heavy face the
   counters in O, U and R close up and the comma turns to a smudge, which reads
   as a rendering glitch. The light pages avoid this because .outline keeps a
   solid fill there. Two-tone gold and white does the same job cleanly. */
.svc-final .outline{
  -webkit-text-stroke:0;
  -webkit-text-fill-color:var(--gold);
  color:var(--gold);
}
.svc-final p{max-width:56ch;margin:1.1rem 0 0;color:#fff}
.svc-final .svc-cta{margin-top:1.6rem}

.svc-more{padding-block:var(--section-spacing)}
.svc-more .discover__body h3{margin:0}
/* Do NOT set grid-template-columns here. Below 640px styles.css turns
   .discover__grid into a swipe rail (grid-auto-flow:column, 88% auto columns,
   overflow-x:auto). Adding an explicit track leaves an empty 0px column and
   collapses the first card to zero width. Cards sitting off-screen in that
   rail are intended — the container scrolls, the page doesn't. */

@media (max-width:1024px){
  .svc-hero__inner{grid-template-columns:minmax(0,1fr)}
  .svc-hero__img{order:-1;aspect-ratio:16/9}
  .svc-body__inner{grid-template-columns:minmax(0,1fr)}
  .svc-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
}
@media (min-width:1025px){
  .svc-side{position:sticky;top:calc(var(--header-h) + 1rem);display:grid;gap:1rem}
}
@media (max-width:640px){
  .svc-side{grid-template-columns:1fr}
  .svc-cta .btn{flex:1 1 100%;justify-content:center}
}

/* sidebar cards */
.svc-card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm)}
.svc-card--plain{background:#fff;color:var(--ink)}
.svc-card__label{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  opacity:.7;margin:0 0 .55rem;
}
.svc-card__phone{
  display:block;font-size:clamp(1.35rem,1.1rem + .7vw,1.7rem);
  font-weight:800;letter-spacing:-.02em;color:var(--gold);margin-bottom:.6rem;
}
.svc-card__phone:hover{color:#fff}
.svc-card__note{font-size:var(--fs-sm);opacity:.85;margin-bottom:1.1rem}
.svc-card--plain p{margin:0;font-size:var(--fs-sm)}

/* White fill on a pale background carries almost no contrast, so the whole
   letterform depends on the stroke. Thinning it for the smaller heading size
   made these harder to read, not lighter. A heavier stroke and a fill tinted
   off pure white give the letters an edge and some body. */
.svc-block h2 .outline{
  -webkit-text-stroke-width:2.2px;
  -webkit-text-stroke-color:var(--navy);
  -webkit-text-fill-color:#f4f9fd;
  color:#f4f9fd;
  paint-order:stroke fill;
}

/* A FAQ panel with no image beside it. .services__layout is a two-column grid;
   left as-is a single child sits in the left half with dead space to its right. */
.services__layout--single{grid-template-columns:minmax(0,1fr)}

/* The areas index opts out of the swipe rail.
   styles.css turns .discover__grid into a single horizontal row below 1500px,
   which suits the homepage carousels of four cards and is wrong for a town
   index of twenty: it becomes ten swipes to find your own town. Opting out
   means resetting grid-auto-flow to row FIRST. Setting grid-template-columns
   while the flow is still column is the trap the note above describes -- the
   tracks are treated as fixed columns to fill down, and the first card
   collapses. Resetting the flow, the auto-columns and the scroll behaviour
   together avoids it. */
@media (max-width:1500px){
  .areas__grid{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    overflow-x:visible;
    scroll-snap-type:none;
    padding-bottom:0;
  }
}

/* ── pricing cards (about/pricing.html) ────────────────────── */
.price-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  margin:1.5rem 0;
}
.price-card{
  background:#fff;border:1px solid var(--navy-10);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:1.6rem 1.4rem;text-align:center;
}
.price-card__label{
  font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--navy);opacity:.65;margin:0 0 .6rem;
}
.price-card__amount{
  font-size:clamp(2.1rem,1.7rem + 1.4vw,2.75rem);font-weight:800;
  letter-spacing:-.02em;color:var(--navy);margin:0;line-height:1;
}
.price-card__unit{
  font-size:.85rem;font-weight:600;color:var(--navy);opacity:.7;
  margin:.5rem 0 0;
}
.price-card__note{
  font-size:.875rem;line-height:1.5;color:var(--navy);opacity:.85;
  margin:.75rem 0 0;
}
@media (max-width:760px){
  .price-cards{grid-template-columns:1fr}
}