/* ===========================================================================
   j4tx.com — design tokens and the editorial template.

   One stylesheet for the whole site. It is external rather than inlined in
   every page head so a design change is one edit instead of six, and so the
   launch gate reads page text without wading through 700 lines of CSS.

   Palette rule (J4 umbrella): maroon, black, white, and greys derived from
   them. No blue, no cream, no other accent. J4 Water Works blue and High
   Standards yellow live on those companies' own sites, never here.
   =========================================================================== */

:root {
  --maroon: #500203;
  --maroon-deep: #3a0102;
  --maroon-soft: #6d1a1b;
  --black: #131414;
  --white: #ffffff;

  --ink: #1c1d1d;
  --ink-muted: #4a4c4c;
  --ink-subtle: #6f7272;
  --paper: #faf8f7;
  --paper-2: #f2eeed;
  --line: #e2dcdb;
  --line-strong: #cfc6c5;

  --font-head: "Arvo", Georgia, serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, serif;

  --wrap: 1180px;
  --wrap-narrow: 820px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(19, 20, 20, 0.06), 0 8px 24px rgba(19, 20, 20, 0.06);
  --nav-h: 74px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 56px); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--black);
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--maroon-soft); }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 24px; }

:focus-visible { outline: 3px solid var(--maroon-soft); outline-offset: 3px; }

/* ------------------------------------------------------------- top bar ---- */

.topbar {
  background: var(--black);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 24px;
}
.topbar a { color: rgba(255, 255, 255, 0.82); text-decoration: none; margin-left: 20px; }
.topbar a:hover { color: var(--white); }
.topbar-strong { color: var(--white); font-weight: 700; }
@media (max-width: 860px) { .topbar-links { display: none; } .topbar { justify-content: center; text-align: center; } }

/* ----------------------------------------------------------------- nav ---- */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  transition: box-shadow 0.2s ease;
}
.nav.scrolled { box-shadow: var(--shadow); }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { height: 40px; width: auto; }
.nav-logo span {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  letter-spacing: 0.1em; color: var(--black);
}
@media (max-width: 520px) { .nav-logo span { display: none; } }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 9px 14px; border-radius: var(--radius);
  font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-links a:hover { background: var(--paper-2); color: var(--maroon); }
.nav-links a[aria-current="page"] { color: var(--maroon); }
.nav-links .nav-cta {
  background: var(--maroon); color: var(--white); margin-left: 8px;
}
.nav-links .nav-cta:hover { background: var(--maroon-deep); color: var(--white); }
@media (max-width: 980px) { .nav-links { display: none; } }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--black); margin: 5px 0; border-radius: 2px; }
@media (max-width: 980px) { .nav-toggle { display: block; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--maroon-deep); color: var(--white);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 8px; padding: 32px;
}
.mobile-menu[hidden] { display: none; }
.mobile-close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 0; color: var(--white); font-size: 40px; line-height: 1; cursor: pointer;
}
.mobile-logo { font-family: var(--font-head); letter-spacing: 0.12em; font-size: 15px; opacity: 0.7; margin: 0 0 18px; }
.mobile-links { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.mobile-links a {
  color: var(--white); text-decoration: none; font-family: var(--font-head);
  font-size: 24px; padding: 10px 18px;
}
.mobile-links a:hover { color: var(--white); opacity: 0.75; }
.mobile-contact { margin-top: 26px; font-size: 13.5px; opacity: 0.72; text-align: center; }

/* --------------------------------------------------------------- bleed ----
   The opening claim. The scrim is fixed rather than sampled from the photo,
   because we cannot art-direct the photography we get handed and white type
   has to stay legible over whatever shows up. A missing image falls back to a
   maroon gradient, which is why a missing photo never looks broken and why
   site.config.js tracks it as an open item instead.                          */

.bleed {
  position: relative;
  background: linear-gradient(150deg, var(--maroon-deep) 0%, var(--maroon) 52%, var(--black) 100%);
  color: var(--white);
  padding: 92px 24px 64px;
  overflow: hidden;
}
.bleed.has-image::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--bleed-image);
  background-size: cover; background-position: center 38%;
}
.bleed-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,20,20,0.35) 0%, rgba(19,20,20,0.78) 100%); }
.bleed.has-image .bleed-scrim { backdrop-filter: saturate(0.9); }
.bleed:not(.has-image) .bleed-scrim { background: none; }
.bleed-inner { position: relative; max-width: var(--wrap); margin: 0 auto; }
.bleed h1 { color: var(--white); font-size: clamp(32px, 5vw, 54px); max-width: 17ch; margin-bottom: 0.4em; }
.bleed .eyebrow {
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 18px;
}
.bleed-sub { font-family: var(--font-serif); font-size: clamp(17px, 2vw, 20px); max-width: 62ch; color: rgba(255,255,255,0.9); }
.bleed-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.bleed-badges {
  position: relative; max-width: var(--wrap); margin: 52px auto 0;
  display: flex; gap: 44px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 26px;
}
.bleed-badge strong { display: block; font-family: var(--font-head); font-size: 30px; color: var(--white); }
.bleed-badge span { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.66); }

