/* ============================================================
   Infinity Business Solutions — Main Stylesheet
   Deel-inspired light theme | Brand: navy, red, white
   ============================================================ */

/* ----- Resets / base ----- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-en);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

body.infinity-ar {
  font-family: var(--font-ar);
}

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

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

ul, ol { list-style: none; padding: 0; margin: 0; }

button {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

/* ----- Layout container ----- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}

/* ----- Utility classes ----- */
.text-red { color: var(--c-red); }
.text-navy { color: var(--c-navy); }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility-bar {
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 13px;
  padding: 10px 0;
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.utility-bar__dot {
  color: var(--c-red);
  font-size: 14px;
}
.utility-bar__text { flex: 1 1 auto; }
.utility-bar__link {
  opacity: 0.8;
  transition: opacity var(--t-fast);
}
.utility-bar__link:hover { opacity: 1; }

@media (max-width: 640px) {
  .utility-bar { font-size: 12px; padding: 8px 0; }
  .utility-bar__text { font-size: 12px; }
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: var(--sp-6);
}
.site-header__logo img {
  height: 42px;
  width: auto;
}

.site-nav__list {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list > li { position: relative; }
.site-nav__link, .site-nav__list a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  transition: color var(--t-fast);
  display: inline-block;
  padding: 6px 0;
}
.site-nav__link:hover, .site-nav__list a:hover { color: var(--c-red); }

/* Dropdown indicator on parent items */
.site-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  opacity: 0.5;
  transition: transform var(--t-fast);
}
.site-nav__list .menu-item-has-children:hover > a::after,
.site-nav__list .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

/* Sub-menu (Services dropdown) — hidden by default */
.site-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--c-gray);
  border-radius: 10px;
  padding: 8px;
  margin: 0;
  list-style: none;
  box-shadow: 0 12px 28px rgba(10, 21, 46, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 50;
}
.site-nav__list .sub-menu li { display: block; margin: 0; }
.site-nav__list .sub-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  border-radius: 6px;
}
.site-nav__list .sub-menu a:hover { background: var(--c-bg-subtle, #FAFAF7); color: var(--c-navy); }
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.site-nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--c-navy);
  transition: transform var(--t-fast);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.lang-switcher {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-switcher__active { color: var(--c-text); }
.lang-switcher__inactive { opacity: 0.5; }
.lang-switcher__sep { opacity: 0.3; }

.site-header__login {
  font-size: 13px;
  font-weight: 500;
}
.site-header__login:hover { color: var(--c-red); }

/* User-menu dropdown (logged-in state).
   Uses native <details> for keyboard + a11y; styled to look like a button. */
.site-header__user-menu {
  position: relative;
  margin: 0;
}
.site-header__user-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--c-cream, #F4F1EA);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-navy, #0A152E);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.site-header__user-menu summary::-webkit-details-marker { display: none; }
.site-header__user-menu summary:hover { border-color: var(--c-navy, #0A152E); }
.site-header__user-menu[open] summary { border-color: var(--c-navy, #0A152E); background: #fff; }

.site-header__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}
.site-header__avatar img,
.site-header__avatar svg,
.site-header__avatar .irp-avatar {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

.site-header__user-name {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header__user-caret { opacity: 0.6; }

.site-header__user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  min-width: 220px;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 21, 46, 0.12);
  z-index: 1000;
}
.site-header__user-dropdown li { margin: 0; }
.site-header__user-dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-navy, #0A152E);
  text-decoration: none;
  border-radius: 8px;
  transition: background .12s;
}
.site-header__user-dropdown a:hover {
  background: var(--c-cream, #F4F1EA);
  color: var(--c-red, #DE1F26);
}
.site-header__user-dropdown-sep {
  height: 1px;
  background: #e6e8ee;
  margin: 6px 8px;
  pointer-events: none;
}

@media (max-width: 540px) {
  .site-header__user-name { display: none; }
  .site-header__user-menu summary { padding-right: 8px; }
}

@media (max-width: 1024px) {
  /* Mobile: move the hamburger button to the leading edge of the header,
     BEFORE the logo. In English (LTR) it lands far-left; in Arabic (RTL)
     the flex `order` resolves against the container's direction, so it
     lands far-right automatically. */
  .site-header__inner { position: relative; }
  .site-nav { order: -1; }
  .site-nav__list { display: none; }
  .site-nav__toggle { display: flex; }
  .site-nav.is-open .site-nav__list {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;   /* dropdown opens from the same edge as the hamburger */
    inset-inline-end: auto;
    background: var(--c-white);
    padding: var(--sp-6) var(--sp-6);
    box-shadow: 0 10px 30px rgba(10,21,46,0.08);
    border-radius: var(--r-md);
    margin-top: var(--sp-2);
    min-width: 220px;
    align-items: flex-start;
    gap: var(--sp-4);
    z-index: 100;
  }
  .site-header__login { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: all var(--t-fast);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--c-red);
  color: var(--c-white);
}
.btn--primary:hover {
  background: #c0181f;
  transform: translateY(-1px);
}

.btn--secondary {
  background: var(--c-navy);
  color: var(--c-white);
}
.btn--secondary:hover { background: #1a2a4d; }

.btn--inverse {
  background: var(--c-white);
  color: var(--c-navy);
}
.btn--inverse:hover { background: var(--c-cream); }

.btn--text {
  padding: 14px 0;
  background: transparent;
  color: var(--c-text);
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.btn--text:hover {
  color: var(--c-red);
  border-bottom-color: currentColor;
}

.btn--lg {
  padding: 16px 28px;
  font-size: 15px;
}

.btn--small {
  padding: 9px 16px;
  font-size: 13px;
}

/* ============================================================
   PILL CHIP
   ============================================================ */
.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-cream);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-navy);
}
.pill-chip__dot { color: var(--c-red); font-size: 10px; }
.pill-chip__arrow { opacity: 0.5; }

/* ============================================================
   SECTION HEAD (eyebrow + title + lead)
   ============================================================ */
.section-head {
  margin-bottom: var(--sp-12);
  max-width: 720px;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-6);
  max-width: none;
  flex-wrap: wrap;
}

.section-head__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}
.section-head__lead {
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
  margin: 0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--c-bg);
  padding: 88px 0 64px;
}
.hero .pill-chip { margin-bottom: var(--sp-8); }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 var(--sp-6);
  max-width: 14ch;
}

.hero__lead {
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
  max-width: 580px;
  margin: 0 0 var(--sp-10);
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero { padding: 56px 0 40px; }
}

/* ============================================================
   TRUST BAND
   ============================================================ */
.trust-band {
  background: var(--c-bg-subtle);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 32px 0 28px;
}
.trust-band__label {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 var(--sp-5);
}
.trust-band__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  opacity: 0.55;
}

