/* =========================================================
   SELL PAGE — sell.html
   Matches Figma: 1920 frame
   ========================================================= */

/* ---------- Grid frame: 1920 cap, no vertical side lines (removed 2026-07) ---------- */
/* Sell page is framed to 1920 max. Horizontal lines are simple border-bottom
   on the specific section / row that needs them. */
.wrapper {
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
  /* Override style.css's `overflow: clip` so full-bleed sections (e.g. the
     eval dark photo) can extend past the 1920px-capped wrapper to the
     real viewport edges via `width: 100vw + margin: calc(50% - 50vw)`.
     Without this, viewport > 1920 leaves a white strip on each side. */
  overflow: visible;
}
/* sell.css is only enqueued on page-sell.php (see functions.php), so this
   body rule applies only here. Move the horizontal-overflow clip up one
   level so the sell page never gets a horizontal scrollbar from the
   full-bleed sections breaking out of the 1920-capped wrapper. body owns
   the scrolling context, not the wrapper. */
body {
  overflow-x: clip;
}
/* Footer full-bleed (sell page only — this rule is scoped via sell.css load).
   The dark teal background on <footer> needs to reach the real viewport
   edges, otherwise viewport >1920 leaves white strips on each side. The
   inner .container's max-width: 1758 still centers footer content as
   before, only the dark background is now edge-to-edge. */
footer {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Extend the header's horizontal line all the way to the wrapper borders so the
   four corners meet perfectly, without the old 96px gap. Negative margins pull
   the box out of the container's padding; matching padding re-indents the text. */
.big_block_home--sell .top_header_group {
  margin-left: clamp(-96px, -5vw, -50px);
  margin-right: clamp(-96px, -5vw, -50px);
  padding-left: clamp(50px, 5vw, 96px);
  padding-right: clamp(50px, 5vw, 96px);
  box-sizing: border-box;
}

/* ---------- Neutralize index.html "big_block_home" 400vh sticky hero; white bg ---------- */
.big_block_home.big_block_home--sell {
  position: relative;
  height: auto;
  background: #FFFFFF;
}
.big_block_home.big_block_home--sell > .container {
  height: auto;
  max-width: 1920px;
  padding: 0 clamp(50px, 5vw, 96px);
}
.big_block_home.big_block_home--sell header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10;
  padding-top: 25px;
}
/* Header color overrides — match / exceed specificity of style.css (which sets
   color:#FFFFFF on these selectors for index.html's dark hero). On sell.html the
   header sits on a white background, so every text / icon / border is recoloured
   to #010101. */
.big_block_home--sell header .about_block .top_header_group .menu ul li a,
.big_block_home--sell header .about_block .top_header_group .menu_burger .lang_select select,
.big_block_home--sell header .about_block .top_header_group .right_contacts .phone_number,
.big_block_home--sell header .about_block .top_header_group .right_contacts .lang_select select,
.big_block_home--sell header .about_block .top_header_group .right_contacts .consultation,
.big_block_home--sell header .about_block .top_header_group .right_contacts .lang-dropdown .lang-dropdown-btn,
.big_block_home--sell header .about_block .top_header_group .right_contacts .lang-dropdown .lang-arrow,
.big_block_home--sell header .about_block .bottom_header .menu ul li a,
.big_block_home--sell header .about_block .bottom_header .menu_burger,
.big_block_home--sell header .about_block .bottom_header .menu_burger span {
  color: #010101;
}
.big_block_home--sell header .about_block .top_header_group .menu_burger .burger span,
.big_block_home--sell header .about_block .bottom_header .menu_burger .burger span {
  background: #010101;
}
.big_block_home--sell header .about_block .top_header_group .right_contacts .consultation {
  border-color: #010101;
}
.big_block_home--sell header .about_block .top_header_group {
  border-bottom-color: #010101;
}
.big_block_home--sell header .about_block .top_header_group .right_contacts .whatsapp svg path {
  stroke: #010101;
}
.big_block_home--sell header .about_block .top_header_group .menu ul li a:hover,
.big_block_home--sell header .about_block .bottom_header .menu ul li a:hover { opacity: 0.7; color: #010101; }
.big_block_home--sell header .logo img { filter: brightness(0); }
/* Mega-menu logo: keep original colors (override brightness(0) above) */
.big_block_home--sell header .mega-menu .logo img { filter: none; }

/* =========================================================
   1. HERO (white bg) — pixel-accurate to Figma 1920 frame
   ========================================================= */
.sell_hero {
  padding: clamp(60px, 6vw, 117px) 0 0;
  color: #010101;
}
.sell_hero__breadcrumbs {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 8px);
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #C4C4C4;
  margin-bottom: clamp(20px, 2vw, 33px);
}
.sell_hero__breadcrumbs a { color: #C4C4C4; text-decoration: none; }
.sell_hero__breadcrumbs a:hover { color: #010101; }
.sell_hero__breadcrumbs span { color: #C4C4C4; }
.sell_hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 573px);
  grid-template-rows: auto auto;
  gap: 0;
  align-items: start;
  /* Rows keep their natural height; the leftover space reserved by min-height
     below stays at the bottom instead of stretching them (default `normal`
     stretches auto rows and would push the CTA down). */
  align-content: start;
  /* The photo is absolutely positioned, so it adds nothing to the grid height.
     With a short title (EN/ES wrap to 2 lines instead of RU's 5) the text
     column ended shorter than the photo and the photo spilled over the stats
     row. Reserve exactly the photo's footprint — its height plus its negative
     top offset — so it can never overlap what follows, in any language. */
  min-height: calc(clamp(460px, 36vw, 685px) + clamp(-40px, -2vw, -10px));
  position: relative;
}
.sell_hero__text {
  padding-top: 0;
  grid-column: 1;
  grid-row: 1;
}
.sell_hero__text h1 {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  /* Figma: outside stroke #010101 / 0.16px */
  -webkit-text-stroke: 0.16px #010101;
  margin-bottom: clamp(20px, 2vw, 32px);
  max-width: 1157px;
  text-transform: uppercase;
}
/* Default: desktop line-breaks visible, mobile-only breaks hidden.
   Mobile media query flips this to match Figma 360 line wrapping. */
.sell_hero__text h1 .brk-mob { display: none; }
.sell_hero__text h1 .brk-desk { display: inline; }
.sell_hero__text p {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 1.1vw + 14.8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  /* Figma 1920_sell: outside stroke #000000 0.2px on the subtitle */
  -webkit-text-stroke: 0.2px #000000;
  max-width: 1037px;
  margin-bottom: clamp(56px, 7vw, 141px);
}
.sell_hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Span both grid columns so the button sits below the title+photo block,
     full content width, and is no longer hidden behind the absolute photo. */
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: 1085px;
  height: clamp(60px, 4vw, 80px);
  padding: 0 clamp(28px, 2.7vw, 52px);
  margin-top: clamp(20px, 2vw, 32px);
  background: transparent;
  color: #010101;
  border: 1px solid #010101;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(16px, 0.7vw + 7px, 25px);
  line-height: 150%;
  letter-spacing: 0.05em;
  /* Figma: CTA text in uppercase */
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.sell_hero__cta:hover { background: #010101; color: #FFFFFF; }
.sell_hero__photo {
  position: absolute;
  /* Aligns photo bottom with the CTA button row per client feedback */
  top: clamp(-40px, -2vw, -10px);
  right: 0;
  width: clamp(380px, 30vw, 573px);
  height: clamp(460px, 36vw, 685px);
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
}
.sell_hero__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.sell_hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   2. STATS (white bg)
   ========================================================= */
.sell_stats {
  padding: 0;
  color: #010101;
  margin-top: clamp(48px, 5vw, 80px);
}
.sell_stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1.6px solid #E1E1E1;
  border-bottom: 1.6px solid #E1E1E1;
  padding: clamp(28px, 2.5vw, 41px) 0 clamp(24px, 2vw, 35px);
}
.sell_stat {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 clamp(20px, 2vw, 36px);
  border-right: 1.6px solid #E1E1E1;
  align-items: center;
  text-align: center;
}
.sell_stat:first-child { padding-left: clamp(20px, 2vw, 36px); }
.sell_stat:last-child { border-right: 0; }
.sell_stat b {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  /* Figma 1920_sell: digits 50px Felidae 400 with 0.5px stroke */
  font-size: 50px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  -webkit-text-stroke: 0.5px #010101;
  margin-bottom: clamp(80px, 9vw, 193px);
  text-transform: uppercase;
  /* Felidae defaults to old-style figures, so digits like 3/5/7/9 drop
     below the baseline (the "7" in "DESDE 7 DÍAS" looked like a step down).
     Force lining figures so every digit sits on the baseline. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
  /* Keep "ОТ 7 ДНЕЙ" on a single line per Figma */
  white-space: nowrap;
}
.sell_stat b em {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-style: normal;
  /* Figma: % is 44px Inter Light (smaller than the Felidae digits) */
  font-size: 44px;
  /* Reset any inherited stroke so the % stays light */
  -webkit-text-stroke: 0 transparent;
}
.sell_stat span {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  max-width: 500px;
}

/* =========================================================
   3. OWNER INTERESTS — 3-card accordion (exact Figma match)
   ========================================================= */
.sell_owner {
  padding: clamp(60px, 7vw, 160px) 0 0;
  background: #FFFFFF;
}
.sell_owner__header {
  max-width: 1482px;
  margin: 0 auto clamp(24px, 2.5vw, 48px);
  padding: 0 20px;
  text-align: center;
}
.sell_owner__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 100%;
  letter-spacing: 0.02em;
  color: #010101;
  margin-bottom: clamp(24px, 2.5vw, 48px);
  text-transform: uppercase;
  max-width: 1482px;
}
.sell_owner__sub {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  max-width: 1482px;
}
.sell_owner__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(16px, 1.7vw, 32px);
  max-width: 1728px;
  margin: 0 auto;
  padding: clamp(32px, 3.2vw, 49px) clamp(50px, 5vw, 96px);
  border-top: 1.6px solid #E1E1E1;
  border-bottom: 1.6px solid #E1E1E1;
}
.sell_owner__card {
  display: flex;
  flex-direction: column;
  min-height: clamp(400px, 33vw, 643px);
}
/* Pagination dots injected by sell-animations.js for the phone swipe
   carousel — the grid layout on tablet/desktop has no use for them. */
