/* ==========================================================================
   Storage Station — business-storage-2.css
   Page: business-storage-2.html  (Figma node 192:438)
   Shared service-page styles live in css/service.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bs2-hero { padding-bottom: clamp(40px, 11.6vw, 222px); }
.bs2-hero .service-hero__inner { grid-template-columns: minmax(0, 574px) minmax(0, 1fr); padding-inline-end: clamp(16px, 4.48vw, 86px); }  /* image 86px from the left @1920 */
.bs2-hero__text { max-width: 574px; }
.bs2-hero__media { width: 100%; max-width: 1064px; }
.bs2-hero__media img {
  aspect-ratio: 1064 / 751;
  object-fit: cover;
  object-position: top;
}

/* --------------------------------------------------------------------------
   "יותר מקום לעסק" — light rounded panel with a dark offset "shadow"
   -------------------------------------------------------------------------- */
.bs2-audience { padding-inline: clamp(16px, 2.4vw, 46px) clamp(16px, 3.02vw, 58px); }  /* panel 46px from the right / 58px from the left @1920 */
.bs2-audience__panel {
  padding: clamp(40px, 4.43vw, 85px) clamp(16px, 2.2vw, 42px) clamp(48px, 6.15vw, 118px) clamp(16px, 1.67vw, 32px);
  background: var(--color-bg-tint);
  border-radius: clamp(40px, 6.875vw, 132px);
  box-shadow: -15px 23px 0 var(--color-blue-dark);
}
.bs2-audience__title { letter-spacing: -0.01em; }
.bs2-audience__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(24px, 1.72vw, 33px);
}
.bs2-audience__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 16px;
  text-align: center;
}
.bs2-audience__item:not(:last-child)::after {   /* vertical divider (left side in RTL) */
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: clamp(50px, 5.1vw, 98px);
  bottom: 7px;
  width: 3px;
  background: var(--color-blue-dark);
}
.bs2-audience__img {
  width: auto;
  height: clamp(150px, 16.3vw, 313px);
  object-fit: contain;
}
.bs2-audience__name {
  font-size: clamp(24px, 2.42vw, 46.4px);
  font-weight: var(--fw-bold);
  line-height: 0.88;
  color: var(--color-blue-dark);
}
.bs2-audience__desc {
  max-width: 316px;
  margin-top: 8px;
  font-size: clamp(16px, 1.2vw, 23.1px);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.bs2-steps { padding-block: clamp(64px, 11.7vw, 225px) clamp(64px, 9.9vw, 190px); }
.bs2-steps__title { letter-spacing: -0.01em; }
.bs2-steps__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(40px, 7.2vw, 139px);
  color: var(--color-blue-dark);
  font-weight: var(--fw-bold);
}
.bs2-step { display: flex; flex-direction: column; flex: 0 1 auto; }
.bs2-step:nth-child(1) { max-width: 280px; }
.bs2-step:nth-child(3) { max-width: 355px; }
.bs2-step:nth-child(5) { max-width: 323px; }
.bs2-step:nth-child(7) { max-width: 300px; }
.bs2-step__num {
  font-size: clamp(56px, 5.59vw, 107.3px);
  line-height: 0.85;
}
.bs2-step__text {
  margin-top: 6px;
  font-size: clamp(20px, 2vw, 38.6px);
  line-height: 1.02;
}
.bs2-steps__arrow {
  flex: none;
  width: clamp(48px, 6.03vw, 115.867px);
  margin-top: clamp(8px, 0.9vw, 16px);
}
.bs2-steps__arrow img { width: 100%; height: auto; transform: rotate(180deg); }  /* points left (RTL flow) */

/* --------------------------------------------------------------------------
   Security card
   -------------------------------------------------------------------------- */
