/*
 * sections.css — Per-section styles
 * ─────────────────────────────────────────────────────────────
 * Organized by section. Add new sections at the bottom.
 * Use tokens (var(--clr-*)) — never hard-code hex values here.
 */

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.section-hero {
  padding-top: var(--nav-height);
  background: transparent;
}

.hero-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px var(--sp-10) 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-aqua);
  margin-bottom: 20px;
}

.hero-h1 {
  font-size: 52px;
  font-weight: 900;
  color: var(--clr-cobalt);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.hero-sub {
  font-size: var(--text-md);
  color: var(--clr-steel);
  line-height: 1.7;
  margin-top: 24px;
  margin-bottom: 32px;
  max-width: 560px;
}

.hero-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 24px;
  margin-top: 48px;
  max-width: 480px;
}

.hero-stat-number {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--clr-aqua);
}

.hero-stat-label {
  font-size: 12px;
  color: var(--clr-steel);
  margin-top: 6px;
  line-height: 1.45;
  font-weight: 600;
}

/* ── Client logos band ─────────────────────────────── */
.client-logos-band {
  padding: 24px var(--sp-10);
  background: var(--clr-white);
}

.client-logos-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.client-logos-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-steel);
  text-align: center;
  margin: 0;
}

/* Marquee viewport — fades logos out at both edges */
.client-logos-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.client-logos-track {
  display: flex;
  width: max-content;
  animation: dhs-logo-scroll 42s linear infinite;
}

.client-logos-marquee:hover .client-logos-track,
.client-logos-marquee:focus-within .client-logos-track {
  animation-play-state: paused;
}

@keyframes dhs-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0 28px 0 0;
  flex-shrink: 0;
}

.client-logos li { flex-shrink: 0; display: flex; align-items: center; }

.client-logos img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) opacity(0.28);
}

/* No motion for users who ask for none — falls back to a static wrapped row */
@media (prefers-reduced-motion: reduce) {
  .client-logos-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .client-logos-track { animation: none; width: 100%; justify-content: center; }
  .client-logos { flex-wrap: wrap; justify-content: center; gap: 32px 40px; padding: 0; }
  .client-logos-track > .client-logos[aria-hidden="true"] { display: none; }
}

@media (max-width: 768px) {
  .client-logos { gap: 40px; }
  .client-logos img { height: 30px; max-width: 120px; }
  .client-logos-track { animation-duration: 30s; }
}

/* ══════════════════════════════════════════════════════════
   SERVICES
   ══════════════════════════════════════════════════════════ */
