/* =============================================
   SMARTBUILD — Responsive Breakpoints
   ============================================= */

/* ===========================================================
   1440px BREAKPOINT (laptops, smaller desktops, 4K @ 225%)
   =========================================================== */
@media (max-width: 1800px) {

  /* ---- Global variable overrides ---- */
  :root {
    --content-padding: 40px;
  }

  /* ---- HEADER ---- */

  /* Switch from space-between to gap layout (Figma: flex gap-20) */
  .header {
    left: 30px;
    right: 30px;
    justify-content: flex-start;
    gap: 20px;
  }

  /* Left pill: tighter padding and gap (Figma: px-30, gap-40, h-68) */
  .header__left {
    gap: 40px;
    padding: 10px 30px;
    height: 68px;
  }

  /* Logo: scale down to match Figma (~161px width)
     SVG viewBox 210×47 → at h:36px, width = 36×(210/47) ≈ 161px */
  .header__logo-img {
    height: 36px;
  }

  /* Nav: tighter gaps (Figma: gap-20) */
  .header__nav {
    gap: 20px;
  }

  /* Right section: flexible, fills remaining space, children at end
     (Figma: flex-[1_0_0] gap-20 justify-end) */
  .header__right {
    width: auto;
    flex: 1 0 0;
    justify-content: flex-end;
  }

  /* Hide phone (not in 1440 Figma) */
  .header__phone {
    display: none;
  }

  /* Strip glass pill from contacts wrapper — icons are standalone now */
  .header__contacts {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    gap: 20px;
    min-width: auto;
    flex: none;
  }

  /* Each social icon: glass CIRCLE outside + white circle inside
     padding: 20px all around → 72×72px perfect circle */
  .header__social {
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    padding: 18px 20px;
    background:
      radial-gradient(circle, var(--color-alabaster) 16px, transparent 16.5px),
      var(--color-glass);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .header__social:hover {
    background:
      radial-gradient(circle, var(--color-white) 16px, transparent 16.5px),
      var(--color-glass);
  }

  /* CTA: sentence case at 1440px (Figma shows "Получить консультацию") */
  .header__cta {
    text-transform: none;
  }

  /* ---- HERO ---- */

  .hero__image-block {
    height: 1004px;
    margin-bottom: -90px;   /* Figma: banks y=924, image bottom=1014 → overlap 90px (not 140) */
  }

  /* Content: 3-column flex → 2-column grid
     Figma: flex, items-end, justify-between, left-30, w-1360
     Left column 670px (info+desc), Right column 587px (CTA) */
  .hero__content {
    display: grid;
    grid-template-columns: 670px 587px;
    grid-template-rows: auto auto;
    row-gap: 20px;
    column-gap: 0;
    justify-content: space-between;
    left: 30px;
    right: 30px;
  }

  .hero__info {
    grid-column: 1;
    grid-row: 1;
  }

  .hero__description {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    align-self: start;
  }

  .hero__cta {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    gap: 10px;
  }

  /* Season tooltip: reposition for 1440px
     Figma: right-30. Use 50%+translateY for vertical centering
     so it adapts to any hero height (including vh-based). */
  .hero__season {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* ---- BANKS BAR ---- */

  .hero__banks {
    padding: 150px 30px 50px;
    align-items: flex-start;
  }

  .hero__banks-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }

  /* ---- PROJECTS ---- */

  /* Section: reduce bottom padding at 1440px (Figma: pt-120 pb-60) */
  .projects {
    padding-bottom: 60px;
  }

  /* Grid: 2-column layout with wide card spanning full height
     Figma: Row 1 = wide(left, 670×800) + 2 stacked narrow(right, 670×390 each)
            Row 2 = 2 stacked narrow(left) + wide(right, 670×800) */
  .projects__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 800px;
  }

  /* Wide card spans both rows */
  .projects__card--wide {
    grid-row: 1 / -1;
    flex: none;
  }

  .projects__card--narrow {
    flex: none;
  }

  /* Row 2: wide card on the RIGHT side */
  .projects__row:nth-child(2) .projects__card--wide {
    grid-column: 2;
  }

  /* Card content: 40px → 30px (Figma: p-30) */
  .projects__card-content {
    padding: 30px;
  }

  /* Custom banner */
  .projects__custom-inner {
    padding: 30px;
  }

  /* ---- POPULAR ---- */

  .popular__card-info {
    gap: 30px;
    padding: 30px;
  }

  .popular__card-tags {
    top: 30px;
    left: 30px;
  }

  .popular__card-nav {
    left: 30px;
    right: 30px;
  }

  /* ---- MEETING ---- */

  .meeting__step {
    width: 498px;
    padding: 30px;
  }

  /* ---- CTA / FORM ---- */

  .cta__info {
    padding: 30px;
  }

  .cta__form-card {
    padding: 30px;
  }

  /* ---- WHY US: 4 columns → 3 columns ---- */
  /*
     3-col layout:
       Row 1: [Photo-1]  [Card-1]  [Card-2]
       Row 2: [Card-3]   [Photo-2] [Card-4]
       Row 3: [Card-5]   [Card-6]  [Photo-3]

     Border-collapse: each cell → top + left only.
     Last column (col 3) adds right. Last row (row 3) adds bottom.
  */

  .whyus__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Border-collapse: cards get only top + left */
  .whyus__card {
    padding: 30px;
    border: none;
    border-top: 1px solid var(--color-graphite);
    border-left: 1px solid var(--color-graphite);
  }

  /* Reposition cards for 3-column grid */
  .whyus__card--2 { grid-area: 1 / 3; }
  .whyus__card--5 { grid-area: 3 / 1; }
  .whyus__card--6 { grid-area: 3 / 2; }

  /* Last column (col 3): add right border */
  .whyus__card--2,
  .whyus__card--4 {
    border-right: 1px solid var(--color-graphite);
  }

  /* Last row (row 3): add bottom border */
  .whyus__card--5,
  .whyus__card--6 {
    border-bottom: 1px solid var(--color-graphite);
  }

  /* Border-radius for 3-column layout (outer corners only) */
  .whyus__card--1 { border-radius: 0; }
  .whyus__card--2 { border-radius: 0 var(--radius-md) 0 0; }
  .whyus__card--3 { border-radius: 0; }
  .whyus__card--4 { border-radius: 0; }
  .whyus__card--5 { border-radius: 0 0 0 var(--radius-md); }
  .whyus__card--6 { border-radius: 0; }

  /* Photo-2 (row 2, col 2): needs top + left for collapse */
  .whyus__photo--2 {
    border-top: 1px solid var(--color-graphite);
    border-left: 1px solid var(--color-graphite);
  }

  /* Photo-3 (row 3, col 3): last row + last col → all 4 borders */
  .whyus__photo--3 {
    border-top: 1px solid var(--color-graphite);
    border-left: 1px solid var(--color-graphite);
    border-right: 1px solid var(--color-graphite);
    border-bottom: 1px solid var(--color-graphite);
    border-radius: 0 0 var(--radius-md) 0;
  }

  .whyus__photo--3 .whyus__photo-img {
    border-radius: 0 0 var(--radius-md) 0;
  }

  /* ---- MAP (Figma node 109:5840) ---- */

  /* Section: flex-col + gap replaces header margin-bottom */
  .map {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  /* Header → grid: lets stats span full width */
  .map__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 60px;
    margin-bottom: 0;
  }

  /* Info: display:contents → children join header grid */
  .map__info {
    display: contents;
  }

  /* Description: inherits padding-top from former info container */
  .map__description {
    padding-top: 14px;
  }

  /* Stats: span both grid columns → full width row */
  .map__stats {
    grid-column: 1 / -1;
  }

  /* ---- BUILT (Figma node 109:5877) ---- */

  .built__header,
  .built__grid,
  .built__cta {
    padding: 0 60px;
  }

  /* Row → contents: small cards become direct column children */
  .built__row {
    display: contents;
  }

  /* Hide 2nd small card in each former row → 4 cards total */
  .built__row .built__card--small:last-child {
    display: none;
  }

  /* Small card: reset flex, full width in column */
  .built__card--small {
    flex: none;
    width: 100%;
  }

  /* Card inner padding: 40 → 30 */
  .built__card-content {
    padding: 30px;
  }

  /* ---- ABOUT ---- */

  .about__card {
    padding: 30px;
  }

  .about__stat {
    padding: 30px;
  }

  /* ---- PROJECTS CUSTOM BANNER (Figma node 109:5196) ---- */

  .projects__custom-inner {
    overflow: hidden;
  }

  .projects__custom-visual {
    max-width: 640px;
    height: 600px;   /* 660px banner - 2×30px padding */
  }

  .projects__custom-illustration {
    width: 166%;   /* 1062px / 640px — same image size as 1920px design */
  }

  /* House not clipped left/right, only top/bottom */
  .projects__custom-illustration-wrap {
    overflow: visible;
    clip-path: inset(0 -9999px 0 -9999px);
  }

  /* Left column above house overflow (text & button stay on top) */
  .projects__custom-info {
    position: relative;
    z-index: 1;
  }

  /* Tag positions from Figma metadata (relative to visual container) */
  .projects__custom-tag--sun {
    top: 49px;
    left: 332px;
  }

  .projects__custom-tag--cost {
    top: 199px;
    left: 426px;
  }

  .projects__custom-tag--terrain {
    top: 49px;
    left: 50px;
  }

  .projects__custom-tag--budget {
    top: 345px;
    left: -75px;
  }

  .projects__custom-tag--layout {
    top: 453px;
    left: 109px;
  }

  .projects__custom-tag--kitchen {
    top: 480px;
    left: 380px;
  }

  /* Terrain: connector vertical DOWN at 1440px — tag at (50, 99) */
  .projects__custom-tag--terrain::after {
    right: auto;
    top: 37px;
    left: 58px;
    width: 1.5px;
    height: 53px;
    transform: none;
  }

  .projects__custom-tag--terrain::before {
    right: auto;
    top: 85px;
    left: 54px;
    transform: none;
  }

  /* Kitchen: connector for tag at (380, 480) — line UP, dot+line centered on tag */
  .projects__custom-tag--kitchen::after {
    left: 126px;
    height: 29px;
  }

  .projects__custom-tag--kitchen::before {
    left: 122px;
    bottom: calc(100% + 25px);
  }

  /* Sun: adjust connector length for 1440px (49px instead of 40px) */
  .projects__custom-tag--sun::after {
    top: 37px;
    height: 49px;
  }

  .projects__custom-tag--sun::before {
    top: 80px;
  }

  /* ---- POPUP (1440px) ---- */
  .popup__container {
    width: 1240px;
    padding: 20px;
  }

  .popup__close {
    width: 32px;
    height: 32px;
  }

  .popup__content {
    padding: 20px;
    gap: 60px;
  }

  .popup__image {
    width: 550px;
    height: 590px;
  }

  .popup__form-card {
    width: 550px;
    height: 590px;
    padding: 0;
  }

  .popup__form-title {
    font-size: 30px;
    letter-spacing: -0.9px;
  }
}

