/* === shared/tokens.css === */
/* ============================================================
   Shared Design Tokens — Upstream Tech sites
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-surface: #f5f8fa;
  --color-border: #e0e0e0;
  --color-border-strong: #ccc;
  --color-text: #272123;
  --color-text-muted: #555555;
  --color-text-dim: #888;
  --color-accent: #177860;
  --color-accent-hover: #1a8d70;
  --color-teal: #004c5c;
  --color-teal-hover: #005d70;
  --color-burnt-orange: #d9593d;
  --color-aqua: #72e3c7;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography scale */
  --text-sm: 0.875rem;
  --text-body: 1rem;
  --text-lg: 1.25rem;
  --text-h3: clamp(1.375rem, 2.5vw, 1.75rem);
  --text-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h1: clamp(2.5rem, 5vw, 3.75rem);
  --text-display: clamp(3rem, 6vw, 4.5rem);
  --text-display-sm: clamp(2rem, 3.5vw, 2.75rem);

  /* Line-height scale */
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --max-width: 1200px;
  --width-narrow: 700px;
  --width-content: 940px;
  --header-height: 64px;
  --radius: 4px;
  --overlay-dark: rgba(0, 0, 0, 0.45);
  --shadow-card: 0 0 4px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 2px 12px rgba(0, 0, 0, 0.18);
  --shadow-nav: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 18px rgba(0, 0, 0, 0.04);
  --transition: 0.2s ease;
}

/* === shared/reset.css === */
/* ============================================================
   Shared Reset — Upstream Tech sites
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* === shared/base.css === */
/* ============================================================
   Shared Base Styles — Upstream Tech sites
   Typography, links, buttons, heroes, sections, cards, grids,
   carousels, footer, animations
   ============================================================ */

/* --- Typography --- */
h1,
h2,
h3 {
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}

h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--text-h2);
  margin-top: 0.5em;
}

h3 {
  font-size: var(--text-h3);
}

/* Global max-width caps every <p> at a readable measure (~75ch). Override per-component only when a paragraph legitimately needs to span wider (rare). */
p {
  margin-bottom: 1em;
  color: var(--color-text-muted);
  max-width: var(--width-narrow);
}

strong {
  font-weight: 700;
}

/* Utility: color a word/phrase with the site accent colour */
.text-accent {
  color: var(--color-accent);
}

/* --- Links --- */
a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition:
    border-color var(--transition),
    opacity var(--transition);
}

a:hover {
  border-bottom-color: var(--color-accent);
  opacity: 0.85;
}

/* --- Header / Navigation --- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: var(--shadow-nav);
}

header nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--space-xl);
}

.nav-logo {
  border-bottom: none;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 28px;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 0;
}

.nav-logo:hover {
  opacity: 0.8;
}

header nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  align-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

header nav ul li {
  display: flex;
  align-items: center;
}

header nav ul li a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  border-bottom: none;
  border-radius: var(--radius);
  transition:
    color var(--transition),
    background var(--transition);
}

header nav ul li a:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
}

/* Nav action buttons */
header nav ul li:has(a.btn-contact) {
  margin-left: 0.5rem;
}

header nav ul li a.btn-contact,
header nav ul li a.btn-login {
  color: var(--color-bg);
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
}

header nav ul li a.btn-contact:hover,
header nav ul li a.btn-login:hover {
  color: var(--color-bg);
  opacity: 1;
}

header nav ul li a.btn-contact {
  background: var(--color-accent);
}
header nav ul li a.btn-contact:hover {
  background: var(--color-accent-hover);
}

header nav ul li a.btn-login {
  background: var(--color-teal);
}
header nav ul li a.btn-login:hover {
  background: var(--color-teal-hover);
}

/* --- Main Content --- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl) 6rem;
}

/* --- Utilities --- */
.text-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- Card hover effect --- */
.card-hover {
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}
.card-hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Anchor used as a card wrapper: kill the default underline + inline baseline gap. */
a.card-hover {
  display: block;
  border-bottom: none;
}
a.card-hover:hover {
  border-bottom: none;
  opacity: 1;
}
/* Specificity (0,1,1): high enough to beat the global `img { margin: 1.5rem 0 }`
   baseline (which otherwise insets card-wrapper images by 24px top/bottom),
   low enough to tie with card-specific rules like `.dataset-card > img` —
   and those rules live in per-site stylesheets concatenated after base.css,
   so they win on source order. `height: auto` is the <img> default. */
.card-hover > img {
  display: block;
  width: 100%;
  margin: 0;
}

/* --- Buttons --- */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius);
  border: none;
  transition:
    background var(--transition),
    transform var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  opacity: 1;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-text);
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
  opacity: 1;
}

/* --- Hero --- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 580px;
  margin-bottom: var(--space-2xl);
  overflow: hidden;
}

/* Full-bleed escape: the image .hero (photo + overlay) and the HydroForecast
   post heroes (.post-hero-full, .post-hero-product) span the full viewport.
   Split heroes (.industry-hero-split, .ms-hero-split) have a white background
   and constrained content, so they stay within the shell width. */
