body {
  background: #ffffff;
}

/* Base rules every other page inherits from the legacy stylesheet, which this
   template deliberately does not load. Without them the shared modals rendered
   outside .home2 — smart form, offer popup, thank-you — lost border-box sizing
   and the brand font: the smart form's step was 56px wider than the card that
   contains it, so its options were clipped, and the type fell back to serif. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.sf-overlay,
.offer-popup,
.modal,
.modal-thank {
  font-family: "Noto Sans Clinicana", "Noto Sans", Arial, sans-serif;
  letter-spacing: -0.8px;
}

.sf-overlay input,
.sf-overlay textarea,
.sf-overlay button,
.offer-popup input,
.offer-popup textarea,
.offer-popup button,
.modal input,
.modal textarea,
.modal button {
  font-family: inherit;
}

/* Noto Sans Clinicana carries no Arabic glyphs. */
html[dir="rtl"] .sf-overlay,
html[dir="rtl"] .offer-popup,
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-thank {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

/* Several sections deliberately bleed art past the viewport on small screens
   (the hero photo, the calculator head). The page itself must never gain a
   sideways scroll from that — in RTL it even loads shifted off-canvas. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.modals-wrap {
  display: none;
}

.home2 {
  --home2-blue: #3d83ef;
  --home2-blue-dark: #3679e5;
  --home2-cyan: #8de1ff;
  --home2-ink: #ffffff;
  --home2-ink-soft: rgba(255, 255, 255, 0.86);
  --home2-panel: rgba(116, 185, 255, 0.18);
  --home2-shadow: 0 28px 70px rgba(20, 93, 201, 0.28);
  --home2-gold: #fea500;
  --home2-trust-lift: 52px;
  --home2-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 1.1l2.35 4.76 5.25.76-3.8 3.7.9 5.23L9 13.08l-4.7 2.47.9-5.23-3.8-3.7 5.25-.76z' fill='%23000'/%3E%3C/svg%3E");
  min-height: 100vh;
  color: var(--home2-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.home2,
.home2 *,
.home2 *::before,
.home2 *::after {
  box-sizing: border-box;
}

.home2 button,
.home2 a {
  font: inherit;
}

.home2-hero {
  padding: 0;
}

.home2-hero__shell {
  --home2-compare-x: 12%;
  position: relative;
  min-height: 750px;
  overflow: hidden;
  border-bottom-right-radius: 38px;
  border-bottom-left-radius: 38px;
  background:
    radial-gradient(circle at 49% 16%, rgba(86, 162, 255, 0.62) 0, rgba(86, 162, 255, 0) 31%),
    linear-gradient(135deg, var(--home2-blue) 0%, var(--home2-blue-dark) 100%);
}

.home2-header {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(1240px, calc(100% - 48px));
  min-height: 64px;
  margin: 12px auto 0;
  padding: 12px;
  border-radius: 100px;
  background: rgba(224, 244, 248, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.home2-header__logo {
  display: inline-flex;
  align-items: center;
  width: 153px;
}

.home2-header__logo img {
  width: 153px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.home2-header__nav {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  /* Logical: keeps the 80px gap between logo and nav in RTL too, instead of
     gluing the first item to the logo and dumping the space on the far side. */
  margin-inline-start: 80px;
}

.home2-header__nav a {
  color: var(--home2-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
}

.home2-header__nav a:hover,
.home2-header__nav a:focus {
  color: var(--home2-ink);
  text-decoration: none;
}

.home2-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
}

.home2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 237px;
  min-height: 50px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #97e7ff 0%, #76d7ff 100%);
  color: #071c33;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(41, 115, 213, 0.24);
}

.home2-btn:hover,
.home2-btn:focus {
  color: #071c33;
  text-decoration: none;
}

.home2-btn--small {
  min-width: 148px;
  min-height: 40px;
  padding: 8px 24px;
}

.home2-hero__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  width: min(1240px, calc(100% - 48px));
  min-height: 674px;
  margin: 0 auto;
}

.home2-hero__copy {
  position: relative;
  z-index: 4;
  align-self: center;
  max-width: 540px;
  padding-bottom: 60px;
}

.home2-stars {
  --home2-stars: 100%;
  position: relative;
  display: inline-block;
  width: 90px;
  height: 16px;
  flex: none;
}

.home2-stars i {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--home2-star-mask);
  mask-image: var(--home2-star-mask);
  -webkit-mask-size: 18px 16px;
  mask-size: 18px 16px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

.home2-stars__base {
  background: rgba(19, 40, 71, 0.16);
}

.home2-stars__fill {
  width: var(--home2-stars);
  background: var(--home2-gold);
}

.home2-stars--lg {
  width: 116px;
  height: 20px;
}

.home2-stars--lg i {
  -webkit-mask-size: 23.2px 20px;
  mask-size: 23.2px 20px;
}

.home2-trust {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--home2-trust-lift) * -1);
  padding-bottom: clamp(40px, 3.6vw, 56px);
  color: #1a1c1e;
  /* Transparent above the fold line so the panel notches into the hero blue. */
  background: linear-gradient(
    to bottom,
    transparent var(--home2-trust-lift),
    #ffffff var(--home2-trust-lift)
  );
}

.home2-trust__panel {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: stretch;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 34px 32px;
  border: 1px solid #e4ecfa;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 26px 62px rgba(20, 93, 201, 0.16);
}

.home2-trust__summary {
  padding-right: 34px;
}

.home2-trust__eyebrow {
  margin: 0 0 12px;
  color: #7d8ca1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.home2-trust__score {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home2-trust__score strong {
  color: #16233a;
  font-size: 62px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.home2-trust__title {
  margin: 14px 0 0;
  color: #7d8ca1;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.home2-trust__title strong {
  color: #16233a;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home2-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid #e8effb;
}

.home2-trust-card {
  display: block;
  padding: 4px 22px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}

.home2-trust-card + .home2-trust-card {
  border-left: 1px solid #e8effb;
  border-radius: 0 14px 14px 0;
}

a.home2-trust-card {
  transform: translateY(0);
  transition: background 0.18s ease, transform 0.18s ease;
}

a.home2-trust-card:hover {
  background: #f6faff;
  transform: translateY(-3px);
}

a.home2-trust-card:hover .home2-trust-card__logo {
  background: #e2edff;
}

.home2-trust-card__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  color: #16233a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.home2-trust-card__logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #f2f7ff;
  transition: background 0.18s ease;
}

.home2-trust-card__logo img {
  width: 24px;
  height: 24px;
}

.home2-trust-card__score {
  display: block;
  color: #16233a;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.home2-trust-card .home2-stars {
  margin: 10px 0 8px;
}

.home2-trust-card__count {
  display: block;
  color: #7d8ca1;
  font-size: 13px;
  line-height: 1.2;
}

.home2-trust-card__count b {
  color: #46596e;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Reveal. Armed by JS so the panel is never hidden without scripting. */
.home2-trust.is-armed .home2-trust__panel {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.28, 1);
}

.home2-trust.is-armed.is-visible .home2-trust__panel {
  opacity: 1;
  transform: none;
}

.home2-trust.is-armed .home2-stars__fill {
  width: 0;
  transition: width 0.9s cubic-bezier(0.22, 0.8, 0.28, 1);
}

.home2-trust.is-armed.is-visible .home2-stars__fill {
  width: var(--home2-stars);
}

.home2-trust.is-armed.is-visible .home2-trust__summary .home2-stars__fill {
  transition-delay: 0.18s;
}

.home2-trust.is-armed.is-visible .home2-trust-card:nth-child(1) .home2-stars__fill {
  transition-delay: 0.34s;
}

.home2-trust.is-armed.is-visible .home2-trust-card:nth-child(2) .home2-stars__fill {
  transition-delay: 0.42s;
}

.home2-trust.is-armed.is-visible .home2-trust-card:nth-child(3) .home2-stars__fill {
  transition-delay: 0.5s;
}

.home2-trust.is-armed.is-visible .home2-trust-card:nth-child(4) .home2-stars__fill {
  transition-delay: 0.58s;
}

.home2-hero__title {
  position: relative;
  margin: 0;
  color: var(--home2-ink);
  font-size: clamp(58px, 5.55vw, 80px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0;
}

.home2-hero__title span {
  display: block;
}

.home2-hero__title span:first-child {
  color: #bdefff;
}

.home2-lifetime-badge {
  position: absolute;
  left: 120px;
  bottom: 196px;
  z-index: 2;
  width: max-content;
  padding: 7px 13px 8px;
  border-radius: 999px;
  background: #132033;
  color: var(--home2-ink);
  font-size: 16px;
  line-height: 1;
  transform: rotate(-8deg);
  box-shadow: 0 12px 25px rgba(14, 23, 37, 0.22);
}

.home2-hero__copy .home2-btn {
  margin-top: 40px;
}

.home2-hero__compare {
  --home2-compare-position: 49%;
  position: absolute;
  z-index: 3;
  left: 74px;
  bottom: 0;
  width: min(1040px, calc(100vw - 174px));
  aspect-ratio: 1056 / 666;
  pointer-events: auto;
  /* pan-y keeps native vertical scrolling alive on touch; the divider drag
     claims horizontal moves itself in JS. */
  touch-action: pan-y;
  user-select: none;
}

.home2-hero__person {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.home2-hero__person--before {
  clip-path: inset(0 calc(100% - var(--home2-compare-position)) 0 0);
}

.home2-hero__person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.home2-hero__divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--home2-compare-x);
  width: 1px;
  background: rgba(255, 255, 255, 0.58);
  pointer-events: none;
  transform: translateX(-0.5px);
}

