.eyebrow,
.cm-eyebrow {
  display: block;
  font-size: var(--type-label);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  color: var(--muted);
}

.nav [aria-current] {
  border-bottom: 1px solid #9c8348;
  color: var(--gold-on-light);
}

/* Aktivní položka už má linku (border-bottom), obecné a:not([class]):hover
   ze styles.css by na hover přidalo druhé podtržení hned pod text. */
.nav [aria-current]:hover {
  text-decoration: none;
}

.sale-hero {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 7%;
  background: var(--green);
  color: var(--paper);
  padding: var(--hero-pt) var(--hero-px) var(--hero-pb);
}

.sale-intro {
  min-width: 0;
  position: relative;
  align-self: center;
}

.breadcrumb {
  display: block;
  font-size: 14px;
  color: var(--subtle-on-dark);
  margin-bottom: 42px;
}

.sale-intro > .eyebrow {
  color: var(--gold);
  margin-bottom: 15px;
}

.sale-intro h1 {
  font-size: var(--type-hero);
  width: auto;
  line-height: var(--leading-heading);
  letter-spacing: -0.05em;
  margin-bottom: 24px;
}

.sale-intro > p {
  max-width: 550px;
  font-size: var(--type-lead);
  line-height: var(--leading-lead);
  color: var(--muted-on-dark);
}

/* Klíčové body na tmavých sekcích (hero prodeje, závěrečný kontakt): chipy
   pod sebou, každý se zlatou svislou linkou vlevo. Kroužek s fajfkou se čte
   jako checkbox/tlačítko, proto jen linka – chip tak nepůsobí klikatelně. */
.assurances {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
}

.assurances li {
  padding: 9px 18px 9px 15px;
  line-height: 1.45;
  color: var(--text-on-dark);
  background: #ffffff0a;
  border-left: 2px solid var(--gold);
}

.hero-art {
  height: 145px;
  position: relative;
  margin-top: 20px;
  overflow: hidden;
  border-top: 1px solid #ffffff20;
  display: flex;
  align-items: center;
}

.hero-art img {
  width: 250px;
  height: 190px;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: screen;
  opacity: 0.75;
  margin-left: -30px;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 20%,
    #000 70%,
    transparent
  );
}

.hero-art span {
  color: var(--muted-on-dark);
  font-size: 16px;
  line-height: 1.6;
  margin-left: 12px;
}

.sale-form {
  background: #f7f7f2;
  color: var(--ink);
  padding: 34px 36px;
  align-self: center;
  scroll-margin-top: 25px;
  max-width: 650px;
}

.sale-form > .eyebrow {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--gold-on-light);
}

.cm-formcard__title {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0 0 26px;
  font-weight: 500;
}

.cm-hp {
  display: none;
}

.cm-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cm-field {
  margin-bottom: 15px;
  min-width: 0;
}

.cm-field label {
  display: block;
  font-size: var(--type-label);
  margin-bottom: 7px;
}

.cm-field input:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
.cm-field textarea {
  width: 100%;
  border: 1px solid var(--line-control);
  background: transparent;
  border-radius: 0;
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  min-height: 45px;
}

.cm-field textarea {
  resize: vertical;
  min-height: 85px;
}

.cm-field input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus,
.cm-field textarea:focus {
  outline: 2px solid var(--gold-on-light);
  outline-offset: 2px;
}

.cm-req {
  color: var(--gold-on-light);
}

.cm-form-error {
  color: #a03324;
  font-size: 14px;
  margin: 5px 0;
}

.cm-field input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]),
.cm-field textarea[aria-invalid="true"] {
  border-color: #a03324;
  box-shadow: 0 0 0 1px #a03324;
}

.cm-field.has-error > label,
.cm-field.has-error > .cm-bool__label,
.cm-gdpr.has-error label {
  color: #a03324;
}

.cm-bool__label {
  display: block;
  font-size: var(--type-label);
  margin-bottom: 7px;
}