main > .hero,
main > .post-hero-full,
main > .post-hero-product {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Cancel <main>'s top padding so the hero sits flush with the nav.
   .industry-page has no top padding, so its heroes already sit flush.
   Mobile override below matches main's reduced top padding at ≤768px. */
main:not(.industry-page) > .hero,
main:not(.industry-page) > .post-hero-full,
main:not(.industry-page) > .post-hero-product {
  margin-top: calc(-1 * var(--space-3xl));
}

/* On home-hero-nav pages the nav is transparent and overlaps the hero,
   so pull the hero up an extra header-height and reserve that space as
   padding-top — otherwise the white area behind the transparent nav shows. */
body.home-hero-nav main:not(.industry-page) > .hero {
  margin-top: calc(-1 * (var(--space-3xl) + var(--header-height)));
  padding-top: var(--header-height);
  min-height: calc(580px + var(--header-height));
}

/* Bottom-align hero text — used on industry pages where the imagery
   pulls the eye up and the headline reads better anchored at the base. */
.hero--bottom {
  align-items: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  pointer-events: none;
}

.hero-text {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  width: 100%;
}

.hero-text h1 {
  color: #fff;
  max-width: var(--width-narrow);
}

.hero-text p {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.hero .btn-primary {
  background: #fff;
  color: var(--color-text);
  mix-blend-mode: screen;
}

.hero .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.hero .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

/* --- Horizontal rules --- */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

hr.hr-compact {
  margin: 3rem 0;
}

/* --- Sections --- */
section {
  margin-bottom: 3rem;
}

section h2 {
  margin-bottom: 1.25rem;
}

section h3 {
  margin-bottom: 0.5em;
}

/* --- Images --- */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  border: none;
}

/* --- Lists --- */
ul,
ol {
  padding-left: 1.25em;
  margin-bottom: 1.5em;
}

/* --- Blockquotes (Testimonials) --- */
blockquote {
  position: relative;
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: none;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  quotes: none;
}

blockquote::before,
blockquote::after {
  content: none;
}

blockquote p {
  flex: 1;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  background: none;
}

/* --- Post-body blockquote + inline CTA overrides --- */
.post-body > .btn-primary,
.post-body > .btn-secondary {
  display: inline-block;
  margin-bottom: 1.25rem;
  border-bottom: none;
}

.post-body blockquote {
  margin: 0 0 1.25rem;
  min-height: auto;
}

.post-body blockquote p {
  margin-bottom: 0.75rem;
}

.post-body blockquote p::before,
.post-body blockquote p::after {
  content: none;
}

/* Attributed pull-quotes (see the .post-body > blockquote:has(.testimonial-attr)
   block below) keep the curly quote marks that plain report-citation
   blockquotes deliberately drop above. :not(.quote-carousel-title) excludes
   the optional section-tie-in title, which is also a <p> (not a heading —
   see STYLE_GUIDE.md) sharing the same blockquote. */
.post-body > blockquote:has(.testimonial-attr) p:not(.quote-carousel-title)::before {
  content: "\201C";
}

.post-body > blockquote:has(.testimonial-attr) p:not(.quote-carousel-title)::after {
  content: "\201D";
}

.post-body blockquote p:last-child {
  margin-bottom: 0;
}

/* `.post-body img` (below) resets all in-body images with a card
   shadow/radius; the testimonial logo needs to stay a plain, borderless
   mark like it is on industry pages, so re-assert with higher specificity. */
.post-body .testimonial-logo {
  width: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Browser default puts ~40px side margins on <figure>; reset so figures
   align with surrounding paragraphs in the post body. */
.post-body figure {
  margin: 0;
}

.post-body figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: -0.625rem;
  margin-bottom: 1.25rem;
}

.post-body blockquote hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.75rem 0;
}

.testimonial-logo {
  display: block;
  max-height: 52px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  margin: 0;
}

.testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

/* Below 768px the footer stacks (logo above, text below, full width) via
   flex-wrap — flex-grow there would trick the wrap algorithm into keeping
   the logo and text squeezed onto one row instead. Above that, grow to
   fill the row next to the logo so long attribution text isn't forced
   onto its own line under the logo before it needs to be. */
@media (min-width: 769px) {
  .testimonial-attr {
    flex: 1 1 0%;
  }
}

.testimonial-org {
  font-weight: 700;
  color: var(--color-text);
}

.testimonial-name {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Quotes Row --- */
.quotes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.quotes-row--two {
  grid-template-columns: repeat(2, 1fr);
}

/* Single standalone testimonial — keep card chrome but scale up type and logo.
   This is a showcase treatment for a page-level section, not for inline use. */
.industry-section > blockquote {
  max-width: fit-content;
  margin-inline: auto;
  border-left-width: 5px;
}

.industry-section > blockquote p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
}

.industry-section > blockquote footer {
  padding-top: var(--space-md);
  gap: var(--space-md) var(--space-lg);
}

.industry-section > blockquote .testimonial-logo {
  max-height: 80px;
  max-width: 200px;
}

.industry-section > blockquote .testimonial-org {
  font-size: var(--text-base);
}

/* Attributed pull-quotes (logo + org + name footer) inside post bodies get
   their own, more compact treatment — deliberately NOT the industry-section
   sizing above. A blog quote sits inline among a lot of other running text,
   so keep it at body-copy scale (default blockquote/logo sizing) rather than
   the bigger standalone-showcase scale; :has(.testimonial-attr) excludes
   plain report-citation blockquotes and simple "— Name" attributions, which
   don't use the structured logo + org + name pattern. */
.post-body > blockquote:has(.testimonial-attr) {
  max-width: fit-content;
  margin-inline: auto;
}

.post-body > blockquote:has(.testimonial-attr) .quote-carousel-title {
  margin-bottom: var(--space-sm);
}

/* --- Logo Carousels --- */
.logo-carousel,
.data-logo-carousel {
  overflow: hidden;
  position: relative;
}

.logo-carousel::before,
.logo-carousel::after,
.data-logo-carousel::before,
.data-logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel::before,
.data-logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.logo-carousel::after,
.data-logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.logo-carousel {
  margin: 2rem 0 3rem;
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.logo-carousel-track,
.data-logo-carousel-track {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  width: max-content;
}

.logo-carousel-track,
.data-logo-carousel-track {
  animation: scroll-logos calc(var(--logo-count, 15) * 8s) linear infinite;
}

.logo-carousel-track:hover,
.data-logo-carousel-track:hover {
  animation-play-state: paused;
}

.logo-carousel-track img,
.data-logo-carousel-track img {
  width: auto;
  object-fit: contain;
  margin: 0;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}

.logo-carousel-track img {
  height: auto;
  max-height: 52px;
  max-width: 120px;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Quote Carousel (homepage) --- */
.quote-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.quote-carousel-viewport {
  flex: 1;
  overflow: hidden;
  padding: var(--space-sm) 0;
}

.quote-carousel-track {
  display: flex;
  gap: var(--space-md);
  transition: transform 0.4s ease;
  padding: 0 0.25rem;
}

.quote-carousel-card {
  flex: 0 0 calc((100% - 2rem) / 3);
  min-width: 20rem;
}

.quote-carousel-title {
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}

/* Prev/next buttons used inside .quote-carousel (and .dataset-carousel on Lens) */
.dataset-carousel-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.dataset-carousel-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--text-sm);
}