.sell_owner__dots {
  display: none;
}
.sell_owner__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 1.2vw, 24px);
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  margin-bottom: clamp(20px, 2vw, 35px);
  /* min-height sized to fit a 3-line title at any viewport so all 3 cards
     stay vertically aligned even when one title is longer than the others
     (e.g. "Владельцу доходного объекта" wraps to 3 lines). */
  min-height: clamp(92px, 6vw + 20px, 145px);
}
.sell_owner__name {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  /* Figma 1920_sell: 1920/H2 — 44px Felidae 400 + outside stroke 0.32px */
  font-size: clamp(28px, 1.7vw + 8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #C4C4C4;
  -webkit-text-stroke: 0.32px #C4C4C4;
  transition: color .25s, -webkit-text-stroke-color .25s;
  flex: 1;
}
.sell_owner__card.is-open .sell_owner__name {
  color: #010101;
  -webkit-text-stroke: 0.32px #010101;
}
/* Bi-colour title: the generic first line ("Para propietarios") keeps the
   default grey/black state colour; the second line (the property type) takes
   the brand accent — matching the home "Propiedades que <span>merece la pena
   mostrar</span>" treatment (teal + italic). Its own colour wins over the
   inherited open/closed name colour in every state. */
.sell_owner__name--accent {
  color: #41545C;
  -webkit-text-stroke: 0.32px #41545C;
  font-style: italic;
}
.sell_owner__ico {
  position: relative;
  flex-shrink: 0;
  width: clamp(28px, 2vw, 37px);
  height: clamp(28px, 2vw, 37px);
  border: 1px solid #C4C4C4;
  border-radius: 50%;
  transition: border-color .25s, background .25s;
}
.sell_owner__ico::before,
.sell_owner__ico::after {
  content: "";
  position: absolute;
  background: #C4C4C4;
  transition: transform .25s, background .25s;
}
.sell_owner__ico::before {
  top: 50%;
  left: 50%;
  width: clamp(12px, 1vw, 18px);
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.sell_owner__ico::after {
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: clamp(12px, 1vw, 18px);
  transform: translate(-50%, -50%);
}
.sell_owner__card.is-open .sell_owner__ico {
  background: #41545C;
  border-color: #41545C;
}
.sell_owner__card.is-open .sell_owner__ico::before,
.sell_owner__card.is-open .sell_owner__ico::after { background: #FFFFFF; }
.sell_owner__card.is-open .sell_owner__ico::after { transform: translate(-50%, -50%) scaleY(0); }
.sell_owner__body {
  flex: 1;
  position: relative;
  /* The content stays in flow so the body's height is always the
     content's natural height — stable in both states, zero bounce.
     The photo is absolute on top and crossfades against the content. */
  min-height: clamp(290px, 25vw, 480px);
}
.sell_owner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  /* Closing direction: photo fades back IN with a small delay so the
     content fades out first. */
  transition: opacity 0.45s ease 0.15s;
}
.sell_owner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sell_owner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  /* Closing direction: content fades OUT immediately. */
  transition: opacity 0.45s ease;
}
.sell_owner__desc {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  max-width: 533px;
  margin: 0 0 clamp(16px, 1.4vw, 24px);
}
.sell_owner__what {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 1vw + 8px, 32px);
  line-height: 120%;
  color: #3C3C3B;
  margin: 0 0 clamp(16px, 1.4vw, 24px);
  letter-spacing: 0;
  /* Push the "Что делаем мы" block to the bottom of the card so its baseline
     aligns with the bottom of the photo previews in the other (closed) cards. */
  margin-top: auto;
}
.sell_owner__text {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  max-width: 533px;
  margin: 0;
}
/* Open state: photo fades OUT (no delay) so the content fade-in follows. */
.sell_owner__card.is-open .sell_owner__photo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.sell_owner__card.is-open .sell_owner__content {
  opacity: 1;
  pointer-events: auto;
  /* Opening direction: content fades IN with a small delay so the photo
     fades out first. */
  transition: opacity 0.5s ease 0.15s;
}

/* =========================================================
   4. EVALUATION (dark image bg + white content card)
   ========================================================= */
