/* ==========================================================================
   Why SOL 랜딩 (templates/template-why-sol.php)
   Desktop (>= 1090px) reproduces the Figma frame "why-sol-new".
   Below 1090px the layout is re-flowed (tablet), below 640px it is tuned
   for phones. Every rule is scoped to .why-sol so the theme header/footer
   are not affected.
   ========================================================================== */

/* ---------- Design tokens (from Figma variables) ---------- */
.why-sol {
  --yellow: #fecd08;      /* Primary/Yellow */
  --yellow-dark: #e4b907; /* Primary/Yellow, hover state */
  --white: #ffffff;       /* Primary/White  */
  --black: #000000;       /* Primary/Black  */
  --ink: #1d1d1c;         /* Grey/Grey #1   */
  --grey: #6d7885;        /* Grey/Grey #2   */
  --line: #cdd0d3;        /* Grey/Grey #3   */
  --soft: #f2f2f2;        /* Grey/Grey #4   */
  --name: #181d27;        /* reviewer name  */

  --font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-latin: "Inter", "Noto Sans KR", sans-serif;
}

/* ---------- Base (theme base.css sets weights/margins on headings) ---------- */
.why-sol {
  background: var(--white);
  color: var(--ink);
  font: 400 16px/24px var(--font);
  word-break: normal;
  overflow-wrap: break-word;
  letter-spacing: -0.18px;
  -webkit-font-smoothing: antialiased;
}
.why-sol *, .why-sol *::before, .why-sol *::after { box-sizing: border-box; }
.why-sol h2, .why-sol h3, .why-sol p, .why-sol ul, .why-sol figure { margin: 0; padding: 0; }
.why-sol section { position: static; padding: 0; }   /* theme base.css pads every <section> */
.why-sol h2, .why-sol h3 { color: inherit; letter-spacing: inherit; }
.why-sol ul { list-style: none; }
.why-sol img { display: block; max-width: 100%; }
.why-sol a { color: inherit; }
.why-sol button { font: inherit; color: inherit; }
.why-sol [hidden] { display: none !important; }
.why-sol :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* description fields come from the WYSIWYG editor */
.why-sol .section-desc a { text-decoration: underline; }

/* ---------- Page frame ---------- */
.why-sol .page {
  display: flex;
  flex-direction: column;
  gap: 132px;
  max-width: 1090px;             /* 1042px content + 24px gutters */
  margin: 0 auto;
  padding: 96px 24px 133px;      /* top reduced: the theme page header sits above */
}

.why-sol .sections {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* 1px divider that takes no layout space (matches Figma 0-height lines) */
.why-sol .rule {
  height: 0;
  margin: -1px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.why-sol .rule--hero { border-top-color: var(--grey); }

/* ---------- Type ---------- */
.why-sol .section-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 760px;
}

.why-sol .section-title {
  margin: 0;                     /* theme base.css: .section-title { text-align:center; margin-bottom } */
  text-align: left;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -1.1px;
}
.why-sol .num { color: var(--yellow); }

.why-sol .section-desc > p + p { margin-top: 24px; }   /* the blank line between paragraphs in Figma */
.why-sol .section-desc strong { font-weight: 700; }

.why-sol .text-link { text-decoration: underline; }

/* ---------- Button ---------- */
.why-sol .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 31px;            /* + 1px border = Figma 12/32, height 48 */
  border: 1px solid var(--black);
  border-radius: 30px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.why-sol .btn:hover { background: var(--soft); }
.why-sol .btn img { width: 20px; height: 20px; }
.why-sol .btn__logo { display: grid; place-items: center; width: 24px; height: 24px; }
.why-sol .btn__logo img { width: 24px; height: auto; }

.why-sol .btn--primary { border-color: var(--yellow); background: var(--yellow); }
.why-sol .btn--primary:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); }

.why-sol .free__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Hero ---------- */
.why-sol .hero-block { display: flex; flex-direction: column; gap: 48px; }
.why-sol .hero { display: flex; flex-direction: column; gap: 24px; }

.why-sol .hero__title {
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -1.3px;
}
.why-sol .hero__title span { display: block; color: var(--grey); }
.why-sol .hero__desc { max-width: 760px; }

