/* ============================================================
   Legacy Heating & Plumbing — main stylesheet
   Palette drawn from the logo: deep navy pipe blue + flame orange
   ============================================================ */

:root {
  --navy-900: #081a30;
  --navy-800: #0e2a4e;
  --navy-700: #123059;
  --navy-600: #1b4177;
  --orange-600: #d93a0c;
  --orange-500: #e8500f;
  --orange-400: #f6821f;
  --ink: #16212e;
  --ink-soft: #4b5a6b;
  --paper: #ffffff;
  --paper-tint: #f4f6f9;
  --line: #e2e8f0;
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(8, 26, 48, .08);
  --shadow-md: 0 10px 30px -10px rgba(8, 26, 48, .18);
  --shadow-lg: 0 24px 60px -20px rgba(8, 26, 48, .35);
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--navy-800);
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--orange-600); }

.container {
  width: min(1160px, calc(100% - 2.5rem));
  margin-inline: auto;
}
.container-narrow { width: min(820px, calc(100% - 2.5rem)); }

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-tint { background: var(--paper-tint); }

.section-dark {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(232, 80, 15, .16), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: #d7e1ee;
}
.section-dark h2, .section-dark h3 { color: #fff; }

.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* used where the section head sits above a two-column layout, so it
   doesn't read as a label for whatever happens to be in the left column */
.section-head-centred { margin-inline: auto; text-align: center; }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; }
.section-dark .section-sub { color: #a9bacf; }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange-500);
  margin-bottom: .6em;
}
/* Every eyebrow uses the same copper. This needs the extra specificity
   because `.section-dark .split-copy > p` sets the body-copy colour on
   every direct <p> in those columns — which was quietly winning over
   `.eyebrow` and turning the ones on the dark sections pale grey. */
.section-dark .split-copy > p.eyebrow { color: var(--orange-500); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(217, 58, 12, .55);
}
.btn-primary:hover { box-shadow: 0 12px 26px -8px rgba(217, 58, 12, .7); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.btn-call {
  background: var(--navy-800);
  color: #fff;
  padding: .6rem 1.15rem;
  font-size: .95rem;
  white-space: nowrap;
}
.btn-call:hover { background: var(--navy-600); }

.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .65rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}
.brand-mark { width: 48px; height: 48px; object-fit: contain; }

.site-footer .brand-mark {
  background: #fff;
  border-radius: 50%;
  padding: 6px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: var(--navy-800);
}
.brand-tag {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--orange-500);
}

.site-nav { display: flex; gap: 1.6rem; }
.site-nav a {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { color: var(--orange-600); }

.header-cta { display: flex; align-items: center; gap: .75rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy-800);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(900px 500px at 15% -20%, rgba(27, 65, 119, .55), transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, rgba(232, 80, 15, .28), transparent 55%),
    linear-gradient(155deg, var(--navy-800) 20%, var(--navy-900));
  color: #fff;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero h1 { color: #fff; margin-bottom: .4em; }
.hero .accent {
  background: linear-gradient(100deg, var(--orange-400), var(--orange-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  color: #ffd9a8;
  background: rgba(232, 80, 15, .14);
  border: 1px solid rgba(246, 130, 31, .35);
  padding: .45rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-400);
  box-shadow: 0 0 0 4px rgba(246, 130, 31, .25);
}

.lede { font-size: 1.15rem; color: #c3d0e0; max-width: 34em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.8rem 0 1.6rem; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: .92rem;
  font-weight: 600;
  color: #9fb3ca;
}

/* hero right panel */
.hero-panel { position: relative; display: grid; justify-items: center; }

.hero-badge {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.hero-badge img {
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.hero-badge-line {
  margin: 1.1rem 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffd9a8;
}

.hero-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  padding: .6rem .85rem;
  box-shadow: var(--shadow-lg);
  font-size: .78rem;
  line-height: 1.3;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.hero-card strong { display: block; font-family: var(--font-head); font-size: .88rem; color: var(--navy-800); }
.hero-card span:not(.hero-card-icon) { color: var(--ink-soft); }
.hero-card-icon { font-size: 1.3rem; }

.hero-card-1 { top: -7%; left: -6%; animation-delay: 0s; }
.hero-card-2 { bottom: -13%; right: -4%; animation-delay: 2s; }
.hero-card-3 { bottom: -13%; left: -4%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- Trust bar ---------- */

.trust-bar { background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.08); }

.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: 1.4rem;
}

.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; }
.trust-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--orange-400);
}
.trust-label { font-size: .82rem; color: #8fa3bc; }

/* ---------- Emergency strip ---------- */

.emergency-strip {
  background: linear-gradient(100deg, var(--orange-600), var(--orange-400));
  color: #fff;
}
.emergency-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}
.emergency-inner p { margin: 0; font-size: 1.02rem; }
.emergency-inner strong { font-family: var(--font-head); }

