/* =========================================================
   CONTACTS PAGE — pixel-perfect to Figma 1920 with fluid clamp() scaling
   1200..1920 and capped above to mirror about/sell/buy pages.
   ========================================================= */

.big_block_home--contacts {
  background: #FFFFFF;
  height: auto;
  min-height: 0;
}
.big_block_home--contacts > .container {
  width: 100%;
  padding: 0;
  height: auto;
  max-width: none;
}
/* Drop the faint 1920-rail borders that buy.css paints on .wrapper —
   user requested no faint vertical lines on contacts. The box dividers
   inside .ct_info still get to keep their borders. */
body:has(.big_block_home--contacts) .wrapper {
  border-left: 0 !important;
  border-right: 0 !important;
}
.big_block_home--contacts::before,
.big_block_home--contacts::after {
  display: none !important;
}

/* When the mega-menu is OPEN on the contacts page, hide all page sections
   so the contact info (address, phone, "Как к нам добраться" panel, map,
   etc.) doesn't bleed through the mega menu overlay. Mirrors the project.css
   pattern (simpler :has(.mega-menu.active) — contacts.css only loads on
   contacts pages so no extra scoping is needed). Hide both the section
   wrappers AND the absolutely-positioned overlay cards explicitly, since
   those have their own z-index that would otherwise sit above the rails. */
header .about_block .mega-menu { z-index: 9999; }
body:has(.mega-menu.active) .ct_hero,
body:has(.mega-menu.active) .ct_info,
body:has(.mega-menu.active) .ct_map,
body:has(.mega-menu.active) .ct_map__card,
body:has(.mega-menu.active) .ct_inquiry,
body:has(.mega-menu.active) .ct_inquiry__card,
body:has(.mega-menu.active) footer {
  visibility: hidden !important;
}
/* Keep the secondary row hidden on compact layouts; desktop restores it so
   contacts uses the same two-row header as the rest of the site. */
.big_block_home--contacts header .about_block .bottom_header {
  display: none !important;
}
@media (min-width: 1201px) {
  .big_block_home--contacts header .about_block .bottom_header {
    display: flex !important;
  }
}
/* Header padding/margin: the negative-margin / positive-padding cancel-out
   used in sell/about pulled the inner content all the way to the wrapper
   edges, which made the burger button kiss the viewport edge on contacts.
   Here we keep modest fixed padding so the burger / logo / Consultar always
   sit clearly inside the viewport with breathing room. */
.big_block_home--contacts .top_header_group,
.big_block_home--contacts header .about_block .bottom_header {
  margin-left: 0;
  margin-right: 0;
  padding-left: clamp(30px, 1.6vw, 48px);
  padding-right: clamp(30px, 1.6vw, 48px);
  box-sizing: border-box;
  gap: 16px;
}
.big_block_home--contacts header { padding-top: clamp(15px, 1.3vw, 25px); }
/* Mega-menu logo override: logo1.svg is already dark — strip the brightness(0)
   filter inherited from .big_block_home--buy that turns it into a black blob */
.big_block_home--contacts header .mega-menu .logo img { filter: none; }

