/* ═══════════════════════════════════════════════════════════════════════════
   Connect Plumbing — page styles.

   Layered on top of styles.css (the Industry design system). Every value here
   comes from the design handoff; tokens are never re-declared, only used.
   Rules of the system that must not be broken: square corners, hairline
   borders, transparent fills, registration marks on every framed object, one
   solid accent button, no shadows.
   ═══════════════════════════════════════════════════════════════════════ */

/* — base — */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.page { min-height: 100vh; background: var(--color-bg); }

/* Content sits on the 1200px axis with a fluid gutter. */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 18px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 0;
  color: var(--color-bg);
}

/* Small uppercase furniture text: nav links, kickers, labels, title blocks. */
.caps {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tabular figures on every number that sits in a column. */
.tnum { font-feature-settings: "tnum" 1; }

/* — header — */
.site-nav {
  padding-inline: max(28px, calc((100% - 1200px) / 2 + 28px));
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
  gap: 24px;
}
.site-nav .brand {
  display: block;
  margin-right: auto;
  line-height: 0;
}
.site-nav .brand img {
  display: block;
  height: 68px;
  width: auto;
}
.site-nav a.caps {
  white-space: nowrap;
  color: var(--color-text);
}
.site-nav a.caps:hover { color: var(--color-accent); }
.site-nav a.caps[aria-current="page"] { color: var(--color-accent-700); }

/* The one deliberately solid object on the page. */
.btn.btn-primary,
.btn.btn-outline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.btn.btn-primary {
  padding: 8px 18px;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn.btn-primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-bg);
}
.btn.btn-primary:active {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}

.btn.btn-outline {
  padding: 10px 22px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 45%, transparent);
}
.btn.btn-outline:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text);
}
.btn.btn-outline:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-lg { padding: 10px 22px; }

/* — hero — */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(62vh, 620px);
  display: flex;
  background: var(--color-accent-900);
}
/* The only photograph on the site that keeps its natural colour. The 16%
   x-position keeps the crane mast and concrete frame in the crop at every
   viewport width — verify at ~900px and ~1400px if the box aspect changes. */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 16% 45%;
  filter: saturate(1.05);
}
/* Paper wash: the dense end sits under the copy, the photo stays vivid left. */
.hero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-bg) 22%, transparent) 26%,
    color-mix(in srgb, var(--color-bg) 74%, transparent) 52%,
    color-mix(in srgb, var(--color-bg) 94%, transparent) 78%
  );
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 72px);
  color: var(--color-text);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* width + container-type make this the sizing reference for the headline
   below, so each headline line can be capped at the size that still fits the
   column. width: 100% is required: inline-size containment zeroes the element's
   content contribution, and without a definite width this flex item collapses. */
.hero-copy {
  width: 100%;
  max-width: 640px;
  container-type: inline-size;
}

/* Display type. margin-left is optical left alignment for the leading cap. */
.display {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0 -0.052em;
  color: var(--color-text);
}
/* Each line of the hero H1 is one line, at every width. The clamp is the
   design's type scale; the cqw term is the size at which that line exactly
   fills the 640px copy column, so it can never wrap. Measured against Barlow
   Condensed 600 at 0.01em tracking: line 2 is 14.69cqw wide and line 1 is
   11.63cqw, taken down ~2% here for rendering variance between browsers.
   Without the second term "Commercial plumbing." wraps above about 1380px,
   where the 75px cap overruns the fixed column, and both lines wrap below
   360px. The first declaration is the fallback where cqw is unsupported. */
.hero .display {
  font-size: clamp(44px, 6.4vw, 88px);
  font-size: min(clamp(44px, 6.4vw, 88px), 14.4cqw);
}
.hero .display span { display: block; }
/* Line 1 is the H1 base x the headline scale (0.85). */
.hero .display .line-1 {
  font-size: clamp(37px, 5.44vw, 75px);
  font-size: min(clamp(37px, 5.44vw, 75px), 11.4cqw);
}

