/* ==========================================================================
   Storage Station — home.css (index.html only)
   Figma node 1:2 "home page", 1920px desktop frame.
   Percent values in this file are derived from Figma px ÷ the parent box,
   so decorative compositions scale proportionally with the viewport.
   ========================================================================== */

/* Max width for compositions that bleed to the viewport edges */
:root { --stage-max: 1920px; }


/* Illustrations bleed past the viewport edges (sloths, gallery) — clip them
   without creating a scroll container. */
main { overflow-x: clip; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: 30px; }

.hero__frame {
  position: relative;
  padding: 0 15px 13px 0;              /* room for the offset outline (right / bottom) */
}
/* Outline frame, offset 15px right / 13px down, behind the gradient box */
.hero__frame::before {
  content: "";
  position: absolute;
  top: 13px; right: 0; bottom: 0; left: 15px;
  border: 3px solid var(--color-main);
  border-radius: var(--radius-xl);
  pointer-events: none;
}

.hero__box {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;            /* content on the left in RTL */
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gradient-hero);
}
/* 1664:649 is the minimum height, not a fixed one: a longer headline grows the box and the buttons stay inside */
.hero__box::before { content: ""; flex: none; width: 0; padding-top: calc(649 / 1664 * 100%); }

.hero__cubes {
  position: absolute;
  transform: scaleX(-1);               /* mirrored in Figma */
  pointer-events: none;
}
.hero__cubes--large { left: 65.67%; top: 12.63%; width: 43.17%; }
.hero__cubes--small { left: 46.33%; top: 66.41%; width: 18.31%; }

.hero__content {
  position: relative;
  z-index: 2;
  width: min(508px, 40%);
  margin-inline-end: 7.45%;            /* 124px from left edge at 1664 */
  padding-top: 9.15%;                  /* 152px at 1664 */
  padding-bottom: clamp(24px, 2.6vw, 50px);
  color: #F0F0F0;
}
.hero__title {
  line-height: 0.81;
  letter-spacing: -0.03em;
  color: #F0F0F0;
}
.hero__text {
  margin-top: clamp(16px, 1.6vw, 30px);
  font-size: clamp(18px, 1.67vw, 32px);
  font-weight: var(--fw-medium);
  line-height: 1.19;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;                     /* a narrow column moves the second button below instead of cutting its label */
  gap: 16px;
  margin-top: clamp(16px, 1.2vw, 23px);
}
.hero__actions .btn { flex: 0 1 238.5px; min-width: max-content; padding-inline: 12px; }

.hero__sloth {
  position: absolute;
  z-index: 3;
  left: 54.04%;                        /* relative to the 1680px frame */
  top: 51px;
  width: 30.54%;
  transform: scaleX(-1);               /* mirrored in Figma */
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Branches — title + Israel map with pins
   -------------------------------------------------------------------------- */
.branches { padding-top: clamp(64px, 8.9vw, 171px); }
.branches__intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.branches__intro .section-subtitle { margin-top: 12.73px; }
.branches__intro .btn { margin-top: clamp(24px, 2.6vw, 50px); }

/* Stage = Figma y 1077 → 2017 (940px tall at 1920) */
.branches__stage {
  position: relative;
  max-width: var(--stage-max);
  margin: calc(min(100vw, 1920px) * -0.1107) auto 0;   /* overlaps the intro by 212px at 1920 */
  aspect-ratio: 1920 / 940;
}
.branches__sloth {
  position: absolute;
  z-index: 2;
  left: -2.56%;
  top: 0.74%;
  width: 37.33%;
  transform: rotate(1.14deg);
  pointer-events: none;
}
/* Mobile only: one picture from the client (map, pins and sloth together) */
.branches__mobile-map { display: none; }

.israel-map {
  position: absolute;
  left: 19.51%;
  top: 8.55%;
  width: 76.38%;
  aspect-ratio: 1466.45 / 860;
  container-type: inline-size;
}
.israel-map__img { position: absolute; inset: 0; overflow: hidden; }
.israel-map__img img {
  position: absolute;
  left: -36.98%;
  top: 0.03%;
  width: 136.99%;
  height: 100.09%;
  max-width: none;
}
.israel-map__dot { position: absolute; left: 33.28%; top: 50.44%; width: 1.075%; }
.israel-map__pins { position: absolute; inset: 0; }

.map-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 8%;
  transform: translateX(-50%);
  text-align: center;
}
.map-pin img { width: 54.2%; margin-top: -0.3%; }   /* 63.6px (incl. shadow) at 1466 */
.map-pin span {
  margin-top: -0.75cqw;
  font-size: clamp(11px, 1.27cqw, 18.66px);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  color: var(--color-white);
  text-shadow: 0 4.5px 4.5px rgba(0, 0, 0, 0.25);
}
.map-pin--stacked span { width: 3.3cqw; min-width: 36px; line-height: 0.8; }

