.elementor-316 .elementor-element.elementor-element-df9d479{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-316 .elementor-element.elementor-element-3ed8b3b{--display:flex;}.elementor-316 .elementor-element.elementor-element-9a99585{--display:flex;}.elementor-316 .elementor-element.elementor-element-24aef4c{--display:flex;}.elementor-316 .elementor-element.elementor-element-fd2f2ff{--display:flex;}.elementor-316 .elementor-element.elementor-element-1963fdb{--display:flex;}.elementor-316 .elementor-element.elementor-element-26e3902{--display:flex;}.elementor-316 .elementor-element.elementor-element-42e1097{--display:flex;}.elementor-316 .elementor-element.elementor-element-15076fe{--display:flex;}.elementor-316 .elementor-element.elementor-element-03d9cc0{--display:flex;}.elementor-316 .elementor-element.elementor-element-e3253c7{--display:flex;}@media(max-width:1024px){.elementor-316 .elementor-element.elementor-element-27d9f24{padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-f4f8e48 *//* ============================================================
   CONTAINER 2 CSS: HERO
   ============================================================ */

.hero-container {
  background: linear-gradient(135deg, var(--color-navy, #081F3F) 0%, var(--color-primary, #0D3B73) 100%);
  padding: var(--space-3xl, 96px) var(--space-md, 90px);
}

.hero-inner {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.5fr; /* text column slightly wider than visual column */
  gap: var(--space-2xl, 64px);
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--color-gold, #D6A641);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-md, 24px);
}

.hero-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white, #fff);
  margin: 0 0 var(--space-md, 24px) 0;
  overflow-wrap: break-word; /* keeps a very long word from overflowing */
}

/* The ONE gold-colored word/phrase pattern — reused across every
   heading on the whole site. Use it once per heading, sparingly. */
.highlight-word { color: var(--color-gold, #D6A641); }

.hero-paragraph {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--space-lg, 32px) 0;
  max-width: 540px;
}

.hero-button-row {
  display: flex;
  gap: var(--space-sm, 16px);
  flex-wrap: wrap;
}

/* "On dark" button variants — for use on the Hero and CTA containers,
   whose backgrounds are dark navy instead of white */
.btn-primary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--radius-sm, 12px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: var(--color-gold, #D6A641); color: var(--color-navy, #081F3F);
  transition: transform 0.2s ease;
}
.btn-secondary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--radius-sm, 12px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: transparent; color: var(--color-white, #fff);
  border: 2px solid rgba(255,255,255,0.35);
  transition: transform 0.2s ease;
}
.btn-primary-on-dark:hover, .btn-secondary-on-dark:hover { transform: translateY(-2px); }

.hero-visual-column {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg, 28px);
  padding: var(--space-lg, 32px);
}

.hero-visual-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white, #fff);
  margin-bottom: var(--space-md, 24px);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #18A957; /* success green — used only for "everything is fine" indicators */
  display: inline-block;
}

.hero-stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm, 16px) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: var(--color-white, #fff);
}
.hero-stat-row:first-of-type { border-top: none; }
.hero-stat-label { font-size: 14px; opacity: 0.7; }
.hero-stat-value { font-size: 16px; font-weight: 700; color: var(--color-gold, #D6A641); }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 2 columns -> 1 column; the visual card drops below the text */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-heading { font-size: 44px; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .hero-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .hero-heading { font-size: 34px; }
  .hero-paragraph { font-size: 16px; }
  /* Buttons go full-width and stack, for easier tapping */
  .hero-button-row { flex-direction: column; }
  .hero-button-row .btn-primary-on-dark,
  .hero-button-row .btn-secondary-on-dark { width: 100%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8eab7c1 *//* ============================================================
   CONTAINER 3 CSS: TRUST INDICATORS
   ============================================================ */

.trust-container {
  max-width: var(--content-width, 1200px);
  margin: -48px auto 0 auto; /* pulls this card up to overlap the Hero's bottom edge */
  padding: 0 var(--space-md, 24px);
  position: relative;
  z-index: 2;
}

.trust-grid {
  background: var(--color-white, #fff);
  border-radius: var(--radius-lg, 28px);
  box-shadow: var(--shadow-strong, 0 20px 60px rgba(0,0,0,0.08));
  padding: var(--space-lg, 32px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg, 32px);
}

.trust-item { text-align: center; }

.trust-number {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-primary, #0D3B73);
  font-family: var(--font-main, 'Inter', sans-serif);
}

.trust-label {
  font-size: 14px;
  color: var(--color-gray, #5F6B7A);
  margin-top: var(--space-xs, 8px);
}

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 4 columns -> 2x2 grid */
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  /* 2x2 -> single column */
  .trust-grid { grid-template-columns: 1fr; gap: var(--space-md, 24px); }
  .trust-container { margin-top: -24px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1ed4be0 *//* ============================================================
   CONTAINER 4 CSS: SERVICES OVERVIEW
   ============================================================ */

.services-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

/* Section header pattern — reused by several other containers below
   (Why MSK, Industries, Process, Testimonials, FAQ) with the same
   3 pieces: eyebrow, heading, paragraph */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-steel, #3E6B9C);
  margin-bottom: var(--space-sm, 16px);
}
.section-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-navy, #081F3F);
  margin: 0 0 var(--space-sm, 16px) 0;
}
.section-paragraph {
  font-size: 18px;
  color: var(--color-gray, #5F6B7A);
  max-width: 600px;
  margin: 0;
}
.section-header { margin-bottom: var(--space-2xl, 64px); }

.services-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* list column is slightly wider than the featured panel */
  gap: var(--space-lg, 32px);
}

.featured-service-panel {
  background: var(--color-navy, #081F3F);
  border-radius: var(--radius-lg, 28px);
  padding: var(--space-xl, 48px);
  color: var(--color-white, #fff);
}
.service-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 12px);
  background: rgba(255,255,255,0.1);
  color: var(--color-gold, #D6A641);
  margin-bottom: var(--space-md, 24px);
}
.service-icon svg { width: 28px; height: 28px; }
.service-title { font-size: 24px; font-weight: 600; margin: 0 0 var(--space-sm, 16px) 0; }
.service-description { font-size: 16px; color: rgba(255,255,255,0.75); margin: 0 0 var(--space-lg, 32px) 0; }

.services-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 16px);
}
.service-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md, 24px);
  padding: var(--space-md, 24px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md, 20px);
  transition: box-shadow 0.2s ease;
}
.service-row:hover { box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,0.05)); }
.row-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 12px);
  background: var(--color-soft-blue, #EAF2FB);
  color: var(--color-primary, #0D3B73);
}
.row-icon svg { width: 22px; height: 22px; }
.row-content { flex: 1; }
.row-title { font-size: 18px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0 0 4px 0; }
.row-description { font-size: 15px; color: var(--color-gray, #5F6B7A); margin: 0; }
.row-arrow-link {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary, #0D3B73);
}
.row-arrow-link svg { width: 20px; height: 20px; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* Featured panel + list stack instead of sitting side by side */
  .services-layout { grid-template-columns: 1fr; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .services-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .section-heading { font-size: 28px; }
  .service-row { flex-wrap: wrap; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d54cd5d *//* ============================================================
   CONTAINER 5 CSS: WHY MSK ASSOCIATES
   ============================================================ */

.why-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl, 64px);
}

.why-sticky-column {
  position: sticky;
  top: 120px; /* sits below the 88px sticky header, with a little breathing room */
  align-self: start;
  height: fit-content;
}

.why-label-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 8px);
  margin: var(--space-lg, 32px) 0;
}
.why-label {
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: var(--space-sm, 16px);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray, #5F6B7A);
  cursor: pointer;
}
.why-label.is-active {
  border-left-color: var(--color-primary, #0D3B73);
  color: var(--color-primary, #0D3B73);
  font-weight: 700;
  background: var(--color-soft-blue, #EAF2FB);
}
.why-cta-button { margin-top: var(--space-md, 24px); }

.why-panels-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl, 64px); /* generous gap gives the sticky column room to feel like it's "advancing" */
}

.why-panel {
  background: var(--color-soft-blue, #EAF2FB);
  border-radius: var(--radius-lg, 28px);
  padding: var(--space-xl, 48px);
  min-height: 320px; /* keeps each panel tall enough for the sticky effect to be visible */
}
.panel-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy, #081F3F);
  margin: 0 0 var(--space-sm, 16px) 0;
}
.panel-stat-box {
  background: var(--color-white, #fff);
  border-radius: var(--radius-md, 20px);
  padding: var(--space-md, 24px);
  margin-top: var(--space-md, 24px);
}
/* .hero-stat-row / .hero-stat-label / .hero-stat-value are defined in
   Container 2's CSS and reused here as-is. If you're pasting this
   container completely on its own, copy those 3 rules over from
   Container 2 as well. */

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* The sticky column becomes a normal (non-sticky) block that sits
     above the panels — "sticky while scrolling" feels cramped on
     smaller screens, so this is the simplest reliable behavior there. */
  .why-grid { grid-template-columns: 1fr; }
  .why-sticky-column { position: static; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .why-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .why-panel { padding: var(--space-lg, 32px); min-height: 0; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b936c8d *//* ============================================================
   CONTAINER 6 CSS: INDUSTRIES WE SERVE
   ============================================================ */

.industries-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

.industries-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg, 32px);
  margin-bottom: var(--space-xl, 48px);
}

.industries-arrow-group {
  display: flex;
  gap: var(--space-sm, 16px);
  flex-shrink: 0;
}
.arrow-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: var(--color-white, #fff);
  color: var(--color-primary, #0D3B73);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.arrow-btn svg { width: 20px; height: 20px; }
.arrow-btn:hover { background: var(--color-soft-blue, #EAF2FB); }

.industries-track {
  display: flex;
  gap: var(--space-md, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm, 16px); /* room for a scrollbar without clipping cards */
  -webkit-overflow-scrolling: touch;
}
.industry-card {
  scroll-snap-align: start;
  flex: 0 0 220px; /* fixed width card that never shrinks */
  background: var(--color-soft-blue, #EAF2FB);
  border-radius: var(--radius-md, 20px);
  padding: var(--space-lg, 32px);
  text-align: center;
}
.industry-icon {
  width: 56px; height: 56px; margin: 0 auto var(--space-md, 24px) auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-white, #fff);
  color: var(--color-primary, #0D3B73);
}
.industry-icon svg { width: 26px; height: 26px; }
.industry-name { font-size: 17px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  .industries-header-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .industries-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .industry-card { flex: 0 0 180px; padding: var(--space-md, 24px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b91b8c8 *//* ============================================================
   CONTAINER 7 CSS: OUR PROCESS
   ============================================================ */

.process-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg, 32px);
}

.process-step { text-align: left; }
.process-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-gold, #D6A641);
  margin-bottom: var(--space-sm, 16px);
}
.process-step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy, #081F3F);
  margin: 0 0 var(--space-xs, 8px) 0;
}
.process-step-description {
  font-size: 15px;
  color: var(--color-gray, #5F6B7A);
  margin: 0;
}

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 5 columns -> 2 columns */
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .process-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  /* 2 columns -> 1 column */
  .process-grid { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f88c7ef *//* ============================================================
   CONTAINER 8 CSS: CLIENT TESTIMONIALS
   ============================================================ */

.testimonials-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
  text-align: center;
}
.testimonials-container .section-header { margin: 0 auto var(--space-2xl, 64px) auto; }

.testimonial-viewport {
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden; /* hides the other 2 slides sitting side-by-side */
}

.testimonial-track {
  display: flex;
  transition: transform 0.4s ease;
}
.testimonial-slide {
  flex: 0 0 100%; /* each slide takes the full width of the viewport */
}

.testimonial-card {
  background: var(--color-soft-blue, #EAF2FB);
  border-radius: var(--radius-lg, 28px);
  padding: var(--space-xl, 48px);
}
.testimonial-stars { color: var(--color-gold, #D6A641); font-size: 20px; margin-bottom: var(--space-md, 24px); }
.testimonial-quote {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-navy, #081F3F);
  line-height: 1.5;
  margin: 0 0 var(--space-lg, 32px) 0;
}
.testimonial-author { font-size: 16px; font-weight: 700; color: var(--color-navy, #081F3F); }
.testimonial-role { font-size: 14px; color: var(--color-gray, #5F6B7A); }

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs, 8px);
  margin-top: var(--space-lg, 32px);
}
.testimonial-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: none;
  background: rgba(13,59,115,0.2);
  cursor: pointer;
  padding: 0;
}
.testimonial-dot.is-active { background: var(--color-primary, #0D3B73); }

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .testimonials-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .testimonial-card { padding: var(--space-lg, 32px); }
  .testimonial-quote { font-size: 17px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c65ac34 *//* ============================================================
   CONTAINER 9 CSS: FAQ
   ============================================================ */

.faq-container {
  max-width: 800px; /* narrower than most sections — FAQ reads better in a tighter column */
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 16px);
}

.faq-item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
}

.faq-question-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: var(--space-md, 24px);
  background: var(--color-white, #fff);
  border: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy, #081F3F);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Open state AND hover — gold accent instead of the default white,
   so the active question (and whichever one you're about to open) is
   visually distinct from the rest. Combined into one rule so hover
   and open never fight each other or flash between two colors. */
.faq-item.is-open .faq-question-button,
.faq-question-button:hover {
  background: var(--color-gold, #D6A641);
  color: var(--color-navy, #081F3F);
}

/* The little "+" icon that rotates into an "x" when open */
.faq-icon {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-primary, #0D3B73);
  transition: transform 0.25s ease, background 0.25s ease;
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } /* "+" becomes "-" */
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after,
.faq-question-button:hover .faq-icon::before,
.faq-question-button:hover .faq-icon::after { background: var(--color-navy, #081F3F); } /* keep the icon readable against the gold */

.faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.is-open .faq-answer-panel { max-height: 400px; } /* tall enough for any realistic answer length */
.faq-answer-text {
  padding: 0 var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
  margin: 0;
  color: var(--color-gray, #5F6B7A);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .faq-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .faq-question-button { font-size: 15px; padding: var(--space-sm, 16px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-499727f *//* ============================================================
   CONTAINER 10 CSS: CONSULTATION CTA
   ============================================================ */

.cta-container {
  background: linear-gradient(135deg, var(--color-navy, #081F3F) 0%, var(--color-primary, #0D3B73) 100%);
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
  text-align: center;
}

.cta-inner {
  max-width: 700px;
  margin: 0 auto;
}

.cta-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-white, #fff);
  margin: 0 0 var(--space-md, 24px) 0;
}
.cta-paragraph {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--space-lg, 32px) 0;
}
.cta-button-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-md, 24px);
}
.cta-fine-print {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .cta-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .cta-heading { font-size: 28px; }
  .cta-button-row { flex-direction: column; }
  .cta-button-row .btn { width: 100%; }
}/* End custom CSS */