/* =========================================
   1. SETTINGS & VARIABLES
   ========================================= */
:root {
  /* Palette */
  --color-primary: #0d0b9c;
  --color-primary-hover: #0a0870;
  --color-text-main: #232323;
  --color-text-secondary: #555555;
  --color-text-inverse: #ffffff;

  /* Backgrounds */
  --bg-white: #ffffff;
  --bg-light: #f4f5f7;
  --bg-accent: #0d0b9c;
  --bg-dark: #232323;
  --bg-card-placeholder: #eeeeee;

  /* Dimensions & Spacing */
  --container-width: 1465px;
  --container-minidesktop-width: 1200px;
  --container-maxtablet-width: 900px;
  --container-mintablet-width: 650px;
  --header-height: 80px; /* Compensate padding-top */

  --spacing-section: 100px; /* Standard section padding */
  --spacing-section-sm: 50px;
  --spacing-gap: 30px;

  /* Radii */
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-round: 50px;

  /* Typography Scale */
  --fs-display: 90px; /* Hero Title */
  --fs-h2: 50px; /* Section Titles */
  --fs-h3: 40px; /* Unique Titles */
  --fs-card-title: 32px;
  --fs-body: 17px;
  --fs-small: 14px;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-hover: 0.2s ease-out;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden; /* Скрывает всё, что вылезает по горизонтали */
  width: 100%; /* Гарантирует, что страница занимает всю ширину */
  max-width: 100%; /* Страховка от растягивания */
  position: relative; /* Помогает избежать проблем с позиционированием */
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lexend", sans-serif;
  color: var(--color-text-main);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-hover);
}

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

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
  text-align: left;
}

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

/* Text Balancing */
h1,
h2,
h3,
.mv-title,
.mv-story-title,
.mv-reviews-title {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

.dark-bg:hover {
  color: #ffffff;
}

/* =========================================
   3. LAYOUT SYSTEM (Global Containers)
   ========================================= */

/* Unified Section Padding */
.mv-logos-section,
.mv-story-section,
.mv-reviews-section,
.mv-services-section,
.mv-storage-section,
.mv-care-section,
.mv-stories-section,
.mv-intention-section,
.mv-faq-section,
.mv-moments-section {
  background-color: var(--bg-light);
  padding-bottom: var(--spacing-section);
}
.mv-intention-section,
.mv-stories-section {
  padding-top: var(--spacing-section);
}

/* Unified Container Logic */
.mv-hero-container,
.mv-logos-container,
.mv-story-container,
.mv-reviews-container,
.mv-services-container,
.mv-storage-container,
.mv-care-container,
.mv-unique-container,
.mv-stories-container,
.mv-trust-container,
.mv-intention-container,
.mv-faq-container,
.mv-moments-container,
.mv-purpose-container {
  max-width: var(--container-width);
  margin: 0 auto;
  width: 100%;
  padding-left: 20px; /* Safety gutters for smaller screens */
  padding-right: 20px;
}

/* Unified Headers Spacing */
.mv-reviews-header,
.mv-services-header,
.mv-storage-header,
.mv-care-header,
.mv-stories-header,
.mv-faq-header,
.mv-moments-header,
.mv-purpose-header {
  margin-bottom: 40px;
}

/* =========================================
   4. TYPOGRAPHY SYSTEM
   ========================================= */

/* Standard Section Titles (H2 equivalent) */
.mv-story-title,
.mv-reviews-title,
.mv-services-title,
.mv-storage-title,
.mv-care-title,
.mv-stories-title,
.mv-intention-title,
.mv-faq-title,
.mv-moments-title,
.mv-purpose-title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1; /* Slightly tighter for large text */
  letter-spacing: -1px;
  color: var(--color-text-main);
  margin-bottom: 20px;
  max-width: 800px;
}

/* Standard Body Text */
.mv-description,
.mv-story-desc,
.mv-reviews-subtitle,
.mv-services-description,
.mv-storage-subtitle,
.mv-care-subtitle,
.mv-stories-subtitle,
.mv-intention-description,
.mv-intention-text,
.mv-faq-subtitle,
.mv-moments-subtitle,
.mv-purpose-subtitle,
.mv-storage-card-text,
.mv-care-card-text,
.mv-service-text {
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--color-text-secondary); /* Unified secondary color */
  font-weight: 300;
}