.cm-bool__opts {
  display: flex;
  gap: 22px;
  align-items: center;
}

.cm-bool__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  cursor: pointer;
}

.cm-bool__opt input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  margin: 0;
}

.cm-bool__opt input:focus-visible {
  outline: 2px solid var(--gold-on-light);
  outline-offset: 2px;
}

.cm-form-error:empty,
.cm-form-status:empty {
  display: none;
}

.cm-fileadd__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.cm-fileadd__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 5px 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
}

.cm-fileadd__hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 7px 0;
}

.cm-fileadd__list {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cm-fileadd__list:empty {
  display: none;
}

.cm-fileadd__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(32, 64, 47, 0.07);
}

.cm-fileadd__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-fileadd__remove {
  flex: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 2px 0;
  background: transparent;
  color: #a03324;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cm-fileadd__remove:hover {
  border-bottom-color: transparent;
}

.cm-fileadd.has-error .cm-fileadd__btn {
  color: #a03324;
}

.cm-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
  margin: 17px 0;
}

.cm-gdpr input {
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cm-gdpr a {
  text-decoration: underline;
}

.cm-form-submit {
  display: block;
  width: 100%;
  border: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 16px 20px;
  font-size: var(--type-cta);
  font-weight: var(--weight-cta);
  cursor: pointer;
  min-height: 52px;
}

.cm-form-submit:hover {
  background: #e7d5a6;
}

.cm-form-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.cm-form-status {
  display: none;
  margin-top: 14px;
  border: 1px solid transparent;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
}

.cm-form-status.is-visible {
  display: block;
}

.cm-form-status__kicker {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cm-form-status__title {
  margin: 0;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.cm-form-status__text {
  margin: 7px 0 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.cm-form-status--success {
  border-color: rgba(31, 107, 75, 0.28);
  background: rgba(31, 107, 75, 0.1);
  color: #1f6b4b;
}

.cm-form-status--error {
  border-color: rgba(160, 51, 36, 0.28);
  background: rgba(160, 51, 36, 0.08);
  color: #a03324;
}

.cm-form-status a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sale-situations,
.sale-process,
.sale-map,
.sale-faq,
.sale-contact {
  padding-top: 86px;
  padding-bottom: 86px;
}

.section-head {
  margin-bottom: 48px;
}

.section-head h2,
.cm-h2,
.sale-contact h2 {
  font-size: var(--type-section);
  line-height: var(--leading-heading);
}

.section-head p,
.cm-lead {
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
  max-width: 680px;
  color: var(--muted);
}

.situations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px 5%;
}

.situations-grid article {
  padding-top: 20px;
  border-top: 1px solid #c6d0c2;
}

.situations-grid article:nth-child(2) {
  --card-delay: 0.08s;
}

.situations-grid article:nth-child(3) {
  --card-delay: 0.16s;
}

.situations-grid article:nth-child(4) {
  --card-delay: 0.24s;
}

.situations-grid article:nth-child(5) {
  --card-delay: 0.32s;
}

.situations-grid article:nth-child(6) {
  --card-delay: 0.4s;
}

.situations-grid h3 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-card-title);
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin: 22px 0 12px;
}

.situations-grid p,
.process-steps p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--muted);
  margin: 0;
}

.sale-process {
  background: var(--deep);
  color: var(--paper);
}

.sale-process .eyebrow {
  color: var(--gold);
}

.sale-process .section-head p {
  color: var(--subtle-on-dark);
  margin: 22px 0 0;
}

/* Časová osa kroků: uzly s ikonou spojené 1 px linkou. Na desktopu vodorovně
   (4 sloupce), pod 1050 px svisle s uzly vlevo. Linka i uzly se při najetí
   do viewportu postupně rozsvítí (main.js přidá [data-reveal] + .is-visible),
   přes transition, takže reduced-motion ze styles.css animaci vypne. */
.process-steps {
  --step-gap: 22px;
  --node: 64px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
}

