/*
  Aquamor Website — site-pages.css
  Phase 3B info/conversion pages
  Loaded AFTER site.css, ONLY on Phase-3B pages, to avoid edit collisions on site.css.

  Inherits all design tokens from site.css (:root). Adds page-level patterns that
  the homepage didn't need: subpage hero, prose blocks, content tables, forms,
  team cards, blog index cards.

  CONTRAST DISCIPLINE (matches site.css audit — all body/UI pairs ≥4.5:1):
  - Text on white/tint: #1A1A1A (16:1), #3A4A5C (8.1:1), #5A6B7A (5.1:1)
  - White text only on navy #1e3a5f (10.3:1) or dark #1A1A1A (16:1)
  - #4AADD4 is DECORATIVE ONLY (borders, accents, icons). Never text, never a fill behind text.
  - Filled badges/chips/headers behind white text use navy #1e3a5f.
*/

/* ------------------------------------------------------------
   SUBPAGE HERO — navy band, blue wave foot (matches site language)
------------------------------------------------------------ */
.page-hero {
  background: var(--navy);
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: var(--space-20);
  padding-bottom: 0;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 30%, rgba(74, 173, 212, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-16);
}

/* Narrow hero variant — text-only heroes (blog, contact, privacy, terms)
   that genuinely benefit from a tighter reading width */
.page-hero__inner--narrow {
  max-width: 880px;
}

/* Prevent visual placeholder from forcing grid expansion at narrow widths */
.page-hero__visual {
  min-width: 0;
  overflow: hidden;
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-5);
}

.page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue);
}

.page-hero__title {
  font-size: clamp(var(--text-3xl), 4.2vw, var(--text-5xl));
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: var(--space-5);
  overflow-wrap: break-word;
  word-break: break-word;
}

.page-hero__title strong {
  font-weight: 700;
  color: var(--white);
}

.page-hero__sub {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 760px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Wave separator at the bottom of the hero (white fill so it meets the next white section) */
.page-hero__wave {
  display: block;
  width: 100%;
  line-height: 0;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.page-hero__wave svg { display: block; width: 100%; }

/* On tinted pages the wave should match the section that follows */
.page-hero__wave--tint svg path { fill: var(--surface-1); }


/* ------------------------------------------------------------
   PROSE — narrative content blocks
------------------------------------------------------------ */
.prose {
  max-width: 780px;
}

.prose--wide { max-width: 920px; }

.prose .eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--dark);
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
}

/* First heading in the article body should not carry a large top gap */
.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--dark);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-5);
}

.prose p strong { color: var(--dark); font-weight: 700; }

.prose ul, .prose ol {
  margin: 0 0 var(--space-5) 0;
  padding-left: var(--space-6);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-2);
}

.prose li strong { color: var(--dark); font-weight: 700; }

.prose .lead {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}


/* ------------------------------------------------------------
   IMAGE SLOT — light/white placeholder (no dark backgrounds)
------------------------------------------------------------ */
.img-slot {
  background: var(--surface-1);
  border: 2px dashed var(--border-mid);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-10) var(--space-8);
  min-height: 220px;
}

.img-slot svg {
  width: 48px;
  height: 48px;
  color: var(--border-mid);
}

.img-slot__label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-muted);
}

.img-slot__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  opacity: 0.85;
  max-width: 420px;
}

.img-slot--wide { aspect-ratio: 21/9; min-height: 0; }


/* ------------------------------------------------------------
   PROOF / STAT CARDS (re-used on About + Capabilities)
------------------------------------------------------------ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.stat-card {
  background: var(--light-blue);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
}

.stat-card__value {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: var(--space-2);
}


/* ------------------------------------------------------------
   CALLOUT — disciplined note / guardrail style on light bg
------------------------------------------------------------ */
.callout {
  background: var(--surface-2);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}

.callout p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.callout p strong { color: var(--dark); }


/* ------------------------------------------------------------
   CONTENT TABLE — certifications + products
------------------------------------------------------------ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Fix 13 — catalog table scroll affordance
   Right-edge gradient fade signals more content to the right.
   Swipe-hint label appears only on narrow viewports. */
.catalog-table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.catalog-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.92));
  pointer-events: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  transition: opacity 0.2s ease;
}

/* Hide fade affordance when table is fully scrolled right */
.catalog-table-wrap.is-scrolled-end::after {
  opacity: 0;
}

.catalog-swipe-hint {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  user-select: none;
}

.catalog-swipe-hint svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .catalog-swipe-hint {
    display: flex;
  }
}