.btn-emergency {
  background: #fff;
  color: var(--orange-600);
  padding: .65rem 1.3rem;
  white-space: nowrap;
}
.btn-emergency:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4); }

/* ---------- Cards / grids ---------- */

.grid { display: grid; gap: 1.4rem; }
.services-grid { grid-template-columns: repeat(3, 1fr); }
.reviews-grid { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  /* These durations apply on the way OUT. Leaving is slower than
     arriving, so the card settles back rather than snapping. */
  transition:
    transform .42s cubic-bezier(.22, .8, .3, 1),
    box-shadow .46s cubic-bezier(.22, .8, .3, 1),
    border-color .5s cubic-bezier(.22, .8, .3, 1);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #cdd7e2;
  /* and these on the way in — quick enough to feel responsive */
  transition-duration: .26s, .3s, .34s;
}

.service-card { display: flex; flex-direction: column; }
.service-card p { color: var(--ink-soft); font-size: .95rem; flex-grow: 1; }

.service-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 1.1rem;
  color: var(--orange-500);
  background: linear-gradient(135deg, rgba(246, 130, 31, .14), rgba(217, 58, 12, .1));
  border: 1px solid rgba(232, 80, 15, .22);
}

.card-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  color: var(--navy-700);
}
.card-link:hover { color: var(--orange-600); }
.card-link span { transition: transform .15s ease; display: inline-block; }
.card-link:hover span { transform: translateX(3px); }

.services-note { margin-top: 2rem; color: var(--ink-soft); text-align: center; }

/* ---------- Split sections ---------- */