/* Osa nahoře (uzly spojené linkou nad kartami), pod ní karta s textem —
   linka tak zůstává celou dobu vidět a je zřejmé, že jde o časovou osu. */
.process-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step-card {
  flex: 1;
  background: #ffffff08;
  border: 1px solid #2d4b3d;
  padding: 22px 20px 24px;
}

.process-steps li:nth-child(2) {
  --i: 1;
}

.process-steps li:nth-child(3) {
  --i: 2;
}

.process-steps li:nth-child(4) {
  --i: 3;
}

.step-node {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--node);
  height: var(--node);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: transparent;
  transition:
    border-color 0.4s,
    color 0.4s,
    background-color 0.4s;
  transition-delay: calc(var(--i, 0) * 0.7s);
}

.step-node svg {
  width: 28px;
  height: 28px;
}

/* poslední uzel = cíl, plně zlatý */
.process-steps li:last-child .step-node {
  background: var(--gold);
  color: var(--deep);
}

/* spojnice k dalšímu uzlu: od okraje kolečka až k dalšímu, přes mezeru gridu */
.process-steps li:not(:last-child):before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  left: var(--node);
  right: calc(-1 * var(--step-gap));
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.7s + 0.15s);
}

.process-steps[data-reveal]:not(.is-visible) .step-node {
  border-color: #3d5a4d;
  color: #3d5a4d;
  background: transparent;
  transition: none;
}

.process-steps[data-reveal]:not(.is-visible) li:before {
  transform: scaleX(0);
  transition: none;
}

.step-number {
  display: block;
  font-size: 14px;
  color: var(--gold);
  margin: 0 0 10px;
}

.process-steps h3 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-card-title);
  line-height: 1.35;
  margin: 0 0 12px;
}

.process-steps p {
  color: var(--subtle-on-dark);
}

.sale-map {
  background: #e9eee6;
}

.cfgre-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 1fr);
  gap: 7%;
  align-items: center;
  margin-top: 45px;
}

.cfgre-map__figure {
  margin: 0;
  position: relative;
  min-width: 0;
}

.cfgre-map__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Obrys ČR: výplň v barvě sekce a ostrá šedá
   linka. Linka se při nascrollování „dokreslí" – sale-map.js dá .cfgre-map
   [data-reveal] a po najetí do záběru .is-visible; bez JS je mapa rovnou
   vykreslená. Body naskočí až po dokreslení linky. */
.cfgre-map__land {
  fill: #e9eee6; /* = pozadí .sale-map, plocha splývá se sekcí, zůstává jen linka a hrana */
  fill-opacity: 1;
  stroke: #afbaad;
  stroke-width: 1; /* tvar má vector-effect="non-scaling-stroke", takže 1 px na obrazovce */
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1),
    fill-opacity 0.8s ease 1.4s;
}

.cfgre-map[data-reveal]:not(.is-visible) .cfgre-map__land {
  stroke-dashoffset: 1;
  fill-opacity: 0;
  transition: none;
}

/* „Tloušťka" desky: kopie obrysu (<use> tvaru #cr-shape) posunuté pod sebe
   tvoří spodní hranu. Vrstvy jdou v DOM od nejhlubší (y=10) k nejbližší (y=2)
   a barevně přecházejí od zelené obrysu do tmavé, takže hrana „ubíhá" do stínu.
   Naskočí spolu s výplní po dokreslení linky. */
.cfgre-map__depth {
  stroke-width: 1;
  stroke-linejoin: miter;
  transition: opacity 0.8s ease 1.4s;
}