.bs2-security {
  position: relative;
  margin-inline: clamp(16px, 4.37vw, 84px);
  margin-bottom: clamp(120px, 16.1vw, 310px);
}
.bs2-security__card {
  position: relative;
  min-height: clamp(560px, 62.76vw, 1205px);
  padding: clamp(40px, 6.46vw, 124px) clamp(20px, 4vw, 80px) 0;
  overflow: hidden;
  background: var(--color-white);
  border-radius: clamp(20px, 1.82vw, 35px);
  text-align: center;
}
.bs2-security__title {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 3.49vw, 67px);
  font-weight: var(--fw-bold);
  line-height: 0.82;
  color: var(--color-blue-dark);
}
.bs2-security__text {
  position: relative;
  z-index: 1;
  max-width: 1168px;
  margin: clamp(24px, 2.4vw, 46px) auto 0;
  font-size: clamp(17px, 1.47vw, 28.2px);
  font-weight: var(--fw-bold);
  line-height: 1.23;
  color: var(--color-main);
}
.bs2-security__cube {
  position: absolute;
  height: auto;
  transform: scaleX(-1);              /* Figma: mirrored */
}
.bs2-security__cube--lg { left: 53.12%; bottom: 0; width: 46.88%; }
.bs2-security__cube--sm { left: 32.12%; bottom: 6.63%; width: 19.89%; }
.bs2-security__sloth {
  position: absolute;
  top: clamp(150px, 10vw, 193px);
  left: 50%;
  width: min(66.3%, 1163px);
  height: auto;
  transform: translateX(-50%) scaleX(-1);   /* Figma: mirrored */
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   "המחסן שלכם…" — gradient band, boxes overflow above & below
   -------------------------------------------------------------------------- */
.bs2-band { border-top: 14px solid var(--color-blue-dark); }
.bs2-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 566px) minmax(0, 1193px);
  justify-content: space-between;
  align-items: center;
  column-gap: 24px;
  padding-inline-end: clamp(16px, 2.08vw, 40px);   /* image 40px from the left @1920 */
  min-height: clamp(420px, 36.6vw, 703px);
}
.bs2-band__title { max-width: 566px; }
.bs2-band__text {
  max-width: 540px;
  margin-top: clamp(16px, 1.2vw, 23px);
  font-size: clamp(17px, 1.35vw, 26px);
  font-weight: var(--fw-bold);
  line-height: 1.23;
  color: var(--color-secondary);
}
.bs2-band__btn { min-width: min(372px, 100%); margin-top: clamp(20px, 1.2vw, 22px); }
.bs2-band__media {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  margin-block: calc(clamp(40px, 7.55vw, 145px) * -1) calc(clamp(12px, 2.24vw, 43px) * -1);
}
.bs2-band__media img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Lead form + sloth
   -------------------------------------------------------------------------- */
.bs2-form { padding-block: clamp(56px, 4.3vw, 83px) clamp(24px, 2.1vw, 41px); }
.bs2-form__inner {
  display: grid;
  grid-template-columns: minmax(0, 1151px) minmax(0, 509px);
  justify-content: space-between;
  column-gap: 40px;
  padding-inline-end: clamp(16px, 4.64vw, 89px);   /* sloth 89px from the left @1920 */
}
.bs2-form__form .field--lg.field--textarea { height: clamp(150px, 12.84vw, 246.6px); min-height: 0; }  /* rows=4 would otherwise grow it */
.bs2-form__form { grid-column: 1; grid-row: 1; margin-top: clamp(0px, 5.05vw, 97px); }
.bs2-form__media { grid-column: 2; grid-row: 1; }
.bs2-form__media img {
  width: 100%;
  aspect-ratio: 509 / 1005;
  object-fit: cover;
  object-position: left top;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .bs2-hero .service-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bs2-audience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .bs2-audience__item::after { display: none; }
  .bs2-steps__list { flex-wrap: wrap; justify-content: center; gap: 32px 40px; }
  .bs2-steps__arrow { display: none; }
  .bs2-step { flex: 0 1 calc(50% - 20px); max-width: none !important; }
  .bs2-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: var(--gutter); }
  .bs2-form__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); padding-inline: var(--gutter); }
}

/* ==========================================================================
   ≤768px — MOBILE (Figma mobile frame 339:1574, 400px wide)
   Hero basics live in css/service.css.
   ========================================================================== */