/* ===== Marquee ticker (continuous horizontal scroll, like a TV news strap) ===== */
.trust-band__marquee {
  margin-top: var(--sp-5);
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
          mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  /* Force LTR on the marquee viewport itself. Without this, an RTL body
     causes the track (which is wider than the viewport) to be positioned
     right-aligned to the marquee — so the visible portion shows only the
     LAST few logos of set 2 instead of the first logos of set 1. With
     LTR positioning, the track starts at the LEFT edge of the marquee
     in both languages, so all 12 logos cycle through identically. */
  direction: ltr;
}
.trust-band__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: trust-marquee 45s linear infinite;
  opacity: 0.55;
  /* Lock the marquee to LTR even when the page is RTL. Without this the
     body's `dir="rtl"` cascades into the flex track, reversing the order
     of the two duplicate logo sets and the order of logos within each
     set — which creates a visible gap at the loop boundary on the AR
     version. Direction LTR on this track normalises the layout so EN
     and AR render the marquee identically. */
  direction: ltr;
}
.trust-band__track:hover {
  animation-play-state: paused;
}
.trust-band__set {
  display: flex;
  align-items: center;
  /* Tight, uniform gap throughout. The padding-inline-end is exactly the
     same value, so the spacing between set 1's last logo and set 2's
     first logo (the loop boundary) matches the spacing between any two
     adjacent logos within a set — no visible "seam" in the loop. */
  gap: 48px;
  padding-inline-end: 48px;
  flex-shrink: 0;
}
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-band__track { animation: none; transform: none; }
  .trust-band__set { padding-right: 0; }
}
/* RTL: marquee runs identically to LTR — same direction, same timing.
   The previous `animation-direction: reverse` started the track at
   translateX(-50%) which caused a perceived delay on Arabic before the
   first set of logos was visible. By removing the reverse, both languages
   start at translateX(0) with logos visible immediately. The CSS direction
   attribute on the body still flips text, layout, and other RTL concerns;
   only the marquee track keeps a uniform LTR animation. */