/* Lightweight horizontal-scroll wrapper for tables already sitting inside a
   styled card/container (avoids double-bordering the catalog-table-wrap
   card treatment). Use on any table that can clip on narrow viewports.
   min-width: 0 lets the wrapper shrink below its content's intrinsic size
   inside a CSS grid/flex track (otherwise the grid track itself blows out
   to the table's min-width and the whole page gains horizontal scroll —
   the wrapper's OWN overflow-x:auto must be what scrolls, not the page). */
.scroll-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-table-wrap table {
  min-width: 480px;
}

/* Short-content tables (e.g. a 3-column model/config/flow spec table)
   don't need the full 480px floor — a tighter min-width avoids forcing
   unnecessary scroll on viewports that could otherwise fit it natively. */
.scroll-table-wrap--compact table {
  min-width: 360px;
}

/* Three-column text-heavy tables need more room before columns get crushed */
.scroll-table-wrap .edu-table {
  min-width: 640px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  background: var(--white);
}

.data-table thead th {
  background: var(--navy);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  line-height: 1.6;
  vertical-align: top;
}

.data-table tbody tr:nth-child(even) td { background: var(--surface-1); }

.data-table tbody td strong { color: var(--dark); font-weight: 700; }

.data-table .placeholder-row td {
  color: var(--text-muted);
  font-style: italic;
  background: var(--surface-2) !important;
}

/* PLACEHOLDER pill */
.ph-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.spec-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.spec-link:hover { color: var(--blue); }


/* ------------------------------------------------------------
   FILTER BAR — products page
------------------------------------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.filter-bar__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  background: var(--white);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.filter-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}


/* ------------------------------------------------------------
   CERTIFICATION CARDS
------------------------------------------------------------ */
/* Flex (not grid) so a lone trailing card centers under the row above
   instead of hanging at the left edge. Two per row at desktop. */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.cert-grid > .cert-card {
  box-sizing: border-box;
}

.cert-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cert-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  background: var(--navy);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
}

.cert-card__badge svg { width: 16px; height: 16px; color: var(--blue); }

.cert-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--dark);
}

.cert-card__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
}

.cert-card__why {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cert-card__why strong {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-1);
}


/* ------------------------------------------------------------
   FOUR-STEP PROCESS (capabilities)
------------------------------------------------------------ */
.step-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.step-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-6);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-sm);
}

.step-row__num {
  width: 56px;
  height: 56px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.step-row__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--space-2);
}

.step-row__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ------------------------------------------------------------
   TEAM CARDS
------------------------------------------------------------ */
/* Flex (not grid) so a lone trailing card centers under the row above
   instead of hanging at the left edge. Four per row at desktop. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}
.team-grid > .team-card {
  flex: 0 1 calc((100% - 3 * var(--space-6)) / 4);
  box-sizing: border-box;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.team-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.team-card__photo {
  background: var(--light-blue);
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.team-card__photo svg { width: 44px; height: 44px; color: var(--border-mid); }

/* Real headshot — fills the square slot with a consistent crop */
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Initials avatar — used when no real headshot is available */
.team-card__avatar {
  background: var(--navy);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
}
.team-card__avatar span {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1;
}

.team-card__photo span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }

.team-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--navy);
  font-weight: 600;
  margin-top: var(--space-1);
  /* HTML-14 fix, round-3 QC 2026-09-01: "Vice President - Retail Sales"
     wrapped as "Vice President" / "- Retail Sales" at 390px and below,
     stranding the hyphen at the start of line 2 -- a widow/orphan on a
     short text block. text-wrap: balance distributes the break evenly
     across lines (degrades harmlessly to normal wrapping where
     unsupported); the hyphen itself is also nbsp-bound to its neighbors
     on every hyphenated role string in the markup so a break can never
     land exactly at the hyphen regardless of balance support. */
  text-wrap: balance;
}


/* ------------------------------------------------------------
   BLOG / INSIGHTS INDEX CARDS
------------------------------------------------------------ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  /* Fix 9: hover lift removed — cards look broken mid-scroll on touch; shadow alone is sufficient feedback */
}

/* Fix 14: Restyle blog-card__img to match the img-spec render-placeholder pattern —
   dashed border, neutral bg, muted label — visually consistent with the rest of the design system */
.blog-card__img {
  background: var(--surface-1);
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  padding: var(--space-4);
}

.blog-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.blog-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
  flex: 1;
}

.blog-card__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: auto;
}

/* Story-card teaser body copy */
.blog-card__teaser {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* "Planned post" status marker — navy-outline pill, no white-on-blue */
.blog-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--surface-2);
  border: 1px solid var(--border-mid);
  padding: 3px 10px;
  border-radius: var(--radius-xl);
}

