/* ==========================================================================
   Gray Oak Advisory — base structural styles (shared by both themes)
   Theme colors/fonts live in css/theme.css
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background: var(--color-bg-page);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Flex items shrink below their content size by default once they have
   overflow:hidden (like .hero) — without this, tall pages could squash
   the hero instead of just growing past 100vh. min-height:auto restores
   the normal "don't shrink below your content" behavior. */
.site-header,
.hero {
  flex-shrink: 0;
}

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

a { text-decoration: none; color: inherit; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Wrapper that grows to fill remaining vertical space below the hero so
   the footer sticks to the bottom of short pages, even once content is
   short. (Formerly also hosted the scroll-grown tree rail SVG — removed
   2026-09-17 — so this is now just the flex spacer.) */
.page-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nav-contact-mobile { display: none; }

@media (max-width: 899px) {
  .nav-contact-mobile { display: block; }
  .nav-contact-mobile a { font-weight: 700; color: var(--color-accent); }

  .footer-nav-cols { gap: 40px; }
}

@media (min-width: 900px) {
  .footer-nav-cols { gap: 163px; }
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
}

.logo img { height: 48px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 172px;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text-dark);
}

/* #8A6D3A ("copper gold") rather than var(--color-accent) (2026-10-01) —
   the darker, more bronze gold worked out during the 2026-10-01 contrast
   preview specifically for gold text on white (~4.85:1, passing WCAG
   1.4.3's 4.5:1 minimum). The current accent, Champagne Gold (#D9B873),
   is lighter than the old Gold Leaf and reads even less distinctly here
   (~1.9:1) — this was the one gold-on-white pairing still failing after
   the day's other color changes; see the Site-wide contrast re-audit
   entry in the archive doc. Hardcoded rather than added as a new
   --color-* token, matching how Steel Blue is written directly wherever
   it's used on the site. */
.nav-links a:hover { color: #8A6D3A; }

/* Went through three changes on 2026-10-01 before landing here: briefly
   solid gold with dark gray text (matching .btn-solid), then white with a
   gold border and gold text, then finally — this version — white with a
   gold border and dark gray text, after the client asked for the text
   color specifically to switch from gold to dark gray while keeping the
   white fill and gold border. See the archive doc for the full
   back-and-forth. `background` is set explicitly to --color-bg-page
   (white) rather than left unset/transparent as it originally was, so the
   button reads as a true white rectangle regardless of what it's sitting
   on. Hover's text color was changed from white to the same dark gray for
   the same reason the resting state changed — a gold-filled hover with
   white text was the one place on the site that pairing would otherwise
   still appear, and dark gray on gold also matches .btn-solid's own
   look. */
.btn-outline {
  display: inline-block;
  padding: 10px 26px;
  border: 1.5px solid var(--color-accent);
  background: var(--color-bg-page);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Solid Steel Blue button, white text — same shape/sizing as .btn-outline
   but filled rather than bordered. Added 2026-09-25 for Services' and Who
   We Help's closing CTA buttons, replacing an earlier pass that wrapped
   the plain .btn-outline button in a full padded .cta-blue-block card
   (the same treatment the homepage's "Contact Gray Oak" button sits in)
   — the client asked for just the button itself to read blue with white
   lettering, not a surrounding blue block, so this is a direct button
   fill instead of a wrapper. */
.btn-blue {
  display: inline-block;
  padding: 10px 26px;
  background: #35536B;
  border: 1.5px solid #35536B;
  color: #fff;
  font-weight: 600;
  border-radius: 2px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-blue:hover {
  background: #263e51;
  border-color: #263e51;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--color-text-dark);
}

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

.hero {
  position: relative;
  background-color: var(--color-bg-dark);
  background-image: var(--hero-bg-overlay), var(--hero-bg-image);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  padding: 90px 32px 60px;
  overflow: hidden;
}

.hero-inner { max-width: 1200px; margin: 0 auto; min-height: 380px; }

/* Shorter hero for interior pages (About, Services, etc.) — same look, less
   empty vertical space since these pages don't need the full homepage hero height.
   As of 2026-09-17 (About/Services/Who We Help/Insights only): shrunk to 1/3 of
   its previous size — padding and min-height all scaled down together so the
   proportions stay the same, just smaller. */
.hero--sub { padding: 30px 32px 20px; }
.hero--sub .hero-inner { min-height: 67px; }

/* Services/Who We Help/Insights only (2026-09-21): "Who We Do"/"Who We
   Help"/"Insights" sit inside .hero-inner, which is centered as a
   max-width:1200px box with the 32px side padding applied one level up
   on .hero itself — so the heading's left edge lands flush with
   .hero-inner's own edge. The intro text below each heading sits inside
   .about-two-col, which applies that same 32px as its own padding
   *inside* its max-width:1200px box instead, so the paragraph starts
   32px further right than the heading above it. Moving the 32px of
   horizontal padding down from .hero--about onto .hero-inner (instead of
   removing it) reproduces .about-two-col's box model exactly, so both
   end up starting at the same x position. Scoped to .hero--about, used
   by these three pages' hero plus page-template-two-column.html; as of
   2026-09-24 About's own hero also uses this class again (see the About
   hero heading aligned with the other pages entry further below), so
   all four interior pages now share the same flush-left hero alignment. */
.hero--about { padding-left: 0; padding-right: 0; }
.hero--about .hero-inner { padding: 0 32px; }

/* .hero--center-title (2026-09-17–21, then About-only 2026-09-23–24):
   centers a hero heading on the page rather than aligning it flush-left
   with the body copy below it. Originally used by Services/Who We
   Help/Insights, then narrowed to About only when the client asked for
   "Who We Are" to read centered while the rest of that page stayed
   left-aligned. As of 2026-09-24, About's hero was switched back to the
   flush-left .hero--about treatment above (matching Services/Who We
   Help/Insights and page-template-two-column.html again — see the About
   hero heading aligned with the other pages entry further below), so
   this class is currently unused on any live page. Left in place as a
   reusable option, the same way page-template-standard.html is kept
   unused rather than deleted. */
.hero--center-title .hero-title-gold {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* The page's first heading, relocated into these shortened interior heroes
   (About/Services/Who We Help/Insights) instead of repeating atop the first
   content section below. Reuses .hero h1's sizing, just recolored gold to
   read clearly against the dark hero background. */
.hero .hero-title-gold {
  color: var(--color-accent);
  margin-bottom: 0;
}

.hero-eyebrow {
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  max-width: 700px;
  margin-bottom: 20px;
}

.hero p {
  color: var(--color-text-on-dark-muted);
  max-width: 560px;
  margin-bottom: 36px;
  font-size: 1.05rem;
}

/* Briefly changed to a white background with a gold border/text on
   2026-10-01, then reverted the same day once the client clarified that
   request was actually about .btn-outline (see the archive doc) — back
   to its original solid-gold-rectangle, dark-gray-text look, now also
   shared by .btn-outline above. */
.btn-solid {
  display: inline-block;
  padding: 14px 34px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  border-radius: 2px;
}

.btn-solid:hover { opacity: 0.9; }

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

.icon-strip {
  background: var(--color-bg-dark-strip);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 34px 32px;
}

.icon-strip .wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  text-align: center;
  min-width: 120px;
  max-width: 220px;
}

.icon-item svg { width: 34px; height: 34px; }

/* Switched 2026-09-28 from short, all-caps labels ("TRUSTED ADVISORS") to
   full sentences ("From wherever you're starting.") when the icon strip
   went from four value-prop words to three roots/branches/leaf lines —
   uppercase + wide letter-spacing reads fine on a two-word label but
   shouts on a full sentence, so both were dropped in favor of plain
   sentence case at a slightly larger size. */
.icon-item span {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-on-dark-muted);
}

.icon-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
}

/* ---------- Pipeline (people -> process -> data -> tech -> assets) ---------- */

/* Homepage-only wrapper around the pipeline + cards sections. Went through
   four rounds of an oak-leaf watermark background on 2026-09-17 (a two-band
   corner-leaf image, then a seamless tile, then scattered/varied leaves,
   then a fourth corner-clustered tile) — removed again per client request,
   back to the plain --color-bg-page background (pure white as of the
   site-wide header/content color change, also 2026-09-17) that
   .pipeline-section/.cards-section already paint on their own below. The
   wrapper div itself is left in place in index.html since other
   homepage-only rules don't depend on it, but it carries no background
   styling now. */

.pipeline-section {
  background: var(--color-bg-page);
  padding: 70px 32px 20px;
  text-align: center;
}

.pipeline-heading {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  margin-bottom: 44px;
  color: var(--color-text-dark);
}

/* Reusable left-aligned prose block for interior-page body copy (story
   sections, long-form text) — sections like .pipeline-section center their
   heading, but paragraphs read better left-aligned and width-constrained. */
.prose-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-dark);
}