.trust-logo {
  color: var(--c-navy);
  font-size: 14px;
  white-space: nowrap;
}
.trust-logo--img {
  /* Render each logo at its natural visual width (height-constrained to
     56px). The previous fixed `width: 140px` slot was wider than the
     visual width of square / near-square logos (Aman, Americana,
     e& Egypt, etc.) — those rendered with up to 40px of transparent
     padding inside their slot, which then ADDED to the 64px flex gap
     and made the apparent gap between some logos look ~140-150px wide
     instead of the intended 64px. With width:auto the visual gap is
     always exactly the flex gap. */
  height: 56px;
  width: auto;
  max-width: 180px;        /* cap a logo's max width so super-wide ones don't dominate */
  object-fit: contain;
  flex-shrink: 0;          /* don't let flex compress logos when track is tight */
  filter: grayscale(1);
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.trust-logo--img:hover {
  filter: grayscale(0);
}
.trust-logo--text {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  background: var(--c-bg);
  padding: 56px 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.stat__value {
  font-size: 38px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: 13px;
  color: var(--c-text-soft);
  margin-top: var(--sp-3);
  font-weight: 500;
}
@media (max-width: 768px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  background: var(--c-bg);
  padding: 96px 0;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.service-card {
  display: block;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  transition: all var(--t-base);
}
.service-card:hover {
  border-color: var(--c-navy);
  transform: translateY(-2px);
}
.service-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-red);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-6);
}
.service-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--sp-3);
}
.service-card__desc {
  font-size: var(--fs-body);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-6);
}
.service-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--c-navy);
  padding-bottom: 2px;
}
.service-card:hover .service-card__link {
  color: var(--c-red);
  border-bottom-color: var(--c-red);
}
@media (max-width: 768px) {
  .services { padding: 64px 0; }
  .services__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   VALUE / WHY US
   ============================================================ */
.value {
  background: var(--c-bg-subtle);
  padding: 96px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.value__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-16);
  align-items: start;
}
.value__copy {
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-8);
}
.value__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}
.value-point__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-red);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}
.value-point__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--sp-2);
}
.value-point__desc {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}
@media (max-width: 1024px) {
  .value__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
}
@media (max-width: 640px) {
  .value { padding: 64px 0; }
  .value__points { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  background: var(--c-bg);
  padding: 96px 0;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.testimonial {
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  margin: 0;
  position: relative;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 60px;
  font-weight: 700;
  color: var(--c-red);
  line-height: 1;
  opacity: 0.5;
}
.testimonial__quote {
  margin: var(--sp-8) 0 var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-text);
  font-style: normal;
}
.testimonial__author { padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.testimonial__name {
  font-weight: 700;
  color: var(--c-navy);
  font-size: 14px;
  margin-bottom: 2px;
}
.testimonial__role {
  font-size: 13px;
  color: var(--c-text-soft);
}
@media (max-width: 1024px) {
  .testimonials__grid { grid-template-columns: 1fr; }
  .testimonials { padding: 64px 0; }
}

/* ============================================================
   INSIGHTS / BLOG
   ============================================================ */
.insights {
  background: var(--c-bg-subtle);
  padding: 96px 0;
  border-top: 1px solid var(--c-border);
}
.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.insight-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--t-base);
}
.insight-card:hover { transform: translateY(-2px); border-color: var(--c-navy); }
.insight-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; }
.insight-card__body { padding: var(--sp-6); }
.insight-card__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: 12px;
  margin-bottom: var(--sp-3);
}
.insight-card__cat {
  background: var(--c-cream);
  color: var(--c-red);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}
