/* Tenax Contracting
   Design tokens and rules follow the brand sheet in "Tenax Contracting Site.dc.html".
   Square edges only, hairline rules, gaps instead of borders where possible. */

:root {
  --navy: #10233A;
  --navy-hover: #1B3454;
  --white: #FFFFFF;
  --warm-gray: #F4F2EF;
  --gray-text: #6B6560;
  --amber: #E0A22E;

  --body-text: #3A3733;
  --muted: #9A948E;
  --faint: #B3ACA4;

  --rule: rgba(16, 35, 58, 0.14);
  --rule-soft: rgba(16, 35, 58, 0.10);
  --rule-strong: rgba(16, 35, 58, 0.25);

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --narrow: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;

  --pad: 16px;
  /* Widest the text and photo grids are allowed to get. Backgrounds ignore this. */
  --content: 1440px;
  /* The header and call strip are given fixed heights below, so the hero can be sized
     against them in CSS alone — no measuring, and correct on the first paint. */
  --header-h: 68px;
  --callstrip-h: 57px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body-text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Short pages (contact) would otherwise leave the footer floating mid-screen. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

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

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-hover); }

h1, h2, h3 { margin: 0; font-weight: 700; }

p { margin: 0; }

ul { margin: 0; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

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

/* Full-bleed: backgrounds, bands and photos run edge to edge. Content is kept to a
   readable measure by --pad, which grows on wide screens (see the desktop block). */
.shell { width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  font-family: var(--narrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Type helpers ---------- */

.label {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.label--onnavy { color: rgba(255, 255, 255, 0.55); }

.rule { height: 1px; background: var(--rule); }

.h1 {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}

.h2 {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}

.lede { font-size: 14px; line-height: 1.55; color: var(--body-text); }

.meta { font-size: 13px; color: var(--gray-text); }

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

.btn {
  display: inline-block;
  padding: 14px 18px;
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-hover); color: #fff; }

.btn--reversed { background: #fff; color: var(--navy); }
.btn--reversed:hover { background: var(--warm-gray); color: var(--navy); }

.btn--outline { border: 1px solid var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn--ghost { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.btn--phone { letter-spacing: 0.08em; font-size: 15px; text-transform: none; }

/* ---------- Wordmark ---------- */

.wordmark { display: inline-block; }
/* Height drives it; the 4:1 logo sets its own width. */
.wordmark__logo { display: block; height: 26px; width: auto; }
.wordmark__logo--footer { height: 24px; }
.wordmark__name {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--navy);
}
.wordmark__rule { height: 1px; background: var(--navy); margin: 3px 0 2px; }
.wordmark__sub {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 7px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy);
}
.wordmark--reversed .wordmark__name,
.wordmark--reversed .wordmark__sub { color: #fff; }
.wordmark--reversed .wordmark__sub { color: rgba(255, 255, 255, 0.85); }
.wordmark--reversed .wordmark__rule { background: rgba(255, 255, 255, 0.6); }

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid rgba(16, 35, 58, 0.12);
}

.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--pad);
  /* Pinned so --header-h stays true and the hero fills the rest of the screen exactly.
     --header-h must equal this plus the 1px border below. */
  min-height: 67px;
}

.masthead__actions { display: flex; align-items: center; gap: 10px; }

.masthead__call {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 11px 12px;
}
.masthead__call:hover { background: var(--navy); color: #fff; }

.navtoggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px;
}
.navtoggle__bar { width: 22px; height: 2px; background: var(--navy); }

/* Full-width basis so the open menu wraps onto its own line under the bar rather than
   squeezing in beside the logo. The bar's own padding sets its left and right edges. */
.nav {
  display: none;
  flex-basis: 100%;
}

.nav--open {
  display: block;
  border-top: 1px solid var(--rule);
  padding: 4px 0 10px;
}

.nav__list { list-style: none; margin: 0; padding: 0; }

.nav__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.nav__link[aria-current='page'] { color: var(--gray-text); }

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

.hero { position: relative; }

/* Fills the screen below the header, but stops short by the height of the call strip
   so the phone buttons stay above the fold — they are the point of the page.
   The plain height is the fallback where svh is unsupported. */
.hero__img {
  width: 100%;
  height: 420px;
  height: calc(100svh - var(--header-h) - var(--callstrip-h));
  min-height: 420px;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(16, 35, 58, 0.94) 0%,
    rgba(16, 35, 58, 0.55) 42%,
    rgba(16, 35, 58, 0.05) 100%);
}
.hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px var(--pad) 22px;
}
.hero__title {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 33px;
  line-height: 1.06;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}
.hero__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.hero__actions { display: none; }

/* ---------- Call strip (phone only) ---------- */

.callstrip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}
.callstrip__item {
  padding: 17px 12px;
  min-height: 57px;   /* keeps --callstrip-h true */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.callstrip__item--fill { background: var(--navy); color: #fff; }
.callstrip__item--fill:hover { background: var(--navy-hover); color: #fff; }
.callstrip__item--plain { background: #fff; color: var(--navy); }
.callstrip__item--plain:hover { background: var(--warm-gray); }

/* ---------- Area band ---------- */

.band {
  background: var(--navy);
  padding: 14px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.band__places,
.band__note {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.band__places { color: rgba(255, 255, 255, 0.72); }
.band__note { color: var(--amber); }

/* ---------- Sections ---------- */

.section { padding: 30px var(--pad) 6px; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.section__more {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--rule-strong);
}

/* ---------- Services grid ---------- */

.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin-top: 10px;
  border-top: 1px solid var(--rule);
}

.service {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.service__num { display: none; }

.service__name {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.service__text { display: none; }

.services__all {
  padding: 14px 0;
  display: flex;
  align-items: center;
}
.services__all a {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
  border-bottom: 1px solid var(--rule-strong);
}

/* ---------- Project cards ---------- */

.projects { display: flex; flex-direction: column; gap: 20px; margin-top: 14px; }

.project { display: block; }
.project__media { position: relative; }
.project__img { width: 100%; height: 250px; object-fit: cover; }

/* Anchor the crop away from the middle for shots where the subject sits high or low
   in the frame. */
.project__img--bottom { object-position: center bottom; }
.project__img--top { object-position: center top; }

.project__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.project__pair .project__img { height: 210px; }

/* Three-step sequences: before / during / after, or three views of one job. */
.project__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.project__trio .project__img { height: 170px; }

.project__tag {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 8px;
}
.project__tag--before { background: var(--navy); color: #fff; }
.project__tag--after { background: var(--amber); color: var(--navy); }
.project__tag--during { background: var(--gray-text); color: #fff; }

.project__caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
}
.project__name {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.project__where { font-size: 12px; color: var(--gray-text); white-space: nowrap; }

/* ---------- Overstock promo ---------- */

.promo { background: var(--navy); padding: 26px var(--pad) 28px; margin-top: 30px; }
.promo__head {
  margin-top: 12px;
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: #fff;
}
.promo__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.promo__cta { margin-top: 18px; }
.promo__media { display: none; }

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

.getnumber { padding: 28px var(--pad) 34px; background: var(--warm-gray); }
.getnumber__text { margin: 10px 0 18px; font-size: 14px; line-height: 1.55; color: var(--body-text); }

.factlist { display: flex; flex-direction: column; gap: 1px; background: var(--rule); }
.fact {
  background: #fff;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.fact__key {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-text);
  white-space: nowrap;
}
.fact__value { font-size: 14px; color: var(--body-text); text-align: right; }
.fact__value--phone {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.steps { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.2); margin-top: 24px; }
.step { background: var(--navy); padding: 18px 18px 20px; }
.step__num {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.step__text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }

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

.footer {
  background: var(--navy);
  padding: 22px var(--pad) 26px;
}
.footer__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.footer__meta {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}
.footer__meta a { color: rgba(255, 255, 255, 0.85); }
.footer__meta a:hover { color: #fff; }

/* ---------- Page head ---------- */

.pagehead { padding: 24px var(--pad) 16px; }
.pagehead__text { margin-top: 8px; }

/* ---------- Filters ---------- */

.filters {
  display: flex;
  gap: 8px;
  padding: 4px var(--pad) 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  flex: none;
  border: 1px solid var(--rule-strong);
  color: var(--navy);
  background: #fff;
  padding: 9px 13px;
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.filter[aria-pressed='true'] { background: var(--navy); color: #fff; border-color: var(--navy); }

.worklist { display: flex; flex-direction: column; gap: 26px; padding: 0 var(--pad) 30px; }
.worklist .project__img { height: 290px; }
.worklist .project__pair .project__img { height: 210px; }
/* Three across a phone screen is only ~113px wide, so keep them short or they
   render as tall slivers. */
.worklist .project__trio .project__img { height: 150px; }
.worklist .project__name { font-size: 16px; letter-spacing: 0.06em; }
.worklist .project__caption { flex-direction: column; gap: 3px; }
.worklist .project__where { font-size: 13px; }

.project[hidden] { display: none; }

.loadmore {
  display: block;
  width: 100%;
  border: 1px solid var(--rule-strong);
  padding: 16px;
  text-align: center;
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.loadmore:hover { background: var(--navy); color: #fff; }

.emptynote { padding: 8px 0 0; font-size: 14px; color: var(--gray-text); }
.emptynote[hidden] { display: none; }
.loadmore[hidden] { display: none; }
.loadmore__wrap { display: flex; justify-content: center; padding: 24px var(--pad) 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Services page ---------- */

/* Phone only. At 375px wide this crops a 576px-wide photo, so it stays sharp; stretched
   across a desktop viewport the same file is a heavily upscaled sliver, so it is
   dropped at that width and the page runs straight into the service list. */
.serviceshot { width: 100%; height: 190px; object-fit: cover; object-position: center 60%; }

.servicehead {
  background: var(--navy);
  padding: 14px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.servicehead__left,
.servicehead__right {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.servicehead__left { color: rgba(255, 255, 255, 0.72); }
.servicehead__right { color: var(--amber); }

.servicerow { display: flex; gap: 14px; padding: 20px var(--pad) 22px; }
.servicerow:nth-child(even) { background: var(--warm-gray); }
.servicerow__num {
  flex: none;
  width: 24px;
  padding-top: 5px;
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.servicerow__body { flex: 1; }
.servicerow__name {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.servicerow__text { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--body-text); }

.closer { background: var(--navy); padding: 24px var(--pad) 26px; }
.closer__head {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}
.closer__text { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.closer__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* ---------- Overstock ---------- */

.stockmeta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 13px; color: var(--gray-text); }

.stock { display: flex; flex-direction: column; gap: 1px; background: var(--rule); }

.stock__head { display: none; }

.stockitem {
  background: #fff;
  display: flex;
  gap: 14px;
  padding: 14px var(--pad);
  align-items: flex-start;
}
.stockitem--gone { opacity: 0.55; }
.stockitem__img { width: 96px; height: 96px; object-fit: cover; flex: none; }
.stockitem__body { flex: 1; min-width: 0; }
.stockitem__name {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}
.stockitem__note { font-size: 13px; color: var(--gray-text); padding-top: 2px; }
/* Low-stock flag. A darkened amber, so it still passes contrast on white. */
.stockitem__low { color: #A8741A; font-weight: 600; }
.stockitem__prices { display: flex; gap: 14px; align-items: baseline; padding-top: 9px; flex-wrap: wrap; }
.stockitem__price {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
}
.stockitem__price small { font-size: 13px; font-weight: 600; color: var(--gray-text); }
.stockitem__installed { font-size: 13px; color: var(--gray-text); }
.stockitem__installed b { color: var(--body-text); font-weight: 600; }
/* Names the number on phones, where the table header is hidden. */
.stockitem__lbl { }
.stockitem__gone {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.stockfoot { background: var(--warm-gray); padding: 24px var(--pad) 30px; }
.stockfoot__cta { margin-top: 14px; }

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

.bigcall {
  display: block;
  background: var(--navy);
  color: #fff;
  padding: 20px var(--pad);
  text-align: center;
}
.bigcall:hover { background: var(--navy-hover); color: #fff; }
.bigcall__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.bigcall__number {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.06em;
  padding-top: 4px;
}

.bigtext {
  display: block;
  border: 1px solid var(--navy);
  border-top: none;
  padding: 16px;
  text-align: center;
  font-family: var(--narrow);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bigtext:hover { background: var(--navy); color: #fff; }

.details { padding: 24px var(--pad) 8px; display: flex; flex-direction: column; gap: 16px; }
.detail__key { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-text); }
.detail__value { font-size: 15px; line-height: 1.5; color: var(--body-text); }

.form { padding: 26px var(--pad) 34px; margin-top: 20px; background: var(--warm-gray); }
.form__fields { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.form__field {
  background: #fff;
  border: 1px solid rgba(16, 35, 58, 0.2);
  padding: 15px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--body-text);
  width: 100%;
}
.form__field::placeholder { color: var(--muted); }
.form__field:focus { border-color: var(--navy); outline: none; }
textarea.form__field { min-height: 96px; resize: vertical; }
.form__submit { width: 100%; }
.form__note { margin-top: 12px; font-size: 13px; color: var(--gray-text); }
.form__status { margin-top: 12px; font-size: 14px; color: var(--navy); }
.form__status:empty { margin-top: 0; }

/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width: 900px) {
  /* 40px gutters up to the content cap, then the gutters absorb the extra width so
     text and photo grids stop growing while the page itself stays full width. */
  :root {
    --pad: max(40px, (100vw - var(--content)) / 2);
    --header-h: 85px;   /* 84px bar + 1px border */
  }

  body { font-size: 16px; }

  .h1 { font-size: 52px; letter-spacing: 0.04em; }
  .h2 { font-size: 34px; }
  .label { font-size: 12px; letter-spacing: 0.22em; }
  .lede { font-size: 16px; }

  /* Header */
  .masthead__bar { padding: 18px var(--pad); min-height: 84px; }
  .wordmark__logo { height: 36px; }
  .wordmark__name { font-size: 19px; letter-spacing: 0.32em; }
  .wordmark__rule { margin: 4px 0 3px; }
  .wordmark__sub { font-size: 8px; letter-spacing: 0.3em; }

  .navtoggle, .masthead__call { display: none; }

  .nav { display: block !important; flex-basis: auto; border: 0; padding: 0; }
  .nav__list { display: flex; align-items: center; gap: 34px; }
  .nav__link {
    padding: 0;
    border: 0;
    font-size: 13px;
    letter-spacing: 0.16em;
  }
  .nav__link[aria-current='page'] {
    color: var(--navy);
    border-bottom: 2px solid var(--navy);
    padding-bottom: 2px;
  }
  .nav__link--cta {
    background: var(--navy);
    color: #fff;
    padding: 13px 18px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: none;
  }
  .nav__link--cta:hover { background: var(--navy-hover); color: #fff; }

  /* Hero — full viewport height; there is no call strip at this width. */
  .hero__img {
    height: 600px;
    height: calc(100svh - var(--header-h));
    min-height: 600px;
    object-position: center 62%;
  }
  .hero__scrim {
    background: linear-gradient(100deg,
      rgba(16, 35, 58, 0.93) 0%,
      rgba(16, 35, 58, 0.78) 38%,
      rgba(16, 35, 58, 0.12) 78%);
  }
  .hero__body {
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--pad);
  }
  .hero__inner { max-width: 560px; }
  .hero__title { font-size: 74px; line-height: 0.98; letter-spacing: 0.02em; }
  .hero__text { margin-top: 22px; font-size: 19px; max-width: 460px; }
  .hero__actions { display: flex; gap: 14px; margin-top: 30px; }
  .hero__actions .btn { padding: 18px 24px; font-size: 15px; letter-spacing: 0.12em; }
  .hero__actions .btn--phone { font-size: 17px; letter-spacing: 0.08em; }

  .callstrip { display: none; }

  /* Band */
  .band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 16px var(--pad);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .band__places, .band__note { font-size: 12px; }

  /* Sections */
  .section { padding: 52px var(--pad) 0; }
  .section--tint { background: var(--warm-gray); padding-bottom: 56px; }
  .section__head { align-items: flex-end; }
  .section__title { margin-top: 12px; }
  .section__more { font-size: 12px; padding-bottom: 3px; }

  /* Services grid */
  .services {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--rule);
    border: 0;
    margin-top: 34px;
  }
  .service {
    background: #fff;
    padding: 22px 20px 26px;
    border: 0;
  }
  .service--feature { background: var(--navy); }
  .service__num {
    display: block;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--faint);
  }
  .service--feature .service__num { color: rgba(255, 255, 255, 0.5); }
  .service__name { margin-top: 12px; font-weight: 700; font-size: 20px; letter-spacing: 0.05em; }
  .service--feature .service__name { color: #fff; }
  .service__text {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-text);
  }
  .service--feature .service__text { color: rgba(255, 255, 255, 0.7); }
  .services__all { display: none; }

  /* Projects */
  .section--work .section__head { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
  .projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
  }
  .projects .project__img { height: 300px; }
  .project__name { font-size: 17px; }
  .project__where { font-size: 13px; }
  .project__caption { padding-top: 11px; }

  /* Promo */
  .promo {
    margin-top: 56px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* The photos here are portrait phone shots. Without a floor on the height the
       band collapses to the text's height and crops half the picture away. */
    min-height: 560px;
  }
  .promo__body { display: flex; flex-direction: column; justify-content: center; }
  /* Left edge lines up with the page gutter; the right side only needs a normal
     gap before the photo, not the full wide-screen gutter. */
  .promo__body { padding: 56px 40px 60px var(--pad); }
  .promo__head { margin-top: 18px; font-size: 34px; line-height: 1.16; }
  .promo__text { margin-top: 16px; font-size: 16px; max-width: 470px; }
  .promo__cta { margin-top: 26px; }
  .promo__cta .btn { padding: 16px 22px; font-size: 14px; }

  /* The photo fills its half without contributing its own intrinsic height,
     so the band is sized by the text column rather than by the image. */
  .promo__media { display: block; position: relative; }
  .promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Get a number */
  .getnumber {
    background: var(--navy);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 52px;
    padding: 60px var(--pad) 64px;
    position: relative;
    overflow: hidden;
  }
  /* Watermark in the dead space below the fact list. Decorative, so it lives in CSS
     rather than the markup and never reads out to a screen reader. */
  .getnumber::after {
    content: '';
    position: absolute;
    left: var(--pad);
    bottom: 30px;
    width: 300px;
    height: 323px;
    background: url('../img/brand/logo-mark.svg') no-repeat center / contain;
    opacity: 0.08;
    pointer-events: none;
  }
  .getnumber > * { position: relative; z-index: 1; }
  .getnumber .label { color: rgba(255, 255, 255, 0.55); }
  .getnumber__title {
    margin-top: 16px;
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
  }
  .getnumber__text { display: none; }
  .steps { grid-template-columns: repeat(3, 1fr); margin-top: 34px; }

  .factlist { background: rgba(255, 255, 255, 0.2); align-self: start; }
  .fact { background: var(--navy-hover); padding: 18px 22px; }
  .fact--lead { background: #fff; padding: 24px 22px; }
  .fact__key { color: rgba(255, 255, 255, 0.55); }
  .fact__value { color: rgba(255, 255, 255, 0.88); font-size: 15px; }
  .fact__value a { color: #fff; }
  .fact--lead .fact__key { color: var(--gray-text); }
  .fact--lead .fact__value { color: var(--navy); }
  .fact__value--phone { font-size: 28px; letter-spacing: 0.05em; }
  .fact--wide { display: block; }
  .fact--wide .fact__value { text-align: left; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }

  /* Footer */
  .footer { padding: 34px var(--pad); }
  .wordmark__logo--footer { height: 30px; }
  .wordmark--footer .wordmark__name { font-size: 17px; }
  .footer__meta { display: flex; gap: 30px; font-size: 13px; }

  /* Page head */
  .pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 44px var(--pad) 22px;
  }
  .pagehead__text { margin-top: 10px; max-width: 520px; }

  .filters { padding: 0 var(--pad) 0; overflow: visible; flex-wrap: wrap; }
  .pagehead .filters { padding: 0; }
  .filter { padding: 11px 16px; font-size: 13px; }

  /* Work list becomes a grid */
  .worklist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 24px;
    padding: 20px var(--pad) 8px;
  }
  .worklist .project__img { height: 270px; }
  .worklist .project--wide { grid-column: span 2; }
  .worklist .project--wide .project__img,
  .worklist .project--wide .project__pair .project__img { height: 380px; }
  .worklist .project--tall .project__img { height: 380px; }
  .worklist .project--full { grid-column: 1 / -1; }
  .worklist .project--full .project__trio { gap: 3px; }
  .worklist .project--full .project__trio .project__img { height: 380px; }
  .worklist .project__pair { gap: 3px; }
  .worklist .project__tag { font-size: 11px; padding: 6px 10px; }
  .worklist .project__caption { flex-direction: row; justify-content: space-between; padding-top: 12px; }
  .worklist .project__name { font-size: 17px; }
  .worklist .emptynote { grid-column: 1 / -1; }

  .loadmore { width: auto; padding: 15px 30px; font-size: 14px; }
  .loadmore__wrap { display: flex; justify-content: center; padding: 38px var(--pad) 8px; }

  /* Services page */
  .serviceshot { display: none; }
  .servicehead { padding: 14px var(--pad); }
  .servicerow { padding: 26px var(--pad) 30px; gap: 22px; }
  .servicerow__num { width: 40px; font-size: 13px; }
  .servicerow__name { font-size: 24px; }
  .servicerow__text { font-size: 16px; max-width: 760px; }

  .closer {
    padding: 40px var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
  .closer__body { max-width: 640px; }
  .closer__head { font-size: 27px; }
  .closer__actions { margin-top: 0; flex-wrap: nowrap; }
  .closer__actions .btn { padding: 18px 24px; white-space: nowrap; }

  /* Overstock table */
  .stockintro {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 48px var(--pad) 40px;
    background: var(--warm-gray);
  }
  .stockintro__img { width: 100%; height: 280px; object-fit: cover; }
  .stockmeta { gap: 26px; margin-top: 22px; }

  .stock { display: block; background: none; padding: 36px var(--pad) 12px; }
  .stock__head {
    display: grid;
    grid-template-columns: 132px 1fr 200px 200px;
    gap: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(16, 35, 58, 0.2);
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray-text);
  }
  .stockitem {
    display: grid;
    grid-template-columns: 132px 1fr 200px 200px;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-soft);
    align-items: center;
  }
  .stockitem--gone { opacity: 0.5; }
  .stockitem__img { width: 132px; height: 110px; }
  .stockitem__name { font-weight: 700; font-size: 21px; }
  .stockitem__note { font-size: 14px; padding-top: 4px; }
  .stockitem__prices { display: contents; }
  .stockitem__price { font-size: 26px; }
  .stockitem__installed {
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 26px;
    color: var(--navy);
  }
  .stockitem__installed b { font-weight: 700; color: var(--navy); }
  /* The "Installed" column header says it already. */
  .stockitem__lbl { display: none; }
  .stockitem__installed .say { font-size: 16px; font-weight: 600; color: var(--gray-text); }
  .stockitem__gone { font-size: 16px; letter-spacing: 0.14em; }

  .stockfoot {
    background: var(--navy);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px var(--pad);
    margin-top: 28px;
  }
  .stockfoot__head {
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #fff;
  }
  .stockfoot__text { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
  .stockfoot__actions { display: flex; justify-content: flex-end; gap: 14px; }
  .stockfoot__actions .btn { padding: 18px 24px; white-space: nowrap; }
  .stockfoot__cta { margin-top: 0; }

  /* Contact page */
  .contactgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    padding: 0 var(--pad) 20px;
    align-items: start;
  }
  .bigcall { padding: 30px 24px; }
  .bigcall__number { font-size: 40px; }
  .details { padding: 28px 0 0; gap: 22px; }
  .form { margin-top: 0; padding: 30px 30px 34px; }
  .form__submit { width: auto; padding: 16px 26px; }
}

@media (min-width: 1200px) {
  .hero__title { font-size: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .masthead, .callstrip, .filters, .loadmore, .form { display: none; }
}