.prose-block p { margin-bottom: 20px; }
.prose-block p:last-child { margin-bottom: 0; }
.prose-block strong { color: var(--color-pipeline-icon); }

/* Bullet list inside a .prose-block (2026-10-04, Privacy page rewrite):
   .prose-block previously only ever held plain paragraphs, so there was
   no list styling for it — only .card-modal-body (a card's expanded
   detail copy) had one. Added here, matching that same spacing/size
   rather than introducing a third variant. */
.prose-block ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.prose-block ul:last-child { margin-bottom: 0; }
.prose-block li {
  margin-bottom: 6px;
}

/* Diagram image dropped into a .prose-block (Services page, 2026-09-24):
   sits under the paragraph text above it, left-aligned like the copy.
   Originally capped at max-width: 408px, narrower than the text column
   itself; that cap was removed 2026-10-12 per client request so the
   image spans the exact same width as the paragraphs above it (the
   image file itself was swapped for one matching that wider box the
   same day — see the asset-replacement entries in the visual brand
   doc). */
.prose-diagram {
  display: block;
  width: 100%;
  margin: 32px 0 0;
}

/* Services diagram centered in the leftover vertical space beside the
   cards column (2026-09-24): on wide screens the three intro paragraphs
   are shorter than the six stacked service cards next to them, and
   .about-two-col's own align-items: start leaves that leftover space
   empty below the diagram instead of using it. Scoped to #services
   .prose-block, and to widths above the 860px breakpoint where the two
   columns still sit side by side — below that, .about-two-col drops to a
   single stacked column and the original top-margin-only diagram spacing
   already looks right, so it's left untouched there. Stretches the text
   column to match the cards column's full height, then switches it to a
   column flex layout so the three paragraphs keep their normal position
   at the top while the diagram's own auto margins split whatever space
   is left above and below it evenly, centering it in that space. The
   third paragraph's own margin-bottom is zeroed here too — .prose-block
   p:last-child normally handles that, but it never matched once the
   diagram (the block's actual last child) followed the text, which was
   quietly leaving 20px of fixed spacing above the diagram that the auto
   margins couldn't split evenly; removing it makes the centering exact. */
@media (min-width: 861px) {
  #services .prose-block {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  #services .prose-block p:last-of-type {
    margin-bottom: 0;
  }

  #services .prose-diagram {
    margin: auto;
  }
}

/* Generic centered-heading + body-copy section for interior pages — same
   look as .pipeline-section without the homepage's connector row, so
   bottom padding is even instead of tight. */
.content-section {
  background: var(--color-bg-page);
  padding: 70px 32px;
  text-align: center;
}

/* About page only (2026-09-17): puts the intro copy and the "What We
   Believe" cards side by side instead of stacked — text on the left,
   cards on the right, with "What We Believe" centered directly above the
   card grid specifically (2026-09-17 follow-up, corrected) — the first
   attempt spanned the heading across both columns and centered it over
   that whole span, which visually drifted it toward the text column
   instead of sitting over the cards. The empty "." cell below reserves
   the same row-1 space above the text column so the heading doesn't
   pull the cards column taller than the text column. .content-section
   and .cards-section are set to display:contents here so their children
   (the prose block, the heading, and the card grid) become direct items
   of this grid instead of being trapped inside two stacked section boxes
   — that's what lets the intro text and the card grid share one grid
   row and start at exactly the same height, rather than needing a
   manual top-offset guess. Everywhere else these sections render
   normally; none of this applies outside .about-two-col, which
   about.html is the only page to use. */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    ".    heading"
    "text cards";
  column-gap: 60px;
  row-gap: 24px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 32px;
}

.about-two-col .content-section,
.about-two-col .cards-section {
  display: contents;
}

.about-two-col .prose-block {
  grid-area: text;
  max-width: none;
  margin: 0;
}

.about-two-col .cards-heading {
  grid-area: heading;
  text-align: center;
  margin-bottom: 0;
}

.about-two-col .cards-grid {
  grid-area: cards;
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
  margin: 0;
}

/* Services page (2026-09-24; reused on Who We Help's "Where You Are
   Matters" grid 2026-09-25): client asked for Services' six service cards
   to read as long horizontal rectangles stacked in a single column,
   instead of the 2-column grid every other .about-two-col page
   (About/Insights) still uses; Who We Help's own five stage cards were
   switched to the same treatment later, per a client-supplied reference
   screenshot, and had their `.card-dot` markup removed outright at the
   same time (see the entry below). Scoped to this modifier class
   so it only overrides Services' own .cards-grid — the shared .card
   styling (background, shadow, hover, the click-modal/hover-popover
   behavior) is untouched, and every other page's cards-grid is
   unaffected. The single column here is already the same width the
   2-column grid used for the whole card pair, so each card reads as a
   wide bar rather than needing extra height. */
.about-two-col .cards-grid--stacked {
  grid-template-columns: 1fr;
}

/* Services cards made ~20% shorter (2026-09-24; automatically inherited by
   Who We Help's stacked cards 2026-09-25, see the entry below): client
   asked for Services' stacked content blocks themselves to be shorter,
   not just laid out in one column. Trims the same three things that were
   setting each card's height — its own vertical padding, its min-height
   floor, and the two internal margins between title/paragraph/dot —
   scoped to `.cards-grid--stacked .card` so only pages using this
   modifier class shrink; About's and Insights' own `.card` (plus the
   click-modal and hover-popover, which don't use `.card`'s box model at
   all) is untouched. */
.about-two-col .cards-grid--stacked .card {
  padding: 16px 22px;
  min-height: 118px;
}

.about-two-col .cards-grid--stacked .card h3 {
  margin-bottom: 6px;
}

.about-two-col .cards-grid--stacked .card p {
  margin-bottom: 10px;
  font-size: 0.8rem;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .about-two-col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "heading"
      "cards";
    row-gap: 44px;
  }

  .about-two-col .cards-heading {
    margin-bottom: 0;
  }

  .about-two-col .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Who We Help only (2026-09-25): client attached a reference photo (two
   crew members working an excavated trench on a water main valve, shot
   from above) and asked to add it to the right of the intro description
   text. First pass stacked the "Where You Are Matters" heading and cards
   underneath the photo, in the right column only; the client then asked
   for that section to sit underneath the description text instead, so
   it was widened to its own full-width row below both the text and the
   photo rather than being confined to the photo's column. This is a
   page-only variant of the shared .about-two-col grid (used as-is by
   About, Services, and Insights) — a modifier class on the same wrapper
   div adds a "photo" cell beside "text" in row one, then lets "heading"
   and "cards" each span both columns in their own full-width rows below,
   so nothing here touches the shared grid areas or rules those other
   pages still rely on.

   "Where You Are Matters" swapped with the photo (2026-09-28, client
   request): the client asked to swap the positions of "Where You Are
   Matters" and the photo that had been sitting to its right. The photo
   now sits directly under the intro text in the left column (its own
   "photo" row, grid-area set below), and "Where You Are Matters" moved
   into .who-we-help-right in the DOM, ahead of the Utilities block, so
   the right column now reads "Where You Are Matters" then "Utilities &
   Infrastructure Owners" stacked top to bottom. Moving the cards-section
   inside .who-we-help-right doesn't change how it renders — it still
   matches the descendant selector ".about-two-col .cards-section" below,
   which sets display: contents on it regardless of nesting depth, so its
   heading and cards-grid render as plain stacked blocks inside the right
   column exactly as "Utilities" does, just with a .cards-grid that lays
   itself out as its own internal grid (unaffected by the parent no
   longer being the areas grid). */