.insight-card__date { color: var(--c-text-soft); }
.insight-card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-snug);
}
.insight-card__title a { color: var(--c-navy); transition: color var(--t-fast); }
.insight-card__title a:hover { color: var(--c-red); }
.insight-card__excerpt {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
  margin: 0;
}
@media (max-width: 1024px) {
  .insights__grid { grid-template-columns: 1fr; }
  .insights { padding: 64px 0; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
  background: var(--c-navy);
  color: var(--c-white);
  padding: 96px 0;
}
.cta-final__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-final__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
}
.cta-final__lead {
  font-size: var(--fs-body-lg);
  opacity: 0.75;
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-8);
}
@media (max-width: 768px) {
  .cta-final { padding: 64px 0; }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-navy);
  color: var(--c-white);
  padding: 80px 0 32px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__logo {
  height: 42px;
  width: auto;
  margin-bottom: var(--sp-5);
}
.site-footer__tagline {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
.site-footer__about {
  font-size: var(--fs-small);
  opacity: 0.65;
  line-height: var(--lh-relaxed);
  max-width: 320px;
  margin: 0 0 var(--sp-6);
}
.site-footer__social {
  display: flex;
  gap: var(--sp-3);
}
.site-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.site-footer__social a:hover { background: var(--c-red); }

.site-footer__heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-5);
  color: var(--c-white);
}
.site-footer__list li { margin-bottom: var(--sp-3); }
.site-footer__list a {
  font-size: 14px;
  opacity: 0.7;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.site-footer__list a:hover { opacity: 1; color: var(--c-red); }

.site-footer__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.site-footer__contact-item {
  font-size: 14px;
  opacity: 0.7;
  line-height: var(--lh-normal);
  transition: opacity var(--t-fast);
}
a.site-footer__contact-item:hover { opacity: 1; color: var(--c-red); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-6);
  font-size: 13px;
  opacity: 0.5;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.site-footer__legal { display: flex; gap: var(--sp-5); }
.site-footer__legal a { transition: opacity var(--t-fast); }
.site-footer__legal a:hover { opacity: 1; color: var(--c-red); }

@media (max-width: 1024px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
@media (max-width: 640px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer { padding: 56px 0 24px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* ============================================================
   v1.4.0 — Account UI: signup/login/dashboard/CV gate
   ============================================================ */

/* CV Builder access gate (shown to non-logged-in users) */
.cv-gate {
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 4rem 2rem;
  margin: 4rem auto;
  max-width: 720px;
  text-align: center;
}
.cv-gate__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.cv-gate__lead {
  font-size: 1.0625rem;
  color: var(--c-text-muted);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.55;
}
.cv-gate__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cv-gate__note {
  font-size: 0.8125rem;
  color: var(--c-text-soft);
  margin: 1.5rem 0 0;
  font-style: italic;
}

/* Account forms (signup, login, password reset) */
.account-form {
  max-width: 440px;
  margin: 4rem auto;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
}
.account-form__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 0.5rem;
  text-align: center;
}
.account-form__lead {
  text-align: center;
  color: var(--c-text-muted);
  margin: 0 0 2rem;
  font-size: 0.9375rem;
}
.account-form__field {
  margin-bottom: 1rem;
}
.account-form__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.account-form__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s ease;
}
.account-form__input:focus {
  outline: none;
  border-color: var(--c-red);
}
.account-form__submit {
  width: 100%;
  margin-top: 0.5rem;
}
.account-form__divider {
  position: relative;
  text-align: center;
  margin: 1.5rem 0;
  color: var(--c-text-soft);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-form__divider::before,
.account-form__divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: var(--c-border);
}
.account-form__divider::before { left: 0; }
.account-form__divider::after  { right: 0; }
.account-form__footer {
  text-align: center;
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: var(--c-text-muted);
}
.account-form__footer a {
  color: var(--c-red);
  text-decoration: none;
  font-weight: 600;
}

/* Social login buttons */
.social-login {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.social-login__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-navy);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.social-login__btn:hover {
  background: #fafafa;
  border-color: #c8c4bb;
}
.social-login__btn img {
  width: 20px;
  height: 20px;
}

/* Subscriber dashboard layout */
.dashboard {
  max-width: 1080px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}
.dashboard__greeting {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 0.5rem;
}
.dashboard__subline {
  color: var(--c-text-muted);
  margin: 0 0 2.5rem;
}
.dashboard__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dashboard__nav-link {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  color: var(--c-navy);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background 0.15s ease;
}
.dashboard__nav-link:hover { background: var(--c-cream); }
.dashboard__nav-link.is-active {
  background: var(--c-navy);
  color: #fff;
}
.dashboard__panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 2rem;
  min-height: 400px;
}
@media (max-width: 720px) {
  .dashboard__grid { grid-template-columns: 1fr; }
}

/* Admin panel — same layout, distinguishable header */
.admin-panel {
  max-width: 1280px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}
.admin-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.admin-panel__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0;
}
.admin-panel__role-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--c-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Ghost button variant for secondary CTAs */
.btn--ghost {
  background: transparent;
  color: var(--c-navy);
  border: 1px solid var(--c-navy);
}
.btn--ghost:hover {
  background: var(--c-navy);
  color: #fff;
}

/* ============================================================
   PHASE 2 — Marketing-page components
   Shared by /about/, /services/*, /careers/, /contact/, /insights/.
   Uses the v1.4.0 brand tokens (navy, red, cream, soft greys).
   ============================================================ */

.container--narrow {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter, 20px);
    padding-right: var(--gutter, 20px);
}