.section-services {
  background: var(--clr-white);
  padding: 80px var(--sp-10);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-card {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  padding: 24px 36px 32px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.service-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Service Line Growth card */
.service-card--slg {
  background: linear-gradient(135deg, #F5FAF1 0%, #EAF2E0 100%);
  border: 1px solid #CFE2C0;
}

/* Philanthropy card */
.service-card--phil {
  background: linear-gradient(135deg, #FEF9F3 0%, #FBF3E6 100%);
  border: 1px solid #F4DCC2;
}

.service-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.service-card--slg .service-card-header { border-bottom: 1px solid #CFE2C0; }
.service-card--phil .service-card-header { border-bottom: 1px solid #F4DCC2; }

.service-stat-number {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.service-card--slg .service-stat-number,
.service-card--slg .service-stat-label { color: #3CC173; }

.service-card--phil .service-stat-number,
.service-card--phil .service-stat-label { color: var(--clr-orange); }

.service-stat-label { font-size: 13px; font-weight: 500; margin-top: 6px; }

.service-card h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--clr-cobalt);
  margin-bottom: 14px;
  white-space: pre-line;
  max-width: 360px;
}

.service-card p {
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.service-card-cta {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--clr-ocean);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════
   WHY US
   ══════════════════════════════════════════════════════════ */
.section-why-us {
  padding: 80px var(--sp-10);
  background: transparent;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.why-us-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}

/* Green check badge at the top of each Why DHS card.
   Mirrors the red circle-and-X treatment on the philanthropy barriers cards. */
.why-us-check {
  width: 26px;
  height: 26px;
  background: var(--clr-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   RESULTS / STATS
   ══════════════════════════════════════════════════════════ */
.section-results {
  padding: 80px var(--sp-10);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* ══════════════════════════════════════════════════════════
   TESTIMONIAL
   ══════════════════════════════════════════════════════════ */
.section-testimonial {
  padding: 64px var(--sp-10);
  background: var(--clr-white);
}

.testimonial-inner {
  max-width: var(--max-width-text);
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.testimonial-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-quote {
  font-size: 20px;
  color: var(--clr-charcoal);
  font-weight: 600;
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 20px;
}

.testimonial-attribution {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-steel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Testimonial carousel ── */
.testimonial-carousel {
  position: relative;
}

.testimonial-track {
  position: relative;
}

.testimonial-slide {
  display: none;
}

.testimonial-slide.is-active {
  display: block;
  animation: testimonialFade 0.45s ease;
}

@keyframes testimonialFade {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.testimonial-controls {
  max-width: var(--max-width-text);
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.testimonial-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--clr-silver);
  background: var(--clr-white);
  color: var(--clr-cobalt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.testimonial-arrow:hover {
  background: var(--clr-cobalt);
  border-color: var(--clr-cobalt);
  color: #fff;
}

.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--clr-silver);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.testimonial-dot.is-active {
  background: var(--clr-cobalt);
  transform: scale(1.25);
}

/* ══════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════ */
.section-cta {
  padding: 80px var(--sp-10);
  background: var(--grad-cobalt);
  text-align: center;
}

.section-cta h2 { color: var(--clr-white); }
.section-cta p  { color: rgba(255,255,255,0.8); }

/* ══════════════════════════════════════════════════════════
   INSIGHTS / OUR WORK
   ══════════════════════════════════════════════════════════ */
.section-insights {
  padding: 80px var(--sp-10);
}

.insights-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

.insights-featured-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
}

.insights-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════
   RESOURCES / RESEARCH DOWNLOADS
   ══════════════════════════════════════════════════════════ */
.section-resources {
  padding: 64px var(--sp-10) 80px;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.resource-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.resource-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--clr-aqua);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--clr-cobalt);
  color: rgba(255,255,255,0.7);
  padding: 56px var(--sp-10) 36px;
}

/* 08/14 — spacing rebalanced.
   Brand column takes the leftover space and the two link columns size
   to their content, which pushes Services and Company over to the
   right-hand edge instead of floating in the middle. */
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 72px;
  row-gap: 40px;
  align-items: start;
}

.footer-logo img { height: 36px; margin-bottom: 20px; }

/* 08/14 — tagline given a shorter measure and a smaller size so it sits
   as a tidy block under the logo rather than a wide slab of text. */
.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 360px;
}

/* The two link columns need a predictable minimum so the labels don't
   wrap onto two lines at mid widths. */
.footer-nav-col { min-width: 148px; }

.footer-nav-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}

.footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-nav-list a,
.footer-nav-list button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-base); font-size: var(--text-base);
  color: rgba(255,255,255,0.7); text-decoration: none;
  padding: 0; text-align: left;
  transition: color 0.15s;
}

.footer-nav-list a:hover,
.footer-nav-list button:hover { color: var(--clr-white); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════════════════════════
   TEAM / ABOUT PAGE
   ══════════════════════════════════════════════════════════ */
.section-team {
  padding-top: var(--nav-height);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
  align-items: stretch; /* long job titles no longer make rows ragged */
}

.team-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: 18px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
  box-shadow: 0 1px 2px rgba(47,73,88,0.04);
}

.team-card:hover {
  box-shadow: 0 10px 28px rgba(47,73,88,0.10);
  border-color: #d8e7ee;
  transform: translateY(-2px);
}

/* ── 08/25 FIX: SQUARE HEADSHOTS ON iOS SAFARI ───────────────
   Supersedes the 08/24 attempt, which did not work. Read this
   before touching anything below.

   The circle is made by `border-radius: 50%` + `overflow: hidden`
   on this wrapper, clipping the square photo inside it. That works
   in desktop Chrome/Firefox/Safari. iOS Safari will not apply a
   rounded-corner clip to a child carrying its own `filter` — and
   `.team-card-photo` below has `filter: drop-shadow(...)` on it.

   08/24 tried to fix that by repeating `border-radius: 50%` on the
   image itself. That fails for the same reason: WebKit rasterises
   the filtered image first and paints the result without applying
   the element's own corner radius to it. So the photo still landed
   as a hard square.

   Why it looked fixed on some people and not others: it never was.
   Of the 31 headshots in use, 10 are fully opaque photos and the
   rest are transparent PNG cut-outs. The cut-outs have empty
   corners, so an unclipped square still READS as round. The opaque
   ones — Kyle Rose, Matthew Turkington, Thomas Kloster, Daniel
   Ahern, Kelly Faley, Frank Williams, Norman Payson, Cormac Miller,
   Raghu Bukkapatnam, Matthew Hobart — showed the square. That list
   is exactly the set of opaque files, which is what confirmed the
   cause.

   THE ACTUAL FIX: `clip-path: circle(50%)` on the image, below.
   Per the CSS spec, and in WebKit, clipping is applied AFTER the
   filter, so it clips the filtered output rather than being
   discarded by it. This is the one property in the stack that the
   filter cannot defeat.

   Desktop is unchanged. The wrapper's `overflow: hidden` was
   already clipping to exactly this circle, so the clip-path draws
   the same boundary that was there before — including clipping the
   drop-shadow at the circle's edge, which is what already happened.

   Do NOT remove the `filter` from `.team-card-photo` as a "simpler"
   fix. On the cut-out headshots that shadow traces the person's
   silhouette and IS visible inside the circle on desktop, so
   dropping it would change the desktop design.

   The `border-radius` and `-webkit-mask-image` from 08/24 are kept.
   Both are inert here — the mask gradient is opaque end to end and
   removes no pixels — but they are harmless, correct in browsers
   that do honour them, and removing them would add another variable
   to an issue that has already taken two passes.
   ───────────────────────────────────────────────────────────── */
.team-card-photo-wrap {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
  flex-shrink: 0;
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
          mask-image: radial-gradient(circle, #fff 100%, #000 100%);
}

.team-card-photo-wrap.investor {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
}

.team-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Self-clip to a circle — see the 08/25 note above. On desktop both
     of these are no-ops (the wrapper was already clipping to the same
     circle); on iOS Safari the clip-path is what actually makes the
     headshot round, because it is applied after the filter below.
     Keep clip-path and filter on the SAME element and in this order. */
  border-radius: 50%;
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.10)) drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.team-card-info { padding: 0; width: 100%; }

.team-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-cobalt);
  line-height: 1.3;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* What the person does for DHS (advisors only) */
.team-card-dhsrole {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-ocean);
  line-height: 1.4;
  margin-bottom: 5px;
}

/* Their outside job title. Titles here run long, so this wraps rather
   than clipping — cards stretch to a common height via the grid. */
.team-card-title {
  font-size: 13px;
  color: var(--clr-steel);
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Bio modal */
.bio-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47,73,88,0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bio-modal {
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  display: grid;
  grid-template-columns: 280px 1fr;
}

.bio-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(47,73,88,0.1);
  border: none; cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-charcoal);
  font-size: 18px;
  transition: background 0.15s;
}

.bio-modal-close:hover { background: rgba(47,73,88,0.2); }

/* ── Bio modal: photo column + carousel ──────────────────────
   Circle-cropped headshot pinned top-left in its own column;
   align-items:start leaves white space below it. */
.bio-modal-card {
  position: relative;
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(47,73,88,0.18);
  display: grid;
  grid-template-columns: 196px 1fr;
  align-items: start;
}

.bio-modal-photo-col {
  padding: 36px 0 36px 32px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Same iOS Safari clipping bug as the team cards — see the 08/25 note
   further up this file. The pop-up avatar uses the identical
   rounded-wrapper + filtered-image pattern, so it rendered square on
   iPhones too, once you tapped a card. Fixed the same way, with
   clip-path on the image. */
.bio-modal-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: var(--clr-cloud);
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
          mask-image: radial-gradient(circle, #fff 100%, #000 100%);
}

.bio-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 50%;
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.10)) drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.bio-modal-text-col {
  padding: 36px 32px 28px 24px;
  overflow-y: auto;
  max-height: 90vh;
  min-width: 0;
}

