/* M&N Frameless Shower Doors — Elementor widget styles */
/* ===== ISOLATION LAYER =====
   Everything inside .mnfsd-section must come from THIS stylesheet only —
   no heading/link/list/button/form defaults from the active theme are
   allowed to leak in. Structural resets below use !important on purpose
   so a theme's global styles can never override them. Colors, backgrounds,
   spacing set via each widget's own Elementor Style-tab controls are NOT
   touched here — those are printed by Elementor with a more specific
   {{WRAPPER}}-prefixed selector and already win naturally. */
.mnfsd-section,
.mnfsd-section * {
  box-sizing: border-box !important;
}

.mnfsd-section {
  --mnfsd-navy: #0d3b78;
  --mnfsd-blue: #1a63c4;
  --mnfsd-blue-dark: #134a95;
  --mnfsd-red: #e2231a;
  --mnfsd-red-dark: #b91b14;
  --mnfsd-gold: #fbc94a;
  --mnfsd-ink: #1c2733;
  --mnfsd-gray: #5b6672;
  --mnfsd-line: #e4e9ef;
  --mnfsd-cream: #f6f8fb;
  --mnfsd-head-font: 'Racing Sans One', sans-serif;
  --mnfsd-body-font: 'Barlow', sans-serif;

  font-family: var(--mnfsd-body-font) !important;
  color: var(--mnfsd-ink);
  line-height: 1.6 !important;
  position: relative;
  padding: 90px 0;
  text-align: left !important;
  background: none;
}

.mnfsd-section h1,
.mnfsd-section h2,
.mnfsd-section h3,
.mnfsd-section h4,
.mnfsd-section h5,
.mnfsd-section h6 {
  /* No !important on font-family/font-weight: an Elementor Typography
     group control targets a more specific {{WRAPPER}}-prefixed selector
     and must be able to win here. The other resets below stay !important
     since they exist purely to block the active theme's heading styles
     from leaking in and aren't meant to be Elementor-editable. */
  font-family: var(--mnfsd-head-font);
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--mnfsd-navy);
  margin: 0;
  padding: 0;
  line-height: 1.2;
  text-transform: none !important;
  border: none !important;
  background: none !important;
}

.mnfsd-section p {
  margin: 0;
  padding: 0;
}

.mnfsd-section ul,
.mnfsd-section ol {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.mnfsd-section li {
  margin: 0;
  padding: 0;
}

body .mnfsd-section a:not(.mnfsd-btn) {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  background: none !important;
  color: inherit;
}

.mnfsd-section a:not(.mnfsd-btn):hover,
.mnfsd-section a:not(.mnfsd-btn):focus {
  text-decoration: none !important;
}

.mnfsd-section button:not(.mnfsd-btn) {
  font-family: inherit !important;
  border: none;
  background: none;
  cursor: pointer;
  box-shadow: none !important;
}

/* Elementor's Icons control can render icons as inline SVG instead of
   <i class="fa-..."> webfont tags — force them to size/color like text. */
.mnfsd-section svg.e-font-icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
}

.mnfsd-section img {
  max-width: 100%;
  height: auto;
  display: block;
  border: none !important;
  box-shadow: none !important;
}

.mnfsd-section input,
.mnfsd-section select,
.mnfsd-section textarea {
  font-family: inherit !important;
  box-shadow: none !important;
  outline: none;
}

.mnfsd-section .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.mnfsd-section-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ===== SHARED: eyebrow / section head / buttons ===== */
.mnfsd-eyebrow {
  color: var(--mnfsd-red);
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 12.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  padding-left: 26px;
}
.mnfsd-eyebrow::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 2px; background: var(--mnfsd-red);
}

.mnfsd-section-head { max-width: 640px; margin: 0 auto 54px; }
.mnfsd-section-head.mnfsd-center,
.mnfsd-center { text-align: center; }
.mnfsd-section-head .mnfsd-section-heading { font-size: 38px; margin-bottom: 10px; }
.mnfsd-subtext { color: var(--mnfsd-gray); font-size: 16px; }