/* --------------------------------------------------------------------------
   3. Branch photo strip (light-blue band)
   -------------------------------------------------------------------------- */
.branch-strip {
  margin-top: 1.7%;
  padding-block: clamp(24px, 3.44vw, 66px) clamp(24px, 3.23vw, 62px);
  background: var(--color-secondary);
}
.branch-strip__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3.5px;
  max-width: var(--stage-max);
  margin-inline: auto;
}
.branch-card {
  position: relative;
  aspect-ratio: 316 / 657;
  overflow: hidden;
  border-radius: 16.44px;
  background: #B6B5B5 url("../assets/home/branch-card-bg.webp") center / cover no-repeat;
}
.branch-card__photo {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.branch-card__btn {
  position: absolute;
  left: 50%;
  bottom: 4.68%;                       /* 30.8px of 657 */
  width: 75.6%;
  min-width: max-content;
  transform: translateX(-50%);
  font-size: clamp(15px, 1.07vw, 20.6px);
  padding-inline: 12px;
}
.branch-card__btn:hover { transform: translateX(-50%) translateY(-1px); }

/* --------------------------------------------------------------------------
   4. Pricing table + CTA
   -------------------------------------------------------------------------- */
.pricing {
  position: relative;
  max-width: var(--stage-max);
  margin-inline: auto;
  padding: clamp(56px, 9.48vw, 182px) var(--gutter) clamp(40px, 2.6vw, 50px);
  min-height: calc(min(100vw, 1920px) * 0.516);    /* 991px at 1920 (sloth ends 928px) */
}
.pricing__sloth {
  position: absolute;
  z-index: 2;
  right: 1.36%;
  top: calc(min(100vw, 1920px) * 0.039);          /* 75px at 1920 */
  width: 35.8%;
  pointer-events: none;
}
.pricing__main {
  position: relative;
  z-index: 1;
  width: min(871px, 100%);
  margin-inline: auto;
}
.pricing__title { font-size: clamp(30px, 3.39vw, 65px); line-height: 1.19; letter-spacing: 0; }
.pricing__main .section-subtitle { margin-top: 12.73px; }

.price-table__wrap { margin-top: clamp(24px, 2.6vw, 50px); overflow-x: auto; }
.price-table__note { margin-top: 12px; font-size: clamp(12px, 0.95vw, 18px); color: var(--color-blue-dark); text-align: center; }
.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  color: var(--color-blue-dark);
}
/* Row backgrounds on <tr> avoid hairline gaps between cells */
.price-table thead tr { background: var(--color-blue-dark); }
.price-table tbody tr { background: var(--color-bg-tint); }
.price-table th {
  height: 57.67px;
  padding: 6px 12px;
  font-size: 18.83px;
  font-weight: var(--fw-bold);
  color: var(--color-bg-tint);
}
.price-table td {
  height: 77.68px;
  padding: 6px 28px;
  border-bottom: 1.18px solid var(--color-blue-dark);
  font-size: 16.48px;
  line-height: 1.2;
}

.pricing__cta {
  position: absolute;
  z-index: 2;
  left: 3.39%;                          /* 65px at 1920 */
  top: calc(min(100vw, 1920px) * 0.2505);         /* 481px at 1920 */
  width: 19.2%;
  max-width: 369px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;              /* = right edge in RTL */
  text-align: right;
}
.pricing__cta-title {
  font-size: clamp(30px, 2.74vw, 52.57px);
  font-weight: var(--fw-bold);
  line-height: 0.83;
  color: var(--color-blue-dark);
}
.pricing__cta-text {
  max-width: 339px;
  margin-top: 16px;
  font-size: clamp(16px, 0.98vw, 18.79px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-gray);
}
.pricing__cta-btn { width: min(315.4px, 100%); margin-top: 14px; margin-inline-start: -3px; }