.who-we-help-two-col {
  grid-template-areas:
    "text  right"
    "photo right";
}

/* Desktop-only fix (2026-09-28, client request): on About, Services, and
   Insights, the shared .about-two-col grid puts an empty cell above the
   text column and the page's own heading (e.g. "Our Services") above the
   cards column, in row 1 — so the description text, sitting in row 2,
   starts below that row's height (the heading's own ~41px, plus the
   grid's 24px row-gap). Who We Help's grid-template-areas above has no
   such "heading" row at all — its "text" cell IS row 1 — so its
   description text was starting ~65px higher than the other three pages',
   even though every page shares the same 70px padding-top. Measured the
   other pages' row-1 height (heading + row-gap) via Playwright at 1400px:
   65px. Adding that as margin-top on just the text column pushes it (and
   the photo below it, which follows in the next row) down by the same
   amount, without touching .who-we-help-right (it spans both rows and
   still top-aligns to the grid's own top edge via align-items: start, so
   "Where You Are Matters"/"Utilities & Infrastructure Owners" don't move).
   Scoped to desktop (min-width: 861px) — on mobile, .about-two-col's own
   stacking order already puts "text" first for every page including this
   one, so the two never diverged there. */
@media (min-width: 861px) {
  .who-we-help-two-col .prose-block {
    margin-top: 65px;
  }
}

.who-we-help-photo {
  grid-area: photo;
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.175);
}

/* "Utilities & Infrastructure Owners" moved under the photo (2026-09-28,
   client request): previously its own full-width .content-section below
   the whole two-column intro (spanning the page, centered, alongside a
   matching "Technology & Service Providers" section — that one is
   unchanged). It's grouped with "Where You Are Matters" in a single
   right-column wrapper (.who-we-help-right, grid-area: right, spanning
   both of the left column's rows) so the two stack normally underneath
   each other regardless of how tall "Where You Are Matters" gets —
   simpler than trying to line up a second set of grid rows across both
   columns. .who-we-help-utilities is a plain div, not .content-section,
   specifically so it does NOT pick up .about-two-col .content-section's
   display: contents (which would otherwise turn its own heading/prose
   into direct grid items competing for the "heading"/"text" areas
   already claimed by the intro text and "Where You Are Matters"). Its
   heading keeps the shared .cards-heading class for the same font/size
   as every other heading on the site, with .who-we-help-utilities-
   heading overriding the two-col-context margin-bottom it would
   otherwise inherit (0, from .about-two-col .cards-heading) back to a
   bit of breathing room above the paragraph — same dual-class pattern
   as .home-hardpart-heading on the homepage. The heading and paragraph
   text below it were briefly both centered per a 2026-09-28 follow-up
   request, then the paragraph text was reverted back to left-aligned
   per a second follow-up the same day — .who-we-help-utilities-heading
   still keeps .cards-heading's own centered default for the heading
   only (so no text-align override is needed there), and
   .who-we-help-utilities .prose-block now explicitly sets left
   alignment so it doesn't inherit centering from anywhere else. */
.who-we-help-right {
  grid-area: right;
}

/* margin-top: 84px (not the 24px used elsewhere for heading-to-content
   spacing) is deliberate here — it centers this section vertically in the
   gap between the last "In Transition" card above and the Technology &
   Service Providers photo below (per a 2026-09-28 follow-up request).
   The right column (cards + Utilities) is taller than the left column's
   photo, so it alone determines where the page content below this two-col
   row starts — pushing Utilities down with margin-top pushes everything
   after it (including that photo) down by the same amount, leaving the
   gap *below* Utilities fixed at 84px regardless of this value. Matching
   margin-top to that same 84px is what makes the gap above equal it too,
   centering the section between the last card and the photo. */
.who-we-help-utilities {
  margin-top: 84px;
}

/* Compound selector (matches .cards-heading.who-we-help-utilities-heading
   on the element itself) so this ties the specificity of ".about-two-col
   .cards-heading" (two classes) instead of losing to it — a single-class
   ".who-we-help-utilities-heading" selector here would be outweighed by
   that rule and get silently overridden. */
.cards-heading.who-we-help-utilities-heading {
  margin-bottom: 14px;
}

/* "Where You Are Matters" heading given breathing room above its first
   card (2026-09-28, client request): moving the cards-section into
   .who-we-help-right (a plain block, not the .about-two-col areas grid —
   see the comment above) meant the heading and card grid lost the 24px
   row-gap that separates Services' "Our Services" heading from its own
   card grid, since .about-two-col .cards-heading sets margin-bottom: 0
   for the grid-row approach those other pages use. Same compound-selector
   fix as .who-we-help-utilities-heading above, set to the same 24px as
   Services' row-gap so the two sections match. */
.cards-heading.who-we-help-matters-heading {
  margin-bottom: 24px;
}

.who-we-help-utilities .prose-block {
  text-align: left;
}

@media (max-width: 860px) {
  .who-we-help-two-col {
    grid-template-areas:
      "text"
      "photo"
      "right";
  }
}

/* Who We Help "Technology & Service Providers" given a photo to its right
   (2026-09-28, client request): a crew hoisting a valve into place inside
   a treatment facility, matched from the client's source document. This
   section sits below (and is unrelated to) .who-we-help-two-col; it's its
   own plain .content-section, not part of that grid.

   Photo raised to align with the heading, same day, per a client
   reference screenshot: the first pass matched the homepage's "The hard
   part is making it work." section (.home-hardpart-row), with the photo
   starting below a full-width heading row — leaving the space beside the
   heading empty. The client's reference showed the photo starting at the
   same top edge as the heading instead.

   Heading centered and re-spaced to match "Utilities & Infrastructure
   Owners," same day, per a follow-up client request: the heading and text
   were originally two separate grid items (in their own "heading"/"text"
   rows) with the photo spanning both rows to sit beside them — but with a
   much taller photo than the heading+text content, the grid's auto row
   sizing stretched the "heading" row's track to make room for the photo,
   inflating the heading-to-text gap to ~80px even though their own
   margin/row-gap totaled 44px. Restructured so the heading and text are
   grouped in a single .tech-providers-content wrapper (the same plain-div,
   stacked-normally approach .who-we-help-utilities already uses below),
   sitting in one grid row beside the photo — .tech-providers-content's
   own height doesn't affect the photo's size (fixed by its own
   aspect-ratio) or vice versa, so the heading-to-text gap is now set
   directly via .cards-heading.tech-providers-heading's margin-bottom
   rather than being at the mercy of the row track's auto-sizing. Set to
   the same 14px as .cards-heading.who-we-help-utilities-heading, and the
   heading's text-align override removed so it falls back to
   .cards-heading's own centered default, matching Utilities' heading
   too.

   Photo moved closer to the section above, and the row vertically
   centered, same day, per a client-supplied reference mockup: the section
   was sitting a full 140px below "Utilities & Infrastructure Owners"
   (the .who-we-help-two-col wrapper's own 70px bottom padding, plus this
   section's inherited 70px top padding from the shared .content-section
   rule) — the reference showed it much closer, so `.tech-providers` gets
   its own `padding-top: 14px` override, bringing the gap down to 84px.
   The reference also showed the photo's top edge sitting above the
   heading rather than level with it, with roughly even space left over
   above and below the shorter text column — `align-items` on the row
   switched from `start` to `center` so `.tech-providers-content` (the
   shorter of the two items) centers vertically against the taller photo
   instead of both starting at the same top edge. */
.tech-providers {
  text-align: left;
  padding-top: 14px;
}

.tech-providers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content photo";
  column-gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.tech-providers-content {
  grid-area: content;
}

/* Compound selector (matches .cards-heading.tech-providers-heading on the
   element itself) so this ties the specificity of the base ".cards-heading"
   rule below instead of losing to it — same fix as
   .cards-heading.who-we-help-utilities-heading above. A single-class
   ".tech-providers-heading" selector here would be silently overridden. */
.cards-heading.tech-providers-heading {
  margin-bottom: 14px;
}

.tech-providers-content .prose-block {
  max-width: none;
  margin: 0;
}

