/* ============================================================
   May Cash — one-page site
   ============================================================ */

html { scroll-padding-top: 88px; }
body {
  color: var(--gray-800);
  background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  text-wrap: pretty;
}
/* body.nav-open used to set overflow: hidden while the mobile burger menu
   was open — removed because iOS Safari resets scrollY to 0 on that
   toggle, which made the sticky nav jump back to the very top of the
   page every time the menu opened. */

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, dd, figcaption { text-wrap: pretty; }

.text-accent { color: var(--mc-red); }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.98);
  transition: opacity 0.4s ease, visibility 0s 0.4s;
  /* CSS-only failsafe — auto-hides after 3s even if the inline JS hide
     script is stripped by LiteSpeed Cache HTML optimization. Without this
     a stuck loader looks like a fully blank page. */
  animation: mc-loader-autohide 0s ease 3s forwards;
}
.page-loader img { width: 116px; }
.page-loader.hidden { opacity: 0; visibility: hidden; }
@keyframes mc-loader-autohide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header / hero ---------- */
.site-header {
  position: relative;
  background: #f7f7f7;
  color: var(--gray-900);
}
.topbar,
.main-nav,
.hero-section { position: relative; z-index: 1; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: #de252b;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 18px;
  flex-wrap: wrap;
}
.topbar__segments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__segments li {
  position: relative;
  padding: 0 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.topbar__segments li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.topbar__segments li:first-child { padding-left: 0; }
.topbar__segments li a {
  color: rgba(255,255,255,0.78);
  transition: color 0.2s ease;
}
.topbar__segments li a:hover,
.topbar__segments li.is-active a {
  color: #fff;
}
.topbar__segments li.is-active a {
  font-weight: 700;
}
.topbar__lang { position: relative; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
}
.lang-switch__opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
a.lang-switch__opt { display: inline-block; }
.lang-switch__opt[data-lang="ar"] { font-family: var(--font-arabic, "Cairo", system-ui); font-size: 14px; }
.lang-switch__opt.is-active {
  background: #fff;
  color: var(--mc-red);
}
.lang-switch__opt.is-disabled {
  cursor: not-allowed;
  color: rgba(255,255,255,0.4);
}
.lang-switch__opt.is-disabled:hover { background: transparent; }

/* ---------- Main floating nav card (overlaps the topbar) ----------
   Height stays constant on scroll: padding does NOT change between
   default and .is-scrolled — otherwise the page jumps at the threshold
   and the toggle can shake back and forth on inertial scroll. */
.main-nav {
  position: -webkit-sticky; /* iOS Safari < 16 still wants the prefix */
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 6px 0 14px;
  background: #ffffff;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* Explicit display + width so iOS Safari (esp. with RTL) doesn't
     collapse the nav when an ancestor's writing-mode / flex flow trips
     up its sticky calculation. */
  display: block;
  width: 100%;
}
.main-nav.is-scrolled {
  background: #fff;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.18);
}
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 18px;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 22px;
  box-shadow: 0 12px 28px -18px rgba(15,23,42,0.18);
  transition: background 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}
.main-nav.is-scrolled .nav-shell {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
}
.brand img {
  width: 156px;
  max-width: 42vw;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-links > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray-900);
  transition: color 0.2s ease;
}
.nav-links > a + a::before,
.nav-links > a + .nav-dropdown::before,
.nav-links > .nav-dropdown + a::before,
.nav-links > .nav-dropdown + .nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(15,23,42,0.1);
}
.nav-links > .nav-dropdown { position: relative; }
.nav-dropdown .nav-link--parent {
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray-900);
  transition: color 0.2s ease;
}
.nav-dropdown:hover .nav-link--parent,
.nav-dropdown .nav-link--parent.is-active { color: var(--mc-red); }
.nav-links > a:hover,
.nav-links > a.is-active { color: var(--mc-red); }
/* Highlighted "Demander une franchise" promo item */
.nav-promo {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 20px !important;
  color: var(--mc-orange) !important;
  font-weight: 700 !important;
}
.nav-promo .nav-promo__ico {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.nav-promo:hover .nav-promo__ico,
.nav-promo:focus-visible .nav-promo__ico {
  animation: navPromoCoin 0.9s ease-in-out;
}
@keyframes navPromoCoin {
  0%   { transform: rotate(0)      scale(1);    }
  25%  { transform: rotate(-14deg) scale(1.18); }
  50%  { transform: rotate(0)      scale(1.22); }
  75%  { transform: rotate(14deg)  scale(1.18); }
  100% { transform: rotate(0)      scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-promo:hover .nav-promo__ico,
  .nav-promo:focus-visible .nav-promo__ico { animation: none; transform: scale(1.08); }
}
.nav-promo:hover { color: #d97706 !important; }

/* Right-side icon cluster */
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(15,23,42,0.1);
}
.nav-icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--mc-red-lightest);
  color: var(--mc-red);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-icon-btn:hover {
  background: var(--mc-red);
  color: #fff;
  transform: translateY(-1px);
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.6);
  color: var(--gray-900);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-section {
  padding: 24px 0 72px;
}
.hero-section > * { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 56px;
  align-items: center;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mc-red);
  letter-spacing: 0.02em;
}
.hero-eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-red);
  letter-spacing: 0.02em;
}
.hero-copy h1 {
  margin: 0;
  color: var(--gray-900);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero-h1-sub {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--ink-500);
}
.hero-lead {
  margin-top: 22px;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.hero-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  color: var(--mc-orange);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-promo-cta__ico {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.hero-promo-cta:hover { color: #d97706; }
.hero-promo-cta:hover .hero-promo-cta__ico,
.hero-promo-cta:focus-visible .hero-promo-cta__ico {
  animation: navPromoCoin 0.9s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .hero-promo-cta:hover .hero-promo-cta__ico,
  .hero-promo-cta:focus-visible .hero-promo-cta__ico { animation: none; transform: scale(1.08); }
}
.hero-actions .btn-outline {
  border-color: var(--ink-200);
  background: #fff;
  color: var(--gray-900);
}
.hero-actions .btn-outline:hover {
  border-color: var(--mc-red);
  color: var(--mc-red);
  background: #fff;
}
/* ---------- Hero carousel (full hero) ---------- */
.hero-carousel {
  position: relative;
  width: 100%;
}
.hero-carousel__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.hero-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.hero-carousel__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.hero-carousel__slide .hero-grid {
  align-items: center;
}
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.hero-visual img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* Carousel chrome (dots + arrows) */
.hero-carousel__chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  pointer-events: none;
}
.hero-carousel__chrome > * { pointer-events: auto; }
.hero-carousel__dots {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-carousel__dots li { line-height: 0; }
.hero-carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15,23,42,0.22);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.hero-carousel__dots button.is-active {
  width: 26px;
  background: var(--mc-red);
}

/* ---------- Trust strip (value-prop row on white card) ---------- */
.trust-strip {
  position: relative;
  margin-top: -36px;
  z-index: 5;
  padding-bottom: 24px;
  background: #f7f7f7;
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  padding: 22px 30px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 28px 50px -32px rgba(15,23,42,0.28);
}
.trust-strip__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 22px;
}
.trust-strip__item + .trust-strip__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(15,23,42,0.08);
}
.trust-strip__ico {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--mc-red-lightest);
  color: var(--mc-red);
  flex: 0 0 52px;
}
.trust-strip__ico svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  color: var(--mc-red);
}
.trust-strip__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-900);
  line-height: 1.25;
}
.trust-strip__item span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.45;
}