.bio-modal-carousel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--clr-silver);
}

.bio-modal-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--clr-silver);
  background: var(--clr-white);
  color: var(--clr-cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.bio-modal-arrow:hover {
  background: var(--clr-aqua);
  border-color: var(--clr-aqua);
  color: var(--clr-white);
}

.bio-modal-counter {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-steel);
  min-width: 46px;
  text-align: center;
}

/* Stack the photo above the bio on small screens */
@media (max-width: 700px) {
  .bio-modal-card {
    grid-template-columns: 1fr;
    max-height: 88vh;
    overflow-y: auto;
  }
  .bio-modal-photo-col { padding: 32px 24px 0; }
  .bio-modal-text-col  {
    padding: 20px 24px 26px;
    max-height: none;
    overflow: visible;
  }
}

/* ══════════════════════════════════════════════════════════
   CAREERS
   ══════════════════════════════════════════════════════════ */
.section-careers {
  padding-top: var(--nav-height);
  background: linear-gradient(180deg, #e6f4f8 0px, #ffffff 620px);
}

.jobs-list { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }

.job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 22px 26px;
  text-align: left;
  font-family: var(--font-base);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.job-row:hover {
  border-color: var(--clr-aqua);
  box-shadow: 0 8px 22px rgba(47,73,88,0.09);
  transform: translateY(-2px);
}

.job-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--clr-cobalt);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.job-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--clr-steel);
}

.job-meta-dept { font-weight: 700; color: var(--clr-ocean); }

/* ══════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════ */
.section-contact {
  padding-top: var(--nav-height);
  min-height: 100vh;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════
   OUR WORK / CASE STUDIES
   ══════════════════════════════════════════════════════════ */
.section-ourwork {
  padding-top: var(--nav-height);
}

.benchmarking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

/* ══════════════════════════════════════════════════════════
   SEARCH RESULTS
   ══════════════════════════════════════════════════════════ */
.section-search {
  padding-top: var(--nav-height);
  min-height: 80vh;
  background: transparent;
}

.search-result-item {
  padding: 20px 4px;
  border-bottom: 1px solid var(--clr-silver);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-base);
  transition: background 0.15s;
}

.search-result-item:hover {
  background: rgba(218,241,249,0.35);
}

/* ══════════════════════════════════════════════════════════
   WHITEPAPER / GATED CONTENT
   ══════════════════════════════════════════════════════════ */
.section-whitepaper {
  padding-top: var(--nav-height);
  background: transparent;
}

.whitepaper-cover {
  position: relative;
  max-width: 480px;
}

@media (max-width: 860px) {
  .whitepaper-cover { max-width: 380px; margin: 0 auto 28px; }
}

@media (max-width: 640px) {
  .whitepaper-cover { max-width: 280px; }
}

/* ══════════════════════════════════════════════════════════
   SUB-PAGE PROGRESS NAV (Service Line Growth / Philanthropy)
   ══════════════════════════════════════════════════════════ */
.slg-progress-nav {
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  background: var(--grad-cobalt);
  padding: 16px 40px 18px;
}

