/* ==========================================================================
   WCE Plumbing
   Brand cue: the existing logo is hairline geometric linework (the Brindabella
   ranges) beside wide-tracked caps. Van blue is the single accent. Sections
   are separated by background colour and spacing rather than rules, headings
   are bold sans at normal width, and the body copy is sans throughout so it
   reads as a working trade business.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* Black, white and blue, to match the vans. The custom property names are the
   ones the site already shipped with: --ink is the dark, --bone is the light,
   and the --copper-* set is the single accent, now the van blue. */
:root {
  --ink: #111111;
  --ink-2: #1a1a1a;
  --ink-3: #222222;
  --bone: #ffffff;
  --bone-2: #f3f4f6;
  --bone-3: #e5e7eb;

  --copper: #1f5fd6;         /* accent fills, rules, large display only */
  --copper-deep: #1f5fd6;    /* solid buttons, bone text = 5.7:1        */
  --copper-text: #1f5fd6;    /* blue text on bone = 5.7:1, on bone-2 5.2:1 */
  --copper-lift: #628fe2;    /* blue text on ink  = 5.9:1               */

  --star: #9a5d00;           /* review stars on light, 4.9:1 on bone-2  */
  --star-lift: #f5c24b;      /* review stars on ink, 11.4:1             */

  --on-ink: #ffffff;
  --on-ink-mute: #e5e7eb;    /* 15.4:1 on ink */
  --on-bone-mute: #1f2937;   /* 14.7:1 on bone */

  --rule-ink: rgba(255, 255, 255, 0.19);
  --rule-ink-soft: rgba(255, 255, 255, 0.10);
  --rule-bone: rgba(17, 17, 17, 0.16);
  --rule-bone-soft: rgba(17, 17, 17, 0.08);

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  --gut: 22px;
  --maxw: 1320px;
  --bar: 0px;              /* height of the mobile call bar, set in MQ */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 899px)  { :root { --bar: 59px; } }
@media (min-width: 720px)  { :root { --gut: 40px; } }
/* From 768px the container fills the screen on a 32px gutter, and from 1280px
   it caps at 1240px and centres. Under 768px the phone gutters are untouched. */
@media (min-width: 768px)  { :root { --gut: 32px; --maxw: none; } }
@media (min-width: 1280px) { :root { --maxw: 1240px; } }

/* --- reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 420;
  overflow-x: hidden;
  padding-bottom: var(--bar);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--copper); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.skip {
  position: fixed; left: 0; top: 0; z-index: 200;
  transform: translateY(-140%);
  background: var(--ink); color: var(--on-ink);
  padding: 14px 20px; font-family: var(--sans); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.skip:focus { transform: none; }

/* --- type ----------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.04;
  margin: 0;
  text-wrap: pretty;
}

.h-hero {
  /* Sized off the column it actually lives in, not the viewport, so the longest
     word never breaks. vw values are the fallback for anything without cqw. */
  font-size: clamp(1.6rem, 8.9vw, 3.6rem);
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -.005em;
}
.h-sec {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  font-stretch: 100%;
}
.h-sub {
  font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  font-weight: 700;
  font-stretch: 100%;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  font-stretch: 105%;
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.4;
  margin: 0;
}


.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.375rem);
  line-height: 1.52;
  font-weight: 350;
  max-width: 36ch;
  margin: 0;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.mono {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 450;
  font-stretch: 88%;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band { position: relative; }
.band--ink  { background: var(--ink);   color: var(--on-ink); }
.band--bone { background: var(--bone);  color: var(--ink); }
.band--bone2{ background: var(--bone-2);color: var(--ink); }

.pad    { padding-block: clamp(56px, 10vw, 118px); }
.phead + .band--ink.pad,
.phead + .band--ink.pad-sm { padding-top: clamp(16px, 2.5vw, 34px); }
.pad-sm { padding-block: clamp(38px, 6vw, 66px); }
/* closes a band under its content when the section that follows carries on the
   same colour, so the join does not read as a gap */
.band--flush.pad { padding-bottom: clamp(28px, 4vw, 44px); }

/* the drafting grid is gone: bands are separated by colour and spacing only.
   .ruled stays in the markup as a hook and draws nothing. */

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn__arrow { transition: transform .32s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--solid { background: var(--copper-deep); color: var(--bone); }
.btn--solid:hover { background: var(--ink); }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--copper-deep); }

.btn--line { border-color: var(--rule-bone); color: var(--ink); background: none; }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }

/* .chead and .phead are black bands of their own, so they take the dark-band button too */
.band--ink .btn--line, .chead .btn--line, .phead .btn--line { border-color: var(--rule-ink); color: var(--on-ink); }
.band--ink .btn--line:hover, .chead .btn--line:hover, .phead .btn--line:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* --- header --------------------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--bone);
  border-bottom: 1px solid var(--rule-bone);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hdr__in {
  display: flex; align-items: stretch; gap: 16px;
  min-height: 64px;
}
@media (min-width: 900px) { .hdr__in { min-height: 84px; } }

.hdr__logo {
  display: flex; align-items: center;
  padding: 10px 0;
  margin-right: auto; padding-right: 14px;
  flex-shrink: 1; min-width: 0;
}
.hdr__logo img { width: 168px; max-width: 46vw; }
@media (min-width: 900px) { .hdr__logo img { width: 226px; } }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: 34px; }
  .nav a {
    font-family: var(--sans);
    font-size: .75rem; font-weight: 520; font-stretch: 102%;
    letter-spacing: .2em; text-transform: uppercase;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), color .25s var(--ease);
  }
  .nav a:hover { border-bottom-color: var(--copper); }
  .nav a[aria-current='page'] { border-bottom-color: var(--ink); }
}

.hdr__call {
  display: flex; align-items: center; gap: 12px;
  align-self: stretch;
  padding: 0 clamp(14px, 3vw, 26px);
  margin-right: calc(var(--gut) * -1);
  background: var(--ink); color: var(--on-ink);
  text-decoration: none;
  transition: background .28s var(--ease);
}
.hdr__call:hover { background: var(--copper-deep); }
.hdr__call .lbl {
  display: none;
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-ink-mute);
}
.hdr__call .num {
  font-family: var(--sans);
  font-size: 1rem; font-weight: 600; font-stretch: 96%;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (min-width: 560px) { .hdr__call .num { font-size: 1.1rem; } }
@media (min-width: 900px) {
  .hdr__call { flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; }
  .hdr__call .lbl { display: block; }
  .hdr__call .num { font-size: 1.28rem; }
}

/* mobile menu toggle */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 52px; min-height: 52px; align-self: center;
  background: none; border: 1px solid var(--rule-bone);
  cursor: pointer; padding: 0 13px;
}
.burger span {
  display: block; height: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 900px) { .burger { display: none; } }

.drawer {
  display: none;
  background: var(--bone-2);
}
.drawer.open { display: block; }
@media (min-width: 900px) { .drawer { display: none !important; } }
.drawer a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 0;
  min-height: 56px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 1.1rem; font-weight: 620; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: .03em;
}
.drawer a i {
  font-style: normal;
  font-size: .75rem; font-weight: 500; font-stretch: 86%;
  letter-spacing: .16em; color: var(--copper-text);
}

/* sticky mobile action bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1.35fr 1fr;
  border-top: 1px solid rgba(255,255,255,.22);
}
@media (min-width: 900px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 58px; padding: 8px 10px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .82rem; font-weight: 600; font-stretch: 100%;
  letter-spacing: .07em; text-transform: uppercase;
}
.callbar .c1 { background: var(--ink); color: var(--on-ink); }
.callbar .c2 { background: var(--copper-deep); color: var(--bone); letter-spacing: .14em; font-size: .75rem; }

/* --- hero ----------------------------------------------------------------- */

@media (min-width: 940px) { .h-hero { font-size: clamp(2.6rem, 4.75vw, 3.95rem); } }
@supports (font-size: 1cqw) {
  .hero__text { container-type: inline-size; }
  .h-hero { font-size: clamp(1.6rem, 9.6cqw, 4rem); }
}

.hero { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: 0; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); align-items: stretch; }
}

.hero__text {
  padding-block: clamp(34px, 7vw, 86px) clamp(38px, 6vw, 74px);
  padding-right: 0;
  display: flex; flex-direction: column;
  position: relative; z-index: 2;
}
@media (min-width: 940px) { .hero__text { padding-right: clamp(36px, 4vw, 68px); } }

.hero__eyebrow { color: var(--copper-lift); margin-bottom: clamp(20px, 4vw, 36px); }
.hero__eyebrow span { color: var(--on-ink-mute); }

.h-hero .thin { font-weight: 250; font-stretch: 125%; display: block; }
.h-hero em {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: .56em; line-height: 1.12;
  text-transform: none; letter-spacing: -.01em; font-stretch: normal;
  margin-top: .12em;
}

.hero__lede {
  margin-top: clamp(22px, 3.4vw, 34px);
  color: #e5e7eb;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.75vw, 1.28rem);
  line-height: 1.55;
}

.hero__phone {
  margin-top: clamp(26px, 4vw, 40px);
  display: inline-flex; flex-direction: column; gap: 4px;
  align-self: flex-start;
  text-decoration: none;
  padding: 14px 0;
  min-height: 56px;
  max-width: 100%;
}
.hero__phone .lbl {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--copper-lift);
}
.hero__phone .num {
  font-family: var(--sans);
  font-size: clamp(2rem, 7.6vw, 3.1rem);
  font-weight: 700; font-stretch: 100%;
  line-height: 1.02; letter-spacing: -.01em;
  white-space: nowrap;
}
.hero__phone:hover .num { color: var(--copper-lift); }

.hero__facts {
  list-style: none; margin: clamp(24px, 3.4vw, 34px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 26px;
}
.hero__facts li {
  font-family: var(--sans); font-size: .75rem; font-weight: 560; font-stretch: 92%;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--on-ink-mute);
  padding: 7px 0 7px 16px; position: relative;
}
.hero__facts li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; background: var(--copper-lift);
}