/* ---------- Promo band ---------- */
.promo-band {
  padding: 56px 0;
  background:
    radial-gradient(circle at top right, rgba(246,160,36,0.18), transparent 36%),
    linear-gradient(135deg, var(--mc-red) 0%, #b81418 60%, #7a1518 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.promo-band::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/motif.png');
  background-size: 480px;
  background-position: right -80px center;
  background-repeat: no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.promo-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
}
.promo-band__kicker {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.promo-band__copy h2 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.15;
}
.promo-band__num {
  font-family: var(--font-display);
  background: linear-gradient(120deg, #fff 0%, #ffd28b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-band__copy p {
  margin-top: 14px;
  max-width: 540px;
  color: rgba(255,255,255,0.88);
  line-height: 1.75;
  font-size: 16px;
}
.promo-band__copy strong { color: #fff; }
.promo-band__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.promo-band .btn-primary {
  background: #fff;
  color: var(--mc-red);
}
.promo-band .btn-primary:hover { background: #fff; color: var(--mc-red-dark); }
.btn-light {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.btn-light:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}
.promo-band__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.promo-band__stats > div {
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.promo-band__stats strong {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: #fff;
}
.promo-band__stats span {
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Sections ---------- */
.section {
  padding: 96px 0;
}
.section-light {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}
.section-dark {
  color: #fff;
  background: #08090b;
}
.section-grid {
  display: grid;
  gap: 48px;
}
.section-grid--about {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: start;
}

/* --- Reusable variants (controlled by the editor toggles) ---
   - .section-grid--about--no-image  → single column, text spans full width
   - .section-grid--about--image-left → swap the order so image appears first
   - .section-about--no-bg           → remove the gray gradient backdrop */
.section-grid--about--no-image {
  grid-template-columns: 1fr;
}
.section-grid--about--no-image .section-copy { max-width: 920px; margin: 0 auto; }
.section-grid--about--image-left .section-copy   { order: 2; }
.section-grid--about--image-left .insight-panel { order: 1; }
.section-about--no-bg { background: transparent !important; }
/* Optional CTA button below the body copy. */
.section-copy .section-cta { margin: 26px 0 0; }
@media (max-width: 768px) {
  /* On mobile both columns stack regardless; image-left becomes image-on-top
     which is usually what the admin wants too. */
  .section-grid--about--image-left .section-copy,
  .section-grid--about--image-left .insight-panel { order: 0; }
}
.section-copy h2,
.section-heading h2 {
  margin-top: 18px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
}
.section-copy p,
.section-heading p {
  margin-top: 18px;
  color: var(--ink-700);
  font-size: 17px;
  line-height: 1.9;
}
.section-tagline {
  font-size: 16px !important;
  color: var(--mc-red-dark) !important;
  font-weight: 600;
}
.section-tagline em { font-style: italic; }
.section-heading {
  max-width: 760px;
  margin-bottom: 42px;
}
.section-heading--with-aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: none;
}
.section-heading--with-aside .section-heading__copy {
  flex: 1 1 auto;
  max-width: 760px;
}
.section-heading__aside {
  flex: 0 0 auto;
  width: 280px;
  height: auto;
}
@media (max-width: 1024px) {
  .section-heading__aside { width: 220px; }
}
@media (max-width: 768px) {
  .section-heading--with-aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .section-heading__aside { width: 220px; align-self: center; }
}
@media (max-width: 640px) {
  .section-heading__aside { width: 180px; }
}
.section-heading--dark h2,
.section-heading--dark p,
.section-heading--dark .section-kicker {
  color: #fff;
}
.section-heading--dark p { color: rgba(255,255,255,0.78); }
.section-heading--dark .section-kicker {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.insight-panel {
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 50px -36px rgba(15, 23, 42, 0.35);
}
.insight-panel__top {
  padding: 32px 24px;
  background:
    radial-gradient(circle at 30% 30%, rgba(246,160,36,0.2), transparent 60%),
    linear-gradient(135deg, var(--mc-red) 0%, #7a1518 100%);
}
.insight-panel__top img {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  filter: brightness(0) invert(1) opacity(0.92);
}
.insight-panel__body {
  display: grid;
  gap: 24px;
  padding: 30px;
}
.insight-panel__body strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 22px;
}
.insight-panel__body .insight-icon {
  width: 24px;
  height: 24px;
  color: var(--mc-red);
  flex-shrink: 0;
}
.insight-panel__body p {
  color: var(--ink-700);
  line-height: 1.8;
}

/* ---------- Feature cards (Pourquoi choisir) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.feature-card {
  position: relative;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--mc-red);
}
.feature-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mc-red-lightest);
  color: var(--mc-red);
  margin-bottom: 18px;
}
.feature-card__ico svg { width: 22px; height: 22px; }
.feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.feature-card p {
  margin-top: 10px;
  color: var(--ink-700);
  line-height: 1.7;
  font-size: 15px;
}

/* ---------- Services dark grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.service-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 32px 30px 30px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #16181d;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  transform: translateY(-2px);
  border-color: var(--mc-red);
}
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mc-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.service-card h3 {
  margin-top: 18px;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}
.service-card > p {
  margin-top: 10px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  font-size: 15px;
}
.service-card__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}
.service-card__split--single { grid-template-columns: 1fr; }
.service-card__split h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.service-card__split ul {
  display: grid;
  gap: 8px;
}
.service-card__split li {
  position: relative;
  padding-left: 16px;
  color: rgba(255,255,255,0.82);
  font-size: 13.5px;
  line-height: 1.55;
}
.service-card__split li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--mc-red);
}
.service-card__pin {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 22px;
}

/* ---------- Partner ---------- */
.partner-grid,
.form-section-grid,
.faq-grid {
  display: grid;
  gap: 44px;
  align-items: start;
}
.partner-grid { align-items: stretch; }
.partner-media { display: flex; flex-direction: column; }
.partner-media img { flex: 1; height: 100%; }
.partner-grid {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
}
.partner-media {
  position: relative;
}
.partner-media img {
  width: 100%;
  min-height: 560px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.partner-media__chip {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 18px;
  background: #fff;
  color: var(--gray-900);
  box-shadow: var(--shadow-lg);
}
.partner-media__chip strong {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--mc-red);
  line-height: 1;
}
.partner-media__chip span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  max-width: 200px;
  line-height: 1.45;
}
.partner-copy h2 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
.partner-copy p {
  margin-top: 18px;
  color: var(--ink-700);
  font-size: 17px;
  line-height: 1.9;
}
.partner-faq { margin-top: 28px; }
.partner-faq ul {
  display: grid;
  gap: 8px;
  padding: 0 24px 22px;
  margin: 0;
  list-style: none;
}
.partner-faq li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-700);
  line-height: 1.6;
}
.partner-faq li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mc-red);
}
.partner-copy .btn-primary { margin-top: 24px; }

/* ---------- FAQ ---------- */
.faq-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.faq-list {
  display: grid;
  gap: 14px;
}
.faq-list details {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 16px 32px -28px rgba(15,23,42,0.4);
  overflow: hidden;
}
.faq-list summary,
.legal-accordion summary {
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker,
.legal-accordion summary::-webkit-details-marker { display: none; }
.faq-list summary {
  position: relative;
  padding: 24px 56px 24px 24px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--gray-900);
}
.faq-list summary::after,
.legal-accordion summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 22px;
  font-size: 28px;
  line-height: 1;
  color: var(--mc-red);
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after,
.legal-accordion details[open] summary::after {
  transform: rotate(45deg);
}
.faq-list p {
  padding: 0 24px 24px;
  color: var(--ink-700);
  line-height: 1.85;
}
.faq-list p a { color: var(--mc-red); font-weight: 600; }

/* ---------- Legal ---------- */
.legal-shell .section-heading {
  margin-bottom: 34px;
}
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 22px;
}
.legal-card {
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow: 0 20px 40px -34px rgba(15,23,42,0.35);
}
.legal-card h3 {
  font-size: 24px;
  margin-bottom: 18px;
}
.legal-accordion {
  display: grid;
  gap: 12px;
}
.legal-accordion details {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: #f9fafc;
}
.legal-accordion summary {
  position: relative;
  padding: 18px 54px 18px 18px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}
.legal-accordion p {
  padding: 0 18px 18px;
  color: var(--ink-700);
  line-height: 1.8;
}
.legal-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.legal-list li {
  color: var(--ink-700);
  line-height: 1.7;
}
.legal-note {
  margin-top: 18px;
  color: var(--ink-500);
  font-size: 14px;
}

/* ---------- Form section (franchise-style) ---------- */
.section-form {
  background: #ececec;
}
/* Block variant — used on inner pages via the Gutenberg
   maycash/applicant-form block. Transparent so it blends with the page. */
.section-form--block {
  background: transparent;
  padding: 0;
}
.section-form--block > .container { padding-left: 0; padding-right: 0; }
.form-section-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.88fr);
}
.form-section-copy h2 {
  margin-top: 18px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
}
.form-section-copy > p {
  margin-top: 18px;
  color: var(--ink-700);
  font-size: 17px;
  line-height: 1.9;
}
.hero-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-700);
  font-weight: 600;
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 999px;
  box-shadow: 0 4px 14px -8px rgba(15,23,42,0.2);
}
.hero-meta svg {
  width: 14px;
  height: 14px;
  color: var(--mc-red);
}
.process-list {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}
.process-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 18px 30px -30px rgba(15,23,42,0.35);
}
.process-item strong {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--mc-red-lightest);
  color: var(--mc-red);
  font-family: var(--font-display);
  font-size: 18px;
}
.process-item h3 {
  font-size: 19px;
}
.process-item p {
  margin-top: 8px;
  color: var(--ink-700);
  line-height: 1.6;
}

.form-panel {
  position: sticky;
  top: 110px;
}
.form-card {
  padding: 32px;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow: 0 26px 46px -36px rgba(15,23,42,0.42);
}
.form-card + .form-card { margin-top: 16px; }

/* ---------- Form labels (monolingual since 1.6.0) ---------------------
   The form used to render FR and AR side-by-side via a 2-column grid;
   each label now emits only the active language, so we keep a simple
   inline layout. The :has() rule below restores the 2-column grid only
   if a legacy template still emits both [data-lang] spans inside one
   element — purely defensive, can be removed once all themes are
   migrated. */