.split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.section-dark .split-copy > p { color: #b9c7d8; }

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 1rem;
}
.check-list li {
  position: relative;
  padding-left: 2.1rem;
  color: #b9c7d8;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
}
.check-list strong { color: #fff; }

.split-panel { display: grid; gap: 1rem; }

/* ---------- The logo on a plate, beside "Why Legacy" ----------
   The right-hand column is the brand mark rather than a drawing, so the
   two columns go back to roughly even: the plate is a fixed object and
   gains nothing from extra width, while the copy does. */

.split-plate { grid-template-columns: 1.05fr .95fr; align-items: center; }

.logo-plate { position: relative; display: grid; justify-items: center; }

.logo-plate-face {
  position: relative;
  width: min(100%, 24rem);
  padding: 2.2rem;
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.logo-plate-face img {
  display: block;
  width: min(300px, 78%);
  height: auto;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

/* ---------- Reviews: one centred column ----------
   The carousel shows one review at a time, so the column is held to a
   comfortable measure and centred under the heading rather than run the
   full width of the section. */
.reviews-layout { display: block; }

/* ---------- Reviews carousel ----------
   Progressive enhancement: without JavaScript the reviews stay as the
   three-column grid below. main.js adds .is-carousel and wraps the cards
   in a track. */

.reviews-grid.is-carousel {
  display: block;
  position: relative;
  gap: 0;
  overflow: hidden;
  /* The peeked reviews are cut off mid-sentence, which looks like text
     bleeding out of the box unless they fade as they go. main.js sets
     --peek to how much of a neighbour is actually showing, so the fade
     covers exactly that and stops at the current card's edge — and on a
     phone, where nothing peeks, --peek is 0 and the mask does nothing. */
  --peek: 0px;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--peek), #000 calc(100% - var(--peek)), transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--peek), #000 calc(100% - var(--peek)), transparent 100%);
}

.reviews-track {
  display: flex;
  transition: transform .8s cubic-bezier(.32, .72, .3, 1);
  /* keeps the row on its own compositing layer, so moving it doesn't
     re-rasterise the text on every frame */
  will-change: transform;
}

/* the instant jump back to the middle copy, and the resize reflow:
   nothing here should animate, the track's move or the slides' fades */
.reviews-track.is-snapping,
.reviews-track.is-snapping .reviews-slide { transition: none; }

/* One slide is the width of the FAQ list below plus its own gutters, so
   the review in the middle lines up with the questions underneath it. On
   a wide screen the rest of the row is the previous and next reviews,
   dimmed: the band is filled, and it is obvious at a glance that there is
   more than one review — which the dots only say quietly. */
.reviews-slide {
  flex: 0 0 min(100%, calc(820px + 1.4rem));
  padding-inline: .7rem;
}

/* Nothing here changes brightness. Dimming the neighbours by fading the
   current slide up from half opacity meant the middle of the screen
   pulsed on every change — the card arrived washed out and brightened
   into place, which reads as a flicker. The edge fade below does the
   same job by position instead: a review is dim because of where it is,
   not because of a state it animates into, so the only thing that ever
   moves is the row. */
/* so a short review still fills the row's height rather than floating */
.reviews-slide .review-card { height: 100%; }
/* One card on its own, centred: with nothing beside it, ragged-left text
   and a name tucked at the bottom-left read as an off-centre column. */
.reviews-grid.is-carousel .review-card {
  flex: 0 0 100%;
  min-width: 0;
  align-items: center;
  /* All three cards share the height of the longest review. Centred
     vertically, the shorter ones read as deliberately set; pushed apart
     by a grown blockquote they just look like a gap. */
  justify-content: center;
  text-align: center;
  gap: .9rem;
  padding: 2.2rem clamp(1.6rem, 4vw, 3rem);
}
/* The card is as wide as the FAQ list, but the quote inside it is held to
   a readable measure — full-width centred text is hard to track back to
   the start of the next line. */
.reviews-grid.is-carousel .review-card blockquote {
  font-size: 1.03rem;
  max-width: 36rem;
  flex-grow: 0;
}

/* The carousel has to clip to its own box for the slide to work, so a
   card that lifts on hover gets its top edge cut off. Nothing here is
   clickable either — the lift was inviting a click that isn't there. The
   border still warms up, which is worth keeping: hovering pauses the
   rotation, and the change says so. */
.reviews-grid.is-carousel .review-card:hover { transform: none; }

/* arrows and dots share one row: the arrows are mostly there to say
   "there is more than one of these" */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.carousel-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: .45;
  cursor: pointer;
  transition: opacity .3s ease, color .3s ease, transform .3s ease,
              background-color .3s ease;
}
.carousel-arrow:hover {
  opacity: 1;
  color: var(--orange-500);
  background: rgba(232, 168, 120, .1);
}
.carousel-arrow:active { transform: scale(.94); }
.carousel-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
}
.carousel-arrow svg { width: 18px; height: 18px; display: block; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: .55rem;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: currentColor;
  opacity: .3;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
.carousel-dot:hover { opacity: .6; }
.carousel-dot.is-on {
  opacity: 1;
  color: var(--orange-500);
  transform: scale(1.3);
}
.carousel-dot:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
  opacity: 1;
}

.stat-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  display: grid;
  gap: .3rem;
}
.stat-big {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--orange-400);
}
.stat-small { font-size: .92rem; color: #a9bacf; }

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem 1.5rem;
}
.step h3 { margin-top: .9rem; }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.step-num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
  box-shadow: 0 6px 14px -6px rgba(14, 42, 78, .5);
}

/* ---------- "How it works", folded into the Why Legacy section ----------
   Deliberately not cards: this sits inside a section that already has
   cards down its right-hand side, and a second row of them read as a
   separate section, which is what we were trying to get rid of. */

.how-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.how-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--orange-400);
  margin-bottom: 1.4rem;
}