.blog-card__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   IMAGE-SPEC BOX — written description of a planned image.
   Light dashed border, light fill, muted body. NOT an image.
------------------------------------------------------------ */
.img-spec {
  background: var(--surface-1);
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}

.img-spec__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.img-spec__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Image-spec sitting inside a blog story card */
.blog-card .img-spec { margin-top: var(--space-1); }

/* ------------------------------------------------------------
   W.A.T.E.R. VALUES BAND — 5-item framework, CSS-only icons
------------------------------------------------------------ */
.values-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}

.value-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.value-item__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}

.value-item__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.value-item__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}


/* ------------------------------------------------------------
   CONTACT — routed sections + forms
------------------------------------------------------------ */
.route-anchor { scroll-margin-top: calc(var(--header-height) + 16px); }

.contact-route {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-8);
}

.contact-route__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.contact-route__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.contact-route__intro {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  max-width: 640px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.field textarea { min-height: 120px; resize: vertical; }

/* Per-field server error (rendered next to the input by lead-capture.js) */
.field--has-error input,
.field--has-error select,
.field--has-error textarea {
  border-color: #c0392b;
}
.field-error {
  margin: var(--space-1) 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #7a1c1c;
}

/* File-upload UI (styled but inert) */
.file-upload {
  border: 2px dashed var(--border-mid);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.file-upload svg { width: 32px; height: 32px; color: var(--border-mid); }

.file-upload__main { font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); }
.file-upload__sub { font-size: var(--text-sm); color: var(--text-muted); }

.form-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.form-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.btn[disabled],
button.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.confirm-microcopy {
  background: var(--surface-2);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.confirm-microcopy strong { color: var(--dark); }

/* Form submit status message */
.form-status {
  font-size: var(--text-sm);
  line-height: 1.6;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  min-height: 1.5em; /* reserves space so layout doesn't jump */
}

.form-status--ok {
  background: #f0faf4;
  border: 1px solid #6bcf8e;
  color: #1a5e30;
}

.form-status--err {
  background: #fff5f5;
  border: 1px solid #e8a0a0;
  color: #7a1c1c;
}

/* Honeypot — visually and functionally hidden */
.aq-form__honeypot {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
  pointer-events: none;
  tab-index: -1;
}

/* Direct contact details block */
.contact-details {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10);
  color: var(--white);
}

.contact-details h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.contact-details address {
  font-style: normal;
  font-size: var(--text-base);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

.contact-details address strong { color: var(--white); font-weight: 700; }

.contact-details a { color: #9fd4ea; }
.contact-details a:hover { color: var(--white); }


/* ------------------------------------------------------------
   SECTION INTRO (centered, reused)
------------------------------------------------------------ */
.section-intro {
  max-width: 720px;
  margin-bottom: var(--space-12);
}

.section-intro--center {
  text-align: center;
  margin-inline: auto;
}

.section-intro__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-4);
}

.section-intro__title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: var(--space-4);
}

.section-intro__sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 960px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .team-grid > .team-card { flex: 0 1 calc((100% - var(--space-6)) / 2); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .values-band { grid-template-columns: repeat(3, 1fr); }
  .cert-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .contact-route { padding: var(--space-8); }
}

@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr; }
  .team-grid > .team-card { flex: 0 1 calc((100% - var(--space-6)) / 2); }
  .blog-grid { grid-template-columns: 1fr; }
  .values-band { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .step-row { grid-template-columns: 48px 1fr; gap: var(--space-4); padding: var(--space-5) var(--space-5); }
  .step-row__num { width: 48px; height: 48px; font-size: var(--text-lg); }
  .page-hero__sub { font-size: var(--text-lg); }
  .contact-route { padding: var(--space-6); }
  .contact-details { padding: var(--space-6); }
}


/* ------------------------------------------------------------
   INSTALLED PHOTOGRAPHY — real photos wired into former placeholder
   slots. Subtle treatment: rounded corners, soft card shadow, no
   heavy borders. aspect-ratio + object-fit:cover keeps every slot
   from stretching its source regardless of the source's native ratio.
------------------------------------------------------------ */

/* Hero visual block (pro / retail) — replaces .page-hero__img-block.
   4/3 aspect keeps the slot balanced regardless of source proportions.
   retail-hero.jpg is near-square (2000×1841); object-fit:cover with
   center positioning keeps the packaging subject intact. */
.page-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Wide banner photo (about / certifications / capabilities) —
   wraps the same 21/9 footprint the .img-slot--wide placeholder held */