.slg-steps {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

@media (max-width: 760px) {
  .slg-progress-nav { padding: 12px 10px 14px; }
}

/* ══════════════════════════════════════════════════════════
   PROGRESS NAV — Service Line Growth + Philanthropy
   Matches the original Claude Code frosted-glass style.
   ══════════════════════════════════════════════════════════ */

.dhs-progress-nav {
  position: sticky;
  top: 104px;              /* below main nav by default          */
  z-index: 90;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid #E2EBF0;
  box-shadow: 0 6px 22px rgba(15,30,45,0.08);
  padding: 16px 28px 18px;
  margin: 32px 0 12px;
  font-family: var(--font-base);
  transition: top 0.32s ease;
}

/* When main nav has scrolled away, snap to near top */
.dhs-progress-nav.is-floating {
  top: 12px;
}

/* Group labels row */
.dhs-progress-nav__groups {
  display: flex;
  margin-bottom: 14px;
}

.dhs-progress-nav__group {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dhs-progress-nav__group + .dhs-progress-nav__group {
  border-left: 2px solid #C2D2DC;
}

/* Steps row */
.dhs-progress-nav__track {
  position: relative;
}

/* Background rail */
.dhs-progress-nav__rail {
  position: absolute;
  top: 15px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: #E2EBF0;
  border-radius: 2px;
}

/* Filled progress bar */
.dhs-progress-nav__fill {
  position: absolute;
  top: 15px;
  left: 10%;
  height: 3px;
  background: linear-gradient(90deg, #38C1E7 0%, #2E4083 100%);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}

.dhs-progress-nav__steps {
  display: flex;
  position: relative;
}

/* Individual step button */
.dhs-progress-nav__step {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-family: var(--font-base);
}

/* Numbered circle node */
.dhs-progress-nav__node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #8AA0AE;
  background: #fff;
  border: 2px solid #D7E2E9;
  box-shadow: none;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

/* Done state — filled aqua with checkmark */
.dhs-progress-nav__step.is-done .dhs-progress-nav__node {
  background: #38C1E7;
  border-color: #38C1E7;
  color: #fff;
}

/* Active state — filled aqua with glow ring */
.dhs-progress-nav__step.is-active .dhs-progress-nav__node {
  background: #38C1E7;
  border-color: #38C1E7;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(56,193,231,0.18);
}

/* Step label text */
.dhs-progress-nav__label {
  font-size: 12.5px;
  font-weight: 600;
  color: #5B7383;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s, font-weight 0.2s;
}

.dhs-progress-nav__step.is-active .dhs-progress-nav__label {
  font-weight: 800;
  color: #2E4083;
}

.dhs-progress-nav__step.is-done .dhs-progress-nav__label {
  color: #38C1E7;
}

/* Mobile adjustments */
@media (max-width: 760px) {
  .dhs-progress-nav {
    padding: 12px 10px 14px;
    margin: 20px 0 8px;
    border-radius: 10px;
  }
  .dhs-progress-nav__label { font-size: 10px !important; white-space: normal; text-align: center; }
  .dhs-progress-nav__node  { width: 26px !important; height: 26px !important; font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════
   ZOOMABLE IMAGE + LIGHTBOX  (added 08/12)
   Used by the donor journey infographic on the Philanthropy
   page. That graphic is 2300px wide and full of small text —
   inline on a phone it is unreadable, so it opens full-screen
   where it can be pinch-zoomed and panned.

   To make any other image zoomable, wrap it in:
     <button class="dhs-zoomable" data-dhs-lightbox="FULL_IMAGE_URL"
             data-dhs-lightbox-alt="Description">…</button>
   JS picks it up automatically (dhs_initLightbox in main.js).
   ══════════════════════════════════════════════════════════ */

.dhs-zoomable {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid var(--clr-silver);
  border-radius: 16px;
  overflow: hidden;
  background: var(--clr-white);
  cursor: zoom-in;
  font-family: var(--font-base);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.dhs-zoomable:hover  { box-shadow: var(--shadow-card); border-color: var(--clr-aqua); }
.dhs-zoomable:focus-visible { outline: 3px solid var(--clr-aqua); outline-offset: 3px; }

.dhs-zoomable img { display: block; width: 100%; height: auto; }

.dhs-zoomable__hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(46, 64, 131, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ── Overlay ───────────────────────────────────────────── */
.dhs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;               /* above the bio modal (500) */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 34, 45, 0.92);
}

.dhs-lightbox.is-open { display: flex; }

.dhs-lightbox__inner {
  max-width: 96vw;
  max-height: 92vh;
  overflow: auto;             /* pan a zoomed image */
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  background: #fff;
}

.dhs-lightbox__inner img {
  display: block;
  width: auto;
  max-width: none;            /* allow it to exceed the viewport so it can be panned */
  height: auto;
}

/* On wide screens fit the image to the window; on phones let it run at
   full size so the detail is legible and the user can scroll around. */
@media (min-width: 861px) {
  .dhs-lightbox__inner img { max-width: 96vw; max-height: 92vh; }
  .dhs-lightbox__inner     { overflow: visible; }
}

.dhs-lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--clr-cobalt);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dhs-lightbox__close:hover { background: #fff; }
.dhs-lightbox__close:focus-visible { outline: 3px solid var(--clr-aqua); outline-offset: 2px; }

.dhs-lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 0 24px;
  pointer-events: none;
}

@media (max-width: 640px) {
  .dhs-lightbox            { padding: 0; }
  .dhs-lightbox__inner     { max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .dhs-zoomable__hint      { right: 8px; bottom: 8px; font-size: 11px; padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════
   404 PAGE  (added 08/14)
   Image left, copy right, vertically centred. On phones the
   two columns stack with the image on top and everything
   centred, which is how the page looked before the split.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .notfound-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    justify-items: center;
    text-align: center;
  }
  .notfound-grid img { margin: 0 auto !important; }
  .notfound-copy > div { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   CAREERS — MISSION & VALUES  (added 08/14)
   ══════════════════════════════════════════════════════════ */
.careers-motto {
  margin: 26px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--clr-cobalt);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.value-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-top: 3px solid var(--clr-aqua);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.value-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.value-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--clr-cobalt);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.value-card-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--clr-steel);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   CAREERS — BENEFITS GRID  (added 08/14)
   Six perks, three across on desktop.
   ══════════════════════════════════════════════════════════ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.benefit-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.benefit-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  border-color: var(--clr-sky);
}

.benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--clr-sky);
  color: var(--clr-ocean);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.benefit-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--clr-cobalt);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.benefit-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--clr-steel);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   JOB DETAIL PAGE  (added 08/14 — single-dhs_job.php)
   ══════════════════════════════════════════════════════════ */
.job-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.job-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--clr-steel);
  margin-bottom: 12px;
}

.job-hero-dept {
  font-weight: 700;
  color: var(--clr-ocean);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.job-hero-title {
  font-size: 40px;
  font-weight: 900;
  color: var(--clr-cobalt);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 620px;
}

.job-hero-reports {
  font-size: 14.5px;
  color: var(--clr-steel);
  line-height: 1.6;
  margin: 14px 0 0;
}

.job-hero-reports strong { color: var(--clr-charcoal); font-weight: 700; }

.job-hero-cta { padding-top: 6px; }

/* ── The description body itself ───────────────────────────
   Styles whatever is typed into the job's editor in WP admin. */
.job-content { padding-top: 8px; }

.job-content h2 {
  font-size: 25px;
  font-weight: 800;
  color: var(--clr-cobalt);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--clr-silver);
}