/* Overlines (Small uppercase labels) */
.mv-reviews-overline,
.mv-services-overline,
.mv-storage-overline,
.mv-care-overline,
.mv-stories-overline,
.mv-intention-overline,
.mv-faq-overline,
.mv-moments-overline,
.mv-purpose-overline {
  font-size: var(--fs-small);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: block;
}

/* =========================================
   5. COMPONENT SYSTEM
   ========================================= */

/* --- Buttons --- */
.mv-btn,
.mv-story-btn,
.mv-intention-btn,
.floating-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  font-weight: 600; /* Standardized weight */
  transition:
    transform 0.2s,
    background-color 0.2s,
    color 0.2s;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

/* Primary Filled Button */
.mv-btn,
.mv-intention-btn,
.floating-cta-button {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 16px 24px;
  border: none;
  font-size: 16px;
}

.mv-btn:hover,
.mv-intention-btn:hover,
.floating-cta-button:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Outline Button */
.mv-story-btn {
  padding: 14px 24px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  height: 58px;
}

.mv-story-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* --- Cards Base --- */
/* Common behavior for all hoverable cards */
.mv-review-card,
.mv-service-card,
.mv-storage-card,
.mv-care-card,
.mv-moment-card,
.mv-story-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
  background-color: var(--bg-white);
}

.mv-review-card:hover,
.mv-service-card:hover,
.mv-storage-card:hover {
  transform: translateY(-5px);
}

/* --- Icons --- */
/* Unified logic for icon circles */
.mv-storage-icon,
.mv-care-icon,
.mv-intention-icon,
.mv-service-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

/* --- Swiper / Sliders --- */
.mv-services-slider,
.mv-stories-slider,
.mv-reviews-slider,
.mv-purpose-slider,
.mv-moments-slider {
  width: 100%;
  overflow: visible;
  padding-bottom: 20px;
}

.swiper-slide {
  flex-shrink: 0;
  height: auto; /* Ensure flex height works */
}

/* Controls Wrapper */
.mv-services-controls,
.mv-stories-controls,
.mv-reviews-controls,
.mv-moments-controls,
.mv-purpose-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}

/* Arrows Group */
.mv-services-arrows,
.mv-stories-arrows,
.mv-reviews-arrows,
.mv-moments-arrows,
.mv-purpose-arrows {
  display: flex;
  gap: 15px;
}

/* Navigation Buttons */
.arrow-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  color: var(--color-text-main);
}

.arrow-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Pagination Dots */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ddd;
  transition: var(--transition-base);
  opacity: 1;
  margin: 0 4px !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  width: 24px;
  border-radius: 4px;
}

/* Native dot containers hidden/reset */
.mv-services-dots,
.mv-stories-dots,
.mv-reviews-dots,
.mv-moments-dots,
.mv-purpose-dots {
  display: flex;
  margin-right: auto;
  width: auto !important;
  position: static !important;
}

/* =========================================
   6. SECTION SPECIFICS (Exceptions)
   ========================================= */

/* --- Hero Section --- */
.mv-hero-section {
  padding-bottom: var(--spacing-section-sm);
  background-color: var(--bg-light);
}
.mv-hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding-top: 20px;
}
.mv-content {
  flex: 1;
}
.mv-title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -5px;
  text-transform: uppercase;
  margin: 40px 0 32px -4px;
  color: var(--color-text-main);
  max-width: 650px;
}
.mv-hero-section .mv-description {
  margin-bottom: 36px;
  max-width: 480px;
  color: #222;
}
.mv-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mv-rating {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mv-rating__score {
  font-size: 20px;
  font-weight: 500;
}
.mv-disclaimer {
  font-size: 12px;
  color: #222;
  display: block;
}
.mv-image-col {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}
.mv-image-wrapper {
  width: 530px;
  height: 510px;
  border-radius: 32px; /* Specific radius */
  overflow: hidden;
}
.mv-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Logos Section --- */
.mv-logos-section {
  padding-bottom: 144px; /* Unique padding */
}
.mv-logos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  column-gap: 150px;
  row-gap: 40px;
}
.mv-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-logo-mask {
  width: 100%;
  height: 70px;
  background-color: #232323;
  -webkit-mask: var(--src) no-repeat center / contain;
  mask: var(--src) no-repeat center / contain;
  transition: 0.3s;
}
.katkin {
  width: 80%;
}