.form-card .field-label .req,
.form-card .field-label .opt {
  margin-left: 4px;
}
.form-card .field-label .req { color: var(--mc-red, #d9171b); font-weight: 700; }
.form-card .field-label .opt { color: var(--ink-500, #64748b); font-weight: 500; }
html[dir="rtl"] .form-card .field-label .req,
html[dir="rtl"] .form-card .field-label .opt {
  margin-left: 0;
  margin-right: 4px;
}
/* Legacy bilingual fallback (only when an element still has BOTH spans). */
.form-card header h2:has([data-lang="fr"]):has([data-lang="ar"]),
.form-card header > p:has([data-lang="fr"]):has([data-lang="ar"]),
.form-card .field-label:has([data-lang="fr"]):has([data-lang="ar"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: baseline;
}
.form-card header h2 [data-lang="ar"],
.form-card header > p [data-lang="ar"],
.form-card .field-label [data-lang="ar"] {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-weight: 600;
}
.form-card header h2 {
  font-size: 24px;
  line-height: 1.3;
}
.form-card header > p {
  margin-top: 10px;
  color: var(--ink-700);
}

.form-success {
  display: none;
  text-align: center;
}
.form-success.show {
  display: block;
}
.form-success .icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--success-light);
  color: var(--success);
}
.form-success h3 { font-size: 26px; }
.form-success h3 [data-lang="ar"],
.form-success > p [data-lang="ar"] {
  display: block;
  margin-top: 6px;
  font-family: var(--font-arabic);
}
.form-success > p {
  margin-top: 14px;
  color: var(--ink-700);
  line-height: 1.7;
}
.success-actions { margin-top: 24px; }
.success-actions .btn [data-lang="fr"]::after { content: " · "; margin: 0 4px; opacity: 0.5; }
.success-actions .btn [data-lang="ar"] { font-family: var(--font-arabic); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.span-2 { grid-column: span 2; }
.city-combobox {
  position: relative;
}
.city-combobox .city-input {
  padding-right: 44px;
}
.combobox-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.city-combobox.is-open .combobox-toggle {
  color: var(--mc-red);
  transform: translateY(-50%) rotate(180deg);
}
.combobox-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: 260px;
  overflow: auto;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-lg);
  z-index: 12;
}
.combobox-options li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.combobox-options li:hover,
.combobox-options li.is-active {
  background: var(--mc-red-lightest);
  color: var(--mc-red);
}
.combobox-options li:hover .city-ar,
.combobox-options li.is-active .city-ar { color: var(--mc-red); }
.city-ar {
  color: var(--ink-500);
  direction: rtl;
  font-family: var(--font-arabic);
  font-size: 13px;
}

.form-actions {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

/* ---------- Consent: AR by default; toggle to FR ---------- */
.consent-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid var(--ink-200);
}
.consent-wrap.has-error {
  border-color: var(--error);
  background: var(--error-light);
}
.consent-wrap > .consent-check { width: 100%; }

.consent-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-700);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-display);
  align-self: flex-end;
}
.consent-lang-toggle:hover,
.consent-lang-toggle:focus-visible {
  color: var(--mc-red);
  border-color: var(--mc-red-lighter);
  background: var(--mc-red-lightest);
  outline: none;
}
.consent-lang-toggle svg { width: 12px; height: 12px; }

.consent-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.consent-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.consent-check .box {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink-300);
  background: #fff;
  color: transparent;
  transition: all 0.18s ease;
}
.consent-check input:checked + .box {
  border-color: var(--mc-red);
  background: var(--mc-red);
  color: #fff;
}
.consent-check .box svg { width: 14px; height: 14px; }
.consent-text {
  color: var(--ink-700);
  font-size: 13.5px;
  line-height: 1.85;
}
/* Show AR by default; FR when toggle activates */
.consent-text [data-lang="ar"] { display: block; }
.consent-text [data-lang="fr"] { display: none; }
.consent-wrap.show-fr .consent-text [data-lang="ar"] { display: none; }
.consent-wrap.show-fr .consent-text [data-lang="fr"] { display: block; }
.consent-text [data-lang="ar"] {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  line-height: 1.7;
}

.error-text {
  margin-top: 8px;
  color: var(--error);
  font-size: 13px;
  font-weight: 600;
}
#submitBtn.is-loading {
  opacity: 0.82;
  pointer-events: none;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline SVG sizing inside buttons (avoid SVGs growing to fill flex containers) */