thead {
  border-bottom: 2px solid var(--color-border-strong);
}

th {
  text-align: left;
  padding: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* --- Focus indicators (accessibility) --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

select:focus-visible {
  outline-offset: 0;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Mobile Nav Toggle --- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  flex-direction: column;
  gap: var(--space-xs);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Footer --- */
footer:not(blockquote footer) {
  background: var(--color-surface);
  padding: var(--space-3xl) var(--space-xl) 0;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  padding-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.footer-newsletter-section {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.footer-newsletter-logo {
  height: 32px;
  margin: 0;
}

.footer-newsletter-text {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

.footer-newsletter-btn {
  border-bottom: none;
}

.footer-logo {
  border-bottom: none;
  display: inline-block;
  align-self: start;
}

.footer-logo:hover {
  opacity: 0.8;
}

.footer-logo img {
  height: 32px;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 0;
}

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

.footer-col strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-bottom: none;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-accent);
  opacity: 1;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
}

.footer-bottom p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-bottom-right a {
  color: var(--color-text-dim);
  border-bottom: none;
  font-size: var(--text-sm);
  transition: color var(--transition);
}

.footer-bottom-right a:hover {
  color: var(--color-text);
  opacity: 1;
}

.footer-social svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* --- Newsletter Page --- */
.newsletter-page {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-lg);
  margin-bottom: 1rem;
}

.breadcrumb a {
  color: var(--color-teal);
  border-bottom: none;
  font-weight: 400;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

.breadcrumb-sep {
  color: var(--color-text-dim);
}

.breadcrumb-current {
  color: var(--color-teal);
}

/* --- Page Header --- */
.page-header {
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.page-header > * {
  max-width: var(--width-narrow);
}

.page-header > .resource-filter-bar {
  max-width: none;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.page-header h1 {
  margin-bottom: 0.75rem;
}

.page-header p:last-child {
  margin-bottom: 0;
}

/* --- Grid layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* --- Callout card title (semantic class, not a heading scope) --- */
.callout-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

/* --- Logo bar label --- */
.logo-bar-label {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
}

/* --- Feature row heading (semantic class, not a heading scope) --- */
.feature-text-title {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* --- FAQ list --- */
.faq-list {
  max-width: var(--width-narrow);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}

.faq-item summary {
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::after {
  content: "+";
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.faq-item[open] summary::after {
  content: "\2212";
}

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

.faq-answer {
  padding-top: var(--space-md);
  color: var(--color-text-muted);
}

/* --- Case study grid --- */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.case-study-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg);
}

.case-study-card a {
  display: block;
  border-bottom: none;
  color: inherit;
}

.case-study-card a:hover {
  opacity: 1;
}

.case-study-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.case-study-card-body {
  padding: var(--space-md);
}

.case-study-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.case-study-location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.case-study-tag {
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  padding: 0.15em 0.5em;
  border-radius: 3px;
}

/* --- Resource filter bar / button (base) --- */
.resource-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 3rem;
}

.resource-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.resource-search-wrap {
  position: relative;
  flex: 0 1 260px;
  display: flex;
}

.resource-search {
  width: 100%;
  padding: var(--space-xs) calc(var(--space-md) + 1.5rem) var(--space-xs)
    calc(var(--space-md) + 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23666'><path stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/></svg>")
    no-repeat left var(--space-sm) center / 1rem 1rem;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
}

.resource-search:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Hide the browser's native search clear button — we render our own
   clear button so it can match the brand color. */
.resource-search::-webkit-search-cancel-button,
.resource-search::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.resource-search-clear {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  cursor: pointer;
  transition: background var(--transition);
}

.resource-search-clear:hover {
  background: var(--color-accent-hover);
}

.resource-search-clear[hidden] {
  display: none;
}

.resource-section-label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, var(--color-text));
  margin: 0 0 var(--space-md);
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Narrowed to the natural width of a 3-card row so the header, filter
   bar, section labels and grid all share the same right edge. */
.resources-main {
  max-width: calc(340px * 3 + var(--space-md) * 2 + var(--space-xl) * 2);
}

.resource-filter-btn {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.resource-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.resource-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

#load-more-wrap {
  margin-top: 2rem;
}

.resource-featured {
  margin-bottom: 0;
}

.resource-featured .resource-grid {
  justify-content: flex-start;
}

.data-section .resource-grid,
.industry-section .resource-grid,
.post-section .resource-grid {
  justify-content: center;
}

.data-section-link a::after {
  content: "→";
  display: inline-block;
  margin-left: 0.3em;
  transform: translateY(-0.06em);
}

/* --- Data section (centered section wrapper) --- */
.data-section {
  text-align: center;
}

.data-section > p {
  max-width: var(--width-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* --- Section link (centered link below a section) --- */
.data-section-link {
  margin: 1.5rem auto 0;
  text-align: center;
}

.data-section-link a {
  color: var(--color-accent);
}

/* --- Nav Dropdown (base) --- */
.nav-dropdown-wrap {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition);
}

.nav-dropdown-trigger:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

.nav-chevron {
  vertical-align: middle;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: var(--space-sm);
  z-index: 200;
}

.nav-dropdown-wrap.open .nav-dropdown,
.nav-dropdown-wrap:hover .nav-dropdown {
  display: block;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius);
  border-bottom: none;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text);
  transition: background var(--transition);
}

.nav-dropdown-item:hover {
  background: var(--color-surface);
  opacity: 1;
}

/* --- Resources wide dropdown (featured post + browse columns) --- */
.nav-dropdown--wide {
  width: 560px;
  padding: 0;
  overflow: hidden;
}

.nav-dropdown-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nav-dropdown-col--browse {
  border-left: 1px solid var(--color-border);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
}

.nav-featured-carousel {
  padding: var(--space-md);
  display: grid;
}

article.nav-featured-post {
  grid-area: 1 / 1;
  width: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
  animation: none;
}

.nav-featured-post.active {
  opacity: 1;
  visibility: visible;
}

.nav-featured-post a {
  padding: 0;
}

.nav-featured-post .resource-date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-featured-title {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0 0 0.4rem;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.nav-dropdown-explore-all {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding: var(--space-sm);
  border-radius: var(--radius);
  border-bottom: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  transition: background var(--transition);
}

.nav-dropdown-explore-all:hover {
  background: var(--color-surface);
  opacity: 1;
}

.industry-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* --- Resource Grid --- */
.resource-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.resource-grid.resource-grid--row {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  margin: -8px;
}

.resource-card {
  width: 340px;
  overflow: hidden;
  border: none;
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

/* Between mobile and full-desktop, 340px-wide cards only fit 2 per row,
   leaving an empty column. Force 3-up via grid in this range. */
@media (min-width: 769px) and (max-width: 1100px) {
  .resource-grid,
  .resource-grid.resource-grid--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .resource-card {
    width: auto;
  }
}

.resource-card a {
  display: block;
  border-bottom: none;
  color: inherit;
}

.resource-card a:hover {
  opacity: 1;
}

.resource-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.resource-card-body {
  padding: var(--space-md);
  text-align: left;
}

.resource-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 0.4rem;
}

.resource-card-body h3,
.resource-card-title {
  font-size: var(--text-body);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.resource-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* --- Use Case Grid --- */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin: 1.5rem 0;
}

.use-case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.use-case-card-image {
  position: relative;
  overflow: hidden;
}

.use-case-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin: 0;
  border: none;
  border-radius: 0;
  display: block;
}

.use-case-card-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-dark);
  color: #fff;
  font-size: var(--text-h3);
  font-weight: 700;
  margin: 0;
}

.use-case-card-body {
  padding: 0.75rem 1.25rem 1rem;
}

.use-case-card-body p {
  margin: 0.25rem 0 0;
}

/* --- Feature Rows --- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* Variant: text paired with a compact resource-card (text gets more room). */
.feature-row--text-wide {
  grid-template-columns: 2fr 1fr;
}

.feature-image img {
  width: 100%;
  border-radius: var(--radius);
  margin: 0;
  box-shadow: var(--shadow-card);
}

.feature-image-empty {
  min-height: 100px;
}

.features-cta {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-2xl);
  border-radius: var(--radius);
  margin-top: 2rem;
}

.features-cta h2 {
  color: var(--color-bg);
  margin-top: 0;
}

.features-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: var(--width-narrow);
}