.steps-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 2rem;
}
.steps-inline li { display: flex; gap: .9rem; align-items: flex-start; }
.steps-inline .step-num { flex-shrink: 0; width: 34px; height: 34px; font-size: .95rem; }
.steps-inline strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  color: #fff;
  margin-bottom: .15rem;
}
.steps-inline span { font-size: .92rem; color: #a9bacf; }

/* ---------- Service area, folded into the contact section ---------- */

.area-block {
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.area-block h3 { font-size: 1.05rem; margin-bottom: .4em; }
.area-block p { font-size: .95rem; color: #a9bacf; margin-bottom: 1rem; }

.section-dark .area-chips li {
  color: #d7e1ee;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}

/* ---------- Reviews ---------- */

.review-card { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.stars { color: #f5a623; letter-spacing: .15em; font-size: 1.05rem; }
.review-card blockquote {
  margin: 0;
  font-size: .97rem;
  color: var(--ink);
  flex-grow: 1;
}
.review-card figcaption {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ---------- Area chips ---------- */

.area-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.area-chips li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy-700);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  padding: .5rem 1.1rem;
  border-radius: 999px;
}

/* ---------- FAQ ----------
   The FAQ shares the reviews section rather than having one of its own,
   so any section background (the graph paper, in the Workshop themes)
   runs unbroken through both. This margin replaces the padding the two
   sections used to have between them. */

.faq-block { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Two columns from the same width the reviews row uses. Six questions in
   one narrow column left a tall, thin section with empty ground either
   side; in two they fill the band and the section stops running on.
   Opening one only pushes the rest of its own column down. */
.faq-list {
  display: grid;
  gap: .8rem 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.4rem;
  box-shadow: var(--shadow-sm);
}
.faq-item {
  transition: border-color .45s cubic-bezier(.22, .8, .3, 1),
              background-color .45s cubic-bezier(.22, .8, .3, 1);
}
.faq-item:hover { transition-duration: .3s, .3s; }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-800);
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary:hover { color: var(--orange-600); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 4px;
  border-radius: 4px;
}

/* the answer fades in rather than appearing with the height change */
.faq-item[open] p { animation: faq-answer-in .3s ease both; }
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--orange-500);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { color: var(--ink-soft); padding-bottom: 1.2rem; margin: 0; font-size: .97rem; }

/* The FAQ used to stop dead at the last question. This gives the section
   somewhere to go — and the questions people don't find here are exactly
   the ones worth a phone call. Dashed, not solid: on a page of drawings a
   dashed rule reads as annotation rather than as another card. */
.faq-cta {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: 1.4rem 1.6rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
  text-align: center;
}
.faq-cta p { margin: 0; color: var(--ink-soft); }
.faq-cta strong { color: var(--ink); }
.faq-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Contact ---------- */

.split-contact { align-items: stretch; }

.contact-methods { display: grid; gap: .8rem; margin: 1.6rem 0; }

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #d7e1ee;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.35;
  transition: background .42s cubic-bezier(.22, .8, .3, 1),
              border-color .42s cubic-bezier(.22, .8, .3, 1);
  min-width: 0;
}
.contact-method:hover { transition-duration: .28s, .28s; }
.contact-method > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.contact-method:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.contact-method strong { color: #fff; font-family: var(--font-head); }

.contact-method-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--orange-400);
  background: rgba(232, 80, 15, .14);
  border: 1px solid rgba(246, 130, 31, .3);
}

.hours { color: #a9bacf; font-size: .95rem; }
.hours strong { color: #fff; }
.hours-note { font-size: .88rem; }

/* form */
.quote-form {
  background: #fff;
  border-radius: 18px;
  padding: 1.8rem;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1.05rem;
  align-content: start;
}

.form-row { display: grid; gap: .35rem; }
.form-row-2 { grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-2 > div { display: grid; gap: .35rem; }

.quote-form label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  color: var(--navy-800);
}

.label-note {
  font-weight: 500;
  font-size: .78rem;
  color: var(--ink-soft);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  padding: .7rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper-tint);
  width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--orange-500);
  background: #fff;
}
.quote-form textarea { resize: vertical; }

.form-note { font-size: .8rem; color: var(--ink-soft); text-align: center; margin: 0; }
.form-success {
  margin: 0;
  text-align: center;
  font-weight: 600;
  color: #157347;
  background: #e8f5ee;
  border: 1px solid #bfe3d0;
  border-radius: 10px;
  padding: .7rem 1rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-900);
  color: #8fa3bc;
  font-size: .92rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  padding-block: 3rem 2rem;
}

.footer-brand .brand-name { color: #fff; }
.footer-brand p { margin-top: 1rem; }

.footer-nav { display: grid; gap: .5rem; align-content: start; }
.footer-nav a, .footer-contact a {
  color: #c3d0e0;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--orange-400); }

.footer-contact { display: grid; gap: .5rem; align-content: start; }
.footer-contact p { margin: 0; }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 1.2rem;
  font-size: .82rem;
}
.footer-legal p { margin: 0; }

/* ---------- Mobile sticky CTA ---------- */

.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  gap: 1px;
  background: var(--navy-900);
  box-shadow: 0 -6px 20px rgba(8, 26, 48, .25);
}
.mobile-cta-btn {
  flex: 1;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  text-decoration: none;
  padding: .95rem .5rem calc(.95rem + env(safe-area-inset-bottom));
}
.mobile-cta-call { background: linear-gradient(135deg, var(--orange-400), var(--orange-600)); }
.mobile-cta-wa { background: #1faa53; }
.mobile-cta-quote { background: var(--navy-700); }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  /* eases out quickly then settles, rather than the flat feel of `ease` */
  transition: opacity .5s cubic-bezier(.25, .8, .35, 1),
              transform .55s cubic-bezier(.25, .8, .35, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-card { animation: none; }
  .faq-item[open] p { animation: none; }
  .card:hover, .btn:hover, .btn-primary:hover { transform: none; }
  .reviews-track { transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1020px) {
  .services-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-panel { display: none; }
  .split, .split-plate { grid-template-columns: 1fr; }
  /* two columns of questions need width the tablet hasn't got */
  .faq-list { grid-template-columns: minmax(0, 1fr); }
  .faq-block { width: min(820px, calc(100% - 2.5rem)); }

  /* Wrapping five items of five different lengths across a narrow column
     gives ragged rows and strands the odd one out on its own. A grid puts
     them in columns instead, so a row that isn't full reads as the end of
     a list rather than as something that has come adrift. */
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1.2rem;
  }
}

@media (max-width: 560px) {
  /* two columns of this at phone width would wrap the longer items onto
     a second line each, which is the mess again by another route */
  .hero-trust { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .95rem 1.4rem; border-top: 1px solid var(--line); }

  .nav-toggle { display: flex; }
  .btn-call span { display: none; }
  .btn-call { padding: .6rem .8rem; }

  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .services-grid, .reviews-grid, .steps, .steps-inline { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }

  .mobile-cta { display: flex; }
  .site-footer { padding-bottom: 3.6rem; }
}


/* ============================================================
   THE CHOSEN LOOK — "Workshop", drawing hero + copper plate
   Signed off by Tom and folded in on 2026-08-04, from what were
   three review stylesheets (theme-workshop.css, -line.css and
   -line-plate.css, loaded in that order). Everything below is
   therefore a deliberate override of the rules above it and must
   stay last in this file.

   Two things were merged rather than copied, because the later
   sheet overrode every declaration of the earlier one: the hero
   drawing (the flat-lay it replaced never rendered) and its
   mobile placement. The rendered pipe run that used to sit above
   Reviews is gone entirely — the Drawing variant hid it, and line
   work doesn't sit with a rendered object.

   A dark workshop surface throughout, warm copper lighting, and
   the pipework drawn the way an engineer would draw it: thin
   copper lines, centre lines, hidden detail dashed where tube
   sits inside a fitting socket, parts named.
   ============================================================ */

:root {
  --navy-900: #070b0f;
  --navy-800: #0d141a;
  --navy-700: #16202a;
  --navy-600: #22303c;

  --orange-600: #c2703f;
  --orange-500: #d68a55;
  --orange-400: #e8a878;

  --ink: #c3ccd6;
  --ink-soft: #8d99a6;
  --paper: #101820;
  --paper-tint: #0b1116;
  --line: rgba(232, 168, 120, .16);
  --radius: 10px;

  --cu-sheen: linear-gradient(135deg, #f6d3ae 0%, #e8a878 20%, #b56331 50%, #edbb92 74%, #93491f 100%);
  --cu-hair: rgba(232, 168, 120, .22);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 12px 34px -12px rgba(0, 0, 0, .8);
  --shadow-lg: 0 26px 64px -22px rgba(0, 0, 0, .9);

  /* 40px graph paper — the same paper the hero uses, at the same
     weight, so sections that carry it match the hero exactly */
  --paper-grid:
    repeating-linear-gradient(0deg,  rgba(232, 168, 120, .05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(232, 168, 120, .05) 0 1px, transparent 1px 40px);
}

body {
  background:
    radial-gradient(1100px 700px at 12% 0%, rgba(232, 168, 120, .07), transparent 60%),
    #080d12;
  color: var(--ink);
}

h1, h2, h3 { color: #f2ebe4; }
.section-dark h2, .section-dark h3 { color: #fff; }

/* ---------- Header ---------- */

.site-header {
  background: rgba(8, 13, 18, .88);
  border-bottom: 1px solid var(--cu-hair);
}
.brand-name { color: #f2ebe4; }
.site-nav a { color: #b9c3ce; }
.site-nav a:hover { color: var(--orange-400); }
.btn-call { background: rgba(232, 168, 120, .12); border: 1px solid var(--cu-hair); color: #f0d9c4; }
.btn-call:hover { background: rgba(232, 168, 120, .2); }
.nav-toggle { border-color: var(--cu-hair); }
.nav-toggle span { background: #e8d5c3; }

/* ---------- Hero: the drawing is the picture ---------- */

.hero {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(232, 168, 120, .05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(232, 168, 120, .05) 0 1px, transparent 1px 40px),
    radial-gradient(760px 520px at 74% 52%, rgba(232, 168, 120, .16), transparent 60%),
    radial-gradient(900px 700px at 8% 0%, rgba(60, 90, 120, .16), transparent 62%),
    linear-gradient(165deg, #121a22 0%, #06090d 78%);
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1%;
  width: 52%;
  aspect-ratio: 780 / 470;
  transform: translateY(-50%);
  background: url("../img/pipes/drawing.svg") no-repeat center / contain;
  pointer-events: none;
}
/* vignette so the copper reads as lit from the top-right */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(3, 6, 9, .75) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero-panel { display: none; }

.hero .accent {
  background: var(--cu-sheen);
  -webkit-background-clip: text;
  background-clip: text;
}
.lede { color: #aab6c3; }
.hero-trust { color: #8fa0b0; }
.kicker {
  color: #f0c9a5;
  background: rgba(194, 112, 63, .16);
  border-color: var(--cu-hair);
}
.kicker-dot { background: var(--orange-400); box-shadow: 0 0 0 4px rgba(232, 168, 120, .2); }

@media (max-width: 1020px) {
  /* Below the two-column layout the drawing ends up behind the words
     rather than beside them, so it changes job: it stops being the
     picture and becomes the paper. The plain file, because the leaders
     and labels can't be read at this size anyway — all they contributed
     was clutter crossing the text — and much fainter, because at half
     opacity a drawing behind body copy is something you have to read
     around. */
  .hero::before {
    top: auto;
    bottom: 0;
    right: 50%;
    width: min(620px, 116%);
    transform: translateX(50%);
    background-image: url("../img/pipes/drawing-plain.svg");
    opacity: .14;
  }
}

/* ---------- Buttons ---------- */

.btn-primary {
  background: var(--cu-sheen);
  color: #22120a;
  box-shadow: 0 10px 26px -10px rgba(232, 168, 120, .55);
}
.btn-primary:hover { box-shadow: 0 14px 32px -10px rgba(232, 168, 120, .7); }

.emergency-strip { background: linear-gradient(100deg, #8c421c, #c2703f); border-block: 1px solid var(--cu-hair); }
.btn-emergency { background: #f4e3d3; color: #8c421c; }

/* ---------- Panels, cards, everything that was white ---------- */

.section-tint { background: #0b1116; }

.card,
.step,
.faq-item {
  background: linear-gradient(180deg, #141d25, #101820);
  border: 1px solid var(--cu-hair);
  box-shadow: var(--shadow-sm);
}
.card:hover, .faq-item:hover { border-color: rgba(232, 168, 120, .42); }
.service-card p, .step p, .faq-item p { color: var(--ink-soft); }

.service-icon {
  color: var(--orange-400);
  background: linear-gradient(135deg, rgba(232, 168, 120, .16), rgba(194, 112, 63, .08));
  border-color: var(--cu-hair);
}
.card-link { color: var(--orange-400); }
.card-link:hover { color: #f6d3ae; }

.step-num {
  background: var(--cu-sheen);
  color: #22120a;
  box-shadow: 0 6px 16px -6px rgba(232, 168, 120, .5);
}

.review-card blockquote { color: #c8d1da; }
.review-card figcaption { color: var(--ink-soft); }

/* the second selector matches the dark-section rule above, so the
   copper chips win wherever the chips sit */
.area-chips li,
.section-dark .area-chips li {
  color: #e0cdbb;
  background: rgba(232, 168, 120, .07);
  border-color: var(--cu-hair);
}

.faq-item summary { color: #f2ebe4; }
.faq-item summary::after { color: var(--orange-400); }

.section-dark {
  background:
    radial-gradient(1100px 600px at 88% -10%, rgba(232, 168, 120, .14), transparent 62%),
    linear-gradient(160deg, #101923, #070b0f);
  border-block: 1px solid var(--cu-hair);
}

.check-list li::before { background: var(--cu-sheen); color: #22120a; }
.stat-big {
  background: var(--cu-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-num {
  background: var(--cu-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-bar { border-top: 1px solid var(--cu-hair); background: #06090d; }

/* ---------- Form on dark ---------- */

.quote-form {
  background: linear-gradient(180deg, #141d25, #0d141a);
  border: 1px solid var(--cu-hair);
}
.quote-form label { color: #e8d5c3; }
.quote-form input,
.quote-form select,
.quote-form textarea {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(232, 168, 120, .2);
  color: #e6ecf2;
}
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: #6f7c89; }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--orange-400);
  background: rgba(255, 255, 255, .07);
}
.quote-form select option { background: #101820; color: #e6ecf2; }
.form-note { color: var(--ink-soft); }
.form-success { color: #7ee0a8; background: rgba(30, 90, 60, .25); border-color: rgba(126, 224, 168, .3); }

/* ---------- Mobile nav / footer ---------- */

.site-footer { background: #06090d; border-top: 1px solid var(--cu-hair); }
.mobile-cta { background: #06090d; }
.mobile-cta-call { background: var(--cu-sheen); color: #22120a; }
.mobile-cta-quote { background: #16202a; }

@media (max-width: 760px) {
  .site-nav { background: #0d141a; border-bottom: 1px solid var(--cu-hair); }
  .site-nav a { border-top: 1px solid var(--cu-hair); }
}

/* ---------- Graph paper on "What we do" and "Reviews" ----------
   Each section paints its own grid, so the lines restart at every
   section edge rather than running continuously down the page —
   which is what the hero does too.

   #services is transparent and #reviews carries the tint colour, so
   setting only background-image leaves both of those backgrounds
   alone. */

#services,
#reviews { background-image: var(--paper-grid); }

/* ---------- The drawing under Reviews + FAQ ----------
   The band is one centred column of cards with a lot of clear ground
   either side, so the drawing has room that isn't behind the words. It
   is the "-plain" file — geometry, no leaders or labels — laid across
   the whole section and taken down far enough to read as what's printed
   on the paper rather than as a picture. */

#reviews { position: relative; }

#reviews::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Sized to the full band and anchored at the top, so the join sits
     across the reviews row rather than landing on the FAQ heading in the
     middle. Faint enough to be what the paper has printed on it: any
     stronger and it reads as an object floating behind the words. */
  background: url("../img/pipes/drawing-compression-plain.svg") no-repeat center 12% / 108% auto;
  opacity: .06;
}

/* the cards sit on the paper, not under it */
#reviews > .container { position: relative; z-index: 1; }

/* ---------- The copper plate in "Why Legacy" ----------
   The brushed copper plate fixed to the wall of the section: the logo
   on metal, the way a name plate is fixed to a workshop door. */

.logo-plate::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(circle at 50% 45%, rgba(232, 168, 120, .22), transparent 66%);
  filter: blur(16px);
  pointer-events: none;
}

.logo-plate-face {
  padding: 2.4rem;
  border-radius: 10px;
  border: 1px solid rgba(246, 211, 174, .38);
  backdrop-filter: none;
  background:
    /* brush marks */
    repeating-linear-gradient(100deg,
      rgba(255, 255, 255, .10) 0 1px,
      rgba(0, 0, 0, .09) 1px 3px),
    /* the metal itself, with a sheen band across it */
    linear-gradient(160deg,
      #5e2f14 0%,
      #94512a 14%,
      #d9a173 30%,
      #f6d4b0 38%,
      #c07f4c 48%,
      #8b4a24 62%,
      #6a3517 76%,
      #bd7c41 92%,
      #8d4c22 100%);
  box-shadow:
    0 34px 70px -30px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 224, 196, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}

.logo-plate-face img {
  box-shadow:
    0 0 0 4px rgba(70, 34, 12, .45),
    0 14px 30px rgba(0, 0, 0, .55);
}