/* ==============================================
   COMPONENTS  self-contained UI blocks
   ============================================== */

/*  Eyebrow label (shared across all page sections) 
   Used by: .page-eyebrow, .solutions-eyebrow, .news-eyebrow,
            .sol-eyebrow, .site-footer__col-title (partially)
    */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-darker); /* was --color-blue; green failed WCAG AA on white/light-gray */
  margin-bottom: 12px;
}

/*  Accent rule (short colored underline used everywhere)  */
.accent-rule {
  width: 48px;
  height: 3px;
  background: var(--color-green);
}
.accent-rule--sm {
  width: 28px;
  height: 2.5px;
  background: var(--color-blue);
}

/*  Buttons  */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-primary {
  background: var(--color-green);
  color: #000;
  border-color: var(--color-green);
}
.btn-primary:hover {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  color: #000;
  text-decoration: none;
}
.btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-blue-dark);
  text-decoration: none;
}
.btn-secondary {
  background: transparent;
  color: var(--color-blue-darker);
  border-color: var(--color-blue-darker);
}
.btn-secondary:hover {
  background: var(--color-blue-darker);
  color: var(--color-white);
  text-decoration: none;
}
/* Inline text links used in cards */
.card-link,
.btn-text-arrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  text-decoration: none;
}
.card-link { margin-top: var(--space-2); }
.btn-text-arrow { white-space: nowrap; align-self: flex-end; }
.card-link:hover,
.btn-text-arrow:hover { color: var(--color-blue-dark); }

/*  Interior page header (global — all page.php instances)  */
.page-header {
  background: var(--color-blue-dark);
  padding: 32px 0 40px;
  color: var(--color-white); /* catch-all: prevents body text color bleeding onto dark bg */
}
.page-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: var(--lh-tight);
}
.page-intro {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-body);
  max-width: 600px;
  margin-bottom: 20px;
}

.page-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 10px;
}
.page-accent-line {
  width: 48px;
  height: 3px;
  background: var(--color-green);
  margin-top: 24px;
  border-radius: 2px;
}
.page-body { padding: var(--space-5) 0; line-height: var(--lh-loose); font-size: var(--text-md); }
.page-body p,
.article-content p {
  margin-bottom: var(--space-4);
}
.page-body h2,
.page-body h3,
.page-body h4,
.page-body h5,
.page-body h6,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}

/*  Lists in prose
    The reset zeroes padding on every element, which strips the browser
    default indent from ul and ol. Markers then sit flush against the text
    column and a list stops reading as a list. .cs-prose restores it for case
    studies; these are the same rule for posts, pages and block content.
    padding-left rather than margin-left so the marker stays inside the
    content box and does not collide with anything to the left of it.        */
.page-body ul,
.page-body ol,
.article-content ul,
.article-content ol,
.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
}

.page-body li,
.article-content li,
.entry-content li {
  margin-bottom: var(--space-1);
}

.page-body li:last-child,
.article-content li:last-child,
.entry-content li:last-child {
  margin-bottom: 0;
}

/*  Nested lists sit closer, and do not repeat the outer list's bottom gap.  */
.page-body li > ul,
.page-body li > ol,
.article-content li > ul,
.article-content li > ol,
.entry-content li > ul,
.entry-content li > ol {
  margin: var(--space-1) 0 0;
}

/*  Hero (homepage)  */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 700px;
  display: flex;
  align-items: center;
  padding: var(--space-7) 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,67,87,0.92) 0%,
    rgba(0,96,128,0.85) 50%,
    rgba(0,118,152,0.6) 100%
  );
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero__inner { max-width: 700px; }
.hero__title { color: var(--color-white); margin-bottom: var(--space-3); line-height: var(--lh-tight); }
.hero__title strong { font-size: 4.5rem; display: block; line-height: 1; }
.hero__title span {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 2.5rem;
  display: block;
  margin-top: var(--space-1);
}
.hero__accent { width: 48px; height: 4px; background: var(--color-green); margin: var(--space-3) 0; }
.hero__tagline {
  color: var(--white-88);
  font-size: var(--text-lg);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  max-width: 560px;
}

.hero__buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/*  Homepage solutions preview  */
.solutions-header { text-align: center; margin-bottom: var(--space-5); }
.solutions-title {
  font-size: var(--text-3xl);
  color: var(--color-blue-darker);
  margin-bottom: var(--space-2);
  line-height: var(--lh-snug);
}
.solutions-title--accent { color: var(--color-blue-darker); } /* was green; failed WCAG AA on white */
.solutions-intro { color: var(--color-gray-web); max-width: 520px; margin: 0 auto; font-size: var(--text-base); }
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.solution-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}
.solution-card__icon { margin-bottom: var(--space-2); }
/* Ensure uploaded SVG/IMG icons scale consistently */
.solution-card__icon img,
.solution-card__icon svg {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}
.solution-card h3 { font-size: 1.1rem; color: var(--color-blue-darker); margin-bottom: var(--space-1); }
.solution-card p { font-size: 14px; color: var(--color-gray-web); line-height: var(--lh-base); flex: 1; }

/*  Homepage news feature  */
.news-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); }

.news-title { font-size: var(--text-2xl); color: var(--color-blue-darker); }
.news-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.news-featured__content { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; }
.news-featured__title { font-size: var(--text-xl); color: var(--color-blue-darker); margin-bottom: var(--space-2); }
.news-featured__title a { color: var(--color-blue-darker); }
.news-featured__title a:hover { color: var(--color-blue-dark); text-decoration: underline; }
.news-featured__image {
  overflow: hidden;
  /* Fixed box: whatever image the post has gets cropped to this shape.
     Container drives dimensions; image adapts, not the other way around. */
  aspect-ratio: 3 / 2;
  width: 100%;
  align-self: stretch;
}
.news-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobile: stack image above content. The CSS `order` puts the image first
   visually while HTML source order (content first, image second) stays
   intact for screen readers — sighted users see the image lead, assistive
   tech reads the article headline and excerpt before the image. */
@media (max-width: 768px) {
  .news-featured {
    grid-template-columns: 1fr;
  }
  .news-featured__image {
    order: -1;
  }
}

/*  Homepage CTA band  */
.cta-section { background: linear-gradient(135deg, #004357 0%, #006080 60%, #007698 100%); }
.cta-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) 0;
}

.cta-band__left { display: flex; align-items: flex-start; gap: var(--space-3); }
.cta-band__icon { flex-shrink: 0; margin-top: 4px; }
.cta-band__accent { width: 36px; height: 3px; background: var(--color-green); margin-bottom: var(--space-2); }
.cta-band__title { font-size: var(--text-2xl); color: var(--color-white); line-height: var(--lh-snug); }
.cta-band__right { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-band__text { color: var(--white-85); font-size: var(--text-md); line-height: var(--lh-base); }

/*  Solutions page (full)  */
.sol-grid-section { background: var(--color-light-gray); padding: 40px 0 56px; }
.sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sol-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
}
.sol-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.sol-card-icon { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }
.sol-card-icon img { width: 60px; height: 60px; object-fit: contain; }
.sol-card-num { font-size: var(--text-2xl); font-weight: 900; color: var(--color-blue-darker); opacity: .12; line-height: 1; }
.sol-card-title { font-size: 1.05rem; font-weight: 700; color: var(--color-blue-darker); margin-bottom: 10px; line-height: 1.25; }
.sol-card-rule { width: 28px; height: 2.5px; background: var(--color-blue); margin-bottom: 12px; }
.sol-card-desc { font-size: 14px; color: var(--color-gray-web); line-height: var(--lh-body); flex: 1; }
/* Solution card footers removed: the cards no longer carry a
   Learn more link or arrow button. Rules retired v5.7. */

