/* =====================================================================
   Responsive — Recovery Support
   ===================================================================== */

/* -------------------------- ≤ 1280 -------------------------- */
@media (max-width: 1380px) {
  :root { --side-pad: 28px; }

  .hero__title    { left: 70px; top: 130px; font-size: 56px; width: 600px; }
  .hero__cta      { left: 70px; top: 360px; }
  .hero__subtitle { left: auto; right: 30px; top: 300px; font-size: 56px; }
  .hero__statue   { transform: translateX(calc(-50% + 240px)); width: 920px; height: 620px; top: 130px; }
  .hero__star--tr { right: 100px; top: 160px; }
  .hero__star--bl { left: 30px; top: 480px; }

  .offer__title,
  .why__title,
  .case__title,
  .how__title,
  .cta__title,
  .connect__title { font-size: 108px; }

  .case__txt h3, .case__col h3 { font-size: 56px; }
  .case__txt .case__big        { font-size: 108px; }

  .how__stage  { min-height: 1050px; }
  .how__title  { width: auto; }
  .how__lead   { left: auto; right: 30px; top: 380px; width: 480px; }
  .how__gavel  { left: 50%; transform: translateX(-50%); top: 470px; }
  .how__ellipse{ left: 50%; transform: translateX(-50%); top: 720px; }
  .how__step--1 { left: 24px; top: 880px; width: 360px; }
  .how__step--2 { left: auto; right: 24px; top: 700px; width: 360px; }
  .how__step--3 { left: 50%; transform: translateX(-50%); top: 1040px; width: 360px; }
  .how__step--1 .how__badge { right: -50px; }
}

/* -------------------------- ≤ 1024 -------------------------- */
@media (max-width: 1024px) {
  :root { --side-pad: 24px; }

  .header__inner { min-height: 60px; }
  .header__logo  { height: 38px; }
  .nav           { display: none; }
  .burger        { display: block; }
  .header__cta   { display: none; }

  /* hero — switch to stacked layout */
  .hero { height: auto; min-height: 720px; padding: 130px 0 60px; }
  .hero__inner { height: auto; min-height: 600px; padding: 0 var(--side-pad); }
  .hero__statue {
    position: absolute; left: 50%; top: 90px; width: 90%; max-width: 720px;
    height: 600px; transform: translateX(-50%); opacity: 1;
  }
  .hero__title {
    position: relative; left: 0; top: 0;
    font-size: 44px; width: auto; max-width: 60%;
  }
  .hero__title .indent { padding-left: 1em; }
  .hero__subtitle {
    position: relative; left: 0; right: auto; top: auto;
    margin-top: 320px; font-size: 44px; width: 100%;
  }
  .hero__cta {
    position: relative; left: 0; top: auto; margin-top: 28px;
  }
  .hero__star--tr { right: 40px; top: 100px; }
  .hero__star--bl { left: 20px; top: 460px; }

  /* offer cards 2x2 */
  .offer__title { font-size: 80px; margin-bottom: 60px; }
  .offer__grid  { grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
  .card, .card--tall { height: auto; min-height: 340px; padding: 32px 24px 24px; }
  .card__title { font-size: 48px; }
  .card__title--sm { font-size: 40px; }
  .card__num { font-size: 80px; right: 24px; bottom: 8px; }

  /* why */
  .why__title { font-size: 80px; text-align: left; padding-right: 0; }
  .why__row { padding: 32px 100px 32px 0; }
  .why__row--alt { padding: 32px 0 32px 100px; }
  .why__head { column-gap: 24px; margin-bottom: 16px; }
  .why__big   { font-size: 88px; }
  .why__label { font-size: 32px; }
  .why__desc  { font-size: 18px; max-width: 100%; }
  .why__arrow { width: 70px; height: 65px; right: 0; }
  .why__row--alt .why__arrow { left: 0; }

  /* case */
  .case { padding: 80px 0 80px; margin-top: 30px; }
  .case__title { font-size: 80px; margin-bottom: 60px; }
  .case__top, .case__bottom { grid-template-columns: 1fr; gap: 30px; }
  .case__top { margin-bottom: 60px; }
  .case__bottom .case__txt { order: 1; }
  .case__bottom .case__img { order: 2; }
  .case__txt h3 { font-size: 44px; }
  .case__txt .case__big { font-size: 80px; }
  .case__txt p { font-size: 18px; }

  /* how */
  .how { padding: 80px 0 60px; }
  .how__stage { min-height: auto; padding: 0 var(--side-pad); }
  .how__title { font-size: 56px; width: auto; margin-bottom: 30px; }
  .how__lead  { position: relative; left: auto; right: auto; top: auto; width: 100%; font-size: 18px; margin-bottom: 30px; }
  .how__ellipse { position: relative; left: auto; top: auto; transform: none; width: 100%; height: 240px; margin: -20px auto 0; }
  .how__gavel   { position: absolute; left: 50%; transform: translateX(-50%); top: auto; width: 60%; height: 360px; margin-top: -233px; }
  .how__step    { position: relative; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 100%; margin-top: 30px; padding-left: 60px; }
  .how__step h4 { font-size: 26px; }
  .how__step p  { font-size: 18px; }
  .how__step .how__badge { left: 0 !important; right: auto !important; top: -6px !important; }

  /* cta */
  .cta { padding: 70px 0 20px; }
  .cta__title { font-size: 64px; }
  .cta__lead  { font-size: 18px; }
  .cta__btns .btn { width: 180px; height: 60px; }

  /* connect */
  .connect { padding: 70px 0 40px; }
  .connect__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 50px; }
  .connect__title { font-size: 72px; }
  .connect__lead { margin-top: 0; font-size: 18px; }
  .connect__form { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 40px; }
  .connect__field input,
  .connect__field select { font-size: 18px; }
  .connect__field .iti input { font-size: 18px; }
  .copyright { margin-top: 40px; font-size: 14px; }

  /* thx */
  .thx__statue { width: 80%; max-width: 600px; transform: translateX(-30%); opacity: .8; }
  .thx__title  { font-size: 80px; }
  .thx__sub    { font-size: 20px; width: 60%; }
}