.home2-hero__divider span {
  position: absolute;
  /* Sits below the raised headline, over the shoulder line. */
  top: 72%;
  left: 50%;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #a8e9ff;
  color: #0f2540;
  box-shadow: 0 16px 34px rgba(8, 37, 69, 0.22), 0 0 0 8px rgba(168, 233, 255, 0.18);
  transform: translate(-50%, -50%);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.home2-hero__divider span::before {
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  content: "";
}

.home2-hero__divider i {
  position: absolute;
  top: 50%;
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}

.home2-hero__divider i:first-child {
  left: 13px;
  border-right: 7px solid currentColor;
}

.home2-hero__divider i:last-child {
  right: 13px;
  border-left: 7px solid currentColor;
}

.home2-hero__shell.is-home2-compare-dragging {
  cursor: ew-resize;
}

.home2-hero__shell.is-home2-compare-dragging .home2-hero__divider span,
.home2-hero__shell.is-home2-compare-demoing .home2-hero__divider span {
  box-shadow: 0 18px 40px rgba(8, 37, 69, 0.28), 0 0 0 11px rgba(168, 233, 255, 0.22);
  transform: translate(-50%, -50%) scale(1.05);
}

.home2-hero__shell.is-home2-compare-at-start:not(.is-home2-compare-dragging):not(.is-home2-compare-demoing) .home2-hero__divider span {
  transform: translate(0, -50%);
}

.home2-compare__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: none;
}

.home2-hero__shell:focus-within .home2-hero__divider span {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 4px;
}

.home2-social-proof {
  position: absolute;
  z-index: 5;
  right: 18px;
  /* Top edge aligns with the headline cap-height on the opposite side. */
  top: 194px;
  width: 403px;
  text-align: center;
}

.home2-social-proof__avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
}

.home2-social-proof__wave {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 50px;
  margin-right: -10px;
  font-size: 34px;
}

.home2-social-proof picture {
  width: 50px;
  height: 50px;
  margin-left: -8px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
}

.home2-social-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home2-social-proof p {
  color: var(--home2-ink);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

.home2-social-proof strong {
  font-weight: 800;
}

.home2-section-anchor {
  scroll-margin-top: 24px;
}

.home2 .wrapper {
  position: relative;
  width: min(1300px, calc(100% - 60px));
  margin: 0 auto;
}

.home2 .title-center {
  margin: 0 0 50px;
  color: #1a1c1e;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

.home2 .subtitle-center {
  max-width: 600px;
  margin: -30px auto 50px;
  color: #4e5a65;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.home2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 32px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(115deg, #88eaff 0%, #6fbaff 50%, #6fbaff 70%, #88eaff 110%);
  background-size: 200%;
  color: #1a1c1e;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transition: background-position 700ms ease;
}

.home2 .btn:hover,
.home2 .btn:focus {
  background-position: 100% 0;
}

.home2 .btn,
.home2 .btn:hover,
.home2 .btn:focus,
.home2 .btn span {
  text-decoration: none;
}

.home2 .graft-calc {
  position: relative;
  overflow: hidden;
  margin: clamp(78px, 8vw, 118px) 0 clamp(88px, 8vw, 128px);
  color: #1a1c1e;
  background: #ffffff;
}

.home2 .graft-calc__h2,
.home2 .graft-calc__h2-descr {
  position: relative;
  z-index: 4;
}

.home2 .graft-calc__main {
  position: relative;
}

.home2 .graft-calc__img-wrap {
  position: relative;
  height: 685px;
  overflow: hidden;
}

.home2 .graft-calc__img-wrap::after {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: -2px;
  width: 1440px;
  max-width: 120vw;
  height: 170px;
  pointer-events: none;
  content: "";
  transform: translateX(50%);
  background:
    radial-gradient(ellipse 62% 90% at 50% 108%, #ffffff 0%, rgba(255, 255, 255, 0.88) 34%, rgba(255, 255, 255, 0.38) 58%, rgba(255, 255, 255, 0) 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.28) 56%, rgba(255, 255, 255, 0.82) 84%, #ffffff 100%);
}

.home2 .graft-calc__img {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 1426px;
  max-width: none;
  transform: translateX(-50%);
}

.home2 .graft-calc__img img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 66%, rgba(0, 0, 0, 0.7) 84%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000000 0%, #000000 66%, rgba(0, 0, 0, 0.7) 84%, rgba(0, 0, 0, 0) 100%);
}

.home2 .graft-calc__schema {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: 50%;
  width: 310px;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
}

.home2 .graft-calc__schema .ignore-event {
  pointer-events: none;
}

.home2 .graft-calc__schema .zone {
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 300ms ease;
}

.home2 .graft-calc__schema .zone.active {
  opacity: 0.72;
}

.home2 .graft-calc__selected {
  position: absolute;
  top: 158px;
  left: 31px;
  z-index: 4;
  width: 400px;
  padding: 30px 30px 40px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 10px 50px 100px rgba(41, 49, 54, 0.12);
  color: #1a1c1e;
}

.home2 .graft-calc__selected .t1 {
  margin-bottom: 12px;
  color: #4e5a65;
}

.home2 .graft-calc__zones-list .item {
  display: block;
  margin-bottom: 16px;
  cursor: pointer;
}

.home2 .graft-calc__zones-list .item:last-child {
  margin-bottom: 0;
}

.home2 .graft-calc__zones-list .item input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.home2 .graft-calc__zones-list .item .custom-line {
  display: flex;
  align-items: center;
}

.home2 .graft-calc__zones-list .item .checkbox-custom {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background-image: url("../img/icons/check-empty.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.home2 .graft-calc__zones-list .checkbox:checked + .custom-line .checkbox-custom {
  background-image: url("../img/icons/check-full.svg");
}

.home2 .graft-calc__zones-list .item .label-custom {
  color: #4e5a65;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0;
}

.home2 .graft-calc__zones-list .item .label-custom .black {
  margin-right: 4px;
  color: #1a1c1e;
}

.home2 .graft-calc__info {
  position: absolute;
  top: 208px;
  right: 80px;
  z-index: 4;
  width: 350px;
  color: #1a1c1e;
}

.home2 .graft-calc__info .ttl,
.home2 .graft-calc__info .hairs {
  color: #4e5a65;
}

.home2 .graft-calc__info .grafts,
.home2 .graft-calc__info .hairs {
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.home2 .graft-calc__info .hairs {
  margin-bottom: 40px;
}

.home2-journey {
  padding: 0 0 clamp(96px, 8.5vw, 120px);
  color: #1a1c1e;
  background: #ffffff;
}

.home2-journey__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 610px));
  gap: 20px;
  align-items: start;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.home2-journey__left,
.home2-journey__right,
.home2-journey__stack {
  display: flex;
  flex-direction: column;
}

.home2-journey__left {
  gap: 60px;
}

.home2-journey__right,
.home2-journey__stack {
  gap: 15px;
}

.home2-journey__title {
  max-width: 610px;
  min-height: 120px;
  margin: 0;
  padding-left: 40px;
  color: #1a1c1e;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.home2-journey__title span {
  color: #6ac1d2;
  white-space: nowrap;
}

.home2-journey-card {
  position: relative;
  min-height: 342px;
  overflow: hidden;
  border-radius: 40px;
  background: #e0f4f8;
}

.home2-journey-card--image {
  padding: 40px;
}

.home2-journey-card--image > img:not(.home2-journey-card__stamp) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home2-journey-card--vip::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 52%);
}

.home2-journey-card--vip > img {
  object-position: center;
}

.home2-journey-card--warranty > img {
  object-position: center;
}

.home2-journey-card--image.home2-journey-card--safe > img {
  inset: auto;
  top: -58px;
  left: 70px;
  width: 760px;
  max-width: none;
  height: auto;
  object-fit: cover;
}

.home2-journey-card__text {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
}

.home2-journey-card--safe .home2-journey-card__text {
  width: min(360px, 100%);
}

.home2-journey-card__text p,
.home2-journey-card__text h3 {
  margin: 0;
  letter-spacing: 0;
}

.home2-journey-card__text p {
  margin-bottom: 8px;
  color: #788288;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.home2-journey-card__text h3 {
  color: #1a1c1e;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.333;
}

.home2-journey-card__text--light p {
  color: rgba(255, 255, 255, 0.8);
}

.home2-journey-card__text--light h3 {
  color: #ffffff;
}

.home2-journey-card__stamp {
  position: absolute;
  z-index: 2;
  bottom: 40px;
  left: 40px;
  width: 60px;
  height: 60px;
}

.home2-journey-card--doctors {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
}

.home2-journey-card__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.home2-journey-card__certs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.home2-journey-card__certs img:first-child {
  width: 50px;
  height: 36px;
  object-fit: contain;
}

.home2-journey-card__certs img:last-child {
  width: 35px;
  height: 36px;
  object-fit: cover;
}

.home2-journey-doctors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 120px));
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.home2-journey-doctor {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  text-align: center;
}