/* Solutions CTA band */
.sol-cta-band { background: var(--color-blue-darker); padding: 40px 0; }
.sol-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sol-cta-left { display: flex; align-items: center; gap: 16px; }
.sol-cta-person {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sol-cta-rule { width: 28px; height: 2.5px; background: var(--color-green); margin-bottom: 8px; }
.sol-cta-heading { font-size: 1.75rem; font-weight: 700; color: var(--color-white); font-family: var(--font-heading); line-height: var(--lh-snug); }
.sol-cta-right { display: flex; flex-direction: column; }
.sol-cta-desc { font-size: 15px; color: var(--white-80); line-height: var(--lh-body); margin-bottom: 20px; }
.sol-cta-btn {
  display: inline-block;
  background: var(--color-green);
  color: #000;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.sol-cta-btn:hover { background: var(--color-green-dark); text-decoration: none; color: #000; }

/*  Single post  */
.post-header { padding: var(--space-6) 0 var(--space-3); }
/* post-meta and news-card__date share identical treatment */
.post-meta,
.news-card__date { font-size: var(--text-sm); color: var(--color-gray-web); margin-bottom: var(--space-1); }
.post-title { color: var(--color-blue-darker); font-size: var(--text-2xl); }

/* Override post title and meta colors on dark page-header background */
.page-header .post-title { color: #ffffff; }
.page-header .post-meta { color: rgba(255,255,255,0.80); }

.post-thumbnail { margin-bottom: var(--space-4); border-radius: var(--radius-md); overflow: hidden; }
.post-thumbnail img { width: 100%; }
.post-body { padding: var(--space-3) 0; line-height: var(--lh-loose); font-size: var(--text-md); }
.post-footer { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-4); }

/*  Archive / news listing  */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}

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

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

.news-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); }
.news-card__image img { width: 100%; height: 220px; object-fit: cover; }
.news-card__body { padding: var(--space-4); }
.news-card__title { font-size: 1.2rem; margin-bottom: var(--space-1); }
.news-card__title a { color: var(--color-blue-darker); }
.news-card__excerpt { font-size: 15px; color: var(--color-gray-web); margin-bottom: var(--space-2); }
.pagination { margin-top: var(--space-5); text-align: center; }

.explore-filters {
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.explore-filter-form {
  display: grid;
  gap: var(--space-4);
}
.explore-results {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  background: var(--color-light-gray);
}
.filter-search input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.filter-year,
.filter-group {
  display: grid;
  gap: 10px;
}
.filter-year label,
.filter-group label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-blue-darker);
}
.filter-year select,
.filter-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.95rem;
}
.filter-toggle {
  background: var(--color-gray-light);
  color: var(--color-blue-darker);
  border: 2px solid var(--color-gray-light);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 150ms ease, border-color 150ms ease;
}
.filter-toggle:hover {
  background: var(--color-gray);
  border-color: var(--color-gray);
}
.filter-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

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

/*  Contact page  */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-6); align-items: start; }
.contact-form h2 { font-size: 1.75rem; color: var(--color-blue-darker); margin-bottom: var(--space-4); }
.karna-form { display: flex; flex-direction: column; gap: var(--space-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: var(--text-sm); font-weight: 700; color: var(--color-blue-darker); letter-spacing: 0.03em; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: #2C2C2A;
  background: var(--color-white);
  transition: border-color 150ms ease;
}
/* The outline was removed here and replaced only by a border-colour change.
   That is a weak focus indicator (WCAG 2.4.7) and it is a colour-only cue,
   so users with colour vision deficiency may perceive no change at all
   (WCAG 1.4.1). The outline is restored and the border change kept as a
   secondary signal. (Audit KARNA-A11Y-008.) */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--color-blue-dark);
  outline-offset: 2px;
  border-color: var(--color-blue-dark);
}
.form-group textarea { resize: vertical; }
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-light-gray);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-green);
}
.contact-info__block h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-1);
}
.contact-info__block p { font-size: 15px; color: var(--color-gray-web); line-height: 1.7; }
.contact-info__block a { color: var(--color-gray-web); }
.contact-info__block a:hover { color: var(--color-blue); }
.contact-info__social { display: flex; flex-direction: column; gap: 8px; }
.social-link { font-size: 14px; color: var(--color-blue); font-weight: 600; }
.social-link:hover { color: var(--color-blue-dark); }

/*  404  */
.error-404 { text-align: center; padding: 120px 0; }
.error-404__title { color: var(--color-blue-darker); margin-bottom: var(--space-2); font-size: 3rem; }
.error-404__message { color: var(--color-gray-web); margin-bottom: var(--space-4); font-size: 18px; }
.page-header .article-breadcrumb { margin-bottom: 12px; }
.page-header .article-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
}
.page-header .article-breadcrumb li {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.88); /* current page text — was inheriting #2C2C2A (1.29:1), now 8.71:1 */
}
.page-header .article-breadcrumb li span[aria-hidden="true"] {
  margin: 0 0.25rem;
  color: rgba(255,255,255,0.60); /* separator — was #62564B (1.52:1), now 4.91:1 */
}
.page-header .article-breadcrumb a {
  color: rgba(255,255,255,0.88); /* was --color-blue (2.08:1), now 8.71:1 */
  text-decoration: none;
}
.page-header .article-breadcrumb a:hover { color: #ffffff; text-decoration: underline; }
/* article-meta: date · author · read time — was inheriting body #2C2C2A (1.29:1 on dark bg) */
.page-header .article-meta {
  margin-top: 12px;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.80); /* 7.49:1 on #004357 — passes WCAG AA */
  font-size: 0.9rem;
}

/* Ensure breadcrumb / eyebrow / meta in page-header have strong contrast on dark hero backgrounds */
.page-header .article-breadcrumb,
.page-header .article-meta,
.page-header .page-eyebrow {
  color: rgba(255,255,255,0.92);
}
.page-header .article-breadcrumb a {
  color: rgba(255,255,255,0.92);
}

/* Hero alignment with the body column
   The hero sits in a plain .container--content, so it is centred on the page
   at the reading measure. The article below it is centred as a body+sidebar
   pair, which puts its left edge further left. Two blocks of near-identical
   width, offset by about 165px, read as a mistake.

   When the post has a sidebar, widen the hero's container to match the
   article's and pin the image to the left of it, so the image and the first
   line of text share an edge. Posts with no sidebar are already aligned:
   both blocks are the measure, both centred on the page.

   :has() is on the shared ancestor because the hero is a sibling of the
   article, not a descendant of it. */
.site-main:has(.article-taxonomy) .article-hero-image .container--content {
  max-width: calc(var(--max-width-content) + var(--space-5) + 280px);
}
.site-main:has(.article-taxonomy) .article-hero-image .article-hero-image__img,
.site-main:has(.article-taxonomy) .article-hero-image__full {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 1199px) {
  .site-main:has(.article-taxonomy) .article-hero-image .container--content {
    max-width: var(--max-width-content);
  }
  .site-main:has(.article-taxonomy) .article-hero-image .article-hero-image__img,
  .site-main:has(.article-taxonomy) .article-hero-image__full {
    margin-left: auto;
  }
}

/* Featured (hero) image: cropped to a consistent banner ratio regardless of
   uploaded source aspect. Portrait uploads get center-cropped so they don't
   dominate the viewport and push body copy below the fold. */
.article-hero-image .article-hero-image__img {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 18px auto 28px;
  border-radius: var(--radius-sm);
}

/* "View full image" link under the hero.

   The hero is a fixed 21:9 crop, so portrait photographs lose their top and
   bottom. This link offers the uncropped original. Sits right-aligned under
   the image, matched to the image's own max-width so the two edges line up. */