/* --------------------------------------------------------------------------
   5. Large lead form with sloth
   -------------------------------------------------------------------------- */
.lead-section {
  position: relative;
  z-index: 2;
  max-width: var(--stage-max);
  margin-inline: auto;
  padding-block: clamp(48px, 8.2vw, 157px) clamp(56px, 6.35vw, 122px);
  pointer-events: none;                 /* sloth overlaps the stats band */
}
.lead-section__inner { display: flex; justify-content: flex-start; pointer-events: auto; }
.lead-section__sloth {
  position: absolute;
  left: 4.74%;
  top: 0;
  width: 26.53%;
  aspect-ratio: 509.45 / 1004.66;
  object-fit: cover;
  object-position: 0 0;
}
.lead-section .lead-form { width: min(1151px, 68.5%); }
.lead-section .field--textarea { height: clamp(150px, 12.84vw, 246.6px); }
.lead-section .lead-form__title { text-align: right; }

/* --------------------------------------------------------------------------
   6. Stats band (shared block, order: number above label)
   -------------------------------------------------------------------------- */
.home-stats { position: relative; z-index: 1; }
.home-stats__title { margin-bottom: clamp(24px, 3.5vw, 67px); line-height: 1; }
.home-stats .stat { gap: 0; }

/* --------------------------------------------------------------------------
   7. Testimonials
   -------------------------------------------------------------------------- */
.testimonials { padding-top: 34px; padding-inline: clamp(16px, 4.4vw, 84px); }
.testimonials__box {
  max-width: 1753px;
  margin-inline: auto;
  padding: clamp(40px, 6.4vw, 123px) clamp(16px, 2.2vw, 42px) clamp(24px, 2.4vw, 46px);
}
.testimonials__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-right: clamp(0px, 0.2vw, 3px);   /* title inset 39px, dots 74px at 1920 */
  padding-left: clamp(0px, 3.8vw, 74px);
}
.testimonials__title {
  max-width: 842px;
  letter-spacing: -0.07em;
}
.slider-dots { display: flex; gap: 7.58px; flex: none; margin-top: 4px; direction: ltr; }
.slider-dots__dot {
  width: 15.15px;
  height: 7.58px;
  border-radius: 15.15px;
  background: #D9D9D9;
  transition: width var(--transition), background-color var(--transition);
}
.slider-dots__dot.is-active { width: 60.61px; background: var(--color-main); }

/* Reviews carousel nav (20.10): [prev] dots [next]; built by home.js from the real page count */
.slider-nav { display: flex; align-items: center; gap: 16px; flex: none; margin-top: 4px; }
.slider-nav[hidden] { display: none; }
.slider-nav .slider-dots { margin-top: 0; direction: rtl; }   /* page 1 on the right, by the "prev" arrow */
.slider-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  background: var(--color-white);
  transition: opacity var(--transition), background-color var(--transition);
}
.slider-nav__btn::before {
  content: "";
  width: 18px;
  height: 15px;
  background: var(--color-main);
  -webkit-mask: url("../assets/common/icon-arrow.svg") center / contain no-repeat;
          mask: url("../assets/common/icon-arrow.svg") center / contain no-repeat;
}
.slider-nav__btn--next::before { transform: rotate(180deg); }   /* next = towards the end = left in RTL */
.slider-nav__btn:not(:disabled):hover { background: var(--color-bg-tint); }
.slider-nav__btn:disabled { opacity: 0.35; cursor: default; }

.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 27px) / 4);
  gap: 27px;
  margin-top: clamp(32px, 5.7vw, 110px);
  padding: 4px 3px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial { display: flex; flex-direction: column; gap: 23.3px; scroll-snap-align: start; }