.home2-journey-doctor__photo {
  width: 92px;
  height: 92px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 50%;
  background: #6ac1d2;
}

.home2-journey-doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home2-journey-doctor__name {
  color: #1a1c1e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0;
  white-space: nowrap;
}

.home2-journey-doctor__role {
  color: #788288;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0;
}

.home2-journey-cta {
  padding: 25px 40px 0;
}

.home2-journey-cta p {
  margin: 0 0 35px;
  color: #1a1c1e;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: 0;
}

.home2-journey-cta p span {
  color: #6ac1d2;
}

.home2-journey-cta__btn {
  min-width: 207px;
  min-height: 60px;
  padding: 16px 32px;
  font-size: 20px;
  box-shadow: none;
}

.home2-process {
  padding: 90px 0;
  color: #1a1c1e;
  background:
    linear-gradient(90deg, rgba(233, 235, 235, 0.2), rgba(233, 235, 235, 0.2)),
    #ffffff;
}

.home2-process__inner {
  width: min(1287px, calc(100% - 48px));
  margin: 0 auto;
}

.home2-process__title {
  margin: 0 0 43px;
  color: #1a1c1e;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

.home2-process__techniques {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.home2-process__technique {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 195px;
  min-height: 48px;
  padding: 10px 30px;
  border: 0;
  border-radius: 10px;
  background: #ebf3f4;
  color: #1a1c1e;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.home2-process__technique:hover,
.home2-process__technique:focus-visible {
  transform: translateY(-1px);
}

.home2-process__technique.is-active {
  background: #1a1c1e;
  color: #ffffff;
}

.home2-process__cases {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0 0 34px;
  padding: 0;
}

.home2-process__cases-label {
  color: #6ac1d2;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}

.home2-process__case-rail {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 0;
}

.home2-process-case {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ebf3f4;
  color: #1a1c1e;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(23, 53, 83, 0.1);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home2-process-case img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.home2-process-case span {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #1a1c1e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.home2-process-case::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #6ac1d2;
  box-shadow: 0 4px 10px rgba(23, 53, 83, 0.16);
  content: "";
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
}

.home2-process-case:hover,
.home2-process-case:focus-visible {
  z-index: 2;
  transform: translateY(-2px);
}

.home2-process-case:hover span,
.home2-process-case:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.home2-process-case.is-active {
  z-index: 3;
  border-color: #6ac1d2;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 0 0 6px rgba(106, 193, 210, 0.2), 0 18px 34px rgba(23, 53, 83, 0.16);
}

.home2-process-case.is-active::after {
  opacity: 1;
  transform: scale(1);
}

.home2-process__case-detail {
  display: grid;
  gap: 16px;
}

.home2-process__case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  column-gap: 10px;
  min-width: 0;
  margin: 0;
}

.home2-process__case-meta strong {
  color: #1a1c1e;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.home2-process__case-meta span {
  color: #788288;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* One panel holds the case selector, the photo and the timeline, so the pieces
   read as a single instrument instead of parts floating on the page. */
.home2-process__body {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 634px);
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 7vw, 110px);
  row-gap: 56px;
  margin-bottom: 45px;
  padding: clamp(32px, 4vw, 56px);
  border-radius: 32px;
  background: #f4f9fa;
  box-shadow: inset 0 0 0 1px rgba(106, 193, 210, 0.14);
}

.home2-process__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home2-process__eyebrow {
  margin: 0 0 10px;
  color: #6ac1d2;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.home2-process__copy h3 {
  width: 100%;
  margin: 0 0 25px;
  color: #1a1c1e;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: 0;
}

.home2-process__copy p {
  width: 100%;
  margin: 0;
  color: #788288;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.home2-process__summary {
  margin-top: 0 !important;
  color: #1a1c1e !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

/* 3:2 — the ratio cameras shoot natively, so case photos need no custom crop.
   Declared once here; every breakpoint inherits it. */
.home2-process__media {
  position: relative;
  width: 634px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #ebf3f4;
}

.home2-process__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.home2-process__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.home2-process__timeline-wrap {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.home2-process__timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.home2-process__timeline::before {
  position: absolute;
  top: 17px;
  right: 31px;
  left: 31px;
  height: 2px;
  content: "";
  background-image: linear-gradient(90deg, #878787 0 6px, transparent 6px 13px);
  background-repeat: repeat-x;
}

/* The travelled part of the timeline: a solid brand line that grows as the
   visitor steps through the stages. --home2-timeline-progress is set by JS. */
.home2-process__timeline::after {
  position: absolute;
  top: 17px;
  left: 31px;
  width: calc((100% - 62px) * var(--home2-timeline-progress, 0));
  height: 2px;
  content: "";
  background: #6ac1d2;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  background-size: 13px 2px;
}

.home2-process-step {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  width: 130px;
  min-height: 71px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a1c1e;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.home2-process-step:first-child {
  align-items: flex-start;
  text-align: left;
}

.home2-process-step:last-child {
  align-items: flex-end;
  text-align: right;
}

.home2-process-step__dot {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #b7b7b7;
  box-shadow: 0 0 0 0 rgba(26, 28, 30, 0);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home2-process-step:hover .home2-process-step__dot,
.home2-process-step:focus-visible .home2-process-step__dot {
  transform: scale(1.06);
}

.home2-process-step.is-active .home2-process-step__dot {
  background: #000000;
  box-shadow: 0 0 0 7px rgba(106, 193, 210, 0.18);
  animation: home2-step-pulse 2.4s ease-in-out infinite;
}

/* A stage the visitor has already passed: brand-coloured with a small check,
   so the row reads as a journey underway instead of a loading state. */
.home2-process-step.is-done .home2-process-step__dot {
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #6ac1d2;
}

.home2-process-step.is-done .home2-process-step__dot::before {
  width: 10px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  content: "";
}

@keyframes home2-step-pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(106, 193, 210, 0.18); }
  50% { box-shadow: 0 0 0 11px rgba(106, 193, 210, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
  .home2-process-step.is-active .home2-process-step__dot {
    animation: none;
  }
}

.home2-process-step__label {
  max-width: 140px;
}

.home2-process__mobile-controls {
  display: none;
}

.home2-process__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 207px;
  min-height: 60px;
  margin: 0 auto;
  padding: 16px 32px;
  border: 0;
  border-radius: 16px;
  background: #1a1c1e;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
}

.home2-plan {
  padding: 0;
  color: #1a1c1e;
  background:
    linear-gradient(250.77deg, #76c8ff 2.68%, #d0fff1 90.52%);
  border-radius: 40px;
  font-family: "Noto Sans Clinicana", "Noto Sans", Arial, sans-serif;
}

.home2-plan__inner {
  display: grid;
  grid-template-columns: 610px 610px;
  gap: 20px;
  align-items: start;
  width: min(1440px, 100%);
  min-height: 864px;
  margin: 0 auto;
  padding: 120px 100px;
}

.home2-plan__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 610px;
  height: 624px;
  padding: 80px 80px 80px 0;
  border-radius: 40px;
}

.home2-plan__intro h2 {
  position: relative;
  width: 530px;
  margin: 0 0 35px;
  color: #1a1c1e;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -3px;
}

.home2-plan__intro h2 span {
  display: block;
}

.home2-plan__title-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.home2-plan__title-row img {
  flex: 0 0 auto;
  width: 55px;
  height: 55px;
}

.home2-plan__tag {
  position: absolute;
  top: 17.75px;
  left: 310px;
  display: inline-flex !important;
  width: max-content;
  padding: 4px 10px;
  border-radius: 99px;
  background: #1a1c1e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.5px;
  transform: rotate(-4deg);
}

.home2-plan__list {
  display: grid;
  gap: 20px;
  width: 530px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #1a1c1e;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.8px;
}

.home2-plan__list li::before {
  content: "\2713";
  margin-right: 4px;
}

.home2-plan__list li {
  display: flex;
}

.home2-quiz-card {
  display: grid;
  position: relative;
  overflow: hidden;
  width: 610px;
  min-height: 624px;
  margin: 0;
  border-radius: 40px;
  background: #ffffff;
}

.home2-quiz-card__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 35px;
  min-width: 0;
  min-height: 624px;
  padding: 60px;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translateX(36px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms ease;
  visibility: hidden;
}

.home2-quiz-card__panel--status {
  background: #ffffff;
}

.home2-quiz-card__panel--timing {
  background: #ffffff;
}

.home2-quiz-card__panel.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

.home2-quiz-card__panel.is-entering-next {
  transform: translateX(36px);
  visibility: visible;
}

.home2-quiz-card__panel.is-entering-prev {
  transform: translateX(-36px);
  visibility: visible;
}

.home2-quiz-card__panel.is-leaving-next,
.home2-quiz-card__panel.is-leaving-prev {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  visibility: visible;
}

.home2-quiz-card__panel.is-leaving-next {
  transform: translateX(-36px);
}

.home2-quiz-card__panel.is-leaving-prev {
  transform: translateX(36px);
}

.home2-quiz-card h3 {
  width: 490px;
  margin: 0;
  color: #1a1c1e;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: -1px;
  text-align: center;
}

.home2-quiz-card h3 span {
  display: block;
}

.home2-quiz-card__answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 490px;
}

.home2-quiz-card__icon {
  width: 55px;
  height: 55px;
}

.home2-quiz-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  text-align: center;
}

.home2-quiz-card__copy strong {
  color: #1a1c1e;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -3px;
}

.home2-quiz-card__copy p {
  margin: 0;
  color: #788288;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: -0.4px;
}

.home2-quiz-card__copy--status strong {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.8px;
}

.home2-quiz-status {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  width: 100%;
}

.home2-quiz-status__hero {
  display: block;
  width: 176px;
  height: 176px;
  object-fit: contain;
  transition: opacity 180ms ease, transform 180ms ease;
}

.home2-quiz-status__hero.is-changing {
  opacity: 0;
  transform: scale(0.94);
}

.home2-quiz-status__options {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.home2-quiz-status__option {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.home2-quiz-status__option:hover,
.home2-quiz-status__option:focus-visible {
  transform: translateY(-1px);
}

.home2-quiz-status__option.is-active {
  border-color: #3ba5dc;
}

.home2-quiz-status__option img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.home2-quiz-status__option.is-active img {
  width: 28px;
  height: 28px;
}

.home2-quiz-card__copy--status {
  transition: opacity 180ms ease, transform 180ms ease;
}

.home2-quiz-card__copy--status.is-changing {
  opacity: 0;
  transform: translateY(4px);
}

.home2-quiz-timing {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  min-height: 0;
}

.home2-quiz-timing__options {
  position: relative;
  display: grid;
  gap: 12px;
  width: 490px;
}

.home2-quiz-timing__options::before {
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 45px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(93, 213, 179, 0.45), rgba(50, 167, 248, 0.45));
  content: "";
}

.home2-quiz-timing__option {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 84px;
  padding: 16px 22px 16px 18px;
  border: 1px solid #e5f1f3;
  border-radius: 20px;
  background: #f7fcfd;
  color: #1a1c1e;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(26, 28, 30, 0.04);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home2-quiz-timing__option:hover,
.home2-quiz-timing__option:focus-visible {
  border-color: #88eaff;
  background: #ffffff;
  transform: translateX(4px);
}

.home2-quiz-timing__option.is-active {
  border-color: #6fbaff;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(58, 165, 220, 0.16);
  transform: translateX(8px);
}

.home2-quiz-timing__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: transparent;
  font-size: 40px;
  line-height: 1;
  transition: transform 160ms ease;
}

.home2-quiz-timing__option.is-active .home2-quiz-timing__icon,
.home2-quiz-timing__option:hover .home2-quiz-timing__icon,
.home2-quiz-timing__option:focus-visible .home2-quiz-timing__icon {
  transform: scale(1.08);
}

.home2-quiz-timing__option.is-popping .home2-quiz-timing__icon {
  animation: home2-timing-icon-settle 680ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes home2-timing-icon-settle {
  0% {
    filter: blur(0);
    transform: translateY(0) scale(1.02);
  }

  28% {
    filter: blur(0.2px);
    transform: translateY(-5px) scale(1.13);
  }

  55% {
    filter: blur(0);
    transform: translateY(1px) scale(1.045);
  }

  78% {
    transform: translateY(-1px) scale(1.09);
  }

  100% {
    filter: blur(0);
    transform: translateY(0) scale(1.08);
  }
}

.home2-quiz-timing__label {
  display: block;
  color: #1a1c1e;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.home2-quiz-slider {
  position: relative;
  width: 490px;
  --home2-quiz-value: 38%;
  --home2-quiz-hair-mask: url("../img/home-2/quiz-hair-strokes.svg");
  --home2-quiz-handle-size: 36px;
  --home2-quiz-handle-offset: 18px;
  --home2-quiz-track-center: calc(100% - 1.5px);
}

.home2-quiz-slider__hair {
  position: relative;
  width: 490px;
  height: 84px;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
}

.home2-quiz-slider__glow {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  z-index: 0;
  height: 64px;
  background:
    radial-gradient(ellipse at calc(var(--home2-quiz-value) - 16%) 58%, rgba(71, 238, 204, 0.24) 0%, rgba(102, 223, 255, 0.15) 38%, rgba(102, 223, 255, 0.06) 58%, rgba(102, 223, 255, 0) 78%);
  filter: blur(5px);
  pointer-events: none;
}

.home2-quiz-slider__hair-base,
.home2-quiz-slider__hair-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  mask: var(--home2-quiz-hair-mask) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--home2-quiz-hair-mask) 0 0 / 100% 100% no-repeat;
  transform: translateZ(0);
}

.home2-quiz-slider__hair-base {
  background: #b8c6ce;
}

.home2-quiz-slider__hair-fill {
  background: linear-gradient(180deg, #5dd5b3 0%, #32a7f8 100%);
  clip-path: inset(0 calc(100% - var(--home2-quiz-value)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--home2-quiz-value)) 0 0);
  will-change: clip-path;
}

.home2-quiz-slider__hair::before,
.home2-quiz-slider__hair::after {
  position: absolute;
  left: 0;
  content: "";
}

.home2-quiz-slider__hair::before {
  bottom: 1.5px;
  z-index: 3;
  width: var(--home2-quiz-value);
  height: 1.5px;
  background: #1a1c1e;
}

.home2-quiz-slider__hair::after {
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: #b8c6ce;
}

.home2-quiz-slider__handle {
  position: absolute;
  left: clamp(0px, calc(var(--home2-quiz-value) - var(--home2-quiz-handle-offset)), calc(100% - var(--home2-quiz-handle-size)));
  top: var(--home2-quiz-track-center);
  z-index: 4;
  width: var(--home2-quiz-handle-size);
  height: var(--home2-quiz-handle-size);
  border-radius: 999px;
  background: #1a1c1e;
  transform: translateY(-50%);
  pointer-events: none;
}

.home2-quiz-slider__handle::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 20px;
  height: 20px;
  background: url("../img/home-2/quiz-slider-handle.svg") center / 15px 7.5px no-repeat;
  transform: translate(-50%, -50%);
}

.home2-quiz-slider__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.home2-quiz-slider__range:focus-visible + * {
  outline: none;
}

.home2-quiz-slider__hair:focus-within .home2-quiz-slider__handle {
  box-shadow: 0 0 0 5px rgba(111, 186, 255, 0.26);
}

.home2-quiz-slider__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 490px;
  margin-top: 20px;
  color: #788288;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: -0.3px;
}

.home2-quiz-slider__labels span:nth-child(2),
.home2-quiz-slider__labels span:nth-child(3) {
  text-align: center;
}

.home2-quiz-slider__labels span:last-child {
  text-align: right;
}

.home2-quiz-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 490px;
  min-height: 60px;
  padding: 16px 32px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(165.22deg, #88eaff 6.37%, #6fbaff 110.38%);
  color: #1a1c1e;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.8px;
  cursor: pointer;
}

.home2-quiz-card__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.home2-quiz-card__actions .home2-quiz-card__btn {
  width: auto;
}

.home2-quiz-card__btn--secondary {
  min-width: 141px;
  border: 1px solid #88eaff;
  background: transparent;
}

.home2-quiz-card__btn--compact {
  min-width: 107px;
}

@media (prefers-reduced-motion: reduce) {
  .home2-quiz-card__panel {
    transition: none;
  }

  .home2-quiz-timing__option.is-popping .home2-quiz-timing__icon {
    animation: none;
  }
}





.home2-stories-tile__media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.home2-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgba(219, 233, 235, 0.5);
  backdrop-filter: blur(20px);
  transform: translate(-50%, -50%);
}

.home2-play-button::before {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid #ffffff;
  filter: drop-shadow(0 1px 0 rgba(26, 28, 30, 0.08));
  content: "";
}

.home2-stories__header h2 {
  margin: 0;
  color: #1a1c1e;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.home2-stories__header h2 span {
  display: block;
  color: #6bc2d4;
}

.home2-spotlight__btn,
.home2-stories__btn {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 16px 32px;
  border: 1px solid #6fbaff;
  border-radius: 50px;
  background: transparent;
  color: #1a1c1e;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
}

.home2-stories {
  position: relative;
  padding: 96px 0 88px;
  color: #1a1c1e;
  background: #ffffff;
}

.home2-stories__inner {
  position: relative;
  width: min(1240px, calc(100% - 48px));
  min-height: 762px;
  margin: 0 auto;
}

.home2-stories__header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(560px, 100%);
  transform: translateX(-50%);
  text-align: center;
}