/* ----- HERO: breadcrumbs + big title (Figma: title at y=304, top divider at y=472) ----- */
.ct_hero {
  padding: clamp(42px, calc(5.97vw - 29.67px), 85px) clamp(60px, 5vw, 96px) clamp(50px, calc(4.17vw - 0px), 80px);
  text-align: center;
  background: #FFFFFF;
}
.ct_hero__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 8px);
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 130%;
  color: #C4C4C4;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: clamp(20px, 1.67vw, 32px);
}
.ct_hero__breadcrumbs a,
.ct_hero__breadcrumbs span {
  color: #C4C4C4;
  text-decoration: none;
  transition: color .2s;
}
.ct_hero__breadcrumbs a:hover { color: #010101; }
.ct_hero__breadcrumbs .is-active { color: #C4C4C4; }
.ct_hero__sep { display: inline-block; }

.ct_hero__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 4.17vw, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0;
}

/* ----- INFO GRID: full-bleed 1920, 3 columns × 2 rows with dividers ----- */
.ct_info {
  width: 100%;
  border-top: 1.6px solid #E1E1E1;
  border-bottom: 1.6px solid #E1E1E1;
  background: #FFFFFF;
}
.ct_info__grid {
  display: grid;
  /* Figma column widths: 668 | 587 | 665 (sums to 1920) */
  grid-template-columns: 668fr 587fr 665fr;
  min-height: clamp(244px, calc(26.81vw - 77.67px), 437px);
}
.ct_info__cell {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ct_info__cell + .ct_info__cell {
  border-left: 1.6px solid #E1E1E1;
}

/* Address: single tall cell, content padded to align with body x=98 */
.ct_info__cell--address {
  justify-content: flex-start;
}
.ct_info__cell--address .ct_info__inner {
  padding: clamp(20px, 1.67vw, 24px) clamp(24px, 1.1vw + 11px, 32px) clamp(24px, 1.67vw, 28px) clamp(78px, 2.5vw + 48px, 96px);
}

/* Middle and right columns split into 2 rows by horizontal divider at y=691 (Figma) */
.ct_info__cell--mid,
.ct_info__cell--right {
  flex-direction: column;
}
.ct_info__row {
  flex: 1 1 0;
  min-height: clamp(122px, calc(13.33vw - 38px), 218px);
  display: flex;
  align-items: flex-start;
}
.ct_info__row + .ct_info__row {
  border-top: 1.6px solid #E1E1E1;
}
.ct_info__row .ct_info__inner {
  padding: clamp(20px, 1.67vw, 24px) clamp(24px, 1.1vw + 11px, 32px) clamp(24px, 1.67vw, 28px) clamp(21px, 3.61vw - 22px, 47px);
  width: 100%;
}

/* Label: Inter Light 25px, color rgba(#010101, 0.5) — Figma */
.ct_info__label {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 130%;
  color: rgba(1, 1, 1, 0.5);
  margin-bottom: clamp(10px, 0.83vw, 16px);
}

/* Value: Inter Light 32px, color #010101, line-height 120% */
.ct_info__value {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 1.67vw, 32px);
  line-height: 120%;
  color: #010101;
  text-decoration: none;
  margin: 0;
  transition: color .2s;
  word-break: break-word;
}
a.ct_info__value:hover { color: #41545C; }
.ct_info__value + .ct_info__value { margin-top: clamp(15px, 1.25vw, 24px); }

/* Social icons: visual container 54×54 (Figma: 30×30 inner glyph + 12px padding), color #41545c */
.ct_info__social {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.11vw - 3.33px, 18px);
  margin-top: 4px;
  flex-wrap: wrap;
}
.ct_info__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(33px, 2.92vw - 2px, 54px);
  height: clamp(33px, 2.92vw - 2px, 54px);
  transition: opacity .2s;
}
.ct_info__social a:hover { opacity: 0.7; }
.ct_info__social img {
  width: clamp(33px, 2.92vw - 2px, 54px);
  height: clamp(33px, 2.92vw - 2px, 54px);
  display: block;
  object-fit: contain;
}

/* =========================================================
   MAP BLOCK — Figma: 1920×845 (map 1730×755 with overlay card)
   ========================================================= */
.ct_map {
  background: #FFFFFF;
  padding: clamp(30px, 4.72vw - 26px, 64px) clamp(60px, 5vw, 96px) clamp(60px, 5vw, 96px);
}
.ct_map__wrap {
  position: relative;
  width: 100%;
  max-width: 1730px;
  margin: 0 auto;
  height: clamp(472px, 39.3vw, 755px);
  overflow: hidden;
}
.ct_map__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}
.ct_map__link > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.ct_map__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Marker pin + label (Figma: 62px ring + 54px inner circle + "X" + address text on right) */
.ct_map__marker {
  position: absolute;
  /* Approximate office position on the Figma map snapshot */
  top: 49%;
  left: 41%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 19px);
  z-index: 4;
  pointer-events: none;
}
.ct_map__pin {
  width: clamp(39px, calc(3.19vw + 0.67px), 62px);
  height: clamp(39px, calc(3.19vw + 0.67px), 62px);
  border: 1.6px solid #41545C;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}
.ct_map__pin::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  background: #41545C;
  border-radius: 50%;
  border: 1.92px dashed #41545C;
}
.ct_map__pin svg { position: relative; z-index: 2; }
.ct_map__addr {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 130%;
  color: #41545C;
  background: #FFFFFF;
  padding: 6px 12px;
  white-space: nowrap;
  pointer-events: auto;
}
/* Overlay card on right side of map */
.ct_map__card {
  position: absolute;
  right: clamp(50px, calc(1.94vw + 26.67px), 64px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(497px, calc(41.39vw + 0.33px), 795px);
  max-width: calc(100% - clamp(64px, calc(8.89vw - 42.67px), 128px));
  padding: clamp(20px, calc(3.89vw - 26.67px), 48px);
  background: #FAFAFA;
  z-index: 500;
  box-sizing: border-box;
}
.ct_map__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 2.22vw + 1.3px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 clamp(10px, 0.83vw, 16px);
}
.ct_map__desc {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
  max-width: 712px;
}
.ct_map__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(12px, 1.25vw, 20px);
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(14px, 0.83vw + 4px, 18px);
  line-height: 130%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #41545C;
  border-bottom: 1px solid #41545C;
  padding-bottom: 2px;
  transition: color .25s, border-color .25s, transform .25s;
}
.ct_map__cta::after {
  content: "→";
  display: inline-block;
  transition: transform .25s ease;
}
.ct_map__cta:hover {
  color: #010101;
  border-color: #010101;
}
.ct_map__cta:hover::after { transform: translateX(4px); }