.features-cta .btn-primary {
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-bg);
}

.features-cta .btn-primary:hover {
  background: transparent;
  color: var(--color-bg);
  border-color: var(--color-bg);
}

/* --- Industry Page Shell ---
   The shell itself is the single source of max-width and horizontal
   padding for *all* in-flow content (sections, hrs, CTA banner). Inner
   blocks (.industry-section, hr, .cta-banner, .section-light) inherit
   the constrained width and don't re-declare it, so every edge aligns.
   Heroes opt out via the .hero / .industry-hero-split full-bleed escape
   declared above. */
.industry-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-3xl);
}

.industry-page > .cta-banner {
  margin-bottom: 3rem;
}

/* --- Light grey section wrapper --- */
.section-light {
  background: var(--color-surface);
  padding: 2rem 3rem;
  border-radius: var(--radius);
  max-width: var(--max-width);
  margin: 1.5rem auto;
}

/* Accent-tinted variant. Same shape as .section-light, but on the site's
   brand accent (teal on HF/Upstream, sea-green on Lens) with light text.
   Inner .btn-primary inverts to stay readable on the accent background. */
.section-light--accent {
  background: var(--color-accent);
}

.section-light--accent,
.section-light--accent h2,
.section-light--accent h3,
.section-light--accent h4,
.section-light--accent p,
.section-light--accent a:not(.btn-primary) {
  color: #fff;
}

.section-light--accent .btn-primary {
  background: #fff;
  color: var(--color-accent);
  border: 1px solid #fff;
}

.section-light--accent .btn-primary:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.section-light--accent .stat-block dt {
  color: #fff;
}

.section-light--accent .stat-block dd {
  color: rgba(255, 255, 255, 0.85);
}

.section-light--accent .checklist-check {
  color: #fff;
}

/* --- Stat row (display numbers + label) ---
   Use for proof-points where a bulleted list would under-sell the numbers.
   Built on <dl> so each number/label is semantically paired. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
  padding: 0;
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.stat-block dt {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

/* Stat rows inside a narrow .text-and-media column don't have room for
   the full display-size numbers (three across, half the page wide).
   Step down to the compact stat size. */
.text-and-media .stat-row {
  gap: var(--space-md);
}

.text-and-media .stat-block dt {
  font-size: var(--text-display-sm);
}

.stat-block dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .stat-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Two-stat variant: a 3-column grid leaves an empty third column when there
   are only two values, so center the pair instead of stretching them left. */