.testimonial__photo {
  width: 100%;
  aspect-ratio: 397.18 / 701.68;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-image);
}
.testimonial__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 126px;
  padding: 16px 24px;
  text-align: center;
  color: var(--color-blue-dark);
}
.testimonial__quote { font-size: clamp(16px, 0.99vw, 19px); line-height: 1.2; }
.testimonial__name { font-size: 12px; }
.testimonials .btn--link { margin-top: clamp(16px, 1.9vw, 36px); }
.testimonial__video { display: block; height: auto; background: #000; }

/* --------------------------------------------------------------------------
   8. Solutions split — light panel with two sloth illustrations
   -------------------------------------------------------------------------- */
.solutions {
  max-width: var(--stage-max);
  margin-inline: auto;
  padding: clamp(64px, 9.5vw, 183px) 6.25% clamp(64px, 4.2vw, 81px) 6.67%;   /* panel x 128 → 1800 */
}
.solutions__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1672 / 1153;
  padding: 4.3% 2% 5.1%;
  border-radius: clamp(40px, 6.9vw, 132px);
  background: var(--color-bg-tint);
}
.solutions__pile {
  position: absolute;
  left: -4.78%;
  top: -13.5%;
  width: 53.95%;
  pointer-events: none;
}
.solutions__boxes {
  position: absolute;
  left: 49.34%;
  top: 38.53%;
  width: 62.56%;
  pointer-events: none;
}
.solutions__logos { position: absolute; inset: 0; }
.box-logo {
  position: absolute;
  width: 2.063%;
  mix-blend-mode: overlay;
  transform: scaleX(-1);
}
.box-logo--dot { width: 0.33%; mix-blend-mode: normal; }