.img-photo--wide {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Inline content photo (pro install context, retail product line) —
   sits where a 4/3 render-placeholder used to live */
.img-photo--inline {
  display: block;
  width: 100%;
  /* height:auto is load-bearing, not tidiness. Every consumer of this class
     carries width/height attributes on the <img> for layout stability. When
     both attributes are present and no CSS height is declared, the used
     height comes from the attribute and aspect-ratio is ignored, so the
     photo renders at its full intrinsic pixel height inside a narrow column.
     That is what pro.html was shipping until 2026-08-17: a 4/3 slot rendering
     435x1066 (ratio 0.41), the install photo stretched into a tall strip.
     Its siblings .img-photo--wide and .img-photo--contain always had
     height:auto, which is why the defect showed up only here. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Retail product-line shot. Source swapped 2026-07-14 (product-quality review
   feedback) from a lifestyle carton photo to a single-cartridge product shot
   (matches the flt-media__card treatment used on the filter PDP pages: white
   card, contain, generous padding). aspect-ratio tightened from 4/5 to 3/4 to
   match the product photo's native ~0.75 ratio, and padding added so the
   cartridge doesn't crowd the card edges — object-fit:contain on a white
   background keeps the whole photo (including its own cert marks) visible
   without cropping. */
.img-photo--contain {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

/* Blog-card photo — fills the top image band of a story card.
   Matches the 16/9 footprint .blog-card__img held as a placeholder. */
.blog-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ------------------------------------------------------------
   FAQ ACCORDION — channel pages (foodservice / retail / pro)
   Accessible native <details>/<summary>. Scoped under .faq-section.
   Contrast: question + answer text use #1A1A1A / #3A4A5C on white/tint
   (16:1 / 8.1:1). Blue is decorative only (left accent + plus/minus mark
   drawn with borders — no glyph characters). Matches the warm off-white
   alternating-section language used elsewhere on these pages.
------------------------------------------------------------ */
.faq-list {
  max-width: 820px;
  margin-inline: auto;
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-lg);   /* 18px — exceeds adjacent body */
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);  /* 16:1 on white */
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary:hover { color: var(--navy); }

.faq-item > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Plus / minus indicator drawn with borders — no glyph, no AI-tell symbol */
.faq-item__mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.faq-item__mark::before,
.faq-item__mark::after {
  content: '';
  position: absolute;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* horizontal bar */
.faq-item__mark::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
/* vertical bar (hidden when open) */
.faq-item__mark::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.faq-item[open] .faq-item__mark::after {
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
}

.faq-item__answer {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-base);   /* 16px */
  line-height: 1.65;
  color: var(--text-secondary);  /* 8.1:1 on white */
}

.faq-item__answer p { margin: 0; }
.faq-item__answer p + p { margin-top: var(--space-3); }

.faq-item__answer a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
}
.faq-item__answer a:hover { color: var(--blue); }

@media (max-width: 640px) {
  .faq-item > summary {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
  }
  .faq-item__answer { padding: 0 var(--space-5) var(--space-4); }
}

/* ------------------------------------------------------------
   AMBIENT STRIP — foodservice page, "Wherever you're serving it"
   Added 2026-08-17 (imagery panel, decision D2).

   Four tiles in one fold. Three carry environment imagery (the buyer's
   world) and the fourth carries a photograph of a real Aquamor install,
   so mood and proof are never separated. Every tile is captioned: the
   first line names the environment type, the second states plainly
   whether the tile is an illustration or a photograph of a real install.
   That second line exists because a buyer in the imagery review read
   environment tiles as installation evidence. Captions are the fix, and
   they are load-bearing rather than decorative — do not strip them.

   Type sizes hold the 14px body-text floor. Caption colors are
   #1A1A1A (16:1) and #3A4A5C (7.8:1 on the #F5F9FC tint, 8.1:1 on
   white), so both pass at any section background used on this page.
------------------------------------------------------------ */
.ambient-strip {
  padding-block-start: var(--space-10);
}

.ambient-strip__eyebrow {
  display: block;
  text-align: center;
  margin-bottom: var(--space-6);
}

.ambient-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.ambient-strip__item {
  margin: 0;
}

.ambient-strip__item .img-photo--inline {
  margin-bottom: var(--space-3);
}

.ambient-strip__caption {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  text-align: center;
  text-wrap: balance;
}

.ambient-strip__kind {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-secondary);
  text-wrap: balance;
}

.ambient-strip__note {
  margin-top: var(--space-6);
  margin-bottom: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  max-width: 68ch;
  margin-inline: auto;
  text-wrap: pretty;
}

@media (max-width: 960px) {
  .ambient-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 640px) {
  .ambient-strip {
    padding-block-start: var(--space-8);
  }
  .ambient-strip__grid {
    gap: var(--space-4);
  }
}