/* =====================================================
   VELMORRA — adaptive / responsive
   breakpoints: 1280, 1024, 768, 480
   ===================================================== */

/* ===== 1280 ===== (slightly tighter paddings) */
@media (max-width: 1280px) {
  :root { --page-pad: 60px; }
  .hero__inner,
  .reg__inner { gap: 60px; }
  .header__tagline { font-size: 18px; }
  .header__cta { width: 180px; }

  .areas__grid {
    grid-template-columns: 240px 1fr 1fr;
  }
  .about__grid { gap: 30px; }

  .footer__contact-card { margin-right: 60px; }
}

/* ===== 1024 ===== */
@media (max-width: 1024px) {
  :root { --page-pad: 40px; }

  .header { height: 110px; }
  .header__tagline { display: none; }
  .header__inner   { display: flex; justify-content: space-between; gap: 24px; }

  .hero              { padding: 40px 0 60px; }
  .hero__inner       { grid-template-columns: 1fr; gap: 40px; }
  .hero__copy        { max-width: 680px; }
  .hero__title       { margin-bottom: 30px; font-size: 30px; }
  .form-card         { width: 100%; max-width: 560px; margin: 0 auto; }

  .about              { padding: 70px 0 0; }
  .about__grid        { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
  .about__img         { height: 340px; }
  .about__subtitle,
  .about__core        { font-size: 20px; }
  .about__list li     { font-size: 20px; }
  .about__list__title { font-size: 20px; margin-bottom: 30px; }
  .about__chips       { gap: 20px; }

  .areas__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
  }
  .areas__img--small { grid-column: 1 / 2; grid-row: 1 / 2; height: 200px; }
  .areas__card--a    { grid-column: 2 / 3; grid-row: 1 / 2; }
  .areas__card--b    { grid-column: 1 / 2; grid-row: 2 / 3; }
  .areas__card--c    { grid-column: 2 / 3; grid-row: 2 / 3; }
  .areas__card--d    { grid-column: 1 / 3; grid-row: 3 / 4; }
  .areas__card--e    { grid-column: 1 / 3; grid-row: 4 / 5; }
  .areas__img--tall  { grid-column: 1 / 3; grid-row: 5 / 6; height: 340px; }
  .areas__card       { padding: 26px 30px; min-height: 180px; }
  .areas__card h3    { font-size: 20px; }

  /* Why: collapse zigzag into clean vertical list */
  .why__wrap     { min-height: 0; }
  .why__img      { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; height: 360px; margin: 0 auto 40px; }
  .why__list     { align-items: stretch; max-width: 560px; margin: 0 auto; }
  .why__row      { width: 100% !important; margin: 0 0 20px !important; }
  .why__card     { width: 100%; }
  .why__connector,
  .why__connector--down,
  .why__connector--up,
  .why__connector--curve-left,
  .why__connector--curve-right { display: none; }

  .results__grid {
    flex-wrap: wrap;
    row-gap: 40px;
  }
  .results__item {
    flex: 1 1 40%;
  }
  .results__num { font-size: 72px; }

  .cases__grid { grid-template-columns: 1fr 1fr; }

  .how__grid   { grid-template-columns: 1fr 1fr; }

  .cta-strip__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-strip__text  { font-size: 30px; text-align: center; }
  .cta-strip__btn   { width: 100%; max-width: 476px; margin: 0 auto; height: 80px; font-size: 20px; }

  .reg__inner { grid-template-columns: 1fr; gap: 40px; }

  .footer__contact-card { width: 100%; max-width: 474px; margin: 140px auto 0; }
  .footer__bar__inner   { grid-template-columns: 1fr; justify-items: center; gap: 16px; text-align: center; }
  .footer__info         { margin-left: 0; text-align: center; align-items: center; }
}

/* ===== 768 ===== (tablet portrait) */
@media (max-width: 768px) {
  :root { --page-pad: 30px; }

  .section-title { font-size: 32px; }

  .header { height: 90px; }
  .header__cta { display: none; }
  .header__logo img { width: 110px; height: 61px; }
  .burger { display: block; }

  .hero              { padding: 30px 0 40px; }
  .hero__title       { font-size: 26px; margin-bottom: 24px; line-height: 1.3; }

  .about              { padding: 50px 0 0; }
  .about__grid        { grid-template-columns: 1fr; gap: 30px; }
  .about__img         { height: 260px; }
  .about__list__title { margin-bottom: 20px; }

  .about__chips       { flex-direction: column; gap: 30px; min-height: 0; }
  .chip               { width: 220px; }
  .chip--tilt-left-strong { font-size: 16px; }

  .about__right-place { margin-bottom: 50px; }
  .about__core,
  .about__searched    { font-size: 18px; }

  .areas__card h3      { font-size: 18px; }
  .areas__card__num    { font-size: 24px; }

  .cases__grid         { grid-template-columns: 1fr; gap: 20px; }

  .how__grid           { grid-template-columns: 1fr; gap: 20px; }

  .results__grid       { gap: 30px; }
  .results__item       { flex: 1 1 100%; align-items: center; text-align: center; }
  .results__lbl        { text-align: center; }

  .reg                 { padding: 50px 0 60px; }

  .footer__contact-card { padding: 200px 20px 24px; }
  .footer__contact-btn  { width: 100%; height: 60px; font-size: 18px; }
}