.why-sol .stats { display: flex; align-items: center; gap: 72px; }
.why-sol .stat { display: flex; flex-direction: column; gap: 8px; }
.why-sol .stat__num {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -1.1px;
  white-space: nowrap;
}
.why-sol .stat__label {
  color: var(--grey);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Image frame (crop is expressed in %, so it scales) ----------
   --ar: aspect ratio of the frame; --l/--t/--w/--h: image position/size
   inside the frame, converted 1:1 from the Figma crop. */
.why-sol .frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: 3px;
  background: var(--white);
}
.why-sol .frame img {
  position: absolute;
  left: var(--l, 0);
  top: var(--t, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
  max-width: none;
  object-fit: cover;
}

/* ---------- Gallery (01 office / 05 early study) ---------- */
.why-sol .gallery { display: flex; align-items: flex-start; gap: 16px; }
.why-sol .gallery__main {
  display: flex;
  flex: 0 0 442px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.why-sol .gallery__caption { display: flex; flex-direction: column; gap: 4px; }

.why-sol .caption-name { font-size: 18px; line-height: 28px; font-weight: 700; }
.why-sol .caption-addr, .why-sol .caption-plain {
  font-family: var(--font-latin);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.why-sol .caption-plain { color: var(--grey); }
.why-sol .caption-addr:empty { display: none; }

/* ---------- 01 Office ---------- */
.why-sol .office { display: flex; align-items: flex-end; gap: 56px; }
.why-sol .office__text {
  display: flex;
  flex: 0 0 394px;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}

.why-sol .offices { display: flex; flex: 0 0 132px; flex-direction: column; gap: 4px; }
.why-sol .tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 64px;
  padding: 9px 13px;             /* + 1px border = Figma 14/10 */
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.why-sol .tab__name { font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.why-sol .tab__sub { color: var(--grey); font-size: 14px; line-height: 20px; }
.why-sol .tab:hover { background: var(--soft); }
.why-sol .tab.is-active { background: var(--soft); border-color: var(--yellow); }
.why-sol .tab.is-active .tab__name { font-weight: 700; }

/* ---------- Carousel (02 reviews, 06 videos) ---------- */
.why-sol .carousel { --visible: 3; --gap: 22px; }
.why-sol .carousel--videos { --visible: 4; --gap: 18px; }

.why-sol .carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.why-sol .carousel__track::-webkit-scrollbar { display: none; }
.why-sol .carousel__track > * {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  min-width: 0;
  scroll-snap-align: start;
}
/* Mouse drag-to-scroll (see initDragScroll in main.js): snapping is
   suspended while dragging so it doesn't fight the manual scrollLeft, and
   images/links can't be picked up as native drag targets mid-drag. */
.why-sol .carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.why-sol .carousel__track img { -webkit-user-drag: none; user-drag: none; }

.why-sol .carousel__nav { display: flex; justify-content: flex-end; gap: 6px; margin-top: 20px; }
.why-sol .arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.why-sol .arrow img { width: 32px; height: 32px; }
.why-sol .arrow--next img { transform: rotate(180deg); }
.why-sol .arrow:disabled { opacity: .4; cursor: default; }

/* ---------- 02 Reviews ---------- */
.why-sol .reviews-section, .why-sol .visa, .why-sol .unis, .why-sol .activity, .why-sol .check { display: flex; flex-direction: column; gap: 32px; }

.why-sol .split-head { display: flex; align-items: flex-end; gap: 59px; }
.why-sol .split-head .section-head { flex: 0 1 760px; }

.why-sol .review {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 23px;                 /* + 1px border = Figma 24 */
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
}
.why-sol .review__body { display: flex; flex: 1; flex-direction: column; gap: 20px; min-height: 160px; }
.why-sol .review__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.why-sol .review__date { flex: none; color: var(--grey); font-size: 14px; line-height: 20px; white-space: nowrap; }

/* Star rating: same Figma star artwork; grey copy underneath, yellow copy clipped to the rating */
.why-sol .stars { position: relative; flex: none; width: 136px; height: 20px; }
.why-sol .stars img { width: 136px; max-width: none; height: 20px; }
.why-sol .stars__base { filter: grayscale(1); opacity: .55; }
.why-sol .stars__fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }

/* Review text: clamped to the card's original 4-line height; "더보기" lifts the clamp */
.why-sol .review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  white-space: pre-line;
}
.why-sol .review__text.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.why-sol .review__more {
  display: block;
  align-self: flex-start;
  margin: -8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  color: var(--grey);
}

.why-sol .review__author { display: flex; flex-direction: column; }
.why-sol .review__name { color: var(--name); font-size: 16px; line-height: 28px; font-weight: 500; }
.why-sol .review__school { color: var(--grey); font-size: 14px; line-height: 20px; }

/* ---------- 03 Visa ---------- */
.why-sol .visa__body { display: flex; align-items: center; gap: 36px; }

.why-sol .compare { display: flex; flex: 0 0 332px; flex-direction: column; gap: 24px; }
.why-sol .compare__card {
  padding: 16px 27px 16px 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.why-sol .compare__card--sol { border-color: var(--yellow); }
.why-sol .compare__title { margin-bottom: 12px; font-size: 20px; line-height: 30px; font-weight: 700; }
.why-sol .compare__card ul { padding-left: 24px; list-style: disc; }

.why-sol .people { display: grid; flex: 1; grid-template-columns: repeat(2, 326px); gap: 20px; min-width: 0; }
.why-sol .person {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 15px 19px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--soft);
  color: var(--black);
}
.why-sol .person__info { display: flex; flex-direction: column; gap: 12px; }
.why-sol .person__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 20px;
  line-height: 30px;
}
.why-sol .person__name strong { font-weight: 700; }
.why-sol .person__region { color: var(--grey); font-size: 16px; line-height: 20px; white-space: nowrap; }

/* ---------- 04 Universities ---------- */
/* Strip image (many logos in one image): each half is a cell whose ratio comes from
   the image itself (--half-ar = width/2 : height, set in unis.php). Side by side on
   desktop so it reads as one image; stacked on phones so the logos stay legible. */
.why-sol .unis__rows { display: flex; flex-direction: column; gap: 16px; }
.why-sol .uni-strip { display: flex; }
.why-sol .uni-half { flex: 1 1 50%; min-width: 0; aspect-ratio: var(--half-ar, 776 / 96); overflow: hidden; }
.why-sol .uni-half img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

.why-sol .uni-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px 24px;
  align-items: center;
}
.why-sol .uni-logo { display: grid; place-items: center; height: 64px; }
.why-sol .uni-logo img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- 05 Early study ---------- */
.why-sol .study { display: flex; align-items: flex-start; gap: 56px; }
.why-sol .study > .section-head { flex: 0 0 394px; }