/* ===========================================================
   768px BREAKPOINT (tablets, narrow viewports)
   =========================================================== */
@media (max-width: 1024px) {

  /* ---- Global variable overrides ---- */
  :root {
    --content-padding: 24px;
    --section-padding-y: 60px;
  }

  /* ---- HEADER → BURGER ---- */

  /* Shrink header: inside 19px padding of image block (hero padding 5px + 19px = 24px) */
  .header {
    left: 19px;
    right: 19px;
    top: 19px;
    justify-content: space-between;
  }

  /* Logo pill: 60px height, compact */
  .header__left {
    gap: 0;
    height: 60px;
    padding: 10px 20px;
  }

  /* Burger: 60×60 */
  .header__burger {
    width: 60px;
    height: 60px;
  }

  /* Hide desktop nav */
  .header__nav {
    display: none;
  }

  /* Hide desktop right section */
  .header__right {
    display: none;
  }

  /* Show burger button */
  .header__burger {
    display: flex;
  }

  /* Show mobile nav container (visibility controlled by JS) */
  .mobile-nav {
    display: flex;
  }

  /* ---- HERO ---- */

  .hero {
    padding: 5px 5px 20px;
  }

  .hero__image-block {
    height: 616px;
    margin-bottom: 396px; /* 10px gap + ~325px content + 60px gap to banks */
    border-radius: var(--radius-lg);
    overflow: visible;
  }

  /* Force bg layers to 616px and clip to rounded corners */
  .hero__bg,
  .hero__vignette,
  .hero__overlay {
    height: 616px;
    border-radius: var(--radius-lg);
    clip-path: inset(0 round var(--radius-lg));
  }

  /* Tablet overlay: Figma radial vignette */
  .hero__vignette {
    background: radial-gradient(187.83% 99.41% at 50% 42.46%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 1;
  }

  /* Tablet overlay: soften — mix-blend-mode on separate elements is stronger
     than Figma's background-blend-mode, so reduce overlay opacity */
  .hero__overlay {
    opacity: 0.5;
  }

  .hero__overlay::before {
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 36.51%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 28.57%);
    mix-blend-mode: overlay;
  }

  .hero__overlay::after {
    background: linear-gradient(352deg, rgba(0, 0, 0, 0.5) 2.63%, rgba(0, 0, 0, 0) 26.8%);
    mix-blend-mode: multiply;
  }

  /* Content: positioned below image (10px gap per Figma) */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    top: calc(100% + 10px);
    bottom: auto;
    left: 19px;
    right: 19px;
    padding-top: 40px; /* Figma: pt-40 on text block */
    gap: 20px;
    grid-template-columns: none;
  }

  .hero__info {
    grid-column: auto;
    grid-row: auto;
    gap: 20px;
  }

  .hero__description {
    grid-column: auto;
    grid-row: auto;
    flex: none;
    padding: 0;
  }

  .hero__cta {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px; /* 20px gap + 20px margin = 40px before buttons (Figma) */
  }

  /* Tags: INSIDE image at bottom (glass on dark bg, 19px from bottom edge) */
  .hero__tags {
    position: absolute;
    top: -29px; /* content at 626px, tags bottom at 597px = 19px from image bottom (616-19=597, 597-626=-29) */
    transform: translateY(-100%);
    left: 0;
    right: 0;
  }

  .hero__tags .tag {
    font-size: 16px;
    background: rgba(245, 245, 242, 0.1);
    color: var(--color-alabaster);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Title: 40px per Figma TABLET/H1 */
  .hero__title {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: var(--color-dark);
  }

  /* Description */
  .hero__description p {
    color: var(--color-graphite);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* CTA buttons: h-70 per Figma */
  .hero__cta .btn {
    flex: none;
    width: 100%;
    height: 70px;
    font-size: 16px;
    padding: 0 20px;
    border-radius: 50px;
  }

  /* Secondary button: outlined on light background */
  .hero__cta .btn--secondary {
    background-color: transparent;
    color: var(--color-graphite);
    border: 1px solid var(--color-graphite);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero__cta .btn--secondary .btn__icon {
    filter: brightness(0);
  }

  /* Season toggle: upper right with tooltip (Figma: padding 19px + header 60px + gap 40px = 119px) */
  .hero__season {
    right: 19px;
    top: 119px;
    bottom: auto;
    transform: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .hero__tooltip {
    display: block;
    width: 350px;
    padding: 10px 20px;
    margin-bottom: 12px;
  }

  .hero__tooltip-title {
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    margin-bottom: 6px;
  }

  .hero__tooltip-text {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }

  .hero__season-toggle {
    width: 229px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.24);
  }

  .hero__season-btn {
    height: 30px;
    padding: 3px;
  }

  .hero__season-btn img {
    width: 24px;
    height: 24px;
  }

  /* ---- BANKS BAR ---- */

  .hero__banks {
    padding: 40px 24px;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 0;
    border-radius: var(--radius-md);
  }

  .hero__banks-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }

  /* ---- PROJECTS ---- */

  .projects {
    padding-bottom: 40px;
  }

  /* Single column for project cards */
  .projects__row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
  }

  .projects__card--wide,
  .projects__card--narrow {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 400;
  }

  .projects__card {
    border-radius: 10px;
  }

  .projects__card--wide {
    grid-row: auto;
  }

  .projects__card-content {
    padding: 20px;
  }

  .projects__card-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.84px;
  }

  .projects__card-description {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Custom banner: reorder with display:contents, illustration as background */
  .projects__custom-inner {
    flex-direction: column;
    padding: 20px;
    min-height: auto;
    border-radius: 20px;
    aspect-ratio: 720 / 900;
    gap: 0;
    position: relative;
    overflow: hidden;
  }

  /* Break info children into parent flex for reordering */
  .projects__custom-info {
    display: contents;
  }

  .projects__custom-header {
    order: 1;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
  }

  .projects__custom-title {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  /* Visual: tags as pills, illustration absolute at bottom */
  .projects__custom-visual {
    order: 2;
    position: static; /* illustration-wrap references inner */
    max-width: 100%;
    height: auto;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    z-index: 1;
  }

  /* Tags as pills at tablet */
  .projects__custom-tag {
    position: static;
    display: inline-flex;
    background: transparent;
    border: 0.5px solid var(--color-graphite);
    border-radius: 20px;
    padding: 5px 10px;
    height: auto;
    font-size: 16px;
    color: var(--color-graphite);
    white-space: nowrap;
  }

  .projects__custom-tag::before,
  .projects__custom-tag::after {
    display: none;
  }

  /* Illustration: absolute background filling entire banner (Figma: inset-0) */
  .projects__custom-illustration-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: none;
    z-index: 0;
  }

  /* House image: exact Figma values (w-251.24%, h-167.48%, left -54.13%, top 2.42%) */
  .projects__custom-illustration {
    position: absolute;
    left: -54.13%;
    top: 2.42%;
    width: 251.24%;
    height: 167.48%;
    max-width: none;
    transform: none;
    object-fit: cover;
  }

  /* CTA button at bottom */
  .projects__custom-info .btn {
    order: 3;
    max-width: none;
    width: 100%;
    height: 70px;
    border-radius: 50px;
    margin-top: auto;
    position: relative;
    z-index: 1;
  }

  /* ---- SECTION HEADER: stack title + description ---- */

  .section__header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .section__title {
    width: 100%;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
  }

  .section__description {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* ---- POPULAR (Чаще всего строят) ---- */

  /* Section: flex column with gap (Figma: flex-col gap-40 px-24 py-60) */
  .popular {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 60px 24px;
  }

  /* Remove header margin-bottom (handled by flex gap) */
  .popular .section__header {
    margin-bottom: 0;
    padding: 0;
  }

  /* Grid: 2 columns, rows via display:contents */
  .popular__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 10px;
    padding: 0;
  }

  /* Flatten rows so cards flow into 2-col grid */
  .popular__row {
    display: contents;
  }

  /* Card: reset flex sizing */
  .popular__card {
    flex: none;
    border-radius: 10px;
  }

  /* Image area: aspect-ratio instead of fixed height */
  .popular__card-image-wrap {
    height: auto;
    aspect-ratio: 355 / 350;
  }

  /* Tags: 20px from edges, 14px font */
  .popular__card-tags {
    top: 20px;
    left: 20px;
  }

  .popular__card-tag {
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  /* Nav arrows: 20px from edges */
  .popular__card-nav {
    left: 20px;
    right: 20px;
  }

  /* Card info: tighter padding and gap */
  .popular__card-info {
    gap: 20px;
    padding: 20px;
  }

  /* Header: tighter gap */
  .popular__card-header {
    gap: 10px;
  }

  /* Title: 22px (TABLET/H4) */
  .popular__card-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
  }

  /* Subtitle: 16px body */
  .popular__card-subtitle {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Features: 14px text */
  .popular__card-feature-text {
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  /* Price: 18px, tighter padding */
  .popular__card-price {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
    padding: 6px 10px;
  }

  /* CTA: full-width outline button, sentence case */
  .popular__cta {
    padding: 0;
    margin-top: 0;
  }

  .popular__cta .btn {
    height: 70px;
    border-radius: 50px;
    text-transform: none;
    font-size: 16px;
  }

  /* ---- MEETING (Одна встреча) ---- */

  /* Section: flex column, gap-40, py-60 px-24 */
  .meeting {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 60px 24px;
  }

  /* Header: keep flex between, h-130, zero extra padding */
  .meeting__header {
    padding: 0;
    min-height: 130px;
  }

  /* Title: 32px SemiBold (TABLET/H2) */
  .meeting__title-left,
  .meeting__title-right {
    font-size: 32px;
    letter-spacing: -0.96px;
  }

  /* Timeline: reset margin (handled by section gap) */
  .meeting__timeline {
    margin-top: 0;
    padding: 0;
  }

  .meeting__timeline-track {
    left: 0;
    right: 0;
  }

  .meeting__timeline-progress {
    left: 0;
  }

  /* Hide 2nd pill (1 неделя) and 4th pill (2 месяца) */
  .meeting__timeline-pill:nth-child(2),
  .meeting__timeline-pill:nth-child(4) {
    display: none;
  }

  /* Pill text: 16px (TABLET/body) */
  .meeting__timeline-pill {
    font-size: 16px;
    letter-spacing: -0.16px;
    padding: 6px 20px;
  }

  /* Steps: reset margin (handled by section gap) */
  .meeting__steps {
    margin-top: 0;
    padding: 0;
  }

  /* Step card: 598×500, padding 20px */
  .meeting__step {
    width: 598px;
    height: 500px;
    padding: 20px;
  }

  /* First/last: 10px radius */
  .meeting__step--first {
    border-radius: 10px 0 0 10px;
  }

  .meeting__step--last {
    border-radius: 0 10px 10px 0;
  }

  /* Step number: 18px (TABLET/H5) */
  .meeting__step-number {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  /* Step content: gap 20px */
  .meeting__step-content {
    gap: 20px;
  }

  /* Step text: gap 10px */
  .meeting__step-text {
    gap: 10px;
  }

  /* Step title: 22px (TABLET/H4) */
  .meeting__step-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
  }

  /* Step description: 16px (TABLET/body) */
  .meeting__step-description {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Duration pill: 16px uppercase */
  .meeting__step-duration {
    font-size: 16px;
    letter-spacing: -0.32px;
    padding: 6px 40px;
  }

  /* ---- CTA / FORM ---- */

  /* Section padding */
  .cta {
    padding: 60px 24px;
  }

  /* Row: stack vertically, remove inner padding */
  .cta__row {
    flex-direction: column;
    padding: 0;
  }

  /* Info card: fixed aspect ratio, smaller padding */
  .cta__info {
    flex: none;
    min-height: auto;
    aspect-ratio: 720 / 500;
    padding: 20px;
  }

  /* Title: 40px (TABLET/H1) */
  .cta__info-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
  }

  /* Benefits heading: 18px (TABLET/H5) */
  .cta__benefits-heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  /* Benefit text: 16px (TABLET/body) */
  .cta__benefit-text {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Form card: restore 40px padding (1800px set 30px), auto height */
  .cta__form-card {
    flex: none;
    min-height: auto;
    padding: 40px;
  }

  /* Submit button: full width */
  .cta__form-btn {
    width: 100%;
  }

  /* ---- WHY US (Почему мы) ---- */

  /* Section: py-60, no px (handled at card level) */
  .whyus {
    padding: 60px 0;
  }

  /* Header: stack vertically */
  .whyus__header {
    flex-direction: column;
    gap: 20px;
    padding: 0 24px;
    margin-bottom: 40px;
  }

  /* Title: 40px (TABLET/H1) */
  .whyus__title {
    flex: none;
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  /* Description: 16px (TABLET/body), gap 10px */
  .whyus__description {
    flex: none;
    gap: 10px;
  }

  .whyus__description p {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Grid: 2 columns, 3 rows of 360px, no padding */
  .whyus__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 360px);
    padding: 0;
  }

  /* Hide photos */
  .whyus__photo {
    display: none;
  }

  /* Reset all card positions and borders */
  /* No outer side borders — only inner vertical + all horizontal */
  .whyus__card {
    grid-area: auto;
    margin: 0;
    border: none;
    border-top: 1px solid var(--color-graphite);
    border-radius: 0;
  }

  /* Right column (even): left border = inner vertical divider */
  .whyus__card--2,
  .whyus__card--4,
  .whyus__card--6 {
    grid-area: auto;
    border-left: 1px solid var(--color-graphite);
    border-radius: 0;
  }

  /* Bottom row: add bottom border */
  .whyus__card--5,
  .whyus__card--6 {
    grid-area: auto;
    border-bottom: 1px solid var(--color-graphite);
  }

  /* Left column padding: pl-24, pr-20, py-20 */
  .whyus__card--1,
  .whyus__card--3,
  .whyus__card--5 {
    grid-area: auto;
    padding: 20px 20px 20px 24px;
  }

  /* Right column padding: pl-20, pr-24, py-20 */
  .whyus__card--2,
  .whyus__card--4,
  .whyus__card--6 {
    padding: 20px 24px 20px 20px;
  }

  /* Card number: 18px (TABLET/H5) */
  .whyus__card-number {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  /* Card body: gap 10px */
  .whyus__card-body {
    gap: 10px;
  }

  /* Card title: 22px (TABLET/H4) */
  .whyus__card-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
  }

  /* Card text: 16px (TABLET/body) */
  .whyus__card-text {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* ---- BUILT (Figma node 109:7476) ---- */

  .built {
    padding-bottom: 60px;
  }

  /* Header: stack vertically */
  .built__header {
    flex-direction: column;
    gap: 20px;
    padding: 0 24px;
    margin-bottom: 40px;
  }

  .built__title {
    flex: none;
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .built__description {
    flex: none;
  }

  .built__description p {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Grid: single column */
  .built__grid {
    flex-direction: column;
    padding: 0 24px;
  }

  /* Hide right column entirely */
  .built__column:last-child {
    display: none;
  }

  /* Un-hide 2nd small card (hidden at 1800px breakpoint) */
  .built__row .built__card--small:last-child {
    display: block;
  }

  /* Cards: full width, aspect-ratio instead of fixed heights */
  .built__card--large {
    height: auto;
    aspect-ratio: 720 / 400;
  }

  .built__card--small {
    height: auto;
    aspect-ratio: 720 / 376;
  }

  /* 3rd card (last small in row) has different aspect ratio per Figma */
  .built__row .built__card--small:last-child {
    aspect-ratio: 720 / 400;
  }

  /* Card content: 20px padding */
  .built__card-content {
    padding: 20px;
  }

  /* Status badge text: 14px */
  .built__card-status {
    gap: 10px;
  }

  .built__card-status-text {
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  /* Card title: 22px (TABLET/H4) */
  .built__card-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
  }

  /* Card text: 16px (TABLET/body) */
  .built__card-text {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* CTA button */
  .built__cta {
    margin-top: 40px;
    padding: 0 24px;
  }

  /* ---- MAP (Figma node 109:7445) ---- */

  .map {
    gap: 0;
  }

  /* Header: stack vertically */
  .map__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
    margin-bottom: 40px;
  }

  .map__title {
    flex: none;
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  /* Reset display:contents from 1800px breakpoint */
  .map__info {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 0;
  }

  .map__description {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
    max-width: none;
    padding-top: 0;
  }

  .map__stats {
    grid-column: auto;
  }

  .map__stat {
    gap: 10px;
  }

  .map__stat-number {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
  }

  .map__stat-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  /* Map container: 500px height */
  .map__container {
    height: 500px;
  }

  /* ---- ABOUT (Figma node 109:7527) ---- */

  .about__title {
    font-size: 40px;
    letter-spacing: -1.2px;
    padding: 0 24px;
    margin-bottom: 40px;
  }

  /* Grid → flex column */
  .about__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
  }

  /* Row → normal flex column (reset display:contents) */
  .about__row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Video: full width, aspect ratio */
  .about__video {
    grid-column: auto;
    aspect-ratio: 720 / 360;
  }

  /* Side cards → horizontal row */
  .about__side {
    flex-direction: row;
    gap: 10px;
  }

  /* Cards: 350px height, 20px padding */
  .about__card {
    flex: 1;
    height: 350px;
    padding: 20px;
  }

  /* Mortgage card header: stack vertically */
  .about__card-header {
    flex-direction: column;
    gap: 33px;
  }

  .about__card-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
  }

  .about__card-text {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* Stats → normal flex wrap (reset display:contents) */
  .about__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Stat cards: 350px, 20px padding */
  .about__stat {
    flex: 1;
    min-width: calc(50% - 5px);
    height: 350px;
    padding: 20px;
  }

  .about__stat-top {
    gap: 10px;
  }

  .about__stat-number {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
  }

  .about__stat-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  .about__stat-text {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  /* 3rd stat card: full width, horizontal layout */
  .about__stat:last-child {
    flex: none;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: flex-start;
  }

  .about__stat:last-child .about__stat-top {
    flex: 1;
    align-self: stretch;
    justify-content: space-between;
  }

  .about__stat:last-child .about__stat-text {
    flex: 1;
  }

  /* ---- FOOTER (Figma node 109:7590) ---- */

  /* Grid layout to rearrange all footer elements freely */
  .footer {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 60px;
    padding-top: 60px;
  }

  /* Make wrappers transparent so children become grid items */
  .footer__top {
    display: contents;
  }

  .footer__bottom {
    display: contents;
  }

  .footer__brand {
    display: contents;
  }

  /* Row 1: Logo (full width) */
  .footer__logo {
    grid-row: 1;
    grid-column: 1 / -1;
    padding: 0 24px;
  }

  .footer__logo-img {
    height: 60px;
  }

  /* Row 2: Nav grid (full width) */
  .footer__menu {
    grid-row: 2;
    grid-column: 1 / -1;
    width: auto;
    gap: 0;
    align-self: auto;
  }

  /* Hide column titles */
  .footer__column-title {
    display: none;
  }

  /* Nav → 2-column grid with bordered cells */
  .footer__menu .footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  /* Nav links as bordered cells */
  .footer__menu .footer__nav-link {
    display: flex;
    align-items: center;
    width: auto;
    padding: 35px 24px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.44px;
    color: var(--color-graphite);
    border-top: 1px solid #ccc;
  }

  /* Last row: bottom border */
  .footer__menu .footer__nav-link:nth-child(5),
  .footer__menu .footer__nav-link:nth-child(6) {
    border-bottom: 1px solid #ccc;
  }

  /* Left column: right border */
  .footer__menu .footer__nav-link:nth-child(odd) {
    border-right: 1px solid #ccc;
  }

  /* Remove animated underline on tablet nav */
  .footer__menu .footer__nav-link::after {
    display: none;
  }

  /* Row 3: Contacts (full width) */
  .footer__contacts {
    grid-row: 3;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 24px;
    justify-content: flex-start;
  }

  /* Contact info: horizontal row */
  .footer__contact-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  /* Email + phone: 22px semibold */
  .footer__email,
  .footer__phone {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.44px;
  }

  /* CTA: full width */
  .footer__cta {
    width: 100%;
    height: 70px;
  }

  /* Row 4: Address (col 1) + Socials (col 2) */
  .footer__address {
    grid-row: 4;
    grid-column: 1;
    padding-left: 24px;
    align-self: center;
    margin-top: -20px;
  }

  .footer__socials {
    grid-row: 4;
    grid-column: 2;
    padding-right: 24px;
    gap: 40px;
    justify-content: flex-end;
    flex: none;
    margin-top: -20px;
  }

  /* Social icons: 60px circles */
  .footer__social-link {
    width: 60px;
    height: 60px;
  }

  .footer__social-link img {
    width: 60px;
    height: 60px;
  }

  .footer__social-link--rutube {
    width: 60px;
    height: 60px;
  }

  .footer__social-link--rutube img {
    width: auto;
    height: 18px;
  }

  /* Row 5: Doc links (full width) */
  .footer__docs {
    grid-row: 5;
    grid-column: 1 / -1;
    padding: 0 24px;
    gap: 20px;
    flex: none;
    align-self: auto;
  }

  /* Doc links: 22px semibold */
  .footer__docs .footer__nav {
    gap: 20px;
  }

  .footer__docs .footer__nav-link {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.44px;
    color: var(--color-graphite);
    width: auto;
    padding: 5px 0;
  }

  /* Row 6: Legal (col 1) + Copyright (col 2) */
  .footer__legal {
    grid-row: 6;
    grid-column: 1;
    padding: 0 0 24px 24px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
    color: var(--color-graphite);
    flex: none;
  }

  .footer__copyright {
    grid-row: 6;
    grid-column: 2;
    padding: 0 24px 24px 0;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
    color: var(--color-graphite);
    text-align: right;
    flex: none;
  }

  /* Reset footer__bottom margins */
  .footer__bottom {
    margin-top: 0;
  }

  /* ---- POPUP (tablet — single column) ---- */

  /* Full-screen container */
  .popup__container {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  /* Header bar: logo left, close right */
  .popup__header {
    padding: 20px 24px;
    flex-shrink: 0;
  }

  .popup__logo {
    display: block;
  }

  .popup__logo-img {
    height: 40px;
    width: auto;
  }

  /* Close button: 60×60 circle with gray bg */
  .popup__close {
    width: 60px;
    height: 60px;
    margin-left: 0;
    background: #eaeaea;
    border-radius: 50%;
  }

  /* Content: vertical stack, scrollable */
  .popup__content {
    flex-direction: column;
    gap: 40px;
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    align-items: stretch;
  }

  /* Image: full width, 308px height, smaller radius */
  .popup__image {
    width: 100%;
    height: 308px;
    border-radius: 20px;
    flex-shrink: 0;
  }

  .popup__image-img {
    height: 100%;
  }

  /* Form: full width below image */
  .popup__form-card {
    width: 100%;
    height: auto;
    padding: 0;
    gap: 40px;
  }

  .popup__form-title {
    font-size: 36px;
    letter-spacing: -1.08px;
  }
}

/* ===========================================================
   390px BREAKPOINT (mobile phones)
   =========================================================== */
@media (max-width: 576px) {

  /* ---- Global variable overrides ---- */
  :root {
    --content-padding: 20px;
    --section-padding-y: 40px;
  }

  /* ---- HEADER → MOBILE ---- */

  /* Position: 15px from image-block edges (Figma: p-15 inside image) */
  .header {
    left: 15px;
    right: 15px;
    top: 15px;
  }

  /* Logo pill: h-40, px-15, py-5 (Figma 390) */
  .header__left {
    height: 40px;
    padding: 5px 15px;
  }

  .header__logo-img {
    height: 24px;
  }

  /* Burger: 40px circle */
  .header__burger {
    width: 40px;
    height: 40px;
    padding: 10px;
    gap: 4px;
  }

  /* ---- HERO (Figma node 109:6023) ---- */

  /* Wrapper: px-5, pt-5 */
  .hero {
    padding: 5px 5px 20px;
  }

  /* Image block: 460px, rounded-10px */
  .hero__image-block {
    height: 460px;
    margin-bottom: 410px;
    border-radius: 10px;
    overflow: visible;
  }

  /* Bg layers: clip to image area */
  .hero__bg,
  .hero__vignette,
  .hero__overlay {
    height: 460px;
    border-radius: 10px;
    clip-path: inset(0 round 10px);
  }

  /* Content: flex column below image (40px gap per Figma) */
  .hero__content {
    top: calc(100% + 40px);
    left: 0;
    right: 0;
    padding: 0 15px;
    padding-top: 0;
    gap: 20px;
  }

  .hero__info {
    gap: 20px;
  }

  .hero__description {
    padding: 0;
    flex: none;
  }

  /* Tags: inside image at bottom, 15px from edges (Figma: p-15 on image block) */
  .hero__tags {
    top: -55px;
    transform: translateY(-100%);
    left: 15px;
    right: 15px;
    gap: 10px;
  }

  .hero__tags .tag {
    font-size: 12px;
    padding: 6px 12px;
    gap: 6px;
    letter-spacing: -0.12px;
  }

  .hero__tags .tag .tag__icon {
    width: 12px;
    height: 12px;
  }

  /* Title: 24px MOBILE/H2 */
  .hero__title {
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.72px;
    color: var(--color-dark);
  }

  /* Description: 14px MOBILE/body */
  .hero__description p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
    color: var(--color-graphite);
  }

  /* CTA: stacked vertically (Figma: gap-10) */
  .hero__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
  }

  /* Primary button: h-70, full width */
  .hero__cta .btn {
    width: 100%;
    height: 50px;
    font-size: 12px;
    letter-spacing: -0.12px;
    border-radius: 50px;
    flex: none;
  }

  /* Secondary button: h-50, 12px text (MOBILE/Button) */
  .hero__cta .btn--secondary {
    height: 50px;
    font-size: 12px;
    gap: 5px;
    background-color: transparent;
    color: var(--color-graphite);
    border: 1px solid var(--color-graphite);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero__cta .btn--secondary .btn__icon {
    filter: brightness(0);
    width: 14px;
    height: 14px;
  }

  /* Season toggle: below header inside image (Figma: right-15, top ~70px) */
  .hero__season {
    right: 15px;
    top: 70px;
    bottom: auto;
    transform: none;
    gap: 0;
  }

  /* Tooltip: 14px title, 12px text (Figma: px-20 py-10) */
  .hero__tooltip {
    width: auto;
    white-space: nowrap;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .hero__tooltip-title {
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.14px;
    margin-bottom: 4px;
  }

  .hero__tooltip-text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  /* Season toggle: h-33, knobs w-49 */
  .hero__season-toggle {
    width: 104px;
    height: 33px;
    padding: 3px;
  }

  .hero__season-btn {
    width: 49px;
    height: 27px;
    flex: none;
    padding: 2px;
  }

  .hero__season-btn img {
    width: 18px;
    height: 18px;
  }

  /* ---- BANKS BAR (Figma node 109:6058) ---- */

  /* Container: py-40 px-20, gap-40 */
  .hero__banks {
    padding: 40px 20px;
    gap: 40px;
  }

  /* Info: inline flow so badge doesn't break to new line */
  .hero__banks-title {
    display: inline;
  }

  .hero__banks-title-text,
  .hero__banks-subtitle {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.66px;
  }

  /* Badge: inline in text flow */
  .hero__banks-badge {
    display: inline-flex;
    vertical-align: middle;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.66px;
    padding: 5px 6px;
  }

  /* Banks grid: 2 columns, gap-40 */
  .hero__banks-list {
    gap: 40px;
  }

  /* Bank item: gap-10 */
  .hero__bank {
    gap: 10px;
  }

  /* Bank icon: 32px */
  .hero__bank-icon {
    width: 32px;
    height: 32px;
  }

  .hero__bank-icon img {
    width: 22px;
    height: 22px;
  }

  /* Bank name: 14px MOBILE/body (regular weight) */
  .hero__bank-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }

  /* ---- SECTION HEADERS (MOBILE typography) ---- */

  .section__header {
    margin-bottom: 40px;
  }

  .section__title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.84px;
    width: 100%;
  }

  .section__description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }

  /* ---- PROJECTS SECTION (Figma node 109:6092) ---- */

  /* Grid → horizontal scroll carousel, no side padding, snap at 20px */
  .projects__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 0;
    scroll-padding-left: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .projects__grid::-webkit-scrollbar {
    display: none;
  }

  /* Flatten rows so cards sit directly in scroll container */
  .projects__row {
    display: contents;
  }

  /* All cards: 300×500 fixed, scroll-snap */
  .projects__card--wide,
  .projects__card--narrow {
    width: 300px;
    min-width: 300px;
    height: 500px;
    aspect-ratio: unset;
    flex: none;
    scroll-snap-align: start;
  }

  /* First card: 20px left offset to match content padding */
  .projects__row:first-child .projects__card:first-child {
    margin-left: 20px;
  }

  /* Last card: 20px right offset for comfortable scroll end */
  .projects__row:last-child .projects__card:last-child {
    margin-right: 20px;
  }

  .projects__card {
    border-radius: 10px;
  }

  /* Flatten card internals for reordering: title top, desc+arrow bottom */
  .projects__card-top,
  .projects__card-text {
    display: contents;
  }

  /* Hide badge on mobile */
  .projects__card-badge,
  .projects__card-badge--visible {
    display: none;
  }

  /* Title at top */
  .projects__card-title {
    order: 1;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.66px;
  }

  /* Description pushed to bottom */
  .projects__card-description {
    order: 2;
    margin-top: auto;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  /* Arrow pill: full width, h-40, at bottom */
  .projects__card-arrow {
    order: 3;
    width: 100%;
    height: 40px;
    margin-top: 12px;
  }

  .projects__card-content {
    padding: 20px;
  }

  /* ---- CUSTOM BANNER (Figma node 109:6142) ---- */

  .projects__custom-inner {
    aspect-ratio: 350 / 600;
    border-radius: 10px;
  }

  /* Title: 24px MOBILE/H2 */
  .projects__custom-title {
    font-size: 24px;
    letter-spacing: -0.72px;
  }

  /* Description: 14px MOBILE/body */
  .projects__custom-description {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }

  /* Tags: flex-wrap (NOT column), 12px, bordered pills */
  .projects__custom-visual {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .projects__custom-tag {
    font-size: 12px;
    padding: 3px 10px;
  }

  /* Illustration: Figma mobile positioning */
  .projects__custom-illustration {
    left: -27.84%;
    top: -19.8%;
    width: 377.79%;
    height: 183.63%;
  }

  /* CTA: h-50, 12px MOBILE/Button */
  .projects__custom-info .btn {
    height: 50px;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* ---- POPULAR SECTION (Figma node 109:6164) ---- */

  /* Section: px-20 py-40 (inherits flex gap-40 from 1024px) */
  .popular {
    padding: var(--section-padding-y) var(--content-padding);
  }

  /* Hide description on mobile */
  .popular .section__description {
    display: none;
  }

  /* Grid → horizontal scroll carousel, gap-10 */
  .popular__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 0;
    scroll-padding-left: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popular__grid::-webkit-scrollbar {
    display: none;
  }

  /* Flatten rows */
  .popular__row {
    display: contents;
  }

  /* Cards: w-300, scroll-snap */
  .popular__card {
    flex: none;
    width: 300px;
    min-width: 300px;
    border-radius: 10px;
    scroll-snap-align: start;
  }

  /* Image area: aspect-ratio 300/250 */
  .popular__card-image-wrap {
    aspect-ratio: 300 / 250;
  }

  /* Tags: p-10, 12px */
  .popular__card-tags {
    top: 10px;
    left: 10px;
  }

  .popular__card-tag {
    font-size: 12px;
    letter-spacing: -0.12px;
    padding: 4px 10px;
  }

  /* Hide nav arrows on mobile */
  .popular__card-nav {
    display: none;
  }

  /* Card info: p-20, gap-20 */
  .popular__card-info {
    gap: 20px;
    padding: 20px;
  }

  /* Header: gap-10 */
  .popular__card-header {
    gap: 10px;
  }

  /* Title: 18px MOBILE/H4 */
  .popular__card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  /* Subtitle: 14px MOBILE/body */
  .popular__card-subtitle {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }

  /* Features: gap-10, text 12px MOBILE/body2 */
  .popular__card-features {
    gap: 10px;
  }

  .popular__card-feature-text {
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* Price: 14px MOBILE/H5, h-20, px-10 py-6 */
  .popular__card-price {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.28px;
    height: 20px;
    padding: 6px 10px;
  }

  /* CTA: h-50, 12px MOBILE/Button */
  .popular__cta {
    padding: 0;
    margin-top: 0;
  }

  .popular__cta .btn {
    height: 50px;
    font-size: 12px;
    letter-spacing: -0.12px;
    border-radius: 50px;
  }

  /* ---- MEETING SECTION (Одна встреча) ---- */

  /* Section: py-40 px-20 gap-20 */
  .meeting {
    padding: 40px 20px;
    gap: 20px;
  }

  /* Header: flex row, gap-20, auto height */
  .meeting__header {
    padding: 0;
    min-height: auto;
    gap: 20px;
  }

  /* Title: 18px MOBILE/H4 */
  .meeting__title-left,
  .meeting__title-right {
    font-size: 18px;
    letter-spacing: -0.36px;
    white-space: normal;
  }

  .meeting__title-right {
    text-align: left;
  }

  /* Arrow: 10px */
  .meeting__title-arrow {
    width: 10px;
    flex-shrink: 0;
  }

  /* Timeline: h-20, reset margins */
  .meeting__timeline {
    height: 20px;
    margin-top: 0;
    padding: 0;
  }

  /* Track: reposition for smaller pills */
  .meeting__timeline-track {
    top: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(44, 44, 44, 0.1);
  }

  .meeting__timeline-progress {
    top: 8px;
    left: 0;
    height: 4px;
  }

  /* Pills: h-20, 12px text */
  .meeting__timeline-pills {
    height: 20px;
  }

  /* Hide pills 2, 3, 4 — show only first ("1 день") and last ("3 месяца") */
  .meeting__timeline-pill:nth-child(3) {
    display: none;
  }

  .meeting__timeline-pill {
    height: 20px;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: -0.12px;
    gap: 6px;
  }

  .meeting__timeline-pill-icon {
    width: 12px;
    height: 12px;
  }

  /* Steps: scroll-snap, no extra margin/padding */
  .meeting__steps {
    margin-top: 0;
    padding: 0;
    scroll-snap-type: x mandatory;
  }

  /* Step card: 320×320, padding 20px */
  .meeting__step {
    width: 320px;
    min-width: 320px;
    height: 320px;
    padding: 20px;
    scroll-snap-align: start;
  }

  /* First/last card: 10px radius */
  .meeting__step--first {
    border-radius: 10px 0 0 10px;
  }

  .meeting__step--last {
    border-radius: 0 10px 10px 0;
  }

  /* Photo overlay: solid dark instead of gradient */
  .meeting__step--photo::before {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Step number: 14px MOBILE/H5 */
  .meeting__step-number {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.28px;
  }

  /* Step content: gap 20px */
  .meeting__step-content {
    gap: 20px;
  }

  /* Step text: gap 10px */
  .meeting__step-text {
    gap: 10px;
  }

  /* Step title: 18px MOBILE/H4 */
  .meeting__step-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.36px;
  }

  /* Step description: 12px MOBILE/body2 */
  .meeting__step-description {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  /* Duration pill: 12px, px-20 */
  .meeting__step-duration {
    font-size: 12px;
    letter-spacing: -0.24px;
    padding: 6px 20px;
  }

  /* ---- CTA / FORM SECTION ---- */

  /* Section: py-40 px-20 */
  .cta {
    padding: 40px 20px;
  }

  /* Row: column, gap-20, no inner padding */
  .cta__row {
    flex-direction: column;
    padding: 0;
    gap: 20px;
  }

  /* Info card: aspect 350/500, p-20, radius-10 */
  .cta__info {
    flex: none;
    min-height: auto;
    aspect-ratio: 350 / 500;
    padding: 20px;
    border-radius: 10px;
  }

  .cta__info::before {
    border-radius: 10px;
  }

  /* Title: 28px MOBILE/H1 */
  .cta__info-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.84px;
  }

  /* Benefits heading: 14px MOBILE/H5 */
  .cta__benefits-heading {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.28px;
  }

  /* Benefit items: gap-10 */
  .cta__benefit {
    gap: 10px;
  }

  .cta__benefit-icon {
    width: 18px;
    height: 18px;
  }

  /* Benefit text: 12px MOBILE/body2 */
  .cta__benefit-text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  /* Form card: p-20, gap-40, radius-10 */
  .cta__form-card {
    flex: none;
    min-height: auto;
    padding: 20px;
    gap: 40px;
    border-radius: 10px;
  }

  /* Form title: 22px MOBILE/H3 */
  .cta__form-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.66px;
  }

  /* Inputs: h-50, 14px */
  .cta__form-input,
  .cta__form-phone-input {
    height: 50px;
    font-size: 14px;
    letter-spacing: -0.14px;
    padding: 15px 20px;
  }

  .cta__form-phone-input {
    padding-left: 70px;
  }

  /* Submit button: same as other mobile buttons (h-50, 12px) */
  .cta__form-btn {
    height: 50px;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* Checkbox: 16px */
  .cta__form-checkbox {
    width: 16px;
    height: 16px;
  }

  /* Consent text: 12px MOBILE/body2 */
  .cta__form-consent-text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  /* ---- WHY US SECTION (Почему мы) ---- */

  .whyus {
    padding: 40px 0;
  }

  /* Header: stack vertically, px-20 */
  .whyus__header {
    padding: 0 20px;
    margin-bottom: 40px;
  }

  /* Title: 28px MOBILE/H1 */
  .whyus__title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  /* Description: 14px MOBILE/body */
  .whyus__description p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }

  /* Grid: single column, auto rows */
  .whyus__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* All cards: single column, only top border to avoid doubling */
  .whyus__card {
    border: none;
    border-top: 0.5px solid var(--color-graphite);
    border-radius: 0;
    padding: 20px;
    gap: 20px;
  }

  /* Last card gets bottom border too */
  .whyus__card--6 {
    border-bottom: 0.5px solid var(--color-graphite);
  }

  .whyus__card--1,
  .whyus__card--3,
  .whyus__card--5 {
    padding: 20px;
  }

  .whyus__card--2,
  .whyus__card--4,
  .whyus__card--6 {
    border-left: none;
    padding: 20px;
  }

  /* Card number: 14px MOBILE/H5 */
  .whyus__card-number {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  /* Card title: 18px MOBILE/H4 */
  .whyus__card-title {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  /* Card text: 12px MOBILE/body2 */
  .whyus__card-text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  /* ---- MAP SECTION (Карта проектов) ---- */

  .map {
    padding: 40px 0;
  }

  .map__header {
    padding: 0 20px;
    gap: 20px;
    margin-bottom: 40px;
  }

  /* Title: 28px MOBILE/H1 */
  .map__title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .map__info {
    gap: 20px;
  }

  /* Description: 14px MOBILE/body */
  .map__description {
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  /* Stats: vertical stack */
  .map__stats {
    flex-direction: column;
    gap: 10px;
  }

  .map__stat {
    gap: 10px;
  }

  /* Stat number: 18px MOBILE/H4, smaller pill */
  .map__stat-number {
    font-size: 18px;
    letter-spacing: -0.36px;
    padding: 6px 10px;
    border-radius: 10px;
  }

  /* Stat label: 14px MOBILE/H5 */
  .map__stat-label {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  /* Map container: 450px */
  .map__container {
    height: 450px;
  }

  /* Map balloon: fit mobile screen */
  .map-balloon {
    width: 300px;
    height: 250px;
    padding: 15px;
    border-radius: 10px;
  }

  .map-balloon__overlay {
    border-radius: 10px;
  }

  .map-balloon__status {
    font-size: 12px;
    padding: 4px 8px 4px 6px;
    border-radius: 10px;
  }

  .map-balloon__close {
    width: 24px;
    height: 24px;
    border-radius: 10px;
  }

  .map-balloon__close svg {
    width: 8px;
    height: 8px;
  }

  .map-balloon__title {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  .map-balloon__location {
    font-size: 12px;
    letter-spacing: -0.12px;
    gap: 6px;
  }

  .map-balloon__loc-icon {
    width: 10px;
    height: 13px;
  }

  /* Map markers: smaller on mobile */
  .map-marker {
    padding: 6px;
    border-radius: 14px;
  }

  .map-marker__text {
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* ---- BUILT SECTION (Мы уже построили) ---- */

  .built {
    padding: 40px 0;
  }

  .built__header {
    padding: 0 20px;
    margin-bottom: 40px;
  }

  /* Title: 28px MOBILE/H1 */
  .built__title {
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.56px;
  }

  /* Description: 14px MOBILE/body */
  .built__description p {
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  /* Grid: px-20, gap-10 */
  .built__grid {
    padding: 0 20px;
    gap: 10px;
  }

  .built__column {
    gap: 10px;
  }

  /* Small cards row: stack vertically */
  .built__row {
    flex-direction: column;
    gap: 10px;
  }

  /* All cards: square aspect ratio, rounded-10 */
  .built__card {
    border-radius: 10px;
  }

  .built__card::before {
    border-radius: 10px;
  }

  .built__card--large {
    aspect-ratio: 1 / 1;
  }

  .built__card--small {
    aspect-ratio: 1 / 1;
  }

  .built__row .built__card--small:last-child {
    aspect-ratio: 1 / 1;
  }

  /* Status text: 12px MOBILE/body2 */
  .built__card-status-text {
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* Card title: 18px MOBILE/H4 */
  .built__card-title {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  /* Card text: 12px MOBILE/body2 */
  .built__card-text {
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* CTA button */
  .built__cta {
    margin-top: 40px;
    padding: 0 20px;
  }

  /* ---- ABOUT SECTION (О компании) ---- */

  .about {
    padding: 40px 0;
  }

  .about__title {
    font-size: 28px;
    letter-spacing: -0.84px;
    padding: 0 20px;
    margin-bottom: 20px;
  }

  .about__grid {
    padding: 0;
    gap: 0;
  }

  .about__row {
    gap: 0;
  }

  .about__video {
    aspect-ratio: 350 / 214;
    margin: 0 20px 40px;
    border-radius: 10px;
  }

  .about__side {
    flex-direction: column;
    gap: 0;
  }

  .about__card {
    flex: none;
    height: auto;
    padding: 20px;
    border-radius: 0;
    border: none;
    border-top: 0.5px solid var(--color-graphite);
  }

  .about__card--yellow {
    border-top: none;
  }

  .about__card {
    gap: 10px;
  }

  .about__card-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .about__card-title {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  .about__card-text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  .about__bank {
    width: 45px;
    height: 26px;
    margin-right: -18px;
  }

  .about__stats {
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 0;
  }

  .about__stat {
    flex: none;
    min-width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 0;
    gap: 10px;
  }

  .about__stat--bordered {
    border: none;
    border-top: 0.5px solid var(--color-graphite);
    border-bottom: 0.5px solid var(--color-graphite);
  }

  .about__stat-top {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .about__stat-number {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .about__stat-label {
    font-size: 14px;
    letter-spacing: -0.28px;
    text-align: right;
  }

  .about__stat-text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
  }

  .about__stat:last-child {
    flex-direction: column;
    width: 100%;
  }

  .about__stat:last-child .about__stat-top {
    flex: none;
  }

  .about__stat:last-child .about__stat-text {
    flex: none;
  }

  /* ---- MOBILE NAV (390px) ---- */

  .mobile-nav {
    gap: 20px;
  }

  /* Header: logo + close */
  .mobile-nav__header {
    padding: 20px;
  }

  .mobile-nav__logo-img {
    height: 30px;
  }

  .mobile-nav__close {
    width: 40px;
    height: 40px;
  }

  .mobile-nav__close svg {
    width: 14px;
    height: 14px;
  }

  /* Nav: single column bordered list */
  .mobile-nav__grid {
    grid-template-columns: 1fr;
  }

  .mobile-nav__cell {
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: -0.28px;
    border-right: none;
    border-top: 1px solid #ccc;
    border-bottom: none;
  }

  .mobile-nav__cell:nth-child(odd) {
    border-right: none;
  }

  .mobile-nav__cell:nth-child(5),
  .mobile-nav__cell:nth-child(6) {
    border-bottom: none;
  }

  .mobile-nav__cell:last-child {
    border-bottom: 1px solid #ccc;
  }

  /* Contacts */
  .mobile-nav__contacts {
    gap: 40px;
    padding: 0 20px;
  }

  .mobile-nav__email,
  .mobile-nav__phone {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .mobile-nav__cta {
    height: 50px;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* Hide address text, show socials centered */
  .mobile-nav__address {
    display: none;
  }

  .mobile-nav__address-row {
    gap: 0;
    justify-content: center;
  }

  .mobile-nav__socials {
    display: flex;
    gap: 40px;
    justify-content: center;
  }

  .mobile-nav__social {
    width: 40px;
    height: 40px;
  }

  .mobile-nav__social img {
    width: 40px;
    height: 40px;
  }

  .mobile-nav__social--rutube img {
    width: auto;
    height: 18px;
  }

  /* Doc links: bordered list */
  .mobile-nav__docs {
    gap: 0;
    padding: 0;
  }

  .mobile-nav__doc-link {
    font-size: 14px;
    letter-spacing: -0.28px;
    padding: 10px 20px;
    border-top: 1px solid #ccc;
  }

  .mobile-nav__doc-link:last-child {
    border-bottom: 1px solid #ccc;
  }

  /* Bottom */
  .mobile-nav__bottom {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 20px 20px;
  }

  .mobile-nav__legal,
  .mobile-nav__copyright {
    font-size: 12px;
    letter-spacing: -0.12px;
    text-align: center;
  }

  .mobile-nav__copyright {
    text-align: center;
  }

  /* ---- FOOTER ---- */

  /* Use flex column; wrappers stay display:contents from 1024px,
     so all children become direct flex items — reorder with order */
  .footer {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 40px;
  }

  /* Logo */
  .footer__logo {
    order: 1;
    padding: 0 20px;
    margin-bottom: 20px;
  }

  .footer__logo-img {
    height: 37px;
  }

  /* Hide address */
  .footer__address {
    display: none;
  }

  /* Menu: order 2, single column bordered list */
  .footer__menu {
    order: 2;
    width: 100%;
  }

  .footer__menu .footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .footer__menu .footer__nav-link {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.28px;
    border: none;
    border-top: 1px solid #ccc;
  }

  .footer__menu .footer__nav-link:last-child {
    border-bottom: 1px solid #ccc;
  }

  .footer__menu .footer__nav-link:nth-child(odd) {
    border-right: none;
  }

  .footer__menu .footer__nav-link:nth-child(5),
  .footer__menu .footer__nav-link:nth-child(6) {
    border-bottom: none;
  }

  .footer__menu .footer__nav-link:last-child {
    border-bottom: 1px solid #ccc;
  }

  .footer__menu .footer__nav-link::after {
    display: none;
  }

  /* Contacts: order 3, column layout */
  .footer__contacts {
    order: 3;
    flex-direction: column;
    padding: 0 20px;
    gap: 40px;
    margin-top: 20px;
  }

  .footer__contact-info {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__email,
  .footer__phone {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
  }

  .footer__cta {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border-radius: 50px;
    font-size: 12px;
    letter-spacing: -0.12px;
  }

  /* Socials: order 4, centered */
  .footer__socials {
    order: 4;
    justify-content: center;
    gap: 40px;
    padding: 0 20px;
    margin-top: 40px;
  }

  .footer__social-link {
    width: 40px;
    height: 40px;
  }

  .footer__social-link img {
    width: 40px;
    height: 40px;
  }

  .footer__social-link--rutube {
    width: 40px;
    height: 40px;
  }

  /* Docs: order 5, single column bordered */
  .footer__docs {
    order: 5;
    padding: 0;
    gap: 0;
    flex: none;
    margin-top: 20px;
  }

  .footer__docs .footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .footer__docs .footer__nav-link {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.28px;
    padding: 10px 20px;
    border: none;
    border-top: 1px solid #ccc;
    width: auto;
  }

  .footer__docs .footer__nav-link:last-child {
    border-bottom: 1px solid #ccc;
  }

  /* Legal: order 6 */
  .footer__legal {
    order: 6;
    padding: 0 20px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
    text-align: center;
    flex: none;
  }

  /* Copyright: order 7 */
  .footer__copyright {
    order: 7;
    padding: 0 20px 20px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.12px;
    text-align: center;
    flex: none;
  }

  /* ---- POPUP (390px — single column, compact) ---- */

  .popup__container {
    border-radius: 0;
  }

  .popup__header {
    padding: 20px;
  }

  .popup__logo-img {
    height: 24px;
  }

  .popup__close {
    width: 40px;
    height: 40px;
    background: #eaeaea;
    border-radius: 50%;
  }

  .popup__close svg {
    width: 12px;
    height: 12px;
  }

  .popup__content {
    padding: 20px;
    gap: 20px;
  }

  .popup__image {
    height: 265px;
    border-radius: 15px;
  }

  .popup__form-card {
    gap: 20px;
    padding: 0;
  }

  .popup__form-title {
    font-size: 22px;
    letter-spacing: -0.66px;
  }

  .popup__form-card .cta__form-consent-text {
    font-size: 12px;
  }
}

/* ===========================================================
   SHORT VIEWPORT (high DPI scaling, small laptops)
   Only kicks in when viewport height is under 900px.
   Normal 1080p monitors (~960px innerHeight) are unaffected.
   =========================================================== */
@media (max-height: 900px) and (min-width: 1025px) {
  .hero__image-block {
    height: calc(100vh - 20px);
  }
}