/* Source photo is a portrait-orientation crop (crew hoisting a valve,
   shot indoors), unlike the site's other paired-with-text photos, which
   are all landscape and roughly match their text column's height at full
   width. Left uncropped, its full portrait height towers over the three
   short paragraphs beside it. Cropped here to a landscape aspect ratio
   closer in proportion to the text block, favoring the upper portion of
   the frame (the crew and valve) over the motor/belt equipment in the
   foreground at the very bottom of the source photo. */
.tech-providers-photo {
  grid-area: photo;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.175);
}

@media (max-width: 860px) {
  .tech-providers-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "photo";
  }

  /* Stacked mobile layout only (desktop's side-by-side row is untouched):
     .tech-providers-row has no row-gap, so with content and photo stacked
     into separate grid rows the photo sat flush against the paragraph
     text above it — 0px, versus the heading-to-paragraph gap a few lines
     up (.cards-heading.tech-providers-heading's 14px margin-bottom).
     Matched that same 14px here so the two gaps read as consistent. */
  .tech-providers-photo {
    margin-top: 14px;
  }
}

/* About page content background reverted to white (2026-09-24): from
   2026-09-21 through 2026-09-23, About's content area (between the hero
   and footer) used the same dark gray gradient as the footer instead of
   the site-wide white background, via a .about-content-bg--dark
   modifier class on the wrapper div around .about-two-col and the
   founder block, with the intro prose, "How We Think About the Work"
   heading, and Founder & Principal heading recolored to light/gold text
   to stay readable against it. The client asked to match About's
   content background to the other three interior pages, so that
   modifier class (and these three rules) were removed outright — the
   plain .about-content-bg wrapper carries no background of its own, so
   the shared white `body { background: var(--color-bg-page); }` now
   shows through here exactly as it does on Services/Who We Help/
   Insights. .prose-block and .cards-heading fall back to their
   site-wide default (dark) text color as a result — matching every
   other page's plain-white content section — while .founder-name/
   .founder-quote/.founder-closing keep their own explicit gold color
   (set directly on those rules, not through this now-removed modifier),
   the same gold accent used elsewhere on white backgrounds throughout
   the site (nav/button hovers, etc). The card grid itself needed no
   change either way, since its deep-green/gold-text styling already
   works on any page background. */

/* About page (2026-09-21): tried a custom directional shadow, then a
   warm gold-glow shadow, for the "What We Believe" cards specifically —
   both reverted per client request, so About's cards use the same
   box-shadow as every other card on the site (see the plain .card /
   .card:hover rules below). No override needed here any more. */

.pipeline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.pipeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-pipeline-icon);
  width: 110px;
}

.pipeline-item svg { width: 40px; height: 40px; }

.pipeline-item span {
  font-size: 0.8rem;
  color: var(--color-text-dark);
  font-weight: 600;
}

.pipeline-line {
  width: 56px;
  height: 2px;
  background: var(--color-pipeline-line);
  margin: 0 -4px;
}

/* ---------- Cards ---------- */

.cards-section {
  padding: 50px 32px 100px;
  background: var(--color-bg-page);
}

.cards-heading {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  margin-bottom: 30px;
  text-align: center;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.card {
  background: var(--color-card-bg);
  border-radius: 6px;
  padding: 22px;
  color: var(--color-card-text);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 5px 11px rgba(46, 51, 56, 0.375);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  background: var(--color-card-bg-hover);
  box-shadow: 0 7px 14px rgba(46, 51, 56, 0.425);
  transform: translateY(-3px);
}

.card--featured {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  min-height: 320px;
}

.card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.card p {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 14px;
}

.card-image-placeholder {
  flex: 1;
  min-height: 90px;
  background: rgba(255,255,255,0.12);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 4px;
  margin: 10px 0;
}

.card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
  margin-right: 4px;
}

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

.site-footer {
  position: relative;
  background: var(--color-bg-footer);
  color: #fff;
  padding: 60px 32px 30px;
  overflow: hidden;
  margin-top: auto;
}

.footer-grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 14px;
}

.footer-nav-cols {
  display: flex;
  flex-wrap: wrap;
}

.footer-logo img {
  width: 190px;
  height: auto;
  display: block;
}

