/* ===========================================
   Maison et Services Niort — Custom Styles
   Quicksand font · Orange #F38B00 · White/cream
   =========================================== */

/* ======================
   1. FONT FACES
   ====================== */
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-regular.woff2') format('woff2'), url('../fonts/quicksand-regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-medium.woff2') format('woff2'), url('../fonts/quicksand-medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-semibold.woff2') format('woff2'), url('../fonts/quicksand-semibold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-bold.woff2') format('woff2'), url('../fonts/quicksand-bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

/* ======================
   2. GLOBAL FONT OVERRIDE
   Force Quicksand everywhere
   ====================== */
/* ======================
   3. CSS VARIABLES
   ====================== */
:root {
  --primary-color: #333;
  --secondary-color: #555;
  --accent-color: #F38B00;
  --dark-blue: #F38B00;
  --light-blue: #FFF3E0;
  --lightest-blue: #FFF8F0;
}

/* ======================
   4. COLORS — Backgrounds
   ====================== */
.cs_blue_bg1            { background-color: #F38B00 !important; }
.cs_blue_bg3            { background-color: #FFF8F0 !important; }
.cs_why_choose_section,
.cs_testimonial_section { background-color: #FFF8F0 !important; }
.cs_why_choose_section  { margin-top: 80px; }

/* Testimonials — vanilla carousel */
.cs_tcar { overflow: hidden; }
.cs_tcar_track { display: flex; }
.cs_tcar_slide { padding: 0 12px; box-sizing: border-box; }
.cs_tcar_slide .cs_testimonial_style_1 { display: flex; flex-direction: column; height: 100%; }
.cs_tcar_slide .cs_testimonial_style_1 blockquote { flex: 1; }
.cs_tcar_dots { display: flex; justify-content: center; gap: 8px; }
.cs_tcar_dots button { font-size: 0; width: 10px; height: 10px; border-radius: 50%; border: none; background: #ccc; cursor: pointer; padding: 0; transition: background .2s; }
.cs_tcar_dots button.active { background: #F38B00; }

.cs_preloader           { background-color: #F38B00; }
.cs_preloader_text      { color: #fff; }

/* ======================
   5. COLORS — Text
   ====================== */
.cs_blue_dark                     { color: #F38B00 !important; }
.cs_section_title,
.cs_card_title a,
.cs_iconbox_title                 { color: #333; }
.cs_section_title,
.cs_iconbox_title,
.cs_card_title,
.cs_card_title a,
.cs_cta_title,
.cs_accordian_head,
.cs_funfact_title,
.cs_funfact_number                { font-weight: 700; letter-spacing: -0.025em; }
.cs_funfact_number                { color: #F38B00 !important; }
.cs_accordian.active .cs_accordian_head { color: #F38B00 !important; }
.cs_accordian .cs_accordian_body { display: none; }
.cs_accordian.active .cs_accordian_body { display: block; }

/* ======================
   6. SECTION SUBTITLES (pills)
   ====================== */
.cs_section_subtitle {
  font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600;
  color: #F38B00 !important;
}
.cs_section_subtitle.cs_blue_bg3 { background-color: #FFF3E0 !important; color: #F38B00 !important; }
.cs_section_subtitle.cs_white_bg { background-color: #fff !important; color: #F38B00 !important; }

/* ======================
   7. BUTTONS
   ====================== */
.cs_accent_bg                        { background-color: #F38B00 !important; }
.cs_btn_style_1 {
  background: #F38B00 !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  font-weight: 700 !important; box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: background .15s;
}
.cs_btn_style_1::before,
.cs_btn_style_1::after { display: none !important; }
.cs_btn_style_1:hover { background: #D47200 !important; color: #fff !important; }
.cs_scrollup                         { background-color: #F38B00 !important; }

/* ======================
   8. ICONS & STEPS
   ====================== */
.cs_iconbox_style_1 .cs_iconbox_icon {
  width: 48px !important; height: 48px !important; min-width: 48px !important;
  color: #F38B00 !important;
}
.cs_iconbox_style_1 .cs_iconbox_icon svg {
  width: 28px !important; height: 28px !important;
  transition: transform 1s cubic-bezier(0.25, 0, 0.25, 1.2);
}
.cs_iconbox_style_1:hover .cs_iconbox_icon svg { transform: rotateY(360deg); }
.cs_iconbox_style_2.active          { border-color: #F38B00 !important; }
.cs_iconbox_style_2.active .cs_iconbox_icon { color: #F38B00 !important; }
.cs_iconbox_style_2 .cs_iconbox_icon { color: #F38B00; }

/* ======================
   9. ACCORDION
   ====================== */
.cs_accordian_toggle::before,
.cs_accordian_toggle::after { background-color: #F38B00 !important; }

/* ======================
   10. STARS (custom unicode, FA hidden)
   ====================== */
.cs_rating, .cs_rating_percentage { display: none !important; }
.cs_stars { line-height: 1; }

/* ======================
   11. CARDS — Services
   ====================== */
.cs_card_style_1 .cs_card_thumbnail     { aspect-ratio: 16/9; overflow: hidden; }
.cs_card_style_1 .cs_card_thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs_card_style_1:hover .cs_card_info    { border-bottom: 3px solid #F38B00; }
.cs_cta_btn_white {
  background: #F38B00 !important; color: #fff !important;
  border: none !important; font-weight: 700 !important;
}
.cs_cta_btn_white:hover { background: #D47200 !important; color: #fff !important; }

/* ======================
   12. CARDS — Promo
   ====================== */
.cs_card_style_4                          { position: relative; }
.cs_card_style_4::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.4) 100%);
  border-radius: inherit; z-index: 0;
}
.cs_card_style_4 .cs_card_text,
.cs_card_style_4 .cs_btn_style_1         { position: relative; z-index: 1; }
.cs_card_style_4 .cs_card_title          { color: #fff !important; white-space: nowrap !important; font-size: 26px !important; }
@media (max-width: 575px) {
  .cs_card_style_4 .cs_card_title        { white-space: normal !important; font-size: 22px !important; }
}
.cs_card_style_4 .cs_card_subtitle       { color: rgba(255,255,255,.9) !important; line-height: 1.4 !important; }
.cs_card_style_4 .cs_btn_style_1.cs_accent_bg { color: #fff !important; }

/* ======================
   13. STEPS THUMBNAILS
   ====================== */
.cs_step_thumbnail     { aspect-ratio: 4/3; overflow: hidden; }
.cs_step_thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ======================
   14. TESTIMONIALS
   ====================== */
.cs_avatar_icon     { width: 48px; height: 48px; overflow: hidden; }
.cs_avatar_icon img { width: 100%; height: 100%; object-fit: cover; }

/* ======================
   15. SLIDER DOTS
   ====================== */
.cs_pagination .slick-dots li.slick-active button { background-color: #F38B00 !important; }

/* ======================
   16. VECTOR SHAPES
   ====================== */
.cs_vectoe_shape1 svg path,
.cs_vector_shape1 img,
.cs_vector_shape2 img { opacity: 0.15; }


/* =============================================
   HERO — Standalone (Tailwind split-image)
   ============================================= */

.hero {
  position: relative; background: #fff;
  width: 100vw; margin-left: calc(-50vw + 50%);
  margin-top: -24px;
}
@media (max-width: 1199px) { .hero { margin-top: -20px; } }
@media (max-width: 991px)  { .hero { margin-top: 0; } }

/* Header */
.hero__header       { position: absolute; inset: 0 0 auto 0; z-index: 50; }
.hero__header-inner { max-width: 1280px; margin: 0 auto; }
.hero__header-left  { padding: 24px 24px 0; }
@media (min-width: 992px) {
  .hero__header-left { width: 50%; padding: 24px 32px 0; box-sizing: border-box; }
}
.hero__nav { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; }
@media (min-width: 992px) { .hero__nav { justify-content: flex-start; } }
.hero__logo { width: 180px; margin-bottom: 20px; display: block; }
.hero__menu-toggle { background: none; border: none; color: #444; cursor: pointer; padding: 6px; }
@media (min-width: 992px) { .hero__menu-toggle { display: none; } }
.hero__nav-links { display: none; }
@media (min-width: 992px) { .hero__nav-links { display: flex; gap: 28px; margin-left: 48px; } }
.hero__nav-links a { font-size: 14px; font-weight: 600; color: #111; text-decoration: none; transition: color .15s; }
.hero__nav-links a:hover { color: #F38B00; }

/* Body */
.hero__body           { position: relative; }
.hero__body-container { max-width: 1280px; margin: 0 auto; }
.hero__left           { position: relative; z-index: 10; width: 100%; }
@media (min-width: 992px) { .hero__left { width: 50%; max-width: 50%; display: flex; align-items: center; min-height: 100vh; } }

/* Diagonal */
.hero__clip { display: none; }
@media (min-width: 992px) {
  .hero__clip { display: block; position: absolute; top: 0; bottom: 0; right: -160px; width: 320px; height: 100%; z-index: 1; }
}

/* Content */
.hero__content { position: relative; z-index: 2; max-width: 560px; padding: 100px 24px 48px; }
@media (min-width: 992px)  { .hero__content { padding: 40px 0 40px 32px; } }
@media (min-width: 1400px) { .hero__content { padding: 40px 0 40px 32px; } }
@media (min-width: 576px) and (max-width: 991px) { .hero__content { padding-top: 140px; } }

.hero__pill {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  border: 1px solid #e0e0e0; font-size: 13px; font-weight: 500; color: #666; text-transform: uppercase;
  margin-bottom: 28px;
}
.hero__title {
  font-size: clamp(30px, 5vw, 52px); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.025em;
  color: #111; margin: 0 0 24px;
}
.hero__title span { color: #F38B00; }
.hero__desc { font-size: 17px; line-height: 1.65; color: #666; margin: 0 0 36px; }
.hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.hero__btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; background: #F38B00; color: #fff !important;
  font-size: 14px; font-weight: 700; border-radius: 8px;
  text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: background .15s;
}
.hero__btn-primary:hover { background: #D47200; }
.hero__btn-text { font-size: 14px; font-weight: 600; color: #333; text-decoration: none; transition: color .15s; }
.hero__btn-text:hover { color: #F38B00; }
.hero__social-proof { display: flex; align-items: center; gap: 8px; }
.hero__stars { color: #F38B00; font-size: 18px; letter-spacing: 2px; line-height: 1; transform: translateY(-4px); }
.hero__stars-label { font-size: 14px; font-weight: 500; color: #999; }
.hero__sap { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.hero__sap-img { height: 56px; width: auto; display: block; }
.hero__sap-label { font-size: 12px; font-weight: 500; color: #777; line-height: 1.3; max-width: 180px; }

/* Image */
.hero__image     { background: #f3f4f6; }
.hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) {
  .hero__image { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
  .hero__body  { min-height: 100vh; }
}
@media (max-width: 991px) {
  .hero__image { aspect-ratio: 3/2; }
  .hero__body  { min-height: auto; }
}


/* =============================================
   PRE-FOOTER CTA
   ============================================= */

.cs_prefooter_cta  { background: #fff; }
.cs_prefooter_card {
  display: flex; align-items: stretch; gap: 48px;
  background: rgba(255,255,255,.9); padding: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.05);
}
.cs_prefooter_img     { flex: none; width: 320px; object-fit: cover; border-radius: 16px; }
.cs_prefooter_content { flex: 1; }
.cs_prefooter_content h2,
.cs_prefooter_content p,
.cs_prefooter_content strong { font-weight: 700; letter-spacing: -0.025em; }
.cs_prefooter_content p { font-weight: 500; }
.cs_prefooter_list    { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.cs_prefooter_list li { display: flex; align-items: center; gap: 8px; color: #333; font-size: 15px; font-weight: 500; }
.cs_prefooter_list li svg { flex-shrink: 0; }
.cs_prefooter_cta_link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; background: #F38B00; color: #fff !important;
  font-weight: 700; font-size: 16px; border-radius: 8px; border: none;
  text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: background .15s;
}
.cs_prefooter_cta_link:hover { background: #D47200; color: #fff !important; }
@media (max-width: 991px) {
  .cs_prefooter_card { flex-direction: column; padding: 24px; gap: 24px; }
  .cs_prefooter_img  { width: 100%; max-height: 240px; }
  .cs_prefooter_list { grid-template-columns: 1fr; }
}


/* =============================================
   SIMPLE FOOTER
   ============================================= */

.cs_footer_simple       { background: #fff; padding: 32px 0; border-top: 1px solid #eee; }
.cs_footer_legalnote    { font-size: 11px; color: #888; line-height: 1.5; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; word-wrap: break-word; }
.cs_footer_simple_inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.cs_footer_simple_social       { display: flex; gap: 16px; order: 2; }
.cs_footer_simple_social a     { color: #666; transition: color .2s; }
.cs_footer_simple_social a:hover { color: #F38B00; }
.cs_footer_simple_copy         { order: 1; margin: 0; font-size: 14px; color: #666; }
.cs_footer_simple_copy a       { color: #666; text-decoration: none; transition: color .2s; }
.cs_footer_simple_copy a:hover { color: #F38B00; }
@media (max-width: 767px) {
  .cs_footer_simple_inner  { flex-direction: column; text-align: center; }
  .cs_footer_simple_social { order: 1; }
  .cs_footer_simple_copy   { order: 2; }
}

/* ======================
   CONTACT FORM PAGE
   ====================== */
/* Neutraliser le wrapper parent sur la page contact */
.cs_custom_content_wrapper:has(.cf_section) {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
/* Masquer preloader et scroll-up sur la page contact */
body:has(.cf_section) .cs_preloader,
body:has(.cf_section) .cs_scrollup { display: none !important; }

.cf_section {
  height: 100vh;
  background: var(--lightest-blue);
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
}
.cf_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* --- Left column --- */
.cf_left {
  padding: 48px 48px 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.cf_logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 32px;
}
.cf_logo_img { height: 56px; width: auto; }
.cf_logo_text {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}
.cf_left_title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 16px;
  line-height: 1.2;
}
.cf_left_text {
  font-size: 15px;
  color: var(--secondary-color);
  line-height: 1.6;
  margin: 0 0 8px;
}

/* Badges grid */
.cf_badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.cf_badge {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .2s;
}
.cf_badge:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.cf_badge_icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0 !important;
}
/* Picto crédit d'impôt : cercle + tag "IMMÉDIAT" */
.cf_badge:first-child {
  overflow: visible;
}
.cf_badge:first-child .cf_badge_icon {
  width: 56px;
  height: 56px;
  margin: -6px 0 -6px -4px;
}
.cf_badge_body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cf_badge_number {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1.1;
}
.cf_badge_text {
  font-size: 12.5px;
  color: var(--secondary-color);
  line-height: 1.35;
}

/* --- Right column (form) --- */
.cf_right {
  background: #fff;
  padding: 48px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #eee;
  overflow-y: auto;
}
.cf_right form {
  width: 100%;
  max-width: 480px;
}
.cf_form_title {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 24px;
  line-height: 1.3;
}

/* Fieldset & legend */
.cf_fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
.cf_legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 10px;
  display: block;
}

/* Card-style checkboxes/radios */
.cf_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cf_card_option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 2px solid #eee;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-size: 14px;
  color: var(--primary-color);
}
.cf_card_option:hover { border-color: #ddd; background: #fafafa; }
.cf_card_option input { display: none; }
.cf_card_option input:checked + .cf_card_label { font-weight: 600; }
.cf_card_option:has(input:checked) {
  border-color: var(--accent-color);
  background: #FFF8F0;
}

/* Radio row (Oui/Non) */
.cf_radio_row {
  display: flex;
  gap: 10px;
}
.cf_card_option--small { flex: 1; justify-content: center; }

/* Text inputs */
.cf_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cf_field {
  margin-bottom: 14px;
}
.cf_field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 5px;
}
.cf_field input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Quicksand', sans-serif;
  color: var(--primary-color);
  background: #fafafa;
  outline: none;
  transition: border-color .2s;
}
.cf_field input::placeholder { color: #bbb; }
.cf_field input:focus { border-color: var(--accent-color); background: #fff; }
.cf_field input:invalid:not(:placeholder-shown) { border-color: #e74c3c; }

/* Error messages */
.cf_error_msg {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Action buttons */
.cf_actions { margin-top: 20px; }
.cf_actions--split {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cf_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Quicksand', sans-serif;
  cursor: pointer;
  transition: all .2s;
  border: none;
  text-decoration: none;
}
.cf_btn--next,
.cf_btn--submit {
  background: var(--accent-color);
  color: #fff;
  width: 100%;
}
.cf_btn--next:hover,
.cf_btn--submit:hover { background: #D47200; }
.cf_btn--submit:disabled { opacity: .6; pointer-events: none; }

.cf_btn--prev {
  background: transparent;
  color: var(--secondary-color);
  border: 2px solid #eee;
  flex-shrink: 0;
}
.cf_btn--prev:hover { border-color: #ccc; }

/* Merci step */
.cf_step--merci { text-align: center; padding: 32px 0; }
.cf_merci_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFF3E0;
  color: var(--accent-color);
  margin-bottom: 20px;
}
.cf_merci_title {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 12px;
}
.cf_merci_text {
  font-size: 15px;
  color: var(--secondary-color);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Page de confirmation /contact/merci/ — la conversion Piwik se detecte sur
   l'URL de cette page via ?form_anode= (LFTF §4), d'ou une vraie page plutot
   qu'une derniere etape affichee sur place. */
.cf_section--merci {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.cf_merci_page {
  width: 100%;
  max-width: 520px;
  text-align: center;
}
/* display:flex (et non inline-flex) pour que le picto de confirmation passe
   a la ligne au lieu de se coller au logo. */
.cf_merci_page .cf_logo {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.cf_btn--merci { width: auto; }

/* Zone de clic LFTF regle 5 : les enfants (img, span, svg) ne doivent pas capter
   le clic, sinon event.target n'est pas l'element porteur de l'ID LFTF et le
   Tag Manager ne voit rien sur une partie de la surface visiblement cliquable. */
.cf_logo > *,
.cs_btn_style_1 > *,
.cs_card_style_1 > *,
.hero__logo > *,
.cs_footer_social_link > * { pointer-events: none; }

/* Contrepartie : style.css a un `.cs_card_style_1 .cs_card_title:hover` qui ne
   peut plus se déclencher (le titre ne reçoit plus le survol). On le rattache
   au survol de la carte — même effet visuel, sur toute la surface. */
.cs_card_style_1:hover .cs_card_title { color: var(--dark-blue); }

/* --- Mobile --- */
@media (max-width: 991px) {
  .cf_section {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .cf_container {
    grid-template-columns: 1fr;
    height: auto;
  }
  .cf_left {
    padding: 32px 24px;
    overflow-y: visible;
  }
  .cf_right {
    padding: 32px 24px;
    border-left: none;
    border-top: 1px solid #eee;
    overflow-y: visible;
  }
}
@media (max-width: 575px) {
  .cf_cards { grid-template-columns: 1fr; }
  .cf_row { grid-template-columns: 1fr; }
  .cf_badges { grid-template-columns: 1fr; }
  .cf_actions--split { flex-direction: column; }
  .cf_btn--prev { order: 2; width: 100%; }
  .cf_btn--submit { order: 1; }
}