.stat-row--center {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {
  .stat-row--center {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }
}

/* --- Rich-text block for section intros above card grids --- */
.industry-intro {
  margin-bottom: var(--space-xl);
}

.industry-intro h2 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.industry-intro p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Checkmark checklist (promoted from Lens's request-proposal page) ---
   Use for "what's included" style lists. --grid lays items out 2-up on
   wide screens (e.g. a short list of call agenda items). */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checklist li {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.checklist-check {
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.checklist--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-xl);
}

@media (max-width: 600px) {
  .checklist--grid {
    grid-template-columns: 1fr;
  }
}

/* --- Text + media two-column (industry narrative with imagery) --- */
.text-and-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.text-and-media--media-left {
  direction: rtl;
}
.text-and-media--media-left > * {
  direction: ltr;
}

.text-and-media--top {
  align-items: flex-start;
}

.text-and-media--bottom {
  align-items: flex-end;
}

.text-and-media > div {
  min-width: 0;
}

.text-and-media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.stacked-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.text-and-media img.media-contain {
  border-radius: 0;
  object-fit: contain;
  max-height: 440px;
  margin: 0 auto;
}

/* --- Logo Bar --- */
.logo-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3xl);
}

.logo-bar img {
  height: 60px;
  max-width: 160px;
  object-fit: contain;
  border-radius: var(--radius);
}

.logo-bar--lg img {
  height: 90px;
  max-width: 220px;
}

/* --- Blog Post Layout --- */
.post-section {
  padding: 3.75rem 1.25rem;
  position: relative;
}

.post-section:first-child {
  padding-top: 0;
}

.post-section.no-bottom-padding {
  padding-bottom: 0;
}

.post-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.post-hero-split {
  display: grid;
  grid-template-columns: minmax(auto, var(--width-narrow)) 1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.post-hero-split h1 {
  margin-bottom: var(--space-md);
}

.post-hero-summary {
  font-size: var(--text-lg);
}

.post-hero-media {
  min-width: 0;
}

.post-hero {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

.post-video {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.post-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.post-two-col {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-3xl);
}

.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: sticky;
  top: 2.5rem;
  align-self: start;
}

.post-sidebar-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-author {
  font-size: var(--text-sm);
}

.post-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.share-dropdown {
  position: relative;
}

.share-dropdown-toggle {
  font-size: var(--text-sm);
  color: var(--color-burnt-orange);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.share-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  box-shadow: 2px 2px 0 0 var(--color-text);
  min-width: 180px;
}

.share-dropdown.open .share-dropdown-list {
  display: block;
}

.share-dropdown-link {
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  display: block;
}

.share-dropdown-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.post-toc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.post-toc-heading {
  font-size: var(--text-lg);
}

.post-toc-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.post-toc-list a {
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: none;
}

.post-toc-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  border-bottom: none;
}

.post-body {
  max-width: var(--width-narrow);
  overflow-wrap: break-word;
}

