/*
  Aquamor Website — site-pages.css
  Phase 3B info/conversion pages (Scout)
  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(--blue);
  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-bottom: var(--space-5);
}

.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;
  }
}

.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
───────────────────────────────────────────────────────────── */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.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
───────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.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);
}


/* ─────────────────────────────────────────────────────────────
   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; }

/* 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 { grid-template-columns: 1fr 1fr; }
  .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 { grid-template-columns: 1fr 1fr; }
  .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%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Retail product-line shot is a tall packaging composition — contain,
   don't crop, on a clean surface so the carcass reads fully */
.img-photo--contain {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* 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;
}