/* Page hero (interior pages) */
.page-hero {
    padding: 80px 0 56px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__lead { margin-left: auto; margin-right: auto; }
.page-hero__eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--c-cream);
    color: var(--c-navy);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.page-hero__title {
    margin: 0 0 20px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-navy);
}
.page-hero__lead {
    margin: 0;
    max-width: 720px;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

/* Section header (eyebrow + title + lead) */
.section-header { margin: 0 0 32px; max-width: 760px; }
.section-header__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    color: var(--c-red);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.section-header__title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-navy);
}
.section-header__lead {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Prose block (long-form copy) */
.prose-block {
    padding: 56px 0;
    background: var(--c-bg);
}
.prose-block + .prose-block { padding-top: 0; }
.prose-block p {
    color: var(--c-text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0 0 16px;
}

/* Feature list (bullets with red dots, used on About + service pages) */
.feature-list { padding: 56px 0; background: var(--c-bg-subtle); }
.feature-list__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
.feature-list__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-list__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
    .feature-list__grid--cols-2,
    .feature-list__grid--cols-3 { grid-template-columns: 1fr; }
}
.feature-list__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.feature-list__dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--c-red);
    color: #fff;
    font-size: 0.5rem;
    line-height: 1;
}
.feature-list__content { min-width: 0; }
.feature-list__title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-navy);
}
.feature-list__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--c-text-muted);
}

/* Leadership grid + leader cards */
.leadership { padding: 56px 0; background: var(--c-bg); }
.leadership__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.leader-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.leader-card__photo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.leader-card__photo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-navy);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.leader-card__body { min-width: 0; }
.leader-card__name {
    margin: 0 0 2px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-navy);
}
.leader-card__title {
    margin: 0 0 8px;
    color: var(--c-red);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.leader-card__bio {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--c-text-muted);
}

/* CTA section (full-width navy) */
.cta-section {
    background: var(--c-navy);
    color: #fff;
    padding: 64px 0;
    text-align: center;
}
.cta-section__title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.cta-section__lead {
    margin: 0 auto 24px;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.0625rem;
    line-height: 1.5;
}
.btn--white {
    background: #fff;
    color: var(--c-navy);
}
.btn--white:hover { background: var(--c-cream); }

/* FAQ accordion */
.faq { padding: 56px 0; background: var(--c-bg); }
.faq__title { margin: 0 0 24px; font-size: 1.5rem; font-weight: 800; color: var(--c-navy); }
.faq__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item summary,
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--c-navy);
    font-size: 1.0625rem;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    transition: transform var(--t-fast);
    color: var(--c-red);
}
.faq__item[open] .faq__chev,
details[open] .faq__chev { transform: rotate(180deg); }
.faq__a {
    padding: 0 0 18px;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Process timeline (numbered steps) */
.process { padding: 56px 0; background: var(--c-bg-subtle); }
.process__list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.process__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-navy);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
}
.process__title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--c-navy); }
.process__text { margin: 0; color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.55; }

/* Service card (services overview grid) */
.service-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.service-card:hover {
    border-color: var(--c-navy);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(10, 21, 46, 0.08);
}
.service-card__num {
    display: inline-block;
    color: var(--c-red);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.service-card__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--c-navy); }
.service-card__lead { margin: 0; color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.55; }
.service-card__more {
    margin-top: auto;
    color: var(--c-red);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* "Who we are" + similar narrow text blocks helper */
.prose-block .container--narrow > p:first-of-type { margin-top: 16px; }

/* ============================================================
   Insights archive (/insights/) — supplemental styles
   The .insight-card itself is already styled; these are the
   archive grid wrapper, the placeholder media block, and the
   single-post template classes.
   ============================================================ */
.insights-archive { padding: 56px 0 80px; background: var(--c-bg); }
.insights-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 1024px) { .insights-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .insights-archive__grid { grid-template-columns: 1fr; } }

