/* Single site stylesheet — ALL styling lives here (no inline styles ever).
   Design tokens are lifted from the source WordPress/Divi theme so the
   migrated site matches: headings #00539d, body copy #58595b, links #00a958,
   secondary green #00995b, Red Hat Display. One breakpoint collapses the nav
   and grids; keep the 900px value in sync with main.js if you change it. */

/* Red Hat Display, self-hosted variable woff2 (latin subset). The source
   loaded this from Google Fonts; self-hosting removes a render-blocking
   third-party request. One file covers 400-800. */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-var.woff2") format("woff2-variations"),
       url("/fonts/RedHatDisplay-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #00539d;        /* source: h1-h6, active nav, top header */
  --color-primary-dark: #003f78;
  --color-accent: #00a958;         /* source: a { color } */
  --color-accent-dark: #00995b;    /* source: button + footer heading green */
  --color-text: #58595b;           /* source: body { color } */
  --color-muted: #6f7173;
  --color-light: #f4f7fa;
  --color-border: #e3e8ee;
  --font-body: "Red Hat Display", Helvetica, Arial, Lucida, sans-serif;
  --font-heading: var(--font-body);
  --container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-primary); line-height: 1.2; margin: 0 0 .5em; }
img { max-width: 100%; height: auto; }
a { color: var(--color-accent); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 760px; }
.center { text-align: center; }
.flow > * + * { margin-top: 1em; }

.btn {
  display: inline-block; background: var(--color-primary); color: #fff;
  padding: 14px 28px; border: 0; border-radius: 4px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  min-height: 44px; line-height: 1.15;
}
.btn:hover { background: var(--color-primary-dark); }
.btn--outline {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  padding: 12px 40px 12px 30px;
}
.btn--outline:hover { background: rgba(0, 0, 0, 0); transform: translateY(2px); }
.btn--accent { background: var(--color-accent-dark); }
.btn--accent:hover { background: var(--color-accent); }

/* header / nav ------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 10; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo { font-weight: 700; font-size: 1.25rem; color: var(--color-primary-dark); text-decoration: none; }
.nav-toggle {
  display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer;
  min-width: 44px; min-height: 44px; line-height: 1; padding: 0;
}
.site-nav { display: flex; gap: 4px; }
.nav-item { position: relative; }
.nav-top { display: block; padding: 8px 14px; color: var(--color-text); text-decoration: none; font-weight: 500; }
.nav-top.is-active, .nav-top:hover { color: var(--color-primary); }
.subnav {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  margin: 0; padding: 8px 0; list-style: none; background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); border-radius: 4px;
}
.has-sub:hover .subnav, .has-sub.is-open .subnav { display: block; }
.subnav a { display: block; padding: 8px 16px; text-decoration: none; color: var(--color-text); }
.subnav a:hover { background: var(--color-light); }

/* sections ----------------------------------------------------------- */
.section { padding: 56px 0; }
.section--light { background: var(--color-light); }
.section__title {
  text-align: center; margin-bottom: 32px;
  font-weight: 700; color: var(--color-primary); line-height: 1.1;
}
/* The source's home-page section headings run 50px/uppercase. Scoped to a
   modifier so post and blog section headings keep a sane size. */