.post-body h2 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.post-body h1 {
  border-bottom: 1px solid var(--color-text);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

/* HubSpot's inline form embed wraps the form-title widget in `.hs-richtext`
   and renders it as an h1, which would otherwise pick up the section-divider
   styling above. Suppress it so embedded form titles don't grow a stray
   underline + 2.5rem top margin. */
.post-body .hs-richtext h1,
.post-body .hs-form-wrap h1 {
  border-bottom: none;
  margin-top: 0;
}

.post-body h3,
.post-body h4 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.post-body h5,
.post-body h6 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.post-body p {
  margin-bottom: 1.25rem;
}

.post-body ul {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.post-body ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 2.5rem;
}

.hs-form-wrap {
  margin: 1.25rem 0;
  padding: 1rem;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Post-body media: full-bleed cards for inline images, videos, iframes,
   and Wistia players. The iframe rule additionally locks the embed to a
   16:9 aspect so YouTube/Vimeo/HubSpot-video embeds render at the right
   size without per-page width/height attributes. */
.post-body img,
.post-body video,
.post-body iframe,
.post-body wistia-player {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: 1.25rem 0;
  overflow: hidden;
  display: block;
}

/* Articles (blog + support) put full screenshots inside list steps. Site
   stylesheets size bare `li img` as decorative logo chips (Lens: 80×40 with
   padding + bg) — without this higher-specificity reset those rules squash
   article images into tiny letterboxed thumbnails. */
.post-body li img {
  height: auto;
  object-fit: initial;
  background: none;
  padding: 0;
}

/* Support articles render images at natural size (Help Scout parity): the
   blog's `width: 100%` upscales small UI screenshots (e.g. a 230px dialog
   blown up to column width). Wide screenshots still cap at the column. */
.post-body--support img {
  width: auto;
  max-width: 100%;
}

/* Lens's `td a` idiom (style.css "Table link buttons") renders every link in
   a table cell as a filled button — correct for marketing comparison tables,
   wrong for migrated support tables whose footnotes contain prose links.
   Restore the global link look (higher specificity than the bare `td a`). */
.post-body--support td a {
  font-size: inherit;
  padding: 0;
  background: none;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-weight: inherit;
  display: inline;
}

.post-body iframe {
  aspect-ratio: 16 / 9;
}

/* HubSpot's form embed lives inside an iframe that would otherwise
   inherit .post-body iframe's video-embed styling (16:9, shadow,
   radius). Selector specificity (0,0,2,1) beats .post-body iframe
   (0,0,1,1) so the form iframe stays clean inside .hs-form-wrap. */
.post-body .hs-form-wrap iframe {
  aspect-ratio: auto;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}

/* --- Blog post + feature-row responsive --- */
@media (max-width: 991px) {
  .post-hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .post-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .post-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
  }

  .post-sidebar-meta {
    flex-direction: row;
    gap: var(--space-sm);
  }

  .post-toc {
    display: none;
  }

  .post-section {
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .logo-bar img {
    height: 40px;
    max-width: 100px;
  }

  .quote-carousel-card {
    flex: 0 0 100%;
  }

  .logo-carousel-track {
    gap: var(--space-xl);
  }

  .logo-carousel-track img {
    max-height: 36px;
    max-width: 80px;
    height: auto;
  }

  /* Tighten the industry-page horizontal padding on small screens. The hero
     inners inherit this from the shell — no separate override needed. */
  .industry-page {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 479px) {
  .post-section {
    padding: 1.25rem 0.9375rem;
  }
}

/* --- Callout cards --- */
.callout-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.callout-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.callout-card p {
  font-size: var(--text-body);
}

.callout-card ul {
  margin-bottom: 0;
}

.callout-card > p:nth-last-child(2) {
  flex: 1;
}

.callout-card > p:last-child {
  margin-bottom: 0;
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  padding: var(--space-xl) var(--space-xl);
  border-radius: 12px;
  margin-top: 3rem;
}

.cta-banner p {
  font-size: var(--text-lg);
  margin: 0 auto 1.25rem;
}

.cta-banner-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--text-lg);
  padding: 0.85rem 2.5rem;
  border-radius: 6px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.cta-banner-btn:hover {
  transform: scale(1.05);
  background: var(--color-accent-hover);
}

/* Split layout: message left, actions right — for a banner offering a
   secondary path (e.g. "read more" + a lower-commitment CTA) instead of
   a single centered button. */
.cta-banner--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  text-align: left;
}

.cta-banner--split p {
  margin: 0;
}

.cta-banner--split .cta-banner-title {
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.cta-banner--split .cta-banner-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cta-banner--split .cta-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cta-banner--split {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cta-banner--split .cta-banner-actions {
    justify-content: center;
  }
}

/* --- Subtle animations --- */
@media (prefers-reduced-motion: no-preference) {
  main > section,
  blockquote,
  article:not(.card-hover):not(.nav-featured-post) {
    animation: fadeIn 0.4s ease both;
  }

  .card-hover {
    animation: fadeInOnly 0.4s ease both;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInOnly {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* --- Selection --- */
::selection {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-text);
}

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
  }

  header nav {
    flex-wrap: wrap;
    padding: 0 1.5rem;
    min-height: 56px;
  }

  header nav ul {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) 0 var(--space-md);
    border-top: 1px solid var(--color-border);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
  }

  header nav ul.nav-open {
    display: flex;
  }

  header nav ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    align-items: stretch;
  }

  header nav ul li:last-child {
    border-bottom: none;
  }

  header nav ul li a {
    display: block;
    font-size: var(--text-body);
    padding: var(--space-sm) 0;
    border-radius: 0;
    text-align: left;
  }

  header nav ul li a.btn-contact,
  header nav ul li a.btn-login {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border-radius: var(--radius);
    width: 100%;
    box-sizing: border-box;
  }

  header nav ul li:has(a.btn-contact),
  header nav ul li:has(a.btn-login) {
    border-bottom: none;
    margin-left: 0;
  }

  .nav-dropdown-wrap {
    flex-direction: column;
  }

  .nav-dropdown-trigger {
    padding: var(--space-sm) 0;
    width: 100%;
    justify-content: flex-start;
    font-size: var(--text-body);
  }

  .nav-dropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    padding: 0 0 var(--space-xs) 0;
  }

  .nav-dropdown-item {
    padding: var(--space-xs) var(--space-sm);
  }

  .nav-dropdown--wide {
    width: 100%;
    right: auto;
  }

  .nav-dropdown-cols {
    grid-template-columns: 1fr;
  }

  .nav-dropdown-col--featured {
    display: none;
  }

  .nav-dropdown-col--browse {
    border-left: none;
    border-top: none;
    padding-left: 0;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .quotes-row {
    grid-template-columns: 1fr;
  }

  .text-and-media {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .text-and-media--media-left {
    direction: ltr;
  }

  .section-light {
    padding: 40px 1.5rem;
  }

  .hero {
    min-height: 360px;
  }

  .hero-text h1 {
    max-width: 100%;
  }

  main {
    padding: var(--space-xl) var(--space-md) var(--space-3xl);
  }

  /* Match the reduced main top padding at this breakpoint. */
  main:not(.industry-page) > .hero,
  main:not(.industry-page) > .post-hero-full,
  main:not(.industry-page) > .post-hero-product {
    margin-top: calc(-1 * var(--space-xl));
  }

  body.home-hero-nav main:not(.industry-page) > .hero {
    margin-top: calc(-1 * (var(--space-xl) + var(--header-height)));
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --- Team grid (about pages) --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
  justify-content: center;
  gap: var(--space-lg);
}

/* --- About page hero split (text + media side-by-side) --- */
.about-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  max-width: none;
}

.about-hero-media img {
  max-height: 340px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
  .about-hero-media {
    display: none;
  }
}

/* --- Industry hero split (text + media side-by-side) ---
   Side-by-side variant of the full-bleed hero used when the imagery is
   a collage / illustrative panel rather than a single overlay photo.
   Constrained by the page shell (.industry-page / main); the inner just lays
   out the two columns and inherits the shell's width + padding. */
.industry-hero-split {
  padding: var(--space-xl) 0;
}

.industry-hero-split-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
}

.industry-hero-split-media img {
  max-height: 340px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .industry-hero-split-inner {
    grid-template-columns: 1fr;
  }
}

/* --- Story layout: text + heading (left) + timeline (right) side-by-side --- */
.story-layout {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px);
  gap: var(--space-2xl);
  align-items: start;
}

.story-text > :first-child {
  margin-top: 0;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--color-accent);
}