.why-sol .thumbs { display: flex; flex: 0 0 132px; flex-direction: column; gap: 12px; }
.why-sol .thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 132 / 80;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
}
.why-sol .thumb img {
  position: absolute;
  left: var(--l, 0);
  top: var(--t, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
  max-width: none;
  object-fit: cover;
}
.why-sol .thumb::before, .why-sol .thumb::after { content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; }
.why-sol .thumb::before { background: var(--soft); opacity: .3; }        /* dimmed when not selected */
.why-sol .thumb.is-active::before { display: none; }
.why-sol .thumb.is-active::after { border: 2px solid var(--yellow); }

/* ---------- 06 Activity / videos ---------- */
.why-sol .activity__body { display: flex; flex-direction: column; }
.why-sol .social { display: flex; align-items: center; gap: 16px; }

.why-sol .video-card {
  position: relative;
  aspect-ratio: 9 / 16;          /* matches YouTube Shorts' own thumbnail/embed ratio */
  overflow: hidden;
  background: #000;
}
.why-sol .video-card img, .why-sol .video-card video, .why-sol .video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
}
.why-sol .video-card img { object-fit: cover; }
.why-sol .video-card video { object-fit: contain; background: #000; }

.why-sol .video-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.why-sol .video-card__play::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  transition: background-color .15s ease;
}
.why-sol .video-card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-38%, -50%);
}
.why-sol .video-card__play:hover::before { background: rgba(0, 0, 0, .7); }
.why-sol .video-card__error {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* ---------- 07 Check ---------- */
.why-sol .link-cards { display: flex; gap: 20px; }
.why-sol .link-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 15px 19px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  color: var(--black);
}
.why-sol .link-card__text { display: flex; flex-direction: column; }
.why-sol .link-card__title { margin-bottom: 12px; font-size: 20px; line-height: 30px; font-weight: 700; }
.why-sol .link-card__nowrap { white-space: nowrap; }   /* Figma text box is wider than the card padding */
.why-sol .link-card__links { margin-top: 24px; }
.why-sol .link-card__links a { text-decoration: underline; }
.why-sol .link-card__links a + a { margin-left: 32px; }
.why-sol .link-card__links--medium a { color: var(--ink); font-weight: 500; }