.hero__media { position: relative; min-height: 300px; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 48% 32%;
}
@media (max-width: 939px) {
  .hero__media { margin-inline: calc(var(--gut) * -1); }
  .hero__media img { max-height: 58vh; }
}
@media (min-width: 940px) {
  .hero__media { margin-right: calc((100vw - min(100vw, var(--maxw))) / -2 - var(--gut)); }
  .hero__media img { position: absolute; inset: 0; }
}
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(17,17,17,.55) 0%, rgba(17,17,17,0) 34%);
  pointer-events: none;
}
@media (max-width: 939px) {
  .hero__media::after { background: linear-gradient(to bottom, rgba(17,17,17,.5) 0%, rgba(17,17,17,0) 40%); }
}

/* --- marquee -------------------------------------------------------------- */

.strip {
  background: var(--copper-deep);
  color: var(--bone);
  overflow: hidden;
  padding-block: 11px;
}
.strip__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.strip__track > span {
  display: flex; flex-shrink: 0;
  font-family: var(--sans); font-size: .75rem; font-weight: 500; font-stretch: 96%;
  letter-spacing: .2em; text-transform: uppercase;
}
.strip__track b { font-weight: 500; padding-inline: 1.1em; }
.strip__track i { font-style: normal; opacity: .5; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; width: 100%; }
  .strip__track > span:last-child { display: none; }
  .strip__track > span { flex-wrap: wrap; }
}

/* --- index list (what we do) ---------------------------------------------- */

.idx { display: grid; gap: clamp(30px, 4vw, 54px); }
@media (min-width: 1000px) {
  .idx { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .idx__aside { position: sticky; top: 118px; align-self: start; }
}
.idx__aside .h-sec { margin-block: 16px 20px; }
.idx__aside p { color: var(--on-bone-mute); max-width: 34ch; }

.idx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-bone); }

.row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: clamp(19px, 2.8vw, 27px) 0;
  border-bottom: 1px solid var(--rule-bone);
  text-decoration: none;
  position: relative;
}
@media (min-width: 640px) { .row { gap: 24px; align-items: center; } }
.row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--copper);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.row:hover::after, .row:focus-visible::after { transform: scaleX(1); }

.row__n {
  flex: 0 0 auto; width: 30px;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 560; font-stretch: 74%;
  letter-spacing: .1em;
  color: var(--copper-text);
  padding-top: .45em;
}
@media (min-width: 640px) { .row__n { width: 62px; padding-top: 0; align-self: flex-start; } }
.row__b { flex: 1 1 auto; min-width: 0; }
.row__t {
  display: block;
  font-family: var(--sans);
  font-size: clamp(1.12rem, 3.1vw, 1.9rem);
  font-weight: 450; font-stretch: 116%;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.06;
  margin: 0 0 .4em;
  transition: color .3s var(--ease);
  text-wrap: pretty;
}
.row:hover .row__t { color: var(--copper-text); }
.row__d {
  display: block; margin: 0;
  color: var(--on-bone-mute);
  font-size: .97rem; line-height: 1.5;
  max-width: 54ch;
}
.row__go {
  flex: 0 0 auto; align-self: center;
  font-family: var(--sans); font-size: 1.05rem; color: var(--on-bone-mute);
  transition: transform .34s var(--ease), color .3s var(--ease);
}
.row:hover .row__go { transform: translateX(6px); color: var(--copper-text); }

/* --- quiet full-bleed statement over photograph --------------------------- */

.state { display: grid; isolation: isolate; position: relative; }
.state__img { grid-area: 1 / 1; position: relative; }
.state__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.state__body {
  grid-area: 1 / 1; z-index: 1; position: relative;
  display: flex; align-items: center;
  padding-block: clamp(68px, 13vw, 150px);
}
.state__body::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(103deg, rgba(17,17,17,.90) 0%, rgba(17,17,17,.70) 46%, rgba(17,17,17,.26) 100%);
}
.state blockquote {
  margin: 0; max-width: 21ch;
  font-family: var(--sans); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.6rem, 5vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.012em;
  color: #ffffff;
}
.state cite {
  font-weight: 600;
  display: block; margin-top: clamp(20px, 3vw, 30px);
  font-family: var(--sans); font-style: normal;
  font-size: .75rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--copper-lift);
}

/* per-photograph framing: each of these two frames has one thing in it and the
   band is far shorter than the source, so the crop is set per band, not globally */
.state--copper .state__img img { object-position: 50% 20%; }
.state--copper .state__body { padding-block: clamp(52px, 9vw, 104px); }
.state--brass .state__img img { object-position: 50% 80%; }
.state--brass .state__body::before {
  background: linear-gradient(103deg, rgba(17,17,17,.94) 0%, rgba(17,17,17,.82) 46%, rgba(17,17,17,.34) 100%);
}
/* the van sits just below the middle of a portrait frame, under the tree, so the
   band is pinned down to it rather than filling with sky */
.state--van .state__img img { object-position: 50% 58%; }
.state--van .state__body::before {
  background: linear-gradient(103deg, rgba(17,17,17,.94) 0%, rgba(17,17,17,.82) 46%, rgba(17,17,17,.34) 100%);
}

/* --- values matrix -------------------------------------------------------- */

.mtx { display: grid; gap: 12px; }
@media (min-width: 680px)  { .mtx { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .mtx { grid-template-columns: repeat(3, 1fr); } }
.mtx__cell {
  background: var(--ink-3);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 30px);
}
.mtx__n {
  font-family: var(--sans); font-size: .75rem; font-weight: 560; font-stretch: 74%;
  letter-spacing: .12em; color: var(--copper-lift); display: block; margin-bottom: 14px;
}
.mtx__cell h3 {
  font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 700; font-stretch: 100%;
  letter-spacing: .04em; margin-bottom: .7em;
}
.mtx__cell p { color: var(--on-ink-mute); font-size: 1rem; line-height: 1.55; }

/* --- reviews -------------------------------------------------------------- */

.rev__lead {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.45rem, 4vw, 2.5rem);
  line-height: 1.16; letter-spacing: -.01em;
  margin: 0; max-width: 20ch;
}
.rev__head { display: grid; gap: clamp(22px, 3vw, 40px); align-items: end; }
@media (min-width: 900px) { .rev__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.rev__meta { color: var(--on-bone-mute); }
.rev__meta a { color: var(--copper-text); display: inline-block; padding-block: 12px; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.rev__rail {
  display: grid;
  margin-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--rule-bone);
}
@media (min-width: 760px)  { .rev__rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rev__rail { grid-template-columns: repeat(3, 1fr); } }
.rev__item {
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--rule-bone);
}
@media (min-width: 760px) {
  .rev__item { padding-inline: clamp(20px, 2.4vw, 34px); border-right: 1px solid var(--rule-bone); }
  .rev__item:first-child { padding-left: 0; }
  .rev__rail > :last-child { border-right: 0; }
}
@media (min-width: 760px) and (max-width: 1099px) { .rev__item:nth-child(2n) { border-right: 0; padding-right: 0; } .rev__item:nth-child(2n+1) { padding-left: 0; } }
@media (min-width: 1100px) { .rev__item:nth-child(3n) { border-right: 0; padding-right: 0; } .rev__item:nth-child(3n+1) { padding-left: 0; } }

.rev__item p { font-size: 1.02rem; line-height: 1.55; }
.rev__item footer {
  margin-top: 16px;
  font-family: var(--sans); font-size: .75rem; font-weight: 620;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-text);
}

/* --- credential strip ----------------------------------------------------- */

.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px)  { .creds { grid-template-columns: repeat(2, 1fr); } }
.creds li { padding: 16px 18px; background: rgba(17,17,17,.05); border-radius: 12px; }
.creds .k {
  display: block;
  font-family: var(--sans); font-size: .75rem; font-weight: 620;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-text);
  margin-bottom: 7px;
}
.creds .v {
  font-family: var(--sans); font-size: 1rem; font-weight: 480; font-stretch: 104%;
  letter-spacing: .04em;
}
.creds a {
  color: inherit; text-decoration: none; display: inline-block; padding-block: 12px;
  border-bottom: 1px solid var(--rule-bone);
}
.creds a:hover { border-bottom-color: var(--copper-text); color: var(--copper-text); }

/* the same strip sitting on a dark band */
.band--ink .creds li { background: rgba(255,255,255,.07); }
.band--ink .creds .k { color: var(--copper-lift); }
.band--ink .creds a { border-bottom-color: var(--rule-ink); }
.band--ink .creds a:hover { border-bottom-color: var(--copper-lift); color: var(--copper-lift); }

/* --- service area --------------------------------------------------------- */

.area__head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3.4vw, 38px); }
@media (min-width: 900px) { .area__head { grid-template-columns: minmax(0, auto) minmax(0, 28rem); justify-content: start; align-items: end; gap: clamp(26px, 3.4vw, 48px); } }
.area__head p { color: var(--on-bone-mute); }

.area__list {
  font-family: var(--sans);
  font-size: clamp(1.3rem, 4.4vw, 2.5rem);
  font-weight: 700; font-stretch: 100%;
  text-transform: uppercase; line-height: 1.18; letter-spacing: -.002em;
  margin: 0;
}
.area__list .sep { color: var(--copper-text); font-weight: 400; }
.area__list .t { white-space: nowrap; }
.area__list .dim { color: #6b7280; }

.area__note {
  margin-top: clamp(26px, 3.5vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--rule-bone);
  color: var(--on-bone-mute);
  max-width: 54ch;
}

/* --- form ----------------------------------------------------------------- */

.quote { display: grid; gap: clamp(36px, 5vw, 76px); }
@media (min-width: 960px) { .quote { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }

.quote__aside .h-sec { margin-block: 16px 22px; }
.quote__aside p { color: var(--on-ink-mute); max-width: 34ch; }
.quote__steps { list-style: none; margin: clamp(26px, 3.5vw, 36px) 0 0; padding: 0; }
.quote__steps li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--rule-ink);
  font-size: .99rem; color: var(--on-ink-mute);
}
.quote__steps li:last-child { border-bottom: 1px solid var(--rule-ink); }
.quote__steps b {
  font-family: var(--sans); font-size: .75rem; font-weight: 560; font-stretch: 74%;
  letter-spacing: .12em; color: var(--copper-lift); flex: 0 0 auto;
}