/* ===== 480 ===== (mobile) */
@media (max-width: 480px) {
  :root { --page-pad: 20px; }

  .section-title { font-size: 24px; }

  .header { height: 76px; }
  .header__logo img { width: 80px; height: 44px; }
  .burger { width: 26px; height: 18px; }

  .hero { padding: 20px 0 30px; }
  .hero__title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 20px;
  }
  .hero__lead { font-size: 14px; }

  .form-card      { padding: 18px 16px; border-radius: 18px; border-width: 2px; }
  .form-card__label { font-size: 14px; }
  .v-form         { gap: 10px; }
  .v-form__input  { height: 38px; font-size: 16px; border-radius: 6px; padding: 0 16px; }
  .v-form__btn    { height: 38px; font-size: 16px; border-radius: 6px; }
  .v-form__policy { font-size: 9px; }

  .about__subtitle,
  .about__core,
  .about__searched,
  .about__right-place { font-size: 16px; line-height: 1.4; }
  .about__list li     { font-size: 18px; }
  .about__list__title { font-size: 16px; }
  .about__img         { height: 180px; }

  .chip           { width: 185px; height: 46px; font-size: 16px; border-radius: 12px; }
  .chip--tilt-left-strong { font-size: 11px; }

  .areas__grid    { grid-template-columns: 1fr; gap: 16px; }
  .areas__img--small,
  .areas__img--tall { grid-column: auto; grid-row: auto; height: 200px; }
  .areas__card--a,
  .areas__card--b,
  .areas__card--c,
  .areas__card--d,
  .areas__card--e { grid-column: auto; grid-row: auto; }
  .areas__card    { padding: 20px 24px; min-height: 120px; }
  .areas__card h3 { font-size: 18px; }
  .areas__card__num { font-size: 20px; }
  .areas__footer  { font-size: 18px; }

  .why__img       { height: 385px; margin-bottom: 20px; }
  .why__row       { gap: 16px; }
  .why__circle    { width: 52px; height: 52px; }
  .why__circle span { font-size: 20px; }
  .why__card      { padding: 20px 22px; min-height: 90px; border-radius: 10px; }
  .why__card h3   { font-size: 18px; }
  .why__card p    { font-size: 14px; }

  .results__sub   { font-size: 16px; }
  .results__num   { font-size: 56px; }
  .results__lbl   { font-size: 16px; }

  .case-card      { padding: 18px; min-height: 0; gap: 12px; }
  .case-card h3   { font-size: 16px; }
  .case-card__img { height: 160px; border-radius: 6px; }
  .case-card__btn { height: 42px; font-size: 14px; border-radius: 6px; }

  .how__card      { padding: 20px 24px; min-height: 0; border-radius: 10px; }
  .how__card h3   { font-size: 16px; }
  .how__card p    { font-size: 14px; }

  .cta-strip      { padding: 38px 0; }
  .cta-strip__text { font-size: 20px; }
  .cta-strip__btn  { height: 56px; font-size: 16px; border-radius: 10px; }

  .reg__text      { font-size: 16px; }
  .section-title--light { font-size: 22px; }

  .footer__contact-card { padding: 158px 16px 20px; width: 100%; }
  .footer__contact-img  { height: 150px; }
  .footer__contact-info { font-size: 16px; gap: 10px; }
  .footer__contact-btn  { height: 48px; font-size: 16px; border-radius: 12px; }

  .footer__bar          { padding: 24px 0; margin-top: 40px; }
  .footer__info         { font-size: 13px; }
  .footer__year         { font-size: 13px; }
  .footer__logo img     { width: 80px; height: 44px; }

}

/* ====================================================
   THANK-YOU adaptive
   ==================================================== */
@media (max-width: 1280px) {
  .thanks__title { font-size: 80px; margin-bottom: 60px; }
}
@media (max-width: 1024px) {
  .thanks__title { font-size: 64px; margin-bottom: 40px; }
}

/* Mobile thank-you: image on top, copy in middle, logo + hours bottom row */
@media (max-width: 720px) {
  .thanks {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 465px 1fr auto;
    padding: 0 0 30px;
    min-height: 100vh;
  }
  .thanks::before { display: none; }

  .thanks__bg--desktop { display: none; }
  .thanks__bg--mobile {
    display: block;
    position: relative;
    inset: auto;
    height: 465px;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }
  .thanks__bg--mobile img { object-position: center top; }
  .thanks__bg--mobile::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, var(--bg-dark) 90%);
  }

  .thanks__copy {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    margin-top: -60px;
    text-align: center;
    padding: 0 30px;
    max-width: 100%;
    align-self: start;
  }
  .thanks__title { font-size: 48px; margin-bottom: 30px; }
  .thanks__text  { font-size: 13px; margin-bottom: 0; }

  .thanks__logo {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    width: 80px;
    padding: 0 0 0 30px;
    align-self: end;
    justify-self: start;
  }
  .thanks__logo img { width: 80px; height: 44px; }

  .thanks__hours {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    justify-self: end;
    text-align: right;
    padding: 0 30px 0 0;
    font-size: 13px;
    line-height: 1.4;
    align-self: end;
    max-width: none;
  }
}

/* index.php tweaks below 768 (kept from previous edits) */
@media (max-width: 768px) {
  .cases__grid,
  .areas__grid,
  .how__grid     { margin-top: 30px; }
  .footer__logo img { margin: 0 0 30px; }
  .footer__info  { display: none; }
}

/* Thank-you: tighter spacing on small phones */
@media (max-width: 480px) {
  .thanks__title { font-size: 44px; }
  .thanks__copy  { padding: 0 20px; }
  .thanks__logo  { padding-left: 20px; }
  .thanks__hours { padding-right: 20px; font-size: 12px; }
}