/* ---------- 08 Free ---------- */
.why-sol .free { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.why-sol .free__row { display: flex; align-items: flex-end; gap: 134px; width: 100%; }
.why-sol .free .section-head { flex: 0 0 540px; }

.why-sol .free__items { display: flex; align-items: center; gap: 72px; }
.why-sol .free__item { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 74px; }
.why-sol .free__icon { display: grid; place-items: center; width: 44px; height: 44px; }
.why-sol .free__icon img { width: 38px; height: 38px; }
.why-sol .free__icon img.is-small { width: 36px; height: 36px; }
.why-sol .free__label { font-size: 20px; line-height: 30px; font-weight: 700; white-space: nowrap; }


/* ==========================================================================
   TABLET / NARROW DESKTOP  (< 1090px) — columns stack, content is fluid
   ========================================================================== */
@media (max-width: 1089px) {
  .why-sol { word-break: keep-all; }   /* below desktop: never split Korean words mid-word */

  .why-sol .page { max-width: 768px; gap: 80px; padding: 80px 32px 96px; }
  .why-sol .sections { gap: 56px; }

  .why-sol .office, .why-sol .study { flex-direction: column; align-items: stretch; gap: 32px; }
  .why-sol .office__text, .why-sol .study > .section-head { flex: none; }
  .why-sol .gallery { width: 100%; }
  .why-sol .gallery__main { flex: 1 1 auto; }

  .why-sol .split-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .why-sol .split-head .section-head { flex: none; }

  .why-sol .carousel { --visible: 2; }
  .why-sol .carousel--videos { --visible: 3; }

  .why-sol .visa__body { flex-direction: column; align-items: stretch; gap: 20px; }
  .why-sol .compare { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .why-sol .people { grid-template-columns: 1fr 1fr; }

  .why-sol .free__row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .why-sol .free .section-head { flex: none; }

  /* link cards become compact rows: photo on the left, text on the right */
  .why-sol .link-cards { flex-direction: column; gap: 16px; }
  .why-sol .link-card { flex: none; flex-direction: row; align-items: center; gap: 20px; padding: 15px; }
  .why-sol .link-card .frame { flex: 0 0 clamp(96px, 32%, 220px); aspect-ratio: 4 / 3; }
  .why-sol .link-card .frame img { left: 0; top: 0; width: 100%; height: 100%; }
  .why-sol .link-card__text { flex: 1; min-width: 0; }
  .why-sol .link-card__nowrap { white-space: normal; }
  .why-sol .link-card__links a { display: inline-block; padding: 8px 0; }
  .why-sol .link-card__links { margin-top: 12px; }
  .why-sol .link-card__links a + a { margin-left: 24px; }
}

/* larger touch targets on touch devices and narrow screens */
@media (max-width: 1089px), (pointer: coarse) {
  .why-sol .arrow { width: 44px; height: 44px; }
  .why-sol .carousel__nav { gap: 0; margin-right: -6px; }
}

/* ==========================================================================
   PHONE  (< 640px)
   ========================================================================== */
@media (max-width: 639px) {
  .why-sol .page { gap: 64px; padding: 40px 20px 64px; }
  .why-sol .sections { gap: 40px; }

  .why-sol .hero-block { gap: 32px; }
  .why-sol .hero { gap: 16px; }
  .why-sol .hero__title { font-size: 26px; line-height: 36px; letter-spacing: -0.52px; }
  .why-sol .hero__desc { line-height: 26px; }

  .why-sol .stats { justify-content: space-between; gap: 12px; }
  .why-sol .stat { gap: 4px; }
  .why-sol .stat__num { font-size: 24px; line-height: 32px; letter-spacing: -0.48px; }
  .why-sol .stat__label { font-size: 14px; line-height: 20px; }

  .why-sol .section-head { gap: 16px; }
  .why-sol .section-title { font-size: 22px; line-height: 32px; letter-spacing: -0.44px; }
  .why-sol .section-desc { line-height: 26px; }
  .why-sol .free__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .why-sol .section-desc > p + p { margin-top: 16px; }

  .why-sol .office__text { gap: 28px; }
  .why-sol .caption-addr { text-wrap: balance; }

  /* galleries: photo, then selectors below it */
  .why-sol .gallery { flex-direction: column; gap: 12px; }
  .why-sol .gallery__main { flex: none; width: 100%; gap: 12px; }
  .why-sol .offices { display: grid; flex: none; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .why-sol .tab { height: 60px; }
  .why-sol .thumbs { display: grid; flex: none; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }

  /* carousels: swipe with a peek of the next card; track bleeds to the screen edge */
  .why-sol .carousel { --visible: 1.12; --gap: 12px; }
  .why-sol .carousel--videos { --visible: 1.3; --gap: 12px; }
  .why-sol .carousel__track {
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
  .why-sol .carousel__nav { margin-top: 8px; }

  .why-sol .compare { grid-template-columns: 1fr; gap: 16px; }
  .why-sol .people { grid-template-columns: 1fr; gap: 16px; }
  .why-sol .unis__rows { gap: 8px; }
  .why-sol .uni-strip { flex-direction: column; gap: 8px; }
  .why-sol .uni-half { flex: none; width: 100%; }
  .why-sol .uni-logos { grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
  .why-sol .uni-logo { height: 48px; }
  .why-sol .person__name { flex-wrap: wrap; column-gap: 12px; }


  .why-sol .social { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 16px; }

  .why-sol .link-card { gap: 16px; padding: 12px; }
  .why-sol .link-card .frame { flex-basis: 96px; aspect-ratio: 1 / 1; }
  .why-sol .link-card__title { margin-bottom: 4px; font-size: 18px; line-height: 28px; }
  .why-sol .link-card__links { margin-top: 4px; }

  .why-sol .free__row { gap: 28px; }
  .why-sol .free__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  .why-sol .free__label { font-size: 18px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .why-sol .btn, .why-sol .arrow, .why-sol .video-card__play::before { transition: none; }
}