/* Every field on the site is a box: white fill, a visible border, the label
   above it in sentence case. There are no underline-only inputs left. */
.form { display: grid; gap: 14px; }
.field { position: relative; }
@media (min-width: 620px) {
  .form { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .field.full { grid-column: 1 / -1; }
}

/* Every form on the site sits on a light card or a light band, so the label
   colour is keyed to the field box rather than to the band behind it. */
.field label {
  display: block;
  font-family: var(--sans); font-size: .95rem; font-weight: 620;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 7px;
}
.field label .opt { font-weight: 480; color: var(--on-bone-mute); }

.field input, .field select, .field textarea {
  width: 100%;
  background: #f3f4f6;
  border: 1px solid rgba(17,17,17,.34);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 420;
  line-height: 1.4;
  padding: 12px 13px;
  min-height: 50px;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(31,41,55,.72); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--copper-text);
  outline: 2px solid rgba(31,95,214,.30);
  outline-offset: 0;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
.field select option { background: #f3f4f6; color: var(--ink); }

.hp { display: none; }

.form__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center;
  padding-top: clamp(24px, 3vw, 32px);
}
/* the note reads across the whole column rather than in a thin gutter beside the button */
.form__note {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  max-width: none;
}
/* inline, not inline-flex: a 44px box inside a 24px line double-spaced the wrap
   on a phone. Vertical padding keeps the tap area without touching the line box. */
.form__note a { display: inline; padding-block: 11px; }
.form__note { font-size: 1rem; color: var(--on-bone-mute); }
.band--ink .form__note { color: var(--on-ink-mute); }

.form__msg {
  grid-column: 1 / -1;
  margin-top: 18px; padding: 14px 18px;
  border-left: 2px solid var(--copper-lift);
  background: rgba(31,95,214,.10);
  font-size: .95rem;
}
.form__msg[hidden] { display: none; }
.form__msg.err { border-left-color: #dc2626; background: rgba(220,38,38,.12); }

button[type='submit'][data-busy='1'] { opacity: .6; pointer-events: none; }

/* --- services page -------------------------------------------------------- */

.svc { }
.svc__in {
  display: grid; gap: clamp(24px, 3.6vw, 54px);
  padding-block: clamp(40px, 6vw, 86px);
  align-items: start;
}
@media (min-width: 900px) {
  .svc__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 6vw, 88px); }
  /* the photograph is first in the markup, so alternating means sending it second */
  .svc:nth-child(even) .svc__media { order: 2; }
  /* the one block with no photograph runs as a single column. The cap goes on
     the child, not on .wrap, or the block centres instead of lining up. */
  .svc__in--solo { grid-template-columns: minmax(0, 1fr); }
  .svc__in--solo > div { max-width: 62rem; }
}
.svc__media img { width: 100%; }
.svc__n {
  font-family: var(--sans); font-size: .75rem; font-weight: 560; font-stretch: 74%;
  letter-spacing: .14em; color: var(--copper-text); display: block; margin-bottom: 14px;
}
.svc h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; font-stretch: 100%; }
.svc__lede { margin-top: 18px; color: var(--on-bone-mute); max-width: 44ch; }
/* no rules between the bullets: a blue tick and spacing instead */
.svc__ul { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 520px) { .svc__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (min-width: 900px) { .svc__ul { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1140px) { .svc__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.svc__ul li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1rem; line-height: 1.4;
}
.svc__ul li .ico { flex: 0 0 auto; margin-top: .18em; color: var(--copper-text); }
/* four items or fewer: one column, so the row closes up instead of trailing off */
.svc__ul--tight { grid-template-columns: minmax(0, 1fr) !important; max-width: 36ch; }

/* the home page priority card on this page: no bullets and no number, so the
   two actions sit straight under the description */
.pcard--svc .pcard__act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pcard__see {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  font-family: var(--sans); font-size: .95rem; font-weight: 620;
  color: var(--copper-text); text-decoration: none;
}
.pcard__see:hover { color: var(--ink); }

/* the rest of the work: compact text cards on the dark band, so the three
   photographed cards above stay the most prominent thing on the page */
.ocards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px)  { .ocards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1040px) { .ocards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ocard {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--ink-3);
  border-radius: 12px;
}
/* the three secondary services the gallery has a photograph for. The others
   carry no picture rather than borrowing one from different work, so the cards
   sit to their own height instead of stretching a short one to match a tall
   one and leaving a hole where a photograph is not. */
.ocards { align-items: start; }
.ocard--shot { padding-top: 0; }
.ocard__img {
  position: relative; aspect-ratio: 4 / 3;
  margin: 0 calc(clamp(18px, 2.2vw, 24px) * -1) clamp(16px, 2vw, 20px);
  border-radius: 12px 12px 0 0; overflow: hidden;
}
.ocard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* crops: the machine over the drain, the cylinder on its base, the pan and the
   vanity beside it */
.ocard__img img[src*='drain-machine']    { object-position: 55% 58%; }
.ocard__img img[src*='hot-water-system'] { object-position: 50% 55%; }
.ocard__img img[src*='toilet-vanity']    { object-position: 45% 55%; }
.ocard h3 { font-size: 1.05rem; font-weight: 700; font-stretch: 100%; line-height: 1.22; }
.ocard__ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ocard__ul li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .95rem; line-height: 1.4; color: var(--on-ink-mute);
}
.ocard__ul .ico { flex: 0 0 auto; margin-top: .18em; color: var(--copper-lift); }
.ocard__act { margin-top: auto; padding-top: clamp(16px, 2vw, 20px); }
.ocard__go {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 12px 18px;
  background: var(--copper-deep); color: var(--bone);
  border-radius: 8px; text-decoration: none;
  font-family: var(--sans); font-size: .78rem; font-weight: 620; font-stretch: 100%;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s var(--ease);
}
.ocard__go:hover { background: #184aab; }
.ocard__call {
  display: flex; align-items: center;
  min-height: 44px;
  font-family: var(--sans); font-size: .92rem; font-weight: 500;
  color: var(--on-ink-mute); text-decoration: none;
}
.ocard__call:hover { color: var(--copper-lift); }

/* --- generic page head ---------------------------------------------------- */

.phead { background: var(--ink); color: var(--on-ink); position: relative; }
.phead__in {
  padding-block: clamp(40px, 7vw, 92px) clamp(34px, 5vw, 66px);
  display: grid; gap: clamp(30px, 4vw, 56px);
}
@media (min-width: 900px) {
  .phead__in { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: end; }
  .phead__side { padding-bottom: 6px; }
}
.phead h1 { font-size: clamp(1.9rem, 5.4vw, 3.3rem); font-weight: 700; font-stretch: 100%; line-height: 1.04; }

.phead__side dl { margin: 0; display: grid; gap: 8px; }
.phead__side div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 16px; background: rgba(255,255,255,.07); border-radius: 10px;
}
.phead__side dt {
  font-family: var(--sans); font-size: .75rem; font-weight: 620;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-lift);
}
.phead__side dd {
  font-family: var(--sans); font-size: .95rem; font-weight: 480; font-stretch: 100%;
  letter-spacing: .03em; text-align: right;
}
/* the family photograph above the licences in the about page head. It is a
   square-ish frame shown whole rather than cropped, so none of the four of
   them is cut off at any width */
.phead__side .phead__photo {
  padding: 0; background: var(--ink-3);
  border-radius: 14px; overflow: hidden;
  margin-bottom: clamp(16px, 2.2vw, 22px);
}
.phead__photo img { display: block; width: 100%; height: auto; }
.phead .eyebrow { color: var(--copper-lift); margin-bottom: clamp(16px, 3vw, 26px); }
.phead .h-sec { max-width: 16ch; }
.phead__lede { margin-top: clamp(20px, 3vw, 30px); color: #e5e7eb; max-width: 46ch; font-size: clamp(1.05rem, 1.7vw, 1.22rem); }
/* the services page carries its call and its quote link in the head band */
.phead__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }
.phead__cta .btn { border-radius: 8px; }
.phead__cta .btn .ico { width: 20px; height: 20px; }

/* --- about ---------------------------------------------------------------- */

.split { display: grid; gap: clamp(30px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.prose { max-width: 60ch; }
.prose p { font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.62; margin-bottom: 1.05em; }
.prose p.big {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.4; font-weight: 500;
  margin-bottom: 1.1em;
}

.ph {
  border: 1px solid var(--rule-bone);
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(17,17,17,.045) 9px 10px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 2.6vw, 26px);
  aspect-ratio: 5 / 4;
}
.band--ink .ph {
  border-color: var(--rule-ink);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255,255,255,.05) 9px 10px);
}
.ph__k {
  font-family: var(--sans); font-size: .75rem; font-weight: 620;
  letter-spacing: .22em; text-transform: uppercase; color: var(--copper-text);
  display: block; margin-bottom: 9px;
}
.band--ink .ph__k { color: var(--copper-lift); }
.ph p { font-size: .93rem; color: var(--on-bone-mute); margin: 0; max-width: 34ch; }
.band--ink .ph p { color: var(--on-ink-mute); }

/* a marked gap in a line of copy, the same idea as .ph but without the box */
.note {
  border-left: 2px solid var(--copper-text);
  padding: 4px 0 4px 18px;
}
.note p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--on-bone-mute); max-width: 46ch; }
.band--ink .note { border-left-color: var(--copper-lift); }
.band--ink .note p { color: var(--on-ink-mute); }
.form .note { grid-column: 1 / -1; margin-top: clamp(20px, 2.6vw, 26px); }

/* --- questions ------------------------------------------------------------ */