.insight-card__link { display: block; color: inherit; text-decoration: none; }
.insight-card__media--placeholder {
    background: linear-gradient(135deg, var(--c-cream), var(--c-bg-subtle));
    position: relative;
}
.insight-card__media--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A152E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><polyline points='3 17 9 11 13 15 21 7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 56px;
    opacity: 0.18;
}
.insight-card__more {
    display: inline-block;
    margin-top: 12px;
    color: var(--c-red);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.insights-archive__empty {
    text-align: center;
    padding: 60px 0;
    color: var(--c-text-muted);
}

/* Pagination (used by archive + insights) */
.pagination { margin-top: 40px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 6px; }
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-navy);
    font-weight: 600;
    text-decoration: none;
}
.pagination .page-numbers:hover { background: var(--c-bg-subtle); }
.pagination .page-numbers.current { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

/* ============================================================
   Single post (/insights/<slug>/)
   ============================================================ */
.single-post__hero { padding: 64px 0 24px; }
.single-post__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    background: var(--c-cream);
    color: var(--c-red);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
}
.single-post__title {
    margin: 0 0 16px;
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--c-navy);
}
.single-post__byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    color: var(--c-text-soft);
    font-size: 0.9375rem;
}
.single-post__author-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(10, 21, 46, 0.08);
}
.single-post__author-avatar img,
.single-post__author-avatar svg,
.single-post__author-avatar .irp-avatar {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
}
.single-post__author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.single-post__author { font-weight: 500; color: var(--c-navy); }
.single-post__author strong { font-weight: 700; }
.single-post__reading-time {
    font-size: 0.8125rem;
    color: var(--c-text-soft);
    opacity: 0.8;
}
.single-post__feature { padding: 16px 0 24px; }
.single-post__feature-img { width: 100%; border-radius: 12px; }
.single-post__body {
    padding: 24px 0 80px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--c-text-muted);
}
.single-post__body h2 { margin: 32px 0 12px; font-size: 1.5rem; font-weight: 800; color: var(--c-navy); }
.single-post__body h3 { margin: 24px 0 10px; font-size: 1.25rem; font-weight: 700; color: var(--c-navy); }
.single-post__body p { margin: 0 0 16px; }
.single-post__body ul, .single-post__body ol { padding-left: 22px; margin: 0 0 16px; }
.single-post__body li { margin-bottom: 6px; }
.single-post__body img { max-width: 100%; border-radius: 8px; margin: 16px 0; }

/* ============================================================
   Shortcode-only pages (signup, login, dashboard, etc.)
   page.php skips the auto-hero for these so the shortcode owns
   the layout. We add a touch of top spacing here so the form
   card isn't glued to the header.
   ============================================================ */
.shortcode-page { padding: 24px 0; }

/* ============================================================
   PHASE 2 COMPONENTS — second pass
   Adds the remaining missing styles found during the page sweep:
   contact channels + form, services-grid, comparison table,
   careers-jobs, deliverables grid, prose variants.
   ============================================================ */

/* ---------- Contact channels (3-up tiles) ---------- */
.contact-channels { padding: 56px 0; background: var(--c-bg); }
.contact-channels__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 900px) { .contact-channels__grid { grid-template-columns: 1fr; } }
.contact-channel {
    background: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-channel__title {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--c-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.contact-channel__lead {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.contact-channel__value {
    display: inline-block;
    margin: 0;
    color: var(--c-navy);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}
.contact-channel__value:hover { color: var(--c-red); }

/* ---------- Contact form ---------- */
.contact-form-section { padding: 56px 0; background: var(--c-bg-subtle); }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--c-navy); }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--c-navy);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    outline: 0;
    border-color: var(--c-navy);
    box-shadow: 0 0 0 3px rgba(10, 21, 46, 0.08);
}
.contact-form__note { margin: 4px 0 0; font-size: 0.75rem; color: var(--c-text-soft); }

/* Contact Form 7 mapping — apply same styling when CF7 is rendered instead */
.wpcf7 form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-select, .wpcf7-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--c-navy);
}
.wpcf7-submit {
    background: var(--c-red);
    color: #ffffff;
    border: 0;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}
.wpcf7-submit:hover { background: #c01a20; }

/* ---------- Contact meta (Visit us / Office hours / Map) ---------- */
.contact-meta { padding: 56px 0 80px; background: var(--c-bg); }
.contact-meta__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 900px) { .contact-meta__grid { grid-template-columns: 1fr; } }
.contact-meta__col h3 {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--c-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.contact-meta__col p,
.contact-meta__col address {
    margin: 0 0 6px;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    font-style: normal;
}
.contact-meta__col a { color: var(--c-navy); font-weight: 600; }
.contact-meta__col a:hover { color: var(--c-red); }

/* ---------- Services overview grid + comparison table ---------- */
.services-grid { padding: 56px 0; background: var(--c-bg); }
.services-grid__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}
@media (max-width: 800px) { .services-grid__cards { grid-template-columns: 1fr; } }