.home2-stories__header h2 {
  margin-bottom: 50px;
}

.home2-stories__btn {
  min-width: 310px;
  border-color: transparent;
  background: linear-gradient(130deg, #88eaff 6.37%, #6fbaff 110.38%);
}

.home2-stories__mosaic {
  position: absolute;
  inset: 0;
}

.home2-stories-tile {
  position: absolute;
  overflow: visible;
  margin: 0;
  border-radius: 20px;
  --home2-story-overlay: 0.2;
}

.home2-stories-tile__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: #ebf3f4;
}

.home2-stories-tile__media::before,
.home2-stories-tile__media::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.home2-stories-tile__media::before {
  z-index: 1;
  background: rgba(0, 0, 0, var(--home2-story-overlay));
}

.home2-stories-tile__media::after {
  box-shadow: inset 0 0 0 1px rgba(26, 28, 30, 0.04);
  z-index: 5;
}

.home2-stories-tile figcaption {
  position: absolute;
  top: -12px;
  left: -20.4px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #1a1c1e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  transform: rotate(-6deg);
}

.home2-stories-tile figcaption::before {
  line-height: 1;
  content: "👀";
}

.home2-play-button.home2-play-button--small {
  width: 60px;
  height: 60px;
}

.home2-play-button.home2-play-button--small::before {
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 17px;
}