.lead {
  font-size: 17px;
  line-height: 28px;
  margin: 36px 0 0;
  color: var(--color-text);
}
.hero .lead { max-width: 54ch; }

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* — numbered section header: kicker over a hairline rule —
   accent-700, not base accent: small accent text needs the deeper step. */
.kicker {
  display: block;
  font-size: 13px;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 12px;
}
.rule {
  height: 1px;
  border: 0;
  margin: 0 0 24px;
  background: var(--color-divider);
}
.rule-32 { margin-bottom: 32px; }

/* — headings — */
.h-32, .h-28, .h-22, .h-19 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.h-32 { font-size: 32px; line-height: 36px; }
.h-28 { font-size: 28px; line-height: 32px; }
.h-22 { font-size: 22px; line-height: 24px; }
.h-19 { font-size: 19px; line-height: 24px; }

.body-copy {
  font-size: 15px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 20px 0 0;
}

/* — the engineering plate (Sheet 01 / Sheet 02) — */
.plate-section { padding: 72px 0 60px; }
.plate { position: relative; }

.plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--color-divider);
}
.plate-head > span {
  padding: 12px 24px;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.plate-head .plate-title {
  flex: 1;
  min-width: 16ch;
}
.plate-head .plate-reg {
  border-left: 1px solid var(--color-divider);
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.plate-foot {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Sheet 01 table. Reads as a printed sheet, so no row hover.
   Column widths live here rather than on the col elements: the site ships a
   Content-Security-Policy with no style-src 'unsafe-inline', so a style
   attribute would be dropped and the fixed layout would collapse. */
.plate-table { table-layout: fixed; }
.plate-table col:nth-child(1) { width: 72px; }
.plate-table col:nth-child(2) { width: 28%; }
.plate-table col:nth-child(3) { width: 26%; }
.plate-table tbody tr:hover { background: transparent; }
.plate-table th {
  padding: 12px 24px 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.plate-table th:first-child { padding-left: 24px; }
.plate-table td {
  padding: 12px 24px 12px 0;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.plate-table .cell-no {
  padding-left: 24px;
  padding-right: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}
.plate-table .cell-item { font-size: 15px; line-height: 24px; }
/* The loudest object in the row. */
.plate-table .cell-record {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  line-height: 24px;
  letter-spacing: 0.02em;
}
.plate-table .cell-remark {
  font-size: 15px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.cell-label { display: none; }

/* Every auto-fit track floor below is wrapped in min(, 100%). Without it a
   track keeps its floor even when the container is narrower — at a 320px
   viewport (also what 400% zoom on a 1280px screen reports) the 300px "In the
   field" figure overran its column and pushed its registration marks off the
   page. The floor is unchanged at every width where it fits. */
/* — 02 scope of work — */
.section { padding: 48px 0 60px; }
.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.scope-cell { padding: 24px; }
.scope-cell .body-copy { margin-top: 18px; }

/* — 03 building types —
   No row gap: the row rules do the spacing. */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
.sector {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.sector .no {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}

/* — 04 in the field — */
.field-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px clamp(24px, 5vw, 96px);
  align-items: center;
  padding: 48px 0 72px;
}
.field-section .body-copy { max-width: 48ch; }
.figure { margin: 0; }
/* Registration marks must not eat clicks on the image. */
.figure .corner { pointer-events: none; }
.figure-4x3 { width: 100%; aspect-ratio: 4 / 3; }
.figure-3x2 { width: 100%; aspect-ratio: 3 / 2; }

/* — 05 bid requests — */
.contact-section { padding: 48px 0 96px; }
.contact-section .body-copy { max-width: 60ch; margin-bottom: 32px; }
/* The 290px floor is required: the email address is one unbreakable token
   that overruns a narrower column and collides with the next cell. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 24px clamp(24px, 3vw, 48px);
}
.contact-cell {
  border-top: 1px solid var(--color-divider);
  padding-top: 16px;
  min-width: 0;
}
.contact-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-bottom: 8px;
}
.contact-email {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.contact-lines {
  display: block;
  font-size: 15px;
  line-height: 24px;
}

/* — project list — */
.projects-head { padding: 72px 0 48px; }
.projects-head .display { font-size: clamp(40px, 5.4vw, 72px); }
.projects-head .lead { max-width: 62ch; margin-top: 32px; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: 12px 0 64px;
}
.featured .figure { margin: 0 0 24px; }
.featured .kicker { margin-bottom: 10px; }

.index-section { padding: 0 0 48px; }
/* Reads DOWN in columns that reflow by width, per the handoff — an alphabetical
   index is scanned down a column, not across rows. Multi-column rather than an
   auto-fit grid, because a grid fills row-first; 300px is the same track floor. */
.index-grid {
  columns: 300px;
  column-gap: 0;
  padding: 0 24px 12px;
}
.index-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 10px 24px 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  break-inside: avoid;
}
.index-row .no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
  min-width: 2.5ch;
}
.index-row .name { font-size: 15px; line-height: 22px; }

.closing-section { padding: 24px 0 96px; }
.closing-section .body-copy { max-width: 60ch; margin-bottom: 32px; }

/* — 404 — */
.notfound { padding: 96px 0 120px; }
.notfound .body-copy { max-width: 54ch; margin-bottom: 32px; }
.display-sm { font-size: clamp(40px, 5.4vw, 72px); }
.btn-row-flush { margin-top: 0; }

/* — footer — */
.site-footer { border-top: 1px solid var(--color-divider); }
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px clamp(20px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 48px;
  font-size: 13px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.site-footer-inner img {
  display: block;
  height: 40px;
  width: auto;
  opacity: 0.85;
}
.site-footer-inner .push { margin-left: auto; }

/* — responsive —
   Sheet 01 has fixed column widths; below the point where they crowd, the rows
   linearize (number + item on one line, record and remark beneath) rather than
   growing a horizontal scroller. */
@media (max-width: 760px) {
  .plate-table,
  .plate-table colgroup,
  .plate-table col,
  .plate-table thead,
  .plate-table tbody,
  .plate-table tr,
  .plate-table td {
    display: block;
    width: auto;
  }
  .plate-table thead { display: none; }
  .plate-table tr {
    padding: 16px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  }
  .plate-table tr:last-child { border-bottom: 0; }
  .plate-table td {
    padding: 0;
    border-bottom: 0;
  }
  .plate-table .cell-no {
    display: inline;
    padding: 0;
    margin-right: 12px;
  }
  .plate-table .cell-item { display: inline; }
  .plate-table .cell-record { margin-top: 8px; }
  .plate-table .cell-remark { margin-top: 4px; }
  .cell-label {
    display: block;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    margin-top: 12px;
  }
}

/* Below the width where the hero copy still clears the photograph, the layout
   stacks and the copy sits over the image. The horizontal wash was aimed at a
   column on the right, so it stops doing its job; swap it for a vertical one
   that keeps the photograph vivid at the top and puts the copy on paper. */
@media (max-width: 820px) {
  .hero-wash {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg) 26%, transparent) 0%,
      color-mix(in srgb, var(--color-bg) 72%, transparent) 30%,
      color-mix(in srgb, var(--color-bg) 92%, transparent) 52%,
      color-mix(in srgb, var(--color-bg) 96%, transparent) 100%
    );
  }
  .hero-inner { justify-content: flex-start; }
}

@media (max-width: 560px) {
  /* Give the wordmark its own row rather than letting one nav link ride up
     beside it. */
  .site-nav {
    gap: 14px 20px;
    padding-block: var(--space-4);
  }
  .site-nav .brand {
    flex: 1 0 100%;
    margin-right: 0;
  }
  .site-nav .brand img { height: 52px; }
  .index-grid { padding: 0 20px 12px; }
  .index-row { padding-right: 0; }
  .plate-head > span { padding: 12px 20px; }
  .plate-head .plate-reg {
    border-left: 0;
    border-top: 1px solid var(--color-divider);
    flex: 1;
  }
  .plate-foot { padding: 12px 20px; }
  .site-footer-inner .push { margin-left: 0; }
}