/* =========================================================
   CONTACTS PAGE — pixel-perfect to Figma 1920
   ========================================================= */

.big_block_home--contacts {
  background: #FFFFFF;
  height: auto;
  min-height: 0;
}
.big_block_home--contacts > .container {
  padding: 0;
  height: auto;
}
/* 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: 85px 96px 80px;
  text-align: center;
  background: #FFFFFF;
}
.ct_hero__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #C4C4C4;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 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: 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: 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: 24px 32px 24px 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: 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: 24px 32px 24px 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: 25px;
  line-height: 130%;
  color: rgba(1, 1, 1, 0.5);
  margin-bottom: 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: 32px;
  line-height: 120%;
  color: #010101;
  text-decoration: none;
  margin: 0;
  transition: color .2s;
}
a.ct_info__value:hover { color: #41545C; }
.ct_info__value + .ct_info__value { margin-top: 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: 18px;
  margin-top: 4px;
}
.ct_info__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  transition: opacity .2s;
}
.ct_info__social a:hover { opacity: 0.7; }
.ct_info__social img {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
}

/* =========================================================
   MAP BLOCK — Figma: 1920×845 (map 1730×755 with overlay card)
   ========================================================= */
.ct_map {
  background: #FFFFFF;
  padding: 64px 96px 96px;
}
.ct_map__wrap {
  position: relative;
  width: 100%;
  max-width: 1730px;
  margin: 0 auto;
  height: 755px;
}
.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: 19px;
  z-index: 4;
  pointer-events: none;
}
.ct_map__pin {
  width: 62px;
  height: 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: 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: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: 795px;
  max-width: calc(100% - 128px);
  padding: 48px;
  background: #FAFAFA;
  z-index: 500;
}
.ct_map__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 16px;
}
.ct_map__desc {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
  max-width: 712px;
}

/* =========================================================
   INQUIRY BLOCK — Figma 1920×1608: villa bg + 1280×1208 white card
   ========================================================= */
.ct_inquiry {
  position: relative;
  width: 100%;
  min-height: 1608px;
  background: #2A2A2A center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200px 96px;
  box-sizing: border-box;
}
.ct_inquiry__card {
  position: relative;
  width: 100%;
  max-width: 1280px;
  background: #FFFFFF;
  padding: 96px 48px;
  box-sizing: border-box;
}
.ct_inquiry__head {
  text-align: center;
  margin-bottom: 64px;
  padding-top: 0;
}
.ct_inquiry__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 80px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 0 32px;
  /* Figma title is 1328 wide while card is 1280 — let it overflow card padding slightly */
  margin-left: -24px;
  margin-right: -24px;
}
.ct_inquiry__sub {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 auto 24px;
  max-width: 1088px;
}
.ct_inquiry__lead {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
}
/* Form */
.ct_inquiry__form {
  width: 100%;
}
.ct_inquiry__grid {
  display: grid;
  grid-template-columns: 504px 514px;
  column-gap: 64px;
  row-gap: 48px;
  justify-content: center;
  margin-bottom: 48px;
}
/* Each field is a bordered box wrapping a custom-styled select */
.ct_inquiry__field {
  position: relative;
  display: block;
  border: 2px solid #E1E1E1;
  padding: 0;
  height: 112px;
}
.ct_inquiry__select {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 1;
  color: #3C3C3B;
  padding: 0 56px 0 40px;
  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 32px center;
  background-size: 24px 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; }

/* Custom .lux-select wrapper (built by main.js around the native select).
   Without these styles the wrapper has no visible appearance and the native
   <select> opens on label click — that's the ugly browser dropdown. Match
   the field's intended look. */
.ct_inquiry__field .lux-select {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 56px 0 40px;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 1;
  color: #3C3C3B;
  cursor: pointer;
}
.ct_inquiry__field .lux-select__trigger {
  padding: 0;
  color: #3C3C3B;
}
.ct_inquiry__field .lux-select__value {
  color: #3C3C3B;
}
.ct_inquiry__field .lux-select__value.is-placeholder {
  color: #3C3C3B;
}
.ct_inquiry__field .lux-select__arrow {
  right: 32px;
  width: 24px;
  height: 18px;
  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-size: 24px 18px;
}
.ct_inquiry__field:hover .lux-select__arrow,
.ct_inquiry__field .lux-select.is-open .lux-select__arrow {
  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>");
}