.article-hero-image__full {
  max-width: 760px;
  margin: -18px auto 28px;
  text-align: right;
  font-size: var(--text-xs);
}
.article-hero-image__full a {
  color: var(--color-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-hero-image__full a:hover,
.article-hero-image__full a:focus-visible {
  color: var(--color-blue-darker);
}
.article-hero-image__full a:focus-visible {
  outline: 2px solid var(--color-blue-dark);
  outline-offset: 2px;
}
.article-hero-image__ext {
  margin-left: 2px;
}

@media (max-width: 768px) {
  .article-hero-image__full { margin: -12px auto 20px; }
}

/* Per-post hero crop anchor, set via the "Hero Image Crop" meta box.
   Default (no class) is center. */
.article-hero-image .article-hero-image__img.hero-pos-top    { object-position: center top; }
.article-hero-image .article-hero-image__img.hero-pos-bottom { object-position: center bottom; }

@media (max-width: 768px) {
  .article-hero-image .article-hero-image__img {
    /* Slightly taller crop on phones — the viewport can afford it */
    aspect-ratio: 16 / 9;
    margin: 12px auto 20px;
  }
}

/* Limit large images inserted into article content so they don't overflow */
.article-content img {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* WordPress classic-editor image alignment (posts and pages).
   These must override the full-width .article-content img rule above,
   so the width is reset. .container--content covers page.php content. */
.article-content img.alignleft,
.article-content .alignleft,
.container--content img.alignleft,
.container--content .alignleft {
  float: left;
  width: auto;
  max-width: 50%;
  margin: 6px 24px 12px 0;
}

.article-content img.alignright,
.article-content .alignright,
.container--content img.alignright,
.container--content .alignright {
  float: right;
  width: auto;
  max-width: 50%;
  margin: 6px 0 12px 24px;
}

.article-content img.aligncenter,
.article-content .aligncenter,
.container--content img.aligncenter,
.container--content .aligncenter {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* Floated images on phones look cramped — stack them instead. */
@media (max-width: 600px) {
  .article-content img.alignleft,
  .article-content img.alignright,
  .container--content img.alignleft,
  .container--content img.alignright {
    float: none;
    max-width: 100%;
    margin: 12px auto;
  }
}

/* Keep floats from spilling past the content body. */
.article-content::after,
.container--content::after {
  content: "";
  display: table;
  clear: both;
}

.page-header .article-tags { margin-bottom: 20px; }

/* Article page-header on mobile: hide breadcrumbs (redundant on a phone —
   users came from a link, not a directory), and tighten the vertical padding
   so the title, meta, and image all fit closer to the fold. */
@media (max-width: 768px) {
  .single .page-header {
    padding: 32px 0 28px;
  }
  .single .page-header .article-breadcrumb {
    display: none;
  }
  .single .page-header .article-meta {
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 0.8rem;
  }
  .single .page-header .page-accent-line {
    margin-top: 16px;
  }
}

/* Hide the eyebrow globally — labels like "PAGE", "KARNA LLC", or the
   redundant "OUR SOLUTIONS" over a "Uniquely Built for You" title are more
   noise than signal, and the accent line already provides visual anchor. */
.page-header .page-eyebrow {
  display: none;
}
/*  Article layout: body + sidebar
    The measure is held constant by capping the CONTAINER, not by sizing the
    column. The column stays 1fr, which fills whatever it is given, so the
    layout degrades correctly at every viewport width without a breakpoint
    having to catch it.

    Sizing the column instead (minmax(0, 800px) with justify-content:center)
    looked right on a desktop and collapsed on a phone: a track with a length
    maximum does not stretch when justify-content is anything but stretch, so
    it sized to content and the body text rendered about half the width of
    the screen.

    Without the sidebar the container is the measure. With it, the container
    is the measure plus the gap plus the sidebar, so the body column works
    out to the same 800px either way. Tagging a post no longer reflows it.

    :has() still does the useful half of the original rule — no empty 280px
    column is reserved for a post with no Capabilities or Audiences.         */
.article-body .container--content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  max-width: var(--max-width-content);
}
.article-body .container--content:has(.article-taxonomy) {
  grid-template-columns: minmax(0, 1fr) 280px;
  max-width: calc(var(--max-width-content) + var(--space-5) + 280px);
}
.article-content { grid-column: 1; }

/* Taxonomy sidebar box */
.article-taxonomy {
  grid-column: 2;
  grid-row: 1 / 4;
  position: sticky;
  top: 100px;
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: 0;
  border-top: none;
}
.article-taxonomy__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-blue-darker);
  margin-bottom: var(--space-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.article-taxonomy__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.article-taxonomy__group:last-child { margin-bottom: 0; }
.article-taxonomy__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  min-width: auto;
  padding-top: 0;
  display: block;
  margin-bottom: 6px;
}
.article-taxonomy__terms { display: flex; flex-wrap: wrap; gap: 6px; }

/* Article footer  full width below content */
.article-footer {
  grid-column: 1;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.article-footer__back {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-footer__back:hover { color: var(--color-blue-dark); text-decoration: underline; }

.article-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.article-footer__prev,
.article-footer__next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.article-footer__next { text-align: right; }
.article-footer__prev:hover,
.article-footer__next:hover {
  border-color: var(--color-blue);
  background: var(--color-white);
  text-decoration: none;
}
.article-footer__nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gray-web);
}
.article-footer__nav-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-blue-darker);
  line-height: 1.4;
}

/* Responsive  stack when both columns no longer fit
   Two columns need 800 + 48 gap + 280 sidebar + 64 container padding, so
   1192px is the floor. Below that the sidebar squeezes the body below the
   measure, so stack instead and let the body have the full container.

   The :has() rule above is (0,3,0) and a media query adds no specificity, so
   the old selector here at (0,2,0) never beat it and the 280px column
   survived to 900px regardless. Repeating :has() matches it and lets source
   order decide, which is what was intended. */
@media (max-width: 1199px) {
  .article-body .container--content,
  .article-body .container--content:has(.article-taxonomy) {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--max-width-content);
  }
  .article-taxonomy {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .article-footer { grid-column: 1; }
}

@media (max-width: 900px) {
  .article-footer__nav { grid-template-columns: 1fr; }
  .article-footer__next { text-align: left; }
}
/*  WordPress block styles inside article content  */
.article-content .wp-block-gallery {
  margin: var(--space-4) 0;
}
.article-content .wp-block-image {
  margin: var(--space-4) 0;
}
.article-content .wp-block-image.alignfull,
.article-content .wp-block-image.alignwide {
  max-width: 100%;
  width: 100%;
}
.article-content .wp-block-media-text {
  margin: var(--space-4) 0;
  gap: var(--space-4);
}
.article-content figure figcaption {
  font-size: var(--text-xs);
  color: var(--color-gray-web);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}
/* 
   HUB PAGE  Section Hub Template
    */

.hub-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 720px;
}

/* Hub grid  3 columns desktop, 2 tablet, 1 mobile */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Hub card */
.hub-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.hub-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.hub-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-light-gray);
}
.hub-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.hub-card:hover .hub-card__image img { transform: scale(1.03); }

.hub-card__body {
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hub-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 8px;
}

.hub-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-blue-darker);
  line-height: 1.3;
  margin-bottom: 10px;
}
.hub-card__title a {
  color: inherit;
  text-decoration: none;
}
.hub-card__title a:hover { color: var(--color-blue); }

.hub-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-gray-web);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-2);
}

.hub-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: none;
  margin-top: auto;
}
.hub-card__link:hover {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card:hover { transform: none; }
}
/* =============================================================
   ACHIEVEMENTS - Concept B timeline
   Styles now also live inline in front-page.php as a fallback.
   These rules are kept here for correctness but front-page.php
   inline styles will win due to source order.
   ============================================================= */

.achievements-section {
  padding: 64px 0;
  background: #ffffff;
  border-top: 1px solid #e4eaed;
}

.ach-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.ach-header-left { flex-shrink: 0; }

.ach-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #007698;
  margin: 0 0 10px;
}

.ach-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: #004357;
  line-height: 1.2;
  margin: 0;
}

.ach-title span { color: #007698; }

.ach-intro {
  font-size: 14px;
  color: #62564B;
  line-height: 1.7;
  max-width: 280px;
  text-align: right;
  padding-top: 4px;
  margin: 0;
}

.ach-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ach-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #007698;
  z-index: 0;
}

.ach-row {
  display: grid;
  grid-template-columns: 24px 80px 1fr;
  column-gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid #e4eaed;
  position: relative;
}

.ach-row:first-child { padding-top: 0; }
.ach-row:last-child  { border-bottom: none; padding-bottom: 0; }

.ach-dot-wrap {
  display: flex;
  justify-content: center;
  padding-top: 3px;
  position: relative;
  z-index: 1;
}

.ach-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ABC230;
  flex-shrink: 0;
}

.ach-dot--filled { background: #ABC230; }

.ach-year {
  font-size: 13px;
  font-weight: 700;
  color: #007698;
  text-align: right;
  white-space: nowrap;
  margin: 0;
  padding-top: 1px;
}

.ach-year--award {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3b6d11;
}

.ach-body { padding-top: 0; }

.ach-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #27500a;
  background: #d9e2b4;
  border: 1px solid #ABC230;
  border-radius: 3px;
  padding: 2px 7px;
  margin-top: 6px;
}

.ach-name {
  font-size: 15px;
  font-weight: 700;
  color: #004357;
  line-height: 1.3;
  margin: 0 0 4px;
}

.ach-desc {
  font-size: 13px;
  color: #62564B;
  line-height: 1.65;
  margin: 0;
}

.ach-award-row .ach-body {
  border-left: 2px solid #ABC230;
  padding-left: 12px;
  margin-left: -12px;
}

.ach-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ach-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #007698;
  text-decoration: none;
}

.ach-link:hover { color: #004357; text-decoration: underline; }

.ach-link:focus-visible {
  outline: 2px solid #ABC230;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 680px) {
  .ach-header { flex-direction: column; }
  .ach-intro  { text-align: left; max-width: 100%; }
}

@media (max-width: 540px) {
  .ach-row { grid-template-columns: 20px 56px 1fr; column-gap: 12px; }
  .ach-timeline::before { left: 9px; }
  .ach-title { font-size: 1.6rem; }
}

/* =============================================================
   CONTACT PAGE - 3 card layout
   ============================================================= */

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

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

@media (max-width: 560px) {
  .contact-cards { grid-template-columns: 1fr; }
}

.contact-card {
  background: #ffffff;
  border: 1px solid #e4eaed;
  border-top: 3px solid var(--color-green);
  border-radius: 6px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(0,118,152,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.contact-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-blue-darker);
  margin: 0;
}

.contact-card__detail {
  font-size: 0.95rem;
  color: var(--color-blue-darker);
  margin: 0;
  font-style: normal;
}

.contact-card__address {
  font-style: normal;
  line-height: 1.7;
}

.contact-card__link {
  color: var(--color-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}

.contact-card__link:hover {
  text-decoration: underline;
  color: var(--color-blue-darker);
}

.contact-card__note {
  font-size: 0.85rem;
  color: #62564B;
  margin: 0;
  line-height: 1.6;
  font-style: normal;
}

/* Domain Expertise */
.contact-expertise__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-blue-darker);
  margin-bottom: 12px;
}

.contact-expertise__intro {
  font-size: 0.95rem;
  color: #62564B;
  margin-bottom: 24px;
  max-width: 640px;
  line-height: 1.7;
}

.contact-expertise__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 48px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-expertise__list li {
  font-size: 0.9rem;
  color: var(--color-blue-darker);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}

.contact-expertise__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
}

@media (max-width: 640px) {
  .contact-expertise__list { grid-template-columns: 1fr; }
}

/* page-eyebrow and page-accent-line are defined near line 101 */

/* =============================================================
   THE KARNA CULTURE PAGE — page-culture.php
   ============================================================= */

/* ── Shared section utilities ───────────────────────────────── */
.culture-section-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-blue-darker);
  margin-bottom: 8px;
  line-height: var(--lh-snug);
}
.culture-section-title--center { text-align: center; }
.culture-section-rule {
  width: 60px;
  height: 3px;
  background: var(--color-green);
  margin-bottom: var(--space-4);
  border-radius: 2px;
}
.culture-section-rule--center { margin: 0 auto var(--space-4); }

/* ── HERO ───────────────────────────────────────────────────── */
.culture-hero {
  position: relative;
  background: url('/wp-content/uploads/2019/09/istockphoto-1043714244-170667a.jpg') center/cover no-repeat;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: var(--space-7) 0;
}
.culture-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,67,87,0.92) 0%, rgba(0,96,128,0.80) 100%);
}
.culture-hero__inner {
  position: relative;
  z-index: 1;
}
.culture-hero__title {
  font-size: var(--text-3xl);
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
  line-height: var(--lh-tight);
}
.culture-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  font-style: italic;
  margin-bottom: var(--space-3);
}

/* ── VISION & MISSION ───────────────────────────────────────── */
.culture-vision {
  background: var(--color-blue-darker);
  padding: var(--space-6) 0;
  color: var(--color-white);
}
.culture-vision__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.culture-vision__quote {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: none;
}
.culture-vision__quote p {
  font-size: 1.5rem;
  font-style: italic;
  color: var(--color-green);
  line-height: var(--lh-body);
  margin: 0;
}
.culture-vision__body p {
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-body);
  margin-bottom: var(--space-2);
  font-size: 15px;
}
.culture-vision__mission .culture-section-title { color: var(--color-green); }
.culture-vision__mission p {
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-body);
  font-size: 15px;
}

/* ── SPOTLIGHT ──────────────────────────────────────────────── */
.culture-spotlight {
  background: var(--color-white);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}
.culture-spotlight__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.culture-spotlight__inner p {
  color: var(--color-gray-web);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}
.culture-spotlight__inner .btn { margin-top: var(--space-1); }

/* ── LEADERSHIP ─────────────────────────────────────────────── */
.culture-leadership {
  background: var(--color-light-gray);
  padding: var(--space-6) 0;
}
.culture-leadership__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.culture-leader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: box-shadow 200ms ease, transform 200ms ease;
  gap: var(--space-2);
}
.culture-leader-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transform: translateY(-2px);
  text-decoration: none;
}
.culture-leader-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-blue-darker);
  margin: 0;
}
.culture-leader-card__title {
  font-size: 0.8rem;
  color: var(--color-gray-web);
  margin: 0;
  line-height: 1.4;
}
.culture-leadership__link-row {
  text-align: center;
  margin: 0;
}

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.culture-testimonials {
  background: #d9e2b4;
  padding: var(--space-6) 0;
}
.culture-testimonials .culture-section-title { color: var(--color-blue-darker); }
.culture-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.culture-testimonial {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  border-left: 4px solid var(--color-blue-darker);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.culture-testimonial p {
  font-size: 15px;
  color: var(--color-gray-web);
  line-height: var(--lh-body);
  font-style: italic;
  margin: 0;
  flex: 1;
}
.culture-testimonial footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.culture-testimonial footer strong {
  color: var(--color-blue-darker);
  font-size: var(--text-sm);
}
.culture-testimonial footer span {
  color: var(--color-gray-web);
  font-size: var(--text-xs);
}

/* ── VALUES ─────────────────────────────────────────────────── */
.culture-values {
  background: var(--color-white);
  padding: var(--space-6) 0;
}
.culture-values__intro {
  text-align: center;
  color: var(--color-gray-web);
  max-width: 600px;
  margin: 0 auto var(--space-5);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}
.culture-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.culture-value-card {
  background: var(--color-light-gray);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border-top: 4px solid var(--color-blue-darker);
  position: relative;
}
.culture-value-card__num {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-blue-darker);
  opacity: 0.08;
  line-height: 1;
  margin-bottom: -8px;
}
.culture-value-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blue-darker);
  margin-bottom: var(--space-1);
}
.culture-value-card__desc {
  font-size: 14px;
  color: var(--color-gray-web);
  line-height: var(--lh-body);
  margin: 0;
}

/* ── JOIN OUR TEAM ──────────────────────────────────────────── */
.culture-join {
  background: var(--color-light-gray);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.culture-join__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.culture-join__heading {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-blue-darker);
  margin-bottom: var(--space-3);
}
.culture-join__left p {
  color: var(--color-gray-web);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
}
.culture-join__subhead {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-blue-darker);
  margin-bottom: var(--space-1);
}
.culture-join__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.culture-join__list li {
  padding-left: 20px;
  position: relative;
  color: var(--color-gray-web);
  font-size: 15px;
}
.culture-join__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
}

/* Accordion */
.culture-join__accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.culture-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}
.culture-accordion__trigger {
  list-style: none;
  padding: 14px 18px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-blue-darker);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.culture-accordion__trigger::-webkit-details-marker { display: none; }
.culture-accordion__trigger::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-blue);
  transition: transform 200ms ease;
}
.culture-accordion[open] .culture-accordion__trigger::after {
  content: '−';
}
.culture-accordion__body {
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--color-gray-web);
  line-height: var(--lh-body);
}
.culture-accordion__body p { margin: 0; }

/* ── CONTRACT VEHICLES ──────────────────────────────────────── */
.culture-contracts {
  background: #e5e5e5;
  padding: var(--space-6) 0;
}
.culture-contracts__heading {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-blue-dark);
  margin-bottom: var(--space-2);
}
.culture-contracts__intro {
  color: var(--color-gray-web);
  margin-bottom: var(--space-4);
  font-size: 15px;
}
.culture-contracts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.culture-contract-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.culture-contract-card h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-blue-darker);
  margin-bottom: 6px;
}
.culture-contract-card p {
  font-size: 14px;
  color: var(--color-gray-web);
  margin: 0;
  line-height: var(--lh-base);
}
.culture-contract-card a { color: var(--color-blue); }
.culture-contracts__note {
  font-size: 14px;
  color: var(--color-gray-web);
  margin: 0;
}
.culture-contracts__note a { color: var(--color-blue); }

/* ── NEWS SECTION ───────────────────────────────────────────── */
.culture-news-section {
  background: var(--color-light-gray);
}
.culture-news-header {
  background: var(--color-white);
  padding: var(--space-5) 0 0;
  border-bottom: none;
}

/* ── CTA ────────────────────────────────────────────────────── */
.culture-cta {
  background: linear-gradient(135deg, #12546a 0%, var(--color-blue-dark) 100%);
  padding: var(--space-7) 0;
  text-align: center;
}
.culture-cta__inner { max-width: 680px; margin: 0 auto; }
.culture-cta__heading {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}
.culture-cta__sub {
  color: rgba(255,255,255,0.80);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}
.culture-cta__sub a { color: var(--color-green); }

/* ── Tab bar (shared) ───────────────────────────────────────── */
.culture-tabs {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  /* Sit below the sticky site-header on desktop (site-header ≈ 96px:
     16px top pad + 64px logo + 16px bottom pad). On mobile the site-header
     is position: relative so tabs stick to viewport top. */
  top: 96px;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* When scrollIntoView targets this element (from JS or keyboard nav),
     leave room for the sticky site-header above so it isn't covered. */
  scroll-margin-top: 96px;
}
@media (max-width: 1024px) {
  .culture-tabs {
    top: 0;
    scroll-margin-top: 0;
  }
}
.culture-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  /* Center tabs horizontally. `safe center` degrades to `flex-start` when
     content overflows on narrow viewports, so the first tab is always
     reachable via horizontal scroll. */
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.culture-tabs__list::-webkit-scrollbar { display: none; }
.culture-tabs__list li { flex-shrink: 0; }
.culture-tabs__tab {
  display: block;
  padding: 18px 22px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-gray-web);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.culture-tabs__tab:hover { color: var(--color-blue-darker); text-decoration: none; }
.culture-tabs__tab.is-active {
  color: var(--color-blue-darker);
  border-bottom-color: var(--color-green);
  font-weight: 700;
}

/* ── Cards / Featured (reused from before) ──────────────────── */
.culture-body {
  background: var(--color-light-gray);
  padding: var(--space-5) 0 var(--space-7);
  min-height: 40vh;
}
.culture-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-darker);
  background: rgba(0,118,152,0.10);
  border: 1px solid rgba(0,118,152,0.20);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  margin-bottom: var(--space-2);
}
.culture-type-badge--sm { font-size: 10px; padding: 2px 8px; }
.culture-featured {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.culture-featured__image {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  order: 2;
}
.culture-featured__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.culture-featured:hover .culture-featured__image img { transform: scale(1.03); }
.culture-featured__content {
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 1;
  border-right: 4px solid var(--color-green);
}
.culture-featured__title {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
  color: var(--color-blue-darker);
}
.culture-featured__title a { color: inherit; text-decoration: none; }
.culture-featured__title a:hover { color: var(--color-blue); }
.culture-featured__excerpt { font-size: 15px; color: var(--color-gray-web); line-height: var(--lh-body); margin-bottom: var(--space-3); flex: 1; }
.culture-featured__meta { font-size: var(--text-sm); color: var(--color-gray-web); margin-bottom: var(--space-3); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.culture-featured__cta {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
  font-weight: 700; letter-spacing: 0.04em; color: var(--color-blue-darker);
  text-decoration: none; padding: 12px 20px; background: var(--color-green);
  border-radius: var(--radius-sm); align-self: flex-start;
  transition: background 150ms ease, transform 150ms ease;
}
.culture-featured__cta:hover { background: var(--color-green-dark); transform: translateX(2px); text-decoration: none; color: var(--color-blue-darker); }
.culture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.culture-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 200ms ease, transform 200ms ease; }
.culture-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.10); transform: translateY(-3px); }
.culture-card__image-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--color-light-gray); }
.culture-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease; }
.culture-card:hover .culture-card__image { transform: scale(1.05); }
.culture-card__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.culture-card__title { font-size: 1.05rem; font-weight: 700; color: var(--color-blue-darker); line-height: 1.35; margin-bottom: var(--space-1); }
.culture-card__title a { color: inherit; text-decoration: none; }
.culture-card__title a:hover { color: var(--color-blue); }
.culture-card__excerpt { font-size: 0.875rem; color: var(--color-gray-web); line-height: var(--lh-body); margin-bottom: var(--space-2); flex: 1; }
.culture-card__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); margin-top: auto; }
.culture-card__meta { font-size: 12px; color: var(--color-gray-web); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; }
.culture-card__link { font-size: 12px; font-weight: 700; color: var(--color-blue); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.culture-card__link:hover { color: var(--color-blue-darker); }
.culture-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); padding-top: var(--space-4); }
.culture-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-blue-darker); background: var(--color-white); border: 1px solid var(--color-border); text-decoration: none; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.culture-pagination .page-numbers:hover { background: var(--color-blue-darker); color: var(--color-white); border-color: var(--color-blue-darker); text-decoration: none; }
.culture-pagination .page-numbers.current { background: var(--color-blue-darker); color: var(--color-white); border-color: var(--color-blue-darker); }
.culture-pagination .page-numbers.dots { background: none; border: none; cursor: default; }
.culture-empty { text-align: center; padding: var(--space-7) 0; color: var(--color-gray-web); }
.culture-empty p { font-size: var(--text-lg); margin-bottom: var(--space-3); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .culture-leadership__grid { grid-template-columns: repeat(3, 1fr); }
  .culture-featured { grid-template-columns: 1fr 360px; }
}
@media (max-width: 860px) {
  .culture-vision__inner { grid-template-columns: 1fr; }
  .culture-featured { grid-template-columns: 1fr; }
  .culture-featured__image { min-height: 260px; order: 1; }
  .culture-featured__content { order: 2; border-right: none; border-top: 4px solid var(--color-green); }
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
  .culture-join__inner { grid-template-columns: 1fr; }
  .culture-values__grid { grid-template-columns: repeat(2, 1fr); }
  .culture-contracts__grid { grid-template-columns: repeat(2, 1fr); }
  .culture-testimonials__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .culture-leadership__grid { grid-template-columns: repeat(2, 1fr); }
  .culture-values__grid { grid-template-columns: 1fr; }
  .culture-contracts__grid { grid-template-columns: 1fr; }
  .culture-grid { grid-template-columns: 1fr; }
  .culture-tabs__tab { padding: 14px 14px; font-size: 0.8rem; }
  .culture-card:hover { transform: none; }
}

/* ── Leadership avatar: photo support ──────────────────────── */
.culture-leader-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-blue-darker);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  flex-shrink: 0;
  overflow: hidden;
}
.culture-leader-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════
   TAB 3 — LEADERSHIP DIRECTORY GRID
   ══════════════════════════════════════════════════ */
.culture-leadership-tab {
  background: var(--color-light-gray);
  padding: var(--space-6) 0 var(--space-7);
}
.culture-leadership-tab__intro {
  max-width: 560px;
  margin-bottom: var(--space-5);
}
.culture-leadership-tab__intro p {
  color: var(--color-gray-web);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  margin: 0;
}

/* Card grid — 4 columns desktop */
.culture-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Individual card */
.culture-dir-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.culture-dir-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

/* Circle photo */
.culture-dir-card__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-blue-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
  border: 3px solid var(--color-green);
  flex-shrink: 0;
}
.culture-dir-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.culture-dir-card__photo span {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: -1px;
}

/* Name & title */
.culture-dir-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blue-darker);
  margin: 0;
  line-height: 1.3;
}
.culture-dir-card__title {
  font-size: 0.8rem;
  color: var(--color-gray-web);
  margin: 0;
  line-height: 1.4;
}

/* Action buttons row */
.culture-dir-card__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.culture-dir-card__bio-btn {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blue-darker);
  background: none;
  border: 1.5px solid var(--color-blue-darker);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  font-family: var(--font-body);
  letter-spacing: 0.03em;
  text-decoration: none;
  display: inline-block;
}
.culture-dir-card__bio-btn:hover {
  background: var(--color-blue-darker);
  color: var(--color-white);
  text-decoration: none;
}
.culture-dir-card__dl-btn {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blue);
  background: none;
  border: 1.5px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
  letter-spacing: 0.03em;
}
.culture-dir-card__dl-btn:hover {
  background: var(--color-blue);
  color: var(--color-white);
  text-decoration: none;
}

/* Bio panel */
.culture-dir-card__bio {
  background: var(--color-light-gray);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2);
  text-align: left;
  margin-top: var(--space-1);
  border-left: 3px solid var(--color-green);
  width: 100%;
}
.culture-dir-card__bio p {
  font-size: 13px;
  color: var(--color-gray-web);
  line-height: var(--lh-body);
  margin: 0 0 8px;
}
.culture-dir-card__full-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
}
.culture-dir-card__full-link:hover { text-decoration: underline; }

/* ── Contract vehicles tab ──────────────────────────────────── */
.culture-contracts__list {
  list-style: disc;
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.culture-contracts__list li {
  font-size: 15px;
  color: var(--color-text);
  line-height: var(--lh-body);
}
.culture-contracts__list a { color: var(--color-blue); }
.culture-contracts__sub-intro {
  font-size: 15px;
  margin-bottom: var(--space-2);
  color: var(--color-blue-darker);
}
.culture-values__experts {
  text-align: center;
  margin-top: var(--space-5);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .culture-directory-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .culture-directory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .culture-directory-grid { grid-template-columns: 1fr; }
  .culture-dir-card { flex-direction: row; text-align: left; align-items: flex-start; }
  .culture-dir-card__photo { width: 72px; height: 72px; flex-shrink: 0; }
  .culture-dir-card__actions { justify-content: flex-start; }
}

/* ============================================================
   Leader Profile page (page-leader-profile.php)
   ============================================================ */

/* Name gets a serif treatment to differentiate from section titles;
   feels like a byline / editorial credit. */
.leader-profile__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin-bottom: 4px;
}
.leader-profile__credentials {
  font-weight: 400;
  opacity: 0.82;
  font-size: 0.72em;
  letter-spacing: 0.02em;
}
.leader-profile__title {
  color: var(--color-green);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
}

/* Body layout: sidebar (portrait + facts + contact + expertise) + main (quote + bio + publications) */
.leader-profile__body {
  padding: var(--space-5) 0 var(--space-6);
}
.leader-profile__grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
  align-items: start;
  max-width: var(--max-width);
}

.leader-profile__sidebar > * + * {
  margin-top: var(--space-3);
}

/* Section labels — small caps style for sidebar section headings */
.leader-profile__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-green);
  display: inline-block;
}

/* Portrait: normalize all source aspect ratios to a consistent square. */
.leader-profile__portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--color-light-gray);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--color-green);
}
.leader-profile__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.leader-profile__portrait-initials {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-blue-dark);
}

/* Quick facts */
.leader-profile__quick-facts ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.leader-profile__quick-facts li {
  font-size: 13px;
  line-height: var(--lh-base);
  color: var(--color-text);
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
.leader-profile__quick-facts li:last-child {
  border-bottom: none;
}
.leader-profile__quick-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  background: var(--color-green);
  border-radius: 50%;
}

/* Contact list — email / phone / linkedin */
.leader-profile__contact-list {
  margin: 0;
  padding: 0;
}
.leader-profile__contact-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}
.leader-profile__contact-row:last-child {
  border-bottom: none;
}
.leader-profile__contact-row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0;
}
.leader-profile__contact-row dd {
  font-size: 14px;
  margin: 0;
  overflow-wrap: anywhere;
}
.leader-profile__contact-row dd a {
  color: var(--color-blue);
  text-decoration: none;
  font-weight: 500;
}
.leader-profile__contact-row dd a:hover {
  color: var(--color-blue-darker);
  text-decoration: underline;
}

/* Expertise — chip cloud */
.leader-profile__expertise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.leader-profile__expertise-list li {
  font-size: 12px;
  color: var(--color-blue-darker);
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.4;
}

/* Right main column */
.leader-profile__quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-blue-darker);
  border-left: 3px solid var(--color-green);
  padding: 6px 0 6px var(--space-3);
  margin: 0 0 var(--space-4);
}
.leader-profile__quote p {
  margin: 0;
}
.leader-profile__quote p::before { content: '\201C'; }
.leader-profile__quote p::after  { content: '\201D'; }

.leader-profile__bio {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}
.leader-profile__bio p {
  margin-bottom: var(--space-3);
}

.leader-profile__publications {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.leader-profile__pubs-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-2);
}
.leader-profile__pubs-list {
  padding-left: var(--space-3);
  margin: 0;
}
.leader-profile__pubs-list li {
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.leader-profile__back {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 14px;
}
.leader-profile__back a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}
.leader-profile__back a:hover {
  color: var(--color-blue-darker);
  text-decoration: underline;
}

/* Tablet: keep sidebar but narrow it */
@media (max-width: 1024px) {
  .leader-profile__grid {
    grid-template-columns: 220px 1fr;
    gap: var(--space-4);
  }
}

/* Mobile: stack sidebar above main content, center portrait */
@media (max-width: 768px) {
  .leader-profile__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .leader-profile__sidebar {
    max-width: 360px;
    margin: 0 auto;
  }
  .leader-profile__portrait {
    max-width: 220px;
    margin: 0 auto;
  }
  /* Hide breadcrumbs, tighten header padding — same treatment as .single */
  .leader-profile .page-header {
    padding: 32px 0 28px;
  }
  .leader-profile .page-header .article-breadcrumb {
    display: none;
  }
  .leader-profile__name {
    font-size: var(--text-xl);
  }
  .leader-profile__quote {
    font-size: 1.1rem;
  }
}

/* ==============================================
   SEARCH RESULTS — empty state + inline retry form
   Used by search.php and the index.php fallback.
   Added v5.4.
   ============================================== */
.search-empty {
  max-width: var(--max-width-content);
  padding: var(--space-4) 0 var(--space-5);
}

.search-empty p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.search-empty p strong {
  color: var(--color-blue-darker);
}

.search-empty a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

.search-empty a:hover,
.search-empty a:focus {
  color: var(--color-blue-darker);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.search-form label {
  flex: 0 0 100%;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-darker);
  margin-bottom: var(--space-1);
}

.search-form input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 12px 16px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.search-form input[type="search"]:focus {
  outline: 2px solid var(--color-blue-dark);
  outline-offset: 2px;
  border-color: var(--color-blue-dark);
}

.search-form .btn {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .search-form .btn {
    flex: 1 1 100%;
  }
}

/* ==============================================
   CASE STUDY TEMPLATE
   Used by page-case-study.php. Rebuilt v5.6 to match
   the section structure of the nine legacy Avada pages.
   ============================================== */

/* --- Header meta row --- */
.cs-header-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--white-70);
  margin: var(--space-2) 0 0;
}

/* --- Optional outcome metrics band --- */
.cs-stats {
  background: var(--color-blue-darker);
  padding: var(--space-4) 0;
}

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

.cs-stats__grid--1 { grid-template-columns: minmax(0, 1fr); }
.cs-stats__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cs-stat {
  border-left: 3px solid var(--color-green);
  border-radius: 0;
  padding-left: var(--space-2);
}

.cs-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  color: var(--color-white);
  margin: 0 0 6px;
}

.cs-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--white-80);
  margin: 0;
}

/* --- Layout --- */
.cs-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.cs-layout--full {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.cs-section {
  margin-bottom: var(--space-5);
}

.cs-section:last-child {
  margin-bottom: 0;
}

.cs-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-1);
}

.cs-section__rule {
  width: 56px;
  height: 3px;
  background: var(--color-green);
  border-radius: 2px;
  margin-bottom: var(--space-2);
}

.cs-subsection__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-blue-darker);
  margin: var(--space-4) 0 var(--space-2);
}

/* --- Shared prose --- */
.cs-prose {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.cs-prose p {
  margin: 0 0 var(--space-2);
}

.cs-prose p:last-child {
  margin-bottom: 0;
}

.cs-prose ul,
.cs-prose ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
}

.cs-prose ul:last-child,
.cs-prose ol:last-child {
  margin-bottom: 0;
}

.cs-prose li {
  margin-bottom: var(--space-1);
}

.cs-prose li:last-child {
  margin-bottom: 0;
}

.cs-prose a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

.cs-prose a:hover,
.cs-prose a:focus {
  color: var(--color-blue-darker);
}

.cs-prose strong {
  color: var(--color-blue-darker);
}

/* --- At-A-Glance --- */
.cs-glance__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0 0 var(--space-1);
}

.cs-strategies {
  margin-bottom: var(--space-3);
}

/* --- Capability blocks --- */
.cs-caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cs-cap {
  background: var(--color-light-gray);
  border-top: 3px solid var(--color-green);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-3);
}

.cs-cap__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-2);
}

.cs-cap__body {
  font-size: var(--text-base);
}

/* --- Project highlights --- */
.cs-highlights__groups {
  display: grid;
  gap: var(--space-3);
}

.cs-highlight {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue-dark);
  border-radius: 0;
  padding: var(--space-3);
}

.cs-highlight__label {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-2);
}

.cs-highlight__body {
  font-size: var(--text-base);
}

/* --- Deliverables --- */
.cs-deliverables__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.cs-deliverables__grid--1 { grid-template-columns: minmax(0, 280px); }
.cs-deliverables__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-deliverables__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cs-deliverable {
  margin: 0;
}

.cs-deliverable__media {
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

/* Portrait report covers are contained, never cropped. */
.cs-deliverable__img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cs-deliverable__media-link {
  display: block;
  line-height: 0;
}

.cs-deliverable__media-link:focus-visible {
  outline: 2px solid var(--color-blue-dark);
  outline-offset: 3px;
}

.cs-deliverable__caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.cs-deliverable__caption a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

.cs-deliverable__caption a:hover,
.cs-deliverable__caption a:focus {
  color: var(--color-blue-darker);
}

/* --- Funding disclaimer --- */
.cs-disclaimer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--lh-base);
  color: var(--color-gray-web);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  margin: var(--space-5) 0 0;
}

/* --- Editor-only note --- */
.cs-editor-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-gray-web);
  background: var(--color-light-gray);
  border-left: 3px solid var(--color-green);
  border-radius: 0;
  padding: var(--space-2);
  margin-top: var(--space-3);
}

/* --- At a Glance sidebar --- */
.cs-facts {
  background: var(--color-light-gray);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: sticky;
  top: var(--space-3);
}

.cs-facts__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-2);
}

.cs-facts__row {
  display: block;
  padding: var(--space-1) 0;
  border-top: 1px solid var(--color-border);
}

.cs-facts__row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.cs-facts__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin-bottom: 4px;
}

.cs-facts__value {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.cs-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cs-term {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--color-blue-darker);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 4px 11px;
  text-decoration: none;
}

.cs-term:hover,
.cs-term:focus {
  background: var(--color-blue-darker);
  border-color: var(--color-blue-darker);
  color: var(--color-white);
}

.cs-term--muted {
  color: var(--color-gray-web);
}

/* --- Pull quote --- */
.cs-quote-band {
  background: var(--color-light-gray);
  padding: var(--space-5) 0;
}

.cs-quote {
  margin: 0;
  border-left: 4px solid var(--color-green);
  border-radius: 0;
  padding-left: var(--space-3);
}

.cs-quote__text {
  margin: 0;
}

.cs-quote__text p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-2);
}

.cs-quote__attr {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-gray-web);
}

/* --- Related work --- */
.cs-related__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-1);
}

.cs-related__rule {
  width: 56px;
  height: 3px;
  background: var(--color-green);
  border-radius: 2px;
  margin-bottom: var(--space-3);
}

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

.cs-related__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cs-related__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cs-related__link:hover .cs-related__name,
.cs-related__link:focus .cs-related__name {
  color: var(--color-blue);
  text-decoration: underline;
}

.cs-related__link:focus-visible {
  outline: 2px solid var(--color-blue-dark);
  outline-offset: 2px;
}

.cs-related__image img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.cs-related__body {
  padding: var(--space-2);
}

.cs-related__client {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0 0 6px;
}

.cs-related__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .cs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .cs-facts {
    position: static;
  }

  .cs-caps {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .cs-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cs-stats__grid,
  .cs-stats__grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-stat__value {
    font-size: var(--text-2xl);
  }

  .cs-deliverables__grid,
  .cs-deliverables__grid--2,
  .cs-deliverables__grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-deliverables__grid--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==============================================
   CAREERS PAGE
   Used by page-careers.php. Added v5.8.
   ============================================== */

.careers-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* --- At a glance band --- */
.careers-stats {
  background: var(--color-blue-darker);
  padding: var(--space-4) 0;
}

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

.careers-stat {
  border-left: 3px solid var(--color-green);
  border-radius: 0;
  padding-left: var(--space-2);
}

.careers-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  color: var(--color-white);
  margin: 0 0 6px;
}

.careers-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--white-80);
  margin: 0;
}

/* --- Shared section heading --- */
.careers-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-1);
}

.careers-section__rule {
  width: 56px;
  height: 3px;
  background: var(--color-green);
  border-radius: 2px;
  margin-bottom: var(--space-3);
}