/* --- Story Section --- */
.mv-story-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 150px;
  align-items: center;
}
.mv-story-image-card {
  border-radius: 32px;
  overflow: hidden;
  height: 590px;
  width: 590px;
  background-color: var(--bg-card-placeholder);
  margin-left: 30px;
}
.mv-story-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-story-title {
  font-size: 50px; /* Keep strict override if needed, or rely on H2 group */
  margin-bottom: 24px;
}
.mv-story-desc {
  margin-bottom: 14px;
}
.mv-story-list {
  display: grid;
  margin-bottom: 24px;
}
.mv-story-list li {
  font-size: 16px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 30px;
}
.mv-story-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

/* --- Reviews Section --- */
.mv-reviews-slider-wrapper {
  width: 100%;
  padding-bottom: 10px;
}
.mv-review-card {
  width: 334px;
  padding: 30px;
  border: 1px solid #0d0b9c30;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  font-weight: 300;
}
.mv-review-text {
  margin-bottom: 20px;
}
.mv-review-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mv-review-author,
.mv-review-rating {
  font-weight: 500;
  font-size: var(--fs-small);
}
.mv-review-rating {
  color: var(--color-primary);
}

/* --- Services Section --- */
.mv-service-card {
  width: 455px; /* Fixed width per design req */
  height: 666px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  position: relative;
}
.mv-service-card__content {
  padding: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mv-service-card__top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  width: 100%;
}
.mv-service-tag {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  background: var(--bg-light);
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-primary);
}
.mv-service-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-light);
  color: var(--color-text-main);
  transition: 0.3s;
}
.mv-service-card:hover .mv-service-arrow {
  background-color: var(--color-primary);
  color: #fff;
}
.mv-service-title {
  font-size: var(--fs-card-title);
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 1;
}
.mv-service-card__image {
  height: 400px;
  width: 100%;
  padding: 0 20px 20px;
}
.mv-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.mv-service-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --- Storage Section --- */
.mv-storage-grid {
  display: flex;
  gap: 30px;
}
.mv-storage-card {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mv-storage-icon {
  width: 60px;
  height: 60px;
  background-color: #f0f2ff;
  border-radius: 50%;
  margin-bottom: 30px;
}
.mv-storage-card-title {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 15px;
}
.mv-storage-card-text {
  margin-bottom: 30px;
  flex: 1;
}
.mv-storage-link {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: 4px;
  line-height: 1;
}
.mv-storage-link:hover {
  color: var(--bg-dark);
}

/* --- Care Section --- */
.mv-care-card {
  padding: 40px;
  border-radius: var(--radius-md);
}
.mv-care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.mv-care-icon {
  margin-bottom: 20px;
  justify-content: flex-start;
}
.mv-care-card-title {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}

/* --- Unique Section --- */
.mv-unique-section {
  padding: 100px 0;
  background-color: var(--bg-accent);
  color: var(--color-text-inverse);
}
.mv-unique-image-wrapper {
  width: 100%;
  height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.1);
}
.mv-unique-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.mv-unique-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.mv-unique-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 400;
  color: var(--bg-white);
}
.mv-unique-description p {
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.7;
  margin-top: 12px;
  color: #fff;
  font-weight: 300;
}