.btn svg,
.btn .send {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Submit button stacked bilingual: FR (top) and AR (under) */
.btn-bilingual {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.btn-bilingual [data-lang="fr"] { font-family: var(--font-display); }
.btn-bilingual [data-lang="ar"] {
  font-family: var(--font-arabic);
  font-size: 0.78em;
  font-weight: 600;
  opacity: 0.92;
  margin-top: 2px;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 56px 0 24px;
  background:
    radial-gradient(circle at top right, rgba(217,23,27,0.18), transparent 30%),
    linear-gradient(180deg, #09090b 0%, #050507 100%);
  color: rgba(255,255,255,0.74);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.8fr;
  gap: 40px;
}
.footer-logo {
  width: 168px;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.site-footer h3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer p,
.site-footer li {
  line-height: 1.85;
  font-size: 14px;
}
.site-footer ul {
  display: grid;
  gap: 8px;
}
.site-footer a:hover { color: #fff; }

/* Social icons row under the footer description.
   Outline-circle style, brand-red on hover. URLs come from Rank Math. */
.footer-socials {
  display: flex !important;
  gap: 10px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.footer-socials li { line-height: 0; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.footer-social:hover {
  background: var(--mc-red);
  border-color: var(--mc-red);
  color: #fff;
  transform: translateY(-1px);
}
.footer-socials svg { display: block; }
.footer-base {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid,
  .section-grid--about,
  .partner-grid,
  .faq-grid,
  .legal-grid,
  .form-section-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .promo-band__inner { grid-template-columns: 1fr; gap: 32px; }
  .services-grid,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-panel {
    position: static;
  }
  .trust-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 22px;
  }
  .trust-strip__item:nth-child(3)::before { display: none; }
}

@media (max-width: 1100px) {
  .topbar__segments li { padding: 0 12px; font-size: 12px; }
  .nav-links > a { padding: 10px 14px; font-size: 14px; }
  .nav-actions { margin-left: 4px; padding-left: 10px; }
}

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-block;
  }
  .topbar__segments { gap: 0; }
  .topbar__segments li { padding: 0 10px; font-size: 11.5px; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  }
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-links > a + a::before { display: none; }
  .nav-links > a { padding: 12px 14px; }
  .nav-promo {
    background: var(--mc-orange);
    color: #fff !important;
    border-radius: 12px;
    margin-top: 6px;
  }
  .nav-promo:hover { color: #fff !important; background: #d97706; }
  .nav-actions {
    justify-content: center;
    margin-left: 0;
    margin-top: 6px;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(15,23,42,0.08);
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual { min-height: 280px; }
  .hero-visual img { max-height: 360px; }
  .hero-carousel__chrome { justify-content: center; flex-wrap: wrap; }
  .services-grid,
  .feature-grid,
  .form-grid,
  .service-card__split {
    grid-template-columns: 1fr;
  }
  .span-2 { grid-column: auto; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 78px; }
  .container {
    padding: 0 18px;
  }
  .nav-shell {
    min-height: 72px;
  }
  .brand img {
    width: 148px;
  }
  .hero-section {
    padding: 16px 0 64px;
  }
  .eyebrow,
  .section-kicker {
    min-height: 0;
    font-size: 16px;
    letter-spacing: 0.02em;
  }
  .section-copy h2,
  .section-heading h2,
  .partner-copy h2,
  .form-section-copy h2 {
    margin-top: 8px;
  }
  .hero-copy h1 {
    font-size: 28px;
  }
  .hero-lead,
  .section-copy p,
  .section-heading p,
  .partner-copy p,
  .form-section-copy > p {
    font-size: 16px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .section {
    padding: 64px 0;
  }
  .feature-card,
  .service-card,
  .legal-card,
  .form-card,
  .process-item {
    padding: 22px;
  }
  .partner-media img {
    min-height: 320px;
  }
  .process-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .process-item strong {
    width: 48px;
    height: 48px;
  }
  .trust-strip__grid {
    grid-template-columns: 1fr;
    padding: 14px 18px;
  }
  /* Group icon + text together at the inline-start instead of letting the
     icon strand on one edge with the text on the other (the mobile RTL gap).
     justify-content: flex-start packs them at the start in both directions;
     in RTL we drop the desktop row-reverse so the icon sits beside the text
     (icon at the right, text flowing left). */
  .trust-strip__item {
    padding: 10px 0;
    justify-content: flex-start;
    text-align: start;
  }
  html[dir="rtl"] .trust-strip__item {
    flex-direction: row;
    justify-content: flex-start;
  }
  .trust-strip__item > div { flex: 0 1 auto; }
  .trust-strip__item strong,
  .trust-strip__item span { text-align: start; }
  .trust-strip__item + .trust-strip__item::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .form-card header h2,
  .form-card .field-label,
  .form-card header > p {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .form-card header h2 [data-lang="ar"],
  .form-card .field-label [data-lang="ar"],
  .form-card header > p [data-lang="ar"] {
    text-align: right;
  }
  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Responsive polish ---------- */
@media (max-width: 960px) {
  .main-nav { padding: 10px 0; }
  .nav-shell {
    min-height: 60px;
    padding: 8px 14px;
    border-radius: 16px;
  }
  .main-nav.is-scrolled .nav-shell { padding: 8px 0; }
  .brand img { width: 132px; }
  .nav-toggle { margin-left: auto; }

  /* On mobile, force the burger to be solid red AND force display, since
     LiteSpeed / extension CSS sometimes overrode visibility in the past. */
  .nav-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mc-red) !important;
    border-color: var(--mc-red) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -6px rgba(227, 30, 26, 0.4);
    opacity: 1 !important;
    visibility: visible !important;
  }
  .nav-toggle span {
    background: #fff !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Same insurance for the logo — guarantee it renders. */
  .brand,
  .brand img {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Drop-shadow on logo so it always stands out too. */
  .main-nav.is-scrolled .brand {
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.15));
  }
  .nav-icon-btn { width: 38px; height: 38px; }
  .hero-section { padding: 16px 0 56px; }
  .hero-copy h1 { font-size: clamp(30px, 6vw, 44px); }
  .hero-eyebrow { font-size: 12px; margin-bottom: 14px; }
  .hero-lead { font-size: 16px; line-height: 1.6; }
  .section { padding: 72px 0; }
  .section-copy h2,
  .section-heading h2 { font-size: clamp(22px, 3.6vw, 30px); }
}

@media (max-width: 640px) {
  .topbar { font-size: 12px; }
  .topbar__inner {
    flex-wrap: nowrap;
    gap: 12px;
    overflow: hidden;
  }
  .topbar__segments {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar__segments::-webkit-scrollbar { display: none; }
  .topbar__segments li { padding: 0 8px; font-size: 11px; white-space: nowrap; }
  .topbar__lang-btn { font-size: 12px; }
  .topbar__lang-btn span { display: none; }

  .nav-shell { min-height: 56px; padding: 6px 12px; }
  .brand img { width: 120px; }

  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-carousel__dots button { width: 10px; height: 10px; }
  .hero-carousel__dots button.is-active { width: 30px; }

  .insight-panel__body { padding: 22px; gap: 18px; }
  .insight-panel__body strong { font-size: 18px; }

  .feature-card { padding: 22px; }
  .feature-card h3 { font-size: 18px; }
  .service-card { padding: 24px 22px; }
  .service-card h3 { font-size: 18px; }
  .service-card__split { grid-template-columns: 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .page-loader,
  .nav-links,
  .spinner {
    transition: none !important;
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Chatbot ---------- */
.chatbot-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 80;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 0;
  background: var(--mc-red);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(217,23,27,0.55), 0 4px 12px -6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.chatbot-fab:hover { background: var(--mc-red-dark); transform: translateY(-2px); }
.chatbot-fab svg { width: 26px; height: 26px; }
.chatbot-fab[aria-expanded="true"] { transform: scale(0.92); }

.chatbot-panel {
  position: fixed;
  bottom: 92px;
  right: 22px;
  /* Higher than .chatbot-fab (z-index 80) so the fab is covered by the
     panel when open — the `:has()` hide rule below works on modern
     browsers but z-index covers older ones too. */
  z-index: 90;
  width: 360px;
  max-width: calc(100vw - 28px);
  height: 520px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 24px 50px -20px rgba(15,23,42,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  overflow: hidden;
}
.chatbot-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--mc-red);
  color: #fff;
}
.chatbot-header strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.chatbot-header span {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}
.chatbot-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chatbot-close:hover { background: rgba(255,255,255,0.3); }
.chatbot-close svg { width: 16px; height: 16px; }

.chatbot-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  background: #f8f9fc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chatbot-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.chatbot-msg p { margin: 0; }
.chatbot-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--gray-900);
  border: 1px solid rgba(15,23,42,0.06);
  border-bottom-left-radius: 4px;
}
.chatbot-msg--user {
  align-self: flex-end;
  background: var(--mc-red);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* "Typing…" indicator — three dots bouncing up and down to mimic the
   messaging-app pattern. Sits in a regular bot bubble so colors / corners
   match other bot messages. */
.chatbot-msg--typing { padding: 12px 14px; min-height: 32px; }
.chatbot-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chatbot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  animation: chatbot-typing 1.25s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.18s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatbot-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chatbot-typing span { animation: none; opacity: 0.6; }
}

/* Suggestion chips shown when no confident Q&A match is found.
   Stacked vertically inside the bot bubble. "Autre" gets a muted look so
   the primary action (pick a guess) is visually dominant. */
.chatbot-msg--suggest p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-700, #334155); }
.chatbot-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chatbot-suggest-btn {
  appearance: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mc-red, #e31e1a);
  text-align: start;
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.chatbot-suggest-btn:hover {
  background: #fff;
  border-color: var(--mc-red, #e31e1a);
}
.chatbot-suggest-btn:active { transform: translateY(1px); }
.chatbot-suggest-btn--other {
  color: var(--ink-500, #64748b);
  font-weight: 500;
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  margin-top: 2px;
  padding: 6px 12px;
}
.chatbot-suggest-btn--other:hover {
  background: transparent;
  color: var(--ink-700, #334155);
}
.chatbot-msg__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mc-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.chatbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chatbot-suggestions button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(217,23,27,0.25);
  background: #fff;
  color: var(--mc-red);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chatbot-suggestions button:hover {
  background: var(--mc-red-lightest);
  border-color: var(--mc-red);
}
.chatbot-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: #fff;
}
.chatbot-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: #f8f9fc;
  /* font-size MUST be >= 16px to prevent iOS Safari's auto-zoom-on-focus
     behaviour (which scales the whole page up when the keyboard opens). */
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chatbot-form input:focus {
  border-color: var(--mc-red);
  background: #fff;
}
.chatbot-form button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--mc-red);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.chatbot-form button:hover { background: var(--mc-red-dark); }
.chatbot-form button svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .chatbot-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
  .chatbot-fab svg { width: 22px; height: 22px; }

  /* Fullscreen chatbot on mobile — fills the entire viewport so iOS Safari
     can't cause any zoom or layout-shift weirdness when the keyboard
     opens. With font-size: 16px on the input (above), iOS no longer
     auto-zooms; with full width/height, there's also no surrounding page
     visible to appear "zoomed in" relative to the chat. */
  .chatbot-panel {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Use explicit viewport units AND !important — since body now has
       overflow-x: clip (the RTL overflow fix), a `%` width on fixed
       descendants can resolve against body's containing block instead
       of viewport on iOS Safari, leaving a small strip on the side. */
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transform: translateY(20px);
  }
  .chatbot-panel.is-open {
    transform: translateY(0);
  }
  /* No backdrop needed — the chat covers the whole screen. */

  /* Hide the floating chat button while the chat is open on mobile —
     it has z-index 80 which sits ON TOP of the fullscreen panel and
     was covering the send button. Users can close via the × in the
     chat header instead. */
  body:has(.chatbot-panel.is-open) .chatbot-fab {
    display: none;
  }
}

/* ---------- Generic Page template (page.php) ---------- */
.page-section { padding: 40px 0 96px; }

/* Container-width hero banner with rounded corners. The wrap pulls the
   hero up so the sticky nav floats *over* its top edge; the inner
   .page-hero is constrained to the same width as the .nav-shell so the
   nav sits perfectly on top of the curved image. */
.page-hero-wrap {
  position: relative;
  margin-top: 8px;
  z-index: 0;
}
.page-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 42vw, 480px);
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.08);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-section--with-hero { padding-top: 40px; }

@media (max-width: 720px) {
  .page-hero-wrap { margin-top: 6px; }
  .page-hero { height: 240px; border-radius: 16px; }
  .page-section--with-hero { padding-top: 32px; }
}
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 56px;
  align-items: start;
}
.page-grid__copy h1 {
  margin: 8px 0 28px;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.page-grid__copy .entry-content {
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.8;
}
.page-grid__copy .entry-content > * { margin: 0 0 18px; }
.page-grid__copy .entry-content > *:last-child { margin-bottom: 0; }
.page-grid__copy .entry-content p { margin: 0 0 18px; }
.page-grid__copy .entry-content h2 {
  margin: 32px 0 16px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--gray-900);
}
.page-grid__copy .entry-content h3 {
  margin: 24px 0 12px;
  font-size: 19px;
  color: var(--gray-900);
}
.page-grid__copy .entry-content ul,
.page-grid__copy .entry-content ol { margin: 0 0 18px 22px; }
.page-grid__copy .entry-content li { margin: 0 0 8px; }
/* Inline content links — scoped so it doesn't bleed into block-level UI
   like buttons, cover overlays, or pullquote citations. */
.page-grid__copy .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.btn):not(.btn-brochure) {
  color: var(--mc-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.page-grid__copy .entry-content blockquote {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: var(--ink-100);
  border-radius: 12px;
  font-style: italic;
  color: var(--ink-700);
}
.page-grid__copy .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 12px 0;
}

.page-grid__media img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.page-grid__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-300);
}
.page-grid__placeholder svg { width: 64px; height: 64px; }
.page-grid__placeholder span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Full-width variant when no side image is set in the page admin */
.page-grid--full {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .page-section { padding: 28px 0 64px; }
  .page-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-grid__media { order: -1; max-width: 480px; }
  .page-grid__placeholder { aspect-ratio: 16 / 10; }
}

/* ---------- Gutenberg core blocks — match May Cash design tokens ---------- */
.page-grid__copy .entry-content .wp-block-button { margin: 8px 0; }
.page-grid__copy .entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}

/* Primary button — mirrors .btn-primary from design-system.css */
.page-grid__copy .entry-content .wp-block-button__link,
.page-grid__copy .entry-content .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 12px;
  border: 1.5px solid var(--mc-red);
  background: var(--mc-red);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease);
}
.page-grid__copy .entry-content .wp-block-button__link:hover,
.page-grid__copy .entry-content .wp-element-button:hover {
  background: var(--mc-red-dark);
  border-color: var(--mc-red-dark);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}
.page-grid__copy .entry-content .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--mc-red-lightest);
}