.comparison { padding: 56px 0; background: var(--c-bg-subtle); }
.comparison__wrap { overflow-x: auto; margin-top: 24px; }
.comparison__table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    overflow: hidden;
}
.comparison__table th,
.comparison__table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.9375rem;
}
.comparison__table th {
    background: var(--c-navy);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.comparison__table td:first-child { font-weight: 600; color: var(--c-navy); }
.comparison__table tr:last-child td { border-bottom: 0; }

/* ---------- Careers jobs widget ---------- */
.careers-jobs { padding: 0 0 24px; }
.careers-jobs__empty {
    padding: 24px;
    background: var(--c-cream);
    border-radius: 8px;
    color: var(--c-navy);
    text-align: center;
}
.careers-jobs__more { margin: 16px 0 0; }

/* ============================================================
   WP Job Manager — full theming for /careers/jobs/ + single job page
   ============================================================ */

/* ---- Listing page filter form (the [jobs] shortcode header) ---- */
.job_listings .job_filters {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 24px;
    margin: 0 0 32px;
}
.job_listings .search_jobs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
/* WPJM injects an empty <div style="clear: both"> between fields — kill it
   so it doesn't break our flex flow and add an invisible blank cell. */
.job_listings .search_jobs > div[style*="clear"] { display: none; }
.job_listings .search_keywords  { flex: 2 1 220px; min-width: 200px; }
.job_listings .search_location  { flex: 1.5 1 180px; min-width: 160px; }
.job_listings .search_categories { flex: 1.5 1 180px; min-width: 160px; }
.job_listings .search_remote_position { flex: 0 0 auto; }
.job_listings .search_submit { flex: 0 0 auto; }
.job_listings .search_jobs label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}
.job_listings .search_jobs input[type="text"],
.job_listings .search_jobs input[type="search"],
.job_listings .search_jobs select,
.job_listings .search_jobs .select2-selection--single {
    width: 100%;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    background: #fff;
    color: var(--c-navy);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.job_listings .search_jobs input[type="text"]:focus,
.job_listings .search_jobs input[type="search"]:focus,
.job_listings .search_jobs select:focus {
    outline: none;
    border-color: var(--c-navy);
    box-shadow: 0 0 0 3px rgba(10, 21, 46, 0.08);
}
.job_listings .search_jobs .search_remote_position {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-subtle);
    cursor: pointer;
}
.job_listings .search_jobs .search_remote_position input { margin: 0; }
.job_listings .search_jobs .search_remote_position label {
    margin: 0;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-navy);
    cursor: pointer;
}
.job_listings .search_jobs .search_submit input[type="submit"] {
    height: 44px;
    padding: 0 28px;
    background: var(--c-navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.job_listings .search_jobs .search_submit input[type="submit"]:hover { background: var(--c-red); }
.job_listings .job_types {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    flex-wrap: wrap;
}
.job_listings .job_types li label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--c-navy);
    cursor: pointer;
    text-transform: capitalize;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.job_listings .job_types li label:has(input:checked) {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}
.job_listings .showing_jobs {
    margin: 16px 0 0;
    color: var(--c-text-muted);
    font-size: 14px;
}

/* ---- The job cards container (AJAX populates .jobs-list with <li>; the
   "Other open roles" footer uses <ul class="job_listings infinity-jobs">) ---- */
.job_listings .jobs-list,
.job_listings ul.job_listings,
ul.job_listings.infinity-jobs {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    border: 0;
}
.job_listings .job_listing,
ul.job_listings .job_listing {
    list-style: none;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    overflow: hidden;
    display: block;
}
.job-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--c-navy);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.job-card:hover {
    border-color: var(--c-navy);
    box-shadow: 0 8px 24px -12px rgba(10, 21, 46, 0.18);
    transform: translateY(-2px);
}
.job-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.job-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.3;
}
.job-card__featured {
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--c-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
}
.job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.job-card__pill {
    display: inline-block;
    padding: 4px 10px;
    background: var(--c-bg-subtle);
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    text-transform: capitalize;
}
.job-card__pill--gov {
    background: #f0e9da;
    color: #6b5c2f;
}
.job-card__excerpt {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 14px;
    line-height: 1.55;
    flex: 1;
}
.job-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border);
}
.job-card__cta {
    color: var(--c-red);
    font-size: 14px;
    font-weight: 600;
    transition: gap 0.15s ease;
}
.job-card:hover .job-card__cta { letter-spacing: 0.02em; }
.job-card__date {
    color: var(--c-text-muted);
    font-size: 12px;
}

/* RTL: flip the foot row direction */
body.rtl .job-card__foot,
body.infinity-ar .job-card__foot { flex-direction: row-reverse; }