.home2-story-cursor {
  position: absolute;
  top: 75.74%;
  left: 68.97%;
  z-index: 6;
  width: clamp(18px, 12.07%, 28px);
  aspect-ratio: 1;
  background: url("../img/home-2/story-cursor.svg") center / contain no-repeat;
  pointer-events: none;
}

.home2-stories-tile--one {
  top: 0;
  left: 0;
  width: 232px;
  height: 371px;
}

.home2-stories-tile--two {
  top: 391px;
  left: 0;
  width: 232px;
  height: 371px;
}

.home2-stories-tile--three {
  top: 309px;
  left: 252px;
  width: 232px;
  height: 371px;
  --home2-story-overlay: 0.1;
}

.home2-stories-tile--four {
  top: 391px;
  left: 504px;
  width: 232px;
  height: 371px;
  --home2-story-overlay: 0;
}

.home2-stories-tile--five {
  top: 309px;
  right: 252px;
  width: 232px;
  height: 371px;
}

.home2-stories-tile--six {
  top: 0;
  right: 0;
  width: 232px;
  height: 371px;
  --home2-story-overlay: 0.12;
}

.home2-stories-tile--seven {
  top: 391px;
  right: 0;
  width: 232px;
  height: 371px;
}

.home2-stories-tile--one .home2-stories-tile__media > img {
  top: 0;
  left: 50%;
  width: 275%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
}

.home2-stories-tile--two .home2-stories-tile__media > img {
  top: 0;
  left: -61%;
  width: 240%;
  height: 100%;
  max-width: none;
}

.home2-stories-tile--three .home2-stories-tile__media > img {
  top: -11%;
  left: -57%;
  width: 266%;
  height: auto;
  max-width: none;
}

.home2-stories-tile--four .home2-stories-tile__media > img {
  top: 0;
  left: 57%;
  width: 332%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
}

.home2-stories-tile--five .home2-stories-tile__media > img {
  object-position: center center;
}

.home2-stories-tile--six .home2-stories-tile__media > img {
  object-position: center center;
}

.home2-stories-tile--seven .home2-stories-tile__media > img {
  object-position: center center;
}

@media (max-width: 1180px) {
  .home2-header {
    grid-template-columns: auto 1fr auto;
  }

  .home2-header__nav {
    gap: 24px;
    margin-left: 48px;
  }

  .home2-header__actions {
    gap: 24px;
  }

  .home2-hero__compare {
    left: 60px;
    width: min(980px, calc(100vw - 112px));
  }

  .home2-social-proof {
    right: 0;
    width: 350px;
  }

  .home2 .graft-calc__selected {
    left: 0;
    width: 340px;
  }

  .home2 .graft-calc__info {
    right: 0;
    width: 300px;
  }

  .home2-journey__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home2-journey__title {
    padding-left: 24px;
    font-size: 44px;
  }

  .home2-journey-card--doctors,
  .home2-journey-card--image {
    padding: 30px;
  }

  .home2-journey-card__stamp {
    bottom: 30px;
    left: 30px;
  }

  .home2-journey-doctors {
    gap: 8px;
  }

  .home2-journey-doctor {
    width: 100%;
    min-width: 0;
  }

  .home2-journey-doctor__photo {
    width: 78px;
    height: 78px;
  }

  .home2-process__technique {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 22px;
    padding-left: 22px;
  }

  .home2-process__technique:last-child {
    min-width: 260px;
  }

  .home2-process__body {
    grid-template-columns: minmax(310px, 427px) minmax(460px, 634px);
    gap: clamp(36px, 7vw, 110px);
  }

  .home2-process__media {
    width: 100%;
  }

  .home2-plan__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: auto;
    padding: 90px 48px;
  }

  .home2-plan__intro,
  .home2-quiz-card {
    width: 100%;
  }

  .home2-plan__intro {
    padding-right: 44px;
  }

  .home2-plan__intro h2 {
    width: 100%;
    font-size: 42px;
  }

  .home2-plan__list,
  .home2-quiz-card h3,
  .home2-quiz-card__answer,
  .home2-quiz-timing__options,
  .home2-quiz-slider,
  .home2-quiz-slider__hair,
  .home2-quiz-slider__labels,
  .home2-quiz-card__btn {
    width: 100%;
  }

  .home2-quiz-card__panel {
    padding-right: 44px;
    padding-left: 44px;
  }

  .home2-quiz-slider__hair {
    aspect-ratio: 490 / 84;
    height: auto;
  }

  .home2-spotlight__copy h2,
  .home2-stories__header h2 {
    font-size: 44px;
  }

  .home2-stories__inner {
    width: min(1012px, calc(100% - 48px));
  }

  .home2-stories-tile--one,
  .home2-stories-tile--two,
  .home2-stories-tile--three,
  .home2-stories-tile--four,
  .home2-stories-tile--five,
  .home2-stories-tile--six,
  .home2-stories-tile--seven {
    width: 200px;
    height: 330px;
  }

  .home2-stories-tile--three {
    left: 215px;
  }

  .home2-stories-tile--four {
    left: 430px;
  }

  .home2-stories-tile--five {
    right: 215px;
  }

  .home2-stories-tile--seven {
    right: 0;
  }
}