@media (max-width: 768px) {
  /* ---- Hero ---- */
  .bs2-hero { padding-bottom: 0; }
  .bs2-hero .service-hero__inner { padding-inline: var(--gutter); }
  .bs2-hero__text { max-width: 332px; }
  .bs2-hero__media {
    width: min(109.5vw, 560px);          /* 438px @ 400, bleeds past both edges */
    margin-top: 20px;
    transform: translateX(1.83%);        /* Figma: 8px right of center */
  }

  /* ---- Audiences: title above a 2×2 light panel with dark offset shadow ---- */
  .bs2-audience { padding: 21px 0 0; }
  .bs2-audience__panel { padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .bs2-audience__title {
    font-size: 34px;
    line-height: 34px;
    letter-spacing: normal;
    padding-inline: var(--gutter);
    text-wrap: balance;
  }
  .bs2-audience__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 31px;
    margin: 7px 4px 0 7px;
    padding: 23px 0 30px;
    background: var(--color-bg-tint);
    border-radius: 67px;
    box-shadow: -7px 6px 0 var(--color-blue-dark);
  }
  .bs2-audience__item { justify-content: flex-end; padding-inline: 8px; }
  /* vertical divider between the columns */
  .bs2-audience__item:nth-child(odd)::after {
    display: block;
    top: 32.6px;
    bottom: auto;
    width: 1.31px;
    height: 139.72px;
  }
  .bs2-audience__item:nth-child(3)::after { top: 22px; }
  /* horizontal divider under the first row */
  .bs2-audience__item:nth-child(-n+2)::before {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 50%;
    width: 139.72px;
    height: 1.31px;
    background: var(--color-blue-dark);
    transform: translateX(-50%);
  }
  .bs2-audience__item:nth-child(1) .bs2-audience__img { height: 125.7px; }
  .bs2-audience__item:nth-child(2) .bs2-audience__img { height: 131.22px; }
  .bs2-audience__item:nth-child(3) .bs2-audience__img { height: 137.48px; margin-bottom: -5px; }
  .bs2-audience__item:nth-child(4) .bs2-audience__img { height: 140.13px; }
  .bs2-audience__name { font-size: 19.7px; line-height: 17.39px; }
  .bs2-audience__desc { max-width: 134px; margin-top: 4.3px; font-size: 9.82px; line-height: 11.97px; }

  /* ---- Steps: vertical, thin light-blue down arrows ---- */
  .bs2-steps { padding-block: 67px 69px; }
  .bs2-steps__title {
    margin-inline: calc(var(--gutter) * -1);
    font-size: min(42px, 10.5vw);
    letter-spacing: normal;
  }
  .bs2-steps__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin-top: 40px;
    text-align: center;
  }
  .bs2-step { flex: none; align-items: center; max-width: 248px !important; }
  .bs2-step__num { font-size: 59.65px; line-height: 48px; }
  .bs2-step__text { margin-top: 0; font-size: 21.45px; line-height: 21.87px; }
  .bs2-steps__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 34px;
    margin: 22px 0 14px;
  }
  .bs2-steps__arrow img { width: 34px; height: 19px; transform: rotate(90deg); }   /* points down */

  /* ---- Security card: white rounded card, sloth overflowing below ---- */
  .bs2-security { margin: 0 2px 108px; overflow-x: clip; }
  .bs2-security__card {
    min-height: 449px;
    padding: 31px 12px 0;
    border-radius: 67px;
  }
  .bs2-security__title { max-width: 330px; margin-inline: auto; font-size: 34px; line-height: 27.92px; }
  .bs2-security__text { margin-top: 14px; font-size: 14.28px; line-height: 17.58px; }
  .bs2-security__cube { display: none; }
  .bs2-security__sloth {
    top: 115px;
    bottom: auto;
    left: calc(50% - 215px);
    width: 463px;
    max-width: none;
    transform: scaleX(-1);
  }

  /* ---- Band: gradient box (214px) with title + text, boxes image, button ---- */
  .bs2-band {
    border-top: 0;
    background: linear-gradient(180deg, #0D518D 0%, #1179BA 100%) top / 100% 214px no-repeat;
    overflow-x: clip;
  }
  .bs2-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 13px var(--gutter) 0;
    text-align: center;
  }
  .bs2-band__content { display: contents; }
  .bs2-band__title {
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    font-size: 35.39px;
    line-height: 33.03px;
  }
  .bs2-band__title br { display: none; }
  .bs2-band__text { max-width: 325px; margin-top: 16px; font-size: 12.24px; line-height: 15.51px; }
  .bs2-band__media {
    order: 1;
    flex: none;
    align-self: center;
    width: min(118.75vw, 600px);         /* 475px @ 400 */
    margin: -10.5px 0 0;
  }
  .bs2-band__btn {
    order: 2;
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-top: -19.67px;
  }

  /* ---- Lead form + sloth peeking in from the right edge ---- */
  .bs2-form { padding-block: 84px 95px; overflow-x: clip; }
  .bs2-form__inner { position: relative; display: block; }
  .bs2-form__form { margin-top: 0; }
  .bs2-form__form .field--lg.field--textarea { height: auto; min-height: 346px; }
  .bs2-form__media {
    position: absolute;
    z-index: 1;
    top: 528.6px;
    right: -72.7px;
    width: 129.48px;
    height: 161.85px;
    overflow: hidden;
    pointer-events: none;
    transform: rotate(162.26deg) scaleY(-1);
  }
  .bs2-form__media img {
    position: absolute;
    top: -10.41%;
    left: 3.06%;
    width: 158.97%;
    height: 157.97%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: fill;
  }
}