/* Outline button style (Gutenberg "is-style-outline") */
.page-grid__copy .entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: #fff;
  color: var(--gray-900);
  border-color: var(--gray-200);
}
.page-grid__copy .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff;
  border-color: var(--mc-red);
  color: var(--mc-red);
}

/* Cover block — soften corners + spacing */
.page-grid__copy .entry-content .wp-block-cover,
.page-grid__copy .entry-content .wp-block-cover-image {
  border-radius: 22px;
  overflow: hidden;
  margin: 16px 0;
}
.page-grid__copy .entry-content .wp-block-cover .wp-block-cover__inner-container > * {
  color: #fff;
}

/* Image / figure blocks */
.page-grid__copy .entry-content .wp-block-image img,
.page-grid__copy .entry-content figure img {
  border-radius: 16px;
  max-width: 100%;
  height: auto;
}
.page-grid__copy .entry-content figcaption {
  color: var(--ink-500, #64748b);
  font-size: 13px;
  margin-top: 8px;
  text-align: center;
}

/* Quote + Pullquote */
.page-grid__copy .entry-content .wp-block-quote {
  position: relative;
  margin: 24px 0;
  padding: 28px 26px 22px 60px;
  background: var(--mc-red-lightest);
  border-radius: 16px;
  color: var(--gray-900);
  font-style: italic;
}
.page-grid__copy .entry-content .wp-block-quote::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--mc-red);
  font-style: normal;
}
.page-grid__copy .entry-content .wp-block-quote cite,
.page-grid__copy .entry-content .wp-block-pullquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.page-grid__copy .entry-content .wp-block-pullquote {
  margin: 28px 0;
  padding: 24px;
  border: 0;
  border-top: 2px solid var(--mc-red);
  border-bottom: 2px solid var(--mc-red);
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--gray-900);
}

/* Separator */
.page-grid__copy .entry-content .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--gray-200, #e2e8f0);
  margin: 32px 0;
}
.page-grid__copy .entry-content .wp-block-separator.is-style-wide { background: var(--gray-200); }
.page-grid__copy .entry-content .wp-block-separator.is-style-dots {
  background: none;
  text-align: center;
  height: auto;
  color: var(--mc-red);
}
.page-grid__copy .entry-content .wp-block-separator.is-style-dots::before {
  content: "···";
  letter-spacing: 1em;
  font-size: 20px;
}

/* Lists already inherit from .entry-content ul/ol */
.page-grid__copy .entry-content .wp-block-list { padding-left: 0; }

/* Table */
.page-grid__copy .entry-content .wp-block-table {
  margin: 24px 0;
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 12px 28px -22px rgba(15,23,42,0.22);
  background: #fff;
}
.page-grid__copy .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  line-height: 1.5;
}
.page-grid__copy .entry-content .wp-block-table thead th {
  padding: 14px 18px;
  background: var(--mc-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  border: 0;
}
.page-grid__copy .entry-content .wp-block-table thead th:first-child { border-top-left-radius: 16px; }
.page-grid__copy .entry-content .wp-block-table thead th:last-child  { border-top-right-radius: 16px; }
.page-grid__copy .entry-content .wp-block-table tbody td {
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--gray-200, #e2e8f0);
  color: var(--gray-800, #1f2937);
  vertical-align: top;
}
.page-grid__copy .entry-content .wp-block-table tbody tr:nth-child(odd) td {
  background: #fbfbfd;
}
.page-grid__copy .entry-content .wp-block-table tbody tr:hover td {
  background: var(--mc-red-lightest);
}
.page-grid__copy .entry-content .wp-block-table tbody td:first-child {
  font-weight: 600;
  color: var(--gray-900, #0f172a);
  white-space: nowrap;
}
.page-grid__copy .entry-content .wp-block-table figcaption {
  margin-top: 10px;
}
.page-grid__copy .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
  background: var(--mc-red-lightest);
}

/* Columns + Group: ensure spacing inside content */
.page-grid__copy .entry-content .wp-block-columns { gap: 24px; margin: 0 0 18px; }
.page-grid__copy .entry-content .wp-block-group { margin: 0 0 18px; }

/* Code */
.page-grid__copy .entry-content .wp-block-code,
.page-grid__copy .entry-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 13px;
  overflow-x: auto;
}
.page-grid__copy .entry-content code {
  background: var(--ink-100, #f1f5f9);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}
.page-grid__copy .entry-content pre code { background: transparent; padding: 0; }

/* Nav background coupling
   - Default: white (set on .main-nav itself).
   - Home page (front-page.php with .site-header gray): nav matches gray.
   - Page containing a hero block with hasBackground=ON: nav matches gray.
   - Page containing a hero block with hasBackground=OFF: nav transparent. */
body.home .main-nav,
body.mc-hero-bg-on .main-nav {
  background: #f7f7f7;
}

/* ---------- Nav dropdown (one-level submenu) ---------- */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-link--parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link--parent svg {
  transition: transform 0.2s ease;
}
.nav-dropdown:hover .nav-link--parent svg,
.nav-dropdown:focus-within .nav-link--parent svg {
  transform: rotate(180deg);
}
.nav-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 22px 50px -22px rgba(15, 23, 42, 0.25);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 80;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-sublink {
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--gray-900);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-sublink:hover,
.nav-sublink:focus-visible,
.nav-sublink.is-active {
  background: rgba(217, 23, 27, 0.08);
  color: var(--mc-red);
}

@media (max-width: 960px) {
  .nav-dropdown { width: 100%; flex-direction: column; align-items: stretch; }
  .nav-dropdown__panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 18px;
    margin-top: 4px;
  }
  .nav-link--parent svg { display: none; }
}

/* ---------- Brochure CTA (red strip before footer) ---------- */
.brochure-cta {
  background: linear-gradient(135deg, var(--mc-red) 0%, var(--mc-red-dark) 100%);
  color: #fff;
  padding: 72px 0;
  text-align: center;
}
.brochure-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.brochure-cta__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.brochure-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.brochure-cta p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  max-width: 560px;
}
.brochure-cta .btn-brochure {
  margin-top: 12px;
  background: #fff;
  color: var(--mc-red);
  padding: 14px 28px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35);
  text-decoration: none;
}
.brochure-cta .btn-brochure:hover {
  transform: translateY(-2px);
  background: #fff;
  color: var(--mc-red-dark);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,0.45);
}
.brochure-cta .btn-brochure svg { width: 18px; height: 18px; }
.lang-ar .brochure-cta h2,
.lang-ar .brochure-cta p,
.lang-ar .brochure-cta__kicker,
.lang-ar .brochure-cta .btn-brochure {
  font-family: var(--font-arabic, "Cairo", system-ui);
}
@media (max-width: 768px) {
  .brochure-cta { padding: 56px 0; }
  .brochure-cta h2 { font-size: 26px; }
}

/* ---------- Gutenberg core blocks — May Cash branded styles ----------
   Applies to core blocks (Paragraph, Heading, Buttons, List, Image,
   Columns, Group, Separator) when they appear between our custom blocks
   on a page. Ensures typography + spacing + colors match the design. */

/* Heading hierarchy */
.wp-block-heading {
  font-family: var(--font-display, "Plus Jakarta Sans", system-ui);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink-900, #0f172a);
  margin: 0 0 16px;
}
h1.wp-block-heading { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.02em; }
h2.wp-block-heading { font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.01em; }
h3.wp-block-heading { font-size: 22px; }
h4.wp-block-heading { font-size: 18px; }