@media (max-width: 960px) {
  .home2-hero__shell {
    min-height: 820px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
  }

  .home2-header {
    grid-template-columns: 1fr auto;
    width: min(680px, calc(100% - 32px));
  }

  .home2-header__nav {
    display: none;
  }

  .home2-header__actions {
    gap: 14px;
  }

  .home2-hero__content {
    grid-template-columns: 1fr;
    align-content: start;
    width: min(680px, calc(100% - 32px));
    min-height: 744px;
  }

  .home2-hero__copy {
    align-self: start;
    padding-top: 0;
    padding-bottom: 0;
  }

  .home2 {
    --home2-trust-lift: 34px;
  }

  .home2-trust {
    padding-top: 0;
  }

  /* Interim stacking only — the responsive pass comes after desktop sign-off. */
  .home2-trust__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .home2-trust__summary {
    padding-right: 0;
  }

  .home2-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
  }

  .home2-trust-card {
    padding: 4px 16px;
  }

  .home2-hero__title {
    max-width: 420px;
    font-size: clamp(48px, 12vw, 70px);
  }

  /* In the stacked hero the badge flows in the copy instead of being pinned
     at fixed offsets — translated headlines vary too much in length for any
     absolute position to survive every language. */
  .home2-lifetime-badge {
    position: relative;
    z-index: 2;
    display: inline-block;
    align-self: flex-start;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    /* Pulled up so it clips the headline's last line a little, like the
       desktop sticker — still in flow, so any translation length works. */
    margin: -14px 0 0 4px;
    font-size: 14px;
    transform: rotate(-6deg);
  }

  /* Arabic headline words are wide; the LTR max-width forces one word per
     line. Let it use the row and take a slightly smaller size. */
  html[dir="rtl"] .home2-hero__title {
    max-width: none;
    font-size: clamp(38px, 11vw, 54px);
    line-height: 1.08;
  }

  .home2-hero__copy .home2-btn {
    /* Block-level so a short translation can never pull the CTA up onto the
       badge's line. */
    display: flex;
    width: fit-content;
    margin-top: 20px;
  }

  .home2-hero__compare {
    right: -104px;
    bottom: 0;
    left: auto;
    width: min(780px, 116vw);
  }

  .home2-hero__divider {
    top: 0;
    bottom: 0;
  }

  /* The stacked hero has no clean band at the bottom — the model's chin sits
     roughly 55px from the edge — so the proof moves to the top strip under the
     header, where it lands on flat blue and above the fold. */
  .home2-social-proof {
    position: static;
    order: -1;
    width: 100%;
    max-width: 460px;
    margin: 58px 0 26px;
    text-align: left;
  }

  .home2-social-proof__avatars {
    justify-content: flex-start;
    margin-bottom: 14px;
  }

  .home2-social-proof p {
    font-size: 17px;
  }

  .home2-journey__grid {
    grid-template-columns: 1fr;
    width: min(680px, calc(100% - 32px));
  }

  .home2-journey__left {
    gap: 30px;
  }

  .home2-journey__title {
    min-height: auto;
    padding-left: 0;
    font-size: 42px;
  }

  .home2-journey-card {
    min-height: 330px;
  }

  .home2-journey-cta {
    padding: 25px 0 0;
  }

  .home2-process {
    padding-top: 20px;
  }

  .home2-process__inner {
    width: min(680px, calc(100% - 32px));
  }

  .home2-process__title {
    margin-bottom: 28px;
    font-size: 42px;
  }

  .home2-process__techniques {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home2-process__techniques::-webkit-scrollbar {
    display: none;
  }

  .home2-process__technique,
  .home2-process__technique:last-child {
    /* Stretch to fill the row when the tabs fit; keep natural width and let the
       row scroll when there are too many. */
    flex: 1 0 auto;
    min-width: auto;
    min-height: 44px;
    padding: 10px 20px;
    font-size: 17px;
    line-height: 1.4;
  }

  .home2-process__cases {
    gap: 12px;
    width: 100%;
    margin-bottom: 24px;
    padding: 0;
  }

  .home2-process__cases-label {
    font-size: 17px;
  }

  /* Wrapping beats a nested horizontal scroller on touch — a scroll area
     inside the page scroll reads as glitchy, and the avatars fit in rows. */
  .home2-process__case-rail {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 5px 0 8px;
  }

  /* The tapped case's name is already printed right below the rail; the
     hover tooltip only smears over neighbouring avatars on touch. */
  .home2-process-case span {
    display: none;
  }

  .home2-process__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 20px;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .home2-process__media {
    order: 1;
    border-radius: 36px;
  }

  .home2-process__copy {
    order: 3;
    width: 100%;
  }

  .home2-process__timeline-wrap {
    order: 2;
    width: 100%;
    margin-bottom: 0;
  }

  .home2-process__timeline {
    gap: 0;
  }

  .home2-process__timeline::before {
    top: 12px;
    right: 12px;
    left: 12px;
  }

  .home2-process-step {
    width: 24px;
    min-height: 24px;
    gap: 0;
  }

  .home2-process-step:first-child,
  .home2-process-step:last-child {
    align-items: center;
  }

  .home2-process-step__dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #1a1c1e;
    font-size: 13px;
    font-weight: 600;
    background: #ebf3f4;
  }

  .home2-process-step__dot::before {
    content: attr(data-step-number);
  }

  .home2-process-step.is-done .home2-process-step__dot {
    color: #ffffff;
    background: #6ac1d2;
  }

  .home2-process-step.is-done .home2-process-step__dot::before {
    content: "";
    width: 8px;
    height: 6px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
  }

  .home2-process-step.is-active .home2-process-step__dot {
    color: #ffffff;
    background: #1a1c1e;
    box-shadow: none;
  }

  .home2-process-step__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .home2-process__mobile-controls {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }

  .home2-process__mobile-stage {
    color: #1a1c1e;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }

  .home2-process__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #ebf3f4;
    color: #1a1c1e;
    cursor: pointer;
  }

  .home2-process__arrow span {
    width: 11px;
    height: 11px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .home2-process__arrow--next span {
    transform: rotate(225deg);
  }

  .home2-process__arrow:disabled {
    cursor: not-allowed;
    opacity: 0.38;
  }

  .home2-process__copy h3 {
    margin-bottom: 10px;
  }

  .home2-plan__inner {
    /* minmax(0,…) — a plain 1fr floors at the content's min-content width and
       pushes the column past the padding box on narrow phones. */
    grid-template-columns: minmax(0, 1fr);
    width: min(680px, 100%);
    padding: 70px 32px;
  }

  .home2-plan__intro {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .home2-plan__intro h2 {
    max-width: 560px;
    font-size: 38px;
  }

  .home2-plan__tag {
    left: min(310px, 58%);
  }

  .home2-plan__list {
    margin-bottom: 10px;
  }

  .home2-quiz-card {
    min-height: 624px;
  }

  .home2-quiz-card__panel {
    padding: 60px;
  }

  .home2-stories {
    padding-bottom: 78px;
  }

  .home2-stories__inner {
    width: min(680px, calc(100% - 32px));
    min-height: auto;
  }

  .home2-stories__header,
  .home2-stories__mosaic {
    position: relative;
    inset: auto;
  }

  .home2-stories__header {
    top: auto;
    left: auto;
    margin: 0 auto 34px;
    transform: none;
  }

  .home2-stories__header h2 {
    margin-bottom: 26px;
  }

  .home2-stories__mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .home2-stories-tile,
  .home2-stories-tile--one,
  .home2-stories-tile--two,
  .home2-stories-tile--three,
  .home2-stories-tile--four,
  .home2-stories-tile--five,
  .home2-stories-tile--six,
  .home2-stories-tile--seven {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 234 / 372;
  }

  .home2-stories-tile figcaption {
    top: -8px;
    left: -12px;
  }
}

@media (max-width: 620px) {
  .home2-hero__shell {
    min-height: 780px;
  }

  .home2-header {
    min-height: 56px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 28px;
  }

  .home2-header__logo,
  .home2-header__logo img {
    width: 132px;
  }

  .home2-header__actions {
    gap: 8px;
  }

  .home2-btn--small {
    min-width: 112px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
  }

  .home2-hero__copy {
    padding-top: 52px;
  }

  .home2 {
    --home2-trust-lift: 34px;
  }

  .home2-trust {
    padding-top: 0;
  }

  .home2-trust__panel {
    gap: 16px;
    padding: 20px 18px 8px;
    border-radius: 24px;
  }

  .home2-trust__eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .home2-trust__score {
    gap: 13px;
  }

  .home2-trust__score strong {
    font-size: 46px;
  }

  .home2-trust__title {
    margin-top: 10px;
  }

  .home2-trust__title strong {
    font-size: 19px;
  }

  /* Four columns become four list rows: one score per line, easy to run down. */
  .home2-trust__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home2-trust-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 11px 6px;
    border-radius: 12px;
  }

  .home2-trust-card + .home2-trust-card {
    border-top: 1px solid #eef3fb;
    border-left: 0;
    border-radius: 12px;
  }

  .home2-trust-card__brand {
    margin-bottom: 0;
    gap: 10px;
    font-size: 14px;
  }

  .home2-trust-card__logo {
    width: 34px;
    height: 34px;
  }

  .home2-trust-card__logo img {
    width: 21px;
    height: 21px;
  }

  .home2-trust-card__brand {
    grid-area: 1 / 1;
  }

  .home2-trust-card__count {
    grid-area: 1 / 2;
    text-align: right;
  }

  .home2-trust-card__score {
    grid-area: 1 / 3;
    min-width: 46px;
    font-size: 23px;
    text-align: right;
  }

  /* The gold stars stay on the aggregate only — repeating them on every row
     costs a second line per platform and adds nothing next to the score. */
  .home2-trust-card .home2-stars {
    display: none;
  }

  .home2-hero__title {
    max-width: 340px;
    font-size: clamp(42px, 14vw, 58px);
  }

  .home2-lifetime-badge {
    font-size: 12px;
  }

  /* No clean band for it on a phone-sized hero: below the CTA it lands on the
     model, at the top it pushes the headline under the fold. The trust panel
     right below the hero carries the same message, so the strip goes. */
  .home2-social-proof {
    display: none;
  }

  .home2-hero__copy .home2-btn {
    min-width: min(237px, 100%);
    margin-top: 16px;
  }

  .home2-hero__compare {
    right: -170px;
    bottom: 0;
    width: 680px;
    max-width: none;
  }

  .home2-hero__divider {
    top: 0;
  }

  .home2-hero__divider span {
    top: 73%;
    width: 56px;
    height: 56px;
  }

  .home2-social-proof {
    margin: 44px 0 22px;
  }

  .home2-social-proof__avatars {
    margin-bottom: 10px;
    transform: scale(0.82);
  }

  .home2-social-proof p {
    font-size: 14px;
    line-height: 1.34;
    text-shadow: 0 3px 18px rgba(16, 46, 84, 0.38);
  }

  .home2 .wrapper {
    width: calc(100% - 40px);
  }

  .home2 .title-center {
    margin-bottom: 20px;
    font-size: 34px;
    line-height: 1.2;
  }

  .home2 .subtitle-center {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.5;
  }

  .home2 .graft-calc {
    margin-top: 64px;
    margin-bottom: 80px;
  }

  .home2 .graft-calc__img-wrap {
    height: 510px;
  }

  .home2 .graft-calc__img-wrap::after {
    width: 940px;
    height: 128px;
  }

  .home2 .graft-calc__img {
    top: 0;
    width: 940px;
  }

  /* The zone overlay must shrink by the same factor as the head photo
     (940 / 1426 of the desktop sizes), or the dashed lines drift off the
     scalp. 310px → 204px, 17px → 11px. */
  .home2 .graft-calc__schema {
    top: 11px;
    width: 204px;
  }

  .home2 .graft-calc__schema svg {
    width: 204px;
    height: auto;
  }

  .home2 .graft-calc__selected,
  .home2 .graft-calc__info {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
  }

  .home2 .graft-calc__selected {
    width: 100%;
    margin-top: -160px;
    margin-bottom: 20px;
    padding: 20px 24px;
    font-size: 18px;
  }

  .home2 .graft-calc__zones-list .item .label-custom {
    font-size: 16px;
  }

  .home2 .graft-calc__info {
    width: 100%;
    padding: 0;
    text-align: center;
  }

  /* The card at the top of the section already shows the totals; repeating
     them above the CTA says the same number twice on one screen. */
  .home2 .graft-calc__info .ttl,
  .home2 .graft-calc__info .grafts,
  .home2 .graft-calc__info .hairs {
    display: none;
  }

  .home2 .graft-calc__info .btn {
    padding: 0 32px;
    font-size: 20px;
  }

  .home2-journey {
    padding-bottom: 80px;
  }

  .home2-journey__grid {
    width: calc(100% - 40px);
  }

  .home2-journey__title {
    font-size: 34px;
    line-height: 1.18;
  }

  .home2-journey-card {
    min-height: 285px;
    border-radius: 28px;
  }

  .home2-journey-card--doctors,
  .home2-journey-card--image {
    padding: 24px;
  }

  .home2-journey-card__text p {
    font-size: 16px;
  }

  .home2-journey-card__text h3,
  .home2-journey-cta p {
    font-size: 22px;
    line-height: 1.32;
  }

  .home2-journey-card--image.home2-journey-card--safe > img {
    top: 150px;
    left: -30px;
    width: 430px;
    height: auto;
  }

  .home2-journey-card--safe {
    min-height: 380px;
  }

  .home2-journey-card--doctors {
    gap: 30px;
    min-height: auto;
  }

  .home2-journey-card__header {
    align-items: flex-start;
  }

  .home2-journey-card__certs {
    margin-top: 32px;
  }

  .home2-journey-doctors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .home2-journey-doctor__photo {
    width: 88px;
    height: 88px;
  }

  .home2-journey-cta {
    padding-top: 18px;
  }

  .home2-journey-cta p {
    margin-bottom: 24px;
  }

  .home2-process {
    padding-bottom: 76px;
  }

  .home2-process__inner {
    width: calc(100% - 40px);
  }

  .home2-process__title {
    margin-bottom: 22px;
    font-size: 34px;
    line-height: 1.18;
  }

  .home2-process__technique,
  .home2-process__technique:last-child {
    min-height: 44px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
  }

  .home2-process-case {
    width: 48px;
    height: 48px;
  }

  .home2-process__media {
    border-radius: 28px;
  }

  .home2-process__copy h3 {
    font-size: 24px;
    line-height: 1.333;
  }

  .home2-process__copy p {
    font-size: 16px;
    line-height: 1.5;
  }

  .home2-process__summary {
    font-size: 15px !important;
  }

  .home2-process__timeline-wrap {
    padding: 0 2px;
  }

  .home2-process__cta {
    min-width: 207px;
    min-height: 60px;
    margin-top: 30px;
    font-size: 18px;
  }

  .home2-plan__inner {
    width: 100%;
    gap: 30px;
    padding: 54px 20px;
  }

  .home2-plan__intro {
    border-radius: 0;
  }

  .home2-plan__intro h2 {
    margin-bottom: 28px;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -1.7px;
  }

  .home2-plan__title-row {
    gap: 8px;
    white-space: normal;
  }

  .home2-plan__title-row img {
    width: 42px;
    height: 42px;
    /* Clips the photo's baked-in white corners, which show against the
       gradient at this size. */
    border-radius: 10px;
  }

  .home2-plan__tag {
    top: 8px;
    left: 210px;
    font-size: 13px;
    line-height: 1.4;
  }

  .home2-plan__list {
    gap: 14px;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.4px;
  }

  .home2-quiz-card {
    gap: 28px;
    min-height: auto;
    border-radius: 28px;
  }

  .home2-quiz-card__panel {
    gap: 28px;
    min-height: 540px;
    padding: 34px 24px;
  }

  .home2-quiz-card h3 {
    font-size: 19px;
    line-height: 1.28;
    letter-spacing: -0.6px;
  }

  .home2-quiz-card__icon {
    width: 48px;
    height: 48px;
  }

  .home2-quiz-card__copy strong {
    font-size: 36px;
    line-height: 1.16;
    letter-spacing: -1.8px;
  }

  .home2-quiz-timing {
    gap: 22px;
  }

  .home2-quiz-timing__options {
    gap: 8px;
  }

  .home2-quiz-timing__options::before {
    top: 38px;
    bottom: 38px;
    left: 36px;
  }

  .home2-quiz-timing__option {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    min-height: 72px;
    padding: 13px 14px;
    border-radius: 16px;
  }

  .home2-quiz-timing__icon {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    font-size: 34px;
  }

  .home2-quiz-timing__label {
    font-size: 14px;
    line-height: 1.32;
    letter-spacing: -0.35px;
  }

  .home2-quiz-slider__labels {
    gap: 6px;
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  .home2-quiz-slider__handle {
    --home2-quiz-handle-size: 32px;
    --home2-quiz-handle-offset: 16px;
  }

  .home2-quiz-card__btn {
    min-height: 54px;
    padding: 14px 24px;
    font-size: 18px;
  }

  .home2-play-button {
    width: 58px;
    height: 58px;
  }

  .home2-spotlight__copy h2,
  .home2-stories__header h2 {
    font-size: 34px;
    line-height: 1.18;
  }

  .home2-spotlight__btn,
  .home2-stories__btn {
    min-height: 54px;
    padding: 14px 24px;
    font-size: 17px;
  }

  .home2-stories {
    padding-bottom: 60px;
  }

  .home2-stories__inner {
    width: calc(100% - 40px);
  }

  .home2-stories__header {
    margin-bottom: 28px;
  }

  .home2-stories__btn {
    min-width: min(310px, 100%);
  }

  /* On phones the mosaic becomes a swipeable stories rail — one tile at a
     time with snap, like the story format the videos come from. It also
     stops an odd tile count from leaving a lonely half-filled row. */
  .home2-stories__mosaic {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 6px 20px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home2-stories__mosaic::-webkit-scrollbar {
    display: none;
  }

  .home2-stories-tile {
    flex: 0 0 auto;
    width: min(66vw, 250px);
    border-radius: 12px;
    scroll-snap-align: center;
  }

  .home2-stories-tile figcaption {
    font-size: 12px;
    line-height: 18px;
    transform: rotate(-6deg);
  }
}

@media (max-width: 430px) {
  .home2-hero__shell {
    min-height: 744px;
  }

  .home2-header {
    width: calc(100% - 20px);
  }

  .home2-header__logo,
  .home2-header__logo img {
    width: 118px;
  }

  .home2-btn--small {
    min-width: 102px;
    padding-right: 11px;
    padding-left: 11px;
    font-size: 12px;
  }

  .home2-hero__content {
    width: calc(100% - 28px);
  }

  .home2-hero__compare {
    right: -178px;
    bottom: 0;
    width: 660px;
  }
}

/* Story videos ------------------------------------------------------------ */

/* The playable tile is a button, so it needs the plain-element treatment the
   surrounding figure already assumes. */
.home2-stories-tile__media--play {
  width: 100%;
  padding: 0;
  border: 0;
  background: #ebf3f4;
  cursor: pointer;
  appearance: none;
}

.home2-stories-tile__media--play:focus-visible {
  outline: 3px solid #6fbaff;
  outline-offset: 3px;
}

.home2-stories-tile__media--play img {
  transition: transform 0.45s ease;
}

.home2-stories-tile__media--play:hover img {
  transform: scale(1.04);
}

.home2-story-player {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.home2-story-player[hidden] {
  display: none;
}

.home2-story-player__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 14, 0.82);
}

/* The dialog follows the video's shape instead of boxing every video inside
   one player: story videos are 9:16 portrait, press/orbit videos are 16:9. The
   trigger declares its orientation and JS sets the modifier before opening. */
.home2-story-player__frame {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
}

.home2-story-player__frame--landscape {
  width: min(960px, 100%);
  max-width: calc((100vh - 48px) * 16 / 9);
  aspect-ratio: 16 / 9;
}

.home2-story-player__slot,
.home2-story-player__slot iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.home2-story-player__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.home2-story-player__close:hover {
  background: rgba(0, 0, 0, 0.75);
}

body.has-home2-story-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .home2-stories-tile__media--play img,
  .home2-stories-tile__media--play:hover img {
    transition: none;
    transform: none;
  }
}