/* ===== DARK BACKGROUND SCHEME =====
   Toggled per-widget via the shared "Dark Background?" Style-tab switch
   (MNFSD_Widget_Base::scheme_class()). Flips bare text sitting directly on
   the section background to a light color; content already inside its own
   white card (service cards, pain cards, form card, testimonial cards)
   doesn't need this since the card's own white background keeps dark text
   readable regardless of the section's background. */
.mnfsd-scheme-dark .mnfsd-section-head .mnfsd-section-heading { color: #fff; }
.mnfsd-scheme-dark .mnfsd-subtext { color: #c9d8ec; }
.mnfsd-scheme-dark .mnfsd-eyebrow { color: var(--mnfsd-gold); }
.mnfsd-scheme-dark .mnfsd-eyebrow::before { background: var(--mnfsd-gold); }

.mnfsd-btn {
  display: inline-block;
  background: var(--mnfsd-red);
  color: #fff !important;
  font-family: var(--mnfsd-body-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 15px 32px;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(226,35,26,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  border: none;
  cursor: pointer;
}
.mnfsd-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(226,35,26,.5); }
.mnfsd-btn-solid { background: var(--mnfsd-red); }
.mnfsd-btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.7);
  color: #fff !important;
  box-shadow: none;
  padding: 13px 28px;
}
.mnfsd-btn-outline:hover { background: #fff; color: var(--mnfsd-navy) !important; }
.mnfsd-btn-white { background: #fff; color: var(--mnfsd-red-dark) !important; box-shadow: none; }

/* ===== HERO ===== */
.mnfsd-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(251,201,74,.18), transparent 40%),
    linear-gradient(135deg, rgba(6,32,68,.94), rgba(19,74,149,.88)),
    url('https://images.unsplash.com/photo-1600607687644-c7171b42498f?q=80&w=1800&auto=format&fit=crop') center/cover fixed;
  color: #fff;
  padding: 110px 0 90px;
  overflow: hidden;
}
.mnfsd-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.mnfsd-badge-row { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.mnfsd-g-badge {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 7px 14px; border-radius: 30px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #fff;
}
.mnfsd-stars { color: var(--mnfsd-gold); font-size: 14px; letter-spacing: 2px; }
.mnfsd-hero-kicker {
  display: inline-block; background: var(--mnfsd-red); color: #fff !important;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 3px; margin-bottom: 18px;
}
.mnfsd-hero-heading { font-size: 58px; line-height: 1.05; color: #fff; margin-bottom: 18px; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.mnfsd-hero-heading .mnfsd-accent { color: var(--mnfsd-gold); display: block; }
.mnfsd-hero-lead { font-size: 18px; font-weight: 400; max-width: 520px; opacity: .92; margin-bottom: 30px; color: #fff; }
.mnfsd-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.mnfsd-trust-strip { display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; }
.mnfsd-trust-strip div { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; padding-right: 24px; margin-right: 24px; border-right: 1px solid rgba(255,255,255,.18); color: #fff; }
.mnfsd-trust-strip div:last-child { border-right: none; }
.mnfsd-dot { width: 7px; height: 7px; background: var(--mnfsd-gold); border-radius: 50%; flex-shrink: 0; }

.mnfsd-form-card { background: #fff; border-radius: 14px; padding: 32px; box-shadow: 0 40px 80px rgba(0,0,0,.45); position: relative; }
.mnfsd-form-card .mnfsd-ribbon {
  position: absolute; top: -14px; left: 28px; background: var(--mnfsd-red); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 6px 14px; border-radius: 20px;
}
.mnfsd-form-card h3 { color: var(--mnfsd-navy); font-size: 24px; margin-bottom: 4px; }
.mnfsd-form-card .mnfsd-form-sub { color: var(--mnfsd-gray); font-size: 13px; margin-bottom: 18px; }
.mnfsd-quote-form input, .mnfsd-quote-form textarea {
  width: 100%; border: 1px solid var(--mnfsd-line); background: var(--mnfsd-cream);
  border-radius: 6px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; color: var(--mnfsd-ink);
}
.mnfsd-quote-form input:focus, .mnfsd-quote-form textarea:focus { outline: 2px solid var(--mnfsd-blue); background: #fff; }
.mnfsd-quote-form textarea { resize: none; height: 70px; }
.mnfsd-quote-form .mnfsd-submit { width: 100%; text-align: center; }

/* ===== AREAS STRIP ===== */
.mnfsd-areas-strip-wrap { background: var(--mnfsd-navy); color: #fff; padding: 15px 0; }
.mnfsd-areas-strip { text-align: center; font-weight: 700; letter-spacing: 1.5px; font-size: 13px; color: #fff; }
.mnfsd-areas-strip .mnfsd-area-item { display: inline-flex; align-items: center; margin: 0 20px; }
.mnfsd-areas-strip .mnfsd-sep { opacity: .35; margin: 0 4px; }
.mnfsd-areas-strip .mnfsd-area-icon { display: inline-flex; color: var(--mnfsd-gold); margin-right: 6px; font-size: 12px; }

/* ===== SERVICES GRID ===== */
.mnfsd-services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.mnfsd-service-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--mnfsd-line); transition: transform .2s ease, box-shadow .2s ease; }
.mnfsd-service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(13,59,120,.15); }
.mnfsd-service-card img { height: 190px; width: 100%; object-fit: cover; }
.mnfsd-service-card .mnfsd-sc-body { padding: 22px; }
.mnfsd-service-card h4, .mnfsd-service-card h1, .mnfsd-service-card h2, .mnfsd-service-card h3, .mnfsd-service-card h5, .mnfsd-service-card h6 { font-size: 19px; color: var(--mnfsd-ink); margin-bottom: 8px; letter-spacing: .3px; }
.mnfsd-service-card p { font-size: 14px; color: var(--mnfsd-gray); margin-bottom: 14px; }
.mnfsd-sc-link { font-size: 13px; font-weight: 700; color: var(--mnfsd-blue-dark); text-transform: uppercase; letter-spacing: .5px; }
.mnfsd-sc-link::after { content: " →"; }

/* ===== PAIN POINTS ===== */
.mnfsd-pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.mnfsd-pain-card { background: #fff; border: 1px solid var(--mnfsd-line); border-radius: 10px; padding: 30px 24px; position: relative; border-top: 4px solid var(--mnfsd-red); }
.mnfsd-pain-icon {
  width: 54px; height: 54px; border-radius: 12px; background: rgba(226,35,26,.1); color: var(--mnfsd-red);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px;
}
.mnfsd-pain-card h4, .mnfsd-pain-card h1, .mnfsd-pain-card h2, .mnfsd-pain-card h3, .mnfsd-pain-card h5, .mnfsd-pain-card h6 { font-size: 16.5px; color: var(--mnfsd-ink); margin-bottom: 8px; font-family: var(--mnfsd-body-font) !important; font-weight: 700 !important; }
.mnfsd-pain-card p { font-size: 14.5px; color: var(--mnfsd-gray); }
.mnfsd-pain-fix { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mnfsd-line); font-size: 13.5px; color: var(--mnfsd-blue-dark); font-weight: 700; }

/* ===== ZIGZAG ===== */
.mnfsd-zigzag-section.mnfsd-zigzag-dark { background: var(--mnfsd-navy); color: #fff; }
.mnfsd-zigzag-dark .mnfsd-zigzag-heading { color: #fff; }
.mnfsd-zigzag-dark .mnfsd-zigzag-text { color: #c9d8ec; }
.mnfsd-zigzag-dark .mnfsd-zigzag-list li { color: #fff; border-bottom-color: rgba(255,255,255,.15); }

.mnfsd-zigzag { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.mnfsd-zigzag-reverse .mnfsd-zigzag-media { order: 2; }
.mnfsd-zigzag-reverse .mnfsd-zigzag-copy { order: 1; }

.mnfsd-zigzag-media { position: relative; }
.mnfsd-zigzag-img-wrap { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px rgba(13,59,120,.2); }
.mnfsd-zigzag-img-wrap img { display: block; }

.mnfsd-tm-badge { position: absolute; top: 20px; left: 20px; background: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.15); display: flex; align-items: center; gap: 8px; }
.mnfsd-tm-badge .mnfsd-txt { font-size: 12.5px; font-weight: 700; color: var(--mnfsd-navy); }

.mnfsd-float-stat { position: absolute; bottom: -24px; left: -24px; background: var(--mnfsd-red); color: #fff; padding: 18px 22px; border-radius: 10px; box-shadow: 0 15px 30px rgba(226,35,26,.35); z-index: 2; }
.mnfsd-float-stat .mnfsd-big { font-family: var(--mnfsd-head-font); font-size: 30px; line-height: 1; }
.mnfsd-float-stat .mnfsd-small { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

.mnfsd-cm-accent { position: absolute; right: -20px; bottom: -30px; width: 56%; border-radius: 12px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 20px 40px rgba(13,59,120,.25); }
.mnfsd-cm-accent img { height: 150px; width: 100%; object-fit: cover; }

.mnfsd-zigzag-heading { font-size: 32px; margin-bottom: 16px; }
.mnfsd-zigzag-text { color: var(--mnfsd-gray); font-size: 15.5px; margin-bottom: 20px; }
.mnfsd-zigzag-text p { margin-bottom: 12px; }
.mnfsd-zigzag-text p:last-child { margin-bottom: 0; }

.mnfsd-zigzag-list { margin-bottom: 24px; }
.mnfsd-zigzag-list li { padding: 9px 0 9px 30px; position: relative; font-size: 15px; color: var(--mnfsd-ink); border-bottom: 1px solid var(--mnfsd-line); }
.mnfsd-zigzag-list li:last-child { border-bottom: none; }
.mnfsd-check {
  position: absolute; left: 0; top: 9px; color: #fff; background: var(--mnfsd-blue);
  width: 19px; height: 19px; border-radius: 50%; font-size: 10px; display: flex;
  align-items: center; justify-content: center;
}

.mnfsd-service-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.mnfsd-service-pill { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--mnfsd-line); border-radius: 10px; padding: 14px 16px; }
.mnfsd-sp-ic { width: 38px; height: 38px; border-radius: 8px; background: var(--mnfsd-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--mnfsd-head-font); font-size: 15px; flex-shrink: 0; }
.mnfsd-service-pill .mnfsd-label { font-size: 13.5px; font-weight: 700; color: var(--mnfsd-ink); }
.mnfsd-zigzag-dark .mnfsd-service-pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
.mnfsd-zigzag-dark .mnfsd-service-pill .mnfsd-label { color: #fff; }

.mnfsd-stat-chip-row { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.mnfsd-stat-chip { background: #fff; border: 1px solid var(--mnfsd-line); border-radius: 10px; padding: 14px 20px; min-width: 110px; }
.mnfsd-stat-chip .mnfsd-big { font-family: var(--mnfsd-head-font); font-size: 26px; color: var(--mnfsd-blue); line-height: 1; }
.mnfsd-stat-chip .mnfsd-small { font-size: 11.5px; color: var(--mnfsd-gray); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: 4px; }

/* ===== HOW IT WORKS — timeline (sized up for a bigger, bolder feel) ===== */
.mnfsd-how-it-works .mnfsd-section-head { max-width: 720px; }
.mnfsd-how-it-works .mnfsd-section-head .mnfsd-section-heading { font-size: 44px; }
.mnfsd-how-it-works .mnfsd-subtext { font-size: 17.5px; }
.mnfsd-timeline { position: relative; margin-top: 60px; }
.mnfsd-timeline::before {
  content: ""; position: absolute; top: 52px; left: 6%; right: 6%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--mnfsd-line) 0 10px, transparent 10px 18px);
}
.mnfsd-timeline-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 24px; position: relative; }
.mnfsd-t-step { text-align: center; position: relative; }
.mnfsd-t-circle {
  width: 104px; height: 104px; border-radius: 50%; background: #fff; border: 4px solid var(--mnfsd-blue);
  color: var(--mnfsd-blue); font-family: var(--mnfsd-head-font); font-size: 36px; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 24px; position: relative; z-index: 2;
  box-shadow: 0 14px 30px rgba(26,99,196,.22);
}
.mnfsd-t-step h4, .mnfsd-t-step h1, .mnfsd-t-step h2, .mnfsd-t-step h3, .mnfsd-t-step h5, .mnfsd-t-step h6 { font-size: 19px; color: var(--mnfsd-ink); font-family: var(--mnfsd-body-font) !important; font-weight: 700 !important; margin-bottom: 10px; }
.mnfsd-t-step p { font-size: 15px; color: var(--mnfsd-gray); max-width: 260px; margin: 0 auto; }
.mnfsd-t-tag { display: inline-block; background: var(--mnfsd-cream); color: var(--mnfsd-blue-dark); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; }

/* Dark-background scheme: the timeline steps sit directly on the section
   background (no white card), so they need their own light-text flip. */
.mnfsd-scheme-dark .mnfsd-timeline::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 10px, transparent 10px 18px); }
.mnfsd-scheme-dark .mnfsd-t-circle { background: rgba(255,255,255,.08); border-color: var(--mnfsd-gold); color: var(--mnfsd-gold); box-shadow: none; }
.mnfsd-scheme-dark .mnfsd-t-step h4, .mnfsd-scheme-dark .mnfsd-t-step h1, .mnfsd-scheme-dark .mnfsd-t-step h2, .mnfsd-scheme-dark .mnfsd-t-step h3, .mnfsd-scheme-dark .mnfsd-t-step h5, .mnfsd-scheme-dark .mnfsd-t-step h6 { color: #fff; }
.mnfsd-scheme-dark .mnfsd-t-step p { color: #c9d8ec; }
.mnfsd-scheme-dark .mnfsd-t-tag { background: rgba(255,255,255,.12); color: #fff; }

/* ===== MASONRY GALLERY ===== */
.mnfsd-masonry { column-count: 3; column-gap: 16px; }
.mnfsd-m-item { break-inside: avoid; margin-bottom: 16px; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 8px 20px rgba(13,59,120,.1); }
.mnfsd-m-item img { width: 100%; display: block; transition: transform .35s ease; }
.mnfsd-m-item:hover img { transform: scale(1.06); }
.mnfsd-m-cap {
  position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(8,30,60,.85), transparent);
  color: #fff; font-size: 12.5px; font-weight: 600; padding: 24px 14px 12px; opacity: 0; transition: opacity .3s ease;
}
.mnfsd-m-item:hover .mnfsd-m-cap { opacity: 1; }

/* ===== TESTIMONIALS ===== */
.mnfsd-testimonials-section { background: var(--mnfsd-navy); color: #fff; }
.mnfsd-testimonials-section .mnfsd-subtext { color: #c9d8ec; }
.mnfsd-test-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.mnfsd-test-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 26px; }
.mnfsd-test-card .mnfsd-stars { margin-bottom: 12px; display: block; }
.mnfsd-test-card p { font-size: 14.5px; color: #e6edf7; margin-bottom: 16px; }
.mnfsd-test-name { font-family: var(--mnfsd-head-font); font-size: 15px; color: var(--mnfsd-gold); }

/* ===== FAQ ===== */
.mnfsd-faq-wrap { max-width: 820px; }
.mnfsd-faq-item { border-bottom: 1px solid var(--mnfsd-line); padding: 22px 0; }
.mnfsd-faq-question { font-size: 16px; color: var(--mnfsd-navy); margin-bottom: 8px; font-family: var(--mnfsd-body-font) !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mnfsd-faq-accordion .mnfsd-faq-question { cursor: pointer; margin-bottom: 0; -webkit-user-select: none; user-select: none; }
.mnfsd-faq-toggle-icon { color: var(--mnfsd-red); font-size: 20px; flex-shrink: 0; line-height: 1; transition: transform .3s ease; }
.mnfsd-faq-accordion .mnfsd-faq-item.mnfsd-faq-open .mnfsd-faq-toggle-icon { transform: rotate(45deg); }
.mnfsd-faq-answer { font-size: 14.5px; color: var(--mnfsd-gray); margin-top: 8px; }

/* Accordion mode: answers are collapsed via an animated max-height (set
   inline by JS to the real content height, since a fixed generous
   max-height makes the collapse animation look broken — most of the
   transition time would pass with no visible change). */
.mnfsd-faq-accordion .mnfsd-faq-answer {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
}
.mnfsd-faq-accordion .mnfsd-faq-item.mnfsd-faq-open .mnfsd-faq-answer {
  margin-top: 8px;
  opacity: 1;
}
.mnfsd-faq-answer-inner { padding-bottom: 2px; }

.mnfsd-scheme-dark .mnfsd-faq-item { border-bottom-color: rgba(255,255,255,.2); }
.mnfsd-scheme-dark .mnfsd-faq-question { color: #fff; }
.mnfsd-scheme-dark .mnfsd-faq-answer { color: #c9d8ec; }
.mnfsd-scheme-dark .mnfsd-faq-toggle-icon { color: var(--mnfsd-gold); }

/* ===== CTA BAND ===== */
.mnfsd-cta-band { background: linear-gradient(90deg, var(--mnfsd-red), var(--mnfsd-red-dark)); color: #fff; text-align: center; padding: 64px 0; }
.mnfsd-cta-band .mnfsd-cta-heading { color: #fff; font-size: 36px; margin-bottom: 12px; }
.mnfsd-cta-text { margin-bottom: 28px; opacity: .95; font-size: 16px; }
.mnfsd-cta-btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ===== FOOTER (v7 professional redesign) ===== */
.mnfsd-footer { background: #081f42; color: #c9d8ec; padding: 0; font-size: 14px; }

.mnfsd-foot-cta-band { background: linear-gradient(90deg, var(--mnfsd-navy), var(--mnfsd-blue-dark)); padding: 36px 0; }
.mnfsd-foot-cta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.mnfsd-foot-cta-row .mnfsd-foot-cta-heading { color: #fff; font-size: 22px; }
.mnfsd-foot-cta-text { color: #c9d8ec; font-size: 13.5px; margin-top: 4px; }
.mnfsd-foot-cta-row .mnfsd-btn { background: var(--mnfsd-red); flex-shrink: 0; }

.mnfsd-foot-main { padding: 56px 0 24px; }
.mnfsd-foot-grid { display: grid; grid-template-columns: 1.3fr .9fr .9fr 1fr; gap: 40px; margin-bottom: 36px; }
.mnfsd-foot-logo { font-family: var(--mnfsd-head-font); font-size: 22px; color: #fff; margin-bottom: 14px; }
.mnfsd-foot-logo span { color: var(--mnfsd-gold); }
img.mnfsd-img-logo_image {
  max-width: 60%;
}
.mnfsd-foot-col-title {
  color: #fff; font-size: 15px; margin-bottom: 16px; font-family: var(--mnfsd-body-font) !important;
  font-weight: 700 !important; text-transform: uppercase; letter-spacing: .6px;
}
.mnfsd-foot-grid p, .mnfsd-foot-grid div, .mnfsd-foot-grid li { color: #a9bedb; }
.mnfsd-foot-grid li { margin-bottom: 8px; }
.mnfsd-foot-contact-list li { display: flex; align-items: center; gap: 10px; }
.mnfsd-foot-contact-icon { color: var(--mnfsd-gold); flex-shrink: 0; font-size: 13px; width: 16px; text-align: center; }
.mnfsd-foot-grid a:hover { color: #fff; }

.mnfsd-foot-badges { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mnfsd-foot-badges span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px; color: #dbe6f5; }
.mnfsd-foot-social { display: flex; gap: 10px; margin-top: 16px; }
.mnfsd-foot-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff !important;
}
.mnfsd-foot-social a:hover { background: var(--mnfsd-red); border-color: var(--mnfsd-red); }

.mnfsd-foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: #8fa6c9; }
.mnfsd-foot-bottom-links { display: flex; gap: 18px; }

/* ===== RESPONSIVE =====
   Three tiers: tablet (≤1024px) eases wide grids down to 2 columns instead
   of jumping straight to 1; small/medium (≤900px) is where two-column
   layouts (hero, zigzag) collapse to a single column; small mobile
   (≤600px) tightens type scale, spacing and stacks anything still
   side-by-side (buttons, trust rows, CTA rows). */

/* ----- Tablet: ≤1024px ----- */
@media (max-width: 1024px) {
  .mnfsd-services-grid,
  .mnfsd-pain-grid,
  .mnfsd-test-grid,
  .mnfsd-timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .mnfsd-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  .mnfsd-how-it-works .mnfsd-section-head .mnfsd-section-heading { font-size: 36px; }

  .mnfsd-timeline::before { display: none; }
}

/* ----- Small/medium: ≤900px (two-column sections go full width) ----- */
@media (max-width: 900px) {
  .mnfsd-hero-grid,
  .mnfsd-zigzag,
  .mnfsd-services-grid,
  .mnfsd-pain-grid,
  .mnfsd-test-grid,
  .mnfsd-timeline-grid { grid-template-columns: 1fr; }

  /* Brand and Contact stack full-width; Services and Areas Served sit
     side by side at 50% each in their own row instead of also stacking
     full-width — keeps the footer from getting too tall on mobile. */
  .mnfsd-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .mnfsd-foot-brand,
  .mnfsd-foot-contact { grid-column: 1 / -1; }

  .mnfsd-zigzag-reverse .mnfsd-zigzag-media,
  .mnfsd-zigzag-reverse .mnfsd-zigzag-copy { order: initial; }

  .mnfsd-hero-heading { font-size: 38px; }
  .mnfsd-masonry { column-count: 2; }
  .mnfsd-float-stat { position: static; margin-top: 16px; display: inline-block; }
  .mnfsd-cm-accent { position: static; width: 100%; margin-top: 16px; }
  .mnfsd-service-pills { grid-template-columns: 1fr; }
  .mnfsd-stat-chip-row { gap: 10px; }
  .mnfsd-stat-chip { min-width: 90px; padding: 12px 14px; }
  .mnfsd-timeline-grid { gap: 30px; }
}

/* Required mobile rule: every section gets 60px top/bottom padding on
   small devices, regardless of the desktop padding set via Elementor. */
@media screen and (max-width: 767px) {
  .mnfsd-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ----- Small mobile: ≤600px ----- */
@media screen and (max-width: 600px) {
  .mnfsd-section .wrap { padding: 0 18px; }

  /* Type scale */
  .mnfsd-hero-heading { font-size: 30px; }
  .mnfsd-hero-lead { font-size: 16px; }
  .mnfsd-section-head .mnfsd-section-heading { font-size: 28px; }
  .mnfsd-how-it-works .mnfsd-section-head .mnfsd-section-heading { font-size: 30px; }
  .mnfsd-zigzag-heading { font-size: 26px; }
  .mnfsd-cta-band .mnfsd-cta-heading { font-size: 26px; }

  /* Grids down to a single column everywhere */
  .mnfsd-services-grid,
  .mnfsd-pain-grid,
  .mnfsd-test-grid,
  .mnfsd-timeline-grid,
  .mnfsd-service-pills { grid-template-columns: 1fr; gap: 16px; }
  .mnfsd-masonry { column-count: 1; }
  .mnfsd-timeline::before { display: none; }

  /* Cards/badges get less padding so they don't feel oversized on a small screen */
  .mnfsd-pain-card { padding: 22px 18px; }
  .mnfsd-service-card .mnfsd-sc-body { padding: 18px; }
  .mnfsd-form-card { padding: 24px 20px; }
  .mnfsd-pain-icon { width: 46px; height: 46px; font-size: 19px; }
  .mnfsd-t-circle { width: 76px; height: 76px; font-size: 26px; border-width: 3px; }

  /* Buttons/rows that sat side-by-side now stack full-width */
  .mnfsd-hero-ctas, .mnfsd-cta-btn-row { flex-direction: column; align-items: stretch; }
  .mnfsd-hero-ctas .mnfsd-btn, .mnfsd-cta-btn-row .mnfsd-btn { width: 100%; text-align: center; }

  .mnfsd-trust-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mnfsd-trust-strip div { border-right: none; padding-right: 0; margin-right: 0; }

  .mnfsd-badge-row { flex-wrap: wrap; }

  .mnfsd-stat-chip-row { flex-direction: column; }
  .mnfsd-stat-chip { width: 100%; }
}