.job-content > h2:first-child {
  margin-top: 24px;
  padding-top: 0;
  border-top: none;
}

.job-content h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--clr-ocean);
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
}

.job-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-charcoal);
  margin: 0 0 16px;
}

.job-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.job-content ul li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  color: var(--clr-steel);
  line-height: 1.65;
}

.job-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--clr-aqua);
}

.job-content strong { color: var(--clr-charcoal); font-weight: 700; }

.job-content a { color: var(--clr-ocean); font-weight: 600; }

/* ── Job callout boxes  (added 08/20) ───────────────────
 * The labelled boxes in a job description — "How success is
 * measured", "How this team is structured", "What this role is and
 * is not". Two columns: a tinted label cell on the left, the body
 * text on the right, matching the boxes in the source PDF.
 *
 * Markup, written into the job body itself:
 *
 *   <div class="job-callout">
 *     <div class="job-callout-label">How success is measured.</div>
 *     <div class="job-callout-body"><p>…</p></div>
 *   </div>
 *
 * A job with no callouts is completely unaffected by any of this.
 * ─────────────────────────────────────────────────────── */
.job-content .job-callout {
  display: grid;
  grid-template-columns: 190px 1fr;
  border: 1px solid var(--clr-cobalt);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 22px 0 26px;
}

.job-content .job-callout-label {
  background: var(--clr-cloud);
  border-right: 1px solid var(--clr-cobalt);
  padding: 18px 18px;
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-cobalt);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.job-content .job-callout-body {
  padding: 18px 20px;
}

.job-content .job-callout-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--clr-charcoal);
  margin: 0 0 12px;
}

.job-content .job-callout-body p:last-child { margin-bottom: 0; }

/* An h2 that follows a callout keeps its divider rule, but the box
   already provides plenty of separation — trim the gap a little. */
.job-content .job-callout + h2 { margin-top: 38px; }

/* ── Careers + job responsive ──────────────────────────── */
@media (max-width: 900px) {
  .values-grid,
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-content .job-callout { grid-template-columns: 150px 1fr; }
}

@media (max-width: 640px) {
  .values-grid,
  .benefits-grid { grid-template-columns: 1fr; }
  .job-hero-title { font-size: 30px; }
  .job-hero-cta   { padding-top: 0; }
  .careers-motto  { font-size: 17px; }

  /* Stack the callout on phones — a 150px label column next to a
     narrow body column makes the text unreadable. */
  .job-content .job-callout { grid-template-columns: 1fr; }
  .job-content .job-callout-label {
    border-right: none;
    border-bottom: 1px solid var(--clr-cobalt);
  }
}


/* ══════════════════════════════════════════════════════════
   EVENTS (added 09/15, v1.5.4)
   • .dhs-event-bar  — Homepage announcement bar, under the nav on
                       desktop and below the hero on mobile (v1.5.7)
   • .dhs-events     — Our Work "Upcoming events" section
   Class names deliberately avoid the substring "grid-" so the
   stacking wildcard in global.css (≤860px) can't catch them.
   ══════════════════════════════════════════════════════════ */

/* ── Homepage announcement bar ─────────────────────────── */
.dhs-event-bar {
  background: linear-gradient(90deg, #2E4083 0%, #2755A0 55%, #2B94CA 100%);
  color: var(--clr-white);
  padding: 14px var(--sp-10);
}

.dhs-event-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.dhs-event-bar__logo {
  display: block;
  height: 36px;
  width: auto;
  flex-shrink: 0;
  padding-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.dhs-event-bar__text { flex: 1 1 auto; min-width: 0; }

.dhs-event-bar__headline {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.35;
  color: var(--clr-white);
}

.dhs-event-bar__details {
  margin: 3px 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-sky);
}

.dhs-event-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--clr-white);
  color: var(--clr-cobalt);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.dhs-event-bar__btn:hover {
  background: var(--clr-aqua);
  color: var(--clr-white);
}

.dhs-event-bar__btn:focus-visible {
  outline: 2px solid var(--clr-white);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .dhs-event-bar { padding: 14px 20px; }
  .dhs-event-bar__inner { gap: 16px; }
  .dhs-event-bar__logo { height: 30px; padding-right: 16px; }
}

@media (max-width: 640px) {
  .dhs-event-bar { padding: 16px 20px 18px; }
  .dhs-event-bar__inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .dhs-event-bar__logo {
    height: 28px;
    padding-right: 0;
    border-right: none;
  }
  .dhs-event-bar__headline { font-size: 15px; }
  .dhs-event-bar__btn { margin-top: 4px; }
}

/* ── Our Work: upcoming events ─────────────────────────── */
.dhs-events {
  padding: 72px var(--sp-10) 16px;
}

.dhs-events__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.dhs-events__head {
  text-align: center;
  margin-bottom: 40px;
}

.dhs-events__heading {
  font-size: 38px;
  font-weight: 800;
  color: var(--clr-cobalt);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.dhs-events__sub {
  font-size: 15px;
  color: var(--clr-steel);
  line-height: 1.7;
  max-width: 540px;
  margin: 14px auto 0;
}

.dhs-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dhs-event-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 260px;
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(47, 73, 88, 0.08);
}

.dhs-event-card__panel {
  background: var(--grad-cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
}

.dhs-event-card__logo {
  display: block;
  width: 100%;
  max-width: 184px;
  height: auto;
}

.dhs-event-card__datebox {
  text-align: center;
  color: var(--clr-white);
  line-height: 1;
}

.dhs-event-card__month {
  display: block;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-sky);
  margin-bottom: 8px;
}

.dhs-event-card__day {
  display: block;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.dhs-event-card__body {
  padding: 32px 36px;
}

.dhs-event-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.dhs-event-card__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  background: var(--clr-sky);
  color: var(--clr-cobalt);
}