/* --- Stories Grid/Cards (Swiper) --- */
.mv-story-card {
  width: 455px;
  height: 453px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  background-color: var(--bg-card-placeholder);
  position: relative;
}
.mv-story-card--solid {
  background-color: var(--color-primary);
}
.mv-story-card--image {
  background-color: #000;
}
.mv-story-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mv-story-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-story-card--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.mv-story-logo-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  z-index: 2;
  text-align: center;
}
.mv-story-card-desc {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.mv-story-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.mv-story-card__arrow,
.mv-story-quote-tag {
  display: none;
}

/* --- Trust Section --- */
.mv-trust-section {
  background-color: var(--bg-accent);
  color: var(--color-text-inverse);
  padding: 100px 0;
}
.mv-trust-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.mv-trust-title {
  font-size: 44px;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
  color: var(--bg-white);
}
.mv-trust-link {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--bg-white);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mv-trust-link:hover {
  transform: translateY(-2px);
  color: var(--bg-light);
}

/* --- Intention Section --- */
.mv-intention-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.mv-intention-left {
  position: sticky;
  top: 140px;
}
.mv-intention-btn {
  padding: 18px 36px;
  margin-top: 30px;
}
.mv-intention-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mv-intention-item {
  display: flex;
  gap: 21px;
  align-items: flex-start;
  background: white;
  padding: 29px 32px;
  border-radius: 20px;
}
.mv-intention-icon {
  flex-shrink: 0;
  height: 32px;
}
.mv-intention-name {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 10px;
}

/* --- FAQ Section --- */
.mv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 120px;
}
.mv-faq-question {
  position: sticky;
  top: 0;
  background-color: var(--bg-white);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
.mv-faq-question::-webkit-details-marker {
  display: none;
}
.mv-faq-icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: block;
}
.mv-faq-icon::before,
.mv-faq-icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-text-main);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.mv-faq-icon::before {
  width: 14px;
  height: 2px;
}
.mv-faq-icon::after {
  width: 2px;
  height: 14px;
}
details[open] .mv-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.mv-faq-answer {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  font-weight: 300;
  background: white;
  margin-top: -10px;
  padding: 24px;
  border-radius: 0 0 12px 12px;
}
.mv-faq-answer p {
  max-width: 1000px;
}
.mv-faq-image-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Moments Section --- */
.mv-moment-card {
  width: 334px;
  height: 460px;
  border-radius: var(--radius-md);
  background-color: var(--bg-card-placeholder);
}
.mv-moment-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Purpose Section --- */
.mv-purpose-section {
  padding: 100px 0;
  background-color: var(--bg-dark);
  color: #fff;
}
.mv-purpose-overline {
  color: rgba(255, 255, 255, 0.5);
}
.mv-purpose-title {
  color: var(--bg-white);
  line-height: 1;
}
.mv-purpose-subtitle {
  color: #fff;
}
.mv-purpose-card {
  width: 334px;
  display: flex;
  flex-direction: column;
}
.mv-purpose-image {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #333;
  position: relative;
}
.mv-purpose-image img {
  width: 104%;
  height: 104%;
  object-fit: cover;
}
.mv-purpose-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.mv-purpose-overlay-text span {
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.mv-purpose-image--light {
  background-color: #fff;
  color: #111;
  padding: 20px;
}
.mv-purpose-label {
  font-weight: 500;
  font-size: var(--fs-body);
  z-index: 2;
}
.mv-purpose-graphic {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 60%;
  background: linear-gradient(to bottom, var(--color-primary), #88f);
  border-top-left-radius: 100%;
}
.mv-purpose-image--brand {
  background-color: var(--color-primary);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mv-purpose-brand-logo {
  font-weight: 500;
  font-size: 20px;
  color: #fff;
}
.mv-purpose-date {
  font-size: 32px;
  color: #fff;
}
.mv-purpose-content p {
  font-size: var(--fs-body);
  color: #fff;
  font-weight: 300;
  line-height: 1.3;
}
/* Controls Override for Dark Section */
.mv-purpose-arrows .arrow-btn {
  border: 1px solid #575757;
  color: #ffffff;
}

/* --- Floating & Footer Components --- */
.floating-cta-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1005;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.accordion-item__header {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.accordion-item__title {
  font-size: var(--fs-body);
  font-weight: 600;
}
.accordion-item__icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: block;
}
.accordion-item__icon::before,
.accordion-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.accordion-item__icon::before {
  width: 12px;
  height: 2px;
}
.accordion-item__icon::after {
  width: 2px;
  height: 12px;
}
.accordion-item__header[aria-expanded="true"] .accordion-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion-item__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-item__content-inner {
  padding-top: 10px;
  padding-bottom: 20px;
}
.footer-navigation__accordion {
  display: none;
}

/* =========================================
   7. MEDIA QUERIES
   ========================================= */
@media (max-width: 1500px) {
  .mv-hero-container,
  .mv-logos-container,
  .mv-story-container,
  .mv-reviews-container,
  .mv-services-container,
  .mv-storage-container,
  .mv-care-container,
  .mv-unique-container,
  .mv-stories-container,
  .mv-trust-container,
  .mv-intention-container,
  .mv-faq-container,
  .mv-moments-container,
  .mv-purpose-container {
    max-width: var(--container-minidesktop-width);
  }

  .mv-logos-grid {
    column-gap: 80px;
  }
  .mv-story-image-card {
    height: 550px;
    width: 500px;
    margin-left: 0;
  }
  .mv-review-card {
    width: 267px;
  }
  .mv-service-card {
    width: 366px;
    height: 580px;
  }
  .mv-story-card {
    width: 366px;
    height: 366px;
  }
  .mv-moment-card {
    width: 267px;
    height: 367px;
  }
  .mv-purpose-card {
    width: 267px;
  }
}

@media (max-width: 1240px) {
  .mv-hero-container,
  .mv-logos-container,
  .mv-story-container,
  .mv-reviews-container,
  .mv-services-container,
  .mv-storage-container,
  .mv-care-container,
  .mv-unique-container,
  .mv-stories-container,
  .mv-trust-container,
  .mv-intention-container,
  .mv-faq-container,
  .mv-moments-container,
  .mv-purpose-container {
    max-width: var(--container-maxtablet-width);
  }
  .mv-story-title,
  .mv-reviews-title,
  .mv-services-title,
  .mv-storage-title,
  .mv-care-title,
  .mv-stories-title,
  .mv-intention-title,
  .mv-faq-title,
  .mv-moments-title,
  .mv-purpose-title {
    font-size: 40px;
  }
  .mv-title {
    font-size: 70px;
  }
  .mv-image-wrapper {
    width: 400px;
    height: 400px;
  }
  .mv-logos-grid {
    column-gap: 0;
  }
  .mv-logos-section {
    padding-bottom: var(--spacing-section);
  }
  .mv-story-container {
    gap: 80px;
  }
  .mv-story-image-card {
    height: 500px;
    width: 400px;
  }
  .mv-service-title {
    font-size: 26px;
  }
  .mv-service-card__content {
    padding: 30px;
  }
  .mv-service-card {
    width: 267px;
    height: 520px;
  }
  .mv-unique-image-wrapper {
    height: 390px;
  }
  .mv-story-card {
    width: 267px;
    height: 267px;
  }
  .mv-intention-item {
    padding: 32px;
  }
}

@media (max-width: 920px) {
  .mv-hero-container,
  .mv-logos-container,
  .mv-story-container,
  .mv-reviews-container,
  .mv-services-container,
  .mv-storage-container,
  .mv-care-container,
  .mv-unique-container,
  .mv-stories-container,
  .mv-trust-container,
  .mv-intention-container,
  .mv-faq-container,
  .mv-moments-container,
  .mv-purpose-container {
    max-width: var(--container-mintablet-width);
    padding-left: 15px;
    padding-right: 15px;
  }
  .mv-hero-container {
    flex-direction: column;
    gap: 40px;
  }
  .mv-image-wrapper {
    width: 100%;
    height: auto;
  }
  .mv-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 60px;
  }
  .mv-story-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .mv-story-image-card {
    height: 500px;
    width: 100%;
  }
  .mv-story-image-card img {
    object-fit: cover;
    object-position: top;
  }
  .mv-review-card {
    width: 295px;
  }
  .mv-service-card {
    width: 100%;
    height: auto;
  }
  .mv-storage-grid {
    flex-direction: column;
  }
  .mv-unique-image-wrapper {
    height: auto;
    width: 100%;
  }
  .mv-unique-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mv-story-card {
    width: 295px;
    height: 295px;
  }
  .mv-intention-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .mv-intention-left {
    position: static;
    top: auto;
  }
  .mv-moment-card {
    width: 295px;
    height: 405px;
  }
  .mv-purpose-card {
    width: 295px;
  }
}

@media (max-width: 680px) {
  .mv-review-card {
    width: 100%;
  }
  .mv-story-card {
    width: 100%;
    height: 350px;
  }
  .mv-moment-card {
    width: 100%;
    height: auto;
  }
  .mv-purpose-card {
    width: 100%;
  }
}

@media (max-width: 560px) {
  :root {
    --fs-display: 42px;
    --fs-h2: 32px;
    --fs-h3: 28px;
    --fs-card-title: 24px;

    --fs-body: 16px;
    --fs-small: 13px;

    --spacing-section: 60px;
    --spacing-gap: 20px;
  }

  .mv-story-title,
  .mv-reviews-title,
  .mv-services-title,
  .mv-storage-title,
  .mv-care-title,
  .mv-stories-title,
  .mv-intention-title,
  .mv-faq-title,
  .mv-moments-title,
  .mv-purpose-title {
    font-size: 36px;
  }

  .mv-title {
    font-size: 50px;
    letter-spacing: -1px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .mv-care-grid {
    grid-template-columns: 1fr;
  }

  .mv-trust-title {
    font-size: 32px;
  }
  .mv-logos-grid {
    row-gap: 20px;
    column-gap: 0;
  }
  .mv-trust-section,
  .mv-unique-section {
    padding: 60px 0;
  }
  .mv-faq-question {
    gap: 20px;
  }
}

a.mv-review-card {
  text-decoration: none; 
  color: inherit; 
  display: block; 
}