.sell_eval {
  padding: clamp(60px, 7vw, 160px) 0 0;
  background: #FFFFFF;
}
.sell_eval__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-align: center;
  margin: 0 auto clamp(40px, 4.2vw, 80px);
  max-width: 1456px;
  padding: 0 20px;
  text-transform: uppercase;
}
.sell_eval__body {
  position: relative;
  /* Full-bleed via negative side margins so the dark photo always reaches
     the viewport edges regardless of parent padding/scrollbar/admin-bar.
     Can't use `transform: translateX()` here — the .anim-scale animation
     resets transform via `transform: none` on `.visible` (line 1015) which
     would wipe it out, leaving the body shifted by `left:50%` only. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(500px, 44vw, 837px);
  background-color: #D9D9D9;
  background-image: url('../images/sell/eval_bg.avif');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sell_eval__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.25) 100%);
}
.sell_eval__content {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(64px, 7.5vw, 144px) clamp(50px, 5vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 2vw, 40px);
  align-items: start;
  justify-content: space-between;
}
.sell_eval__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sell_eval__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  padding: 0 0 clamp(24px, 2.5vw, 48px);
  margin-bottom: clamp(24px, 2.5vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.4);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: opacity .25s;
}
.sell_eval__item:first-child { border-top: 1px solid rgba(255,255,255,.4); padding-top: clamp(24px, 2.5vw, 48px); }
.sell_eval__item:last-child { margin-bottom: 0; }
.sell_eval__item h3 {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 1.7vw + 8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin: 0;
  transition: opacity .25s;
}
.sell_eval__item:not(.is-active) h3 { opacity: 0.55; }
.sell_eval__item:not(.is-active):hover h3 { opacity: 0.85; }
.sell_eval__dot {
  width: clamp(8px, 0.7vw, 11px);
  height: clamp(8px, 0.7vw, 11px);
  background: #FFFFFF;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .25s;
}
.sell_eval__item.is-active .sell_eval__dot { opacity: 1; }
.sell_eval__right {
  background: #FFFFFF;
  padding: clamp(32px, 3.5vw, 64px);
  width: 100%;
  max-width: 864px;
  justify-self: end;
  min-width: 0;
}
.sell_eval__rBlock { margin-bottom: clamp(24px, 2.5vw, 48px); }
.sell_eval__rBlock:last-child { margin-bottom: 0; }
.sell_eval__rTitle {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 1.7vw + 8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #3C3C3B;
  margin: 0 0 clamp(14px, 1.4vw, 24px);
}
.sell_eval__rSub {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 1vw + 8px, 32px);
  line-height: 120%;
  color: #3C3C3B;
  margin: 0 0 clamp(14px, 1.4vw, 24px);
}
.sell_eval__rText {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
}
.sell_eval__rBlock:last-child .sell_eval__rText { text-transform: none; }
/* Mobile-only inline image inside the eval right card — hidden on desktop. */
.sell_eval__rImg { display: none; }
/* Mobile-only inline image between process steps 03 and 04 — hidden on desktop. */
.sell_process__img { display: none; }
/* Generic mobile-only line-break helper inside CTA description. Hidden by default. */
.sell_cta__sub .brk-mob { display: none; }
/* Mobile-only "Show all questions" button under the FAQ list — hidden on desktop. */
.sell_faq__more { display: none; }
/* Mobile-only closing villa image at the very bottom of sell.html (Figma 360_sell). */
.sell_outro { display: none; }
.sell_eval__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1730px;
  height: clamp(64px, 5vw, 96px);
  margin: clamp(32px, 3vw, 48px) auto 0;
  background: #41545C;
  color: #FFFFFF;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(16px, 0.7vw + 7px, 25px);
  line-height: 150%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s;
}
.sell_eval__cta:hover { background: #010101; }

/* =========================================================
   5. PROCESS STEPS (5-step grid with big first card)
   ========================================================= */
.sell_process {
  padding: clamp(60px, 7vw, 160px) 0 0;
  background: #FFFFFF;
}
.sell_process__header {
  max-width: 1634px;
  margin: 0 auto clamp(48px, 5vw, 96px);
  padding: 0 20px;
  text-align: center;
}
.sell_process__header h2 {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 clamp(16px, 2vw, 32px);
  text-transform: uppercase;
}
/* Desktop: long title/subtitle visible; mobile-specific spans hidden.
   Mobile @media flips this so the shorter Figma-360 wording is shown. */
.sell_process__header .brk-desk { display: inline; }
.sell_process__header .brk-mob  { display: none; }
.sell_process__header p {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 1.1vw + 14.8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0;
}
.sell_process__grid {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(50px, 5vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0;
  position: relative;
  border-top: 1.6px solid #E1E1E1;
  border-bottom: 1.6px solid #E1E1E1;
}
.sell_process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 52px) clamp(20px, 2vw, 32px) clamp(28px, 3vw, 52px) clamp(24px, 2.5vw, 48px);
  cursor: pointer;
  min-width: 0;
  transition: color .25s;
}
.sell_process__step[data-step="1"] {
  grid-column: 1 / span 2;
  grid-row: 1;
  border-right: 1.6px solid #E1E1E1;
}
.sell_process__step[data-step="2"] {
  grid-column: 3;
  grid-row: 1;
}
.sell_process__step[data-step="3"] {
  grid-column: 1;
  grid-row: 2;
  border-top: 1.6px solid #E1E1E1;
  border-right: 1.6px solid #E1E1E1;
}
.sell_process__step[data-step="4"] {
  grid-column: 2;
  grid-row: 2;
  border-top: 1.6px solid #E1E1E1;
  border-right: 1.6px solid #E1E1E1;
}
.sell_process__step[data-step="5"] {
  grid-column: 3;
  grid-row: 2;
  border-top: 1.6px solid #E1E1E1;
}
.sell_process__num {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  color: #CDCDCD;
  letter-spacing: 0.02em;
  margin-bottom: clamp(14px, 1.4vw, 24px);
  transition: color .25s;
}
.sell_process__step h3 {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 0.5vw + 22px, 32px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 auto;
  padding-bottom: clamp(24px, 2.5vw, 48px);
  max-width: 100%;
}
.sell_process__step p {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 0.3vw + 12px, 16px);
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
  max-width: 100%;
}
.sell_process__step.is-active .sell_process__num { color: #41545C; }

/* =========================================================
   6. PHOTO GALLERY (5 photos, 3 rows)
   ========================================================= */
.sell_gallery {
  padding: clamp(60px, 7vw, 160px) clamp(50px, 5vw, 96px) 0;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 32px);
}
.sell_gallery__row { display: grid; gap: clamp(16px, 1.7vw, 32px); }
.sell_gallery__row--wide-left { grid-template-columns: minmax(0, 1125fr) minmax(0, 571fr); justify-content: space-between; }
.sell_gallery__row--wide-right { grid-template-columns: minmax(0, 571fr) minmax(0, 1125fr); justify-content: space-between; }
.sell_gallery__row--full { grid-template-columns: 1fr; }
.sell_gallery__cell { overflow: hidden; }
.sell_gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Slavinskaia-style mask reveal: img scales from 1.08 → 1 when cell is visible */
body.js-anim-ready .sell_gallery__cell.anim-scale img {
  transform: scale(1.08);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
body.js-anim-ready .sell_gallery__cell.anim-scale.visible img {
  transform: scale(1);
}
.sell_gallery__cell--wide { aspect-ratio: 1125 / 848; }
.sell_gallery__cell--narrow { aspect-ratio: 571 / 848; }
.sell_gallery__cell--full { aspect-ratio: 1730 / 848; }

/* =========================================================
   7. FAQ (7 questions, exact Figma match)
   ========================================================= */
.sell_faq {
  padding: clamp(60px, 7vw, 160px) 0 0;
  background: #FFFFFF;
}
.sell_faq__header {
  max-width: 1474px;
  margin: 0 auto clamp(40px, 4.2vw, 80px);
  padding: 0 20px;
  text-align: center;
}
.sell_faq__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 clamp(16px, 2vw, 32px);
  text-transform: uppercase;
}
.sell_faq__sub {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.sell_faq__list {
  max-width: 1730px;
  margin: 0 auto;
  padding: 0 clamp(50px, 5vw, 96px);
  list-style: none;
}
.sell_faq__item {
  border-top: 1.6px solid #E1E1E1;
}
.sell_faq__item:last-child { border-bottom: 1.6px solid #E1E1E1; }
.sell_faq__head {
  width: 100%;
  background: transparent;
  border: 0;
  padding: clamp(28px, 3vw, 55px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.2vw, 20px);
  text-align: left;
  cursor: pointer;
}
.sell_faq__head span {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1vw + 8px, 32px);
  line-height: 120%;
  color: #010101;
  max-width: 1400px;
  text-transform: uppercase;
}
.sell_faq__head i {
  position: relative;
  width: clamp(28px, 2vw, 37px);
  height: clamp(28px, 2vw, 37px);
  flex-shrink: 0;
  border: 1px solid #010101;
  border-radius: 50%;
  transition: background .25s, border-color .25s;
}
.sell_faq__head i::before,
.sell_faq__head i::after {
  content: "";
  position: absolute;
  background: #010101;
  transition: transform .3s, background .25s;
}
.sell_faq__head i::before {
  top: 50%;
  left: 50%;
  width: clamp(12px, 1vw, 18px);
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.sell_faq__head i::after {
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: clamp(12px, 1vw, 18px);
  transform: translate(-50%, -50%);
}
.sell_faq__item.is-open .sell_faq__head i {
  background: #41545C;
  border-color: #41545C;
}
.sell_faq__item.is-open .sell_faq__head i::before,
.sell_faq__item.is-open .sell_faq__head i::after { background: #FFFFFF; }
.sell_faq__item.is-open .sell_faq__head i::after { transform: translate(-50%, -50%) scaleY(0); }
.sell_faq__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sell_faq__item.is-open .sell_faq__body { max-height: 600px; }
.sell_faq__body p {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 0.7vw + 6px, 22px);
  line-height: 150%;
  color: #3C3C3B;
  padding: 0 0 clamp(24px, 2.5vw, 48px);
  max-width: 1400px;
}

/* =========================================================
   8. FINAL CTA (image bg + white card)
   ========================================================= */
.sell_cta {
  position: relative;
  padding: 0;
  background: #D9D9D9 url('../images/sell/cta_bg.avif') center/cover no-repeat;
  min-height: clamp(700px, 60vw, 1100px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Full-bleed: break out of the 1920px-capped .wrapper so the CTA
     parallax background reaches the real viewport edges on screens
     wider than 1920. Same pattern as .sell_eval__body. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(60px, 7vw, 160px);
}
.sell_cta__inner {
  text-align: center;
  width: 100%;
  max-width: 1349px;
  background: #FAFAFA;
  padding: clamp(64px, 7vw, 128px) clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 clamp(40px, 5vw, 96px);
}
.sell_cta__inner h2 {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 clamp(16px, 2vw, 32px);
  text-transform: uppercase;
  max-width: 1261px;
}
/* Title sub-line "по продаже объекта" — desktop matches h2 typography
   (single visual block); mobile restyles to small Inter (Figma 360_sell). */
.sell_cta__titleSub {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: clamp(-32px, -2vw, -16px) 0 clamp(16px, 2vw, 32px);
  text-transform: uppercase;
  max-width: 1261px;
}
/* Mobile-only image inside the CTA card — hidden on desktop. */
.sell_cta__img { display: none; }
.sell_cta__sub {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 1.1vw + 14.8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 clamp(48px, 6vw, 120px);
  max-width: 920px;
}
.sell_cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(440px, 36vw, 699px);
  max-width: 100%;
  height: clamp(60px, 4vw, 80px);
  padding: 0 clamp(24px, 2.3vw, 44px);
  background: transparent;
  color: #232323;
  border: 1px solid #232323;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(16px, 0.7vw + 7px, 25px);
  line-height: 150%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 auto clamp(16px, 2vw, 32px);
  transition: background .25s, color .25s;
}
.sell_cta__btn:hover { background: #232323; color: #FFFFFF; }
.sell_cta__micro {
  font-family: "Inter", "Inter Metric Fallback", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  margin: 0;
}

/* =========================================================
   ANIMATIONS — ImmoLux Standard
   Animations only activate when JS adds .js-anim-ready to body
   ========================================================= */
body.js-anim-ready .anim-fade-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.js-anim-ready .anim-fade-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.js-anim-ready .anim-fade-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.js-anim-ready .anim-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.js-anim-ready .anim-fade-up.visible,
body.js-anim-ready .anim-fade-left.visible,
body.js-anim-ready .anim-fade-right.visible,
body.js-anim-ready .anim-scale.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* =========================================================
   CURSOR-FOLLOW PHOTO (Stats + Process Steps hover)
   Прямоугольное фото следует за курсором при наведении
   ========================================================= */
.cursor-photo {
  position: fixed;
  width: 320px;
  height: 230px;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}
.cursor-photo.is-visible {
  opacity: 1;
  transform: scale(1);
}
.cursor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover zones need cursor:pointer hint */
.sell_stat[data-hover-img],
.sell_process__step[data-hover-img] {
  cursor: default;
}

/* =========================================================
   CLIP-PATH WIPE REVEAL (Gallery photos — slavinskaia style)
   Горизонтальная «шторка» слева направо при скролле
   ========================================================= */
body.js-anim-ready .anim-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
body.js-anim-ready .anim-wipe.visible {
  clip-path: inset(0 0 0 0);
}

/* =========================================================
   PARALLAX (CTA section background) — JS shifts background-position
   ========================================================= */
.sell_cta--parallax {
  background-attachment: scroll;
  background-size: cover;
  background-position: center;
  will-change: background-position;
}

/* =========================================================
   MEDIA QUERIES — responsive shrinkage
   ========================================================= */

/* The old @media (max-width: 1500px) block is now replaced by clamp()-based
   fluid sizing in the base CSS. Container/header paddings, font sizes, grid
   layouts and section paddings all scale continuously from 1200 → 1920+ via
   clamp() — no fixed breakpoint needed here. The 1200/768/360 blocks still
   handle their respective small-viewport refinements. */

/* Pixel-perfect to Figma 1200_sell (1200x8835).
   Section titles 50px Felidae uppercase, sub 28px Felidae, body 16px Inter
   Stat numbers 50px Felidae, owner card titles 28px Felidae #c4c4c4 */
@media (max-width: 1200px) {
  .big_block_home.big_block_home--sell > .container { padding: 0 60px; }
  .big_block_home--sell .top_header_group {
    margin-left: -60px;
    margin-right: -60px;
    padding-left: 60px;
    padding-right: 60px;
  }
  .sell_hero { padding: 32px 0 60px; }
  .sell_hero__breadcrumbs { font-size: 16px; gap: 6px; margin-bottom: 24px; }
  .sell_hero__grid { grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 380px); gap: clamp(20px, 3vw, 40px); align-items: start; align-content: start; min-height: calc(clamp(340px, 38vw, 460px) - 20px); }
  /* H1 fluid 768→1200: 32→50. Prevents long Cyrillic words (НЕДВИЖИМОСТЬ,
     ПРЕСТИЖНЫХ) from overflowing the narrow text column at viewports
     between 768 and ~1100 where the column shrinks faster than the font. */
  .sell_hero__text h1 {
    font-size: clamp(32px, 4.17vw, 50px);
    line-height: 110%;
    letter-spacing: 0.02em;
    max-width: 100%;
    margin-bottom: 24px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .sell_hero__text p {
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-size: clamp(18px, 2.3vw, 28px);
    line-height: 110%;
    letter-spacing: 0.02em;
    margin-bottom: clamp(32px, 4.6vw, 56px);
    max-width: 100%;
  }
  .sell_hero__cta { width: 100%; max-width: 100%; font-size: 16px; height: 64px; line-height: 150%; padding: 0 32px; }
  .sell_hero__photo { position: absolute; top: -20px; right: 0; width: clamp(280px, 32vw, 380px); height: clamp(340px, 38vw, 460px); }
  .sell_stat b { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 100px; }
  .sell_stat b em { font-size: 50px; }
  .sell_stat span { font-size: 16px; line-height: 130%; max-width: 320px; }
  .sell_stat { padding: 0 24px; }
  .sell_stats__grid { padding: 32px 0 28px; }
  .sell_stats { margin-top: 48px; }
  .sell_owner { padding: 60px 0 0; }
  .sell_owner__title,
  .sell_eval__title,
  .sell_process__header h2,
  .sell_faq__title,
  .sell_cta__inner h2 { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 16px; max-width: 926px; }
  .sell_owner__sub,
  .sell_eval__rText,
  .sell_faq__sub { font-size: 16px; line-height: 130%; }
  .sell_process__header p { font-family: "Felidae", "Cormorant Garamond", serif; font-size: 28px; line-height: 110%; letter-spacing: 0.02em; }
  .sell_owner__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 40px 60px; }
  .sell_owner__card { min-height: 0; }
  .sell_owner__head { min-height: 92px; margin-bottom: 32px; gap: 16px; }
  .sell_owner__photo { aspect-ratio: 340 / 320; }
  .sell_owner__ico { width: 32px; height: 32px; }
  .sell_owner__ico::before { width: 14px; }
  .sell_owner__ico::after { height: 14px; }
  .sell_owner__name,
  .sell_eval__item h3,
  .sell_eval__rTitle { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; color: #c4c4c4; max-width: 100%; }
  .sell_owner__card.is-open .sell_owner__name { color: #010101; }
  .sell_owner__desc { margin: 0 0 64px; font-size: 16px; line-height: 130%; max-width: 100%; }
  .sell_owner__what,
  .sell_eval__rSub { font-size: 20px; line-height: 110%; margin: 0 0 16px; }
  .sell_owner__text { font-size: 16px; line-height: 130%; max-width: 100%; }
  .sell_eval { padding: 60px 0 0; }
  .sell_eval__title { margin-bottom: 48px; max-width: 100%; padding: 0 30px; }
  .sell_eval__body { min-height: 0; }
  .sell_eval__content {
    grid-template-columns: 1fr 1fr;
    padding: 48px 60px;
    gap: 32px;
    justify-content: stretch;
  }
  .sell_eval__item { padding: 0 0 24px; margin-bottom: 24px; gap: 12px; }
  .sell_eval__item:first-child { padding-top: 24px; }
  .sell_eval__dot { width: 9px; height: 9px; }
  .sell_eval__right { width: 100%; padding: 32px; }
  .sell_eval__rTitle { color: #3C3C3B; margin-bottom: 16px; }
  .sell_eval__rBlock { margin-bottom: 24px; }
  .sell_eval__cta { height: 64px; font-size: 16px; line-height: 150%; max-width: calc(100% - 120px); margin: 32px auto 0; }
  .sell_process { padding: 60px 0 0; }
  .sell_process__header { padding: 0 30px; margin-bottom: 48px; max-width: 100%; }
  .sell_process__header h2 { margin-bottom: 16px; }
  .sell_process__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "s1 s1 s2"
      "s3 s4 s5";
    padding: 0 60px;
    row-gap: 0;
    column-gap: 0;
  }
  .sell_process__step { padding: 32px 24px; }
  .sell_process__step[data-step="1"] { grid-area: s1; }
  .sell_process__step[data-step="2"] { grid-area: s2; }
  .sell_process__step[data-step="3"] { grid-area: s3; border-top: 1.6px solid #E1E1E1; border-right: 1.6px solid #E1E1E1; }
  .sell_process__step[data-step="4"] { grid-area: s4; border-top: 1.6px solid #E1E1E1; border-right: 1.6px solid #E1E1E1; }
  .sell_process__step[data-step="5"] { grid-area: s5; border-top: 1.6px solid #E1E1E1; }
  .sell_process__num { font-size: 50px; line-height: 110%; margin-bottom: 16px; }
  .sell_process__step h3 { font-size: 28px; line-height: 110%; padding-bottom: 32px; max-width: 100%; }
  .sell_process__step p { font-size: 16px; line-height: 130%; max-width: 100%; }
  .sell_gallery { padding: 60px 60px 0; gap: 16px; }
  .sell_gallery__row { gap: 16px; }
  .sell_gallery__row--wide-left,
  .sell_gallery__row--wide-right { grid-template-columns: 2fr 1fr; }
  .sell_gallery__row--wide-right { grid-template-columns: 1fr 2fr; }
  .sell_faq { padding: 60px 0 0; }
  .sell_faq__header { margin-bottom: 48px; padding: 0 30px; max-width: 100%; }
  .sell_faq__sub { max-width: 720px; margin: 0 auto; }
  .sell_faq__list { padding: 0 60px; max-width: 100%; }
  .sell_faq__head { padding: 32px 0; }
  .sell_faq__head span { font-size: 16px; line-height: 130%; max-width: 100%; }
  .sell_faq__head i { width: 32px; height: 32px; }
  .sell_faq__head i::before { width: 14px; }
  .sell_faq__head i::after { height: 14px; }
  .sell_faq__body p { font-size: 14px; line-height: 130%; padding-bottom: 24px; max-width: 100%; }
  .sell_cta { margin-top: 60px; min-height: 0; padding: 80px 60px; }
  .sell_cta__inner { margin: 0; padding: 80px 30px; max-width: none; width: 100%; }
  .sell_cta__inner h2 { max-width: 100%; }
  .sell_cta__sub { font-size: 28px; line-height: 110%; margin-bottom: 48px; max-width: 700px; }
  .sell_cta__btn { width: 500px; max-width: 100%; height: 64px; font-size: 16px; line-height: 150%; padding: 0 32px; margin-bottom: 24px; }
  .sell_cta__micro { font-size: 16px; }
}

/* Pixel-perfect to Figma 768_sell (768x5805) */
@media (max-width: 768px) {
  .big_block_home.big_block_home--sell > .container { padding: 0 24px; }
  .big_block_home--sell .top_header_group {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Hero — 2-col with smaller photo */
  .sell_hero { padding: 24px 0 40px; }
  .sell_hero__breadcrumbs { font-size: 13px; gap: 6px; margin-bottom: 16px; }
  .sell_hero__grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; align-items: start; align-content: start; min-height: 280px; }
  .sell_hero__text h1 { font-size: 32px; line-height: 110%; letter-spacing: 0.02em; max-width: 100%; margin-bottom: 16px; }
  .sell_hero__text p { font-family: "Felidae", "Cormorant Garamond", serif; font-size: 18px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 32px; max-width: 100%; }
  .sell_hero__cta { width: 100%; max-width: 100%; font-size: 13px; height: 48px; line-height: 150%; padding: 0 24px; letter-spacing: 0.05em; }
  .sell_hero__photo { position: absolute; top: -10px; right: 0; width: 230px; height: 290px; }
  /* Stats — 3 cols */
  .sell_stats { margin-top: 32px; }
  .sell_stats__grid { grid-template-columns: 1fr 1fr 1fr; padding: 24px 0; gap: 0; }
  .sell_stat { padding: 0 16px; text-align: center; align-items: center; border-bottom: 0; }
  .sell_stat:first-child { padding-left: 16px; }
  .sell_stat b { font-size: 32px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 56px; }
  .sell_stat b em { font-size: 32px; }
  .sell_stat span { font-size: 12px; line-height: 130%; max-width: 200px; }
  /* Owner — 3 cols */
  .sell_owner { padding: 50px 0 0; }
  .sell_owner__header { padding: 0 24px; margin-bottom: 32px; }
  .sell_owner__title,
  .sell_eval__title,
  .sell_process__header h2,
  .sell_faq__title,
  .sell_cta__inner h2 { font-size: 32px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 16px; max-width: 100%; }
  .sell_owner__sub,
  .sell_eval__rText,
  .sell_faq__sub { font-size: 13px; line-height: 130%; }
  .sell_process__header p { font-family: "Felidae", "Cormorant Garamond", serif; font-size: 18px; line-height: 110%; letter-spacing: 0.02em; }
  .sell_owner__grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 24px; }
  .sell_owner__card { min-height: 0; }
  .sell_owner__head { min-height: 60px; margin-bottom: 24px; gap: 8px; }
  .sell_owner__photo { aspect-ratio: 220 / 240; }
  .sell_owner__ico { width: 24px; height: 24px; }
  .sell_owner__ico::before { width: 12px; }
  .sell_owner__ico::after { height: 12px; }
  .sell_owner__name,
  .sell_eval__item h3,
  .sell_eval__rTitle { font-size: 18px; line-height: 110%; letter-spacing: 0.02em; color: #c4c4c4; max-width: 100%; }
  .sell_owner__card.is-open .sell_owner__name { color: #010101; }
  .sell_owner__desc { margin: 0 0 32px; font-size: 13px; line-height: 130%; max-width: 100%; }
  .sell_owner__what,
  .sell_eval__rSub { font-size: 16px; line-height: 110%; margin: 0 0 12px; }
  .sell_owner__text { font-size: 13px; line-height: 130%; max-width: 100%; }
  /* Eval — 2 cols */
  .sell_eval { padding: 50px 0 0; }
  .sell_eval__title { margin-bottom: 32px; padding: 0 24px; max-width: 100%; }
  .sell_eval__body { min-height: 0; }
  .sell_eval__content { grid-template-columns: 1fr 1fr; padding: 32px 24px; gap: 16px; justify-content: stretch; }
  .sell_eval__item { padding: 0 0 16px; margin-bottom: 16px; gap: 8px; }
  .sell_eval__item:first-child { padding-top: 16px; }
  .sell_eval__dot { width: 7px; height: 7px; }
  .sell_eval__right { padding: 20px; width: 100%; }
  .sell_eval__rTitle { color: #3C3C3B; margin-bottom: 12px; }
  .sell_eval__rBlock { margin-bottom: 16px; }
  .sell_eval__cta { height: 48px; font-size: 13px; line-height: 150%; max-width: calc(100% - 48px); margin: 24px auto 0; letter-spacing: 0.05em; }
  /* Process — 2 cols with 05 spanning full width */
  .sell_process { padding: 50px 0 0; }
  .sell_process__header { padding: 0 24px; margin-bottom: 32px; max-width: 100%; }
  /* Mobile-only title/subtitle wording per Figma 360_sell — applies from 768 down */
  .sell_process__header .brk-desk { display: none; }
  .sell_process__header .brk-mob  { display: inline; }
  /* Mobile (Figma 360_sell): single-column stack, image between step 03 and 04 */
  .sell_process__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    padding: 0 24px;
    row-gap: 0;
    column-gap: 0;
    border-top: 1.6px solid #E1E1E1;
    border-bottom: 1.6px solid #E1E1E1;
  }
  /* Reset grid-column for ALL steps so the desktop "step1 spans 2 cols" rule
     doesn't leak into the single-column mobile grid. */
  .sell_process__step {
    padding: 24px 0;
    grid-column: 1;
    grid-area: auto;
    border: 0;
    text-align: center;
    align-items: center;
  }
  .sell_process__step[data-step="1"] { grid-row: 1; grid-column: 1; border: 0; }
  .sell_process__step[data-step="2"] { grid-row: 2; grid-column: 1; border-top: 1.6px solid #E1E1E1; }
  .sell_process__step[data-step="3"] { grid-row: 3; grid-column: 1; border-top: 1.6px solid #E1E1E1; border-right: 0; }
  .sell_process__step[data-step="4"] { grid-row: 5; grid-column: 1; border-top: 1.6px solid #E1E1E1; border-right: 0; }
  .sell_process__step[data-step="5"] { grid-row: 6; grid-column: 1; border-top: 1.6px solid #E1E1E1; border-right: 0; }
  /* Show the inline mobile image between step 03 and step 04 */
  .sell_process__img {
    display: block;
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    aspect-ratio: 311 / 167;
    overflow: hidden;
    margin: 16px 0;
  }
  .sell_process__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Figma 360_sell: 768/H — 20px Felidae 400 with 0.2px stroke; 768/T1 — 14px Inter Light */
  .sell_process__num { font-size: 32px; line-height: 110%; margin-bottom: 12px; }
  .sell_process__step h3 {
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0.03em;
    padding-bottom: 32px;
    max-width: 100%;
    -webkit-text-stroke: 0.2px #010101;
  }
  .sell_process__step p {
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0;
    max-width: 100%;
    color: #3C3C3B;
  }
  /* Gallery */
  .sell_gallery { padding: 50px 24px 0; gap: 12px; }
  .sell_gallery__row { gap: 12px; }
  .sell_gallery__row--wide-left,
  .sell_gallery__row--wide-right { grid-template-columns: 2fr 1fr; }
  .sell_gallery__row--wide-right { grid-template-columns: 1fr 2fr; }
  /* FAQ */
  .sell_faq { padding: 50px 0 0; }
  .sell_faq__header { margin-bottom: 32px; padding: 0 24px; max-width: 100%; }
  .sell_faq__sub { max-width: 480px; margin: 0 auto; }
  .sell_faq__list { padding: 0 24px; max-width: 100%; }
  .sell_faq__head { padding: 24px 0; }
  .sell_faq__head span { font-size: 13px; line-height: 130%; max-width: 100%; }
  .sell_faq__head i { width: 24px; height: 24px; }
  .sell_faq__head i::before { width: 12px; }
  .sell_faq__head i::after { height: 12px; }
  .sell_faq__body p { font-size: 12px; line-height: 130%; padding-bottom: 16px; max-width: 100%; }
  /* CTA */
  .sell_cta { margin-top: 50px; min-height: 0; padding: 50px 24px; }
  .sell_cta__inner { margin: 0; padding: 50px 24px; max-width: none; width: 100%; }
  .sell_cta__inner h2 { max-width: 100%; }
  .sell_cta__sub { font-size: 18px; line-height: 110%; margin-bottom: 32px; max-width: 480px; }
  .sell_cta__btn { width: 100%; max-width: 100%; height: 48px; font-size: 12px; line-height: 150%; padding: 0 12px; margin-bottom: 16px; letter-spacing: 0.04em; white-space: nowrap; }
  .sell_cta__micro { font-size: 13px; }
}

/* Pixel-perfect to Figma 360_sell (360x8601) - everything stacks vertically */
@media (max-width: 360px) {
  /* Container — Figma uses ~13–15px lateral gutter on hero text rows */
  .big_block_home.big_block_home--sell > .container { padding: 0 13px; }
  .big_block_home--sell .top_header_group {
    margin-left: -13px;
    margin-right: -13px;
    padding-left: 13px;
    padding-right: 13px;
  }
  /* Header — pixel-accurate to Figma 360_sell:
     logo [139,17,82x27], burger area [59,26,44x10], "Сonsultation" text [272,23,73x19] Felidae 15/130% ls=2% */
  .big_block_home.big_block_home--sell header { padding-top: 17px; }
  .big_block_home--sell .top_header_group {
    align-items: center;
    padding-bottom: 13px;
  }
  .big_block_home--sell header .about_block .top_header_group .menu_burger {
    width: 44px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
  }
  .big_block_home--sell header .about_block .top_header_group .menu_burger .burger {
    width: 25px;
    height: 10px;
  }
  .big_block_home--sell header .about_block .top_header_group .menu_burger .burger span:nth-child(1),
  .big_block_home--sell header .about_block .top_header_group .menu_burger .burger span:nth-child(3) {
    width: 18px;
  }
  .big_block_home--sell header .about_block .top_header_group .menu_burger .burger span:nth-child(2) {
    width: 25px;
  }
  .big_block_home--sell header .about_block .top_header_group .logo img {
    width: 82px;
    height: 27px;
  }
  .big_block_home--sell header .about_block .top_header_group .right_contacts {
    margin: 0;
    gap: 0;
  }
  .big_block_home--sell header .about_block .top_header_group .right_contacts .consultation {
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 130%;
    letter-spacing: 0.02em;
    padding: 0;
    border: 0;
    background: transparent;
    color: #010101;
    text-transform: none;
  }
  /* Mobile / desktop line-break helpers */
  .sell_hero__text h1 .brk-mob { display: inline; }
  .sell_hero__text h1 .brk-desk { display: none; }
  /* Hero — stacked: title → subtitle → photo → cta (Figma order) */
  .sell_hero { padding: 16px 0 0; }
  .sell_hero__breadcrumbs {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0;
    color: #A6A6A6;
    gap: 6px;
    margin-bottom: 14px;
  }
  .sell_hero__breadcrumbs a,
  .sell_hero__breadcrumbs span { color: #A6A6A6; }
  .sell_hero__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 0;
    /* Photo is in normal flow here — no reserved height needed */
    min-height: 0;
  }
  .sell_hero__text { display: contents; }
  .sell_hero__text h1 {
    order: 1;
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
    max-width: 100%;
  }
  .sell_hero__text p {
    order: 2;
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-size: 20px;
    line-height: 130%;
    /* Figma: 4% letter-spacing. CDN Felidae renders ~3% wider than Figma's
       Felidae build, so we tighten to 0.025em to keep the 2-line wrap. */
    letter-spacing: 0.025em;
    margin: 0 0 20px;
    max-width: 100%;
  }
  .sell_hero__photo {
    order: 3;
    position: relative;
    top: 0;
    right: 0;
    width: 310px;
    max-width: 100%;
    height: 187px;
    margin: 0 auto 10px;
  }
  .sell_hero__cta {
    order: 4;
    width: 310px;
    max-width: 100%;
    height: 50px;
    margin: 0 auto;
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.05em;
    padding: 0 24px;
    text-transform: uppercase;
  }
  /* Stats — 1 col stacked, centered */
  .sell_stats { margin-top: 26px; }
  .sell_stats__grid { grid-template-columns: 1fr; padding: 0; gap: 0; border-top: 0; border-bottom: 0; }
  .sell_stat {
    border-right: 0;
    border-top: 1px solid #E1E1E1;
    border-bottom: 0;
    padding: 28px 0;
    text-align: center;
    align-items: center;
  }
  .sell_stat:first-child { padding-left: 0; padding-top: 28px; }
  .sell_stat:last-child { border-bottom: 1px solid #E1E1E1; }
  .sell_stat b {
    font-size: 30px;
    line-height: 110%;
    margin-bottom: 10px;
    justify-content: center;
  }
  .sell_stat b em { font-family: "Inter", "Inter Metric Fallback", sans-serif; font-weight: 300; font-style: normal; font-size: 25px; }
  .sell_stat span {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 130%;
    color: #3C3C3B;
    max-width: 100%;
    text-align: center;
  }
  /* Owner — 1 col stacked */
  .sell_owner { padding: 32px 0 0; }
  .sell_owner__header { padding: 0 16px; margin-bottom: 16px; }
  .sell_owner__title,
  .sell_eval__title,
  .sell_process__header h2,
  .sell_faq__title,
  .sell_cta__inner h2 { font-size: 24px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 12px; max-width: 100%; }
  .sell_owner__sub,
  .sell_eval__rText,
  .sell_faq__sub { font-size: 12px; line-height: 130%; }
  .sell_process__header p { font-family: "Felidae", "Cormorant Garamond", serif; font-size: 14px; line-height: 110%; letter-spacing: 0.02em; }
  .sell_owner__grid { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .sell_owner__head { min-height: 40px; margin-bottom: 16px; gap: 8px; }
  .sell_owner__name,
  .sell_eval__item h3,
  .sell_eval__rTitle { font-size: 18px; line-height: 110%; letter-spacing: 0.02em; max-width: 100%; }
  .sell_owner__photo { aspect-ratio: 320 / 220; }
  .sell_owner__ico { width: 24px; height: 24px; }
  .sell_owner__ico::before { width: 12px; }
  .sell_owner__ico::after { height: 12px; }
  .sell_owner__desc { font-size: 13px; line-height: 130%; margin: 0 0 24px; max-width: 100%; }
  .sell_owner__what,
  .sell_eval__rSub { font-size: 14px; line-height: 110%; margin: 0 0 8px; }
  .sell_owner__text { font-size: 13px; line-height: 130%; max-width: 100%; }
  /* Eval — Figma 360 ACCORDION (cards with × / + icons, white card content + image) */
  .sell_eval { padding: 32px 0 0; background: #FFFFFF; }
  .sell_eval__title {
    padding: 0 13px;
    margin-bottom: 0;
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0.02em;
    text-align: center;
  }
  /* Strip dark image bg/overlay on mobile (accordion uses white card) */
  .sell_eval__body {
    background: #FFFFFF;
    min-height: 0;
    padding: 0;
  }
  .sell_eval__overlay { display: none; }
  /* Promote items to be siblings of right card so we can re-order via flex order */
  .sell_eval__content {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    padding: 24px 13px 0;
    gap: 0;
  }
  .sell_eval__left { display: contents; }
  /* Each item becomes a clickable accordion row with a circular ± icon at right */
  .sell_eval__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #E1E1E1;
    border-bottom: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .sell_eval__item:last-of-type { border-bottom: 1px solid #E1E1E1; }
  .sell_eval__item h3 {
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0.02em;
    color: #A6A6A6;
    margin: 0;
    opacity: 1;
    flex: 1;
  }
  .sell_eval__item.is-active h3 { color: #010101; opacity: 1; }
  /* Re-purpose the dot span as the circular ± icon */
  .sell_eval__dot {
    position: relative;
    width: 19px;
    height: 19px;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    opacity: 1;
    order: 2;
  }
  .sell_eval__dot::before,
  .sell_eval__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #A6A6A6;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .sell_eval__dot::before {
    width: 9px;
    height: 1px;
    transform: translate(-50%, -50%);
  }
  .sell_eval__dot::after {
    width: 1px;
    height: 9px;
    transform: translate(-50%, -50%);
  }
  /* Active item: icon turns dark and lines rotate to form ×.
     ::before is horizontal (—) → rotate 45° CW gives \
     ::after is vertical (|) → rotate 45° CW gives /
     Both rotate the same direction so they form a proper × together. */
  .sell_eval__item.is-active .sell_eval__dot { border-color: #010101; }
  .sell_eval__item.is-active .sell_eval__dot::before,
  .sell_eval__item.is-active .sell_eval__dot::after { background: #010101; }
  .sell_eval__item.is-active .sell_eval__dot::before { transform: translate(-50%, -50%) rotate(45deg); }
  .sell_eval__item.is-active .sell_eval__dot::after { transform: translate(-50%, -50%) rotate(45deg); }
  /* White content card — only visible if any item is active (always, since one is active by default) */
  .sell_eval__right {
    background: #FAFAFA;
    width: 100%;
    padding: 16px 16px 24px;
    margin: 0;
  }
  .sell_eval__rBlock { margin-bottom: 16px; }
  .sell_eval__rBlock:last-child { margin-bottom: 0; }
  .sell_eval__rTitle,
  .sell_eval__rSub {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0.02em;
    color: #010101;
    margin: 0 0 8px;
    text-transform: none;
  }
  .sell_eval__rText {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 130%;
    color: #3C3C3B;
    margin: 0;
  }
  /* Mobile-only inline image between the two rBlocks */
  .sell_eval__rImg {
    display: block;
    margin: 16px 0;
  }
  .sell_eval__rImg img {
    display: block;
    width: 124px;
    height: 138px;
    object-fit: cover;
  }
  /* Re-order: card 1 (1) → content (2) → card 2 (3) → card 3 (5)
     Active item swaps content slot to follow it.
     Note: items live inside .sell_eval__left (display:contents), so the items
     and .sell_eval__right are NOT DOM siblings — `~` won't reach across.
     We use `:has()` on .sell_eval__content to detect which tab is active. */
  .sell_eval__item[data-eval-tab="1"] { order: 1; }
  .sell_eval__item[data-eval-tab="2"] { order: 3; }
  .sell_eval__item[data-eval-tab="3"] { order: 5; }
  .sell_eval__right { order: 6; }
  .sell_eval__content:has(.sell_eval__item.is-active[data-eval-tab="1"]) .sell_eval__right { order: 2; }
  .sell_eval__content:has(.sell_eval__item.is-active[data-eval-tab="2"]) .sell_eval__right { order: 4; }
  .sell_eval__content:has(.sell_eval__item.is-active[data-eval-tab="3"]) .sell_eval__right { order: 6; }
  /* CTA */
  .sell_eval__cta {
    height: 50px;
    font-size: 14px;
    font-family: "Felidae", "Cormorant Garamond", serif;
    line-height: 150%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    max-width: calc(100% - 26px);
    margin: 24px auto 0;
    background: #41545C;
    color: #FFFFFF;
  }
  /* Process — 1 col stacked, all 5 in one column */
  .sell_process { padding: 32px 0 0; }
  .sell_process__header { padding: 0 16px; margin-bottom: 16px; max-width: 100%; }
  /* Mobile-only title/subtitle wording per Figma 360_sell */
  .sell_process__header .brk-desk { display: none; }
  .sell_process__header .brk-mob  { display: inline; }
  .sell_process__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    padding: 0 16px;
    row-gap: 0;
    column-gap: 0;
  }
  .sell_process__step,
  .sell_process__step[data-step="1"],
  .sell_process__step--wide,
  .sell_process__step[data-step="2"],
  .sell_process__step[data-step="3"],
  .sell_process__step[data-step="4"],
  .sell_process__step[data-step="5"] {
    padding: 16px 0;
    grid-area: auto;
    grid-column: 1;
    grid-row: auto;
    border-top: 1.6px solid #E1E1E1;
    border-right: 0;
  }
  .sell_process__step:first-child { border-top: 0; }
  /* Figma 360_sell: step title 20px Felidae 400 + 0.2px stroke; body 14px Inter Light */
  .sell_process__num { font-size: 28px; line-height: 110%; margin-bottom: 8px; }
  .sell_process__step h3 {
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0.03em;
    padding-bottom: 16px;
    max-width: 100%;
    -webkit-text-stroke: 0.2px #010101;
  }
  .sell_process__step p {
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0;
    max-width: 100%;
    color: #3C3C3B;
  }
  /* Inline image between step 03 and step 04 (Figma 360_sell mobile) */
  .sell_process__img {
    display: block;
    grid-area: auto;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    border-top: 1.6px solid #E1E1E1;
  }
  .sell_process__img img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  /* Gallery — hidden entirely on mobile per Figma 360_sell */
  .sell_gallery { display: none; }
  /* FAQ — Figma 360_sell: title + Felidae sub + 3 collapsed questions + dark "Show all" CTA */
  .sell_faq { padding: 32px 0 0; }
  .sell_faq__header { padding: 0 13px; margin-bottom: 16px; max-width: 100%; text-align: center; }
  .sell_faq__title {
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .sell_faq__sub {
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.03em;
    color: #010101;
    max-width: 100%;
  }
  .sell_faq__list { padding: 0 13px; max-width: 100%; }
  .sell_faq__head { padding: 16px 0; gap: 12px; }
  .sell_faq__head span { font-size: 12px; line-height: 120%; letter-spacing: 0.02em; text-transform: uppercase; }
  .sell_faq__head i { width: 20px; height: 20px; flex-shrink: 0; }
  .sell_faq__head i::before { width: 10px; }
  .sell_faq__head i::after { height: 10px; }
  .sell_faq__body p { font-size: 11px; line-height: 130%; padding-bottom: 12px; }
  /* Hide questions 4–7 by default on mobile (Figma 360_sell shows only 3) */
  .sell_faq__list .sell_faq__item:nth-child(n+4) { display: none; }
  .sell_faq__list.is-expanded .sell_faq__item:nth-child(n+4) { display: list-item; }
  /* "Open all questions" button — dark CTA on mobile only */
  .sell_faq__more {
    display: block;
    width: calc(100% - 26px);
    height: 50px;
    margin: 16px 13px 0;
    background: #41545C;
    border: 0;
    color: #FFFFFF;
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s;
  }
  .sell_faq__more:hover { background: #010101; }
  /* Closing full-bleed villa image — mobile-only block under the FAQ */
  .sell_outro {
    display: block;
    margin: 32px 0 0;
    width: 100%;
  }
  .sell_outro img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
  }
  /* CTA — Figma 360_sell: white card on dark bg, title + sub + image + desc + btn + micro */
  .sell_cta { margin-top: 32px; padding: 32px 16px; }
  .sell_cta__inner { margin: 0; padding: 32px 24px; max-width: none; width: 100%; align-items: center; text-align: center; }
  .sell_cta__inner h2 {
    font-size: 30px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    max-width: 100%;
    /* Soft hyphen (&shy;) inside the word lets the browser render the hyphen
       only when wrapping at that position. Combined with hyphens:auto for
       browsers that ignore the explicit &shy;. */
    hyphens: manual;
    -webkit-hyphens: manual;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Generic mobile / desktop line-break helpers used in the CTA description.
     Default: brk-mob hidden, brk-desk visible. Mobile flips this. */
  .sell_cta__sub .brk-mob,
  .sell_cta__sub .brk-desk { display: none; }
  .sell_cta__sub .brk-mob { display: inline; }
  .sell_cta__titleSub {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0;
    color: #010101;
    margin: 0 0 24px;
    text-transform: none;
    max-width: 100%;
  }
  /* Per Figma 360_sell: square reveals the section parallax background through
     the white card. Achieved with background-attachment: fixed so the same
     image lines up visually with the parent .sell_cta bg behind the card. */
  .sell_cta__img {
    display: block;
    width: 124px;
    height: 138px;
    margin: 0 auto 32px;
    background-image: url(../images/sell/cta_bg.avif);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .sell_cta__img img { display: none; }
  .sell_cta__sub {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0;
    color: #010101;
    margin: 0 0 24px;
    max-width: 100%;
    text-transform: none;
  }
  .sell_cta__btn {
    width: 100%;
    max-width: 100%;
    height: 50px;
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-size: 12px;
    line-height: 150%;
    padding: 0 12px;
    margin: 0 0 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Force one-line button text per Figma 360_sell */
    white-space: nowrap;
  }
  .sell_cta__micro {
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 130%;
    color: #A6A6A6;
    margin: 0;
    max-width: 240px;
  }
}

/* =========================================================
   ANIMATION ENHANCEMENTS (sell-animations.js)
   ========================================================= */

/* --- Cursor-following photo on process steps --- */
.sell-hover-photo {
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

/* --- Gallery photos: perspective container for 3D tilt --- */
.sell_gallery__cell {
  perspective: 800px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.sell_gallery__cell img {
  backface-visibility: hidden;
}

/* --- CTA parallax: fixed bg --- */
.sell_cta--parallax {
  background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) {
  .sell_cta--parallax { background-attachment: scroll; }
}

/* =========================================================
   Mobile fixes below 480px (above the 360 Figma-perfect block):
   - Hero stacks vertically so the title gets full width
   - Stats lose their horizontal separator lines
   - No horizontal scroll
   ========================================================= */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
}
@media (max-width: 480px) and (min-width: 361px) {
  /* Mobile line-breaks on, desktop breaks off */
  .sell_hero__text h1 .brk-mob { display: inline; }
  .sell_hero__text h1 .brk-desk { display: none; }
  /* Hero stacks: title → subtitle → photo → cta */
  .sell_hero { padding: 24px 0 0; }
  .sell_hero__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 0;
    /* Photo is in normal flow here — no reserved height needed */
    min-height: 0;
  }
  .sell_hero__text { display: contents; }
  .sell_hero__text h1 {
    order: 1;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    max-width: 100%;
  }
  .sell_hero__text p {
    order: 2;
    font-family: "Felidae", "Cormorant Garamond", serif;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.025em;
    margin: 0 0 24px;
    max-width: 100%;
  }
  .sell_hero__photo {
    order: 3;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 310 / 187;
    margin: 0 auto 16px;
  }
  .sell_hero__cta {
    order: 4;
    width: 100%;
    max-width: 100%;
    height: 50px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.05em;
    padding: 0 24px;
  }
  /* Stats — single column, no separator lines */
  .sell_stats { margin-top: 28px; }
  .sell_stats__grid {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    border-top: 0;
    border-bottom: 0;
  }
  .sell_stat {
    border: 0;
    padding: 24px 0;
    text-align: center;
    align-items: center;
  }
  .sell_stat:first-child { padding-left: 0; padding-top: 24px; }
  .sell_stat:last-child { border-bottom: 0; }
  .sell_stat b { font-size: 32px; line-height: 110%; margin-bottom: 12px; justify-content: center; }
  .sell_stat b em { font-size: 28px; }
  .sell_stat span { font-size: 13px; line-height: 130%; max-width: 100%; text-align: center; }
}
/* Remove stat separator lines at 360 too (user request) */
@media (max-width: 360px) {
  .sell_stat { border-top: 0; }
  .sell_stat:last-child { border-bottom: 0; }
}

.sell_stat b {
  align-items: flex-end;
  line-height: 1;
}

.sell_stat b em {
  display: inline-block;
  line-height: 1;
  transform: translateY(0.02em);
}

@media (min-width: 768px) and (max-width: 1200px) {
  .sell_stat {
    min-width: 0;
    padding: 0 clamp(12px, 2vw, 24px);
  }

  .sell_stat b {
    max-width: 100%;
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .sell_stat:nth-child(3) b {
    font-size: clamp(30px, 3.6vw, 42px);
  }

  .sell_stat span {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .sell_stats__grid {
    grid-template-columns: 1fr;
    border-top: 0;
    border-bottom: 0;
  }

  .sell_stat {
    border-right: 0;
    padding: 24px 16px;
  }

  .sell_stat b {
    font-size: clamp(30px, 8.5vw, 34px);
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
  }

  /* The 3rd stat ("DESDE 7 DÍAS") is a long phrase, not a short number.
     At the same px as "5 000+" it reads visually larger / heavier, so
     scale it down to balance the block. white-space:nowrap keeps it on a
     single line at this smaller size. */
  .sell_stat:nth-child(3) b {
    font-size: clamp(18px, 5.5vw, 22px);
    white-space: nowrap;
  }

  /* Keep the "%" subordinate and tight to the digits so "99%" reads as one
     compact unit matching "5 000+", instead of an oversized "99 %". */
  .sell_stat b em {
    font-size: 0.6em;
  }
}

/* Owner cards: phone-only swipe layout.
   Keep the existing accordion state, but show one large card at a time with
   the next card peeking in so the horizontal gesture is obvious. */
@media (max-width: 767px) {
  .sell_owner {
    position: relative;
    overflow: hidden;
  }

  .sell_owner__grid {
    display: flex;
    grid-template-columns: none;
    justify-content: start;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 0 24px 16px;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

  .sell_owner__card {
    /* Narrow enough that a real slice of the next card stays on screen
       (~40px on a 390px phone) — the peek is what tells the user this
       row swipes; at 90vw it was invisible. */
    flex: 0 0 min(82vw, 420px);
    width: min(82vw, 420px);
    max-width: min(82vw, 420px);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .sell_owner__head {
    /* Was clamp(108px,30vw,134px)+18px — sized for 3-line RU titles, but the
       ES/EN/RU titles are all forced to 2 lines, so it left a big dead gap
       above the description. Halved so the title sits closer to the text. */
    min-height: clamp(92px, 22vw, 108px);
    margin-bottom: 9px;
    gap: 16px;
  }

  .sell_owner__name {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 110%;
  }

  .sell_owner__body {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
  }

  .sell_owner__photo {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    /* Landscape, capped: the old 4/5 portrait crop filled almost the whole
       viewport on a phone and buried the text under it. */
    aspect-ratio: 16 / 10;
    max-height: 230px;
    margin: 0;
    opacity: 1 !important;
    pointer-events: none;
    z-index: auto;
  }

  .sell_owner__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .sell_owner__content {
    position: static;
    z-index: auto;
    display: contents;
    padding: 0;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible;
  }

  .sell_owner__desc {
    order: 1;
    margin: 0 0 22px;
    max-width: 100%;
    /* min-height (not fixed height + overflow hidden) so the longer DE/FR
       copy grows instead of clipping, while short copy still keeps the
       photos of adjacent cards roughly level during the swipe. */
    min-height: clamp(96px, 26vw, 120px);
    font-size: clamp(14px, 4vw, 18px);
    line-height: 132%;
  }

  .sell_owner__desc br,
  .sell_owner__text br {
    display: initial;
  }

  .sell_owner__what {
    order: 3;
    display: block;
    max-height: 0;
    margin: 0;
    max-width: 100%;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 120%;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease, transform 0.35s ease;
  }

  .sell_owner__text {
    order: 4;
    display: block;
    max-height: 0;
    margin: 0;
    max-width: 100%;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 132%;
    transition: max-height 0.4s ease, opacity 0.25s ease, transform 0.35s ease;
  }

  .sell_owner__card.is-open .sell_owner__what {
    max-height: 70px;
    margin: 20px 0 10px;
    opacity: 1;
    transform: translateY(0);
  }

  .sell_owner__card.is-open .sell_owner__text {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
  }

  /* Swipe affordance: dots under the carousel (built in sell-animations.js).
     The active dot stretches into a brand-teal pill so position 1/2/3 reads
     at a glance. */
  .sell_owner__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 16px 8px;
  }

  .sell_owner__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #C4C4C4;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
  }

  .sell_owner__dots button.is-active {
    width: 24px;
    background: #41545C;
  }

  .sell_gallery {
    display: flex;
    padding: 32px 16px 0;
    max-width: none;
    gap: 0;
  }

  .sell_gallery__row {
    display: none;
  }

  .sell_gallery__row--wide-left {
    display: block;
    width: 100%;
  }

  .sell_gallery__row--wide-left .sell_gallery__cell--narrow {
    display: none;
  }

  .sell_gallery__row--wide-left .sell_gallery__cell--wide {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .sell_gallery__row--wide-left .sell_gallery__cell--wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* --- Process step hover underline --- */
.sell_process__step {
  position: relative;
}
.sell_process__step::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 48px;
  right: 32px;
  height: 2px;
  background: #41545C;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sell_process__step:hover::after {
  transform: scaleX(1);
}

/* --- Touch devices: disable hover effects --- */
@media (hover: none) {
  .sell-hover-photo { display: none !important; }
  .sell_process__step::after { display: none; }
}

/* --- Large screens: hero subtitle flows as one natural line ---
   The Site-Text copy carries a hardcoded <br/> (e.g. ES "…sin demoras<br/>ni
   rebajas del 20–30%") that leaves a dangling second line on wide viewports.
   Hide it above the tablet breakpoint and let the column width do the wrapping. */
@media (min-width: 1201px) {
  .sell_hero__text p br { display: none; }
  .sell_hero__text p { max-width: none; }
}