.faq { margin: 0; border-top: 1px solid var(--rule-bone); }
.band--ink .faq { border-top-color: var(--rule-ink); }
.faq > div {
  display: grid; gap: 10px;
  padding: clamp(18px, 2.4vw, 24px) 0;
  border-bottom: 1px solid var(--rule-bone);
}
.band--ink .faq > div { border-bottom-color: var(--rule-ink); }
@media (min-width: 820px) {
  .faq > div { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
}
.faq dt {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.7vw, 1.15rem); font-weight: 520; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
}
.faq dd { margin: 0; color: var(--on-bone-mute); font-size: .99rem; line-height: 1.55; max-width: 56ch; }
.band--ink .faq dd { color: var(--on-ink-mute); }

/* --- contact -------------------------------------------------------------- */

.cinfo { list-style: none; margin: 0; padding: 0; }
.cinfo li { border-top: 1px solid var(--rule-ink); padding: 18px 0; }
.cinfo li:last-child { border-bottom: 1px solid var(--rule-ink); }
.cinfo .k {
  display: block;
  font-family: var(--sans); font-size: .75rem; font-weight: 620;
  letter-spacing: .22em; text-transform: uppercase; color: var(--copper-lift);
  margin-bottom: 8px;
}
.cinfo a, .cinfo span.v {
  font-family: var(--sans); font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 500; font-stretch: 104%; letter-spacing: .01em;
  text-decoration: none; display: inline-flex; align-items: center;
  min-height: 46px; overflow-wrap: anywhere;
}
.cinfo a:hover { color: var(--copper-lift); }

/* --- thank you ------------------------------------------------------------ */

.ty { min-height: 68vh; display: flex; align-items: center; }
.ty__mark { width: 190px; margin-bottom: clamp(26px, 4vw, 40px); }

/* --- footer --------------------------------------------------------------- */

.ftr { background: var(--ink); color: var(--on-ink); }
.ftr__top {
  display: grid; gap: clamp(30px, 4vw, 48px);
  padding-block: clamp(48px, 7vw, 82px) clamp(32px, 4vw, 48px);
}
@media (min-width: 620px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ftr__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 52px); } }
.ftr__logo { width: 232px; max-width: 64%; margin-bottom: 24px; }
.ftr__blurb { color: var(--on-ink-mute); max-width: 46ch; font-size: 1rem; }
.ftr h4 {
  font-size: .75rem; font-weight: 620; font-stretch: 100%;
  letter-spacing: .22em; color: var(--copper-lift); margin-bottom: 18px;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 2px; }
.ftr li a, .ftr li span {
  display: inline-block; padding: 8px 0; min-height: 40px;
  font-family: var(--sans); font-size: .93rem; font-weight: 420;
  text-decoration: none; color: var(--on-ink-mute);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
  overflow-wrap: anywhere;
}
.ftr li a:hover { color: var(--bone); border-bottom-color: var(--copper-lift); }
.ftr__phone {
  font-family: var(--sans) !important;
  font-size: 1.5rem !important; font-weight: 560; font-stretch: 104%;
  color: var(--bone) !important; letter-spacing: -.005em;
}

.ftr__bot {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  padding-block: clamp(22px, 3vw, 30px) clamp(26px, 3vw, 34px);
}
.ftr__bot p {
  margin: 0;
  font-family: var(--sans); font-size: .75rem; font-weight: 450; font-stretch: 92%;
  letter-spacing: .13em; text-transform: uppercase; color: #9ca3af;
}

/* --- motion --------------------------------------------------------------- */

/* The scroll reveal is gone. Everything paints on load, and the .rise, .d1,
   .d2 and .d3 hooks have been taken out of the markup. Hover transitions stay. */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Home page: lead generation layout
   The home page is the landing page for the Google Ads campaigns, so it is
   laid out for a phone first and for the call and the quote above everything
   else. Every selector below is used only by the home page, and the one
   shared rule it leans on (.form) is reached through a --card modifier, so
   the other four pages are untouched.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */

.lead { position: relative; background: var(--ink); color: var(--on-ink); overflow: hidden; }
.lead__bg { position: absolute; inset: 0; }
.lead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lead__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(17,17,17,.95) 0%, rgba(17,17,17,.89) 46%, rgba(17,17,17,.96) 100%);
}
@media (min-width: 980px) {
  .lead__bg img { object-position: 50% 30%; }
  .lead__bg::after {
    background: linear-gradient(100deg,
      rgba(17,17,17,.96) 0%, rgba(17,17,17,.90) 52%, rgba(17,17,17,.82) 100%);
  }
}

/* Every hero photograph is a portrait phone shot in a wide band, so the browser
   would crop it to the middle and lose the subject. Each one is pinned to what
   has to stay in frame.

   home     the arched mirror, the wall lights and the vessel basin
   repairs  the drain machine and the lifted cover, both low and right of centre
   bathroom the basin, the mirror and the shower screen beside it
   laundry  the tub and the tap, with the machine under the bench             */
.lead--home .lead__bg img { object-position: 50% 36%; }
.lead--plumbing-maintenance-repairs .lead__bg img { object-position: 58% 58%; }
.lead--bathroom-renovation-plumbing .lead__bg img { object-position: 50% 46%; }
.lead--laundry-renovation-plumbing .lead__bg img  { object-position: 50% 54%; }

.lead__in {
  position: relative; z-index: 1;
  display: grid; gap: clamp(26px, 4vw, 42px);
  padding-block: clamp(28px, 5vw, 64px) clamp(34px, 5vw, 70px);
}
/* Phone order is headline, subheadline, call button, quote form, then the
   badges and the supporting line. On desktop the badges move back up under
   the call button in the left column and the form holds both rows. */
@media (min-width: 980px) {
  .lead__in {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(26px, 3vw, 40px) clamp(40px, 5vw, 76px);
    align-items: start;
  }
  .lead__text  { grid-column: 1; grid-row: 1; }
  .lead__trust { grid-column: 1; grid-row: 2; }
  .lead__form  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.lead__text { display: flex; flex-direction: column; align-items: flex-start; }
.lead__trust { margin-top: clamp(4px, 1vw, 10px); }

.lead__eyebrow { color: var(--copper-lift); margin-bottom: clamp(14px, 2.4vw, 22px); }

.lead h1 {
  /* floor set by measurement: at 390px "Canberra Plumber." has to hold on one
     line, and bold at normal width is wider than the old light extended caps */
  font-size: clamp(1.72rem, 7.2vw, 3rem);
  font-weight: 800; font-stretch: 100%;
  line-height: 1.06; letter-spacing: -.004em;
}
.lead h1 span { display: block; }
/* no max-width, and the ceiling is set by measurement: "Canberra Plumber."
   has to hold on one line in the left column at every width above 980px */
@media (min-width: 980px) { .lead h1 { font-size: clamp(2.3rem, 3.3vw, 3rem); } }

.lead__sub {
  margin: clamp(15px, 2.2vw, 20px) 0 0;
  font-family: var(--sans); font-weight: 580; font-stretch: 100%;
  font-size: clamp(1.05rem, 4.1vw, 1.25rem); line-height: 1.4;
  color: var(--bone); max-width: 40ch;
}
.lead__supp {
  margin: clamp(14px, 2vw, 18px) 0 0;
  color: #e5e7eb; font-size: 1rem; line-height: 1.55; max-width: 48ch;
}

.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 15px;
  border: 1px solid rgba(255,255,255,.30); border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-family: var(--sans); font-size: .75rem; font-weight: 580; font-stretch: 94%;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
a.pill:hover { background: rgba(255,255,255,.14); border-color: var(--copper-lift); }
/* tracked in on a phone so the two licence badges pair up on one row rather
   than taking five rows between the copy and the call button */
@media (max-width: 559px) { .pill { padding: 0 12px; letter-spacing: .055em; } .pills { gap: 7px; } }
.pill--go { background: var(--copper-deep); border-color: var(--copper); }
.pill--go:hover { background: var(--copper-deep); }
.pill__stars { color: var(--star-lift); font-size: .9rem; letter-spacing: .04em; }

.lead__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: clamp(22px, 3vw, 30px);
  width: 100%; min-height: 64px; padding: 14px 24px;
  background: var(--copper-deep); color: var(--bone);
  border: 1px solid var(--copper); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(17,17,17,.45);
  text-decoration: none;
  font-family: var(--sans); font-size: clamp(1.1rem, 4.6vw, 1.38rem);
  font-weight: 700; font-stretch: 100%; letter-spacing: .015em;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lead__call:hover { background: #184aab; transform: translateY(-1px); }
.lead__call .ico { width: 24px; height: 24px; }
@media (min-width: 560px) { .lead__call { width: auto; } }

.qcard {
  background: var(--bone); color: var(--ink);
  border-radius: 16px;
  padding: clamp(20px, 4.4vw, 30px);
  box-shadow: 0 26px 64px rgba(0,0,0,.44);
}
.qcard__h { font-size: clamp(1.35rem, 5vw, 1.7rem); font-weight: 700; font-stretch: 100%; line-height: 1.1; }
.qcard__s { margin: 10px 0 0; color: var(--on-bone-mute); font-size: 1rem; line-height: 1.45; }

/* the form sitting inside a card: the only difference left is the top margin
   and a full-width submit */
.form--card { margin-top: clamp(18px, 2.6vw, 22px); }
.form--card .form__foot { padding-top: clamp(14px, 2vw, 18px); }
.form--card .btn--solid {
  width: 100%; justify-content: center;
  min-height: 56px; border-radius: 10px;
  font-size: .82rem; letter-spacing: .18em;
}
.form--card .form__msg { border-left-color: var(--copper-text); background: rgba(31,95,214,.08); color: var(--ink); }

/* --- trust bar ------------------------------------------------------------ */

.tbar {
  background: var(--copper-deep); color: var(--bone);
  border-block: 1px solid rgba(17,17,17,.28);
}
.tbar ul { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 480px) { .tbar ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tbar ul { grid-template-columns: repeat(5, 1fr); } }
.tbar li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  font-family: var(--sans); font-size: .76rem; font-weight: 580; font-stretch: 92%;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
}
@media (min-width: 480px) { .tbar li { padding-right: clamp(14px, 2vw, 24px); } }
.tbar .ico { flex: 0 0 auto; color: var(--bone); opacity: .85; }

/* --- review strip, directly under the trust bar --------------------------- */

.rstrip { background: var(--bone-2); color: var(--ink); }
.rstrip__in { padding-block: clamp(22px, 3.4vw, 34px); }
.rstrip__cards { display: grid; gap: 10px; }
@media (min-width: 720px)  { .rstrip__cards { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.rstrip__c {
  background: var(--bone);
  border-radius: 12px;
  padding: clamp(14px, 1.8vw, 18px);
}
.rstrip__stars { margin: 0 0 8px; color: var(--star); font-size: .95rem; letter-spacing: .14em; line-height: 1; }
.rstrip__c blockquote p { margin: 0; font-size: 1rem; line-height: 1.5; }
.rstrip__who {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.rstrip__link { margin: 14px 0 0; }
.rstrip__link a {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 44px;
  font-family: var(--sans); font-size: .95rem; font-weight: 620;
  color: var(--copper-text); text-decoration: none;
  border-bottom: 1px solid var(--copper-text);
}
.rstrip__link a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- section heads -------------------------------------------------------- */

/* the intro sits beside the heading rather than floating off to the right edge:
   both columns are capped and the pair is packed to the start of the row */
.shead { display: grid; gap: 14px; margin-bottom: clamp(22px, 3vw, 34px); }
@media (min-width: 900px) {
  .shead {
    grid-template-columns: minmax(0, auto) minmax(0, 30rem);
    justify-content: start; align-items: end; gap: clamp(26px, 3.4vw, 46px);
  }
}
.shead__p { color: var(--on-bone-mute); margin: 0; font-size: 1rem; }
.shead--ink .shead__p { color: var(--on-ink-mute); }

/* --- priority service cards ----------------------------------------------- */

.pcards { display: grid; gap: clamp(16px, 2.4vw, 26px); }
@media (min-width: 760px) { .pcards { grid-template-columns: repeat(3, 1fr); } }

.pcard {
  display: flex; flex-direction: column;
  background: var(--bone-2);
  border: 1px solid var(--rule-bone-soft);
  border-radius: 14px; overflow: hidden;
}
.pcard__img { display: block; position: relative; aspect-ratio: 16 / 10; }
@media (min-width: 760px) { .pcard__img { aspect-ratio: 5 / 4; } }
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* crops set per photograph: the drain machine over the lifted cover, the basin
   under the round mirror, and the tub in the laundry bench, all held in frame */
.pcard--drains .pcard__img img { object-position: 55% 56%; }
.pcard--bath   .pcard__img img { object-position: 50% 46%; }
.pcard--laundry .pcard__img img { object-position: 50% 52%; }
.pcard__n {
  position: absolute; left: 0; bottom: 0;
  background: var(--copper-deep); color: var(--bone);
  padding: 7px 14px;
  font-family: var(--sans); font-size: .75rem; font-weight: 600; font-stretch: 78%;
  letter-spacing: .14em;
}
.pcard__b { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 2.2vw, 24px); }
.pcard h3 { font-size: clamp(1.1rem, 2.1vw, 1.3rem); font-weight: 700; font-stretch: 100%; line-height: 1.18; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a:hover { color: var(--copper-text); }
.pcard p { margin: 13px 0 0; color: var(--on-bone-mute); font-size: 1rem; line-height: 1.5; }
/* no dividers between bullets: a small blue tick and spacing do the work */
.pcard ul { list-style: none; margin: clamp(16px, 2vw, 20px) 0 0; padding: 0; display: grid; gap: 10px; }
.pcard li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1rem; line-height: 1.4;
}
.pcard li .ico { flex: 0 0 auto; margin-top: .18em; color: var(--copper-text); }

/* the card's own actions: a blue button, with the phone under it */
.pcard__act { margin-top: auto; padding-top: clamp(16px, 2vw, 20px); }
.pcard__go {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  width: 100%; min-height: 52px; padding: 13px 20px;
  background: var(--copper-deep); color: var(--bone);
  border-radius: 8px; text-decoration: none;
  font-family: var(--sans); font-size: .82rem; font-weight: 620; font-stretch: 100%;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s var(--ease);
}
.pcard__go:hover { background: #184aab; }
.pcard__call {
  display: inline-flex; align-items: center;
  margin-top: 4px; min-height: 44px;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  color: var(--on-bone-mute); text-decoration: none;
}
.pcard__call:hover { color: var(--copper-text); }

/* --- secondary services --------------------------------------------------- */

/* separate cards on a lifted black, no outlines, small gaps between them */
.sgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 760px) { .sgrid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.scell {
  display: flex; align-items: center;
  min-height: 84px;
  padding: 16px clamp(14px, 1.6vw, 20px);
  background: var(--ink-3);
  border-radius: 12px;
  font-family: var(--sans); font-size: 1rem; font-weight: 450; font-stretch: 100%;
  line-height: 1.35; color: var(--on-ink);
}
/* each of these opens its own section on the services page, so it carries an
   arrow and lifts under the pointer to say so */
.scell--go { padding: 0; }
.scell--go > a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; height: 100%; min-height: 84px;
  padding: 16px clamp(14px, 1.6vw, 20px);
  border-radius: 12px;
  color: inherit; text-decoration: none;
}
.scell--go .btn__arrow { flex: 0 0 auto; color: var(--copper-text); }

.scell--cta { padding: 0; background: none; }
.scell--cta a {
  display: flex; align-items: center; gap: 11px;
  width: 100%; height: 100%; min-height: 84px;
  padding: 16px clamp(14px, 1.6vw, 20px);
  background: var(--copper-deep); color: var(--bone);
  border-radius: 12px;
  text-decoration: none;
  font-size: .95rem; font-weight: 600; line-height: 1.35;
  transition: background .25s var(--ease);
}
.scell--cta a:hover { background: #184aab; }
.scell--cta .ico { flex: 0 0 auto; }

/* --- about ---------------------------------------------------------------- */

.fam { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .fam { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
}
.fam__p { margin-top: clamp(20px, 2.6vw, 26px); max-width: 48ch; }
.fam__p p { font-size: clamp(1.02rem, 1.5vw, 1.1rem); line-height: 1.6; }
.fam__panel {
  background: var(--ink); color: var(--on-ink);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 32px);
}
.fam__panel dl { margin: 0; display: grid; gap: 8px; }
.fam__panel dl > div {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 13px 16px; background: rgba(255,255,255,.07); border-radius: 10px;
}
.fam__panel dt {
  font-family: var(--sans); font-size: .72rem; font-weight: 620;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-lift);
  flex: 0 0 auto;
}
.fam__panel dd {
  margin: 0; text-align: right;
  font-family: var(--sans); font-size: .95rem; font-weight: 480; font-stretch: 100%;
  letter-spacing: .02em;
}
.fam__panel .note { border-left-color: var(--copper-lift); }
.fam__panel .note p { color: var(--on-ink-mute); }
.fam__panel .ph__k { color: var(--copper-lift); }

/* the van above the fact card. The van sits low in a portrait frame, so the
   crop is pinned under the middle to keep the whole vehicle and its signwriting */
.fam__side { display: grid; gap: clamp(14px, 2vw, 18px); }
.fam__shot {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden; background: var(--bone-3);
}
.fam__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 57%;
}

/* --- recent work ---------------------------------------------------------- */

@media (min-width: 760px) { .ph--band { aspect-ratio: 16 / 5; } }

/* The photograph grid. The home page, a service page under What's included and
   the about page all use these tiles, so the work reads the same wherever it
   appears. Tiles are 4:5 because every photograph the client sent is a portrait
   phone shot: a square or landscape tile would cut the room in half. */
.shots__tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(16px, 2.2vw, 22px);
}
.shots__tab {
  min-height: 44px; padding: 10px 18px;
  background: none; border: 1px solid var(--rule-bone); border-radius: 999px;
  color: var(--on-bone-mute); cursor: pointer;
  font-family: var(--sans); font-size: .75rem; font-weight: 620; font-stretch: 100%;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.shots__tab:hover { color: var(--ink); border-color: var(--ink); }
.band--ink .shots__tab { border-color: var(--rule-ink); color: var(--on-ink-mute); }
.band--ink .shots__tab:hover { color: var(--on-ink); border-color: var(--on-ink); }
.shots__tab[aria-pressed='true'],
.band--ink .shots__tab[aria-pressed='true'] {
  background: var(--copper-deep); border-color: var(--copper-deep); color: var(--bone);
}

.shots__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 700px)  { .shots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1080px) { .shots__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.shot { margin: 0; }
.shot[hidden] { display: none; }
.shot__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  position: relative; aspect-ratio: 4 / 5;
  background: var(--bone-3); border-radius: 12px; overflow: hidden;
}
.shot__btn img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transition: transform .5s var(--ease);
}
@media (hover: hover) { .shot__btn:hover img { transform: scale(1.04); } }
.shots__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3vw, 32px); }

/* the larger view, built by site.js the first time a tile is opened */
.viewer {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(56px, 8vw, 64px) clamp(14px, 4vw, 40px);
  background: rgba(17, 17, 17, .93);
}
.viewer[hidden] { display: none; }
.viewer img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; border-radius: 10px;
}
.viewer__x {
  position: absolute; top: 12px; right: 12px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-3); color: var(--on-ink);
  border: 1px solid var(--rule-ink); border-radius: 999px;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.viewer__x:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--bone); }

/* --- reviews -------------------------------------------------------------- */