.footer-col h4 {
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.footer-col ul.footer-links-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-col--centered {
  text-align: center;
}

.footer-col--centered .footer-links-row {
  justify-content: center;
}

/* Homepage footer only (2026-09-17 follow-up): below 1200px, force a
   plain single-column stack — the logo+tagline group, then Quick Links
   (with the copyright/Privacy line now living under its link list) —
   each centered, instead of leaving it to flex-wrap's judgment call. See
   the 1200px rule below for why this footer needs more room than most
   before going row-based. */
.footer-grid--home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

/* Homepage footer only: once there's enough width, lay the footer out as
   two flush-edge groups instead of stacking — the logo+tagline on the
   left, Quick Links (and the copyright/Privacy line now under it) on the
   right — with space-between pushing them to the footer's true left and
   right edges (2026-09-17 follow-up: simplified from an earlier 3-column
   grid + absolutely-centered middle block, no longer needed now that the
   tagline sits next to the logo instead of in its own centered slot).

   max-width is also overridden to none here: the base .footer-grid rule
   caps at 1200px and centers with auto margins, which on wide viewports
   left Quick Links sitting ~100px in from the true right edge of the
   page — well short of "close to the edge" once it was right-aligned
   within that capped, centered box. Stretching the homepage grid to the
   full width of .site-footer's padding box (unconstrained, no
   auto-centering) means the right group lands right against the
   footer's own 32px side padding instead. */
@media (min-width: 1200px) {
  .footer-grid--home {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .footer-grid--home .footer-col--centered,
  .footer-grid--home .footer-legal {
    text-align: right;
  }

  .footer-grid--home .footer-col--centered .footer-links-row {
    justify-content: flex-end;
  }
}

/* Homepage footer only (2026-09-17 follow-up): logo + short italic
   tagline sitting side by side, vertically centered against the logo —
   moved here from its own centered block between the logo and Quick
   Links. flex-wrap lets the tagline drop to its own line below the logo
   if the combined width doesn't fit, rather than ever overlapping
   anything. The tagline is sized 20% up from its original 0.95rem and
   colored the same gold as "Quick Links" so it reads as a brand
   statement next to the mark rather than a caption. */
.footer-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* .footer-logo normally carries a bottom margin for the stacked layout
   (logo sitting above the nav columns on interior pages); inside
   .footer-brand it sits inline next to the tagline instead, so that
   margin is zeroed out here — otherwise align-items:center would center
   the logo's margin box rather than the image itself, nudging the logo
   visibly above the tagline's baseline. */
.footer-brand .footer-logo {
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .footer-brand {
    justify-content: flex-start;
  }
}

.footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.14rem;
  color: var(--color-accent);
}

/* Homepage footer only (2026-09-17 follow-up): copyright + Privacy line
   moved to sit under the Home/What We Do/Who We Are/Contact Us list
   instead of under the tagline — small and muted, as copyright lines
   usually are, with the Privacy link underlined so it reads as tappable
   despite matching the muted copyright text next to it.

   The Privacy link's rule is written as .footer-col .footer-legal a
   rather than plain .footer-legal a (2026-09-17 fix): now that this line
   lives inside .footer-col, the generic ".footer-col a" rule below (also
   font-size + color) has equal selector specificity, and later source
   order let it win, bumping Privacy up to 0.9rem/brighter white instead
   of staying 0.8rem/muted like the copyright text next to it. The extra
   .footer-col in the selector makes this one unambiguously more specific
   so it wins regardless of where either rule sits in the file. */
.footer-legal {
  margin-top: 14px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

.footer-col .footer-legal a {
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
}

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

.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.footer-col a:hover { color: var(--color-accent); }

/* Homepage footer only: shortened to about 2/3 of its original height
   (2026-09-17) — the footer's total height is really just a sum of its
   vertical padding plus whatever's tallest in its single content row,
   which is the logo image, so cutting only the outer padding barely
   moved the needle (the ~168px-tall logo still dominated). Scaling every
   contributing dimension down by the same third instead — outer padding,
   grid gap, logo bottom margin, "Quick Links" heading margin, and the
   logo image's own width (it has no explicit height, so the image scales
   proportionally) — brings the whole block down together to roughly a
   third shorter overall. Scoped to .site-footer--home, applied only to
   index.html's footer — every other page's footer keeps its original
   .site-footer/.footer-grid/.footer-logo/.footer-col spacing and the
   full-size 190px logo. */
.site-footer--home {
  padding: 40px 32px 20px;
}

.site-footer--home .footer-grid {
  gap: 27px;
}

.site-footer--home .footer-logo {
  margin-bottom: 9px;
}

.site-footer--home .footer-logo img {
  width: 127px;
}

.site-footer--home .footer-col h4 {
  margin-bottom: 9px;
}

/* ---------- Responsive ---------- */

.nav-links--open {
  display: flex !important;
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--color-bg-page);
  padding: 20px 32px;
  gap: 18px;
  border-bottom: 1px solid var(--color-border);
  z-index: 20;
}

@media (max-width: 860px) {
  /* Hides the header's blue Contact button below 860px (2026-10-05 fix):
     this used to read .btn-outline, matching the nav Contact button's
     class at the time. It was switched to .btn-blue site-wide earlier
     this project (see the archive doc), so this selector stopped
     matching anything and the blue button stayed visible on mobile —
     redundant with the "Contact" link already shown in the hamburger
     dropdown via .nav-contact-mobile below 899px. */
  .nav-links, .site-header .btn-blue { display: none; }
  .nav-toggle { display: flex; }
  .cards-grid { grid-template-columns: 1fr; }
  .card--featured { grid-column: 1; grid-row: auto; }
  .pipeline-line { display: none; }
  .icon-strip .wrap { justify-content: center; }
  .icon-divider { display: none; }
}

/* ---------- Back to top ---------- */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(46, 51, 56, 0.175);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.2s ease;
  z-index: 40;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Site-wide (2026-09-17): once scrolling reaches the footer, main.js
   switches the button from position:fixed (pinned to the viewport, which
   let it sit on top of the dark footer once you'd scrolled all the way
   down) to position:absolute with an inline top computed in JS, so it
   docks just above the footer — back on the white content background —
   instead of floating over it. bottom:auto clears the fixed-mode bottom
   offset so the inline top isn't fighting it. */
.back-to-top.is-docked {
  position: absolute;
  bottom: auto;
}

.back-to-top:hover { opacity: 0.9; }

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 480px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ---------- Clickable cards + detail modal (2026-09-17) ----------
   Any .card with a [tabindex] attribute is treated as interactive (this
   scoping is what keeps the homepage's own Insight cards, which have no
   tabindex, unaffected). Clicking/Enter/Space clones that card's nested
   <template class="card-detail"> into #card-modal-body and shows the
   shared overlay. See js/main.js for the open/close logic. */

.card[tabindex] {
  cursor: pointer;
  position: relative;
}

.card[tabindex]:hover {
  background: var(--color-card-bg-hover);
}

.card[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Raise the whole hovered/focused card (not just its .card-popover
   child) above its sibling cards in the grid. Without this, a sibling
   card later in the DOM — itself position:relative with z-index:auto —
   paints on top of this card's popover regardless of the popover's own
   z-index, since stacking order among same-level positioned siblings
   with z-index:auto follows DOM order, not the z-index set on a
   descendant several levels down. */
@media (hover: hover) and (pointer: fine) {
  .card[tabindex]:hover,
  .card[tabindex]:focus-visible {
    z-index: 30;
  }
}

/* ---------- Hover-to-expand popover (2026-09-23) ----------
   On hover-capable pointers (a real mouse/trackpad — never a touchscreen,
   which reports `hover: none`), hovering or keyboard-focusing a card
   reveals a "window" that expands directly out of the card itself,
   rather than a centered, page-dimming overlay — it's positioned
   absolutely over the card's own footprint and grows downward to fit
   its content, so it reads as the card itself opening up, not a
   separate pop-up appearing elsewhere on the page. It shares
   .card-modal-body for its internal heading/paragraph/list styling, so
   a card's detail copy (including Services' offering lists) looks
   identical whether it's reached by hover or by the click-to-open
   modal. Clicking (or Enter/Space on a focused card) still opens the
   full centered modal exactly as before — this is additive, not a
   replacement — which is what keeps the content reachable on touch
   devices, where there's no hover to reveal this panel at all.

   No max-height/overflow here (2026-09-24 fix): this popover sits
   inside the normal page flow (position: absolute against the card,
   not position: fixed against the viewport), so the page itself
   simply grows and scrolls to fit it — there's no viewport ceiling
   to cap it against. An earlier 560px cap was meant as a safety net
   for the longest card's content, but Services' longest list (11
   items, Asset Management & ISO 55001) actually renders taller than
   that at normal viewport widths, so the "safety net" produced an
   unwanted internal scrollbar on exactly the card it was meant to
   protect. Letting the popover size to its own content removes that
   scrollbar for every card, on every page, regardless of how long a
   given card's detail copy is. */

.card-popover {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, 340px);
  min-height: 100%;
  background: var(--color-card-bg);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(22, 22, 22, 0.225);
  padding: 26px 24px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .card[tabindex]:hover .card-popover,
  .card[tabindex]:focus-visible .card-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
  }
}

body.modal-open {
  overflow: hidden;
}

.card-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 22, 22, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.card-modal-overlay[hidden] {
  display: none;
}

.card-modal {
  /* Matches the clicked card's own styling: same deep-green background,
     gold text, and body font (Inter) as every .card box. */
  position: relative;
  background: var(--color-card-bg);
  color: var(--color-card-text);
  font-family: var(--font-body);
  width: 100%;
  max-width: 560px;
  max-height: min(80vh, 640px);
  overflow-y: auto;
  border-radius: 8px;
  padding: 44px 36px 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-card-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.card-modal-close:hover,
.card-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.card-modal-body h3 {
  font-family: var(--font-body);
  font-size: 1.4rem;
  margin-bottom: 14px;
  color: var(--color-card-text);
}

.card-modal-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.card-modal-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .card-modal {
    padding: 40px 22px 28px;
  }
}

/* ---------- Real-copy pass, round 2 (2026-09-23) ----------
   New shared building blocks for the fuller website copy supplied in
   Gray_Oak_Advisory_Website_Copy_Edited_Clean.docx — a mid-page CTA
   pattern, non-interactive icon cards, bullet lists inside a card's
   detail copy, the About page's new Founder & Principal section, and
   Insights' new real article-preview cards. Deliberately minimal: each
   piece reuses an existing class (.content-section, .cards-heading,
   .card, .prose-block, .btn-solid/.btn-outline) for everything it can,
   adding only what those don't already cover. */

.cta-block {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.cta-block p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-bottom: 28px;
}

/* Homepage "From Strategy to the Work" and "Where Are You Today?" CTA
   sections placed side by side (2026-09-24): previously two of the
   homepage's stacked full-width .content-section CTA blocks, one after
   the other; now shown as a two-column row instead. Scoped to a new
   .home-cta-row wrapper around these <section> elements (index.html
   only) — each section keeps its own .content-section/.cta-block
   markup and styling completely untouched, so no other page's (or the
   homepage's own "Start a Conversation") .content-section is affected.
   The wrapper just arranges its two columns as grid columns and caps
   their combined width to 1200px, matching the max-width other
   two-column layouts on the site use; each section's own 32px side
   padding does the job of a gap between them, so no separate
   column-gap was needed. Collapses to a single stacked column at the
   same 860px breakpoint every other two-column layout on the site
   already uses.

   Each grid column is a .home-cta-col wrapper rather than a bare
   <section> (2026-09-24 follow-up), so more than one piece of content
   can stack inside a column: the left column now holds "From Strategy
   to the Work" followed by "Insights" (moved here from its own
   full-width section below — see the Insights section moved entry
   below), and the right column holds "Where Are You Today?" followed
   by a photo (see the entry below). .home-cta-col itself needs no
   layout rules of its own — its children are ordinary block-level
   elements (two <section>s, or a <section> and an <img>) that already
   stack top to bottom on their own. */