/* Buttons over a scrim MUST use the on-dark variants. A maroon outline on a
   near-black photo is an invisible button, and that is not hypothetical. */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: var(--radius);
  font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent;
}
.btn-on-dark-solid { background: var(--white); color: var(--maroon-deep); }
.btn-on-dark-solid:hover { background: var(--paper-2); color: var(--maroon-deep); }
.btn-on-dark { border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-on-dark:hover { border-color: var(--white); background: rgba(255,255,255,0.1); color: var(--white); }
.btn-solid { background: var(--maroon); color: var(--white); }
.btn-solid:hover { background: var(--maroon-deep); color: var(--white); }

/* ---------------------------------------------------------- kids page ---- */

.kids-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.kids-step {
  position: relative;
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--maroon);
  background: var(--white);
}
.kids-step-number {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
}
.kids-step h3 { font-size: 21px; }
.kids-step p { color: var(--ink-muted); }
.kids-download {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(280px, 1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}
.kids-preview {
  display: block;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.kids-preview img { width: 100%; }
.kids-download-copy h3 { font-size: clamp(24px, 3vw, 34px); }
.kids-download-copy p { font-family: var(--font-serif); font-size: 18px; }
.kids-prize { margin: 0; }
.kids-prize img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--line);
}
.kids-prize figcaption {
  margin-top: 12px;
  color: var(--ink-subtle);
  font-size: 14px;
  text-align: center;
}
.kids-notice {
  padding: 26px 28px;
  border-left: 5px solid var(--maroon);
  background: var(--white);
  box-shadow: var(--shadow);
}
.kids-notice h3 { color: var(--maroon); }
@media (max-width: 760px) {
  .kids-steps { grid-template-columns: 1fr; }
  .kids-download { grid-template-columns: 1fr; }
  .kids-preview { max-width: 420px; margin: 0 auto; }
}

/* -------------------------------------------------------- family band ---- */

.family-band { padding: 72px 0; background: var(--white); }
.family-band-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(34px, 6vw, 76px); align-items: center;
}
.family-photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.family-photo img { display: block; width: 100%; height: auto; }
.family-copy p:not(.section-label):not(.section-more) { font-family: var(--font-serif); font-size: 18px; color: var(--ink-muted); }
@media (max-width: 820px) {
  .family-band { padding: 54px 0; }
  .family-band-grid { grid-template-columns: 1fr; gap: 28px; }
  .family-copy { max-width: 680px; }
}

/* --------------------------------------------------------- section nav ---- */

.sectionnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.sectionnav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
}
.sectionnav a {
  white-space: nowrap; padding: 13px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.sectionnav a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

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

.section { padding: 76px 0; }
.section.tone-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--maroon); font-weight: 700; margin: 0 0 14px;
}
.section-title { font-size: clamp(25px, 3.4vw, 36px); max-width: 22ch; }
.section-sub { font-family: var(--font-serif); font-size: 18.5px; color: var(--ink-muted); max-width: 68ch; margin-bottom: 34px; }
.section-more { margin-top: 30px; font-weight: 700; }
.section-more a { text-decoration: none; border-bottom: 2px solid var(--maroon); padding-bottom: 2px; }

/* ------------------------------------------------------------ chapters ----
   Numbered steps with serif numerals. An abstract process becomes something
   with a visible beginning and end.                                          */