.rcards { display: grid; gap: clamp(14px, 1.8vw, 20px); }
@media (min-width: 720px)  { .rcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rcards { grid-template-columns: repeat(3, 1fr); } }
.rcard {
  display: flex; flex-direction: column;
  background: var(--bone-2);
  border: 1px solid var(--rule-bone-soft);
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 26px);
}
/* on the light grey band the cards go the other way so they still read as cards */
.band--bone2 .rcard { background: var(--bone); }
.rcard__stars { margin: 0; color: var(--star); font-size: 1.05rem; letter-spacing: .16em; line-height: 1; }
.rcard blockquote p { margin: 14px 0 0; font-size: 1rem; line-height: 1.56; }
.rcard figcaption { margin-top: auto; padding-top: clamp(16px, 2vw, 20px); }
.rcard__who {
  display: block;
  font-family: var(--sans); font-size: .95rem; font-weight: 700; font-stretch: 100%;
  letter-spacing: .04em; text-transform: uppercase;
}
.rcard__src {
  display: block; margin-top: 6px;
  font-family: var(--sans); font-size: .78rem; font-weight: 560; font-stretch: 94%;
  letter-spacing: .14em; text-transform: uppercase; color: var(--copper-text);
}
/* the home page prints only the two reviews the strip above it does not, so
   they take half the row each and are set a size up */
.rcards--two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .rcards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
}
.rcards--two .rcard { padding: clamp(24px, 3.2vw, 38px); }
.rcards--two .rcard__stars { font-size: 1.2rem; }
.rcards--two .rcard blockquote p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; }
.rcards--two .rcard__who { font-size: 1.05rem; }

.rlink { margin: clamp(22px, 3vw, 30px) 0 0; }
.rlink a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 48px;
  font-family: var(--sans); font-size: .78rem; font-weight: 620;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--copper-text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-bone);
}
.rlink a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- service area --------------------------------------------------------- */

/* one centred column: the map that used to sit beside it has gone */
.sarea { display: grid; gap: clamp(26px, 4vw, 48px); max-width: 720px; text-align: center; }
.sarea__p { margin: clamp(18px, 2.4vw, 24px) auto 0; color: var(--on-ink-mute); max-width: 42ch; }
.sarea__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }
.sarea__cta .btn { border-radius: 8px; }
.sarea__cta .btn--line .ico { width: 19px; height: 19px; }
.sarea__list {
  margin: 0;
  font-family: var(--sans);
  /* capped so "Central Canberra" holds on one line inside its own column
     rather than running past the drafting rule */
  font-size: clamp(1.4rem, 4.8vw, 2.2rem);
  font-weight: 700; font-stretch: 100%;
  text-transform: uppercase; line-height: 1.18; letter-spacing: -.002em;
}
.sarea__list .sep { color: var(--copper-lift); }
.sarea__list .t { white-space: nowrap; }

/* --- quote section -------------------------------------------------------- */

.qsec { display: grid; gap: clamp(30px, 4vw, 60px); }
@media (min-width: 960px) {
  .qsec { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(40px, 5vw, 76px); align-items: start; }
}
.qsec__p { margin: clamp(18px, 2.4vw, 24px) 0 0; color: var(--on-bone-mute); max-width: 36ch; }
.qsec__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: clamp(20px, 2.6vw, 26px);
  width: 100%; min-height: 60px; padding: 13px 22px;
  background: var(--copper-deep); color: var(--bone);
  border-radius: 10px; text-decoration: none;
  font-family: var(--sans); font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  font-weight: 620; font-stretch: 104%;
  transition: background .25s var(--ease);
}
.qsec__call:hover { background: #184aab; }
.qsec__call .ico { width: 22px; height: 22px; }
@media (min-width: 560px) { .qsec__call { width: auto; } }
.qsec__info { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; display: grid; gap: 14px; }
.qsec__info li { }
.qsec__info .k {
  display: block; margin-bottom: 5px;
  font-family: var(--sans); font-size: .72rem; font-weight: 620;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-text);
}
.qsec__info a, .qsec__info .v {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--sans); font-size: 1rem; font-weight: 480; font-stretch: 100%;
  text-decoration: none; overflow-wrap: anywhere;
}
.qsec__info a { border-bottom: 1px solid var(--rule-bone); }
.qsec__info a:hover { color: var(--copper-text); border-bottom-color: var(--copper-text); }

/* ==========================================================================
   Contact page
   A short black band with the number in it, then the form and the details
   side by side on light grey. On a phone the details card and its call button
   come first, then the form.
   ========================================================================== */

.chead { background: var(--ink); color: var(--on-ink); }
/* the cap goes on the children, not on .wrap itself, or the band's content
   centres in the viewport instead of lining up with the rest of the page */
.chead__in { padding-block: clamp(30px, 5vw, 54px); }
.chead__in > * { max-width: 48rem; }
.chead .eyebrow { color: var(--copper-lift); }
.chead h1 { margin-top: clamp(12px, 2vw, 18px); font-size: clamp(1.8rem, 5.6vw, 2.9rem); }
.chead__p { margin: clamp(14px, 2vw, 18px) 0 0; color: var(--on-ink-mute); font-size: clamp(1.05rem, 1.7vw, 1.15rem); }
.chead__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vw, 28px); }
.chead__cta .btn { border-radius: 8px; }
.chead__cta .btn .ico { width: 20px; height: 20px; }

/* the band behind the white form card is the light grey, or the card would
   have nothing but its shadow to sit against */
.cmain { background: var(--bone-2); color: var(--ink); }
.cmain__in { display: grid; gap: clamp(20px, 3vw, 32px); padding-block: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) {
  .cmain__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
/* phone order: the details card and its call button first, the form after it */
.cform { order: 2; }
.cside { order: 1; }
@media (min-width: 960px) { .cform { order: 1; } .cside { order: 2; } }

.cform {
  background: #fff;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 14px 38px rgba(17,17,17,.12);
}
.cform h2 { font-size: clamp(1.3rem, 3.4vw, 1.6rem); }
.cform .form { margin-top: clamp(16px, 2.4vw, 22px); }
.cform .btn--solid {
  width: 100%; justify-content: center;
  min-height: 56px; border-radius: 10px;
  font-size: .82rem; letter-spacing: .18em;
}
.cform__note { margin: 14px 0 0; font-size: 1rem; line-height: 1.5; color: var(--on-bone-mute); }
.cform__note a { font-weight: 620; color: var(--copper-text); }

.cside__card {
  background: var(--ink); color: var(--on-ink);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
}
.cside__card h2 { font-size: clamp(1.2rem, 3vw, 1.4rem); color: var(--bone); }
.cside__num {
  display: inline-flex; align-items: center;
  margin-top: 14px; min-height: 52px;
  font-family: var(--sans); font-size: clamp(1.8rem, 7vw, 2.3rem);
  font-weight: 700; font-stretch: 100%; letter-spacing: -.01em;
  color: var(--bone); text-decoration: none; white-space: nowrap;
}
.cside__num:hover { color: var(--copper-lift); }
.cside__call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 14px; padding: 13px 20px;
  background: var(--copper-deep); color: var(--bone);
  border-radius: 10px; text-decoration: none;
  font-family: var(--sans); font-size: .95rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .25s var(--ease);
}
.cside__call:hover { background: #184aab; }

/* no divider lines in here: a small icon and the gap do the separating */
.cside__list { list-style: none; margin: clamp(20px, 3vw, 26px) 0 0; padding: 0; display: grid; gap: 16px; }
.cside__list li { display: flex; align-items: flex-start; gap: 12px; }
.cside__list .ico { flex: 0 0 auto; margin-top: 2px; color: var(--copper-lift); }
.cside__k {
  display: block;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--copper-lift);
  margin-bottom: 4px;
}
.cside__v { font-size: 1rem; line-height: 1.45; color: var(--on-ink); overflow-wrap: anywhere; }
.cside__list a.cside__v { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.cside__list a.cside__v:hover { color: var(--copper-lift); }

/* ==========================================================================
   Service landing pages
   Same hero, trust bar, cards and forms as the home page. The sections in
   between are deliberately different shapes: a checklist, three numbered
   steps, review cards, a short about, and a row of links.
   ========================================================================== */

.inc__grid { display: grid; gap: 10px; }
@media (min-width: 680px)  { .inc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; } }
.inc__grid li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  background: var(--bone-2);
  border-radius: 10px;
  font-size: 1rem; line-height: 1.4;
}
.inc__grid { list-style: none; margin: 0; padding: 0; }
.inc__grid .ico { flex: 0 0 auto; margin-top: .18em; color: var(--copper-text); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.steps li {
  background: var(--ink-3);
  border-radius: 14px;
  padding: clamp(20px, 2.6vw, 28px);
}
.steps b {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  background: var(--copper-deep); color: var(--bone);
  border-radius: 999px;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
}
.steps p { margin: 0; color: var(--on-ink-mute); font-size: 1rem; line-height: 1.5; }
.steps__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }
.steps__cta .btn { border-radius: 8px; }
.steps__cta .btn .ico { width: 20px; height: 20px; }