/* Checkmark microtext */
.ct_inquiry__check {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #3C3C3B;
  text-align: center;
  margin: 0 0 24px;
}
/* Submit button — dark teal, white text */
.ct_inquiry__btn {
  display: block;
  width: 100%;
  max-width: 1184px;
  height: 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: 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: 18px;
  line-height: 130%;
  color: #C3C3C3;
  text-align: center;
  margin: 0 auto;
  max-width: 552px;
}

/* =========================================================
   ADAPTIVE — 1200px breakpoint (small desktop / large tablet)
   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). Pin 39 at (534,112). Card 497 right=50 top=171
   Inquiry y=1171..2165 (1200×994). Card 800×734 centered (130 top/bot)
       Title 50px 830w (overflows card by 15 each side, margin -45)
       Sub 28px (680w) — Lead 16px (537w)
       Fields 365×70 grid 2×2 col-gap 10. Submit 740×50.
   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; }

  /* Hero — header bottom y=107, breadcrumbs y=149, title y=190..245, info top y=295 */
  .ct_hero { padding: 42px 60px 50px; text-align: center; }
  .ct_hero__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; }
  .ct_hero__breadcrumbs { font-size: 16px; gap: 6px; margin-bottom: 20px; }

  /* 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; min-height: 244px; }
  .ct_info__cell--address .ct_info__inner { padding: 20px 24px 24px 78px; }
  .ct_info__row .ct_info__inner { padding: 20px 24px 24px 21px; }
  .ct_info__label { font-size: 16px; line-height: 130%; margin-bottom: 10px; }
  .ct_info__value { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; }
  .ct_info__value + .ct_info__value { margin-top: 15px; }
  .ct_info__cell--mid .ct_info__row:first-child,
  .ct_info__cell--right .ct_info__row:first-child { min-height: 137px; flex: 137 0 0; }
  .ct_info__cell--mid .ct_info__row:last-child,
  .ct_info__cell--right .ct_info__row:last-child { min-height: 107px; flex: 107 0 0; }
  .ct_info__row { align-items: flex-start; }
  .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: 1081×472 wrap; pin 39 at (534,112); card 497×253 at right=50 top=171.
     Inquiry padding-top:130 handles the 130px gap below map. */
  .ct_map { padding: 30px 60px 0; }
  .ct_map__wrap { height: 472px; max-width: 1081px; }
  .ct_map__marker { top: 112px; left: 534px; gap: 12px; }
  .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: 16px; font-weight: 500; line-height: 120%; padding: 4px 8px; }
  .ct_map__card {
    width: 497px;
    height: 253px;
    padding: 20px 32px 20px 20px;
    top: 171px;
    right: 50px;
    transform: none;
  }
  .ct_map__title { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 10px; }
  .ct_map__desc { font-size: 16px; line-height: 130%; max-width: 445px; }

  /* Inquiry: 1200×994 villa bg; white card 800×734 centered */
  .ct_inquiry { padding: 130px 60px; min-height: 994px; }
  .ct_inquiry__card { max-width: 800px; padding: 60px 30px; }
  .ct_inquiry__head { margin-bottom: 53px; }
  .ct_inquiry__title {
    font-size: 50px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 -45px 30px;
  }
  .ct_inquiry__sub {
    font-size: 28px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 auto 15px;
    max-width: 680px;
  }
  .ct_inquiry__lead { font-size: 16px; line-height: 130%; }
  .ct_inquiry__grid {
    grid-template-columns: 365px 365px;
    column-gap: 10px;
    row-gap: 0;
    margin-bottom: 51px;
  }
  .ct_inquiry__field { height: 70px; border-width: 1px; }
  .ct_inquiry__select {
    font-size: 16px;
    padding: 0 50px 0 25px;
    background-position: right 35px center;
    background-size: 15px 12px;
  }
  .ct_inquiry__field .lux-select {
    font-size: 16px;
    padding: 0 50px 0 25px;
  }
  .ct_inquiry__field .lux-select__arrow {
    right: 35px;
    width: 15px;
    height: 12px;
    background-size: 15px 12px;
  }
  .ct_inquiry__check { font-size: 16px; line-height: 130%; margin-bottom: 5px; }
  .ct_inquiry__btn {
    height: 50px;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    max-width: 740px;
    margin: 0 auto 25px;
  }
  .ct_inquiry__disclaimer { font-size: 12px; line-height: 130%; max-width: 345px; }
}