/* Language selector — the same component the rest of clinicana.com uses.
   Rules ported from the site stylesheets because Home 2 does not load them. */

.home2-header .header__langs {
  position: relative;
}

.home2-header .header__langs-current,
.home2-header .header__langs-current .flag {
  display: flex;
}

.home2-header .header__langs-current {
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  cursor: pointer;
}

.home2-header .header__langs-current .flag {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.home2-header .header__langs-current .flag img,
.home2-header .header__langs-drop .flag img {
  object-fit: contain;
}

.home2-header .header__langs-current .check {
  width: 24px;
  height: 24px;
  background-image: url("../img/icons/menu-arrow.svg");
  background-repeat: no-repeat;
  background-position: 50%;
  /* The closed selector sits on the blue hero; the arrow asset is dark. */
  filter: brightness(0) invert(1);
}

.home2-header .header__langs-drop .item .check {
  display: flex;
  align-items: center;
}

.home2-header .header__langs-drop {
  position: absolute;
  left: -18px;
  top: -18px;
  z-index: 40;
  width: max-content;
  padding: 10px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 15px 30px 0 rgba(22, 37, 42, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s;
  max-height: 70vh;
  overflow-y: auto;
}

.home2-header .header__langs:hover .header__langs-drop,
.home2-header .header__langs:focus-within .header__langs-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.home2-header .header__langs-drop .item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  color: #1a1c1e;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  white-space: nowrap;
  text-decoration: none;
}

.home2-header .header__langs-drop .item:hover {
  background: #ebf3f4;
}

.home2-header .header__langs-drop .item .flag,
.home2-header .header__langs-drop .item .name,
.home2-header .header__langs-drop .item .check {
  flex-shrink: 0;
}

.home2-header .header__langs-drop .item .flag {
  width: 24px;
  height: 24px;
}

/* RTL mirrors the hero grid, but absolutely-positioned pieces keep their LTR
   offsets and land on the headline — mirror them explicitly. Both are static
   (in-flow) on small screens, where offsets are inert. */
@media (min-width: 961px) {
  html[dir="rtl"] .home2-social-proof {
    right: auto;
    left: 18px;
  }

  html[dir="rtl"] .home2-lifetime-badge {
    left: auto;
    right: 120px;
    transform: rotate(8deg);
  }

  html[dir="rtl"] .home2-plan__tag {
    top: 30px;
    left: auto;
    right: 380px;
    transform: rotate(6deg);
  }
}

/* Arabic glyphs are missing from "Noto Sans Clinicana"; without this the quiz
   panel and footer fall back to a serif Arabic that clashes with the page. */
html[dir="rtl"] .home2-plan,
html[dir="rtl"] .footer {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Negative tracking breaks joined Arabic script. */
html[dir="rtl"] .home2-header__nav a {
  letter-spacing: 0;
}

html[dir="rtl"] .home2-header .header__langs-current .flag {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .home2-header .header__langs-drop {
  left: auto;
  right: -18px;
}

/* Spotlight orbit --------------------------------------------------------- */

.home2-spotlight {
  color: #1a1c1e;
  background: #ffffff;
  /* Promo stage, not reading matter: dragging the orbit must never start a
     blue text/image selection sweep across the section. */
  -webkit-user-select: none;
  user-select: none;
}

.home2-spotlight__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 110px clamp(24px, 4vw, 60px) 120px;
  background: #ebf3f4;
}

.home2-spotlight__copy {
  max-width: 860px;
  text-align: center;
}

/* Same title scale as the other section headings: dark lead line, teal
   highlight line, muted subtitle underneath. */
.home2-spotlight__copy h2 {
  margin: 0;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.home2-spotlight__copy h2 span {
  color: #1a1c1e;
}

.home2-spotlight__copy h2 span + span,
.home2-spotlight__copy h2 span:last-child {
  display: block;
  color: #6bc2d4;
}

.home2-spotlight__copy p {
  margin: 22px auto 0;
  max-width: 640px;
  color: #788288;
  font-size: 20px;
  line-height: 1.5;
}

/* The stage: a soft cone of light behind a revolving 3D ring of cards. */
.home2-orbit {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin-top: 26px;
  touch-action: pan-y;
  cursor: grab;
}

.home2-orbit.is-dragging {
  cursor: grabbing;
}

.home2-orbit__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 100%);
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(107, 194, 212, 0.28), rgba(107, 194, 212, 0.08) 55%, transparent 75%);
  pointer-events: none;
}