.dhs-event-card__tag--role { background: #EDF5EB; }

.dhs-event-card__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--clr-cobalt);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.dhs-event-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--clr-charcoal);
}

.dhs-event-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dhs-event-card__meta svg { color: var(--clr-aqua); flex-shrink: 0; }

.dhs-event-card__desc {
  font-size: 15px;
  color: var(--clr-steel);
  line-height: 1.7;
  max-width: 620px;
  margin: 14px 0 0;
}

.dhs-event-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 28px;
  border-left: 1px solid var(--clr-silver);
  background: #F7FBFD;
}

.dhs-event-card__action .btn { white-space: nowrap; }

.dhs-event-card__booth {
  margin: 0;
  text-align: center;
  line-height: 1;
}

.dhs-event-card__booth-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-steel);
  margin-bottom: 6px;
}

.dhs-event-card__booth-num {
  display: block;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--clr-cobalt);
  background: var(--grad-cobalt);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tablet: button + booth drop under the text, panel spans both rows */
@media (max-width: 1024px) {
  .dhs-event-card { grid-template-columns: 200px minmax(0, 1fr); }
  .dhs-event-card__panel { grid-row: 1 / span 2; }
  .dhs-event-card__action {
    grid-column: 2;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 36px 24px;
    border-left: none;
    border-top: 1px solid var(--clr-silver);
  }
  .dhs-event-card__booth { display: flex; align-items: baseline; gap: 10px; }
  .dhs-event-card__booth-label { margin-bottom: 0; }
  .dhs-event-card__booth-num { font-size: 40px; }
}

@media (max-width: 860px) {
  .dhs-events { padding: 56px 20px 8px; }
}

/* Phone: everything stacks */
@media (max-width: 640px) {
  .dhs-event-card { grid-template-columns: 1fr; }
  .dhs-event-card__panel { grid-row: auto; padding: 24px; }
  .dhs-event-card__logo { max-width: 160px; }
  .dhs-event-card__body { padding: 24px 22px 20px; }
  .dhs-event-card__action {
    grid-column: auto;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 22px 22px;
  }
  .dhs-event-card__booth-num { font-size: 34px; }
}


/* ══════════════════════════════════════════════════════════
   EVENTS — second "AHP details" button (added 09/15, v1.5.5)
   ══════════════════════════════════════════════════════════ */

/* Homepage announcement bar */
.dhs-event-bar__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.dhs-event-bar__btn--ghost {
  background: transparent;
  color: var(--clr-white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

.dhs-event-bar__btn--ghost:hover {
  background: var(--clr-white);
  color: var(--clr-cobalt);
}

@media (max-width: 640px) {
  .dhs-event-bar__btns { justify-content: center; margin-top: 4px; }
  .dhs-event-bar__btns .dhs-event-bar__btn { margin-top: 0; }
}

/* Our Work event card */
.dhs-event-card__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dhs-event-card__btns .btn { justify-content: center; }

.dhs-event-card__btns .btn:focus-visible {
  outline: 2px solid var(--clr-aqua);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .dhs-event-card__btns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .dhs-event-card__btns { justify-content: flex-start; }
}


/* ══════════════════════════════════════════════════════════
   AHP 2026 PAGE (added 09/15, v1.5.5) — page-ahp-2026.php
   All classes start with .ahp- and avoid the substring "grid-"
   so the ≤860px stacking wildcard in global.css can't catch them.
   ══════════════════════════════════════════════════════════ */

.ahp-page [id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

.ahp-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

.ahp-section { padding: 96px var(--sp-10) 0; }

.ahp-page p { margin: 0; }

/* ── Buttons ───────────────────────────────────────────── */
.ahp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ahp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.ahp-btn--light {
  background: var(--clr-white);
  color: var(--clr-cobalt);
}

.ahp-btn--light:hover {
  background: var(--clr-aqua);
  color: var(--clr-white);
}

.ahp-btn--ghost {
  background: transparent;
  color: var(--clr-white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

.ahp-btn--ghost:hover {
  background: var(--clr-white);
  color: var(--clr-cobalt);
}

.ahp-btn:focus-visible,
.ahp-textlink:focus-visible,
.ahp-ticket__sessions a:focus-visible {
  outline: 2px solid var(--clr-aqua);
  outline-offset: 3px;
}

/* ── Section heads ─────────────────────────────────────── */
.ahp-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.ahp-head__title {
  font-size: 38px;
  font-weight: 800;
  margin: 0;
}

.ahp-head__sub {
  font-size: var(--text-md);
  color: var(--clr-steel);
  line-height: 1.7;
  margin-top: 14px !important;
}

/* ── 1. Hero ───────────────────────────────────────────── */
.ahp-hero { padding: 40px var(--sp-10) 0; }

.ahp-hero__panel {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: center;
  padding: 64px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(56, 193, 231, 0.35) 0%, rgba(56, 193, 231, 0) 45%),
    linear-gradient(135deg, #2E4083 0%, #2755A0 60%, #2B94CA 100%);
  color: var(--clr-white);
  box-shadow: 0 24px 48px rgba(46, 64, 131, 0.18);
}

.ahp-hero__logo {
  display: block;
  height: 44px;
  width: auto;
  margin-bottom: 32px;
}

.ahp-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-aqua);
  margin-bottom: 14px !important;
}

.ahp-hero__title {
  font-size: 50px;
  font-weight: 900;
  line-height: 1.08;
  color: var(--clr-white);
  margin: 0 0 20px;
  max-width: 14em;
}

.ahp-hero__lede {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 540px;
  margin-bottom: 32px !important;
}

/* Booth card */
.ahp-ticket {
  background: var(--clr-white);
  color: var(--clr-charcoal);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-modal);
}

.ahp-ticket__booth { line-height: 1; }

.ahp-ticket__booth-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--clr-steel);
  margin-bottom: 4px;
}

