/* Wexler Plumbing — the page on top of Broadsheet.
 *
 * broadsheet.css holds the system: the two faces, the ruled cells, the
 * band, the buttons, the type scale. This file holds what is true of THIS
 * shop and not of the other one: the accent, the two-column lead, and the
 * places where a one-person business needs a different shape from a company.
 *
 * Read alongside ../renner/page.css. The two share every primitive and
 * agree on nothing above them -- Wexler's lead sets the headline in column
 * one with the deck beside it, Renner's runs a centred banner across the
 * full measure. Same system, two papers.
 */

:root {
  /* Verdigris. Copper does this when water has been through it for eighty
     years, which is most of what this shop works on. It also has to stay
     clear of the four accents already in use across the demos: Marek's
     copper #e09a3d, alder-co's cyan #43c3dd, Nocturne's blurple and Vance's
     red. Green is the corner of the wheel nobody had. */
  --color-accent: #0f6b62;
  --color-accent-ink: #ffffff;
  --color-accent-wash: #e4efec;
}

/* ------------------------------------------------------------- noscript --- */
.noscript {
  padding: 14px 18px;
  background: var(--color-accent-wash);
  border-bottom: var(--rule-hair) solid var(--color-divider);
}
.noscript p { margin: 0; font-size: 14.5px; }

/* ------------------------------------------------------------- masthead --- */
.mast { background: var(--color-bg); position: relative; z-index: 2; }
.mast__inner {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
  padding-block: 18px 16px;
}
.mast__rule { border-top: var(--rule-bold) solid var(--color-rule); }

.brand { text-decoration: none; display: grid; gap: 1px; margin-right: auto; }
.brand__name {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.1; letter-spacing: -0.01em;
}
.brand__tag { font-size: 12px; color: var(--color-neutral-600); letter-spacing: 0.02em; }

.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.navlink {
  font: inherit; font-size: 14.5px;
  background: none; border: 0; cursor: pointer;
  padding: 7px 10px; color: var(--color-neutral-700);
  border-bottom: 2px solid transparent;
  transition: color 0.16s linear, border-color 0.16s linear;
}
.navlink:hover { color: var(--color-text); }
.navlink[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }

.mast__call {
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 10px 16px;
  border: var(--rule-hair) solid var(--color-rule);
  white-space: nowrap;
}
.mast__call:hover { background: var(--color-text); color: var(--color-bg); }

/* --------------------------------------------------------------- banner --- */
/* The photograph is the header, the way the HVAC solo demo does it: frame
   behind, copy on the scrim, the owner on a chip beside it. Broadsheet's
   parts rather than Nocturne's, so the chip is a square ruled plate and not
   a rounded translucent one, and the kicker is a tracked label rather than a
   rule-and-text kicker.
   Renner still opens on type, so the pair does not become one shape. */
.banner {
  --banner-ink: 12, 14, 15;
  /* The wrap's left margin: 0 until the viewport passes .wrap's 1240px, then
     half the overflow. Every horizontal stop below hangs off it. Measuring
     the stops from the viewport edge instead is what walked the Marek copy
     out of its own wash and measured 1.17:1 at 2560px on 2026-09-23 --
     .banner__inner is a centred .wrap and the gradient has to follow it. */
  --gx: max(0px, (100vw - 1240px) / 2);
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-height: clamp(440px, 68vh, 600px);
  border-bottom: var(--rule-bold) solid var(--color-rule);
}
.banner__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.banner__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 52%;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}
/* Two passes. The vertical one seats the copy and darkens the foot so the
   3px rule at the bottom lands on something; the horizontal one keeps the
   left column dark enough for body text while leaving the flame -- the only
   bright thing in the frame, and the reason to use it -- actually visible on
   the right. First stop is negative on purpose: below 1240px the opening
   ramp sits off canvas so narrow screens keep the flat plateau; past it the
   ramp walks on and more of the frame reaches the edge. */