/* Soft floor ellipse: grounds the ring so the cards hover over something
   instead of floating in a void. */
.home2-orbit::after {
  position: absolute;
  bottom: -6%;
  left: 50%;
  width: min(760px, 86%);
  height: 90px;
  content: "";
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(31, 72, 82, 0.16), rgba(31, 72, 82, 0.05) 55%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

.home2-orbit__stage {
  position: relative;
  height: 400px;
  perspective: 1500px;
}

.home2-orbit__rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.home2-orbit__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--home2-orbit-card-w, 400px);
  height: calc(var(--home2-orbit-card-w, 400px) * 9 / 16);
  margin: calc(var(--home2-orbit-card-w, 400px) * -9 / 32) 0 0 calc(var(--home2-orbit-card-w, 400px) / -2);
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #dce9eb;
  box-shadow:
    0 30px 70px rgba(31, 72, 82, 0.26),
    0 4px 16px rgba(31, 72, 82, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  /* Coverflow-style mirror under each card; browsers without box-reflect
     simply skip it. */
  -webkit-box-reflect: below 10px linear-gradient(transparent 78%, rgba(0, 0, 0, 0.12));
  /* Placed on the ring by JS: rotateY(step * i) translateZ(radius); the rotor
     carries the shared rotation, so spinning is one transform on one node. */
  transform: rotateY(var(--home2-orbit-slot, 0deg)) translateZ(var(--home2-orbit-radius, 420px));
  cursor: inherit;
  user-select: none;
  -webkit-user-drag: none;
}

.home2-orbit__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Panel-coloured veil: JS raises it as a card turns away, so far-side cards
   read as solid card backs rather than mirrored ghosts. */
.home2-orbit__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #e2eef0;
  opacity: var(--home2-orbit-away, 0);
  pointer-events: none;
}

.home2-orbit__label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 42px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(12, 24, 28, 0.72));
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: left;
  opacity: calc(1 - var(--home2-orbit-away, 0) * 2);
  pointer-events: none;
}

.home2-orbit__card .home2-play-button {
  z-index: 3;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.home2-orbit__card.is-front .home2-play-button {
  opacity: 1;
}

.home2-orbit__card:focus-visible {
  outline: 3px solid #6fbaff;
  outline-offset: 4px;
}

.home2-spotlight .home2-spotlight__btn {
  margin-top: 74px;
}

@media (max-width: 1023px) {
  .home2-orbit__stage {
    height: 330px;
  }

  .home2-orbit__card {
    --home2-orbit-card-w: 320px;
  }

  .home2-spotlight__copy p {
    font-size: 18px;
  }
}

@media (max-width: 639px) {
  .home2-spotlight__inner {
    padding-top: 72px;
    padding-bottom: 84px;
  }

  .home2-orbit__stage {
    height: 250px;
    perspective: 1100px;
  }

  .home2-orbit__card {
    --home2-orbit-card-w: 240px;
    border-radius: 16px;
  }

  .home2-orbit__label {
    font-size: 13px;
    padding: 30px 12px 10px;
  }
}

/* ---------------------------------------------------------------------------
   Site footer — the standard Clinicana footer, restyled 1:1 from the legacy
   stylesheet (home-legacy.css), which does not load on this template.
   --------------------------------------------------------------------------- */

.footer {
  padding-top: 152px;
  padding-bottom: 40px;
  background-image: url(../img/footer-bg.png);
  background-size: 100% 100%;
  color: #1a1c1e;
  /* The legacy stylesheet sets the body font; it does not load here. */
  font-family: "Noto Sans Clinicana", "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.4px;
}

/* The legacy stylesheet puts the whole site on border-box; without it the
   50%-wide columns overflow their row on phones and stack one per line. */
.footer,
.footer *,
.footer *::before,
.footer *::after {
  box-sizing: border-box;
}

.footer .wrapper {
  position: relative;
  min-width: 320px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer__wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.footer__ttl {
  margin-bottom: 20px;
  color: #4e5a65;
}

.footer__menu li {
  margin-bottom: 12px;
}

.footer__menu li:last-child {
  margin-bottom: 0;
}

.footer__menu li a {
  color: #1a1c1e;
}

.footer .soc-item {
  display: inline-flex;
}

.footer .soc-item img {
  flex-shrink: 0;
  margin-right: 10px;
}

.footer__bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.footer__bot-address {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  color: #8d99a4;
  letter-spacing: -0.2px;
}

.footer__bot-address a {
  color: #8d99a4;
}

.footer__bot-left {
  display: flex;
}

.footer__bot-left a {
  margin-right: 30px;
  text-decoration: underline;
  color: #4e5a65;
}

.footer__bot-left .copy {
  color: #4e5a65;
}

.footer__bot-right {
  display: flex;
  gap: 10px;
}

.footer .col.col-6 {
  display: none;
}

html[dir="rtl"] .footer .soc-item {
  gap: 10px;
}

html[dir="rtl"] .footer .soc-item img {
  margin-right: 0;
}

html[dir="rtl"] .footer .soc-item span {
  direction: ltr;
}

@media (max-width: 920px) {
  .footer {
    padding-top: 120px;
  }

  .footer .wrapper {
    padding: 0 20px;
  }

  .footer__bot-left a {
    margin-right: 20px;
  }
}

@media (max-width: 840px) {
  .footer {
    padding-top: 80px;
    background-size: cover;
    background-position: top;
  }

  .footer__bot-left {
    align-items: center;
  }

  .footer__bot-left .copy {
    max-width: 220px;
  }

  .footer__wrap {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .footer__wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .footer .col {
    width: 33.33%;
    margin-bottom: 20px;
  }

  .footer .col.col-6 {
    display: block;
  }

  .footer .col.col-6 .footer__bot-right {
    flex-wrap: wrap;
  }

  .footer__bot .footer__bot-right {
    display: none;
  }

  .footer__bot-left {
    width: 100%;
  }

  .footer__bot-left .copy {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .footer .col {
    width: 50%;
    padding-right: 5px;
  }

  .footer__bot-left {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer__bot-left a {
    margin: 0 10px;
  }

  .footer__bot-left .copy {
    margin-top: 8px;
  }

  .footer__menu li a {
    font-size: 14px;
  }

  .footer__bot-right {
    max-width: 120px;
  }
}

@media (max-width: 520px) {
  .footer {
    background-image: url(../img/footer-bg-mob.png);
    background-size: 100% 100%;
  }

  .footer .col {
    margin-bottom: 40px;
  }

  .footer__bot-left .copy {
    text-align: center;
  }
}