/* -------------------------- ≤ 768 -------------------------- */
@media (max-width: 768px) {
  :root { --side-pad: 20px; }

  /* hero — single mobile image (replaces bg + statue) */
  .hero { min-height: 720px; padding: 100px 0 50px; }
  .hero__bg { background-image: url('../img/hero-mob.png'); background-size: cover; background-position: center top; }
  .hero__statue { display: none; }
  .hero__title { font-size: 32px; max-width: 75%; }
  .hero__subtitle { font-size: 32px; margin-top: 280px; }

  /* offer 1-col */
  .offer { padding: 40px 0; }
  .offer__title { font-size: 64px; }
  .offer__grid { grid-template-columns: 1fr; }
  .card, .card--tall { min-height: 330px; }

  /* why */
  .why__title { font-size: 64px; }
  .why__big   { font-size: 72px; }
  .why__row, .why__row--alt { padding: 24px 0; }
  .why__row .why__arrow,
  .why__row--alt .why__arrow { display: none; }
  .why__head { column-gap: 16px; }
  .why__label { font-size: 24px; }

  /* case */
  .case__title { font-size: 64px; }
  .case__txt h3 { font-size: 36px; }
  .case__txt .case__big { font-size: 64px; }

  /* how */
  .how__title { font-size: 48px; }
  .how__gavel { width: 80%; height: 300px; }

  /* cta */
  .cta__title { font-size: 56px; }
  .cta__btns { display: flex; flex-direction: row; gap: 12px; }
  .cta__btns .btn { width: 50%; height: 56px; padding: 0 12px; font-size: 15px; }

  /* connect */
  .connect__title { font-size: 56px; }
  .connect__form { grid-template-columns: 1fr; row-gap: 28px; }
  .connect__field input, .connect__field select { font-size: 16px; }
  .connect__hint { font-size: 12px; }

  /* thx */
  .thx__inner { padding: 130px var(--side-pad) 60px; }
  .thx__title { font-size: 64px; }
  .thx__sub { font-size: 18px; width: 80%; }
  .thx__statue { opacity: .35; }

  .hero__cta.mob-visible{
    display: flex !important;
  }
  .hero__cta.mob-hidden{
    display: none !important;
  }
}

/* -------------------------- ≤ 480 -------------------------- */
@media (max-width: 480px) {
  :root { --side-pad: 16px; }

  .header { padding-top: 16px; }
  .header__logo { height: 32px; }

  /* hero */
  .hero { min-height: 640px; padding: 84px 0 40px; }
  .hero__title { font-size: 28px; max-width: 90%; }
  .hero__title .indent { padding-left: .5em; }
  .hero__subtitle { font-size: 28px; margin-top: 533px; }
  .hero__statue { width: 100%; max-width: 360px; height: 420px; top: 60px; }
  .hero__cta { width: 100%; max-width: 220px; }
  .hero__star--tr { right: 12px; top: 60px; }
  .hero__star--bl { left: 12px; top: 380px; }
  .hero__fade{
    background: linear-gradient(to bottom, rgba(234, 240, 245, 0) 95.74%, var(--c-bg) 100%);
  }
  /* offer */
  .offer__title { font-size: 48px; margin-bottom: 40px; }
  .card { min-height: 300px; padding: 24px 20px 20px; border-radius: 36px; }
  .card__title { font-size: 36px; }
  .card__title--sm { font-size: 30px; }
  .card__num { font-size: 64px; right: 16px; }

  /* why */
  .why__title { font-size: 48px; margin-bottom: 20px; }
  .why__big { font-size: 56px; }
  .why__label { font-size: 20px; }
  .why__desc { font-size: 16px; }

  /* case */
  .case { padding: 60px 0; }
  .case__title { font-size: 48px; margin-bottom: 40px; }
  .case__txt h3 { font-size: 28px; }
  .case__txt .case__big { font-size: 48px; }
  .case__txt p { font-size: 16px; }

  /* how */
  .how { padding: 60px 0 40px; }
  .how__title { font-size: 36px; }
  .how__gavel { height: 240px; }
  .how__step h4 { font-size: 22px; }
  .how__step p { font-size: 16px; }
  .how__step { padding-left: 40px; }
  .how__step .how__badge { width: 28px; height: 28px; top: -2px !important; display: block; }

  /* cta */
  .cta__title { font-size: 40px; }
  .cta__lead { font-size: 15px; }
  .cta__btns { flex-direction: column; align-items: stretch; }
  .cta__btns .btn { width: 100%; }

  /* connect */
  .connect__title { font-size: 40px; }
  .connect__lead { font-size: 15px; }

  /* thx */
  .thx__title { font-size: 48px; }
  .thx__sub { font-size: 16px; width: 100%; }
}