.section__title--xl { font-size: clamp(1.9rem, 4vw, 50px); text-transform: uppercase; }
.section__title--green { color: var(--color-accent); }
/* the accent band runs a step smaller and inverts */
.section--accent .section__title--xl { font-size: clamp(1.7rem, 3.4vw, 41px); }
.section--accent .section__title { color: #fff; }
/* Home hero — reproduces the source's Divi section: the cityscape photo
   blended over #00539d with background-blend-mode: overlay, uppercase white
   62px heading, a short white rule, white lead copy and an outlined button. */
.hero {
  padding: clamp(72px, 12vw, 157px) 0 clamp(84px, 14vw, 184px);
  background-color: var(--color-primary);
  background-image: url("/images/pathforward-cityscape.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  text-align: center;
}
.hero h1 {
  margin: 0 auto;
  max-width: 16em;
  color: #fff;
  font-size: clamp(2.25rem, 6.2vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.hero__rule {
  width: 14%;
  min-width: 90px;
  height: 2px;
  margin: 22px auto;
  border: 0;
  background: #fff;
}
.hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); font-weight: 600; margin: 0; }
.hero__lead { font-size: 20px; color: #fff; max-width: 640px; margin: 0 auto 50px; }
.page-hero { padding: 48px 0; background: var(--color-primary-dark); color: #fff; }
.page-hero h1 { margin: 0; color: #fff; }
.page-hero__img { border-radius: 6px; }

/* cards / grid ------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  display: block; background: #fff; border: 1px solid #e3e7ee; border-radius: 6px;
  padding: 24px; text-decoration: none; color: var(--color-text);
  overflow: hidden;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.card h3 { color: var(--color-primary-dark); }

/* articles ----------------------------------------------------------- */
.article-hero { padding: 48px 0 16px; }
.article-meta { color: var(--color-muted); font-size: .9rem; }
.article-body h2 { margin-top: 1.5em; }
blockquote { border-left: 4px solid var(--color-primary); margin: 1em 0; padding: .25em 0 .25em 1em; color: var(--color-muted); }

/* analytics ---------------------------------------------------------- */
.tag-ns { display: none; visibility: hidden; }

/* embeds ------------------------------------------------------------- */
.video-wrap { position: relative; padding-top: 56.25%; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.form-wrap iframe { width: 100%; min-height: 600px; border: 0; }
.table-wrap { overflow-x: auto; }

/* footer ------------------------------------------------------------- */
.site-footer { background: var(--color-primary-dark); color: #fff; margin-top: 56px; }
.site-footer a { color: #fff; }
.site-footer__main {
  max-width: var(--container); margin: 0 auto; padding: 48px 20px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
}
.site-footer__logo { font-weight: 700; font-size: 1.15rem; }
.site-footer__main ul { list-style: none; margin: 0; padding: 0; }
.site-footer__main li { margin-bottom: .5em; }
.site-footer h4 { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.2); padding: 16px 20px; font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: center; justify-content: space-between;
}

/* responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; box-shadow: 0 8px 16px rgba(0,0,0,.12); }
  .site-nav.is-open { display: flex; }
  .subnav { position: static; box-shadow: none; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .site-footer__main { grid-template-columns: 1fr; }
}

/* migration components ------------------------------------------------ */
/* Added for pathforward.com: home/hub sections, contact form, testimonials. */

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--contact { grid-template-columns: 2fr 1fr; gap: 48px; }

.pillars .pillar, .feature { text-align: center; }
.feature { text-align: left; }
.pillar img, .feature img { width: 131px; height: 129px; }
.feature ul { padding-left: 1.2em; }
.feature li + li { margin-top: .5em; }

.stats { text-align: center; }
.stat__num {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--color-primary); line-height: 1.1;
}
.stat__label { display: block; color: var(--color-muted); margin-top: 4px; }

.section--accent { background: var(--color-primary); color: #fff; }
.section--accent h2, .section--accent h3, .section--accent h4 { color: #fff; }
.band__sub { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

.testimonial {
  margin: 0; padding: 20px 24px; border-left: 4px solid var(--color-accent-dark);
  background: #fff; color: var(--color-text);
}
.testimonial + .testimonial { margin-top: 24px; }
.testimonial cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--color-primary); }

.split img { border-radius: 4px; }
.card--story h3 { margin: 12px 0 0; }
.card__more { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--color-accent-dark); text-transform: uppercase; letter-spacing: .04em; }

/* contact form -------------------------------------------------------- */
.contact-form { margin-top: 24px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-primary); }
.field input, .field textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--color-text);
  background: #fff; border: 1px solid var(--color-border); border-radius: 4px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.cf-turnstile { margin: 16px 0; }
.form-status { margin: 12px 0; font-weight: 600; }
.form-status.is-ok { color: var(--color-accent-dark); }
.form-status.is-error { color: #b3261e; }
.disclaimer { margin-top: 24px; color: var(--color-muted); font-size: .9rem; }
.contact-info h3 { font-size: 1rem; margin-bottom: 0; }
.site-footer__address { font-style: normal; }

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--contact { grid-template-columns: 1fr; gap: 32px; }
  .field-row { grid-template-columns: 1fr; }
}

/* logos --------------------------------------------------------------- */
.site-header__logo {
  display: flex; align-items: center; line-height: 0;
  min-height: 44px;  /* the primary 'home' target must stay tappable */
}
.site-header__logo img { width: 220px; height: auto; }
.site-footer__logo { width: 220px; height: auto; margin-bottom: 16px; }
@media (max-width: 900px) { .site-header__logo img { width: 170px; } }
.testimonial-cite { margin: 12px 0 0; font-weight: 600; color: var(--color-primary); }
.testimonial-cite cite { font-style: normal; }

/* source layout signatures --------------------------------------------
   Divi details the first pass flattened: decorative shape backgrounds,
   the asymmetric 200px corner radius on feature photos, the green page
   titles on success-story children, and the photo-backed contact hero. */

/* Decorative shape backgrounds (background-size: contain, edge-anchored) */
.deco-left,
.deco-right { background-repeat: no-repeat; background-size: contain; }
.deco-left { background-image: url("/images/pathforward-background.webp"); background-position: left center; }
.deco-right { background-image: url("/images/pathforward-background2.webp"); background-position: right center; }

/* Success-story child pages: photo left, green uppercase title right */
.story-hero { padding: 0; background-repeat: no-repeat; background-size: contain;
  background-image: url("/images/pathforward-background.webp"); background-position: left center; }
.story-hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; padding: 48px 0;
}
.story-hero__media img {
  display: block; width: 100%; height: auto;
  border-radius: 200px 0 200px 0; box-shadow: 0 2px 18px rgba(0,0,0,.1);
}
.story-hero__title h1 {
  margin: 0; color: var(--color-accent); font-size: clamp(2rem, 5vw, 50px);
  font-weight: 600; text-transform: uppercase; line-height: 1.1;
}
/* "Client 1" / "Client 2" section headings inside a story body */
.story-body h2 { font-size: clamp(1.5rem, 3.4vw, 32px); color: var(--color-primary); }

/* Success-stories hub: content left, photo right (mirrored radius) */
.hub-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hub-intro__media img {
  display: block; width: 100%; height: auto;
  border-radius: 0 200px 0 200px; box-shadow: 0 2px 18px rgba(0,0,0,.1);
}
.hub-intro .stats { text-align: left; margin-top: 32px; }
.hub-intro .stat { border-left: 2px solid var(--color-border); padding-left: 16px; }

/* Contact hero: photo background, left-anchored, like the source */
.page-hero--photo {
  background-color: var(--color-primary);
  background-image: url("/images/contact-us-background-b.webp");
  background-size: cover; background-position: left center; background-repeat: no-repeat;
  padding: 60px 0 15vh;
}

@media (max-width: 900px) {
  .story-hero__grid,
  .hub-intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .story-hero { background-image: none; }
  .story-hero__media img { border-radius: 120px 0 120px 0; }
  .hub-intro__media img { border-radius: 0 120px 0 120px; }
  .deco-left, .deco-right { background-image: none; }
  .hub-intro .stats { text-align: center; }
  .hub-intro .stat { border-left: 0; padding-left: 0; }
}
.hub-intro h1 { color: var(--color-primary); font-size: clamp(2rem, 5vw, 50px); text-transform: uppercase; font-weight: 600; }
.hub-intro .stats { display: grid; grid-template-columns: 1fr; gap: 18px; }
.site-footer__credit a { color: inherit; text-decoration: underline; }
@media (max-width: 900px) { .site-footer__bottom { justify-content: center; text-align: center; } }

/* Home page type scale, measured off the source at 1280px --------------
   pillar/feature titles 28px, blog card titles 22px, stats 50px/28px in
   #0070d5, band sub-line 20px. */
:root { --color-stat: #0070d5; }
.pillar h3, .feature h3 { font-size: clamp(1.35rem, 2.3vw, 28px); color: var(--color-primary); font-weight: 700; text-transform: none; }
.feature h3 { font-weight: 600; }
.card h3 { font-size: clamp(1.15rem, 1.9vw, 22px); font-weight: 700; text-transform: none; }
.band__sub { font-size: clamp(1rem, 1.7vw, 20px); font-weight: 700; text-transform: none; letter-spacing: 0; }
.stat__num { color: var(--color-stat); font-size: clamp(2rem, 4vw, 50px); font-weight: 700; }
.stat__label { color: var(--color-stat); font-size: clamp(1.05rem, 2.3vw, 28px); font-weight: 500; margin-top: 0; }
/* In the two-column conundrum band the heading sits left, not centered. */
.split .section__title { text-align: left; }
@media (max-width: 900px) { .split .section__title { text-align: center; } }
.section__cta { margin-top: 40px; }
.article-meta__author { color: var(--color-accent-dark); font-weight: 600; }

/* about-us ------------------------------------------------------------ */
.process-diagram { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.team-member { text-align: center; }
.team-member img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; }
.team-member h3 { margin: 16px 0 4px; font-size: clamp(1.2rem, 2vw, 28px); }
.team-member__role { margin: 0 0 8px; color: var(--color-muted); }

/* Card featured images bleed to the card edge over its 24px padding.
   Two traps here, both hit during the migration:
   1. `max-width: none` is required — the global `img { max-width: 100% }`
      otherwise caps the element at the card's content box.
   2. Do NOT use padding to create the bleed. An <img> is a replaced element:
      it paints its picture in the CONTENT box, so padding leaves transparent
      gutters and the visible image renders 86% of the card, even though
      getBoundingClientRect() reports the full border-box width. Widen with
      calc() and pull back with negative margins instead. */
.card__img,
.card--story img {
  display: block;
  width: calc(100% + 48px); max-width: none;
  height: 190px; object-fit: cover;
  margin: -24px -24px 16px; border-radius: 5px 5px 0 0;
}