.banner__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(var(--banner-ink), 0.58) 0%,
      rgba(var(--banner-ink), 0.30) 30%,
      rgba(var(--banner-ink), 0.38) 64%,
      rgba(var(--banner-ink), 0.72) 100%),
    linear-gradient(90deg,
      rgba(var(--banner-ink), 0.34) calc(var(--gx) - 320px),
      rgba(var(--banner-ink), 0.84) var(--gx),
      rgba(var(--banner-ink), 0.80) calc(var(--gx) + 520px),
      rgba(var(--banner-ink), 0.40) calc(var(--gx) + 720px),
      rgba(var(--banner-ink), 0.10) calc(var(--gx) + 920px));
}
.banner__inner {
  width: 100%;
  padding-block: clamp(32px, 5vw, 66px);
  display: grid; gap: clamp(22px, 3vw, 44px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.banner__copy { max-width: 52ch; }

/* Every on-photo colour is qualified with .banner. These rules sit BELOW the
   base type in this file, but .banner__d is (0,1,0) and so is .deck -- at
   equal specificity source order decides, and relying on that is how the
   Marek hero shipped slate-grey body text on a dark photograph. */
.banner .banner__k { color: rgba(255, 255, 255, 0.82); }
.banner .banner__h { color: #fff; margin-top: 14px; max-width: 13ch; }
.banner .banner__d { color: rgba(255, 255, 255, 0.90); margin-top: 20px; max-width: 46ch; }
.banner__a { margin-top: clamp(22px, 2.8vw, 30px); }
.banner .banner__f { margin-top: 16px; color: rgba(255, 255, 255, 0.80); }
/* btn-primary is a solid accent fill, so it carries its own contrast over any
   photograph. btn-ghost is ink-on-transparent with an ink border, which is
   invisible here -- it goes white. */
.banner .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.banner .btn-ghost:hover { background: #fff; color: var(--color-text); border-color: #fff; }

/* The owner chip. Same idea as the HVAC demo's -- a small portrait and a
   name, so the face survives on a phone instead of being cropped out of a
   banner -- with the corners and the blur taken off it, because this system
   has neither. */
.ownercard {
  margin: 0; justify-self: start;
  display: flex; align-items: center; gap: 14px;
  padding: 10px;
  /* 0.80, not 0.66. At 300px the card reaches into the light right-hand end
     of the scrim, and the role line measured 4.44:1 at 1280px -- under AA by
     a whisker, and only at that one width, which is exactly the kind of miss
     a single-width check waves through. The panel is the card's own ground,
     so darkening it fixes every width without touching the photograph. */
  background: rgba(var(--banner-ink), 0.80);
  border: var(--rule-hair) solid rgba(255, 255, 255, 0.22);
  border-top: var(--rule-bold) solid var(--color-accent);
}
.ownercard img {
  flex: none; width: 82px; height: 102px;
  object-fit: cover; display: block;
}
.ownercard__cap { display: flex; flex-direction: column; gap: 4px; padding-right: 6px; }
.ownercard__name {
  font-family: var(--font-heading); font-weight: 600; font-size: 16.5px;
  line-height: 1.2; color: #fff;
}
.ownercard__role {
  font-size: 12.5px; line-height: 1.45; max-width: 34ch;
  /* Solid, not white at 80%. Same value, and it takes the compositing out of
     the question for anything reading the computed colour. */
  color: #d4d8da;
}

@media (min-width: 900px) {
  /* Wide: the chip stops being a chip. It takes its own column and the
     portrait fills it, caption underneath -- which is what the HVAC demo
     does at its own breakpoint and what this was missing. A 66px thumbnail
     beside a headline set at 82px is not a face, it is a stamp. */
  .banner__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .ownercard {
    display: block; justify-self: end;
    width: 100%; max-width: 300px; padding: 12px;
  }
  .ownercard img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .ownercard__cap { padding: 13px 2px 2px; gap: 5px; }
  .ownercard__name { font-size: 19px; }
  .ownercard__role { font-size: 13px; max-width: none; }
}

/* --------------------------------------------------------------- cells --- */
/* The credential strip, directly under the banner -- the equivalent of the
   HVAC demo's ribbon, and the reason the banner needs no bottom margin. */
.cells { margin-top: clamp(28px, 4vw, 48px); margin-bottom: clamp(30px, 4.5vw, 56px); }

/* .band-sec and .band__img lived here and are gone with the band section:
   the brazing frame is the banner now. broadsheet.css still declares .band
   because Renner still has one. */

/* ------------------------------------------------------------- section --- */
.sec { padding-block: 0 clamp(34px, 5vw, 68px); }
.sec__head {
  padding-top: clamp(22px, 3vw, 34px);
  margin-bottom: clamp(18px, 2.6vw, 30px);
  border-top: var(--rule-bold) solid var(--color-rule);
}
.sec__head .h2 { margin-top: 10px; max-width: 24ch; }
.sec__more { margin: 24px 0 0; }
.sec__note { margin-top: 20px; max-width: 62ch; }

/* -------------------------------------------------------------- services --- */
/* A ruled list, not cards. The number, the name, what it is, and what it
   starts at -- four columns on a wide screen, stacked below. */
.svc { border-top: var(--rule-hair) solid var(--color-divider); }
.svc__row {
  display: grid; gap: 4px clamp(16px, 2.5vw, 40px);
  padding: 20px 0;
  border-bottom: var(--rule-hair) solid var(--color-divider);
}
.svc__n { color: var(--color-accent); padding-top: 3px; }
.svc__t { margin: 0; }
.svc__b { margin: 0; color: var(--color-neutral-700); }
.svc__m { color: var(--color-neutral-600); }

@media (min-width: 840px) {
  .svc__row {
    grid-template-columns: 46px minmax(0, 250px) minmax(0, 1fr) minmax(0, 190px);
    align-items: start;
  }
  .svc__m { text-align: right; }
}

/* ---------------------------------------------------------------- jobs --- */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 32px); }
@media (max-width: 899px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .jobs { grid-template-columns: minmax(0, 1fr); } }

.job { margin: 0; }
.job__frame { overflow: hidden; }
.job img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.job:hover img { transform: scale(1.03); }
.job__cap {
  display: block; margin-top: 12px; padding-top: 11px;
  border-top: var(--rule-hair) solid var(--color-divider);
}
.job__t { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.25; }
.job__m { display: block; margin-top: 4px; font-size: 12.5px; color: var(--color-neutral-600); }

/* -------------------------------------------------------------- quotes --- */
.quotes { display: grid; gap: clamp(18px, 2.6vw, 32px); margin-top: 22px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote {
  margin: 0; padding: 20px 20px 18px;
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-divider);
  border-left: var(--rule-bold) solid var(--color-accent);
}
.quote__q { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.4; }
.quote__w { font-size: 12.5px; color: var(--color-neutral-600); }

/* ------------------------------------------------------------ coverage --- */
.cover { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 760px) { .cover { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.areas { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 16px; }
.hours { margin-top: 12px; border-top: var(--rule-hair) solid var(--color-divider); }
.hours__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; font-size: 14.5px;
  border-bottom: var(--rule-hair) solid var(--color-divider);
}
.hours__row span:first-child { color: var(--color-neutral-600); }

/* ------------------------------------------------------------ keepring --- */
.kr {
  padding: clamp(24px, 3.5vw, 44px);
  background: var(--color-accent-wash);
  border-top: var(--rule-bold) solid var(--color-accent);
}
.kr__h { margin-top: 10px; max-width: 20ch; }
.kr__b { margin-top: 14px; max-width: 58ch; }
.kr__steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .kr__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kr__step {
  display: block; padding: 14px 18px 16px 0;
  border-top: var(--rule-hair) solid var(--color-accent);
}
.kr__n { display: block; color: var(--color-accent); margin-bottom: 6px; }
.kr__x { font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-700); }

/* ----------------------------------------------------------- subpages --- */
.page { padding-block: clamp(30px, 4.5vw, 60px) clamp(16px, 2.4vw, 26px); }
.page__h { margin-top: 12px; max-width: 16ch; }
.page__deck { margin-top: 20px; }

.about { display: grid; gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (min-width: 880px) { .about { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.about__cells { margin-top: 30px; }
.about__fig { margin: 0; }
.about__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.about__fig figcaption { margin-top: 10px; padding-top: 9px; border-top: var(--rule-hair) solid var(--color-divider); }

/* ----------------------------------------------------------------- faq --- */
.faq { border-top: var(--rule-hair) solid var(--color-divider); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-divider); }
.faq__h { margin: 0; font: inherit; }
.faq__q {
  width: 100%; display: flex; gap: 20px; justify-content: space-between; align-items: baseline;
  font: inherit; font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 0; color: var(--color-text);
}
.faq__sign { flex: none; width: 14px; color: var(--color-accent); font-family: var(--font-body); }
.faq__sign::before { content: '+'; }
.faq__q[aria-expanded="true"] .faq__sign::before { content: '\2013'; }
.faq__a { display: none; padding: 0 0 20px; }
.faq__a[data-open] { display: block; }
.faq__a .body { max-width: 68ch; }

/* ----------------------------------------------------------------- cta --- */
.cta { background: var(--color-text); color: var(--color-bg); }
.cta__inner {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
  padding-block: clamp(30px, 4.5vw, 56px);
}
.cta__h { max-width: 18ch; }
.cta__f { margin-top: 10px; color: var(--color-neutral-400); }
.cta .btn-primary { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-text); }
.cta .btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ---------------------------------------------------------------- foot --- */
.foot { background: var(--color-sunk); border-top: var(--rule-hair) solid var(--color-divider); }
.foot__inner {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block: clamp(28px, 4vw, 48px);
}
.foot__inner .label { margin-bottom: 10px; }
.foot__inner .fine { color: var(--color-neutral-700); }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot__link {
  font: inherit; font-size: 13.5px; background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--color-neutral-700); text-align: left;
}
.foot__link:hover { color: var(--color-text); text-decoration: underline; }

/* --------------------------------------------------------------- small --- */
@media (max-width: 719px) {
  .mast__inner { flex-wrap: wrap; }
  .brand { width: 100%; margin-right: 0; }
  .nav { margin-right: auto; }
  .cell { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-divider); padding-right: 0; }
  .cells { grid-template-columns: minmax(0, 1fr); }
  .cta__inner { align-items: flex-start; }
}