.timeline li {
  position: relative;
  padding: 0 0 var(--space-xl) var(--space-md);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 7px);
  top: 0.4rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.timeline-year {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.timeline li p {
  margin: 0;
}

@media (max-width: 768px) {
  .story-layout {
    grid-template-columns: 1fr;
  }
}

.team-card {
  display: block;
  text-align: center;
  color: inherit;
  border-bottom: none;
  transition: transform var(--transition);
}

a.team-card:hover {
  opacity: 1;
  transform: translateY(-4px);
}

a.team-card:hover .team-name {
  color: var(--color-accent);
}

.team-name {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.team-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.team-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  display: block;
}

/* Legal document lists (licenses page) */
.legal-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-doc-list li {
  padding: var(--space-xs) 0;
}

.legal-doc-list .legal-doc-date {
  margin-left: var(--space-sm);
}

.legal-doc-date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ============================================================
   Home page — transparent nav over hero
   Activated when the page sets `bodyClass: home-hero-nav`. Each site's
   homepage opts in; sub-pages keep the default solid white nav.
   ============================================================ */

body.home-hero-nav header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

/* Tint only TOP-LEVEL nav links/triggers white. Dropdown anchors live deeper
   in the tree (.nav-dropdown a, .nav-dropdown-item, .nav-featured-post a) and
   sit on a white panel — leaving them alone keeps them dark and readable. */
body.home-hero-nav header nav > ul > li > a,
body.home-hero-nav header nav > ul > li > .nav-dropdown-trigger {
  color: rgba(255, 255, 255, 0.92);
}

body.home-hero-nav header nav > ul > li > a:hover,
body.home-hero-nav header nav > ul > li > .nav-dropdown-trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

body.home-hero-nav .nav-logo img {
  filter: brightness(0) invert(1);
}

/* Hamburger spans default to var(--color-text) (dark) — invisible on the
   dark hero. Flip them white in the transparent state. */
body.home-hero-nav .nav-toggle span {
  background: #fff;
}

/* Once scrolled past the hero — OR when the mobile menu is open (the dropdown
   needs a solid background so the white text is readable) — fall back to the
   default solid nav appearance. */
body.home-hero-nav.nav-scrolled header,
body.home-hero-nav header:has(nav ul.nav-open) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-nav);
}

body.home-hero-nav.nav-scrolled header nav > ul > li > a,
body.home-hero-nav.nav-scrolled header nav > ul > li > .nav-dropdown-trigger,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > .nav-dropdown-trigger {
  color: var(--color-text-muted);
}

body.home-hero-nav.nav-scrolled header nav > ul > li > a:hover,
body.home-hero-nav.nav-scrolled header nav > ul > li > .nav-dropdown-trigger:hover,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a:hover,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > .nav-dropdown-trigger:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

body.home-hero-nav.nav-scrolled .nav-logo img,
body.home-hero-nav header:has(nav ul.nav-open) .nav-logo img {
  filter: none;
}

body.home-hero-nav.nav-scrolled .nav-toggle span,
body.home-hero-nav header:has(nav ul.nav-open) .nav-toggle span {
  background: var(--color-text);
}

/* The Contact / Log in buttons keep their accent fill in every state —
   restore the original button text color (white) which the rules above
   otherwise tint. */
body.home-hero-nav header nav > ul > li > a.btn-contact,
body.home-hero-nav header nav > ul > li > a.btn-login,
body.home-hero-nav.nav-scrolled header nav > ul > li > a.btn-contact,
body.home-hero-nav.nav-scrolled header nav > ul > li > a.btn-login,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a.btn-contact,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a.btn-login {
  color: var(--color-bg);
}

/* --- Support: Pagefind search (landing page) --- */
/* Theme the Pagefind Component UI (<pagefind-searchbox>) with our tokens via
   its --pf-* custom properties. The component only renders on real builds
   (pagefind runs post-build), so these rules are inert under `--serve`. */
.support-search {
  margin-bottom: var(--space-xl);
}

/* Category cards on /support are whole-card anchors; a.card-hover's
   `display: block` would override .callout-card's flex column and break the
   bottom-aligned article counts across a row (same specificity — this rule
   wins on source order). */
a.callout-card {
  display: flex;
}

/* Support article listings: the default .resource-grid is flex-wrap around
   fixed 340px cards, which leaves a right-side gap at viewports between one
   and two columns. This modifier swaps to auto-fill grid tracks so the
   text-only cards always fill the row evenly — including the last row. */
.resource-grid--fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.resource-grid--fill .resource-card {
  width: auto;
}

.support-search pagefind-searchbox {
  --pf-font: inherit;
  --pf-text: var(--color-text);
  --pf-text-muted: var(--color-text-muted);
  --pf-background: var(--color-bg);
  --pf-border: var(--color-border);
  --pf-border-focus: var(--color-accent);
  --pf-border-radius: var(--radius);
  --pf-mark: var(--color-accent);
  --pf-searchbox-max-width: 100%;
}

.support-category-grid .callout-card p:last-child {
  color: var(--color-text-muted);
}

/* === upstream/style.css === */



/* Upstream company token overrides */
:root {
  --color-accent: #004c5c;
  --color-accent-hover: #005d70;
}

/* Product-tinted sections: Lens green, HydroForecast teal.
   Scope these classes to any container that represents a specific product
   (callout cards, CTA blocks, feature rows) to retint nested .btn-primary,
   .callout-card-title, links, etc. via --color-accent. */
.accent-lens {
  --color-accent: #177860;
  --color-accent-hover: #1a8d70;
}

.accent-hf {
  --color-accent: #004c5c;
  --color-accent-hover: #005d70;
}

/* --- Homepage: trusted-by label above shared .logo-bar --- */
.trusted-by .logo-bar-label {
  max-width: none;
  margin: 0 auto var(--space-xl);
}

/* --- Homepage: section intro paragraph under an h2 --- */
.section-intro {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-2xl);
  font-size: var(--text-lg);
}

/* Wide variant: let longer intro lines stay on a single line at desktop widths. */
.section-intro--wide {
  max-width: none;
}

/* --- Homepage: two-product split panels ---
   Site-specific because only the Upstream home splits the two products
   side-by-side with tinted panels; Lens/HF don't need it. */
.product-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.product-panel {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xl);
  border-top: 6px solid var(--color-accent);
  display: flex;
  flex-direction: column;
}

.product-panel-logo {
  height: 40px;
  width: auto;
  margin: 0 0 var(--space-lg);
  border: none;
  align-self: flex-start;
}

.product-panel-title {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}

.product-panel-links {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.product-panel-links li {
  margin: 0;
}

.product-panel-links a {
  font-size: var(--text-sm);
  font-weight: 700;
}

.product-panel > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .product-split {
    grid-template-columns: 1fr;
  }
}

/* --- Homepage: value grid (wider paragraphs than global default) --- */
.value-grid p {
  max-width: none;
}