.chapters { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.chapter {
  display: grid; grid-template-columns: 92px 1fr; gap: 28px;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter-num {
  font-family: var(--font-serif); font-size: 46px; line-height: 1;
  color: var(--maroon); opacity: 0.42;
}
.chapter-body h3 { font-size: 22px; margin-bottom: 0.5em; }
.chapter-link {
  display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700;
  text-decoration: none; border-bottom: 2px solid var(--line-strong); padding-bottom: 2px;
}
.chapter-link:hover { border-bottom-color: var(--maroon); }
@media (max-width: 640px) {
  .chapter { grid-template-columns: 1fr; gap: 8px; }
  .chapter-num { font-size: 34px; }
}

/* ----------------------------------------------------------- fieldnote ----
   One claim, set large, framed. The line a reader repeats and an AI assistant
   quotes back. Two of these on one page is one too many.                     */

.fieldnote {
  margin: 0; padding: 40px 44px;
  border-left: 4px solid var(--maroon);
  background: var(--paper);
}
.fieldnote blockquote {
  margin: 0; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.45; color: var(--black);
}
.fieldnote figcaption {
  margin-top: 18px; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-subtle);
}

/* ------------------------------------------------------ highlight grid ----
   One cell inverted, so "specialist, not commodity" is shown at a glance
   instead of asserted in a sentence.                                         */

.highlight-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden;
}
.highlight-cell { padding: 30px 28px; border-right: 1px solid var(--line-strong); background: var(--white); }
.highlight-cell:last-child { border-right: 0; }
.highlight-cell h4 { font-size: 17.5px; margin-bottom: 0.5em; }
.highlight-cell p { font-size: 15.5px; color: var(--ink-muted); margin: 0; }
.highlight-cell.is-inverted { background: var(--maroon); }
.highlight-cell.is-inverted h4 { color: var(--white); }
.highlight-cell.is-inverted p { color: rgba(255,255,255,0.86); }
@media (max-width: 760px) {
  .highlight-cell { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .highlight-cell:last-child { border-bottom: 0; }
}

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

.strip {
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; text-align: center; padding: 20px 24px;
  font-family: var(--font-serif); font-size: 17px;
}
.strip a { color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 14.5px; }

/* ------------------------------------------------------ company cards ---- */

.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.company-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; background: var(--white);
  display: flex; flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.company-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.company-card h3 { font-size: 18.5px; margin-bottom: 6px; }
.company-role {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--maroon); font-weight: 700; margin-bottom: 12px;
}
.company-tagline { font-size: 15px; color: var(--ink-muted); flex: 1; }
.company-foot {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.company-domain { font-size: 14px; font-weight: 700; text-decoration: none; }
.company-domain:hover { text-decoration: underline; }
.company-phone { font-size: 14px; color: var(--ink-muted); text-decoration: none; margin-left: auto; }
.company-phone:hover { color: var(--maroon); }
.company-card.is-compact { padding: 22px 22px; }

/* ---------------------------------------------------------- show more ----
   Every item stays in the DOM, hidden with CSS rather than unmounted. These
   cards ARE the interlinking between this hub and the pages under it, so
   rendering only six would quietly cut the site's internal link graph to save
   some scrolling. Hidden links still crawl. Unmounted ones do not.           */

.showmore-grid [data-overflow="1"] { display: none; }
.showmore.is-open .showmore-grid [data-overflow="1"] { display: flex; }
.showmore-btn {
  display: block; margin: 22px auto 0; padding: 11px 26px;
  background: none; border: 2px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px;
  color: var(--maroon); cursor: pointer;
}
.showmore-btn:hover { border-color: var(--maroon); }

/* ----------------------------------------------------------------- faq ---- */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--font-head); font-size: 17.5px; color: var(--black);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 8px; top: 16px;
  font-size: 26px; color: var(--maroon); font-family: var(--font-body);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-a { padding: 0 44px 22px 0; color: var(--ink-muted); font-size: 16px; }

/* ----------------------------------------------------------- directory ---- */

.directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dir-cell { background: var(--white); padding: 24px 22px; }
.dir-cell h3 { font-size: 17px; margin-bottom: 4px; }
.dir-role { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 12px; }
.dir-phone { display: block; font-family: var(--font-head); font-size: 19px; text-decoration: none; }
.dir-domain { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-subtle); text-decoration: none; }
.dir-email { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-subtle); text-decoration: none; overflow-wrap: anywhere; }
.dir-domain:hover,
.dir-email:hover { color: var(--maroon); }

.hq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.hq-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.hq-card h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--maroon); margin-bottom: 10px; }
.hq-card p { margin: 0; color: var(--ink-muted); }

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

.footer { background: var(--black); color: rgba(255,255,255,0.74); padding: 66px 24px 0; }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 1080px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }
.footer-mark { font-family: var(--font-head); font-size: 17px; letter-spacing: 0.12em; color: var(--white); margin: 0 0 6px; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; color: rgba(255,255,255,0.62); margin: 0 0 16px; }
.footer-brand p { font-size: 14.5px; }
.footer-addr { font-size: 13.5px; color: rgba(255,255,255,0.6); }
.footer-addr strong { color: rgba(255,255,255,0.8); }
.footer-col h5 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); margin: 0 0 14px;
}
.footer-col a { display: block; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14.5px; padding: 4px 0; }
.footer-col a:hover { color: var(--white); }

.footer-legal {
  max-width: var(--wrap); margin: 52px auto 0; padding: 22px 0 34px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 12.5px; color: rgba(255,255,255,0.52);
}
.footer-legal p { margin: 0 0 8px; }
.footer-values { letter-spacing: 0.06em; text-transform: uppercase; }
.footer-disclosure { color: rgba(255,255,255,0.44); line-height: 1.7; }
.footer-disclosure a { color: rgba(255,255,255,0.66); }

@media print { .nav, .topbar, .sectionnav, .mobile-menu, .showmore-btn { display: none; } }

/* Detail paragraph, companies hub only. The home grid stays compact so the two
   pages are not the same page twice. */
.company-detail {
  font-size: 15px; color: var(--ink-muted);
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.company-grid-detailed { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }