/*
Theme Name: MRIS
Theme URI: https://mandlik-rhodes.com
Author: Mandlik & Rhodes Information Systems
Description: Custom block theme for the Mandlik & Rhodes company site — Scheme E "Clear Blue". No page builder, Gutenberg block templates only.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: mris-theme
*/

/* ==========================================================================
   Design tokens — Scheme E "Clear Blue"
   ========================================================================== */

:root {
  --color-bg:          #1E4E80;
  --color-cobalt:      #EDF4FB;
  --color-cobalt-dark: #D5E5F5;
  --color-dark:        #FFFFFF;
  --color-text:        #CCE0F4;
  --color-border:      #3D6FA0;
  --color-panel:       #26588D;
  --color-label:       #A8C8E8;
  --color-deep:        #0F2845;
  --font-heading:      'Oswald', sans-serif;
  --font-body:         'Open Sans', sans-serif;

  --color-bg-inverse:      #FFFFFF;
  --color-cobalt-inverse:  #2952CC;
  --color-dark-inverse:    #111827;
  --color-text-inverse:    #4B5563;
  --color-border-inverse:  #E5E7EB;
  --color-panel-inverse:   #F9FAFB;
  --color-label-inverse:   #6B7280;
}

/* Any section can flip to the inverse (white) palette by adding this class. */
.is-inverse {
  --color-bg: var(--color-bg-inverse);
  --color-cobalt: var(--color-cobalt-inverse);
  --color-dark: var(--color-dark-inverse);
  --color-text: var(--color-text-inverse);
  --color-border: var(--color-border-inverse);
  --color-panel: var(--color-panel-inverse);
  --color-label: var(--color-label-inverse);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--font-body);
  color: var(--color-dark-inverse);
  background: var(--color-bg-inverse);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mris-section {
  background: var(--color-bg);
  color: var(--color-dark);
  padding: 72px 24px;
}

.mris-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.mris-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
}

.mris-btn {
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 18px 36px;
  border-radius: 3px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mris-btn-filled {
  background: var(--color-cobalt-inverse, #2952CC);
  color: #fff;
}

.mris-btn-filled:hover {
  background: #1f3da3;
}

.mris-btn-outline {
  border-color: currentColor;
  color: inherit;
}

/* Outline buttons fill solid on hover, flipping text to the dark navy —
   matches the old site's "Learn More" hover exactly (confirmed via
   getComputedStyle: bg -> #fff, text -> --color-bg). */
.mris-btn-outline:hover {
  background: var(--color-cobalt);
  color: var(--color-bg);
}

/* On the blue hero, the filled CTA reads as a near-white pill (not solid
   cobalt) — matches the old site; the header's Contact Us keeps the solid
   cobalt-inverse treatment above since it sits on a white bar. */
.hero-actions .mris-btn-filled {
  background: var(--color-cobalt);
  color: var(--color-border);
}

/* Old site darkens this button toward the panel blue on hover, but its
   sampled hover text color stayed unreadably close to the darkened
   background (~1.1:1 contrast) — same darken direction, text swapped to
   white instead of reproducing that legibility bug. */
.hero-actions .mris-btn-filled:hover {
  background: var(--color-panel);
  color: #fff;
}

/* Third-tier CTA — for hero rows with more than two actions, so the extra
   button reads as a lower-emphasis option rather than a second identical
   outline button competing with the real secondary action. */
.mris-btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-text);
}

.mris-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-cobalt);
  border-color: var(--color-cobalt);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* position: sticky lives on the wp-block-template-part wrapper, not
   .site-header-wrap itself — that wrapper is exactly as tall as this single
   child, which leaves sticky no room to detach from normal flow (a sticky
   element can't stick past its immediate containing block's box, and a
   same-height parent has none to give). Confirmed via getBoundingClientRect
   before landing this fix. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-wrap {
  position: relative;
  background: var(--color-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-header-wrap .site-logo {
  display: inline-flex;
  align-items: center;
  background: var(--color-cobalt);
  padding: 8px 16px;
  border-radius: 8px;
}

.site-header-wrap .site-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header-nav a {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  text-decoration: none;
}

.site-header-nav > ul > li > a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.18s ease;
}

.site-header-nav > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.14);
}

.site-header-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-dark);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.social-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}

.header-contact-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border);
}

.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex: none;
}

.mobile-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header-nav .mris-btn-filled {
  background: var(--color-cobalt);
  color: var(--color-bg);
}

.site-header-nav .mris-btn-filled:hover {
  background: var(--color-panel);
  color: #fff;
}

/* Dropdown submenus */

.site-header-nav li.has-dropdown {
  position: relative;
}

/* Bridges the visual gap between the trigger link and .nav-dropdown (top: calc(100% + 14px)
   below) so the mouse stays over a real descendant of the trigger <li> the whole way down —
   without this, moving straight down from the trigger crosses empty space, the JS mouseleave
   handler below fires early, and the dropdown starts closing before the cursor reaches it. */
.site-header-nav li.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 220px);
  height: 14px;
}

.site-header-nav .nav-caret {
  font-size: 0.6rem;
  margin-left: 4px;
  opacity: 0.6;
  vertical-align: 1px;
}

.site-header-nav .nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--color-bg-inverse);
  border: 1px solid var(--color-border-inverse);
  border-radius: 8px;
  box-shadow: 0 12px 24px -8px rgba(17, 24, 39, 0.18);
  padding: 8px;
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 20;
}

.site-header-nav li.has-dropdown.is-open .nav-dropdown,
.site-header-nav li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.site-header-nav .nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 5px;
  color: var(--color-dark-inverse);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-header-nav .nav-dropdown a:hover,
.site-header-nav .nav-dropdown a:focus {
  background: var(--color-panel-inverse);
  color: var(--color-cobalt-inverse);
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Scoped to .hero-video-section (not .mris-section generally) — .mris-section
   is reused for article heroes, about/404/CTA bands, etc., and this video
   treatment is a homepage-hero-only experiment. */
.hero-video-section {
  position: relative;
  overflow: hidden;
}

.hero-video-section .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.hero-video-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30, 78, 128, 0.5), rgba(15, 40, 69, 0.4));
  z-index: 1;
}

.hero-video-section .hero-section {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-section .hero-bg-video {
    display: none;
  }
}

.hero-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 901px) {
  .hero-section {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero-tag {
  margin-bottom: 16px;
}

.hero-headline {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  color: var(--color-dark);
  margin: 0 0 20px;
}

.hero-lead {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 44ch;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-service-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--color-cobalt);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hero-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3);
}

.hero-service-card:hover .hsc-arrow {
  color: var(--color-cobalt);
}

.hsc-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--color-cobalt);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.hsc-body {
  flex: 1 1 auto;
  min-width: 0;
}

.hsc-body h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--color-dark);
  text-transform: none;
  letter-spacing: normal;
}

.hsc-body p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hsc-arrow {
  flex: none;
  color: var(--color-label);
  align-self: center;
  transition: color 0.22s ease;
}

.trust-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding: 18px 22px;
  background: linear-gradient(160deg, rgba(41, 82, 204, 0.32), rgba(41, 82, 204, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 14px 28px -16px rgba(0, 0, 0, 0.55);
}

.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 220px;
  font-size: 0.85rem;
  color: var(--color-text);
}

/* .trust-badge-text wraps ALL of the badge's text (including the <strong>
   phrase) in one element. Without this, mixed text + <strong> children
   directly inside a flex container each become their own anonymous flex
   item under the default nowrap/shrink behavior, so every text run
   compresses and wraps independently — the "stacked into a column"
   fragmentation this was fixed for. */
.trust-badge-text {
  flex: 1 1 auto;
  min-width: 0;
}

.trust-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  margin-top: 5px;
}

.trust-badge strong {
  font-weight: 600;
}

.trust-badge.is-gs1 .trust-badge-dot {
  background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22);
}

.trust-badge.is-gs1 strong {
  color: #16A34A;
}

.trust-badge.is-soc .trust-badge-dot {
  background: var(--color-cobalt);
  box-shadow: 0 0 0 4px rgba(237, 244, 251, 0.22);
}

.trust-badge.is-soc strong {
  color: var(--color-cobalt);
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust-strip {
  background: var(--color-bg-inverse);
  padding: 0 24px 72px;
}

/* z-index: 3 is load bearing: this card overlaps upward into the hero via
   margin-top: -50px and needs to paint above it. The hero's video layers
   gave .hero-section a z-index: 2, which — per normal stacking rules —
   would otherwise win over this element's default z-index: auto regardless
   of DOM order, pushing the overlap band behind the hero instead of in
   front of it. Keep this higher than the hero's topmost z-index. */
.trust-strip-inner {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: -50px auto 0;
  background: var(--color-deep);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.trust-strip-label {
  color: var(--color-label);
  font-size: 0.8rem;
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.logo-strip .trust-brand-btn {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 18px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
}

/* ==========================================================================
   Our Services
   ========================================================================== */

.services-section {
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(41, 82, 204, 0.06), transparent 70%),
    var(--color-bg-inverse);
  padding: 88px 24px;
}

.services-section-header {
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
}

.services-section-header .mris-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(41, 82, 204, 0.08);
  margin-bottom: 12px;
}

.services-section-header h2 {
  color: var(--color-dark-inverse);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
}

.services-section-header p {
  color: var(--color-text-inverse);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.svc-card {
  position: relative;
  background: linear-gradient(160deg, var(--color-deep) 0%, #14355c 100%);
  border-radius: 14px;
  padding: 36px 32px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 32px -18px rgba(15, 40, 69, 0.55);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.svc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7FB4E8, #2952CC);
}

.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -18px rgba(15, 40, 69, 0.65);
}

.svc-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 20px;
}

.svc-card-accent {
  color: #7FB4E8;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.svc-card-title-row {
  margin-bottom: 4px;
}

.svc-card-title {
  font-size: 1.4rem;
  margin: 0;
}

.svc-card-subtitle {
  color: #A8C8E8;
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.svc-card-body {
  color: #CCE0F4;
  line-height: 1.6;
  margin-bottom: 20px;
}

.svc-card-list-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7FB4E8;
  margin-bottom: 8px;
}

.svc-card-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.svc-card-list li {
  padding-left: 20px;
  position: relative;
  color: #CCE0F4;
  font-size: 0.92rem;
}

.svc-card-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #3DDC84;
}

.svc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.svc-card-cta:hover {
  gap: 8px;
  color: #7FB4E8;
}

/* ==========================================================================
   Latest News
   ========================================================================== */

.news-section-header {
  max-width: 640px;
  margin: 0 auto 40px;
}

.news-section-heading {
  color: var(--color-dark);
}

/* Fixed 2 columns, not auto-fit/minmax — auto-fit computed 4 tracks at this
   width, so the two .news-small-cards below the full-width .news-featured
   each claimed one track and left two empty instead of splitting evenly. */
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

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

.news-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  background: var(--color-deep);
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 701px) {
  .news-featured {
    grid-template-columns: 1fr 1fr;
  }
}

.news-featured img,
.news-small-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-featured-body,
.news-small-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.news-featured-body h3 {
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.3;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-featured-body p {
  color: #CCE0F4;
  line-height: 1.65;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-small-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-inverse);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-dark-inverse);
  box-shadow: 0 2px 6px rgba(15, 40, 69, 0.1), 0 10px 24px -14px rgba(15, 40, 69, 0.3);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.news-small-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(15, 40, 69, 0.12), 0 20px 34px -16px rgba(15, 40, 69, 0.36);
}

.news-small-card img {
  height: auto;
  aspect-ratio: 16 / 9;
  flex: none;
}

.news-small-card-body {
  flex: 1 1 auto;
}

.news-small-card-body h3 {
  font-size: 1.18rem;
  line-height: 1.35;
  margin: 0 0 10px;
  text-transform: none;
  letter-spacing: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-small-card-body p {
  color: var(--color-text-inverse);
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--color-cobalt-inverse);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.news-featured-body .news-card-readmore {
  color: #7FB4E8;
}

.news-card-readmore:hover {
  gap: 10px;
}

.news-featured-body .news-card-readmore:hover {
  color: #fff;
}

.news-view-all-wrap {
  text-align: center;
  margin-top: 32px;
}

.news-view-all {
  color: var(--color-dark);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ==========================================================================
   Article (Single Post)
   ========================================================================== */

.article-hero {
  padding-bottom: 40px;
}

.article-hero-inner {
  max-width: 800px;
}

.article-hero .mris-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-label);
  margin-bottom: 16px;
}

.article-title {
  color: var(--color-dark);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
}

.article-date {
  display: block;
  color: var(--color-label);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-featured-image {
  max-width: 1200px;
  margin: 0 auto 8px;
  padding: 0 24px;
}

.article-featured-image img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.article-body-wrap {
  background: var(--color-bg);
  color: var(--color-text);
  padding: 56px 24px 72px;
}

.article-body-inner {
  max-width: 720px;
  margin: 0 auto;
}

.article-body-inner p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 22px;
}

.article-body-inner p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-dark);
  font-weight: 400;
}

.article-body-inner h2,
.article-body-inner h3 {
  color: var(--color-dark);
  margin: 40px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.article-body-inner h3 {
  border-bottom: none;
  padding-bottom: 0;
}

.article-body-inner a {
  color: var(--color-label);
  text-decoration-color: var(--color-border);
}

.article-body-inner strong {
  color: var(--color-dark);
}

.article-body-inner ul,
.article-body-inner ol {
  margin: 0 0 22px;
  padding-left: 24px;
  line-height: 1.8;
}

.article-body-inner ul li {
  margin-bottom: 8px;
}

.article-body-inner ul li::marker {
  color: var(--color-label);
}

.article-body-inner table {
  width: 100%;
  margin: 0 0 22px;
  font-size: 0.95rem;
}

.article-body-inner table th,
.article-body-inner table td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.article-body-inner table th {
  background: var(--color-panel);
  color: var(--color-dark);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.article-cta-card {
  background: var(--color-panel);
  border-left: 3px solid var(--color-cobalt);
  border-radius: 8px;
  padding: 32px 36px;
  margin: 48px 0 8px;
}

.article-cta-heading {
  color: var(--color-dark);
  margin: 0 0 12px;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 1.3rem;
}

.article-cta-body {
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

.article-cta-body a {
  color: var(--color-cobalt);
}

.article-cta-card .mris-btn-filled {
  background: var(--color-cobalt);
  color: var(--color-border);
}

.article-cta-card .mris-btn-filled:hover {
  background: #fff;
  color: var(--color-bg);
}

.article-back-link-wrap {
  background: var(--color-bg);
  padding: 0 24px 64px;
  text-align: center;
}

.article-back-link-wrap .news-view-all {
  color: var(--color-dark);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-deep);
  color: #CCE0F4;
  padding: 56px 24px 32px;
}

.site-footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.site-footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin: 0 0 16px;
}

.site-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.site-footer-col a {
  color: #A8C8E8;
  text-decoration: none;
  font-size: 0.9rem;
}

.site-footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: #7FA3C7;
}

/* ==========================================================================
   About Us
   ========================================================================== */

.about-hero-band {
  text-align: left;
}

.about-hero-h1 {
  color: var(--color-dark);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 12px 0 16px;
}

.about-hero-lead {
  color: var(--color-text);
  max-width: 60ch;
  line-height: 1.6;
}

.about-stats-section {
  background: var(--color-deep);
  padding: 40px 24px;
}

.about-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-stat-item {
  text-align: center;
}

.about-stat-num {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  color: #fff;
  display: block;
}

.about-stat-label {
  color: #A8C8E8;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.about-body-section {
  background: var(--color-bg-inverse);
  padding: 72px 24px;
}

.about-body-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.about-story {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 72ch;
}

.about-story-eyebrow {
  color: var(--color-cobalt-inverse);
}

.about-story-h2 {
  color: var(--color-dark-inverse);
  margin: 12px 0 20px;
}

.about-story p {
  color: var(--color-text-inverse);
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-cred-rail {
  flex: 1 1 320px;
  max-width: 420px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.about-rail-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-label-inverse);
}

.about-cred-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-panel-inverse);
  border: 1px solid var(--color-border-inverse);
  border-radius: 10px;
  padding: 16px;
}

.about-cred-badge.is-featured {
  border-color: var(--color-cobalt-inverse);
  background: #EEF2FF;
}

.about-cred-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-cobalt-inverse);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-cred-title {
  font-weight: 600;
  color: var(--color-dark-inverse);
  font-size: 0.95rem;
}

.about-cred-sub {
  color: var(--color-text-inverse);
  font-size: 0.82rem;
}

.about-cta-band {
  text-align: center;
}

.about-cta-band h2 {
  color: var(--color-dark);
  margin-bottom: 16px;
}

.about-band-lead {
  color: var(--color-text-inverse);
  max-width: 760px;
  margin: 0 auto 24px;
}

/* ==========================================================================
   Mobile — single breakpoint, matches old site's data point
   ========================================================================== */

/* ==========================================================================
   Latest News Archive
   ========================================================================== */

.news-archive-hero {
  padding-bottom: 48px;
}

.news-archive-section {
  background: var(--color-panel-inverse);
  padding: 64px 24px 80px;
}

.news-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
}

.news-archive-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-dark-inverse);
  box-shadow: 0 2px 6px rgba(15, 40, 69, 0.08), 0 10px 24px -12px rgba(15, 40, 69, 0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.news-archive-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(15, 40, 69, 0.1), 0 20px 34px -14px rgba(15, 40, 69, 0.28);
}

.news-archive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-cobalt-inverse), #7FB4E8);
  z-index: 1;
}

.news-archive-card-img {
  margin: 0;
}

.news-archive-card-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Everything below the image lives in this padded wrapper rather than per-element margins —
   .news-archive-card's block layout used to be "constrained", which makes WordPress inject
   `margin-inline: auto !important` on non-aligned children to center them within the site's
   content width. Since these children are already full-width, that auto margin resolves to 0,
   silently zeroing out the 24px side margins below and jamming the text against the card edge.
   Switching the group to a "flow" layout (see templates/home.html) removes that injected rule;
   this wrapper + padding is also just a more robust pattern than per-child margins generally. */
.news-archive-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.news-archive-card-date {
  display: block;
  color: var(--color-label-inverse);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.news-archive-card-title {
  margin: 10px 0 14px;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}

.news-archive-card-title a {
  color: var(--color-dark-inverse);
  text-decoration: none;
}

.news-archive-card-title a:hover {
  color: var(--color-cobalt-inverse);
}

.news-archive-card-excerpt {
  color: var(--color-text-inverse);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 20px;
}

.news-archive-card-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.news-archive-card-readmore.wp-block-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--color-cobalt-inverse);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.news-archive-card-readmore.wp-block-read-more::after {
  content: '\2192';
}

.news-archive-card-readmore.wp-block-read-more:hover {
  gap: 10px;
}

.news-archive-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.news-archive-pagination a {
  color: var(--color-dark-inverse);
  text-decoration: none;
}

.news-archive-pagination a:hover {
  color: var(--color-cobalt-inverse);
}

.news-archive-pagination .page-numbers.current {
  color: var(--color-cobalt-inverse);
  font-weight: 600;
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found-band {
  padding: 96px 24px;
  text-align: center;
}

.not-found-inner {
  max-width: 560px;
  margin: 0 auto;
}

.not-found-inner .about-hero-lead {
  margin: 0 auto 32px;
}

.not-found-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Contact Us
   ========================================================================== */

.contact-section {
  background: var(--color-bg-inverse);
  padding: 72px 24px;
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.contact-info {
  flex: 1 1 280px;
}

.contact-info-heading {
  color: var(--color-dark-inverse);
  margin: 8px 0 24px;
}

.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}

.contact-info-item a,
.contact-info-item span:last-child {
  color: var(--color-dark-inverse);
  font-size: 1.05rem;
  text-decoration: none;
}

.contact-info-item a:hover {
  color: var(--color-cobalt-inverse);
}

.contact-info-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-label-inverse);
}

.contact-form-wrap {
  flex: 2 1 480px;
}

.contact-form-row {
  display: flex;
  gap: 20px;
}

.contact-form-row .contact-field {
  flex: 1 1 0;
}

.contact-field {
  margin-bottom: 20px;
}

.contact-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-label-inverse);
  margin-bottom: 6px;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border-inverse);
  border-radius: 4px;
  color: var(--color-dark-inverse);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-cobalt-inverse);
}