/* Paragraph */
.wp-block-paragraph,
p.has-medium-font-size {
  font-family: var(--font-body, Inter, system-ui);
  line-height: 1.65;
  color: var(--ink-700, #334155);
  margin: 0 0 18px;
}
.wp-block-paragraph.has-large-font-size { font-size: 20px; line-height: 1.55; }

/* Buttons (core button block) */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  background: var(--mc-red, #D9171B) !important;
  color: #fff !important;
  border: 0;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: var(--font-display, system-ui);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--mc-red-dark, #9B1C1F) !important;
  transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
  background: transparent !important;
  color: var(--mc-red, #D9171B) !important;
  border: 1.5px solid var(--mc-red, #D9171B);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
  background: var(--mc-red-lightest, #FDF0F0) !important;
}

/* Lists */
.wp-block-list,
ul.wp-block-list,
ol.wp-block-list {
  font-family: var(--font-body, Inter, system-ui);
  color: var(--ink-700, #334155);
  line-height: 1.7;
  padding-left: 20px;
  margin: 0 0 18px;
}
.wp-block-list li { margin: 0 0 6px; }
.wp-block-list li::marker { color: var(--mc-red, #D9171B); font-weight: 700; }

/* Images */
.wp-block-image img {
  border-radius: 14px;
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.2);
  max-width: 100%;
  height: auto;
}
.wp-block-image figcaption {
  font-size: 13px;
  color: var(--ink-500, #64748b);
  font-style: italic;
  margin-top: 8px;
}

/* Columns */
.wp-block-columns { gap: 28px; margin: 0 0 28px; }
.wp-block-column > *:first-child { margin-top: 0; }
.wp-block-column > *:last-child { margin-bottom: 0; }

/* Group / Cover (basic theming so layouts don't look out of place) */
.wp-block-group { padding: 0; }
.wp-block-cover {
  border-radius: 18px;
  overflow: hidden;
  min-height: 240px;
}
.wp-block-cover .wp-block-cover__inner-container { padding: 28px; }

/* Separator */
.wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--gray-200, #e2e8f0);
  margin: 32px 0;
  max-width: 100%;
}
.wp-block-separator.is-style-wide { max-width: 100%; }
.wp-block-separator.is-style-dots {
  background: none;
  height: auto;
  text-align: center;
}
.wp-block-separator.is-style-dots::before {
  content: '···';
  color: var(--mc-red, #D9171B);
  letter-spacing: 0.6em;
  font-size: 20px;
}

/* Quote */
.wp-block-quote {
  border-left: 3px solid var(--mc-red, #D9171B);
  padding: 8px 18px;
  margin: 0 0 18px;
  font-style: italic;
  color: var(--ink-700, #334155);
}
.wp-block-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-500, #64748b);
  margin-top: 8px;
}

/* Tables */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px;
}
.wp-block-table th,
.wp-block-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
  text-align: left;
}
.wp-block-table th {
  background: var(--gray-50, #f8fafc);
  font-family: var(--font-display, system-ui);
  font-weight: 700;
  color: var(--ink-900, #0f172a);
}

/* Constrain core blocks to the site .container (1200px) when they sit at
   the top level of a block-driven page or inside .entry-content.
   Tag-level selectors (body > p, body > h2, …) catch core blocks even
   when they don't carry a wp-block-* class (paragraph and other blocks
   often render as bare <p>, <hr>, <table>, etc.). Our custom maycash
   blocks use <section class="hero-section/trust-strip/…"> at the top
   level — they're excluded here so they stay full-bleed. */
.entry-content > .wp-block-heading,
.entry-content > .wp-block-paragraph,
.entry-content > .wp-block-list,
.entry-content > .wp-block-image,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-pullquote,
.entry-content > .wp-block-table,
.entry-content > .wp-block-separator,
.entry-content > .wp-block-spacer,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-media-text,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-verse,
.entry-content > .wp-block-code,
.entry-content > .wp-block-preformatted,
.entry-content > .wp-block-details,
.entry-content > .wp-block-search,
.entry-content > .wp-block-latest-posts,
.entry-content > .wp-block-page-list,
.entry-content > .wp-block-pages-list,
.entry-content > .wp-block-categories,
.entry-content > .wp-block-categories-list,
.entry-content > .wp-block-archives,
.entry-content > .wp-block-archives-list,
.entry-content > .wp-block-tag-cloud,
.entry-content > .wp-block-calendar,
.entry-content > .wp-block-social-links,
.entry-content > .wp-block-html,
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > ul:not([class*="hero-"]):not([class*="trust-"]):not([class*="topbar"]):not([class*="footer"]),
.entry-content > ol,
.entry-content > figure,
.entry-content > pre,
.entry-content > details,
.entry-content > blockquote,
.entry-content > hr,
.entry-content > table,
body > .wp-block-heading,
body > .wp-block-paragraph,
body > .wp-block-list,
body > .wp-block-image,
body > .wp-block-buttons,
body > .wp-block-quote,
body > .wp-block-pullquote,
body > .wp-block-table,
body > .wp-block-separator,
body > .wp-block-spacer,
body > .wp-block-columns,
body > .wp-block-group,
body > .wp-block-cover,
body > .wp-block-gallery,
body > .wp-block-media-text,
body > .wp-block-embed,
body > .wp-block-verse,
body > .wp-block-code,
body > .wp-block-preformatted,
body > .wp-block-details,
body > .wp-block-search,
body > .wp-block-latest-posts,
body > .wp-block-page-list,
body > .wp-block-pages-list,
body > .wp-block-categories,
body > .wp-block-categories-list,
body > .wp-block-archives,
body > .wp-block-archives-list,
body > .wp-block-tag-cloud,
body > .wp-block-calendar,
body > .wp-block-social-links,
body > .wp-block-html,
body > p,
body > h1,
body > h2,
body > h3,
body > h4,
body > h5,
body > h6,
body > ul:not([class*="hero-"]):not([class*="trust-"]):not([class*="topbar"]):not([class*="footer"]):not([class*="social"]),
body > ol,
body > figure,
body > pre,
body > details,
body > blockquote,
body > hr,
body > table {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Block-driven page: breathing room between the floating nav and the
   first content block (whatever it is). */
.main-nav + .wp-block-heading,
.main-nav + .wp-block-paragraph,
.main-nav + .wp-block-cover,
.main-nav + .wp-block-group,
.main-nav + .wp-block-columns,
.main-nav + .wp-block-image,
.main-nav + .wp-block-media-text,
.main-nav + section.hero-section { padding-top: 40px; }

/* ---------- Widgets: search ---------- */
.wp-block-search { margin: 0 auto 24px; }
.wp-block-search .wp-block-search__label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500, #64748b);
  margin-bottom: 8px;
}
.wp-block-search .wp-block-search__inside-wrapper {
  display: flex;
  gap: 8px;
  max-width: 520px;
}
.wp-block-search .wp-block-search__input {
  flex: 1;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.wp-block-search .wp-block-search__input:focus {
  border-color: var(--mc-red, #D9171B);
  box-shadow: 0 0 0 3px rgba(217, 23, 27, 0.12);
}
.wp-block-search .wp-block-search__button {
  background: var(--mc-red, #D9171B);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-display, system-ui);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.wp-block-search .wp-block-search__button:hover {
  background: var(--mc-red-dark, #9B1C1F);
}

/* ---------- Widgets: list-style blocks (latest-posts, page-list, categories, archives) ---------- */
.wp-block-latest-posts,
.wp-block-page-list,
.wp-block-pages-list,
.wp-block-categories,
.wp-block-categories-list,
.wp-block-archives,
.wp-block-archives-list {
  padding-left: 0;
  list-style: none;
  margin: 0 auto 24px;
  font-family: var(--font-body, Inter, system-ui);
}
.wp-block-latest-posts > li,
.wp-block-page-list > li,
.wp-block-pages-list > li,
.wp-block-categories > li,
.wp-block-categories-list > li,
.wp-block-archives > li,
.wp-block-archives-list > li {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wp-block-latest-posts > li:last-child,
.wp-block-page-list > li:last-child,
.wp-block-pages-list > li:last-child,
.wp-block-categories > li:last-child,
.wp-block-categories-list > li:last-child,
.wp-block-archives > li:last-child,
.wp-block-archives-list > li:last-child { border-bottom: 0; }
.wp-block-latest-posts > li a,
.wp-block-page-list > li a,
.wp-block-pages-list > li a,
.wp-block-categories > li a,
.wp-block-categories-list > li a,
.wp-block-archives > li a,
.wp-block-archives-list > li a {
  color: var(--ink-900, #0f172a);
  text-decoration: none;
  font-weight: 600;
}
.wp-block-latest-posts > li a:hover,
.wp-block-page-list > li a:hover,
.wp-block-pages-list > li a:hover,
.wp-block-categories > li a:hover,
.wp-block-categories-list > li a:hover,
.wp-block-archives > li a:hover,
.wp-block-archives-list > li a:hover { color: var(--mc-red, #D9171B); }
.wp-block-latest-posts__post-date {
  font-size: 12px;
  color: var(--ink-500, #64748b);
}

/* ---------- Tag cloud ---------- */
.wp-block-tag-cloud { margin: 0 auto 24px; line-height: 2.4; }
.wp-block-tag-cloud a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--gray-100, #f1f5f9);
  color: var(--ink-700, #334155) !important;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 600;
  text-decoration: none;
  margin: 0 4px 4px 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-tag-cloud a:hover {
  background: var(--mc-red-lightest, #FDF0F0);
  color: var(--mc-red, #D9171B) !important;
}

/* ---------- Calendar ---------- */
.wp-block-calendar { margin: 0 auto 24px; max-width: 520px; }
.wp-block-calendar table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body, Inter, system-ui);
  font-size: 13px;
}
.wp-block-calendar caption {
  font-weight: 700;
  padding: 10px 0;
  color: var(--ink-700, #334155);
}
.wp-block-calendar th {
  background: var(--gray-50, #f8fafc);
  padding: 8px;
  font-weight: 700;
  color: var(--ink-500, #64748b);
  text-align: center;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
}
.wp-block-calendar td {
  padding: 8px;
  text-align: center;
  border: 1px solid var(--gray-100, #f1f5f9);
}
.wp-block-calendar tfoot td {
  background: var(--gray-50, #f8fafc);
  border: 0;
  padding-top: 10px;
}
.wp-block-calendar td#today {
  background: var(--mc-red, #D9171B);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
}
.wp-block-calendar a {
  color: var(--mc-red, #D9171B);
  text-decoration: underline;
}

/* ---------- Social links ---------- */
.wp-block-social-links {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 24px;
}
.wp-block-social-links .wp-social-link {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--gray-100, #f1f5f9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.wp-block-social-links .wp-social-link a {
  color: var(--ink-700, #334155);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wp-block-social-links .wp-social-link a svg { width: 18px; height: 18px; fill: currentColor; }
.wp-block-social-links .wp-social-link:hover {
  background: var(--mc-red, #D9171B);
  transform: translateY(-1px);
}
.wp-block-social-links .wp-social-link:hover a { color: #fff; }

/* ---------- Details (collapsible) ---------- */
.wp-block-details {
  background: #fff;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 12px;
  padding: 4px 0;
  margin: 0 auto 18px;
}
.wp-block-details > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  font-family: var(--font-display, system-ui);
  color: var(--ink-900, #0f172a);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wp-block-details > summary::marker,
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: '+';
  font-size: 18px;
  color: var(--mc-red, #D9171B);
  font-weight: 700;
  transition: transform 0.2s ease;
}
.wp-block-details[open] > summary::after { content: '−'; }
.wp-block-details > p { padding: 0 18px 14px; margin: 0; }

/* ---------- Pullquote ---------- */
.wp-block-pullquote {
  margin: 0 auto 24px;
  padding: 28px 24px;
  border-top: 3px solid var(--mc-red, #D9171B);
  border-bottom: 3px solid var(--mc-red, #D9171B);
  text-align: center;
}
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-pullquote p {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  font-family: var(--font-display, system-ui);
  line-height: 1.35;
  color: var(--ink-900, #0f172a);
  margin: 0 0 12px;
}
.wp-block-pullquote cite {
  font-size: 13px;
  color: var(--mc-red, #D9171B);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Verse / Code / Preformatted ---------- */
.wp-block-verse,
.wp-block-code,
.wp-block-preformatted {
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-700, #334155);
  margin: 0 auto 18px;
  white-space: pre-wrap;
}
.wp-block-code { background: #0f172a; color: #e2e8f0; }
.wp-block-code code { background: transparent; color: inherit; padding: 0; }
.wp-block-verse { font-family: var(--font-body, Inter, system-ui); }

/* ---------- Gallery — center captions, tidy spacing ---------- */
.wp-block-gallery {
  gap: 14px;
  margin: 0 auto 24px;
}
.wp-block-gallery img { border-radius: 12px; }

/* ---------- Media & Text — vertical center, clip image ---------- */
.wp-block-media-text {
  margin: 0 auto 24px;
  gap: 32px;
  align-items: center;
}
.wp-block-media-text .wp-block-media-text__media img {
  border-radius: 14px;
  box-shadow: 0 12px 32px -16px rgba(15,23,42,0.2);
}

/* ---------- Cover — sensible defaults ---------- */
.wp-block-cover {
  margin: 0 auto 24px;
}

/* ---------- Group with background — pad inside so content isn't flush to the edge ---------- */
.wp-block-group.has-background {
  padding: 28px;
  border-radius: 14px;
}

/* ---------- Embed (YouTube etc.) — center + radius ---------- */
.wp-block-embed { margin: 0 auto 24px; }
.wp-block-embed iframe { border-radius: 12px; }

/* ---------- Custom HTML — give the editor a hint ---------- */
.wp-block-html { margin: 0 auto 24px; }

/* ---------- Spacer — keep its height behaviour, just center ---------- */
.wp-block-spacer { margin-left: auto; margin-right: auto; }

/* RTL: lists keep marker on the right; left border on quote flips */
html[dir="rtl"] .wp-block-list { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .wp-block-quote { border-left: 0; border-right: 3px solid var(--mc-red, #D9171B); }
html[dir="rtl"] .wp-block-table th,
html[dir="rtl"] .wp-block-table td { text-align: right; }

/* ---------- Optional background toggle (block attribute) ----------
   Admins can hide the section background per-instance via the block
   inspector. Removes the wrapper bg, the white card, the shadow, and
   the contrasting border so the section blends with the page bg. */
.trust-strip--transparent {
  background: transparent;
}
.trust-strip--transparent .trust-strip__grid {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 8px 0;
}
/* Hero block when inserted on a regular page: --has-bg paints the same
   light-gray background that .site-header gives the hero on the home page,
   so a block-page hero is visually identical to the home-page hero.
   Without the modifier (toggle off), the hero is transparent. */
.hero-section--has-bg {
  background: #f7f7f7;
}

/* Couple the floating main-nav to the hero's background.
   - .mc-hero-bg-on  → nav keeps its default #f7f7f7 (matches hero).
   - .mc-hero-bg-off → nav becomes transparent so it blends with whatever
     sits below it on a page where the hero has no background. */
body.mc-hero-bg-off .main-nav { background: transparent; }
body.mc-hero-bg-off .main-nav.is-scrolled { background: rgba(255,255,255,0.92); }

/* ---------- Page banner (maycash/page-banner block) ----------
   Used at the top of inner pages (À propos, Services détail, etc.).
   Same visual language as the hero carousel: gray bg, two-column
   grid (copy + visual), red accent on the title. Adds a staggered
   fade-up animation on load. */
.page-banner { position: relative; overflow: hidden; }
.page-banner--has-bg { background: #f7f7f7; }
.page-banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 56px;
  align-items: center;
}
/* Type sizes match the carousel exactly: same eyebrow, h1, sub, and lead
   ramp so a banner placed above a carousel reads as the same visual scale. */
.page-banner__copy { display: flex; flex-direction: column; }
.page-banner__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-red, #D9171B);
  letter-spacing: 0.02em;
}
.page-banner__title {
  margin: 0;
  font-family: var(--font-display, "Plus Jakarta Sans", system-ui);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--gray-900, #0f172a);
}
.page-banner__title .text-accent { color: var(--mc-red, #D9171B); }
.page-banner__sub {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--ink-500, #64748b);
}
.page-banner__lead {
  margin: 22px 0 0;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700, #334155);
}
/* When `showImage` is off the section becomes a single full-width text column
   (max-width caps long lines, centered for visual balance). Without the image
   creating natural vertical space, we add explicit top/bottom padding so the
   text isn't flush against the next section or the section above. */
.page-banner--no-image { padding: 64px 0 80px; }
.page-banner--no-image .page-banner__grid {
  grid-template-columns: 1fr;
}
.page-banner--no-image .page-banner__copy {
  max-width: 1080px;
  margin-inline: auto;
}
/* The default .page-banner__lead has max-width: 600px because it sits next
   to a wide image column. Without the image, that cap makes the lead look
   cramped — let it span the full copy width like AR does. */
.page-banner--no-image .page-banner__lead { max-width: none; }
.page-banner--no-image .page-banner__title,
.page-banner--no-image .page-banner__sub { max-width: none; }
@media (max-width: 768px) {
  .page-banner--no-image { padding: 40px 0 56px; }
}

/* Optional CTA button below the lead. Reuses the .btn / .btn-primary tokens
   already used elsewhere on the site (hero, brochure CTA, etc.). */
.page-banner__cta { margin: 24px 0 0; }
.page-banner__visual { display: flex; justify-content: center; align-items: center; }
.page-banner__visual img {
  max-width: 100%;
  height: auto;
}

/* ----- Stagger fade-up animation -----
   data-banner-anim="1..4" controls the order. Honors reduced-motion. */
@keyframes maycash-banner-rise {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.page-banner [data-banner-anim] {
  opacity: 0;
  animation: maycash-banner-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.page-banner [data-banner-anim="1"] { animation-delay: 0.05s; }
.page-banner [data-banner-anim="2"] { animation-delay: 0.20s; }
.page-banner [data-banner-anim="3"] { animation-delay: 0.40s; }
.page-banner [data-banner-anim="4"] { animation-delay: 0.30s; animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .page-banner [data-banner-anim] {
    animation: none;
    opacity: 1;
  }
}

/* Responsive: stack on small screens — sizes match carousel mobile. */
@media (max-width: 768px) {
  .page-banner { padding: 36px 0 44px; }
  .page-banner__grid { grid-template-columns: 1fr; gap: 28px; }
  .page-banner__visual { order: -1; max-width: 360px; margin: 0 auto; }
  .page-banner__title { font-size: clamp(30px, 6vw, 44px); }
  .page-banner__eyebrow { font-size: 12px; margin-bottom: 14px; }
  .page-banner__lead { font-size: 16px; line-height: 1.6; }
}

/* ---- Optional zellige (zalij) motif ----
   When `showMotif` is on, a decorative geometric pattern sits behind
   the image side at low opacity. CSS var --mc-motif holds the URL so
   the renderer can swap it without changing the stylesheet. */
.page-banner__motif {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 56%);
  pointer-events: none;
  background-image: var(--mc-motif);
  background-size: 280px 280px;
  background-repeat: repeat;
  background-position: center;
  /* Final opacity — kept very subtle. The motif also has data-banner-anim="5"
     which would otherwise animate opacity to 1, so we override that animation
     below to a translate-only fade and clamp the final opacity here. */
  opacity: 0.09;
  -webkit-mask-image: radial-gradient(circle at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
          mask-image: radial-gradient(circle at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
  z-index: 0;
}
.page-banner__grid { position: relative; z-index: 1; }
/* Motif uses its own keyframes so the entry animation does NOT push opacity
   back to 1 — it slides/blurs in while staying at the subtle final opacity. */
@keyframes maycash-motif-rise {
  from { opacity: 0;    transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 0.09; transform: translateY(0);    filter: blur(0); }
}
.page-banner [data-banner-anim="5"] {
  animation: maycash-motif-rise 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}

/* In RTL, mirror the motif to the left so it stays behind the image
   (image column flips to the start of the row). */
html[dir="rtl"] .page-banner__motif {
  right: auto;
  left: 0;
  -webkit-mask-image: radial-gradient(circle at 30% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 75%);
          mask-image: radial-gradient(circle at 30% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 75%);
}
@media (max-width: 768px) {
  .page-banner__motif {
    width: 100%;
    right: 0;
    left: 0;
    opacity: 0.07;
  }
}

/* RTL: title text-align stays start; visual stays right of copy on desktop. */
html[dir="rtl"] .page-banner__lead { max-width: none; }

/* Layout flip — swap image and copy columns when admin enables imageOnLeft.
   The motif also flips to the opposite side so it stays behind the image. */
@media (min-width: 769px) {
  .page-banner--image-left .page-banner__grid {
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  }
  .page-banner--image-left .page-banner__copy   { order: 2; }
  .page-banner--image-left .page-banner__visual { order: 1; }
  .page-banner--image-left .page-banner__motif {
    right: auto;
    left: 0;
    -webkit-mask-image: radial-gradient(circle at 30% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
            mask-image: radial-gradient(circle at 30% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
  }
  html[dir="rtl"] .page-banner--image-left .page-banner__motif {
    left: auto;
    right: 0;
    -webkit-mask-image: radial-gradient(circle at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
            mask-image: radial-gradient(circle at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
  }
}

/* Nav background — page-banner does NOT couple the nav to its own background.
   Unlike the full-bleed hero (where a transparent nav sits on top of an image),
   the page-banner has no media behind the nav, so making the nav transparent
   when the banner gray is off causes the banner title to render under the nav.
   Keep the default white nav regardless of the page-banner's hasBackground. */

/* ---------- Free HTML block (maycash/free-html) ----------
   Lets admins paste plain text or HTML and get reasonable typography.
   Pairs with .section-free-html--has-bg for an optional gray background.
*/
.section-free-html { padding: 56px 0; }
.section-free-html--has-bg { background: #f7f7f7; }
.section-free-html .free-html-content {
  max-width: 880px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-800);
}
.section-free-html .free-html-content > * + * { margin-top: 1em; }
.section-free-html .free-html-content h2,
.section-free-html .free-html-content h3,
.section-free-html .free-html-content h4 {
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  color: var(--gray-900);
  letter-spacing: -0.3px;
}
.section-free-html .free-html-content a { color: var(--mc-red); text-decoration: underline; }
.section-free-html .free-html-content a:hover { color: var(--mc-red-dark); }
.section-free-html .free-html-content ul,
.section-free-html .free-html-content ol { padding-inline-start: 1.4em; }
.section-free-html .free-html-content blockquote {
  border-inline-start: 3px solid var(--mc-red);
  padding-inline-start: 16px;
  color: var(--gray-700);
  font-style: italic;
}
@media (max-width: 640px) {
  .section-free-html { padding: 40px 0; }
  .section-free-html .free-html-content { font-size: 16px; }
}

/* ============================================================
   Blog (template-blog.php + single.php)
   ============================================================ */
.section-page-banner {
  padding: 80px 0 24px;
  background: #f7f7f7;
}
.section-page-banner .section-kicker { margin-bottom: 10px; }
.page-banner__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: var(--gray-900);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-banner__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 720px;
}

.section-blog-list { padding: 20px 0; position: relative; overflow: hidden; }
.section-blog-list--has-bg { background: #f7f7f7; }
.section-blog-list > .container { position: relative; z-index: 1; }
.section-blog-list .section-heading--center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.section-blog-list .section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.section-blog-list .section-heading .section-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.blog-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(15,23,42,0.18);
}
.blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #f0f3fa;
  overflow: hidden;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__media-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink-300);
}
.blog-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mc-red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0;
  color: var(--gray-900);
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--mc-red); }
.blog-card__excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.blog-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--mc-red);
  padding-top: 6px;
}
.blog-card__more:hover { color: var(--mc-red-dark); }
html[dir="rtl"] .blog-card__more svg { transform: scaleX(-1); }

.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.blog-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--ink-200);
  background: #fff;
  color: var(--gray-700);
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s ease;
}
.blog-pagination__page:hover { border-color: var(--mc-red); color: var(--mc-red); }
.blog-pagination__page.is-current { background: var(--mc-red); border-color: var(--mc-red); color: #fff; }

.blog-empty {
  text-align: center;
  font-size: 16px;
  color: var(--ink-500);
  padding: 40px 0;
}

/* ----- Single post ----- */
.single-post { padding: 0 0 96px; background: #fff; }
.single-post__head {
  padding: 64px 0 32px;
  background: #f7f7f7;
}
.single-post__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}
.single-post__back:hover { color: var(--mc-red); }
html[dir="rtl"] .single-post__back svg { transform: scaleX(-1); }
.single-post__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.single-post__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin: 0;
  max-width: 880px;
}
.single-post__hero { padding: 36px 0 0; }
.single-post__hero img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 22px;
}
.single-post__body { padding: 48px 0 0; }
.single-post__content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.75;
  color: var(--gray-800);
}
.single-post__content > * + * { margin-top: 1em; }
.single-post__content h2 { font-size: 28px; margin-top: 1.6em; }
.single-post__content h3 { font-size: 22px; margin-top: 1.4em; }
.single-post__content a { color: var(--mc-red); text-decoration: underline; }
.single-post__content blockquote {
  border-inline-start: 3px solid var(--mc-red);
  padding-inline-start: 16px;
  color: var(--gray-700);
  font-style: italic;
}
.single-post__content img { border-radius: 14px; }

@media (max-width: 640px) {
  .section-page-banner { padding: 56px 0 16px; }
  .section-blog-list { padding: 56px 0; }
  .section-blog-list .section-heading--center { margin-bottom: 32px; }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .single-post__head { padding: 40px 0 24px; }
  .single-post__hero { padding: 24px 0 0; }
  .single-post__body { padding: 32px 0 0; }
  .single-post__content { font-size: 16.5px; }
}

/* ============================================================
   Video gallery block (maycash/video-gallery)
   ============================================================ */
.section-video-gallery { padding: 20px 0 80px; position: relative; overflow: hidden; }
.section-video-gallery--has-bg { background: #f7f7f7; }
.section-video-gallery > .container { position: relative; z-index: 1; }
.section-video-gallery .section-heading--center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.section-video-gallery .section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.video-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 8px 24px -16px rgba(15,23,42,0.18);
}
.video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__body { padding: 20px 22px 24px; }
.video-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--gray-900);
}
.video-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
@media (max-width: 640px) {
  .section-video-gallery { padding: 56px 0; }
  .video-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Section-level zellige motif (blog-list + video-gallery) ----
   Same subtle pattern used on page-banner, scoped to these blocks. */
.section-motif {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 56%);
  pointer-events: none;
  background-image: var(--mc-motif);
  background-size: 280px 280px;
  background-repeat: repeat;
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(circle at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
          mask-image: radial-gradient(circle at 70% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%);
  z-index: 0;
}
html[dir="rtl"] .section-motif {
  right: auto;
  left: 0;
  -webkit-mask-image: radial-gradient(circle at 30% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 75%);
          mask-image: radial-gradient(circle at 30% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 75%);
}
@media (max-width: 768px) {
  .section-motif { width: 100%; right: 0; left: 0; opacity: 0.05; }
}