.ahp-ticket__booth-num {
  display: block;
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--clr-cobalt);
  background: var(--grad-cobalt);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ahp-ticket__note {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--clr-steel);
  margin-top: 12px !important;
}

.ahp-ticket__facts {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 2px dashed var(--clr-silver);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ahp-ticket__facts dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-steel);
  margin-bottom: 2px;
}

.ahp-ticket__facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-cobalt);
  line-height: 1.4;
}

.ahp-ticket__sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ahp-ticket__sessions a {
  color: var(--clr-cobalt);
  text-decoration: underline;
  text-decoration-color: var(--clr-aqua);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ahp-ticket__sessions a:hover { color: var(--clr-ocean); }

.ahp-ticket__sessions span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-steel);
}

/* ── 2. Sessions ───────────────────────────────────────── */
.ahp-sessions__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ahp-session {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(47, 73, 88, 0.08);
  overflow: clip;
}

.ahp-session__when {
  background: #F7FBFD;
  border-right: 1px solid var(--clr-silver);
  padding: 40px 32px;
}

.ahp-session__when-inner {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.ahp-session__format {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--clr-cobalt);
  color: var(--clr-white);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
}

.ahp-session__date {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-steel);
  line-height: 1.3;
}

.ahp-session__time {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--clr-cobalt);
  line-height: 1.15;
  margin-top: 4px !important;
}

.ahp-session__room {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--clr-charcoal);
  margin-top: 10px !important;
}

.ahp-session__body { padding: 40px 48px 44px; }

.ahp-session__title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.ahp-session__desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--clr-steel);
  max-width: 70ch;
}

.ahp-session__desc + .ahp-session__desc { margin-top: 14px !important; }

.ahp-session__learn,
.ahp-session__speakers {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--clr-silver);
}

.ahp-session__learn-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-cobalt);
  letter-spacing: 0;
  margin: 0 0 14px;
}

.ahp-session__learn-format {
  font-size: 15px;
  color: var(--clr-charcoal);
  margin-bottom: 14px !important;
}

.ahp-session__learn-format strong { color: var(--clr-cobalt); }

/* Check-mark list (session outcomes, report contents) */
.ahp-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ahp-checks li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--clr-charcoal);
  max-width: 70ch;
}

.ahp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clr-sky);
}

.ahp-checks li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--clr-ocean);
  border-bottom: 2px solid var(--clr-ocean);
  transform: rotate(45deg);
}

/* Speakers */
.ahp-speakers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  max-width: 640px;
}

.ahp-speaker {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ahp-speaker__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--clr-cloud);
  box-shadow: 0 0 0 3px var(--clr-white), 0 0 0 4px var(--clr-silver);
}

.ahp-speaker__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-cobalt);
  color: var(--clr-white);
  font-size: 22px;
  font-weight: 800;
}

.ahp-speaker__text { min-width: 0; }

.ahp-speaker__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--clr-cobalt);
  line-height: 1.3;
}

.ahp-speaker__role {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--clr-charcoal);
  line-height: 1.4;
  margin-top: 2px !important;
}

.ahp-speaker__org {
  font-size: 13px;
  color: var(--clr-steel);
  line-height: 1.4;
}

/* ── 3. Philanthropy offering ──────────────────────────── */
.ahp-ph__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.ahp-ph__art img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}

.ahp-ph__title {
  font-size: 38px;
  font-weight: 800;
  margin: 0 0 18px;
}

.ahp-ph__lede {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--clr-charcoal);
}

.ahp-ph__body {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--clr-steel);
  margin-top: 14px !important;
}

.ahp-ph__points {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
}

.ahp-ph__points li {
  padding-left: 16px;
  border-left: 3px solid var(--clr-orange);
}

.ahp-ph__points strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-cobalt);
  line-height: 1.35;
  margin-bottom: 4px;
}

.ahp-ph__points span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--clr-steel);
}

.ahp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-ocean);
  text-decoration: none;
}

.ahp-textlink:hover { color: var(--clr-cobalt); }

.ahp-stats {
  list-style: none;
  margin: 64px 0 0;
  padding: 36px 0;
  border-top: 1px solid var(--clr-silver);
  border-bottom: 1px solid var(--clr-silver);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ahp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ahp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ahp-stats--1 { grid-template-columns: 1fr; }

.ahp-stats li { padding: 0 28px; }
.ahp-stats li:first-child { padding-left: 0; }
.ahp-stats li + li { border-left: 1px solid var(--clr-silver); }

.ahp-stats__num {
  display: block;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--clr-cobalt);
}

.ahp-stats__num::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--clr-orange);
  margin-bottom: 16px;
}

.ahp-stats__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--clr-steel);
  margin-top: 10px;
}

/* ── 4. Report + form ──────────────────────────────────── */
.ahp-report__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
  padding: 56px;
  border-radius: 28px;
  background: var(--clr-cloud);
}

.ahp-report__top {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
}

.ahp-cover {
  flex: none;
  width: 148px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--clr-aqua), var(--shadow-modal);
  background: linear-gradient(160deg, #2E4083 0%, #2755A0 65%, #2B94CA 100%);
}

.ahp-cover > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px;
}

.ahp-cover--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ahp-cover__logo {
  display: block;
  width: 64px;
  height: auto;
}

.ahp-cover__kicker {
  margin-top: auto;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-aqua);
}

.ahp-cover__title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.08;
  color: var(--clr-white);
  overflow-wrap: anywhere;
}

.ahp-cover__sub {
  margin-top: 6px;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--clr-sky);
}

