/* ============================================================
   Максим Решетняк — realtor landing
   Method: mobile-first. Base styles target a phone (iPhone-ish);
   min-width media queries progressively enhance for tablet/desktop.
   Theme: light only.
   ============================================================ */

/* ---------- Font: Geist (variable, subset cyrillic+latin) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;        /* single variable file covers all weights */
  font-style: normal;
  font-display: swap;          /* show fallback text immediately, swap when ready */
}

/* ---------- Design tokens ---------- */
:root {
  /* Colour — one blue accent, warm colour only on the hero trust badge */
  --blue:        #2563EB;
  --blue-dark:   #1D4ED8;
  --blue-soft:   #E8F0FE;   /* tinted backgrounds for icon tiles / tags */
  --blue-softer: #F2F6FE;

  --warm:        #E27A2D;
  --warm-bg:     #FCEFE2;
  --warm-border: #F3C79C;

  --ink:   #141C2B;         /* headings — not pure black */
  --body:  #4B5563;         /* body text */
  --muted: #6B7280;         /* captions / meta */

  --bg:        #FFFFFF;
  --bg-muted:  #F6F8FB;     /* alternating section background */
  --surface:   #FFFFFF;     /* cards */
  --line:      #E7EBF0;     /* hairlines & card borders */

  --sold:      #1D4ED8;     /* "Продано" tag */
  --sold-bg:   #E8F0FE;
  --rented:    #0F766E;     /* "Сдано" tag — a teal that reads as "different state" */
  --rented-bg: #E3F5F1;

  /* Radius — shape lock: cards 18px, icon tiles 14px, pills full, tags 8px */
  --r-tag:  8px;
  --r-tile: 14px;
  --r-card: 18px;
  --r-pill: 999px;

  /* Shadows — tinted to the ink hue, never pure black */
  --shadow-sm: 0 1px 2px rgba(20,28,43,.05), 0 1px 3px rgba(20,28,43,.05);
  --shadow-md: 0 6px 22px rgba(20,28,43,.07), 0 2px 6px rgba(20,28,43,.04);
  --shadow-lg: 0 20px 55px rgba(20,28,43,.12);

  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* offset anchor jumps so the sticky header does not cover section titles —
     matches .header__inner's min-height exactly, so no header-colored gap
     (showing the previous section's background) is left above the target */
  scroll-padding-top: 64px;
  /* Clip the off-canvas nav panel's overflow at the root without turning
     html into a scroll container (clip keeps sticky + smooth scroll working). */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No overflow-x here: pairing it with the default overflow-y:visible makes
     the UA promote body into its own scroll container (auto/auto), which
     breaks position:sticky for .site-header (it sticks to body's edge, not
     the viewport's, so it scrolls away instead of staying pinned). html's
     overflow-x: clip below already guards against horizontal scroll. */
}

/* ---------- Page-load entrance ---------- */
/* Starts slightly faded + shifted down; main.js flips .is-loaded on
   DOMContentLoaded so the whole page settles in as one soft motion. */
body {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body.is-loaded { opacity: 1; transform: none; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* Icons: inherit colour + size, standardised stroke */
.icon {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  z-index: 200;
  background: var(--blue); color: #fff;
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: 56px; }
.section--muted { background: var(--bg-muted); }

.section__head { max-width: 720px; margin-bottom: 32px; }
.section__title { font-size: clamp(1.55rem, 5vw, 2.2rem); letter-spacing: -0.02em; }
.section__sub { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); max-width: 60ch; }

/* Reusable card surface */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-tile);
  font: inherit; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.btn--primary:hover { background: var(--blue-dark); }
.btn--primary:active { transform: translateY(1px); }

.btn--outline { background: #fff; color: var(--blue); border-color: rgba(37,99,235,.4); }
.btn--outline:hover { background: var(--blue-soft); border-color: var(--blue); }

/* Icon-only round button (quick contacts) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-tile);
  background: #fff; color: var(--blue);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

/* Filled variant: used in the hero, where phone/WhatsApp/Telegram are the
   primary conversion action and the blog link is secondary (outline). */
.icon-btn--primary {
  background: var(--blue); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
}
.icon-btn--primary:hover { background: var(--blue-dark); color: #fff; }

/* ---------- Badge / tag ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 600;
}
.badge--warm { background: var(--warm-bg); color: #b45309; border: 1px solid var(--warm-border); }
.badge--warm .icon { width: .8rem; height: .8rem; color: var(--warm); fill: var(--warm); stroke: var(--warm); }

.tag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: var(--r-tag);
  font-size: .8125rem; font-weight: 600;
  backdrop-filter: saturate(140%) blur(2px);
}
.tag--sold   { background: var(--sold-bg);   color: var(--sold); }
.tag--rented { background: var(--rented-bg); color: var(--rented); }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* JS adds .is-scrolled once the page is scrolled a little */
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__logo { width: 34px; height: 33px; flex: none; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.brand__role { font-size: .8125rem; color: var(--muted); }

.nav__list { display: flex; gap: 4px; }
.nav__list a {
  display: inline-block; padding: 8px 12px; border-radius: 10px;
  color: var(--body); font-weight: 500; font-size: .95rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__list a:hover { color: var(--ink); background: var(--bg-muted); }

/* Hamburger — shown on mobile/tablet, hidden on desktop */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); cursor: pointer;
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }

/* Mobile: nav drops down from under the header bar. Height is content-driven,
   so the panel ends right after the "Мой блог" button. The panel lives inside
   the header's stacking context (z-index 100), which keeps it ABOVE the
   backdrop (z-index 90) — links stay clickable while the page is dimmed. */
.nav {
  position: fixed; top: 64px; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 8px;
  padding-inline: 20px;
  max-height: 0; overflow: hidden;    /* collapsed: unfolds downward when open */
  visibility: hidden;                 /* out of tab order when closed */
  transition: max-height .3s var(--ease), padding .3s var(--ease),
              visibility 0s linear .3s;
}
.nav.is-open {
  max-height: 480px;                  /* > content height; content sets the real cut */
  padding-block: 10px 20px;
  visibility: visible;
  transition: max-height .3s var(--ease), padding .3s var(--ease), visibility 0s;
}
.nav__list { flex-direction: column; gap: 2px; }
.nav__list a { display: block; padding: 12px 14px; font-size: 1.05rem; }
.nav__cta { margin-top: 10px; align-self: stretch; }

/* Dim layer sits BELOW the sticky header (z 90 < 100): the header bar,
   the burger and the dropdown panel all stay interactive. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,28,43,.4);
  opacity: 0; transition: opacity .28s var(--ease);
}
.nav-backdrop.is-open { opacity: 1; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: 24px 40px; overflow: hidden; }
.hero__grid { display: flex; flex-direction: column; gap: 20px; }

/* Mobile-first: compact type so photo + CTA row fit the first screens */
.hero__title {
  font-size: clamp(1.7rem, 6.8vw, 3.4rem);
  letter-spacing: -0.03em; line-height: 1.1;
  margin-top: 12px;
}
.hero__lead {
  margin-top: 10px; font-size: .9rem; max-width: 46ch;
}

/* CTA row is a sibling of content/media (mobile order: text, photo, CTAs) */
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px;
}
.quick-contacts { display: inline-flex; gap: 10px; }

/* Portrait cutout, no backdrop */
.hero__media { order: 0; }
.hero__photo-wrap {
  position: relative;
  display: flex; justify-content: center;
  max-width: 420px; margin-inline: auto;
}
.hero__photo { width: auto; height: 220px; object-fit: contain; object-position: bottom center; }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-tile);
  padding: 10px 12px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;                      /* let the tile shrink inside the grid */
}
.stat__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stat__icon { color: var(--blue); width: 1rem; height: 1rem; flex: none; }
/* Compact type so long words ("Юридическое", "недвижимости") fit the tile;
   hyphens:auto adds a proper Russian hyphen if a word still has to break */
.stat__num {
  font-weight: 700; color: var(--ink); font-size: .875rem; letter-spacing: -0.01em;
  min-width: 0; overflow-wrap: break-word; hyphens: auto;
}
/* Indent to align under the number, not under the icon (icon width + .stat__top gap) */
.stat__label { font-size: .8rem; color: var(--muted); line-height: 1.35; padding-left: calc(1rem + 6px); overflow-wrap: break-word; hyphens: auto; }

/* ============================================================
   SERVICES
   ============================================================ */
.services__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.service-card { padding: 20px; display: flex; flex-direction: column; gap: 10px;
  min-width: 0;                      /* grid item: let it shrink instead of overflowing */
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #DCE6F6; }
/* Icon and title share one row; custom icons carry their own frame */
.service-card__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.service-card__icon { width: 44px; height: auto; flex: none; }
/* hyphens: manual (word titles here comfortably fit the card at every
   breakpoint) — auto stays reserved for the narrow .stat tiles below,
   where a real word ("Юридическое") needs it. */
.service-card__title { font-size: 1rem; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.service-card__text { font-size: .9rem; color: var(--muted); overflow-wrap: break-word; }

/* ============================================================
   PROCESS (steps) — framed icon + arrow connector.
   Layout adapted from the chinese-shop "steps" section. The custom
   icons already carry a blue frame, so the art holder stays transparent.
   ============================================================ */
.steps__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.step {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm); padding: 18px 20px;
  min-width: 0;                      /* grid item: let it shrink instead of overflowing */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Icon and title share one row, matching the services-card layout */
.step__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.step__art { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.step__art img { width: 44px; height: 44px; object-fit: contain; }
.step__body { min-width: 0; }
/* hyphens: manual — these titles never need a mid-word break, so auto
   hyphenation only produced ugly syllable breaks ("Встре-ча") on the
   narrower desktop columns; balance keeps a 2-line title even on top. */
.step__title {
  font-size: 1rem; margin-bottom: 4px; min-width: 0;
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
.step__text { font-size: .9rem; color: var(--muted); overflow-wrap: break-word; }

/* ============================================================
   ABOUT (principles / photo / qualification)
   ============================================================ */
.about__grid { display: flex; flex-direction: column; gap: 32px; }
.about__sub { margin-top: 10px; margin-bottom: 22px; font-size: 1.0625rem; color: var(--muted); }

.principles { display: grid; gap: 18px; }
.principle { display: flex; gap: 14px; align-items: flex-start; }
.principle__icon {
  display: inline-flex; align-items: flex-start; justify-content: center;
  color: var(--blue); flex: none; margin-top: 2px;   /* bare icon, no tile */
}
.principle__icon .icon { width: 1.5rem; height: 1.5rem; }
.principle__title { font-size: 1.0125rem; margin-bottom: 4px; }
.principle__text { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* Mobile stack order follows the DOM: principles -> photo -> qualification.
   Height matches .hero__photo so both mobile portraits render the same size. */
.about__media { display: flex; justify-content: center; }
.about__photo {
  width: auto; height: 220px;
  object-fit: contain;
}

.qualification { padding: 28px 24px; }
.qualification__title { font-size: 1.25rem; margin-bottom: 20px; }
.qualification__list { display: grid; gap: 20px; }
.qual-item + .qual-item { border-top: 1px solid var(--line); padding-top: 20px; }
.qual-item__title { color: var(--ink); font-weight: 600; overflow-wrap: break-word; }
.qual-item__meta { font-size: .9rem; color: var(--muted); overflow-wrap: break-word; }

/* ============================================================
   SALE (active listing)
   ============================================================ */
.sale__layout { display: flex; flex-direction: column; gap: 32px; }
.sale__title { order: 0; }
.sale-gallery { order: 1; }
.sale__content { order: 2; }
.sale__content, .sale-gallery { min-width: 0; }
.sale__name {
  max-width: 34ch;
  font-size: 1.25rem;
  line-height: 1.3;
}
.sale__address { margin-top: 4px; color: var(--muted); font-size: .95rem; }
.sale__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sale__fact {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-tile); box-shadow: var(--shadow-sm);
  color: var(--ink); font-weight: 600;
}
.sale__fact .icon { width: 1.35rem; height: 1.35rem; color: var(--blue); }
.sale__description { margin-top: 24px; max-width: 62ch; color: var(--body); }
.sale__price {
  margin-top: 20px;
  color: var(--ink); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em;
}
.sale__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }

.sale-gallery__viewport {
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sale-gallery__viewport::-webkit-scrollbar { display: none; }
.sale-gallery__track { display: flex; gap: 12px; }
.sale-gallery__slide { flex: 0 0 88%; min-width: 0; scroll-snap-align: start; }
.sale-gallery__button {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.sale-gallery__button img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s var(--ease);
}
.sale-gallery__button:hover img { transform: scale(1.02); }
.sale-gallery__dots {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  margin-top: 14px;
}

/* ============================================================
   CAROUSEL (shared by Objects + Reviews)
   ============================================================ */
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  transition: transform .45s var(--ease);
  will-change: transform;
}
.carousel__slide { flex: 0 0 100%; padding: 6px; min-width: 0; }

.carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 22px;
}
.carousel__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.carousel__arrow:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.carousel__arrow:disabled { opacity: .4; cursor: default; }
.carousel__arrow:disabled:hover { background: #fff; color: var(--ink); border-color: var(--line); }

.carousel__dots { display: flex; gap: 2px; }
/* Visual dot is 8px, but padding + content-box clip give a 24px tap target (WCAG 2.5.8) */
.carousel__dot {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: #CBD5E1; background-clip: content-box;
  border: none; padding: 8px; cursor: pointer;
  transition: background-color .2s var(--ease), width .2s var(--ease);
}
.carousel__dot.is-active { background: var(--blue); background-clip: content-box; width: 38px; }

/* Object card */
.object-card {
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.object-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #DCE6F6; }
.object-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--bg-muted); }
.object-card__media img { width: 100%; height: 100%; object-fit: cover; }
.object-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.object-card__title { font-size: 1.075rem; overflow-wrap: break-word; }
.object-card__meta { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); min-width: 0; overflow-wrap: break-word; }
.object-card__meta .icon { width: 1rem; height: 1rem; color: var(--blue); }
.object-card__result { font-size: .95rem; color: var(--body); margin-top: 2px; overflow-wrap: break-word; }

/* Review card */
.review-card {
  padding: 28px 24px; height: 100%; display: flex; flex-direction: column; gap: 14px; margin: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #DCE6F6; }
.review-card__stars { display: inline-flex; gap: 3px; color: var(--warm); }
.review-card__stars .icon { width: 1.15rem; height: 1.15rem; fill: var(--warm); stroke: var(--warm); }
.review-card__text { font-size: 1.0125rem; color: var(--ink); line-height: 1.6; overflow-wrap: break-word; }
.review-card__author { display: flex; flex-direction: column; margin-top: auto; }
.review-card__name { font-weight: 700; color: var(--ink); }
.review-card__role { font-size: .875rem; color: var(--muted); }

/* ============================================================
   FAQ (native details/summary accordion)
   ============================================================ */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-tile);
  overflow: hidden;
  min-width: 0;                      /* grid item: let it shrink instead of overflowing */
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink); font-size: 1.0125rem;
  min-width: 0; overflow-wrap: break-word;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chevron { color: var(--blue); transition: transform .25s var(--ease); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { padding: 0 20px 20px; color: var(--muted); }
.faq__a p { max-width: 68ch; }

/* ============================================================
   CONTACTS
   ============================================================ */
.contacts__inner { display: flex; flex-direction: column; gap: 28px; }
.contacts__sub { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); }
.contacts__note { margin-top: 16px; max-width: 52ch; }

.contacts__cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.contact-card {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  padding: 18px 20px;
  min-width: 0;                      /* grid item: let it shrink instead of overflowing */
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #DCE6F6; }
.contact-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; color: var(--blue);                    /* bare icon, no tile */
}
.contact-card__icon .icon { width: 1.6rem; height: 1.6rem; }
.contact-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-card__label { font-weight: 700; color: var(--ink); font-size: 1.075rem; }
.contact-card__value { color: var(--muted); white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding-block: 22px; background: #fff; }
.site-footer__inner {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; text-align: center;
  font-size: .9rem; color: var(--muted);
}

/* ============================================================
   OBJECT LIGHTBOX (native <dialog>)
   ============================================================ */
.object-card { cursor: pointer; }

/* Lock page scroll while any modal is open (iOS otherwise scrolls the page
   behind, toggling the toolbar and making the dialog jump). */
html:has(dialog[open]) { overflow: hidden; }
/* Same lock for the mobile nav panel (JS toggles this class on <html>;
   body.style.overflow doesn't reliably stop scroll on iOS Safari). */
html.nav-open { overflow: hidden; }

.lightbox {
  border: none; padding: 0; margin: auto;
  width: min(92vw, 840px);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(20, 28, 43, .6); }
.lightbox__figure { margin: 0; aspect-ratio: 3 / 2; background: var(--bg-muted); }
.lightbox__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__body { padding: 18px 22px 24px; }
/* Inside the lightbox the deal tag flows with the text (cards position it over the photo) */
.lightbox .tag { position: static; display: inline-block; margin-bottom: 8px; }
.lightbox__title { font-size: 1.3rem; margin-bottom: 4px; }
.lightbox__meta { color: var(--muted); font-size: .95rem; }
.lightbox__result { margin-top: 8px; color: var(--body); }
.lightbox__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: var(--shadow-md); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lightbox__close .icon { width: 1.1rem; height: 1.1rem; }
.lightbox__close:hover { background: var(--blue); color: #fff; }

/* Active listing lightbox keeps landscape and portrait photos fully visible.
   Kept small + capped on mobile so iOS Safari's toolbar show/hide doesn't
   make the dialog jump: svh is the small-viewport fallback for older iOS. */
.sale-lightbox { width: min(92vw, 960px); max-height: 90vh; max-height: 90svh; }
.sale-lightbox__figure {
  position: relative; height: min(50vh, 420px); height: min(50svh, 420px); aspect-ratio: auto;
  background: var(--ink);
}
.sale-lightbox__figure .lightbox__img { object-fit: contain; }
.sale-lightbox__arrow {
  position: absolute; top: 50%; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md);
  cursor: pointer; transform: translateY(-50%);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.sale-lightbox__arrow .icon { width: 1.1rem; height: 1.1rem; }
.sale-lightbox__arrow:hover { background: var(--blue); color: #fff; }
.sale-lightbox__arrow:disabled { opacity: .4; cursor: default; }
.sale-lightbox__arrow:disabled:hover { background: var(--surface); color: var(--ink); }
.sale-lightbox__arrow--prev { left: 8px; }
.sale-lightbox__arrow--next { right: 8px; }
.sale-lightbox__body {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px;
}
.sale-lightbox__body > div { min-width: 0; }
.sale-lightbox__count { color: var(--muted); white-space: nowrap; }

/* ============================================================
   BLOG PAGE
   ============================================================ */
/* Mobile-first: sidebar (title/intro) stacks above the feed */
.blog-layout { padding-block: 40px 8px; display: flex; flex-direction: column; gap: 8px; }
.blog-sidebar { order: -1; }
.page-head__title { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -0.03em; }
.page-head__intro { margin-top: 16px; max-width: 60ch; font-size: 1.0625rem; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 20px; color: var(--blue); font-weight: 600;
}
.back-link .icon { width: 1.1rem; height: 1.1rem; }
.back-link:hover { color: var(--blue-dark); }

.posts { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
.post-card { padding: 28px 26px; }
.post-card__date { font-size: .85rem; color: var(--muted); font-weight: 600; }
.post-card__title { font-size: 1.35rem; margin: 8px 0 12px; letter-spacing: -0.01em; overflow-wrap: break-word; }
.post-card__body { color: var(--body); }
.post-card__body p + p { margin-top: 12px; }
.post-card__published { margin-top: 20px; font-size: .75rem; color: var(--muted); opacity: .7; }
.post-card--stub {
  border-style: dashed; background: var(--bg-muted); box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  color: var(--muted); text-align: left;
}

/* Desktop: feed on the left, sticky title/intro (+future filters) on the right */
@media (min-width: 64em) {
  .blog-layout {
    display: grid; grid-template-columns: 1fr 320px; align-items: start; gap: 48px;
  }
  .blog-sidebar { order: 0; position: sticky; top: 96px; }
  .posts { margin-top: 0; }
}

/* ============================================================
   SCROLL-REVEAL (subtle, motivated entrance for sections)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE — tablet (>= 640px)
   ============================================================ */
@media (min-width: 40em) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two step cards per row on tablets */
  .contacts__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-card { padding: 18px 16px; gap: 12px; }
  .contact-card__label { font-size: 1rem; }
  .contact-card__value { font-size: .8125rem; }
  .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
  .hero__photo { height: 380px; }
  .sale-lightbox__figure { height: min(64vh, 620px); height: min(64svh, 620px); }
}

/* ============================================================
   RESPONSIVE — tablet landscape (>= 48em / 768px)
   ============================================================ */
@media (min-width: 48em) {
  .section { padding-block: 72px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { padding-block: 40px 56px; }

  /* Objects carousel: two cards per view */
  .carousel--objects .carousel__slide { flex-basis: 50%; }

  /* Reviews: two per view on wide tablets */
  .carousel--reviews .carousel__slide { flex-basis: 50%; }

  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ============================================================
   RESPONSIVE — desktop (>= 64em / 1024px)
   ============================================================ */
@media (min-width: 64em) {
  html { scroll-padding-top: 72px; }   /* matches .header__inner's taller desktop height below */
  .container { padding-inline: 32px; }
  .section { padding-block: 88px; }

  /* Nav becomes a normal inline bar; hide the hamburger + panel chrome */
  .nav-toggle { display: none; }
  .nav {
    position: static; height: auto; width: auto; padding: 0;
    background: none; border: none; box-shadow: none;
    flex-direction: row; align-items: center; gap: 8px;
    max-height: none; overflow: visible; visibility: visible;
  }
  .nav__list { flex-direction: row; gap: 2px; }
  .nav__list a { padding: 8px 12px; font-size: .95rem; }
  .nav__cta { margin-top: 0; margin-left: 8px; }
  .nav-backdrop { display: none !important; }
  .header__inner { min-height: 72px; }

  /* Hero: two columns via grid areas — text + CTAs top-left, stats bottom-left, photo right */
  .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.85fr;
    grid-template-areas:
      "content media"
      "actions media"
      "stats   media";
    /* auto (not 1fr): keeps the stats row sized to its own content, so the
       tiles sit right under the CTAs instead of getting pinned to the
       bottom of the (taller) photo column on narrower desktop widths. */
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 48px; row-gap: 24px;
  }
  .hero__content { grid-area: content; }
  .hero__media   { grid-area: media; align-self: stretch; }
  .hero__actions { grid-area: actions; justify-content: flex-start; margin-top: 12px; }
  .stats         { grid-area: stats; align-self: start; margin-top: 20px; }

  .hero__title { margin-top: 28px; font-size: clamp(2.4rem, 3.2vw, 3.4rem); }
  .hero__lead  { margin-top: 18px; font-size: 1.0625rem; }
  .hero__photo-wrap { max-width: none; height: 100%; align-items: flex-end; }
  .hero__photo { height: 100%; max-height: 560px; }

  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* last two cards centre nicely in a 3-col grid: keep 3+2 rhythm */

  /* Process: five step cards in a row with arrow connectors.
     Icon size matches the services cards (44px) on every breakpoint. */
  .steps__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 40px; row-gap: 24px; }
  .step { padding: 22px 20px; }
  .step__text { max-width: 30ch; }

  /* Arrow between adjacent steps: centred in the column-gap (40px) on X,
     and centred on the card's vertical middle on Y. */
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; left: 100%;
    margin-left: 20px;                 /* half of .steps__grid column-gap */
    transform: translate(-50%, -50%);
    width: 26px; height: 26px; background: var(--blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* About: three columns principles | photo | qualification */
  .about__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1fr;
    gap: 40px; align-items: start;
  }
  .about__media { order: 0; align-self: stretch; }
  .about__photo { width: 100%; height: 100%; }

  /* Active listing: copy left, five-image composition right. */
  .sale__layout {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "title gallery"
      "content gallery";
    grid-template-rows: auto 1fr;
    align-items: start; column-gap: 48px; row-gap: 0;
  }
  .sale__title { grid-area: title; }
  .sale__content { grid-area: content; align-self: center; }
  .sale__name { margin-top: 12px; }
  .sale-gallery { grid-area: gallery; align-self: center; }
  .sale-gallery__viewport { overflow: visible; }
  .sale-gallery__track {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  }
  .sale-gallery__slide { min-width: 0; }
  .sale-gallery__slide--hero { grid-column: 1 / -1; }
  .sale-gallery__slide--hero .sale-gallery__button { aspect-ratio: 16 / 9; }
  .sale-gallery__slide:not(.sale-gallery__slide--hero) .sale-gallery__button { aspect-ratio: 1 / 1; }
  .sale-gallery__dots { display: none; }

  /* Objects: three cards per view */
  .carousel--objects .carousel__slide { flex-basis: 33.3333%; }
  /* Reviews: back to comfortable two per view */
  .carousel--reviews .carousel__slide { flex-basis: 50%; }

  /* Contacts: text left, cards right */
  .contacts__inner { flex-direction: row; align-items: center; gap: 48px; }
  .contacts__lead { flex: 1 1 40%; }
  .contacts__cards { flex: 1 1 60%; }
}

/* ============================================================
   RESPONSIVE — large desktop (>= 80em / 1280px)
   ============================================================ */
@media (min-width: 80em) {
  .hero__title { font-size: 3.4rem; }

  /* Restore the original bottom-pinned stats layout on wide desktop, where
     the tall hero photo leaves generous room and the pinned tiles read as
     intentional breathing space rather than an orphaned gap. */
  .hero__grid { grid-template-rows: auto auto 1fr; }
  .stats { align-self: end; }
}

/* ============================================================
   Reduced motion — collapse animations to static
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  body { opacity: 1; transform: none; }
}