.oserv { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .oserv { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.oserv a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 72px; padding: 16px 18px;
  background: var(--bone-2); border-radius: 12px;
  text-decoration: none;
  font-family: var(--sans); font-size: 1rem; font-weight: 620; line-height: 1.35;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.oserv a:hover { background: var(--ink); color: var(--bone); }
.oserv .btn__arrow { color: var(--copper-text); }
.oserv a:hover .btn__arrow { color: var(--copper-lift); }

.sabout { display: grid; gap: clamp(18px, 2.6vw, 28px); }
@media (min-width: 900px) { .sabout { grid-template-columns: minmax(0, auto) minmax(0, 34rem); justify-content: start; align-items: start; gap: clamp(30px, 4vw, 56px); } }
.sabout p { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--on-bone-mute); }

.sarea__line { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.5; color: var(--on-ink-mute); max-width: 50ch; }

.fcta { display: grid; gap: clamp(26px, 4vw, 44px); }
@media (min-width: 960px) { .fcta { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(36px, 5vw, 70px); } }
.fcta__p { margin: clamp(16px, 2.2vw, 22px) 0 0; color: var(--on-ink-mute); max-width: 38ch; }
.fcta__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: clamp(20px, 2.6vw, 26px);
  width: 100%; min-height: 60px; padding: 13px 22px;
  background: var(--copper-deep); color: var(--bone);
  border-radius: 10px; text-decoration: none;
  font-family: var(--sans); font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  font-weight: 700; font-stretch: 100%;
  transition: background .25s var(--ease);
}
.fcta__call:hover { background: #184aab; }
.fcta__call .ico { width: 22px; height: 22px; }
@media (min-width: 560px) { .fcta__call { width: auto; } }

/* --- utilities ------------------------------------------------------------ */

.rule { height: 1px; background: var(--rule-bone); border: 0; margin: 0; }
.band--ink .rule { background: var(--rule-ink); }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Light restyle
   The home page carries .lite on <body> and everything below is scoped to it,
   so the other pages are untouched until the class is added to them too. The
   palette is the client's own: soft grey #ECEBEF, white, charcoal #1A1A1A,
   mid grey #6B6B70, black for the header call box, the footer and the call
   button, and the van blue only on quote buttons, ticks and text links.
   ========================================================================== */

.lite {
  --ink: #1a1a1a;            /* charcoal: headings and body */
  --ink-2: #1a1a1a;
  --bone: #ffffff;
  --bone-2: #ecebef;         /* soft grey: hero and alternating sections */
  --bone-3: #e3e2e7;
  --mid: #6b6b70;            /* secondary text and small labels */
  --on-bone-mute: #6b6b70;
  --star: #8a5300;           /* the same amber, one step down so it clears 4.5:1 on the grey */
  --card: 0 1px 2px rgba(26,26,26,.04), 0 10px 30px rgba(26,26,26,.07);
  --card-lift: 0 2px 6px rgba(26,26,26,.05), 0 22px 56px rgba(26,26,26,.13);
}
/* #6B6B70 measures 4.46:1 on the soft grey, so the grey bands take one step
   darker from the same family rather than dropping under AA */
.lite .lead,
.lite .band--bone2,
.lite .phead,
.lite .chead,
.lite .rstrip { --mid: #5f5f64; --on-bone-mute: #5f5f64; }

/* --- type ----------------------------------------------------------------- */

.lite h1, .lite h2, .lite h3,
.lite .h-sec, .lite .h-sub, .lite .qcard__h, .lite .pcard h3 {
  text-transform: none;
  font-weight: 600;
  letter-spacing: -.006em;
  line-height: 1.18;
}
.lite .eyebrow { color: var(--mid); letter-spacing: .14em; font-weight: 600; }
.lite .ftr h4 { letter-spacing: .14em; color: #a1a1a6; }

/* --- header, footer and the call bar: black ------------------------------- */

.lite .hdr__call { background: #000; }
.lite .hdr__call:hover { background: var(--ink); }
.lite .drawer a i { color: var(--mid); }
.lite .callbar .c1 { background: #000; }
.lite .ftr { background: #000; }
.lite .ftr li a:hover { border-bottom-color: var(--bone); }

/* --- hero: full width photograph ------------------------------------------ */

/* Built at 390px first: the photograph fills the whole section, an even dark
   wash is laid over the lot, and the copy and then the quote card run down it
   in one column. From 1100px up the wash becomes a left to right fade and the
   section splits in two inside the existing container: the copy on the dark
   side, the quote card on the open side, both over the same photograph. The
   whole hero is sized to hold inside one desktop screen. */

/* --lead-bg is the only thing that changes between the four pages */
.lite .lead--home                         { --lead-bg: url('/assets/img/wce-van-01-2000.webp'); }
.lite .lead--bathroom-renovation-plumbing { --lead-bg: url('/assets/img/bathroom-timber-vanity-01-2000.webp'); }
.lite .lead--laundry-renovation-plumbing  { --lead-bg: url('/assets/img/laundry-finished-02-2000.webp'); }
.lite .lead--plumbing-maintenance-repairs { --lead-bg: url('/assets/img/drain-machine-01-2000.webp'); }

.lite .lead {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(10,12,16,.72), rgba(10,12,16,.72)), var(--lead-bg);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  color: var(--bone);
}
.lite .lead__in {
  display: grid; gap: clamp(24px, 4vw, 32px);
  padding-block: 56px;
}
.lite .lead__text { display: flex; flex-direction: column; align-items: flex-start; }
.lite .lead__eyebrow { color: var(--bone); margin-bottom: clamp(10px, 1.8vw, 15px); }
.lite .lead h1 {
  font-weight: 600; font-stretch: 100%;
  line-height: 1.14; letter-spacing: -.014em;
  color: var(--bone);
}
.lite .lead__sub {
  margin-top: clamp(13px, 1.8vw, 16px);
  font-weight: 420; color: var(--bone);
  font-size: clamp(1.02rem, 3.5vw, 1.14rem); line-height: 1.5;
  max-width: 42ch;
}

/* the call button is white on the photograph, the one solid pale element above
   the fold, with the quote card */
.lite .lead__call {
  margin-top: clamp(18px, 2.4vw, 24px);
  min-height: 56px;
  background: var(--bone); border-color: var(--bone); color: #111;
  box-shadow: none; font-weight: 600;
  font-size: clamp(1.05rem, 4.4vw, 1.2rem);
}
.lite .lead__call:hover { background: #e8eaf0; border-color: #e8eaf0; transform: none; }

/* The trust points as one quiet line rather than four pills. On a phone they
   wrap and are separated by spacing; from 980px up they hold on a single line
   with a middot between them, which is why the wording is kept short. */
.lite .lead__pts {
  list-style: none; margin: clamp(10px, 1.6vw, 14px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px clamp(18px, 4vw, 28px);
}
.lite .lead__pts li {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; line-height: 1.35; color: #e8eaf0;
}
.lite .lead__pts li + li::before { content: none; }
.lite .lead__pts .ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--copper-lift); }
.lite .lead__pts a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  text-decoration: none; color: #e8eaf0;
}
.lite .lead__pts a:hover { color: var(--bone); }
.lite .lead__stars { color: var(--star-lift); font-size: .76rem; letter-spacing: .06em; }

/* Home page only: the trust line is set at 15px with more air between the
   points. The three service landing pages share this hero and are left as they
   were signed off. */
.lite .lead--home .lead__pts { gap: 4px clamp(22px, 4vw, 32px); }
.lite .lead--home .lead__pts li { font-size: 15px; }
.lite .lead--home .lead__stars { font-size: 14px; }

/* the form card, white. The hero one sits on the photograph and takes a deeper
   shadow to lift off it; the one in the quote section further down the page is
   on the grey and keeps the shadow it was signed off with. */
.lite .qcard {
  background: var(--bone); color: var(--ink);
  box-shadow: var(--card-lift);
}
.lite .lead__form .qcard { box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.lite .qcard__s { color: var(--mid); }
.lite .form--card .form__msg { background: rgba(31,95,214,.07); }

/* Phone and tablet: one column, the order is eyebrow, headline, subheadline,
   call button, trust points, then the quote card at the full width of the
   container. */
@media (max-width: 1099px) {
  .lite .lead__in { grid-template-columns: minmax(0, 1fr); }
  .lite .lead__text,
  .lite .lead__form { grid-column: 1; grid-row: auto; }
}

/* Per-photograph framing. All four are portrait phone shots and the hero is a
   wide band on desktop and a tall one on a phone, so neither shape suits them
   and the default middle loses the subject of every one. Each is pinned to
   what has to stay in frame.

   The two numbers do one job each. On desktop the picture is scaled to the
   width of the screen, so only the second, the vertical, has any slack to move
   in; on a phone it is scaled to the height of the hero, so only the first,
   the horizontal, does. One declaration therefore sets the desktop crop and
   the phone crop independently.

   home     the van, and on a phone the signage on the back half of it
   bathroom the mixer, the vessel basin and the timber vanity under them
   laundry  the tap and the stainless tub, over the machine built in beneath
   repairs  the lifted drain cover, and the machine standing over it          */
.lite .lead--home                         { background-position: 80% 40%; }
.lite .lead--bathroom-renovation-plumbing { background-position: 35% 68%; }
.lite .lead--laundry-renovation-plumbing  { background-position: 40% 61%; }
.lite .lead--plumbing-maintenance-repairs { background-position: 72% 24%; }

/* From 1100px: two columns inside the existing container, 7fr and 5fr on a
   64px gutter and centred against each other, both sitting on the photograph.
   The dark wash turns into a left to right fade so the copy keeps its contrast
   while the right of the picture stays open behind the quote card. The padding
   is set so the whole hero, form button included, holds inside 1440x900. */
@media (min-width: 1100px) {
  .lite .lead {
    min-height: 620px;
    background-image:
      linear-gradient(90deg, rgba(10,12,16,.85) 0%, rgba(10,12,16,.6) 45%, rgba(10,12,16,.15) 100%),
      var(--lead-bg);
  }
  .lite .lead__in {
    grid-template-columns: 7fr 5fr;
    column-gap: 64px; row-gap: 0;
    align-items: center;
    padding-block: 96px 112px;
  }
  .lite .lead__text { grid-column: 1; grid-row: 1; }
  .lite .lead__form {
    grid-column: 2; grid-row: 1; align-self: center;
    width: 100%; max-width: 440px; margin-left: auto;
  }
  .lite .lead__in h1 { font-size: 44px; line-height: 1.12; max-width: none; }
  /* row 1 the two licences, row 2 same-day service and the reviews link */
  .lite .lead__pts {
    display: grid; grid-template-columns: auto auto; justify-content: start;
    column-gap: 28px; row-gap: 2px;
  }
  .lite .lead__pts li { font-size: 15px; color: #e8eaf0; }
  .lite .lead__pts .ico { width: 15px; height: 15px; }
  .lite .lead__pts li + li::before { content: none; }
  .lite .lead__pts a { color: #e8eaf0; }
  .lite .lead__stars { font-size: 14px; }

  /* the hero card is the tightest form on the site, so it holds in one screen */
  .lite .lead__form .qcard { padding: clamp(18px, 2vw, 24px); }
  .lite .lead__form .qcard__h { font-size: 1.4rem; }
  .lite .lead__form .qcard__s { font-size: .93rem; margin-top: 6px; }
  .lite .lead__form .form--card { margin-top: 16px; gap: 11px; }
  .lite .lead__form .form--card .form__foot { padding-top: 14px; }
  .lite .lead__form .field input,
  .lite .lead__form .field select { min-height: 46px; padding-block: 10px; }
  .lite .lead__form .field label { font-size: .9rem; margin-bottom: 5px; }
  .lite .lead__form .form--card .btn--solid { min-height: 52px; }
}

/* On a very wide screen the container and the body size both take one step up
   so the page does not sit as a narrow strip, and the hero headline with it. */
@media (min-width: 1800px) {
  .wrap { max-width: 1480px; }
  body { font-size: 18px; }
  .lite .lead--home .lead__in h1 { font-size: 52px; }
}

/* --- trust bar: a white strip -------------------------------------------- */

.lite .tbar { background: var(--bone); color: var(--ink); border-block: 0; }
.lite .tbar li { padding: 15px 0; font-weight: 560; letter-spacing: .1em; }
.lite .tbar .ico { color: var(--copper-text); opacity: 1; }

/* The home page strip, and the three service landing pages alongside it: one
   centred row with the same gap between every point and no tracking, rather
   than a five column grid that spaced them unevenly and set them out in small
   caps. */
.lite .tbar--home ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(20px, 3.6vw, 52px);
}
.lite .tbar--home li { padding-right: 0; letter-spacing: normal; }

/* --- cards: white, soft shadow, no outline -------------------------------- */

.lite .rstrip__c,
.lite .pcard,
.lite .rcard,
.lite .scell,
.lite .fam__panel {
  background: var(--bone);
  border-color: transparent;
  box-shadow: var(--card);
}
.lite .rstrip__c { border-radius: 14px; }
.lite .rstrip__who { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--mid); }

.lite .pcard { border-radius: 16px; }
.lite .pcard__n { background: var(--bone); color: var(--ink); }

.lite .rcard { border-radius: 16px; }
.lite .rcard__who { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lite .rcard__src { color: var(--mid); }

/* the one black card on the page, as asked */
.lite .scell { color: var(--ink); }
.lite .scell--go { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lite .scell--go:hover { transform: translateY(-3px); box-shadow: var(--card-lift); }
.lite .scell--go:hover .btn__arrow { color: var(--ink); }
.lite .scell--cta { background: none; box-shadow: none; }
.lite .scell--cta a { background: #000; color: var(--bone); }
.lite .scell--cta a:hover { background: var(--ink); }

.lite .fam__panel { color: var(--ink); }
.lite .fam__panel dl > div { background: var(--bone-2); }
.lite .fam__panel dt { color: var(--mid); }

/* --- recent work ---------------------------------------------------------- */

.lite .shots__tab { background: var(--bone); border-color: transparent; color: var(--mid); }
.lite .shots__tab:hover { color: var(--ink); border-color: var(--ink); }
.lite .shots__tab[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* --- service area and quote ----------------------------------------------- */

.lite .sarea__p { color: var(--mid); }
.lite .sarea__list { text-transform: none; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lite .sarea__list .sep { color: var(--mid); font-weight: 400; }
.lite .qsec__info .k { color: var(--mid); }

/* ==========================================================================
   Light restyle, the rest of the site
   Everything below carries the same palette onto the service pages, the
   services page, about and contact. Nothing here is a new component: these
   are the existing blocks taking the light colours, sentence case headings
   and the white card treatment.
   ========================================================================== */

/* --- buttons: one text style everywhere ----------------------------------- */

.lite .btn,
.lite .pcard__go, .lite .ocard__go, .lite .scell--cta a,
.lite .cside__call, .lite .rlink a, .lite .callbar a,
.lite .shots__tab, .lite .drawer a {
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
}
.lite .btn, .lite .pcard__go, .lite .ocard__go, .lite .rlink a { font-size: .95rem; }
.lite .form--card .btn--solid, .lite .cform .btn--solid { font-size: .95rem; letter-spacing: .01em; }
.lite .btn--ink:hover { background: #000; }
.lite .btn { border-radius: 8px; }

/* --- headings and small labels -------------------------------------------- */

/* uppercase is left to the small eyebrow labels only */
.lite .tbar li, .lite .sgrid .scell { text-transform: none; }
/* .sabout p outranks .eyebrow, so the label was setting in caps at body size */
.lite .sabout .eyebrow { font-size: .75rem; line-height: 1.4; }
.lite .creds .k, .lite .phead__side dt, .lite .mtx__n,
.lite .ocard__call, .lite .steps p, .lite .mtx__cell p,
.lite .ocard__ul li, .lite .sarea__line, .lite .shead--ink .shead__p,
.lite .sabout p { color: var(--mid); }
.lite .creds .k, .lite .phead__side dt, .lite .mtx__n { letter-spacing: .14em; }

/* --- cards: white, rounded, a very light shadow, no outlines -------------- */

.lite .mtx__cell, .lite .steps li, .lite .ocard,
.lite .inc__grid li, .lite .oserv a, .lite .creds li,
.lite .phead__side div, .lite .cform {
  background: var(--bone);
  border-color: transparent;
  box-shadow: var(--card);
}
.lite .inc__grid li, .lite .creds li, .lite .phead__side div,
.lite .fam__panel dl > div { border-radius: 12px; }
/* .ocard keeps its 12px so the photograph that bleeds to its top corners
   still meets the card edge exactly */
.lite .mtx__cell, .lite .steps li, .lite .oserv a { border-radius: 14px; }
.lite .ocard__ul .ico, .lite .inc__grid .ico { color: var(--copper-text); }
/* the step numbers were blue discs; blue is kept for quote buttons and ticks */
.lite .steps b { background: var(--ink); color: var(--bone); }
.lite .oserv a:hover { background: var(--ink); color: var(--bone); }
.lite .oserv a:hover .btn__arrow { color: var(--bone); }

/* --- services page: the even "Other services" grid ------------------------ */

/* Every card here is text only and every card is the same card, so the set
   reads as one block rather than seven cards of different depths. One column
   at 390, two from 640, four from 1100, each card only as deep as its own
   content so a short one does not stretch to the tallest in its row. */
.lite .ocards--even { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 640px)  { .lite .ocards--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .lite .ocards--even { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lite .ocard--even { padding: 28px; border-radius: 16px; }
/* the button follows the content rather than being pushed to the card's foot */
.lite .ocard--even .ocard__act { margin-top: 0; padding-top: 24px; }
.ocard__ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  background: var(--bone-2); border-radius: 12px; color: var(--copper-text);
}
.ocard__p { margin-top: 10px; font-size: .95rem; line-height: 1.5; color: var(--mid); }

/* the last card closes the second row: black, and the one button is the phone */
.lite .ocard--ask { background: #000; color: var(--bone); box-shadow: none; }
.lite .ocard--ask .ocard__p { color: var(--on-ink-mute); }
.lite .ocard--ask .ocard__go { background: var(--bone); color: var(--ink); }
.lite .ocard--ask .ocard__go:hover { background: var(--bone-3); }

/* --- renovation pages: the full renovation coordination row ---------------- */

/* Three cards, so the row runs three tracks rather than the four the services
   page uses. One column at 390 and three from 760, which is where the home
   page puts its three priority cards side by side as well. */
.lite .ocards--three { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 760px) { .lite .ocards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the quote button and the phone link under the cards, the same pair the
   priority cards carry on the home page */
.coord__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(22px, 3vw, 30px); }
.coord__cta .btn { border-radius: 8px; }
.coord__call {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  color: var(--on-bone-mute); text-decoration: none;
}
.coord__call:hover { color: var(--copper-text); }

/* --- page heads: soft grey, the home page hero typography, no form -------- */

.lite .phead, .lite .chead { background: var(--bone-2); color: var(--ink); }
.lite .phead .eyebrow, .lite .chead .eyebrow { color: var(--mid); }
.lite .phead__lede, .lite .chead__p { color: var(--mid); }
.lite .phead__photo { background: var(--bone-3); }
.lite .phead .btn--line, .lite .chead .btn--line {
  border-color: var(--rule-bone); color: var(--ink);
}
.lite .phead .btn--line:hover, .lite .chead .btn--line:hover {
  background: var(--ink); color: var(--bone); border-color: var(--ink);
}

/* --- the charcoal bands: the final call to action on each page ------------ */

/* --ink is charcoal under .lite, so .band--ink is already #1A1A1A. What is
   left is the type and the two call buttons that were blue or black on it. */
.lite .band--ink .eyebrow, .lite .ty .eyebrow, .lite .state cite { color: #a1a1a6; }
.lite .band--ink .qsec__p, .lite .band--ink .shead__p { color: var(--on-ink-mute); }
.lite .band--ink .qsec__info .k, .lite .hero__phone .lbl { color: #a1a1a6; }
.lite .band--ink .qsec__info a { border-bottom-color: var(--rule-ink); }
.lite .band--ink .creds li { background: rgba(255,255,255,.07); box-shadow: none; }
.lite .band--ink .creds .k { color: #a1a1a6; }
/* a black button on charcoal would not read, so the call button goes white */
.lite .qsec__call, .lite .fcta__call, .lite .cside__call {
  background: var(--bone); color: var(--ink); font-weight: 600;
}
.lite .qsec__call:hover, .lite .fcta__call:hover, .lite .cside__call:hover {
  background: var(--bone-2);
}

/* --- contact ------------------------------------------------------------- */

.lite .cform { box-shadow: var(--card-lift); }
.lite .cside__card { box-shadow: none; }
.lite .cside__k { color: #a1a1a6; }
.lite .cform__note { color: var(--mid); }