/* Mobile filter form */
@media (max-width: 768px) {
    .job_listings .job_filters { padding: 16px; }
    .job_listings .search_jobs { grid-template-columns: 1fr; gap: 12px; }
    .job_listings .search_jobs .search_submit input[type="submit"] { width: 100%; }
}

/* ---- Single job page ---- */
.single-job { background: var(--c-bg); }
.single-job__hero {
    background: var(--c-bg-subtle);
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--c-border);
}
.single-job__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.single-job__featured-pill {
    display: inline-block;
    padding: 3px 10px;
    background: var(--c-red);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.single-job__title {
    margin: 0 0 24px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--c-navy);
}
.single-job__meta {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.single-job__meta li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-navy);
    min-width: 120px;
}
.single-job__meta li span {
    color: var(--c-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.single-job__hero-cta { margin-top: 8px; }

.single-job__body { padding: 56px 0; }
.single-job__description {
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.7;
}
.single-job__description h3 {
    margin: 32px 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--c-navy);
}
.single-job__description p { margin: 0 0 16px; }
.single-job__description ul,
.single-job__description ol { margin: 0 0 20px; padding-left: 22px; }
body.rtl .single-job__description ul,
body.rtl .single-job__description ol { padding-left: 0; padding-right: 22px; }
.single-job__description li { margin: 0 0 8px; line-height: 1.6; }
.single-job__description strong { color: var(--c-navy); }

.single-job__apply {
    margin-top: 48px;
    padding: 32px;
    background: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: 14px;
}
.single-job__apply h2 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    color: var(--c-navy);
}
.single-job__apply .application_button,
.single-job__apply input[type="submit"],
.single-job__apply button {
    background: var(--c-navy);
    color: #fff;
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease;
}
.single-job__apply .application_button:hover,
.single-job__apply button:hover { background: var(--c-red); }
.single-job__apply .job_application a[href^="mailto:"] {
    color: var(--c-red);
    font-weight: 600;
    border-bottom: 1px solid currentColor;
}
.single-job__apply .application_details { margin: 0 0 16px; }

/* "Other open roles" footer */
.single-job__more { padding: 56px 0; background: var(--c-bg-subtle); border-top: 1px solid var(--c-border); }
.single-job__more-title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    color: var(--c-navy);
}
.single-job__more-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.single-job__more-list .job_listing { padding: 0; border: 0; }

/* Mobile single job */
@media (max-width: 768px) {
    .single-job__title { font-size: 30px; }
    .single-job__hero { padding: 40px 0 28px; }
    .single-job__body { padding: 40px 0; }
    .single-job__apply { padding: 24px; }
    .single-job__meta li { min-width: calc(50% - 6px); }
}

/* ---------- Service-page deliverables grid (Outsourcing) ---------- */
.deliverables { padding: 56px 0; background: var(--c-bg); }
.deliverables__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 24px;
}
@media (max-width: 800px) { .deliverables__grid { grid-template-columns: 1fr; } }
.deliverables__col-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-navy);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-red);
}
.deliverables__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.deliverables__list li {
    padding-left: 18px;
    position: relative;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.deliverables__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-red);
}

/* ---------- Prose variants ---------- */
.prose-block--tight { padding: 32px 0; }
.prose-detail {
    padding: 56px 0;
    background: var(--c-bg-subtle);
}
.prose-detail h3 {
    margin: 24px 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-navy);
}
.prose-detail p {
    color: var(--c-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 12px;
}
.prose-detail ul {
    margin: 0 0 16px 18px;
    padding: 0;
    color: var(--c-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.prose-detail li { margin-bottom: 4px; }

/* ---------- Contact map (full-width band below the meta info) ---------- */
.contact-meta__map {
    margin-top: 32px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: 0 6px 24px rgba(10, 21, 46, 0.04);
}
.contact-meta__map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}
@media (max-width: 768px) {
    .contact-meta__map iframe { height: 300px; }
}

/* ---------- Leadership: 2-up side-by-side variant ---------- */
.leadership__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 768px) {
    .leadership__grid--two { grid-template-columns: 1fr; }
}
.leader-card__link {
    display: inline-block;
    margin-top: 12px;
    color: var(--c-red);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.leader-card__link:hover { color: var(--c-navy); }

/* Fallback: if a white AR footer logo isn't present, invert+brighten the
   regular AR logo so it reads on the navy footer. */
.site-footer__logo--invert {
    filter: brightness(0) invert(1);
}