.cfgre-map__depth use:nth-child(1) { fill: #0e2a21; stroke: #0e2a21; }
.cfgre-map__depth use:nth-child(2) { fill: #1a382c; stroke: #1a382c; }
.cfgre-map__depth use:nth-child(3) { fill: #264438; stroke: #264438; }
.cfgre-map__depth use:nth-child(4) { fill: #314f43; stroke: #314f43; }
.cfgre-map__depth use:nth-child(5) { fill: #3d5a4d; stroke: #3d5a4d; }

.cfgre-map[data-reveal]:not(.is-visible) .cfgre-map__depth {
  opacity: 0;
  transition: none;
}

/* Halo: větší plocha pro najetí myši a zároveň zlatý prstenec kolem bodu
   (flat). Při najetí zesílí a mírně se roztáhne. */
.cfgre-map__halo {
  fill: #3d5a4d;
  fill-opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill-opacity 0.25s,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cfgre-map__pin {
  fill: #3d5a4d;
  stroke: none;
  transition: fill 0.2s;
}

.cfgre-map__dot {
  cursor: pointer;
  outline: 0;
  opacity: 1;
  transition: opacity 0.4s ease;
  transition-delay: calc(1.6s + var(--i, 0) * 0.025s);
}

.cfgre-map[data-reveal]:not(.is-visible) .cfgre-map__dot {
  opacity: 0;
  transition: none;
}

.cfgre-map__dot:hover .cfgre-map__halo,
.cfgre-map__dot:focus-visible .cfgre-map__halo,
.cfgre-map__dot.is-active .cfgre-map__halo {
  fill: var(--gold-on-light);
  fill-opacity: 0.3;
  transform: scale(1.15);
}

.cfgre-map__dot:hover .cfgre-map__pin,
.cfgre-map__dot:focus-visible .cfgre-map__pin,
.cfgre-map__dot.is-active .cfgre-map__pin {
  fill: var(--gold-on-light);
}

.cfgre-map__tip {
  position: absolute;
  background: var(--deep);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.4;
  padding: 7px 11px;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.cfgre-map__tip--left {
  transform: translate(-95%, calc(-100% - 12px));
}

.cfgre-map__tip--right {
  transform: translate(-5%, calc(-100% - 12px));
}

/* Bez svislé linky – vodorovné linky nad jednotlivými typy stačí. */
.cfgre-map__aside {
  padding-left: 28px;
  align-self: center;
}

.cfgre-map__types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

.cfgre-map__stat {
  margin: 0;
  display: grid;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid #c6d0c2;
}

/* Ikony typů nemovitostí = stejný .item-icon vzor jako karty „Vlastní portfolio“
   (tmavé zlato + šedozelený kroužek). Menší, ať nepřebijí čísla.
   Navíc: root mapy dostane data-reveal (obrys ČR), takže obecné pravidlo
   `[data-reveal]> :not(.is-visible) .item-icon` by tahy drželo skryté –
   proto barvu i viditelnost tahů držíme tady natvrdo. */
.cfgre-map__ico.item-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  color: var(--gold-on-light);
  border-color: #c6d0c2;
  transform: none;
}

.cfgre-map__ico svg {
  width: 20px;
  height: 20px;
  color: var(--gold-on-light);
}

.cfgre-map__ico path {
  stroke: var(--gold-on-light);
  stroke-dashoffset: 0;
}

.cfgre-map__stat strong {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
}

.cfgre-map__stat span {
  font-size: 14px;
  color: var(--muted);
}

.cfgre-map__note {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 35px 0 0;
}

.sale-faq > .cm-container {
  max-width: 860px;
  margin: auto;
}

.cm-faq {
  margin-top: 35px;
}

.cm-faq__item {
  border-top: 1px solid #cbd5c6;
}

.cm-faq__item:last-child {
  border-bottom: 1px solid #cbd5c6;
}

.cm-faq__q {
  padding: 24px 35px 24px 0;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.cm-faq__q::-webkit-details-marker {
  display: none;
}

.cm-faq__q:after {
  content: "+";
  position: absolute;
  right: 5px;
  color: var(--gold-on-light);
  font-size: 26px;
  top: 20px;
}

.cm-faq__item[open] summary:after {
  content: "−";
}

.cm-faq__a {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  padding: 0 35px 25px 0;
}
.cm-faq__a p {
  margin: 0 0 14px;
}
.cm-faq__a p:last-child {
  margin-bottom: 0;
}

.sale-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%;
  background: var(--green);
  color: var(--paper);
}

.sale-contact .eyebrow {
  color: var(--gold);
}

.sale-contact h2 {
  font-size: var(--type-section);
}

.sale-contact > div > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted-on-dark);
  margin: 25px 0;
}

.sale-contact > div > p:last-child {
  margin-bottom: 0;
}

/* Závěrečný kontakt bez formuláře (prodej-nemovitosti, nabidka-nemovitosti,
   investice): telefon a e-mail jako dva velké zlaté odkazy, pod nimi tlačítko na
   hlavní akci stránky (hero formulář, poptávkový modal, James). Sedí na tmavé
   sekci bez vlastního pozadí, od textu vlevo ho dělí jen svislá linka. */
.direct-contact {
  --dc-gap: 30px;
  border-left: 1px solid #ffffff30;
  padding-left: 35px;
  align-self: start;
}

.direct-contact__item {
  display: grid;
  gap: 6px;
  padding: 26px 0;
  border-bottom: 1px solid #ffffff30;
  color: inherit;
}

.direct-contact__item:first-child {
  padding-top: 0;
}

/* Varianta s telefonem a e-mailem vedle sebe (prodej nemovitosti): dvojici
   uzavírá jedna linka přes celou šířku (bloky samy už linku nemají) a CTA pod
   ní sedí jen v šířce levého sloupce, ne přes celou pravou část sekce. */
.direct-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dc-gap);
  padding-bottom: 24px;
  border-bottom: 1px solid #ffffff30;
}

.direct-contact__row .direct-contact__item {
  padding: 0;
  border-bottom: 0;
}

.direct-contact__row .direct-contact__value {
  font-size: 22px;
}

.direct-contact__row + .direct-contact__cta {
  max-width: calc(50% - var(--dc-gap) / 2);
}

/* Nabídka nemovitostí: pod kontakty nic není, takže žádná linka a blok se
   vertikálně vycentruje proti textu vlevo. */
.direct-contact:not(:has(.direct-contact__cta)) {
  align-self: center;
}

.direct-contact:not(:has(.direct-contact__cta)) .direct-contact__row {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Ikony v kroužku jako .item-icon karty, jen v barvách tmavé sekce. */
.direct-contact__ico {
  width: 42px;
  height: 42px;
  border-color: #ffffff4d;
  color: var(--gold);
  margin-bottom: 14px;
}

.direct-contact__ico svg {
  width: 20px;
  height: 20px;
}

.direct-contact__label,
.direct-contact__note,
.direct-contact__cta p {
  font-size: 14px;
  color: var(--subtle-on-dark);
}

.direct-contact__value {
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.direct-contact__value span {
  font-size: 18px;
  color: var(--paper);
}

.direct-contact__item:hover .direct-contact__value {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 6px;
}

.direct-contact__cta {
  padding-top: 26px;
}

.direct-contact__cta p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
}

.direct-contact__cta p.direct-contact__cta-title {
  font-size: 17px;
  line-height: 1.4;
  color: var(--paper);
  margin-bottom: 8px;
}

.direct-contact__cta .button {
  width: 100%;
}

/* Ve dvousloupcové variantě tlačítko nedrží 100 % (to by ho zúžilo na polovinu
   sloupce) – roztáhne se podle textu ve stejné velikosti jako CTA na homepage. */
.direct-contact__row + .direct-contact__cta .button {
  width: auto;
}

.footer {
  border-top: 1px solid #ffffff18;
}

/* Svislá osa pro tablet/mobil: uzel vlevo, obsah vpravo, linka vede z uzlu k dalšímu uzlu. */
@media (max-width: 1050px) {
  .process-steps {
    --step-gap: 34px;
    grid-template-columns: 1fr;
  }

  .process-steps li {
    display: grid;
    grid-template-columns: var(--node) 1fr;
    gap: 0 20px;
    align-items: start;
  }

  .step-number {
    margin: 0 0 6px;
  }

  /* Linka pokračuje svisle z kolečka do dalšího uzlu. */
  .process-steps li:not(:last-child):before {
    top: calc(var(--node) + 8px);
    bottom: calc(8px - var(--step-gap));
    left: calc(var(--node) / 2);
    right: auto;
    width: 1px;
    height: auto;
    transform-origin: top;
  }

  .process-steps[data-reveal]:not(.is-visible) li:before {
    transform: scaleY(0);
  }
}

/* Velký desktop: čtyři karty na celou šířku sekce, aby se text kroků nelámal
   do úzkých sloupců (nadpis proto zůstává nad osou, ne vedle ní). */
@media (min-width: 1280px) {
  .sale-process .section-head p {
    max-width: 760px;
  }

  .process-steps h3 {
    font-size: var(--type-card-title);
  }
}

@media (max-width: 1050px) {
  .sale-hero {
    gap: 5%;
  }

  .sale-form {
    padding: 28px;
  }

  .sale-intro h1 {
    font-size: var(--type-hero);
  }

  .hero-art img {
    width: 190px;
  }

  .hero-art span {
    font-size: 14px;
  }

  .sale-contact {
    gap: 5%;
  }

  .sale-contact h2 {
    font-size: var(--type-section);
  }

  .direct-contact {
    --dc-gap: 22px;
  }

  .direct-contact__row .direct-contact__value {
    font-size: 19px;
  }
}

@media (max-width: 760px) {
  .sale-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .breadcrumb {
    margin-bottom: 28px;
  }

  .sale-intro h1 {
    font-size: var(--type-hero);
  }

  .sale-intro > p {
    font-size: var(--type-lead);
  }

  .hero-art {
    height: 115px;
  }

  .sale-form {
    padding: 26px 22px;
  }

  .sale-situations,
  .sale-process,
  .sale-map,
  .sale-faq,
  .sale-contact {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .situations-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Ikona jde na mobilu do vlastního sloupce vedle titulku. Sloupec je široký
     přesně jako kroužek a ikona nesmí uhnout flexu v .item-head – jinak se
     kroužek zmáčkne do elipsy. */
  .situations-grid article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0 12px;
    align-items: start;
  }

  .situations-grid .item-icon {
    width: 38px;
    height: 38px;
    flex: none;
  }

  .situations-grid .item-icon svg {
    width: 18px;
    height: 18px;
  }

  .situations-grid h3 {
    margin: 0 0 12px;
  }

  .situations-grid p {
    grid-column: 2;
  }

  .item-number {
    padding-top: 4px;
  }

  .sale-process .section-head {
    display: block;
  }

  .sale-process .section-head p {
    margin-top: 25px;
  }

  .section-head {
    margin-bottom: 35px;
  }

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

  .cfgre-map__aside {
    border: 0;
    padding: 0;
  }

  .cfgre-map__tip {
    font-size: 12px;
  }

  .sale-contact {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .direct-contact {
    border-left: 0;
    border-top: 1px solid #ffffff30;
    padding: 30px 0 0;
  }

  .direct-contact__value {
    font-size: 24px;
  }

  .assurances {
    font-size: 14px;
    gap: 7px;
  }

  .assurances li {
    padding: 8px 14px 8px 12px;
  }

  .direct-contact__row {
    grid-template-columns: 1fr;
  }

  .direct-contact__row + .direct-contact__cta {
    max-width: none;
  }

  .direct-contact__row .direct-contact__value {
    font-size: 24px;
  }

  .cm-faq__q {
    font-size: 18px;
  }

}

@media (max-width: 390px) {
  .cm-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-art img {
    width: 155px;
  }

  .hero-art span {
    margin-left: 0;
  }

  .sale-form {
    padding: 24px 18px;
  }
}