.home-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 860px) {
  .home-cta-row {
    grid-template-columns: 1fr;
  }
}

/* Homepage "Insights" section moved under "From Strategy to the Work"
   (2026-09-24): previously its own full-width .content-section between
   .home-cta-row and "Start a Conversation"; now the second <section>
   inside .home-cta-row's left .home-cta-col (see the comment above),
   directly below "From Strategy to the Work" instead of spanning the
   full page width. No CSS changes were needed for the section itself —
   it's still a plain .content-section/.cta-block, just narrower because
   it now sits in a half-width column; only its position in the DOM (and
   its wrapping div) changed.

   Homepage photo added under "Where Are You Today?" (2026-09-24): client
   supplied a reference photo (a Gray Oak advisor handing a signed work
   order to a seated utility crew member, with colleagues at computer
   workstations behind them) to place under that section. It's the same
   photo used briefly in the homepage hero earlier the same day and then
   reverted (see the Homepage hero photo added, then reverted entry
   below) — the docx's `image8.jpg` was already confirmed as an exact
   match to that same scene, so it was reused directly (resized fresh
   from the source to 1200px wide, `assets/team-handoff-photo.jpg`,
   distinct from the deleted `hero-team-photo.jpg` asset) rather than
   re-matching it from scratch. */
.home-cta-photo {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.175);
  margin-top: 12px;
}

/* Homepage "The hard part is making it work." section, given a photo to
   its left (2026-09-24, restructured 2026-09-25 per a client reference
   screenshot): an aerial shot of a water treatment facility built into a
   golf course and surrounding residential neighborhood, matched from the
   client's source document. The heading sits on its own row above just
   the text column (the same grid-template-areas pattern .about-two-col
   uses for its own heading/cards pairing — an empty first-row cell over
   the photo reserves that space so the heading doesn't pull the photo
   row down), so align-items: center on the row below centers the photo
   against the paragraph copy alone, not the taller heading+copy block
   together — matching the reference, where the photo sits noticeably
   lower than the heading rather than centered against the whole column.
   .home-hardpart overrides the shared .content-section's own centered
   text-align; .prose-block already sets its own left-aligned text
   regardless, so only .cards-heading needed an explicit override here. */
.home-hardpart {
  text-align: left;
}

.home-hardpart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    ".     heading"
    "photo text";
  column-gap: 48px;
  row-gap: 14px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.home-hardpart-heading {
  grid-area: heading;
  text-align: left;
}

.home-hardpart-row .prose-block {
  grid-area: text;
}

.home-hardpart-photo {
  grid-area: photo;
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.175);
}

@media (max-width: 860px) {
  .home-hardpart-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "heading"
      "text";
  }
}

/* Homepage "Insights" section nudged up to align with the photo beside it
   (2026-09-24): client asked to move "Insights" up until the bottom of
   its "Read Our Insights" button lines up with the bottom edge of the
   photo in the column next to it. Measured via Playwright first: the
   button's bottom sat 31.17px below the photo's bottom at 1400px width.
   Scoped to `#insights` (unique to this section, index.html only) with
   a negative top margin pulling it up by that amount — it overlaps into
   "From Strategy to the Work"'s own bottom padding rather than changing
   that section's padding or #insights's own padding, so the visible gap
   between the two sections' text shrinks without touching either
   section's internal spacing. Only affects this column's own two
   sections; "Where Are You Today?" and its photo, in the row's other
   column, are unaffected. */
#insights {
  margin-top: -31px;
}

/* Homepage "Start a Conversation" section — gap above it reduced 20%
   (2026-09-24): client asked to shrink the empty space between the CTA
   row above and this section by 20%. That space is just this section's
   own `.content-section` top padding (70px, shared by every content
   section site-wide), so a more specific rule scoped to a new
   `.home-start-cta` modifier class overrides only `padding-top` here —
   70px × 0.8 = 56px — leaving `.content-section`'s shared padding (and
   every other page/section that uses it) untouched. */
.home-start-cta {
  padding-top: 56px;
}

/* Homepage "Start a Conversation" section placed inside a blue content
   block (2026-09-24): client asked to give this closing CTA the same
   blue treatment as Insights' Featured Insights cards (Steel Blue
   background #35536B, white heading/body text — see the Featured
   Insights cards recolored Steel Blue / text set to white entries
   above). Rather than recoloring the whole full-bleed section — every
   other .content-section on the site keeps the shared white page
   background — the heading and .cta-block were wrapped in a new
   `.cta-blue-block` card-like box centered inside the section, reusing
   the same border-radius/box-shadow proportions `.card` uses elsewhere
   rather than the section's own background. Scoped to `.cta-blue-block`
   (index.html, this section only), so no other page's .content-section,
   .cards-heading, .cta-block, or .btn-outline is affected — including
   the homepage's own other .cta-block sections in .home-cta-row. */
.cta-blue-block {
  background: #35536B;
  color: #fff;
  border-radius: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 48px;
  box-shadow: 0 5px 11px rgba(46, 51, 56, 0.375);
}

.cta-blue-block .cards-heading {
  color: #fff;
}

.cta-blue-block .cta-block p {
  color: #fff;
}