/* =========================================================
   INQUIRY BLOCK — Figma 1920×1608: villa bg + 1280×1208 white card
   ========================================================= */
.ct_inquiry {
  position: relative;
  width: 100%;
  min-height: clamp(994px, calc(85.28vw - 29.33px), 1608px);
  background: #2A2A2A;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(130px, calc(9.72vw + 13.33px), 200px) clamp(60px, 5vw, 96px);
  box-sizing: border-box;
  margin-top: clamp(24px, 2.5vw, 48px);
  overflow: hidden;
}
.ct_inquiry__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.ct_inquiry__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ct_inquiry__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(800px, 66.67vw, 1280px);
  background: #FFFFFF;
  padding: clamp(60px, 5vw, 96px) clamp(30px, 2.5vw, 48px);
  box-sizing: border-box;
}
.ct_inquiry__head {
  text-align: center;
  margin-bottom: clamp(53px, 4.41vw, 64px);
  padding-top: 0;
}
.ct_inquiry__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 4.17vw, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 0 clamp(30px, 2.5vw, 32px);
  /* Figma title is 1328 wide while card is 1280 — let it overflow card padding slightly */
  margin-left: clamp(-45px, calc(2.92vw - 80px), -24px);
  margin-right: clamp(-45px, calc(2.92vw - 80px), -24px);
}
.ct_inquiry__sub {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 2.22vw + 1.3px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 auto clamp(15px, 1.25vw, 24px);
  max-width: clamp(680px, 56.67vw, 1088px);
}
.ct_inquiry__lead {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
}
/* Form */
.ct_inquiry__form {
  width: 100%;
}
.ct_inquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, clamp(365px, calc(19.31vw + 133.33px), 504px)) minmax(0, clamp(365px, calc(20.69vw + 116.67px), 514px));
  column-gap: clamp(10px, calc(7.5vw - 80px), 64px);
  row-gap: clamp(0px, calc(6.67vw - 80px), 48px);
  justify-content: center;
  margin-bottom: clamp(48px, calc(56px - 0.42vw), 51px);
}
/* Each field is a bordered, OPAQUE box wrapping a custom-styled select.
   Text inside is centered both horizontally and vertically. */