.contact-field textarea {
  resize: vertical;
}

/* Honeypot wrapper. Moved off-screen rather than display:none — some bots skip fields that are
   explicitly hidden, and this needs to look fillable to them. aria-hidden and tabindex="-1" on the
   markup keep it away from screen readers and keyboard navigation. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-submit {
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.contact-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form-status {
  margin: 14px 0 0;
  font-size: 0.92rem;
  min-height: 1.2em;
}

.contact-form-status.is-pending {
  color: var(--color-label-inverse);
}

.contact-form-status.is-success {
  color: #1a7f4e;
}

.contact-form-status.is-error {
  color: #c0392b;
}

/* ==========================================================================
   Retailers
   ========================================================================== */

.benefits-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.benefits-heading {
  color: var(--color-dark);
  max-width: 60ch;
  margin: 12px 0 40px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.benefit-card {
  display: flex;
  gap: 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
}

.benefit-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-cobalt);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.benefit-title {
  display: block;
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.benefit-body {
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

.signup-section {
  background: var(--color-bg-inverse);
  padding: 72px 24px;
}

.signup-heading {
  color: var(--color-dark-inverse);
  max-width: 60ch;
  margin: 12px 0 40px;
}

.steps-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  gap: 24px;
}

.step-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.step-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-cobalt-inverse);
  color: #fff;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  display: block;
  color: var(--color-dark-inverse);
  font-weight: 600;
  margin-bottom: 4px;
}

.step-body {
  color: var(--color-text-inverse);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-section {
  background: var(--color-bg-inverse);
  padding: 64px 24px;
}

.faq-section.is-alt {
  background: var(--color-panel-inverse);
}

.faq-section-heading {
  color: var(--color-dark-inverse);
  margin: 12px 0 32px;
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 840px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--color-border-inverse);
  border-radius: 8px;
  padding: 4px 20px;
}

.faq-question {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  color: var(--color-dark-inverse);
  font-weight: 600;
}

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

.faq-caret {
  flex: none;
  color: var(--color-cobalt-inverse);
  font-size: 1.2rem;
  transition: transform 0.15s ease;
}

.faq-item[open] .faq-caret {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 0 18px;
  color: var(--color-text-inverse);
  line-height: 1.65;
}

.faq-answer p {
  margin: 0;
}

/* Header/nav gets its own, wider breakpoint from the rest of the tablet rules below — the
   desktop nav row's natural content width (logo + 5 links + 3 dropdown carets + 4 social icons +
   divider + Contact Us button) measures ~997px, so the shared 900px breakpoint left a ~901-996px
   gap where the desktop row rendered but didn't fit, overflowing the viewport horizontally.
   Confirmed via .site-header-inner.scrollWidth across viewport widths before picking 1024px (an
   even number with headroom above the 997px minimum, and it also lines up with iPad-landscape,
   where a hover-dropdown desktop nav is the wrong pattern anyway). */
@media (max-width: 1024px) {
  .mobile-nav-toggle {
    display: flex;
  }

  .site-header-inner {
    min-height: 76px;
  }

  .site-header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    padding: 8px 24px 28px;
    box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.4);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }

  .site-header-nav.is-open {
    display: flex;
  }

  .site-header-nav ul {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .site-header-nav > ul > li > a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-header-nav > ul > li > a:hover {
    background: transparent;
  }

  .site-header-nav li.has-dropdown::after {
    display: none;
  }

  .site-header-nav .nav-dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: grid;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 10px 16px;
  }

  .site-header-nav .nav-dropdown a {
    color: var(--color-text);
    white-space: normal;
  }

  .site-header-nav .nav-dropdown a:hover,
  .site-header-nav .nav-dropdown a:focus {
    background: transparent;
    color: var(--color-cobalt);
  }

  .site-header-socials {
    margin-top: 20px;
  }

  .header-contact-divider {
    display: none;
  }

  .site-header-nav .mris-btn-filled {
    display: block;
    margin-top: 16px;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .trust-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-body-grid {
    flex-direction: column;
  }

  .about-cred-rail {
    max-width: none;
  }

  .contact-form-row {
    flex-direction: column;
    gap: 0;
  }
}