.cta-blue-block .btn-outline {
  /* background: transparent added 2026-10-01, when the base .btn-outline
     rule picked up an explicit white background (previously just unset/
     transparent) — without this override, that white would show as a
     solid white box against the Steel Blue card instead of the
     borderless/see-through look this variant has always had. */
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.cta-blue-block .btn-outline:hover {
  background: #fff;
  color: #35536B;
}

@media (max-width: 600px) {
  .cta-blue-block {
    padding: 40px 24px;
  }
}

/* Homepage "What We Look At" pillar cards — the same .card component
   used everywhere else, topped with a small icon reusing the connector
   row's own SVGs directly above them. Originally non-interactive
   (icon + heading + paragraph, all always visible); switched 2026-09-24
   to the same click/hover-to-expand pattern as every other page's cards
   — collapsed to icon + heading by default, with the paragraph moved
   into a <template class="card-detail"> that js/main.js reveals on
   click/tap (full modal) or hover/keyboard-focus (card-anchored
   popover), exactly like the interactive cards elsewhere. See the
   Homepage pillar cards switched to click/hover-to-expand entry in the
   project notes for the full change. */
.card-icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* Pillar cards, second pass (2026-09-24): client asked for the small gold
   .card-dot click-affordance to be dropped from these five cards (it's
   still used everywhere else) and for all five — People, Process, Data,
   Technology, Assets — to fit on one row instead of wrapping to two.
   The dot's markup was removed straight from index.html rather than
   hidden with CSS, since these cards no longer have a second flex child
   to space against; `justify-content: center` replaces the old
   space-between so the icon+heading sit centered in the shorter card
   instead of pinned to the top. Scoped to `.pillar-cards` (already a
   second class on this one grid) so the shared `.cards-grid`/`.card`
   rules every other page's cards use are untouched. */
.pillar-cards {
  margin-top: 44px;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1120px;
}

.pillar-cards .card {
  min-height: 108px;
  padding: 18px 12px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pillar-cards .card h3 {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Narrowed to a min+max range (not a plain max-width like the rest of
   the site's breakpoints) so this doesn't fight the shared
   `.cards-grid { grid-template-columns: 1fr; }` mobile rule further down
   this file — that rule and this one are equal specificity, so on a
   narrow phone both would match a plain max-width query and whichever
   is later in the file would win regardless of which is more specific
   to the viewport. */
@media (min-width: 861px) and (max-width: 900px) {
  .pillar-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Restated (not just inherited from the shared `.cards-grid` mobile rule
   above) because the unconditional `.pillar-cards` rule higher up sits
   later in the file than that shared rule and would otherwise win at
   every width, phones included, at equal specificity. */
@media (max-width: 860px) {
  .pillar-cards {
    grid-template-columns: 1fr;
  }
}

/* Bullet lists inside a card's expanded detail copy — Services' new
   offering lists are the first place a card's detail text needed real
   list markup; the click-to-open modal had no list styling before, since
   every card's detail copy used to be plain paragraphs. */
.card-modal-body ul {
  margin: 0 0 14px;
  padding-left: 18px;
}

.card-modal-body li {
  line-height: 1.5;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

/* About page — Founder & Principal section. Originally placed below the
   two-column intro/cards grid; moved above it (2026-09-23) so it's the
   first thing a visitor reads under the hero, per client request. It
   still sits inside About's own dark content background. The bio
   paragraphs reuse .prose-block (already styled light-on-dark for this
   page); the name/credentials line and the pull-quote heading are gold,
   which reads clearly against the page's plain white background (see
   the About content background reverted to white entry further below).
   As of 2026-09-24 this block sits back at the bottom of the page,
   after the two-column "How We Think About the Work" section, reversing
   the 2026-09-23 reorder — so its divider moved from border-bottom back
   to border-top, separating it from the two-column block that now
   precedes it again, and its padding flipped to match (more room above
   the divider than below, mirroring .about-two-col's own 70px bottom
   padding above it and the site's shared 70px pre-footer spacing
   below). The border color also changed from a white-on-dark
   rgba(255,255,255,0.12) hairline to the site's standard light divider
   color, var(--color-border), since it now needs to read against white
   instead of the removed dark gradient. */
.founder-block {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 32px 70px;
  border-top: 1px solid var(--color-border);
  /* Establishes a new block formatting context so this block's own
     height always contains the floated photo below (see .founder-photo)
     regardless of how much text follows it — the modern equivalent of
     the old ::after { clear: both } clearfix hack. */
  display: flow-root;
}

.founder-block h2 {
  text-align: left;
  margin-bottom: 8px;
}

/* Founder name, pull-quote, and closing line (below) were gold
   (var(--color-accent)) until 2026-10-01, when the client asked to
   replace the gold text specifically in this section with Steel Blue —
   the same #35536B already live elsewhere on the site (Featured Insights
   cards, the blue CTA/intro rectangles, Services'/Who We Help's closing
   buttons) — hardcoded here to match how those other rules reference it,
   since there's no shared --color-steel-blue token yet. */
.founder-name {
  font-weight: 700;
  color: #35536B;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.founder-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 24px;
  color: #35536B;
}

/* Founder photo, floated left so the name, credential badge, pull-quote,
   and bio prose that follow it in the markup all wrap around it
   (2026-09-24, matching a second reference layout screenshot the client
   sent — replacing the previous flex-row pairing of just the photo with
   the name/badge/quote via the now-removed .founder-header/.founder-
   header-text wrappers). A float is taken out of normal flow, so a
   sibling that comes after it in the source wraps around it two
   different ways depending on what kind of box it is: .founder-badge-
   quote-row (a flex container, which forms its own block formatting
   context) is sized to the remaining ~528px beside the float without
   overlapping it, the same width the old flex column gave it; plain
   text — the name paragraph, and every paragraph inside .prose-block —
   has its line boxes narrowed around the float instead, the same way
   text wraps around a floated image in a magazine layout, so the first
   line or two of the bio prose (whichever falls within the photo's
   ~212px rendered height) sit narrower before the text clears the float
   and returns to the block's full width. */
.founder-photo {
  float: left;
  width: 140px;
  margin: 0 28px 20px 0;
}

.founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.175);
}

@media (max-width: 560px) {
  /* Below 560px the photo drops its float and stacks full-width above
     the name/badge/quote/bio prose instead of having them wrap around
     it — wrapping a phone-narrow column of text around even a 120px
     photo reads too cramped to be worth it at this size. */
  .founder-photo {
    float: none;
    width: 120px;
    margin: 0 0 20px;
  }

  /* The 32px desktop size (set above) reads a bit large next to the
     phone-width photo/name column here. Stepped down to keep it in
     proportion — and, since the switch from Playfair Display to
     Montserrat (2026-09-28, wider glyphs at the same size), down further
     to 1.0625rem/17px, the largest size that still keeps "Asset
     management is not sexy." (the text before the quote's own <br>) on
     one line down to a 320px-wide screen; at the old 1.5rem/24px the
     first sentence alone now wraps to two lines, pushing the quote to
     three lines total instead of the intended two. */
  .founder-quote {
    font-size: 1.0625rem;
  }
}

.founder-closing {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  margin-top: 28px;
  color: #35536B;
}

/* Insights page — real article previews, distinct from the six topic
   cards above them: static (no tabindex/click-to-expand, since there's
   no article page yet for "Read More" to open), each card ending in a
   small gold text link instead. */

/* Featured Insights cards recolored Steel Blue (2026-09-24, client-supplied
   swatch #35536B — one of the confirmed brand palette colors, previously
   unused on any card). Scoped to `.cards-grid--featured` so only these
   three static article-preview cards change; the six interactive topic
   cards above them on this page, and every card on About/Services/Who We
   Help, keep the shared Deep Green `.card` background. Hover gets its own
   lightened Steel Blue (`#61788B`, the same proportional lighten used for
   the shared Deep Green hover color) instead of the default hover
   variable, so hovering still gives visible feedback in the new color. */
.cards-grid--featured .card {
  background: #35536B;
}

.cards-grid--featured .card:hover {
  background: #61788B;
}

/* Featured Insights card text set to white (2026-09-24), on top of the
   Steel Blue background above: overrides the shared gold `--color-card-text`
   for the card itself (its `h3`/`p` don't set their own color, so they
   inherit this) plus the "Read More" link, which does set its own gold
   color and needs its own override. Scoped the same way as the background
   change, so gold card text elsewhere on the site — the six topic cards
   above these on Insights, and every card on About/Services/Who We Help —
   is untouched. */
.cards-grid--featured .card {
  color: #fff;
}

.cards-grid--featured .card-readmore {
  color: #fff;
}

/* Featured Insights description text left-aligned (2026-10-05, client
   request): the card's `p` inherits `text-align: center` from the
   `.content-section` wrapper on insights.html, which centers these
   longer description paragraphs. Scoped to just the `p` so the heading
   and "Read More" link keep their existing centered treatment. */
.cards-grid--featured .card p {
  text-align: left;
}

/* "Other Insights" section (2026-10-01, client request, sample content):
   a second row of article-preview cards below Featured Insights, each
   linking to the same sample article page (insight-article.html) since
   that's the only real article on the site so far. Reuses Featured
   Insights' Steel Blue background/white text treatment — the same
   #35536B / #61788B hover pair — but shrunk down to read as smaller,
   denser blocks: tighter padding, a lower min-height, and a smaller
   heading size. Each card originally also carried a one-line sample
   teaser paragraph; that was dropped the same day, per a follow-up
   request, specifically to make these blocks smaller still — titles and
   the "Read More" link are now each card's only content, so the
   min-height dropped further to match (was 96px, with the teaser).
   Scoped to `.cards-grid--other-insights` so Featured Insights' own
   (larger) cards above it, the six interactive topic cards higher up
   the page, and every card on About/Services/Who We Help are all
   unaffected. */
.cards-grid--other-insights .card {
  background: #35536B;
  color: #fff;
  padding: 16px 20px;
  min-height: 52px;
}

.cards-grid--other-insights .card:hover {
  background: #61788B;
}

.cards-grid--other-insights .card h3 {
  font-size: 0.95rem;
}

.cards-grid--other-insights .card-readmore {
  color: #fff;
  font-size: 0.8rem;
}

.card-readmore {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
}

.card-readmore:hover {
  text-decoration: underline;
}

/* ---------- Contact page (2026-09-28, preliminary) ---------- */

/* Lets a real <button> pick up .btn-blue's look — every other .btn-blue
   on the site so far is an <a>, so this adds only what a <button> needs
   on top (browsers otherwise give it their own font/cursor/border-radius
   defaults) without touching the shared .btn-blue rule those links use. */
button.btn-blue {
  font-family: var(--font-body);
  font-size: 1rem;
  border-radius: 2px;
  cursor: pointer;
}

/* Contact page's "Start a Conversation" intro block (2026-09-28): a plain
   blue rectangle behind the heading and intro line, not the rounded,
   shadowed card look .cta-blue-block uses elsewhere (homepage's own
   closing CTA, and briefly Services/Who We Help's before those were
   simplified to plain buttons) — the client asked for "a regular blue
   rectangle" instead of that card treatment, so this is its own class
   rather than a reuse of .cta-blue-block, with no border-radius,
   everything else (background, white text, sizing/padding) matching it.
   Vertical padding (space above/below the text) was reduced 25% from
   .cta-blue-block's own 56px/40px figures — 42px desktop, 30px phones —
   per a same-day follow-up; horizontal padding is unchanged. A follow-up
   request the same day asked for the shadow effect after all — added
   using .cta-blue-block's own box-shadow value for consistency with the
   rest of the site's card shadows, while still leaving out the border-
   radius (rectangle corners), which the client's "regular blue rectangle"
   note was really about. */
.contact-blue-rect {
  background: #35536B;
  max-width: 720px;
  margin: 0 auto;
  padding: 42px 48px;
  box-shadow: 0 5px 11px rgba(46, 51, 56, 0.375);
}

.contact-blue-rect .cards-heading {
  color: #fff;
}

.contact-blue-rect .cta-block p {
  color: #fff;
}

@media (max-width: 600px) {
  .contact-blue-rect {
    padding: 30px 24px;
  }
}

.contact-form {
  max-width: 560px;
  margin: 40px auto 0;
  text-align: left;
}

.contact-form .form-field {
  margin-bottom: 22px;
}

.contact-form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-dark);
  background: var(--color-bg-page);
  transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  /* Was gold (var(--color-accent)) until 2026-10-01, when the client
     asked for the focus color to be Steel Blue instead — hardcoded to
     #35536B to match how Steel Blue is written everywhere else it's used
     on the site, since there's no shared --color-steel-blue token yet.
     This is still a color-only focus indicator (outline: none above,
     nothing but the border color changes) — a pre-existing WCAG 2.4.7/
     1.4.1 item flagged in the 2026-09-30 accessibility audit and not
     addressed by this change; see the Still open list. */
  border-color: #35536B;
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form .form-actions {
  text-align: center;
  margin-top: 6px;
}

.contact-direct {
  max-width: 560px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-dark);
}

.contact-direct a {
  color: #35536B;
  font-weight: 600;
}

/* Company/location line, its own short section directly under the form
   so it reads like a signature block rather than crowding the form's
   own centered intro copy above. */
.contact-company {
  padding-top: 0;
}

.contact-company-name {
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.contact-company-location {
  color: var(--color-text-dark);
}

/* Sample Insight article page (2026-09-30, client request): a single full-
   article page — insight-article.html — built as a template/example for
   what one of Insights' "Featured Insights" cards should link to once real
   articles exist (their "Read More" links currently point to "#" as
   placeholders; this sample is now linked from the first one, "When the
   Asset Management Plan Meets Operations"). Reuses the existing
   .hero--sub.hero--center-title + .page-content-wrap + .prose-block +
   .cta-block + footer pattern from page-template-standard.html — only
   five small article-specific rules were added below, everything else
   (hero, heading, prose, closing CTA, footer, back-to-top, nav) is the
   same shared CSS every other page already uses. */

/* .hero-eyebrow has no text-align of its own (it didn't need one before
   this page existed, since its only other use — the homepage's full-size
   hero — is left-aligned by default). This page's hero uses
   .hero--center-title, which already centers the h1 itself; this scoped
   rule centers the eyebrow tag the same way, without touching
   .hero-eyebrow's base rule (which stays left-aligned wherever
   .hero--center-title isn't present, e.g. the homepage). */
.hero--center-title .hero-eyebrow {
  text-align: center;
}

/* Hero title widened from the shared .hero h1's 700px cap so this
   particular title ("When the Asset Management Plan Meets Operations")
   wraps to 2 lines instead of 3 at wide desktop widths (2026-10-01,
   client request) — at 1400px the shared 700px cap split it across three
   short, uneven lines; 760px was the smallest width that reliably
   produced a clean 2-line break there (bisected via Playwright), while
   leaving every narrower width unaffected, since the hero's own
   available width already constrains the title below 700px on tablet
   and phone screens regardless of this higher cap. Written as the
   compound selector `.hero .article-hero-title` (specificity 0,2,0)
   rather than the single class alone (0,1,0) — caught during
   verification, since `.hero h1`'s own 700px cap (0,1,1) would otherwise
   silently win the tie and the override would never take effect, the
   same class of cascade bug fixed elsewhere on the site (see
   .cards-heading.tech-providers-heading in the project's changelog). */
.hero .article-hero-title {
  max-width: 760px;
}

/* Byline/date/read-time line — moved into the white content area
   (2026-09-30, client request) from its original spot in the hero, directly
   under the title. It now sits inside .prose-block as the first line above
   the body copy, so it inherits that block's left alignment and max-width
   automatically. On the hero's dark background it reused
   --color-text-on-dark-muted; now that it's on the page's white background
   it needs its own muted-but-readable color instead — #5A5F66 was checked
   against WCAG AA (6.4:1 on white, comfortably over the 4.5:1 minimum for
   normal text), rather than reusing --color-text-dark at full strength,
   which would make it compete with the article's actual body copy below. */
.article-meta {
  color: #5A5F66;
  font-size: 0.9rem;
  margin-bottom: 6px;
  text-align: right;
}

/* "Back to Insights" link — sits at the end of the article body (moved
   there, and right-aligned, 2026-09-30, client request; originally sat
   above the body, left-aligned). Still lives inside the same .prose-block
   as the body copy rather than a separate wrapper, so it shares that
   block's max-width; the explicit right alignment here is what overrides
   .prose-block's own left-aligned default for just this one line. Steel
   Blue, matching the site's other inline text links (e.g. .contact-direct
   a). */
.article-back-link {
  margin-top: 36px;
  text-align: right;
  font-size: 0.9rem;
}

.article-back-link a {
  color: #35536B;
  font-weight: 600;
}

/* In-article subheadings. Left-aligned (unlike the centered .cards-heading
   used for section titles elsewhere), smaller, and kept in the page's
   standard dark text color rather than gold — this is body copy the
   reader is meant to scan quickly while reading, not a page-level section
   title, and dark-on-white avoids adding another gold-on-white contrast
   pairing to the ones already flagged in the 2026-09-30 accessibility
   audit (see the project's changelog doc). */
.article-subhead {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  text-align: left;
  color: var(--color-text-dark);
  margin: 36px 0 14px;
}

/* In-article pull quote. Same italic serif treatment as the site's other
   pull-quote (.founder-quote on About), but left-aligned with a gold left
   border rather than centered and gold-colored — the accent color carries
   the "this is a quote" signal through the border instead of the text
   color, again to avoid adding a new gold-on-white text pairing. */
.article-pull-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text-dark);
  border-left: 3px solid var(--color-accent);
  padding-left: 20px;
  margin: 28px 0;
}

/* Article body boxed in a blue rectangle (2026-10-01, client request):
   everything below the byline except the "Back to Insights" link — every
   paragraph, subheading, and the pull quote — sits inside a flat Steel
   Blue rectangle, the same treatment as the Contact page's "Start a
   Conversation" intro (.contact-blue-rect: flat fill, no border-radius,
   drop shadow) rather than the rounded .cta-blue-block card used
   elsewhere. Built as its own class rather than a reuse of
   .contact-blue-rect, since that one caps out at a 720px max-width sized
   for a short one-line CTA — this box needs to run the full 760px width
   of .prose-block to hold the whole article. The byline (.article-meta)
   stays outside it, on the plain white background, per the client's
   request; the "Back to Insights" link sat inside the box at first too,
   then was moved back out, directly below it, the same day — see the
   archive doc. Text colors inside are overridden to white
   (.article-subhead and .article-pull-quote would otherwise keep their
   standard dark color); the pull quote's gold left border is left as-is,
   reading clearly against the blue fill. */
.article-blue-rect {
  background: #35536B;
  padding: 42px 48px;
  box-shadow: 0 5px 11px rgba(46, 51, 56, 0.375);
  margin-top: 20px;
}

.article-blue-rect p,
.article-blue-rect .article-subhead,
.article-blue-rect .article-pull-quote {
  color: #fff;
}

@media (max-width: 600px) {
  .article-blue-rect {
    padding: 30px 24px;
  }
}