/* --- Why Karna --- */
.careers-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.careers-reason {
  background: var(--color-light-gray);
  border-top: 3px solid var(--color-green);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-3);
}

.careers-reason__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-1);
}

.careers-reason__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
}

/* --- Disciplines --- */
.careers-fit__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.careers-fit__inner--full {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.careers-fit__intro {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.careers-fit__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.careers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.careers-chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-blue-darker);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 7px 14px;
}

/* --- Life at Karna --- */
.careers-culture {
  background: var(--color-light-gray);
}

.careers-culture__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.careers-culture__card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-decoration: none;
}

.careers-culture__card:hover,
.careers-culture__card:focus {
  border-left-color: var(--color-green);
}

.careers-culture__card:focus-visible {
  outline: 2px solid var(--color-blue-dark);
  outline-offset: 2px;
}

.careers-culture__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin-bottom: 6px;
}

.careers-culture__card:hover .careers-culture__name {
  text-decoration: underline;
}

.careers-culture__desc {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--color-gray-web);
}

/* --- Equal opportunity --- */
.careers-legal {
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--color-border);
}

.careers-legal__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0 0 var(--space-2);
}

.careers-legal p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--color-gray-web);
  margin: 0 0 var(--space-2);
}

.careers-legal p:last-child {
  margin-bottom: 0;
}

.careers-legal a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

.careers-legal a:hover,
.careers-legal a:focus {
  color: var(--color-blue-darker);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .careers-culture__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .careers-fit__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .careers-stats__grid,
  .careers-reasons,
  .careers-culture__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .careers-stat__value {
    font-size: var(--text-2xl);
  }

  .careers-header__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ==============================================
   JOINT VENTURE TEMPLATE
   Used by page-joint-venture.php. Added v5.9.
   Shares cs-section, cs-caps, and cs-prose with the
   case study template.
   ============================================== */

.jv-details__list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.jv-details__row {
  background: var(--color-light-gray);
  border-left: 3px solid var(--color-green);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
}

.jv-details__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0 0 6px;
}

.jv-details__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-blue-darker);
  margin: 0;
}

.jv-details__value address {
  font-style: normal;
}

.jv-contacts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.jv-contact {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-3);
}

.jv-contact__org {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-web);
  margin: 0 0 8px;
}

.jv-contact__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 8px;
}

.jv-contact__line {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  margin: 0 0 4px;
}

.jv-contact__line:last-child {
  margin-bottom: 0;
}

.jv-contact__line a {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

.jv-contact__line a:hover,
.jv-contact__line a:focus {
  color: var(--color-blue-darker);
}

@media (max-width: 900px) {
  .jv-details__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .jv-contacts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==============================================
   JOINT VENTURE HERO
   Co-branded band at the top of page-joint-venture.php.
   Added v5.10.
   ============================================== */

.jv-hero {
  padding: var(--space-6) 0 var(--space-5);
}

/* --- Partner lockup --- */
.jv-hero__lockup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.jv-hero__partner {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--color-white);
}

.jv-hero__partner-logo img,
.jv-hero__karna img {
  display: block;
  width: auto;
  max-height: 46px;
  height: auto;
}

.jv-hero__x {
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--white-60);
}

/* Custom separator text is words rather than a glyph, so it needs to
   sit at body size and not tower over the lockup. */
.jv-hero__x--text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  white-space: nowrap;
}

.karna-bg--light .jv-hero__x {
  color: var(--color-gray-web);
}

/* --- Eyebrow --- */
.jv-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-1);
}

/* --- Heading --- */
.jv-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  color: var(--color-white);
  margin: 0 0 var(--space-3);
  max-width: 20ch;
}

.jv-hero__accent {
  color: var(--color-green);
}

/* --- Intro --- */
.jv-hero__intro {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--white-85);
}

.jv-hero__intro p {
  margin: 0 0 var(--space-2);
}

.jv-hero__intro p:last-child {
  margin-bottom: 0;
}

.jv-hero__intro a {
  color: var(--color-green);
  text-decoration: underline;
}

/* --- Pills --- */
.jv-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.jv-hero__tag {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-white);
  border: 1px solid var(--white-60);
  border-radius: 20px;
  padding: 8px 18px;
}

@media (max-width: 640px) {
  .jv-hero {
    padding: var(--space-5) 0 var(--space-4);
  }

  .jv-hero__title {
    font-size: var(--text-2xl);
  }

  .jv-hero__partner-logo img,
  .jv-hero__karna img {
    max-height: 34px;
  }
}

/* ==============================================
   SECTION BACKGROUNDS
   Used by includes/karna-section-bg.php. Added v5.11.
   Text colour is derived from the surface, never chosen,
   so contrast stays above 4.5:1 by construction.
   ============================================== */

.karna-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.karna-bg__tint {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.karna-bg__content {
  position: relative;
  z-index: 1;
}

/* --- Dark surfaces --- */
.karna-bg--dark,
.karna-bg--dark .cs-section__title,
.karna-bg--dark .jv-band__eyebrow,
.karna-bg--dark .cs-prose,
.karna-bg--dark .cs-cap__label,
.karna-bg--dark .jv-details__value,
.karna-bg--dark .jv-contact__name {
  color: var(--color-white);
}

.karna-bg--dark .cs-prose,
.karna-bg--dark .jv-details__value {
  color: var(--white-85);
}

.karna-bg--dark .jv-band__eyebrow,
.karna-bg--dark .cs-prose strong {
  color: var(--color-green);
}

.karna-bg--dark .cs-prose a,
.karna-bg--dark .jv-contact__line a {
  color: var(--color-green);
}

.karna-bg--dark .cs-cap,
.karna-bg--dark .jv-details__row,
.karna-bg--dark .jv-contact {
  background: var(--white-10);
  border-color: var(--white-15);
}

.karna-bg--dark .jv-details__label,
.karna-bg--dark .jv-contact__org {
  color: var(--white-70);
}

/* --- Light surfaces keep the default ink --- */
.karna-bg--light .cs-section__title {
  color: var(--color-blue-darker);
}

/* --- Bands --- */
.jv-band__inner {
  margin-bottom: var(--space-3);
}

.jv-band__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 var(--space-1);
}

/* Prose in joint venture bands runs the full container width.
   The measure cap was removed deliberately; if it ever needs to come
   back, set max-width here rather than per section. */
.jv-band .cs-prose {
  max-width: none;
}

/* ==============================================
   SOLUTION DETAIL SECTIONS
   Child pages folded into page-solutions.php.
   Added v5.14.
   ============================================== */

.sol-card--linked .sol-card-title a {
  color: inherit;
  text-decoration: none;
}

.sol-card--linked .sol-card-title a:hover,
.sol-card--linked .sol-card-title a:focus {
  color: var(--color-blue);
  text-decoration: underline;
}

.sol-card--linked .sol-card-title a:focus-visible {
  outline: 2px solid var(--color-blue-dark);
  outline-offset: 3px;
}

.sol-detail {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: var(--space-4);
}

.sol-detail:nth-of-type(even) {
  background: var(--color-light-gray);
}

.sol-detail__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sol-detail__num {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1;
  color: var(--color-blue-darker);
  opacity: 0.16;
}

.sol-detail__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-1);
}

.sol-detail__rule {
  width: 56px;
  height: 3px;
  background: var(--color-green);
  border-radius: 2px;
}

.sol-detail__intro {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.sol-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sol-detail__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.sol-detail__item-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: var(--lh-snug);
  color: var(--color-blue-darker);
  margin: 0 0 var(--space-1);
}

.sol-detail__item-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-gray-web);
  margin: 0;
}

.sol-detail__back {
  margin: var(--space-4) 0 0;
}

.sol-detail__back a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
}

.sol-detail__back a:hover,
.sol-detail__back a:focus {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .sol-detail {
    padding: var(--space-5) 0;
  }

  .sol-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}