/* --- Homepage: interdisciplinary video cell --- */
.interdisciplinary-grid {
  align-items: center;
  gap: var(--space-2xl);
}

.interdisciplinary-video {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* --- Homepage: innovation section (text left, recognition logos right) --- */
.innovation-grid {
  align-items: center;
  gap: var(--space-2xl);
}

/* --- Homepage: recognition grid (2x2 inside innovation section) --- */
.recognition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.recognition-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.recognition-logo {
  height: 90px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin: 0;
  border: none;
}

.recognition-item p {
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .recognition-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Homepage: community membership logo row --- */
.community-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3xl);
}

.community-logos img {
  height: 80px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  margin: 0;
  border: none;
}

@media (max-width: 768px) {
  .community-logos {
    gap: var(--space-xl);
  }
  .community-logos img {
    height: 56px;
    max-width: 120px;
  }
}

/* --- Product nav links (Lens / HydroForecast) ---
   Lens and HydroForecast sit beside the other top-level links — same text
   color and weight — and are differentiated only by the brand icon
   prefixed inline. No pill, no underline, no recoloring of the name. */
.nav-product {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

.nav-product-logo {
  height: 1em;
  width: auto;
  margin: 0;
  border: none;
  transform: translateY(0.1em); /* optical alignment with adjacent text */
}

/* Over the dark hero, the brand-colored icons disappear into the image.
   Invert to white in that state only — once scrolled or when the mobile
   menu is open (white nav background) the icons return to brand color. */
body.home-hero-nav:not(.nav-scrolled) header:not(:has(nav ul.nav-open)) .nav-product-logo {
  filter: brightness(0) invert(1);
}

/* Home "Latest from our products": center the wrapping card row. */
.home-latest .resource-grid {
  justify-content: center;
}

/* Careers: flex-wrap card row that centers orphan cards cleanly
   (used for value/benefit sections where counts are 5/6/etc). */
.callout-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

.callout-row > .callout-card {
  flex: 1 1 280px;
  max-width: 340px;
}

/* Careers open-roles list */
.open-roles {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-xl);
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.open-roles li {
  background: var(--color-bg);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
}

.open-roles a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
  border-bottom: none;
}

.open-roles a:hover {
  opacity: 1;
}

.open-roles a:hover .open-role-title {
  color: var(--color-accent);
}

.open-role-category {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-bottom: 0.15rem;
}

.open-role-title {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

/* Hiring process steps: flex-wrap card row, numbered titles.
   The number lives in .hiring-step-title::before via CSS counters, so each
   li stays a simple flex-column card with no grid tricks. */
.hiring-steps {
  list-style: none;
  counter-reset: hiring-step;
  padding: 0;
  margin: var(--space-xl) auto 0;
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

.hiring-steps li {
  counter-increment: hiring-step;
  flex: 1 1 260px;
  max-width: 300px;
  padding: var(--space-xl);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.hiring-step-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}

.hiring-step-title::before {
  content: counter(hiring-step);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiring-steps li p {
  margin: 0;
}

/* --- Team grid (styles in shared base.css) --- */
/* --- Person bio page --- */
.person-bio-back {
  margin-bottom: var(--space-xl);
}

.person-bio-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.person-bio-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 0;
}

.person-bio-name {
  margin: 0 0 0.5rem;
}

.person-bio-title {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-xl);
}

@media (max-width: 768px) {
  .person-bio-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .person-bio-photo {
    max-width: 320px;
    position: static;
  }
}

.person-bio-pronouns {
  font-style: italic;
  font-size: var(--text-sm);
  margin-left: 0.5rem;
}

.person-bio-body {
  font-size: var(--text-lg);
  line-height: 1.7;
}

.person-bio-body p {
  margin-bottom: var(--space-md);
}

/* --- Life-at-Upstream photo grid (about page) --- */
.culture-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
}

.culture-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-radius: var(--radius);
}

/* --- Press page: logo field (HydroForecast-sourced cards only) ---
   press.njk sources card images from Lens/HF press posts' `thumbnail`
   frontmatter. The two products' conventions differ, so press.njk only
   applies this wrapper when `item.sourceSite == 'hydroforecast'`:
   HydroForecast's press thumbnails are (mostly) tightly-trimmed
   outlet/partner wordmarks — the shared .resource-card img rule (cover +
   forced 16:9 + object-position left top), tuned for real photo
   thumbnails, crops/zooms into these. Lens's press thumbnails are still
   all pre-composed 16:9 banner graphics (a photo background + logo
   lockup) designed to fill that exact box, so they keep rendering as a
   plain <img> under the unmodified shared rule. HydroForecast's own
   /resources/ page solves the same problem with a `resource-card-logo-
   media` treatment, but that one is built on an absolutely-positioned
   overlay card shape (`.resource-card-photo`); Upstream's press card
   keeps the plain flow-based shared `.resource-card` layout, so the fix
   is reimplemented here for that shape rather than reused. Same
   specificity as `.resource-card img` (class + tag) — wins on source
   order since site CSS is concatenated after shared base.css.
   This is a stopgap: some HydroForecast press posts (and all Lens ones)
   still use the old composed-banner convention and will look undersized
   in this contained field too until marketing swaps those source files
   for trimmed logos (see `.github/copilot-instructions.md` → "Press
   posts") — tracked as a follow-up, not fixed per-post here. */
.resource-card-logo-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.resource-card-logo-media img {
  width: auto;
  height: auto;
  max-width: min(240px, 100%);
  max-height: 100px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border: none;
  border-bottom: none;
}

/* White/reversed logos set `logoField: "teal"` in their source post
   frontmatter (threaded through by press.js) so the field flips dark
   instead of leaving them invisible on the default white field. */
.resource-card-logo-media--teal {
  background: var(--color-teal);
  border-bottom: none;
}

/* --- Legal content (Upstream-specific) --- */
.legal-content {
  max-width: var(--width-narrow);
}

.legal-content h3 {
  margin-top: var(--space-xl);
}

.legal-content ul {
  padding-left: 1.5em;
}