.ahp-report__title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.ahp-report__intro {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--clr-steel);
  margin-bottom: 28px !important;
}

.ahp-form {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.ahp-form__title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 6px;
}

.ahp-form__sub {
  font-size: 15px;
  color: var(--clr-steel);
  margin-bottom: 20px !important;
}

.ahp-form__frame { min-height: 320px; }

.ahp-form__notice {
  font-size: 12px;
  line-height: 1.55;
  color: var(--clr-steel);
  margin-top: 16px !important;
}

.ahp-form__notice a {
  color: var(--clr-ocean);
  font-weight: 600;
  text-decoration: underline;
}

.ahp-form__empty {
  border: 1px dashed var(--clr-silver);
  border-radius: var(--radius-md);
  background: var(--clr-cloud);
  padding: 24px;
}

.ahp-form__empty p {
  font-size: 15px;
  color: var(--clr-charcoal);
  line-height: 1.65;
}

.ahp-form__empty .ahp-form__admin {
  font-size: 13px;
  color: var(--clr-steel);
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--clr-silver);
}

/* ── 5. Closing CTA ────────────────────────────────────── */
.ahp-cta { padding-bottom: 96px; }

.ahp-cta__panel {
  text-align: center;
  padding: 64px 40px;
  border-radius: 28px;
  background: linear-gradient(135deg, #2E4083 0%, #2755A0 60%, #2B94CA 100%);
}

.ahp-cta__title {
  font-size: 34px;
  font-weight: 800;
  color: var(--clr-white);
  margin: 0 auto 12px;
  max-width: 22em;
}

.ahp-cta__body {
  font-size: var(--text-md);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
  margin: 0 auto 28px !important;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ahp-hero__panel {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px;
  }
  .ahp-ticket {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 32px;
    align-items: center;
  }
  .ahp-ticket__note { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  .ahp-ticket__facts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 14px 40px; }

  .ahp-session { grid-template-columns: 230px minmax(0, 1fr); }
  .ahp-session__when { padding: 36px 24px; }
  .ahp-session__body { padding: 36px 36px 40px; }

  .ahp-ph__intro { gap: 40px; }
  .ahp-stats,
  .ahp-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .ahp-stats li:nth-child(odd) { padding-left: 0; border-left: none; }

  .ahp-report__panel { grid-template-columns: 1fr; gap: 40px; padding: 48px; }
  .ahp-form { position: static; }
}

@media (max-width: 860px) {
  .ahp-section { padding: 64px 20px 0; }
  .ahp-hero { padding: 20px 20px 0; }
  .ahp-hero__panel { padding: 36px 24px; border-radius: 22px; }
  .ahp-hero__logo { height: 36px; margin-bottom: 24px; }
  .ahp-hero__lede { font-size: 16px; }

  .ahp-head { margin-bottom: 32px; }

  .ahp-session { grid-template-columns: 1fr; }
  .ahp-session__when {
    border-right: none;
    border-bottom: 1px solid var(--clr-silver);
    padding: 24px;
  }
  .ahp-session__when-inner { position: static; }
  .ahp-session__format { margin-bottom: 12px; }
  .ahp-session__time { font-size: 24px; }
  .ahp-session__body { padding: 28px 24px 32px; }
  .ahp-session__title { font-size: 22px; }
  .ahp-speakers { grid-template-columns: 1fr; }

  .ahp-ph__intro { grid-template-columns: 1fr; gap: 28px; }
  .ahp-ph__art img { max-width: 340px; }
  .ahp-ph__title { font-size: 26px; }
  .ahp-ph__points { grid-template-columns: 1fr; }
  .ahp-stats { margin-top: 48px; }
  .ahp-stats__num { font-size: 34px; }

  .ahp-report__panel { padding: 32px 20px; border-radius: 22px; }
  .ahp-report__title { font-size: 22px; }
  .ahp-form { padding: 28px 22px; }

  .ahp-cta { padding-bottom: 64px; }
  .ahp-cta__panel { padding: 44px 24px; border-radius: 22px; }
  .ahp-cta__title { font-size: 26px; }
}

@media (max-width: 640px) {
  .ahp-btns { flex-direction: column; }
  .ahp-btn { width: 100%; }

  .ahp-ticket { display: block; padding: 26px 24px; }
  .ahp-ticket__note { margin-top: 10px !important; }
  .ahp-ticket__booth-num { font-size: 76px; }
  .ahp-ticket__facts { flex-direction: column; }

  .ahp-stats,
  .ahp-stats--3,
  .ahp-stats--2 { grid-template-columns: 1fr; }
  .ahp-stats li { padding: 0 !important; border-left: none !important; }
  .ahp-stats li + li { padding-top: 24px !important; border-top: 1px solid var(--clr-silver); }

  .ahp-report__top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ahp-cover { width: 132px; }
}

/* ══════════════════════════════════════════════════════════
   EVENTS — homepage announcement bar placement (v1.5.7)
   The bar is printed twice in page-home.php; only one shows.
   • .dhs-event-bar--top        — under the nav, above the hero
                                  (larger than 860px). Scrolls away
                                  with the page; the nav is unchanged.
   • .dhs-event-bar--below-hero — between the hero and the client
                                  logos (860px and below), same spot
                                  as v1.5.6.
   ══════════════════════════════════════════════════════════ */
.dhs-event-bar--top {
  margin-top: var(--nav-height); /* clears the fixed nav */
}

/* The bar already clears the nav, so the hero doesn't need to. */
.dhs-event-bar--top + .section-hero {
  padding-top: 0;
}

.dhs-event-bar--below-hero {
  display: none;
}

@media (max-width: 860px) {
  .dhs-event-bar--top { display: none; }
  .dhs-event-bar--top + .section-hero { padding-top: var(--nav-height); }
  .dhs-event-bar--below-hero { display: block; }
}