.ct_inquiry__field {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border: clamp(1px, calc(0.14vw - 0.67px), 2px) solid #E1E1E1;
  padding: 0;
  height: clamp(70px, calc(3.61vw + 26.67px), 96px);
  background: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, calc(0.97vw + 6.33px), 25px);
  color: #3C3C3B;
  text-align: center;
}
.ct_inquiry__select {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  color: inherit;
  text-align: center;
  text-align-last: center;
  padding: 0 clamp(50px, calc(0.83vw + 40px), 56px);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='%23A5A5A5'><path d='M12 18L0 0h24z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: clamp(15px, 1.25vw, 24px) clamp(12px, calc(0.83vw + 2px), 18px);
}
.ct_inquiry__field:hover { border-color: #C8C8C8; }
.ct_inquiry__select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='%23010101'><path d='M12 18L0 0h24z'/></svg>");
}
.ct_inquiry__select option { color: #010101; font-size: 18px; text-align: center; }

/* When main.js upgrades the native <select> to .lux-select, the trigger
   doesn't inherit our field font/padding/alignment — bridge it here so the
   placeholder ("Presupuesto", "Objetivo", …) appears centered vertically AND
   horizontally inside the field, with the chevron pinned to the right edge. */
.ct_inquiry__field .lux-select {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: 0 clamp(50px, calc(0.83vw + 40px), 56px);
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}
.ct_inquiry__field .lux-select__trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
}
.ct_inquiry__field .lux-select__value {
  font: inherit;
  flex: 0 1 auto;
  text-align: center;
}
.ct_inquiry__field .lux-select__arrow {
  right: 0;
}
.ct_inquiry__field .lux-select__value:not(.is-placeholder) { color: #010101; }
.ct_inquiry__field .lux-select__value.is-placeholder { color: #3C3C3B; }
/* Force the dropdown panel background to be fully opaque (defensive — the
   global rule already sets background:#FFFFFF, but the transition through a
   stacking-context wrapper can show the underlying card behind the menu). */
.ct_inquiry__field .lux-select__menu {
  background: #FFFFFF !important;
  border-color: #E1E1E1;
  box-shadow:
    0 18px 50px rgba(16, 24, 40, 0.18),
    0 4px 12px rgba(16, 24, 40, 0.08);
}

/* Checkmark microtext */
.ct_inquiry__check {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  text-align: center;
  margin: 0 0 clamp(5px, calc(2.64vw - 26.67px), 24px);
}
/* Submit button — dark teal, white text */
.ct_inquiry__btn {
  display: block;
  width: 100%;
  max-width: clamp(740px, calc(61.67vw + 0px), 1184px);
  height: clamp(50px, 4.17vw, 80px);
  margin: 0 auto 24px;
  background: #41545C;
  color: #FFFFFF;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(16px, 1.25vw + 1px, 25px);
  line-height: 150%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color .25s, color .25s;
}
.ct_inquiry__btn:hover { background: #010101; }
/* Disclaimer */
.ct_inquiry__disclaimer {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 0.83vw + 2px, 18px);
  line-height: 130%;
  color: #C3C3C3;
  text-align: center;
  margin: 0 auto;
  max-width: clamp(345px, 28.75vw, 552px);
}

/* =========================================================
   ADAPTIVE — 1200px breakpoint (small desktop / large tablet)
   Only LAYOUT-CHANGING overrides are kept here — the smooth
   scaling of fonts/paddings/sizes is already handled by the
   clamp() formulas in the base styles above (their lower bounds
   match the 1200px Figma values, so the boundary is seamless).
   ----------------------------------------------------------
   Pixel-perfect to Figma frame "Contacts" 1200×3265
   Header bottom y=107 | Breadcrumbs y=149 | Title y=190 (50/55)
   Info y=295..539 (244 visible). Cols: 0..417 / 417..784 / 784..1200
       hdiv y=432 between mid+right. Cells inset: address 78, mid/right 21
   Map y=569..1041 (1081×472). Card flows BELOW map for readability.
   Inquiry y=1171..2165 (1200×994). Card 800×734 centered (130 top/bot)
   Footer y=2165..3265 (1200×1100) — handled in style.css
   ========================================================= */
@media (max-width: 1200px) {
  /* Container override — beat buy.css's .big_block_home.big_block_home--buy padding:0 60px */
  .big_block_home.big_block_home--contacts > .container { padding: 0; }
  /* Header padding handled by the base rule above (clamp 30..48). At
     narrow viewports we tighten it slightly and add explicit margin on
     burger + Consultar so neither touches the viewport edge. */
  .big_block_home--contacts .top_header_group {
    padding-left: 20px;
    padding-right: 20px;
  }
  .big_block_home--contacts .top_header_group .right_contacts {
    margin-right: 10px;
  }
  /* HEADER LAYOUT — at narrow desktop / tablet show only the top-left
     hamburger; the secondary row is desktop-only on contacts. */
  .big_block_home--contacts header .about_block .top_header_group .menu_burger {
    display: flex !important;
    align-items: center;
    margin-left: 10px;
  }
  .big_block_home--contacts header .about_block .top_header_group .menu_burger .burger {
    width: 32px;
    height: 16px;
    padding: 0;
  }
  .big_block_home--contacts header .about_block .top_header_group .menu_burger .burger span {
    background: #010101 !important;
    height: 2px;
  }
  .big_block_home--contacts header .about_block .top_header_group .menu_burger .burger span:nth-child(1) { width: 24px; }
  .big_block_home--contacts header .about_block .top_header_group .menu_burger .burger span:nth-child(2) { width: 32px; }
  .big_block_home--contacts header .about_block .top_header_group .menu_burger .burger span:nth-child(3) { width: 24px; }

  /* Info grid: full-bleed 1200, 3 cols 417/367/416, 2 rows 137/107 (mid+right) */
  .ct_info__grid { grid-template-columns: 417fr 367fr 416fr; }
  .ct_info__cell--mid .ct_info__row:first-child,
  .ct_info__cell--right .ct_info__row:first-child { flex: 137 0 0; }
  .ct_info__cell--mid .ct_info__row:last-child,
  .ct_info__cell--right .ct_info__row:last-child { flex: 107 0 0; }
  /* Labels/values bumped ~10% over the clamp() minimums that apply in this
     range (label 16→18, value 20→22) and social icons doubled (33→66) per
     editor request — BUT as fluid clamp()s, not fixed px: this block spans
     770–1200px and at iPad widths (~820px) the mid/right columns are ~200px
     wide, where a fixed 22px email wrapped mid-word ("inmoluxgrou p.com")
     and 66px icons overflowed the cell. Values hit the Figma sizes at 1200
     and shrink smoothly towards 770. */
  .ct_info__label { font-size: clamp(15px, 1.5vw, 18px); line-height: 130%; }
  .ct_info__value { font-size: clamp(15px, 1.85vw, 22px); line-height: 110%; letter-spacing: 0.02em; overflow-wrap: anywhere; }
  .ct_info__social { gap: clamp(10px, 1.5vw, 18px); margin-top: 0; flex-wrap: wrap; }
  .ct_info__social a { width: clamp(40px, 5.5vw, 66px); height: clamp(40px, 5.5vw, 66px); }
  .ct_info__social img { width: 100%; height: 100%; }
  /* Row min-height needs to grow so the bigger icons / text aren't clipped
     by the previous flex: 137/107 ratios from the Figma 1200 mock. */
  .ct_info__cell--mid .ct_info__row,
  .ct_info__cell--right .ct_info__row { min-height: 120px; }

  /* Map: card flows BELOW the map (no overlay) to avoid description
     overflowing the 472px wrap and bleeding into the inquiry section. */
  .ct_map { padding: 30px 60px 60px; }
  .ct_map__wrap { height: auto; max-width: 1081px; overflow: visible; }
  .ct_map__link {
    display: block;
    width: 100%;
    height: 472px;
    overflow: hidden;
  }
  .ct_map__marker { top: 112px; left: 534px; }
  .ct_map__pin { border-width: 1px; }
  .ct_map__pin::before { top: 2.5px; left: 2.5px; right: 2.5px; bottom: 2.5px; border-width: 1.2px; }
  .ct_map__addr { font-weight: 500; line-height: 120%; padding: 4px 8px; }
  .ct_map__card {
    position: relative;
    width: 100%;
    max-width: 1081px;
    height: auto;
    padding: 24px 28px;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    margin: 24px auto 0;
  }
  .ct_map__desc { max-width: 100%; }

  /* Inquiry: 1200×994 villa bg; white card 800×734 centered. Padding is
     scaled by clamp() in base; only layout-specific overrides remain. */
  .ct_inquiry__title { line-height: 110%; letter-spacing: 0.02em; }
  .ct_inquiry__sub { line-height: 110%; letter-spacing: 0.02em; }
  .ct_inquiry__field { border-width: 1px; }
  .ct_inquiry__btn { letter-spacing: 0.02em; }
}

/* =========================================================
   ADAPTIVE — 768px (tablet portrait)
   Pixel-perfect to Figma frame "768_Contacts" 768x2187
   Hero: title 35px Felidae 400 ls 2%
   Info: stays 3 columns at narrower padding
   Map card: title 20px Felidae 400, desc 12px Inter 300
   Inquiry: title 35px Felidae 400, sub 20px Felidae 400, lead 14px Inter 300
   Inquiry fields: 14px Inter 300, submit 12px Felidae ls 5%
   Inquiry disclaimer: 12px Inter 300 #a6a6a6
   ----------------------------------------------------------
   Breakpoint widened to 769px so the 3-column info grid stacks for the full
   "below 770" range (editor request: single column under 770px).
   ========================================================= */
@media (max-width: 769px) {
  /* Container override — beat buy.css padding:0 60px */
  .big_block_home.big_block_home--contacts > .container { padding: 0; }

  /* HEADER LAYOUT — collapse to mobile, keeping the top burger only. */
  .big_block_home--contacts header .about_block .top_header_group .menu_burger { display: flex !important; }

  /* Hero — header bottom y=53, breadcrumbs y=98 (gap 45), title y=129..168, info top y=189 */
  .ct_hero { padding: 45px 40px 21px; text-align: center; }
  .ct_hero__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; }
  .ct_hero__breadcrumbs {
    font-size: 12px;
    line-height: 130%;
    gap: 5px;
    margin-bottom: 15px;
    color: #A6A6A6;
  }
  .ct_hero__breadcrumbs a,
  .ct_hero__breadcrumbs span,
  .ct_hero__breadcrumbs .is-active { color: #A6A6A6; }

  /* Info: STACK to single column below 770px, fully centered. The previous
     3-col layout (275/231/262fr) collapsed any narrower viewport into
     unreadable strips where "Correo electrónico" overlapped phone numbers.
     Mirrors the 360 breakpoint pattern but applied across the whole sub-770
     range and all content (label / value / social row) is center-aligned. */
  .ct_info { padding: 0 20px; box-sizing: border-box; text-align: center; }
  .ct_info__grid { grid-template-columns: 1fr; min-height: auto; }
  .ct_info__cell { display: block; }
  .ct_info__cell--mid, .ct_info__cell--right { flex-direction: column; }
  .ct_info__cell + .ct_info__cell { border-left: none; border-top: 1.6px solid #E1E1E1; }
  .ct_info__cell--address .ct_info__inner,
  .ct_info__row .ct_info__inner { padding: 20px 16px; }
  .ct_info__row { min-height: auto; flex: none; align-items: center; justify-content: center; }
  .ct_info__row + .ct_info__row { border-top: 1.6px solid #E1E1E1; }
  .ct_info__cell--mid .ct_info__row:first-child,
  .ct_info__cell--mid .ct_info__row:last-child,
  .ct_info__cell--right .ct_info__row:first-child,
  .ct_info__cell--right .ct_info__row:last-child { min-height: auto; flex: none; }
  .ct_info__label { font-size: 15px; line-height: 130%; margin-bottom: 8px; color: #A6A6A6; text-align: center; }
  .ct_info__value { font-size: 16px; line-height: 120%; letter-spacing: 0.02em; text-align: center; }
  .ct_info__value + .ct_info__value { margin-top: 8px; }
  .ct_info__social { gap: 14px; margin-top: 4px; justify-content: center; }
  .ct_info__social a { width: 44px; height: 44px; }
  .ct_info__social img { width: 44px; height: 44px; }

  /* Map: image on top + card flowing BELOW it, everything centered.
     Editor request: below 770px the whole map section should match the
     centered single-column info block. Card overlay removed at this width. */
  .ct_map { padding: 20px 35px; text-align: center; }
  .ct_map__wrap {
    height: auto;
    min-height: 0;
    max-width: 500px;
    margin: 0 auto;
    overflow: visible;
  }
  .ct_map__link {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .ct_map__img { width: 100%; height: 100%; object-fit: cover; }
  .ct_map__marker {
    flex-direction: column;
    align-items: center;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    gap: 10px;
  }
  .ct_map__pin { width: 39px; height: 39px; border-width: 1px; }
  .ct_map__pin::before { top: 2.5px; left: 2.5px; right: 2.5px; bottom: 2.5px; border-width: 1.2px; }
  .ct_map__addr {
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
    padding: 4px 8px;
    background: #FFFFFF;
    color: #010101;
    text-align: center;
    white-space: normal;
  }
  .ct_map__card {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    padding: 20px 0 0;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    margin: 20px auto 0;
    background: transparent;
    text-align: center;
  }
  .ct_map__title { font-size: 22px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 12px; text-align: center; }
  .ct_map__desc { font-size: 14px; line-height: 140%; max-width: 100%; color: #3C3C3B; text-align: center; margin: 0 auto 16px; }
  .ct_map__cta { display: inline-flex; justify-content: center; margin: 0 auto; }

  /* Inquiry: 768×673 villa bg; white card 540×513 centered (80 top/bot) */
  .ct_inquiry { padding: 80px 30px; min-height: 673px; }
  .ct_inquiry__card { max-width: 540px; padding: 50px 37px; }
  .ct_inquiry__head { margin-bottom: 30px; padding-top: 0; }
  .ct_inquiry__title {
    font-size: 35px;
    line-height: 110%;
    letter-spacing: 0.02em;
    /* Figma title width 487 vs head content 467 (=540-37*2-2*head padding) — overflow head 10px each side */
    margin: 0 -10px 10px;
  }
  .ct_inquiry__sub {
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 auto 10px;
    max-width: 431px;
  }
  .ct_inquiry__lead { font-size: 14px; line-height: 130%; }
  .ct_inquiry__grid {
    grid-template-columns: 230px 230px;
    column-gap: 5px;
    row-gap: 0;
    margin-bottom: 30px;
  }
  .ct_inquiry__field { height: 44px; border-width: 1px; }
  .ct_inquiry__select {
    font-size: 14px;
    padding: 0 30px 0 15px;
    background-position: right 19px center;
    background-size: 10px 8px;
  }
  .ct_inquiry__check { font-size: 14px; line-height: 130%; margin-bottom: 15px; }
  .ct_inquiry__btn {
    height: 30px;
    font-size: 12px;
    line-height: 115%;
    letter-spacing: 0.05em;
    max-width: 469px;
    margin: 0 auto 15px;
  }
  .ct_inquiry__disclaimer {
    font-size: 12px;
    line-height: 130%;
    max-width: 442px;
    color: #A6A6A6;
  }
}

/* =========================================================
   ADAPTIVE — 360px (mobile)
   Pixel-perfect to Figma frame "360_Contacts" 360×3612
   ----------------------------------------------------------
   Header (logo+burger+lang+Consultation) y=0..~50, bottom_header HIDDEN.
   Breadcrumbs y=74 (14px Inter Light #a6a6a6) | Title y=125 (30px Felidae)
   Info y=188..663 STACKED 5 rows: Адрес/Телефон/Email/График/Соц.
       Each row 20px V padding, 20px L inset (35 abs from frame edge).
       Label 14px Inter Light #a6a6a6, value 14px #010101 line 110% ls 2%
   Map y=683..974 (290×291 IMG centered) + card y=994..1206 BELOW
       Pin 39×39 centered on map at (~119,90), addr label 14px Regular below
       Card title 20px Felidae, desc 14px Inter Light #3c3c3b
   Inquiry y=1306..2132 villa bg, card 310×666 #fafafa centered
       Title 30px Felidae 250w, Sub 14px Inter Light 250w (NO Felidae!)
       NO lead at 360 (hidden). 4 fields stacked 270×50 (row-gap 0).
       Check 14px Inter Light #010101. Submit 270×50 14px Felidae ls 5%
       Disclaimer 10px Inter Light #a6a6a6
   Footer y=2132..3612 (handled by style.css)
   ========================================================= */
@media (max-width: 360px) {
  /* Container override + hide bottom_header */
  .big_block_home.big_block_home--contacts > .container { padding: 0; }
  .big_block_home--contacts header .about_block .bottom_header { display: none; }

  /* Hero — header bottom y≈50, breadcrumbs y=74 (gap 24), title y=125..158, info y=188 */
  .ct_hero { padding: 24px 15px 30px; text-align: center; }
  .ct_hero__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; }
  .ct_hero__breadcrumbs {
    font-size: 14px;
    line-height: 130%;
    gap: 5px;
    margin-bottom: 30px;
    color: #A6A6A6;
  }
  .ct_hero__breadcrumbs a,
  .ct_hero__breadcrumbs span,
  .ct_hero__breadcrumbs .is-active { color: #A6A6A6; }

  /* Info: STACKED 5 rows with thin horizontal dividers (border-top between each).
     Address inset 20px L (35 abs - 15 outer padding = 20). Top/bot V padding 20.
     Label color #a6a6a6, value color #010101 14px ls 2% */
  .ct_info { padding: 0 15px; box-sizing: border-box; }
  .ct_info__grid { grid-template-columns: 1fr; min-height: auto; }
  .ct_info__cell { display: block; }
  .ct_info__cell--mid, .ct_info__cell--right { flex-direction: column; }
  .ct_info__cell + .ct_info__cell { border-left: none; border-top: 1.6px solid #E1E1E1; }
  .ct_info__cell--address .ct_info__inner,
  .ct_info__row .ct_info__inner { padding: 20px 20px 20px 20px; }
  .ct_info__row { min-height: auto; flex: none; align-items: flex-start; }
  .ct_info__row + .ct_info__row { border-top: 1.6px solid #E1E1E1; }
  .ct_info__cell--mid .ct_info__row:first-child,
  .ct_info__cell--mid .ct_info__row:last-child,
  .ct_info__cell--right .ct_info__row:first-child,
  .ct_info__cell--right .ct_info__row:last-child { min-height: auto; flex: none; }
  .ct_info__label { font-size: 14px; line-height: 130%; margin-bottom: 10px; color: #A6A6A6; }
  .ct_info__value { font-size: 14px; line-height: 110%; letter-spacing: 0.02em; }
  .ct_info__value + .ct_info__value { margin-top: 10px; }
  .ct_info__social { gap: 10px; margin-top: 0; }
  .ct_info__social a { width: 33px; height: 33px; }
  .ct_info__social img { width: 33px; height: 33px; }

  /* Map: 290×291 image centered + card 290 wide BELOW (no overlay).
     Pin 39 centered on map (top 90), addr label 14px Regular below pin */
  .ct_map { padding: 20px 35px; }
  .ct_map__wrap {
    height: auto;
    min-height: 0;
    max-width: 290px;
    margin: 0 auto;
    overflow: visible;
  }
  .ct_map__link {
    display: block;
    width: 100%;
    height: 291px;
    overflow: hidden;
  }
  .ct_map__img { height: 291px; width: 100%; object-fit: cover; }
  /* Pin local x=119 (Figma 154 abs - 35 wrap left). Address extends right of pin. */
  .ct_map__marker {
    flex-direction: column;
    align-items: flex-start;
    top: 90px;
    left: 119px;
    right: auto;
    gap: 10px;
  }
  .ct_map__pin { width: 39px; height: 39px; border-width: 1px; }
  .ct_map__pin::before { top: 2.5px; left: 2.5px; right: 2.5px; bottom: 2.5px; border-width: 1.2px; }
  /* At 360 the addr wraps to 2 lines (Figma w=112 h=34) */
  .ct_map__addr {
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
    padding: 0;
    background: transparent;
    color: #41545C;
    white-space: normal;
    width: 112px;
    text-align: left;
  }
  .ct_map__card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 290px;
    height: auto;
    margin: 20px auto 0;
    padding: 0;
    background: transparent;
  }
  .ct_map__title { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 10px; }
  .ct_map__desc { font-size: 14px; line-height: 130%; max-width: 100%; color: #3C3C3B; }

  /* Inquiry: 360×826 villa bg, card 310×666 #fafafa centered (top/bot 80px) */
  .ct_inquiry { padding: 80px 25px; min-height: 826px; }
  .ct_inquiry__card { max-width: 310px; padding: 43px 20px; background: #FAFAFA; }
  .ct_inquiry__head { margin-bottom: 30px; padding-top: 0; }
  .ct_inquiry__title {
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 auto 10px;
    max-width: 250px;
  }
  /* At 360 sub is INTER Light 14px (NOT Felidae) per Figma */
  .ct_inquiry__sub {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0;
    margin: 0 auto;
    max-width: 250px;
  }
  /* No "lead" at 360 — hide it */
  .ct_inquiry__lead { display: none; }
  /* 4 fields stacked single col, row-gap 0 (touching) */
  .ct_inquiry__grid {
    grid-template-columns: 1fr;
    row-gap: 0;
    column-gap: 0;
    margin-bottom: 30px;
    max-width: 270px;
    margin-left: auto;
    margin-right: auto;
  }
  .ct_inquiry__field { height: 50px; border-width: 1px; }
  .ct_inquiry__select {
    font-size: 14px;
    padding: 0 30px 0 15px;
    background-position: right 19px center;
    background-size: 10px 8px;
  }
  /* Check at 360 has color #010101 (full black, not #3c3c3b) */
  .ct_inquiry__check {
    font-size: 14px;
    line-height: 130%;
    color: #010101;
    margin-bottom: 15px;
    max-width: 270px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Submit 270×50 14px Felidae ls 5% line 150% */
  .ct_inquiry__btn {
    height: 50px;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.05em;
    max-width: 270px;
    margin: 0 auto 15px;
  }
  .ct_inquiry__disclaimer {
    font-size: 10px;
    line-height: 130%;
    max-width: 270px;
    color: #A6A6A6;
  }
}

/* =========================================================
   ANIMATION ENHANCEMENTS — contacts page
   Note: scroll-reveal classes (.anim-fade-up etc.) are now defined globally
   in style.css. Local overrides removed to prevent stacking-context conflicts
   that trapped lux-select dropdowns inside form fields.
   ========================================================= */

/* --- Inquiry parallax: JS-driven via --parallax modifier — no fixed bg --- */
.ct_inquiry--parallax {
  background-attachment: scroll;
  background-size: cover;
  background-position: center;
  will-change: background-position;
}

/* =========================================================
   MAP PIN — drop animation + continuous pulse
   ========================================================= */
.ct_map__pin {
  /* container retains existing static styles; we add the pulse halo */
}
.ct_map__pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid #41545C;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: ctPinPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ctPinPulse {
  0%   { transform: scale(0.8); opacity: 0.6; }
  70%  { opacity: 0.1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Marker fade-in when it becomes visible. We DO NOT translate it any more —
   the marker's top/left percentage is now editable per-page (ct_map_marker_x/y)
   and the previous translateY(-160px) drop-in could make it look like the pin
   was on the wrong location while the animation hadn't completed. */
body.js-anim-ready .ct_map__marker.anim-fade-up {
  opacity: 0;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
body.js-anim-ready .ct_map__marker.anim-fade-up.visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   MAP IMAGE — subtle zoom on hover
   ========================================================= */
/* NOTE: overflow:hidden on .ct_map__wrap is set in the BASE styles (top of file)
   so the @media (max-width:1200) override to overflow:visible can take effect
   for the card-flows-below layout. Do not re-declare it here. */
.ct_map__img {
  transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .ct_map__wrap:hover .ct_map__img {
    transform: scale(1.04);
  }
}

/* =========================================================
   INFO CELLS — hover lift + subtle bg shift + label deepens
   ========================================================= */
.ct_info__cell {
  transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ct_info__label {
  transition: color 0.35s ease, letter-spacing 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .ct_info__cell:hover {
    background-color: #FAFAFA;
  }
  .ct_info__cell:hover .ct_info__label {
    color: rgba(1, 1, 1, 0.85);
    letter-spacing: 0.04em;
  }
}

/* =========================================================
   SOCIAL ICONS — sequential entrance + hover lift
   ========================================================= */
.ct_info__social a {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}
@media (hover: hover) {
  .ct_info__social a:hover {
    transform: translateY(-6px) scale(1.05);
    opacity: 1;
  }
}

/* =========================================================
   INQUIRY FORM FIELDS — focus glow + lift
   ========================================================= */
.ct_inquiry__field {
  transition: border-color 0.35s ease,
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ct_inquiry__field:focus-within {
  border-color: #41545C;
  box-shadow: 0 8px 28px rgba(65, 84, 92, 0.12);
  transform: translateY(-2px);
}

/* Submit button: subtle scale + shadow on hover */
.ct_inquiry__btn {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .ct_inquiry__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(1, 1, 1, 0.18);
  }
}

/* =========================================================
   HERO TITLE — letter-stagger reveal
   Each letter fades up 30ms after the previous (CSS-only)
   ========================================================= */
.ct_hero__title {
  /* keep the unified anim-fade-up trigger; no custom JS needed */
}

@media (prefers-reduced-motion: reduce) {
  .ct_map__pin::after,
  body.js-anim-ready .ct_map__marker.anim-fade-up {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}