/* =========================================================
   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
   ========================================================= */
@media (max-width: 768px) {
  /* Container override — beat buy.css padding:0 60px */
  .big_block_home.big_block_home--contacts > .container { padding: 0; }

  /* 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: Figma 768 keeps 3 cols 275/231/262 (full-bleed). Top row 88, bottom 71.
     Address inset 50px, mid/right 10px from col edge. Labels 14px #a6a6a6, values 14px #010101 */
  .ct_info__grid {
    grid-template-columns: 275fr 231fr 262fr;
    min-height: 159px;
  }
  .ct_info__cell + .ct_info__cell { border-left: 1.6px solid #E1E1E1; border-top: none; }
  .ct_info__cell--address .ct_info__inner { padding: 11px 16px 14px 50px; }
  .ct_info__row .ct_info__inner { padding: 10px 12px 12px 10px; }
  .ct_info__label { font-size: 14px; line-height: 130%; margin-bottom: 6px; color: #A6A6A6; }
  .ct_info__value { font-size: 14px; line-height: 110%; letter-spacing: 0.02em; }
  .ct_info__value + .ct_info__value { margin-top: 5px; }
  .ct_info__cell--mid .ct_info__row:first-child,
  .ct_info__cell--right .ct_info__row:first-child { min-height: 88px; flex: 88 0 0; }
  .ct_info__cell--mid .ct_info__row:last-child,
  .ct_info__cell--right .ct_info__row:last-child { min-height: 71px; flex: 71 0 0; }
  .ct_info__row { align-items: flex-start; min-height: 0; }
  .ct_info__social { gap: 6px; margin-top: 0; }
  .ct_info__social a { width: 22px; height: 22px; }
  .ct_info__social img { width: 22px; height: 22px; }

  /* Map: 688×328; pin 25 at (342,72); card 318×195 right=28 top=110 */
  .ct_map { padding: 10px 40px 0; }
  .ct_map__wrap { height: 328px; max-width: 688px; }
  .ct_map__marker { top: 72px; left: 342px; gap: 8px; transform: none; }
  .ct_map__pin { width: 25px; height: 25px; border-width: 1px; }
  .ct_map__pin::before { top: 1.5px; left: 1.5px; right: 1.5px; bottom: 1.5px; border-width: 1px; }
  .ct_map__addr { font-size: 14px; font-weight: 500; line-height: 120%; padding: 4px 6px; }
  .ct_map__card {
    position: absolute;
    width: 318px;
    height: 195px;
    max-width: none;
    padding: 13px 18px 13px 13px;
    top: 110px;
    right: 28px;
    transform: none;
    margin-top: 0;
  }
  .ct_map__title { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; margin: 0 0 6px; }
  .ct_map__desc { font-size: 12px; line-height: 130%; max-width: 285px; }

  /* 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__field .lux-select {
    font-size: 14px;
    padding: 0 30px 0 15px;
  }
  .ct_inquiry__field .lux-select__arrow {
    right: 19px;
    width: 10px;
    height: 8px;
    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;
  }
  .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;
  }
  .ct_inquiry__field .lux-select {
    font-size: 14px;
    padding: 0 30px 0 15px;
  }
  .ct_inquiry__field .lux-select__arrow {
    right: 19px;
    width: 10px;
    height: 8px;
    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 drop-in when it becomes visible */
body.js-anim-ready .ct_map__marker.anim-fade-up {
  transform: translateY(-160px) scale(1.15);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.34, 1.42, 0.64, 1);
}
body.js-anim-ready .ct_map__marker.anim-fade-up.visible {
  transform: translateY(0) scale(1);
}

/* =========================================================
   MAP IMAGE — subtle zoom on hover
   ========================================================= */
.ct_map__wrap { overflow: hidden; }
.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;
  }
}