.solutions__block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-blue-dark);
}
.solutions__block--first { grid-column: 1; grid-row: 1; align-self: start; }
.solutions__block--second { grid-column: 2; grid-row: 2; align-self: end; }
.solutions__title {
  font-size: clamp(36px, 4.24vw, 81.35px);
  font-weight: var(--fw-bold);
  line-height: 0.82;
  letter-spacing: -0.02em;
}
.solutions__block--first .solutions__title { max-width: 413px; }
.solutions__block--second .solutions__title { max-width: 556px; }
.solutions__text {
  margin-top: clamp(14px, 1.4vw, 27px);
  font-size: clamp(20px, 1.78vw, 34.26px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.solutions__block--second .solutions__text { max-width: 479px; }
.solutions__text strong { font-weight: var(--fw-bold); }
.solutions__btn { width: min(406px, 100%); margin-top: clamp(20px, 1.7vw, 32px); }
.solutions__btn--wide { width: min(456px, 100%); }

/* --------------------------------------------------------------------------
   9. Gallery — #MoveStorgeStation collage
   -------------------------------------------------------------------------- */
.gallery { padding-top: clamp(56px, 6.5vw, 125px); overflow: hidden; }
.gallery__head { position: relative; z-index: 1; }
.gallery__title {
  margin-top: 9px;
  font-size: clamp(32px, 3.125vw, 60px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-blue-dark);
}
.gallery__stage {
  position: relative;
  max-width: var(--stage-max);
  margin: calc(min(100vw, 1920px) * -0.026) auto 0;   /* images start 50px above the title bottom */
  aspect-ratio: 1920 / 769;
}
.gallery__item { position: absolute; overflow: hidden; border-radius: var(--radius-xl); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* Custom crops from Figma */
.gallery__item--crop-5 img { position: absolute; left: -75.17%; top: -64.75%; width: 183.01%; height: 170.82%; max-width: none; }
.gallery__item--crop-8 img { position: absolute; left: -26.15%; top: -50.21%; width: 138.54%; height: 190.65%; max-width: none; }

/* --------------------------------------------------------------------------
   10. Bottom compact lead form
   -------------------------------------------------------------------------- */
.bottom-form {
  display: flex;
  justify-content: center;
  padding-block: clamp(56px, 9.7vw, 186px) clamp(56px, 6.25vw, 120px);
}
.bottom-form .field--textarea { height: 129.7px; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
/* 1201–1919px (laptops): the 871px table no longer fits between the CTA and the
   sloth, which scale with the viewport. Each side now reserves only the room its
   element needs (padding-left = CTA, padding-right = sloth) and the table narrows
   in between. The sloth's tablet still overlaps the table's right edge
   (--pricing-tablet-in, 42px at 1920) but stops short of the first column's text.
   Sloth artwork: opaque from 21% to 88% of the image width (0.79 / 0.669 below).
   From ~1650px every value converges to the 1920 composition. */
@media (min-width: 1201px) and (max-width: 1919px) {
  .pricing {
    --pricing-cta-side: max(19.5% + 26px, (100% - 871px) / 2);
    --pricing-sloth-w: clamp(28%, 58.8% - 370px, 35.8%);
    --pricing-tablet-in: calc(3.34% - 22px);
    --pricing-sloth-side: max(16px + 0.669 * var(--pricing-sloth-w) - var(--pricing-tablet-in), (100% - 871px) / 2);
    padding-left: var(--pricing-cta-side);
    padding-right: var(--pricing-sloth-side);
  }
  .pricing__sloth {
    width: var(--pricing-sloth-w);
    right: calc(var(--pricing-sloth-side) + var(--pricing-tablet-in) - 0.79 * var(--pricing-sloth-w));
  }
  /* cell text box stays ~150px as at 1920: same line breaks in the narrower table */
  .price-table td { padding-inline: min(28px, 10px + (100vw - 1201px) * 0.053); }
  /* CTA: right edge 26px before the table (never past its 1920 spot), ≥2% from the left edge */
  .pricing__cta {
    --pricing-cta-end: min(22.59%, var(--pricing-cta-side) - 26px);
    left: auto;
    right: calc(100% - var(--pricing-cta-end));
    width: min(19.2%, var(--pricing-cta-end) - 2%);
  }
}

@media (max-width: 1200px) {
  /* Pricing: CTA flows under the table, sloth becomes a small accent */
  .pricing { min-height: 0; }
  .pricing__sloth { width: 26%; right: 0; top: 0; opacity: 1; }
  .pricing__main { margin-inline: 0 auto; width: min(871px, 74%); }
  .pricing__cta {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 40px;
    align-items: center;
    text-align: center;
  }
  .pricing__cta-btn { margin-inline-end: 0; }

  .lead-section .lead-form { width: 66%; }

  .testimonials__track { grid-auto-columns: calc((100% - 2 * 20px) / 2.4); gap: 20px; }
}


/* ==========================================================================
   ≤768px — MOBILE (Figma mobile frame 327:213, 400px wide).
   Px values are Figma mobile px; % values are Figma px ÷ the parent box so
   the illustrated compositions scale with the viewport width.
   Inline desktop positions (map pins, branch photos, gallery) are overridden
   with !important because the mobile crops/positions differ.
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- 1. Hero: box 360 × 425, outline offset 3.6 / 9.2, buttons below ---- */
  .hero { padding-top: 0; }
  .hero__frame { padding: 0 8.05px 9.17px 0; }
  .hero__frame::before { top: 9.17px; left: 3.57px; border-width: 2px; }
  .hero__box {
    display: block;
    aspect-ratio: 359.945 / 425.14;
  }
  .hero__box::before { content: none; }
  .hero__cubes--large { left: 51.42%; top: 53.39%; width: 60.23%; }
  .hero__cubes--small { left: 24.44%; top: 77.88%; width: 25.56%; }
  .hero__content {                      /* 254px text column, centred in the box */
    width: 100%;
    margin: 0;
    padding: 21px 12px 0;
  }
  .hero__title,
  .hero__text { max-width: 254px; margin-inline: auto; }
  .hero__title { line-height: 34.5px; letter-spacing: -0.03em; }
  .hero__text {
    margin-top: 14px;
    font-size: 16.02px;
    line-height: 1;
    letter-spacing: 0.01em;
  }
  /* The headline is five lines and the text ends 240px down at any phone width: the sloth starts below it
     (it used to cover «הארץ»), and the box grows to keep the sloth's 40px overhang (box = 100vw − 40px). */
  .hero__sloth { left: 24%; top: 248px; width: 52%; }
  .hero__box { aspect-ratio: auto; height: calc(208px + 0.714 * (100vw - 40px)); }

  .hero__actions-mobile {
    display: flex;
    flex-direction: column;
    gap: 4.84px;
    margin-top: 15.7px;
  }
  .hero__btn-outline { border: 1.2px solid var(--color-blue-dark); }

  /* ---- 2. Branches: title, rotated map with labels + flag sloth, button ---- */
  .branches {
    display: flex;
    flex-direction: column;
    padding-top: 33px;
  }
  .branches__intro { display: contents; }
  .branches__intro .section-title {
    order: 1;
    padding-inline: 4px;
    font-size: 34.44px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .branches__intro .section-subtitle {
    order: 2;
    margin-top: 5.74px;
    padding-inline: 3px;
    font-size: 11.48px;
    line-height: 1.2;
  }
  .branches__intro .btn { order: 4; margin: 0 var(--gutter); }

  .branches__stage {                     /* Figma y 706 → 1277 */
    order: 3;
    width: 100%;
    margin: 0;
    aspect-ratio: 400 / 571;
  }
  /* the client's mobile map (14.10) replaces the rotated map, the labels and the separate sloth */
  .branches__stage { aspect-ratio: auto; margin-block: 8px 16px; }
  .branches__stage .branches__sloth,
  .branches__stage .israel-map { display: none; }
  .branches__mobile-map { display: block; position: static; width: 100%; height: auto; }
  .branches__sloth {
    left: -1.79%;
    top: 31.5%;
    width: 78.24%;
    transform: rotate(-1.14deg) scaleX(-1);
  }
  /* Unrotated map frame (520.7 × 310.5), rotated −82.45° around its centre */
  .israel-map {
    left: 2.545%;
    top: 21.59%;
    width: 130.18%;
    aspect-ratio: 520.736 / 310.498;
  }
  .israel-map__img { overflow: hidden; transform: rotate(-82.45deg); }
  .israel-map__img img { left: -41.84%; top: -1.81%; width: 141.84%; height: 101.93%; }
  .israel-map__dot { left: 46.63%; top: 79.61%; width: 1.113%; }

  /* Mobile shows labels only (no pin icons) */
  .map-pin { width: auto; }
  .map-pin img { display: none; }
  .map-pin span {
    margin-top: 0;
    font-size: 1.3175cqw;                /* 6.86px at 400 */
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1.66px 1.66px rgba(0, 0, 0, 0.25);
  }
  .map-pin--stacked span { width: 3.42cqw; min-width: 0; line-height: 0.785; white-space: normal; }
  .israel-map__pins .map-pin:nth-child(1) { left: 44.00% !important; top: 64.45% !important; }  /* תל אביב */
  .israel-map__pins .map-pin:nth-child(2) { left: 47.23% !important; top: 80.68% !important; }  /* ראשון לציון */
  .israel-map__pins .map-pin:nth-child(3) { left: 45.48% !important; top: 99.93% !important; }  /* יבנה */
  .israel-map__pins .map-pin:nth-child(4) { left: 57.74% !important; top: 71.78% !important; }  /* פתח תקווה */
  .israel-map__pins .map-pin:nth-child(5) { left: 55.06% !important; top: 87.19% !important; }  /* אזור */
  .israel-map__pins .map-pin:nth-child(6) { left: 61.39% !important; top: 76.31% !important; }  /* פתח תקווה */

  /* ---- 3. Branch photos: 2 × 3 grid of 179 × 202 cards ---- */
  .branch-strip { margin-top: 47.4px; padding: 24px var(--gutter) 23px; }
  .branch-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 9.34px;
  }
  .branch-card { aspect-ratio: 179.451 / 202.166; border-radius: 9.34px; }
  .branch-card__btn {
    bottom: 3.39%;
    width: 89.71%;
    min-width: 0;
    min-height: 31.66px;
    padding: 6.94px 8px;
    gap: 5.78px;
    border-radius: 4.62px;
    font-size: 13.87px;
    border: 0;
  }
  .branch-card__btn .btn__icon { width: 13.87px; height: 11.56px; }
  .branch-card:nth-child(1) .branch-card__photo { left: -215.02% !important; top: -35.94% !important; width: 374.68% !important; height: 221.58% !important; }
  .branch-card:nth-child(2) .branch-card__photo { left: -10.55% !important; top: -8.85% !important; width: 120.83% !important; height: 161.14% !important; }
  .branch-card:nth-child(3) .branch-card__photo { left: -46.51% !important; top: -46.26% !important; width: 192.72% !important; height: 228.09% !important; }
  .branch-card:nth-child(4) .branch-card__photo { left: -41.66% !important; top: -38.00% !important; width: 156.94% !important; height: 185.74% !important; }
  .branch-card:nth-child(5) .branch-card__photo { left: -58.80% !important; top: -54.94% !important; width: 175.93% !important; height: 277.55% !important; }
  .branch-card:nth-child(6) .branch-card__photo { left: -31.27% !important; top: -54.11% !important; width: 171.20% !important; height: 189.89% !important; }

  /* ---- 4. Pricing: bleeding table, then calculator sloth (left) + CTA (right) ---- */
  .pricing { padding: 34px var(--gutter) 45.5px; min-height: 0; }
  .pricing__main { width: 100%; margin: 0; }
  .pricing__title {
    max-width: 282px;
    margin-inline: auto;
    font-size: 34px;
    line-height: 29.93px;
  }
  .pricing__main .section-subtitle { margin-top: 7.3px; font-size: 14.65px; line-height: 1.2; }

  .price-table__wrap {
    margin: 41.4px calc(-1 * (var(--gutter) + 14px)) 0;   /* 428px wide at 400 */
    overflow: visible;
  }
  .price-table { min-width: 0; }
  .price-table th {
    height: 28.34px;
    padding: 0 13.88px;
    font-size: 9.25px;
    line-height: 1.2;
  }
  .price-table td {
    height: 38.17px;
    padding: 0 13.88px;
    border-bottom-width: 0.58px;
    font-size: 8.1px;
    line-height: 1.2;
  }
  .price-table th:first-child,
  .price-table td:first-child { padding-right: 20.98px; }
  .price-table th:last-child,
  .price-table td:last-child { padding-left: 26.03px; }

  .pricing__sloth {
    top: auto;
    right: auto;
    bottom: 0;
    left: 25px;
    width: 197px;
    transform: scaleX(-1);
  }
  .pricing__cta {
    position: static;
    width: 217px;
    max-width: none;
    margin: 40.7px 0 0 auto;              /* right-aligned column */
    align-items: flex-start;
    text-align: right;
  }
  .pricing__cta-title { font-size: 31.29px; line-height: 25.99px; }
  .pricing__cta-text { max-width: 201.67px; margin-top: 12.5px; font-size: 11.18px; line-height: 13.4px; }
  .pricing__cta-btn {
    width: 187.7px;
    min-height: 27.92px;
    margin: 12.2px -2px 0 0;
    padding: 6.13px 12.26px;
    gap: 5.1px;
    border-radius: 4.09px;
    font-size: 12.26px;
  }
  .pricing__cta-btn .btn__icon { width: 12.26px; height: 10.21px; }

  /* ---- 5. Large lead form + peeking phone sloth (right edge) ---- */
  .lead-section { padding-block: 15px 42.4px; }
  .lead-section .lead-form { width: 100%; }
  .lead-section .lead-form__title { text-align: center; }
  .lead-section .field--textarea { height: 346px; }
  /* Crop (clip-path) of the sloth's head + phone, mirrored and tilted −17.7° */
  .lead-section__sloth {
    z-index: 3;
    top: 498.5px;
    left: calc(100% - 50.64px);
    width: 204.3px;
    aspect-ratio: auto;
    object-fit: fill;
    clip-path: inset(16.72px 79.7px 76.42px 0);
    transform-origin: 60.33px 97.05px;
    transform: rotate(-17.74deg) scaleX(-1);
  }

  /* ---- 6. Stats ---- */
  .home-stats__title { margin-bottom: 37px; }
  .home-stats .stats { gap: 24px; }
  .home-stats .stat { gap: 12px; }
  .home-stats .stat__number { line-height: 1.185; }
  .home-stats .stat__label { line-height: 1.233; }

  /* ---- 7. Testimonials: full-bleed white box, 146px photo cards scroll ---- */
  .testimonials { padding: 29px 0 0; }
  .testimonials__box {
    max-width: none;
    padding: 16px 0 0;
    border-radius: 3.65px;
    /* white only behind the cards (412px); "לכל ההמלצות" sits on the page bg */
    background: linear-gradient(var(--color-white), var(--color-white)) top / 100% calc(100% - 40.5px) no-repeat;
  }
  .testimonials__head { display: block; padding: 0 14px; }
  .testimonials__title { max-width: 287px; font-size: 31px; line-height: 25px; }
  .slider-dots,
  .slider-nav { display: none; }
  .testimonials__track {
    grid-auto-columns: 146px;
    gap: 8px;
    margin-top: 17.3px;
    padding: 0 16.5px 0 16px;
    scroll-padding-inline: 16px;
  }
  .testimonial { gap: 10.8px; }
  .testimonial__photo {
    aspect-ratio: 146 / 259;
    border-radius: 3.65px;
    box-shadow: 0 0.91px 1.21px rgba(0, 0, 0, 0.25);
  }
  .testimonial__card {
    gap: 0;
    min-height: 47.19px;
    padding: 4px 10px;
    border-radius: 3.47px;
    box-shadow: 0.22px 0.22px 1.89px rgba(0, 0, 0, 0.25);
  }
  .testimonial__quote,
  .testimonial__name { font-size: 6.59px; line-height: 1.2; }
  .testimonials .btn--link { margin-top: 6.7px; }
  /* video reviews need room for the player controls: wider cards, white box to the bottom */
  .testimonials--video .testimonials__box { background: var(--color-white); padding-bottom: 16px; }
  .testimonials--video .testimonials__track { grid-auto-columns: 62%; gap: 10px; }
  .testimonials--video .testimonial__photo { aspect-ratio: 9 / 16; border-radius: 8px; }

  /* ---- 8. Solutions: one stacked panel (children re-ordered via display:contents) ---- */
  .solutions { padding: 12.5px var(--gutter) 0; }
  .solutions__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
    padding: 17px 0 0;
    border-radius: 55.8px;
  }
  .solutions__block { display: contents; }
  .solutions__title { position: relative; font-size: 34.4px; line-height: 28.29px; letter-spacing: -0.02em; }
  .solutions__block--first .solutions__title { order: 1; max-width: 336px; }
  .solutions__block--first .solutions__title br,
  .solutions__block--first .solutions__text br { display: none; }
  .solutions__text { position: relative; font-size: 14.49px; line-height: 14.78px; letter-spacing: -0.02em; }
  .solutions__block--first .solutions__text { order: 2; max-width: 336px; margin-top: 7.7px; }
  .solutions__pile,
  .solutions__boxes { position: relative; left: auto; top: auto; flex: none; width: 103.64%; }
  .solutions__pile { order: 3; margin-top: -31.8px; }
  .solutions__btn { position: relative; z-index: 1; }
  .solutions__block--first .solutions__btn { order: 4; width: calc(100% - 14px); margin-top: -7.8px; }
  .solutions__block--second .solutions__title { order: 5; max-width: 337px; margin-top: 28.4px; }
  .solutions__block--second .solutions__text { order: 6; max-width: 290px; margin-top: 10px; }
  .solutions__boxes { order: 7; margin-top: 23.8px; }
  .solutions__block--second .solutions__btn { order: 8; width: 100%; margin-top: 5.1px; }

  /* ---- 9. Gallery: 5-photo collage (Figma y 5524 → 5960) ---- */
  .gallery { padding-top: 102px; }
  .gallery .eyebrow { font-size: 14.37px; }
  .gallery__title { margin-top: -3.5px; font-size: 26.96px; }
  .gallery__stage { margin: 19.3px 0 0; aspect-ratio: 400 / 436.5; }
  .gallery__item { border-radius: 11.67px; }
  .gallery__item:nth-child(1),
  .gallery__item:nth-child(2),
  .gallery__item:nth-child(4),
  .gallery__item:nth-child(9) { display: none; }
  .gallery__item:nth-child(8) { left: 41.68% !important; top: 0 !important;      width: 58.82% !important; height: 51.45% !important; }
  .gallery__item:nth-child(7) { left: 0.75% !important;  top: 10.19% !important; width: 38.17% !important; height: 41.33% !important; }
  .gallery__item:nth-child(3) { left: 62.95% !important; top: 53.45% !important; width: 37.55% !important; height: 46.55% !important; }
  .gallery__item:nth-child(5) { left: 0.74% !important;  top: 53.43% !important; width: 23.5% !important;  height: 36.88% !important; }
  .gallery__item:nth-child(6) { left: 26.24% !important; top: 53.43% !important; width: 34% !important;    height: 36.88% !important; }

  /* ---- 10. Bottom compact lead form ---- */
  .bottom-form { display: block; padding-block: 60.5px 176.4px; }
  .bottom-form .field--textarea { height: 346px; }
}