/*
Theme Name: Aventa - Construction Theme
Theme URI: https://aventa.kg
Author: Aventa Stroy
Author URI: https://aventa.kg
Description: Modern starter theme for Aventa construction company
Version: 1.0.11
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aventa
Domain Path: /languages
Requires at least: 5.9
Requires PHP: 7.4
*/

:root {
  --primary-color: #d97706;
  --secondary-color: #1f2937;
  --accent-color: #f59e0b;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --bg-light: #f9fafb;
  --border-color: #e5e7eb;

  /* Typography */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ── Type scale — one system for component font sizes (rem @ 16px root) ──
     Snap component text to these steps instead of arbitrary values. */
  --fs-2xs: 0.6875rem;  /* 11px — micro labels */
  --fs-xs:  0.75rem;    /* 12px — eyebrows, meta */
  --fs-sm:  0.8125rem;  /* 13px — small print */
  --fs-msm: 0.875rem;   /* 14px — secondary body */
  --fs-base:0.9375rem;  /* 15px — default UI/body */
  --fs-md:  1rem;       /* 16px — body */
  --fs-lg:  1.0625rem;  /* 17px — lead body */
  --fs-xl:  1.125rem;   /* 18px */
  --fs-2xl: 1.25rem;    /* 20px */
  --fs-3xl: 1.375rem;   /* 22px */
  --fs-4xl: 1.5rem;     /* 24px */

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  /* ── Spacing scale (4pt grid) — use for gaps/padding rhythm ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Vertical rhythm for full-width sections (fluid). */
  --section-y: clamp(64px, 8vw, 120px);

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-pill: 999px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================
   GLOBAL TYPOGRAPHY SCALE
   Large headings run light; small labels run bold.
   Component styles (.hero__title, .card__title, …) override these.
   ========================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-dark);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: var(--fw-thin);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-light);
  line-height: 1.18;
  letter-spacing: -0.018em;
}

h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

h4 {
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: -0.008em;
}

h5 {
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

h6 {
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1.25em;
}

p:last-child {
  margin-bottom: 0;
}

strong, b { font-weight: var(--fw-bold); }

small { font-size: 0.8125rem; }

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color);
}

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

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

/* =========================================
   LAYOUT
   ========================================= */

.site-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Contain full-bleed (100vw) sections like #obj-location so the scrollbar
     width can't produce a horizontal page scroll. `clip` (not `hidden`) does
     not create a scroll container, so it never breaks position:sticky on the
     header (a sibling outside #content) or the inner .obj-aside. */
  overflow-x: clip;
}

.site-main {
  flex: 1;
  padding: 60px 0;
}

.content-area {
  width: 100%;
}

/* With sidebar */
.has-sidebar .site-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* =========================================
   HEADER
   ========================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Fullscreen mobile menu — open state (class toggled on <body> by JS). */
body.menu-open { overflow: hidden; }
/* Drop backdrop-filter while open: it establishes a containing block that would
   trap the fixed overlay to the header's height instead of the viewport. Also
   lift the header context above the WhatsApp FAB. */
body.menu-open .site-header {
  z-index: 1000;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.menu-open .wa-fab { opacity: 0; visibility: hidden; }
.mobile-menu { display: none; } /* body-level overlay; shown only on mobile (≤768px) */
@media (prefers-reduced-motion: reduce) {
  #mobile-menu,
  #mobile-menu .mobile-menu__inner > * { transition: none !important; transform: none !important; }
}

.site-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
}

/* Branding */
.site-branding {
  flex-shrink: 0;
}

.site-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
}

.site-title a {
  color: var(--text-dark);
}

.site-title a:hover {
  color: var(--primary-color);
}

.site-branding .custom-logo {
  height: 48px;
  width: auto;
}

.site-description {
  display: none;
}

/* =========================================
   NAVIGATION
   ========================================= */

.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.main-navigation ul li {
  position: relative;
}

.main-navigation ul li a {
  display: block;
  padding: 8px 14px;
  color: var(--text-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 6px;
  transition: color 0.25s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  background: none;
  color: var(--gold);
}

/* Premium active/hover indicator — animated gold-gradient underline with a
   soft glow. Scoped to top-level items so dropdown links stay clean. */
.main-navigation > ul > li > a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 1px 8px rgba(var(--gold-rgb), 0.5);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.main-navigation > ul > li > a:hover::after {
  transform: scaleX(0.55);
  opacity: 0.6;
}

.main-navigation > ul > li.current-menu-item > a::after,
.main-navigation > ul > li.current_page_item > a::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Dropdown */
.main-navigation ul ul {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  z-index: 200;
}

.main-navigation ul li:hover > ul {
  display: flex;
}

/* Touch devices (tablets on the desktop nav) can't hover — never trap a
   submenu behind :hover; show children stacked so they stay reachable. */
@media (hover: none) {
  .main-navigation ul li > ul {
    position: static;
    display: flex;
    box-shadow: none;
    background: transparent;
  }
}

.main-navigation ul ul li a {
  white-space: nowrap;
  border-radius: 4px;
}

/* Hamburger */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-dark);
  font-size: 0.875rem;
  font-weight: 500;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 22px;
  height: 18px;
  gap: 5px;
}

.hamburger::before,
.hamburger::after,
.hamburger {
  position: relative;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
  content: '';
}

/* Simple CSS hamburger lines via box-shadow trick */
.hamburger {
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  box-shadow: 0 -6px 0 var(--text-dark), 0 6px 0 var(--text-dark);
  transition: box-shadow 0.2s;
}

.menu-label {
  font-size: 0.875rem;
}

/* White hamburger while the header is transparent over a hero (before scroll). */
.home .site-header:not(.scrolled) .hamburger,
.page-template-page-home .site-header:not(.scrolled) .hamburger,
.single-object .site-header:not(.scrolled) .hamburger {
  background: #fff;
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}

/* =========================================
   POSTS GRID
   ========================================= */

.posts-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

.post-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}

.post-item:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.post-thumbnail {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-item:hover .post-thumbnail img {
  transform: scale(1.04);
}

.entry-header {
  padding: 24px 24px 0;
}

.entry-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.entry-title a {
  color: var(--text-dark);
}

.entry-title a:hover {
  color: var(--primary-color);
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.entry-meta a {
  color: var(--text-light);
}

.entry-meta a:hover {
  color: var(--primary-color);
}

.entry-content {
  padding: 16px 24px 24px;
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.7;
}

.entry-content p:last-child {
  margin-bottom: 0;
}

.entry-content .more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-color);
}

.entry-content .more-link:hover {
  color: var(--accent-color);
}

/* =========================================
   SINGLE POST / PAGE
   ========================================= */

.single .site-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}
/* Full-bleed single views (object detail, news article) — override the
   narrow .single .site-main reading column above. */
.single-object.single .site-main,
.single .site-main--object,
.single .site-main--article {
  max-width: 100%;
  margin: 0;
  padding: 0;
  /* `clip` lets the full-bleed location block reach the viewport edge
     without spawning a horizontal scrollbar — and, unlike `hidden`,
     it does not break `position: sticky` inside the page. */
  overflow-x: clip;
}

.single .entry-header,
.page .entry-header {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 32px;
}

.single .entry-title,
.page .entry-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--fw-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.single .post-thumbnail,
.page .post-thumbnail {
  margin-bottom: 32px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/7;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin: 2em 0 0.75em;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.25rem; }
.entry-content h4 { font-size: 1.0625rem; }

.entry-content p {
  margin-bottom: 1.25em;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.25em 1.5em;
}

.entry-content li {
  margin-bottom: 0.4em;
}

.entry-content blockquote {
  border-left: 4px solid var(--primary-color);
  margin: 2em 0;
  padding: 16px 24px;
  background: var(--bg-light);
  border-radius: 0 8px 8px 0;
  font-size: 1.0625rem;
  color: var(--text-dark);
  font-style: italic;
}

.entry-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-light);
}

.entry-footer a {
  color: var(--primary-color);
}

/* =========================================
   SIDEBAR
   ========================================= */

.primary-sidebar {
  position: sticky;
  top: 90px;
}

.widget {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}

.widget-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin: 0 0 16px;
}

.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9375rem;
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  color: var(--text-dark);
}

.widget ul li a:hover {
  color: var(--primary-color);
}

/* =========================================
   PAGINATION
   ========================================= */

.nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 0 20px;
  flex-wrap: wrap;
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-dark);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.nav-links .prev,
.nav-links .next {
  width: auto;
  padding: 0 16px;
  font-size: 0.875rem;
}

/* =========================================
   BUTTONS
   ========================================= */

.btn,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--accent-color);
  color: #fff;
  transform: translateY(-1px);
}

/* =========================================
   FORMS
   ========================================= */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--text-dark);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.search-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.search-field {
  flex: 1;
}

/* =========================================
   FOOTER
   ========================================= */

/* =========================================
   FOOTER SCENE — building + animated clouds
   ========================================= */

.footer-scene {
  position: relative;
  margin-top: auto;
  overflow: hidden;
  /* Night sky that melts into the footer's background at the bottom. */
  background:
    linear-gradient(180deg, var(--footer-sky, #1e2229) 0%, var(--footer-bg, #15171c) 100%);
  transition: background 0.3s ease;
}

/* Light theme: plain white sky behind the building (footer below stays dark). */
[data-theme="light"] .footer-scene {
  background: #F9FAFB;
}

/* Sky layer holds the drifting clouds (clipped to the scene). */
.footer-scene__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Building sits centered at the bottom, overlapping into the footer. */
.footer-scene__building {
  position: relative;
  z-index: 2;
  display: block;
  width: min(1000px, 88%);
  height: auto;
  margin: 0 auto -2px;
  filter: drop-shadow(0 -8px 40px rgba(0, 0, 0, 0.35));
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

/* On the white light-theme sky the dark drop-shadow would smudge — drop it. */
[data-theme="light"] .footer-scene__building {
  filter: none;
}

/* ── Clouds — soft blurred blobs drifting horizontally ─────────────────── */
.footer-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(220, 226, 236, 0.16), rgba(220, 226, 236, 0) 70%);
  filter: blur(8px);
  will-change: transform;
  pointer-events: none;
}

/* On the light sky the clouds turn greyer so they stay visible. */
[data-theme="light"] .footer-cloud {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), rgba(96, 110, 130, 0) 72%);
}

.footer-cloud--1 {
  top: 12%;
  left: -25%;
  width: 360px;
  height: 120px;
  animation: footerCloudDrift 55s linear infinite;
}

.footer-cloud--2 {
  top: 26%;
  left: -35%;
  width: 480px;
  height: 150px;
  opacity: 0.8;
  animation: footerCloudDrift 80s linear infinite;
  animation-delay: -20s;
}

.footer-cloud--3 {
  top: 8%;
  left: -30%;
  width: 280px;
  height: 90px;
  opacity: 0.6;
  animation: footerCloudDrift 42s linear infinite;
  animation-delay: -30s;
}

.footer-cloud--4 {
  top: 40%;
  left: -40%;
  width: 560px;
  height: 170px;
  opacity: 0.5;
  animation: footerCloudDrift 95s linear infinite;
  animation-delay: -55s;
}

.footer-cloud--5 {
  top: 20%;
  left: -28%;
  width: 320px;
  height: 110px;
  opacity: 0.7;
  animation: footerCloudDrift 65s linear infinite;
  animation-delay: -40s;
}

@keyframes footerCloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(180vw); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-cloud { animation: none; }
}

@media (max-width: 600px) {
  .footer-scene__building { width: 110%; }
}

.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--footer-bg, #15171c);
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  transition: background 0.3s ease;
}

/* Gold accent line + soft radial glow at the top of the footer. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold, var(--gold)) 25%, var(--gold-bright, var(--gold-bright)) 50%, var(--gold, var(--gold)) 75%, transparent);
  opacity: 0.7;
}

.site-footer::after {
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.10), transparent 70%);
  pointer-events: none;
}

/* ── Top grid ──────────────────────────────────────────────────────────── */
.site-footer-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding: 80px 0 56px;
}

/* Brand column */
.footer-brand__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-brand__logo img {
  width: 52px;
  height: 52px;
}

.footer-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.footer-brand__name {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}

.footer-brand__tagline {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold-bright, var(--gold-bright));
}

.footer-brand__about {
  max-width: 380px;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 28px;
}

/* Socials */
.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.footer-social:hover {
  color: var(--on-accent);
  background: var(--gold-bright, var(--gold-bright));
  border-color: var(--gold-bright, var(--gold-bright));
  transform: translateY(-3px);
}

/* Link columns */
.footer-col__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 22px;
}

.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-menu li a {
  position: relative;
  display: inline-block;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s, padding-left 0.2s;
}

.footer-menu li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-bright, var(--gold-bright));
  transform: translateY(-50%);
  transition: width 0.25s ease;
}

.footer-menu li a:hover {
  color: #fff;
  padding-left: 18px;
}

.footer-menu li a:hover::before {
  width: 12px;
}

/* Contacts column */
.footer-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-contact {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 12px;
  transition: color 0.2s;
  overflow-wrap: anywhere;   /* long email/address can't overflow the 1-col footer on phones */
}

a.footer-contact:hover {
  color: var(--gold-bright, var(--gold-bright));
}

.footer-contact--phone {
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.footer-contact--phone2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.footer-contact--address,
.footer-contact--hours {
  max-width: 300px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 26px;
  border-radius: 44px;
  background: var(--gold, var(--gold));
  color: var(--on-accent);
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: 0 8px 26px rgba(var(--gold-rgb), 0.3);
  transition: transform 0.18s, box-shadow 0.2s, background 0.2s;
}

.footer-cta:hover {
  background: var(--gold-bright, var(--gold-bright));
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--gold-rgb), 0.42);
}

.footer-cta__icon {
  display: inline-flex;
}

/* ── Bottom bar ────────────────────────────────────────────────────────── */
.site-footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
}

.site-info {
  color: rgba(255, 255, 255, 0.42);
}

.site-info a {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.site-info a:hover {
  color: var(--gold-bright, var(--gold-bright));
}

.footer-legal {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer-legal a:hover {
  color: var(--gold-bright, var(--gold-bright));
}

.footer-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 44px;
  padding: 9px 18px;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.footer-top-btn:hover {
  color: #fff;
  border-color: var(--gold-bright, var(--gold-bright));
  background: rgba(var(--gold-rgb), 0.12);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-footer-top {
    grid-template-columns: 1fr;
    padding: 56px 0 40px;
    gap: 36px;
  }
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* =========================================
   404 / NO RESULTS
   ========================================= */

.error-404,
.no-results {
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.error-404 .page-title,
.no-results .page-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.error-404 .page-content p,
.no-results .page-content p {
  color: var(--text-light);
  margin-bottom: 24px;
}

/* =========================================
   WORDPRESS CLASSES
   ========================================= */

.wp-caption {
  background: var(--bg-light);
  padding: 10px;
  border-radius: 8px;
}

.wp-caption-text {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin: 6px 0 0;
  text-align: center;
}

.wp-smiley { margin: 0; }

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {
  .has-sidebar .site-main {
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }

  .primary-sidebar {
    position: static;
  }

  .posts-container {
    grid-template-columns: 1fr;
  }

  .single .entry-title,
  .page .entry-title {
    font-size: 1.625rem;
  }
}

/* ── Header: progressively simplify between desktop and the ≤768px menu ──
   Without this the full nav + phone + lang + theme + CTA row gets cramped on
   narrow laptops/tablets and the phone number wraps into the navigation. */
@media (max-width: 1360px) {
  .site-header-content { gap: 24px; }
  .site-header-actions { gap: 20px; }
  .header-phone__note { display: none; }        /* keep the number, drop the small note line */
}
@media (max-width: 1160px) {
  .header-phone { display: none; }               /* phone stays in the mobile menu / contacts */
  .site-header-actions { gap: 16px; }
  .header-cta { padding: 12px 20px; }
  .brand-tagline { display: none; }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  /* Header on mobile: keep only logo + menu icon.
     Higher specificity than the base `.site-header-actions { display: flex }`
     (which sits later in the file), so the hide actually wins. */
  .site-header .site-header-actions { display: none; }
  .menu-toggle .menu-label { display: none; }
  .site-header .site-branding { position: relative; z-index: 2; }
  .main-navigation .menu-toggle { position: relative; z-index: 2; padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; }

  /* Header nav is replaced by the body-level #mobile-menu on phones. */
  #primary-menu { display: none; }

  /* ── Dedicated fullscreen mobile menu (body-level, not clipped by header) ── */
  #mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1200;              /* above header (50/100) and the WhatsApp FAB (900) */
    padding: 16px 26px 40px;
    background:
      radial-gradient(120% 45% at 100% 0%, rgba(var(--gold-rgb), 0.14), transparent 62%),
      var(--page-bg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transform-origin: 50% 26%;
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
  }
  #mobile-menu.is-open { opacity: 1; visibility: visible; transform: scale(1); }

  .mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    flex-shrink: 0;
  }
  .mobile-menu__logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
  .mobile-menu__logo img { width: 40px; height: 40px; }
  .mobile-menu__logo-text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
  .mobile-menu__logo-name { font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.03em; color: var(--text-dark); }
  .mobile-menu__logo-tag { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text-light); }
  .mobile-menu__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-dark);
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  .mobile-menu__close:hover { transform: rotate(90deg); border-color: rgba(var(--gold-rgb), 0.5); }

  .mobile-menu__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    text-align: center;
    padding: 24px 0;
  }
  /* Staggered reveal of the inner blocks. */
  #mobile-menu .mobile-menu__inner > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #mobile-menu.is-open .mobile-menu__inner > * { opacity: 1; transform: none; }
  #mobile-menu.is-open .mobile-menu__nav   { transition-delay: 0.1s; }
  #mobile-menu.is-open .mobile-menu__tools { transition-delay: 0.2s; }
  #mobile-menu.is-open .mobile-menu__foot  { transition-delay: 0.28s; }

  .mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .mobile-menu__item a {
    display: block;
    padding: 12px;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .mobile-menu__item a:hover { color: var(--gold); }

  .mobile-menu__tools { display: inline-flex; align-items: center; gap: 16px; }
  /* Force readable switcher styling inside the light menu (override home's
     white-on-transparent header variants). */
  #mobile-menu .lang-switcher { border-color: var(--border-color); background: var(--surface-2); }
  #mobile-menu .lang-switcher__option { color: var(--text-light); }
  #mobile-menu .lang-switcher__option.is-active { color: var(--on-accent); background: var(--gold); }
  #mobile-menu .theme-toggle { color: var(--text-dark); border-color: var(--border-color); background: var(--surface); }

  .mobile-menu__foot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .mobile-menu__phone { font-size: 1.375rem; font-weight: 800; color: var(--text-dark); text-decoration: none; }
  .mobile-menu__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--on-accent);
    text-decoration: none;
    background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
    box-shadow: 0 12px 30px rgba(var(--gold-rgb), 0.32);
  }

  .site-main {
    padding: 40px 0;
  }

  .single .site-main,
  .page .site-main {
    padding: 40px 20px;
  }

  .entry-header {
    padding: 20px 20px 0;
  }

  .entry-content {
    padding: 14px 20px 20px;
  }
}

@media (max-width: 480px) {
  .posts-container {
    gap: 20px;
  }

  .entry-title {
    font-size: 1.125rem;
  }
}

/* =========================================
   UTILITY — SECTIONS
   ========================================= */

.section {
  padding: 80px 0;
}

.section--sm {
  padding: 48px 0;
}

.section--lg {
  padding: 120px 0;
}

.section--dark {
  background: var(--secondary-color);
  color: #fff;
}

.section--gray {
  background: var(--bg-light);
}

.section--primary {
  background: var(--primary-color);
  color: #fff;
}

/* =========================================
   UTILITY — SECTION HEADER
   ========================================= */

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.section--dark .section-head__label,
.section--primary .section-head__label {
  color: var(--accent-color);
}

.section-head__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: var(--fw-light);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--text-dark);
}

.section--dark .section-head__title,
.section--primary .section-head__title {
  color: #fff;
}

.section-head__desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0;
}

.section--dark .section-head__desc,
.section--primary .section-head__desc {
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================
   UTILITY — GRID
   ========================================= */

.grid {
  display: grid;
  gap: 24px;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--auto-2 {
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

.grid--auto-3 {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.grid--auto-4 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* =========================================
   UTILITY — CARD
   ========================================= */

.card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.card--flat {
  box-shadow: none;
  border: none;
  background: var(--bg-light);
}

.card--flat:hover {
  box-shadow: none;
  transform: none;
}

.card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card__image img {
  transform: scale(1.04);
}

.card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.card__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.card__title a {
  color: inherit;
}

.card__title a:hover {
  color: var(--primary-color);
}

.card__text {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.card__footer {
  padding: 0 24px 24px;
  margin-top: auto;
}

/* =========================================
   UTILITY — ICON BOX (for features/services)
   ========================================= */

.icon-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.icon-box--row {
  flex-direction: row;
  align-items: flex-start;
}

.icon-box__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section--dark .icon-box__icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-color);
}

.icon-box__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-dark);
}

.section--dark .icon-box__title {
  color: #fff;
}

.icon-box__text {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.section--dark .icon-box__text {
  color: rgba(255, 255, 255, 0.65);
}

/* =========================================
   UTILITY — BUTTON VARIANTS
   ========================================= */

.btn--lg {
  padding: 15px 40px;
  font-size: 1.0625rem;
}

.btn--sm {
  padding: 8px 18px;
  font-size: 0.875rem;
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn--outline:hover {
  background: var(--primary-color);
  color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--secondary-color);
}

.btn--white:hover {
  background: var(--bg-light);
  color: var(--secondary-color);
}

.btn--outline-white {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

/* =========================================
   UTILITY — TEXT HELPERS
   ========================================= */

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-primary { color: var(--primary-color); }
.text-muted   { color: var(--text-light); }
.text-white   { color: #fff; }
.text-dark    { color: var(--text-dark); }

/* =========================================
   UTILITY — SPACING HELPERS
   ========================================= */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: 24px; }
.mb-sm { margin-bottom: 24px; }
.mt-md { margin-top: 48px; }
.mb-md { margin-bottom: 48px; }

/* =========================================
   UTILITY — RESPONSIVE (grid collapse)
   ========================================= */

@media (max-width: 900px) {
  .grid--4,
  .grid--auto-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: 56px 0;
  }

  .section--lg {
    padding: 80px 0;
  }

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

  .grid--3,
  .grid--auto-3,
  .grid--auto-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .grid--2,
  .grid--4,
  .grid--auto-4 {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   HOMEPAGE LAYOUT OVERRIDES
   ========================================= */

.site-main--home,
.page .site-main--home,
.single .site-main--home,
.about-page,
.page .about-page,
.single .about-page {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* =========================================
   HERO TOKENS
   ========================================= */

:root {
  --gold: #c6a052;
  --gold-bright: #d8b86a;
  /* RGB channels for the gold accents — so rgba() can be theme-aware. */
  --gold-rgb: 198, 160, 82;
  --gold-bright-rgb: 214, 184, 106;
  --primary-rgb: 217, 119, 6;
  /* Text/icon colour that sits ON a filled accent (gold or blue) — white. */
  --on-accent: #ffffff;
  --hero-dark: #15171c;
  --header-h: 90px;

  /* Surfaces — semantic, so dark theme can override in one place. */
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --page-bg: #ffffff;
  --footer-bg: #181b21;
  --footer-sky: #1e2229;

  /* Hero overlay glass (scrolled header + hero stats bar) — theme-aware.
     Light theme: light glass, dark text. */
  --hero-header-glass: rgba(249, 250, 251, 0.92);
  --hero-header-border: rgba(0, 0, 0, 0.08);
  --hero-header-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  --hero-bar-glass: rgba(249, 250, 251, 0.82);
  --hero-bar-border: rgba(0, 0, 0, 0.08);
  --hero-bar-fg: #1f2937;
  --hero-bar-fg-muted: rgba(31, 41, 55, 0.72);
  --hero-bar-fg-faint: rgba(31, 41, 55, 0.55);

  /* Hero scrim — softer & directional in light theme: darkening is
     concentrated bottom-left (where the text sits), the rest of the
     frame stays bright so it doesn't feel like a heavy black sheet. */
  --hero-overlay:
    linear-gradient(180deg, rgba(21, 23, 28, 0.34) 0%, rgba(21, 23, 28, 0.06) 30%, rgba(21, 23, 28, 0) 55%, rgba(21, 23, 28, 0.48) 100%),
    linear-gradient(90deg, rgba(21, 23, 28, 0.42) 0%, rgba(21, 23, 28, 0) 55%);
}

/* =========================================
   DARK THEME
   Toggled via [data-theme="dark"] on <html> (see header.php + main.js).
   Smooth cross-fade between themes.
   ========================================= */

[data-theme="dark"] {
  --primary-color: #e0922b;
  --accent-color: #f0a93a;
  --text-dark: #e9ebef;
  --text-light: #9aa1ac;
  --bg-light: #1b1e24;
  --border-color: rgba(255, 255, 255, 0.12);

  --surface: #1d2026;
  --surface-2: #1b1e24;
  --page-bg: #15171c;
  --footer-bg: #0f1115;
  --footer-sky: #15181e;

  /* Hero overlay glass — dark theme: deep glass, white text. */
  --hero-header-glass: rgba(21, 23, 28, 0.96);
  --hero-header-border: rgba(255, 255, 255, 0.08);
  --hero-header-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --hero-bar-glass: rgba(16, 18, 22, 0.5);
  --hero-bar-border: rgba(255, 255, 255, 0.1);
  --hero-bar-fg: #ffffff;
  --hero-bar-fg-muted: rgba(255, 255, 255, 0.7);
  --hero-bar-fg-faint: rgba(255, 255, 255, 0.55);

  /* Hero scrim — heavier in dark theme to match the darker UI. */
  --hero-overlay:
    linear-gradient(180deg, rgba(21, 23, 28, 0.55) 0%, rgba(21, 23, 28, 0.15) 28%, rgba(21, 23, 28, 0.10) 55%, rgba(21, 23, 28, 0.85) 100%),
    linear-gradient(90deg, rgba(21, 23, 28, 0.45) 0%, rgba(21, 23, 28, 0) 60%);
}

/* =========================================
   PREMIUM BLUE PALETTE (code-controlled)
   A second colour scheme that re-skins the warm gold accents as a
   premium royal-blue. Activated by adding [data-palette="blue"] to <html>
   — e.g. hardcode it on the <html> tag in header.php, or add the attribute
   from PHP/JS. The floating UI switcher was removed; this stays as the
   dynamic-colour hook so the whole palette can be re-skinned from code.
   Orthogonal to light/dark: works on top of either base theme.

   Accent tokens are redefined here for BOTH base themes (this block is
   placed after the dark block, so equal-specificity source order wins).
   Surface tints are scoped per base theme below to avoid clobbering dark.
   ========================================= */

[data-palette="blue"] {
  /* Accent roles — were warm gold, now premium blue. */
  --gold: #2e5fd0;            /* main accent (royal blue) */
  --gold-bright: #5b8def;     /* bright highlight (azure sheen) */
  --gold-rgb: 46, 95, 208;
  --gold-bright-rgb: 91, 141, 239;

  --primary-color: #1e40af;   /* deep premium blue */
  --accent-color: #3b82f6;    /* vivid blue */
  --primary-rgb: 30, 64, 175;
}

/* Light base + blue palette: cool, slightly blue-tinted surfaces
   instead of the neutral/warm whites. */
[data-palette="blue"]:not([data-theme="dark"]) {
  --surface-2: #f3f6fc;
  --bg-light: #f3f6fc;

  /* Hero glass leans cool. */
  --hero-header-glass: rgba(243, 246, 252, 0.92);
  --hero-bar-glass: rgba(243, 246, 252, 0.82);
}

/* Dark base + blue palette: deep blue-tinted surfaces. */
[data-theme="dark"][data-palette="blue"] {
  --bg-light: #161b27;
  --surface: #1a2030;
  --surface-2: #161b27;
  --page-bg: #0f1422;
  --footer-bg: #0b0f1a;
  --footer-sky: #0f1422;
  --hero-dark: #0f1422;

  --hero-header-glass: rgba(15, 20, 34, 0.96);
  --hero-bar-glass: rgba(12, 16, 28, 0.5);
}

body,
.site-header,
.post-item,
.card,
.main-navigation ul ul,
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Auto-hide header: slide out on scroll-down, slide back in on scroll-up. */
.site-header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease, color 0.3s ease, transform 0.35s ease;
  will-change: transform;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

[data-theme="dark"] body {
  background-color: var(--page-bg);
}

[data-theme="dark"] .site-header {
  background: #1a1d23;
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .post-item,
[data-theme="dark"] .card {
  background: var(--surface);
}

[data-theme="dark"] .main-navigation ul ul {
  background: var(--surface);
  border-color: var(--border-color);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-2);
  color: var(--text-dark);
}

[data-theme="dark"] .header-cta {
  background: var(--gold);
  color: var(--on-accent);
}

[data-theme="dark"] .header-cta:hover {
  background: var(--gold-bright);
  color: var(--on-accent);
}

[data-theme="dark"] .hamburger,
[data-theme="dark"] .hamburger::before,
[data-theme="dark"] .hamburger::after {
  background: var(--text-dark);
}

[data-theme="dark"] .hamburger {
  box-shadow: 0 -6px 0 var(--text-dark), 0 6px 0 var(--text-dark);
}

/* =========================================
   HEADER — TRANSPARENT OVER HERO (HOME)
   ========================================= */

.home .site-header,
.page-template-page-home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
}

.home .site-header-content,
.page-template-page-home .site-header-content {
  height: var(--header-h);
}

/* Solid state once scrolled */
.home .site-header.scrolled,
.page-template-page-home .site-header.scrolled {
  position: fixed;
  background: var(--hero-header-glass);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hero-header-border);
  box-shadow: var(--hero-header-shadow);
}

/* Scrolled glass floats over page content, so it follows the theme.
   In light theme the header text + logo flip to dark for contrast.
   (At the top — transparent over the dark hero — text stays white, untouched.) */
[data-theme="light"] .home .site-header.scrolled .brand-name,
[data-theme="light"] .page-template-page-home .site-header.scrolled .brand-name { color: var(--text-dark); }

[data-theme="light"] .home .site-header.scrolled .brand-tagline,
[data-theme="light"] .page-template-page-home .site-header.scrolled .brand-tagline { color: var(--gold-bright); }

[data-theme="light"] .home .site-header.scrolled .main-navigation ul li a,
[data-theme="light"] .page-template-page-home .site-header.scrolled .main-navigation ul li a { color: var(--text-dark); }

/* Glass header is opaque enough — drop the hero text-shadow once scrolled. */
.home .site-header.scrolled .main-navigation ul li a,
.page-template-page-home .site-header.scrolled .main-navigation ul li a,
.home .site-header.scrolled .brand-name,
.home .site-header.scrolled .brand-tagline,
.page-template-page-home .site-header.scrolled .brand-name,
.page-template-page-home .site-header.scrolled .brand-tagline { text-shadow: none; }

[data-theme="light"] .home .site-header.scrolled .main-navigation ul li a:hover,
[data-theme="light"] .home .site-header.scrolled .main-navigation ul li.current-menu-item > a,
[data-theme="light"] .page-template-page-home .site-header.scrolled .main-navigation ul li a:hover,
[data-theme="light"] .page-template-page-home .site-header.scrolled .main-navigation ul li.current-menu-item > a { color: var(--primary-color); }

[data-theme="light"] .home .site-header.scrolled .header-phone__number,
[data-theme="light"] .page-template-page-home .site-header.scrolled .header-phone__number { color: var(--text-dark); }

[data-theme="light"] .home .site-header.scrolled .header-phone__note,
[data-theme="light"] .page-template-page-home .site-header.scrolled .header-phone__note { color: var(--text-light); }

[data-theme="light"] .home .site-header.scrolled .theme-toggle,
[data-theme="light"] .page-template-page-home .site-header.scrolled .theme-toggle {
  color: var(--text-dark);
  border-color: var(--border-color);
}

[data-theme="light"] .home .site-header.scrolled .logo-white,
[data-theme="light"] .page-template-page-home .site-header.scrolled .logo-white { display: none; }
[data-theme="light"] .home .site-header.scrolled .logo-dark,
[data-theme="light"] .page-template-page-home .site-header.scrolled .logo-dark { display: block; }

/* =========================================
   BRANDING (logo mark + two-line name)
   ========================================= */

.site-branding {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  height: 48px;
  width: 48px;
  flex-shrink: 0;
}

.brand-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
}

.brand-logo .logo-white { display: none; }
.brand-logo .logo-dark  { display: block; }

.home .brand-logo .logo-white,
.page-template-page-home .brand-logo .logo-white { display: block; }
.home .brand-logo .logo-dark,
.page-template-page-home .brand-logo .logo-dark { display: none; }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  text-transform: uppercase;
}

.brand-tagline {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.home .brand-name,
.page-template-page-home .brand-name { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.home .brand-tagline,
.page-template-page-home .brand-tagline { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

/* =========================================
   HEADER NAV — light text on hero
   ========================================= */

.home .main-navigation ul li a,
.page-template-page-home .main-navigation ul li a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9375rem;
  font-weight: 500;
  background: none;
  position: relative;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.home .main-navigation ul li a:hover,
.home .main-navigation ul li.current-menu-item > a,
.home .main-navigation ul li.current_page_item > a,
.page-template-page-home .main-navigation ul li a:hover,
.page-template-page-home .main-navigation ul li.current-menu-item > a,
.page-template-page-home .main-navigation ul li.current_page_item > a {
  color: #fff;
  background: none;
}

/* Homepage active/hover underline is inherited from the base
   `.main-navigation > ul > li > a::after` rule (gold gradient + glow). */

/* =========================================
   HEADER — RIGHT SIDE (phone + CTA)
   ========================================= */

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.header-phone {
  flex-shrink: 0;
  text-align: right;
  line-height: 1.25;
}

.header-phone__number {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text-dark);
}

.header-phone__note {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
}

.home .header-phone__number,
.page-template-page-home .header-phone__number { color: #fff; }
.home .header-phone__note,
.page-template-page-home .header-phone__note { color: rgba(255, 255, 255, 0.5); }

.header-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: #fff;
  color: var(--secondary-color);
  border-radius: 40px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s, box-shadow 0.2s, background 0.2s;
}

.header-cta::before {
  content: '';
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.header-cta:hover {
  color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.header-cta__label {
  position: relative;
  z-index: 1;
}

/* Animated running border — a bright line travels around the pill with an
   uneven, "interrupted" speed (fast on the long edges, slowing at corners).
   Built from a conic-gradient ring masked to the 2px border. */
@property --cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.header-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  /* Continuous ring with two bright heads 180° apart. Each head trails a long
     tail that fades toward the NEXT head, so the join sits at the heads (not
     in a tail valley) and the ring never goes fully transparent (no gap). */
  background: conic-gradient(
    from var(--cta-angle),
    #fff 0deg,
    var(--gold-bright) 8deg,
    rgba(var(--gold-bright-rgb), 0.62) 36deg,
    rgba(var(--gold-bright-rgb), 0.32) 104deg,
    rgba(var(--gold-bright-rgb), 0.2) 168deg,
    var(--gold-bright) 177deg,
    #fff 180deg,
    var(--gold-bright) 188deg,
    rgba(var(--gold-bright-rgb), 0.62) 216deg,
    rgba(var(--gold-bright-rgb), 0.32) 284deg,
    rgba(var(--gold-bright-rgb), 0.2) 348deg,
    var(--gold-bright) 357deg,
    #fff 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  animation: cta-run 3.4s linear infinite;
}

/* Slightly uneven angle deltas over even time → gentle speed-up, soft slow. */
@keyframes cta-run {
  0%   { --cta-angle: 0deg; }
  30%  { --cta-angle: 120deg; }
  40%  { --cta-angle: 150deg; }
  65%  { --cta-angle: 255deg; }
  75%  { --cta-angle: 285deg; }
  100% { --cta-angle: 360deg; }
}

/* ── Theme toggle ──────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.theme-toggle:hover {
  color: var(--gold, var(--gold));
  border-color: var(--gold, var(--gold));
  transform: rotate(-15deg);
}

/* Show the icon for the mode you'll switch TO: moon in light, sun in dark.
   Selectors kept at equal specificity so the active one always wins. */
.theme-toggle .theme-toggle__sun  { display: none; }
.theme-toggle .theme-toggle__moon { display: block; }

[data-theme="dark"] .theme-toggle .theme-toggle__sun  { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }

/* On the transparent home header the icon sits on the hero — keep it light. */
.home .theme-toggle,
.page-template-page-home .theme-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.home .theme-toggle:hover,
.page-template-page-home .theme-toggle:hover {
  color: var(--gold-bright, var(--gold-bright));
  border-color: var(--gold-bright, var(--gold-bright));
}

/* ── Language switcher (RU / KG) ───────────────────────────────────────── */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 40px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.025);
  flex-shrink: 0;
}

.lang-switcher__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 11px;
  border-radius: 40px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-light);
  transition: color 0.22s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.lang-switcher__option:hover {
  color: var(--text-dark);
}

.lang-switcher__option.is-active,
.lang-switcher__option.is-active:hover {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  box-shadow: 0 2px 10px rgba(var(--gold-rgb), 0.45);
}

/* Dark theme — lift the track off the dark surface. */
[data-theme="dark"] .lang-switcher {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

/* Transparent header over the hero (home + single object) — light text. */
.home .lang-switcher,
.page-template-page-home .lang-switcher,
.single-object .lang-switcher {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.home .lang-switcher__option,
.page-template-page-home .lang-switcher__option,
.single-object .lang-switcher__option {
  color: rgba(255, 255, 255, 0.7);
}

.home .lang-switcher__option:hover,
.page-template-page-home .lang-switcher__option:hover,
.single-object .lang-switcher__option:hover {
  color: #fff;
}

.home .lang-switcher__option.is-active,
.page-template-page-home .lang-switcher__option.is-active,
.single-object .lang-switcher__option.is-active {
  color: var(--on-accent);
}

/* Scrolled glass header in light theme — flip back to the dark-on-light track. */
[data-theme="light"] .home .site-header.scrolled .lang-switcher,
[data-theme="light"] .page-template-page-home .site-header.scrolled .lang-switcher,
[data-theme="light"] .single-object .site-header.scrolled .lang-switcher {
  border-color: var(--border-color);
  background: rgba(0, 0, 0, 0.025);
}

[data-theme="light"] .home .site-header.scrolled .lang-switcher__option,
[data-theme="light"] .page-template-page-home .site-header.scrolled .lang-switcher__option,
[data-theme="light"] .single-object .site-header.scrolled .lang-switcher__option {
  color: var(--text-light);
}

[data-theme="light"] .home .site-header.scrolled .lang-switcher__option:hover,
[data-theme="light"] .page-template-page-home .site-header.scrolled .lang-switcher__option:hover,
[data-theme="light"] .single-object .site-header.scrolled .lang-switcher__option:hover {
  color: var(--text-dark);
}

/* =========================================
   HERO (Swiper slider, full screen)
   ========================================= */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hero-dark);
  color: #fff;
}

/* Slider fills everything above the static bottom bar.
   flex-basis: 0 makes the height come purely from grow → definite,
   so the percentage-height chain below (wrapper → slide → media) resolves. */
.hero__slider {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.hero__slider .swiper-wrapper,
.hero__slider .swiper-slide {
  height: 100%;
}

.hero__slide {
  position: relative;
  display: flex;
  overflow: hidden;
}

/* ── Slider controls (prev · bullets · next) ─────────────────────────── */
.hero__controls {
  position: absolute;
  z-index: 5;
  right: 40px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(20, 22, 26, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}

.hero__nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  transform: translateY(-1px);
}

.hero__pagination.swiper-pagination {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.hero__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  border-radius: 4px;
  transition: width 0.25s ease, background 0.25s ease;
}

.hero__pagination .swiper-pagination-bullet-active {
  width: 26px;
  background: var(--gold-bright);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Hero: фон-фото — плавный scale (Ken Burns) на активном слайде ──────── */
.hero__media img {
  transform: scale(1);
  transition: transform 0.6s ease;
  will-change: transform;
}

.hero__slide.swiper-slide-active .hero__media img {
  animation: heroKenBurns 9s ease-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-overlay);
  transition: background 0.3s ease;
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: var(--header-h);
}

/* Container is a flex child here — force it to fill so its padding aligns
   the hero content to the same left edge as the header and bottom bar. */
.hero__inner > .container {
  width: 100%;
}

.hero__content {
  width: 100%;
}

/* ── Hero: появление текста на активном слайде ─────────────────────────── */
.hero__content > * {
  opacity: 0;
  transform: translateY(28px);
}

.hero__slide.swiper-slide-active .hero__eyebrow,
.hero__slide.swiper-slide-active .hero__title,
.hero__slide.swiper-slide-active .hero__desc,
.hero__slide.swiper-slide-active .hero__actions {
  animation: heroTextIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__slide.swiper-slide-active .hero__eyebrow { animation-delay: 0.25s; }
.hero__slide.swiper-slide-active .hero__title   { animation-delay: 0.40s; }
.hero__slide.swiper-slide-active .hero__desc    { animation-delay: 0.55s; }
.hero__slide.swiper-slide-active .hero__actions { animation-delay: 0.70s; }

@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 22px;
}

.hero__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.hero__title {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.hero__title-accent {
  display: block;
  color: var(--gold-bright);
}

.hero__desc {
  max-width: 540px;
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  border-radius: 44px;
  font-size: 1rem;
  font-weight: 600;
  transition: transform 0.18s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.hero__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero__btn--primary {
  background: var(--gold);
  color: var(--on-accent);
  box-shadow: 0 10px 34px rgba(var(--gold-rgb), 0.35);
}

.hero__btn--primary .hero__btn-icon {
  background: rgba(0, 0, 0, 0.18);
  color: var(--on-accent);
}

.hero__btn--primary:hover {
  background: var(--gold-bright);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--gold-rgb), 0.45);
}

.hero__btn--secondary {
  background: rgba(38, 41, 48, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.hero__btn--secondary .hero__btn-icon {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.hero__btn--secondary:hover {
  background: rgba(60, 64, 72, 0.7);
  color: #fff;
  transform: translateY(-2px);
}

/* =========================================
   HERO — BOTTOM BAR (address + stats + scroll)
   ========================================= */

/* Smooth cross-fade of the hero bar when toggling theme. */
.hero__bar,
.hero__address,
.hero__stat-value,
.hero__stat-label {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hero__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hero-bar-border);
  background: var(--hero-bar-glass);
  backdrop-filter: blur(4px);
}

.hero__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 26px 0;
}

.hero__address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 300px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--hero-bar-fg-muted);
}

.hero__address::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  margin-top: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: hero-pulse 1.8s ease-out infinite;
}

@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); opacity: 1; }
}

.hero__stats {
  display: flex;
  gap: 10%;
  justify-content: space-between;
  width:40%;
}

.hero__stat-value {
  font-size: clamp(2.25rem, 2.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hero-bar-fg);
}

.hero__stat-suffix {
  color: var(--gold-bright);
}

.hero__stat-label {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-bar-fg-faint);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-bar-fg-faint);
  transition: color 0.2s;
}

.hero__scroll:hover { color: var(--hero-bar-fg); }

.hero__scroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hero-bar-fg-faint);
  animation: hero-bounce 2s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* =========================================
   HERO — RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {
  .site-header-actions { gap: 18px; }
  .hero__stats { gap: 32px; }
}

@media (max-width: 992px) {
  /* Header phone/CTA visibility is handled by the dedicated header
     breakpoints (≤1160 phone, ≤768 full menu) — don't hide the CTA here,
     it left a 769–992px dead zone with no phone and no CTA. */
  .hero__bar-inner { flex-wrap: wrap; gap: 24px; }
  .hero__scroll { display: none; }
}

@media (max-width: 768px) {
  :root { --header-h: 72px; }

  /* Wider content column on phones (was 40px each side). */
  .container { padding: 0 18px; }

  .hero__title { margin-bottom: 22px; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__btn { justify-content: center; }

  .hero__controls {
    right: 50%;
    transform: translateX(50%);
    bottom: 18px;
    gap: 14px;
  }
  .hero__nav { width: 42px; height: 42px; }

  /* Compact bottom bar. */
  .hero__bar-inner { padding: 18px 0; gap: 16px; }
  .hero__address { max-width: none; width: 100%; font-size: 0.75rem; letter-spacing: 0.04em; line-height: 1.4; }

  /* Company figures — one row when they fit, wrap to a second when there
     are 4+ so values never crush/clip on narrow phones. */
  .hero__stats {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
  }
  .hero__stat { flex: 1 1 80px; }
  .hero__stat-value { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero__stat-label { margin-top: 5px; font-size: 0.6rem; letter-spacing: 0.06em; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero__stats { gap: 10px; }
  .hero__stat-value { font-size: 1.5rem; }
  .hero__stat-label { font-size: 0.56rem; letter-spacing: 0.04em; }
}

/* ── Hero: отключаем анимации при prefers-reduced-motion ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__content > * {
    opacity: 1;
    transform: none;
  }
  .hero__slide.swiper-slide-active .hero__eyebrow,
  .hero__slide.swiper-slide-active .hero__title,
  .hero__slide.swiper-slide-active .hero__desc,
  .hero__slide.swiper-slide-active .hero__actions,
  .hero__slide.swiper-slide-active .hero__media img {
    animation: none;
  }
}

/* =========================================
   OBJECTS — жилые комплексы в продаже
   ========================================= */

.objects {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--page-bg);
  color: var(--text-dark);
  overflow: hidden;
}

/* Decorative gold glow — drifts behind the cards. */
.objects__glow {
  position: absolute;
  top: 18%;
  left: -220px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  z-index: 0;
  animation: objectsGlowDrift 18s ease-in-out infinite;
}

/* ── Decorative accent — asymmetric full-height gold building towers on both
   edges, with parallax + draw-in on scroll (GSAP), plus a soft glow for
   warmth. Theme-aware (--gold). */
.objects__deco {
  position: absolute;
  inset: 0;
  color: var(--gold);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Soft gold glow — top-right, warms the upper part of the section. */
.objects__glow3 {
  position: absolute;
  top: -150px;
  right: -150px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.1) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: objectsGlowDrift 24s ease-in-out infinite;
}

/* A few diagonal gold lines across the section, with parallax. Oversized so
   the parallax drift never uncovers an edge. */
.objects__lines {
  position: absolute;
  top: -28%;
  left: 0;
  width: 100%;
  height: 156%;
  opacity: 0.75;
  will-change: transform;
  -webkit-mask-image: linear-gradient(60deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(60deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

@media (max-width: 640px) {
  .objects__glow3 { width: 420px; height: 420px; }
  .objects__lines { opacity: 0.44; }
}

.objects .container {
  position: relative;
  z-index: 1;
}

/* Asymmetric header: title block left, subtitle anchored bottom-right. */
.objects__head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: end;
  gap: 48px;
  margin: 0 0 64px;
}

.objects__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.objects__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left center;
  animation: aboutLineGrow 1s ease 0.2s both;
}

.objects__title {
  font-size: clamp(2.1rem, 3.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0;
}

.objects__title-accent {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aboutAccentShimmer 6s linear infinite;
}

.objects__subtitle {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
  padding-bottom: 6px;
}

/* ── List (one card per row, alternating zig-zag) ─────────────────────── */

.objects__list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.object-card {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease, border-color 0.45s ease;
}

/* Even cards mirror — image on the right for an asymmetric rhythm. */
.object-card:nth-child(even) {
  grid-template-columns: 1fr 1.08fr;
}

.object-card:nth-child(even) .object-card__media {
  order: 2;
}

.object-card:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
}

.object-card__media {
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.object-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.object-card:hover .object-card__img {
  transform: scale(1.07);
}

/* Diagonal light sheen that sweeps across the photo on hover. */
.object-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-120%);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.object-card:hover .object-card__media::after {
  transform: translateX(120%);
}

/* Gradient scrim for depth + badge legibility. */
.object-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 17, 22, 0.28) 0%, transparent 32%, transparent 62%, rgba(15, 17, 22, 0.42) 100%);
  pointer-events: none;
}

/* Oversized editorial index number over the photo. */
.object-card__no {
  position: absolute;
  right: 26px;
  bottom: 14px;
  font-size: clamp(4rem, 7vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0.22;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.5s ease, color 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.object-card:hover .object-card__no {
  opacity: 0.92;
  color: var(--gold-bright);
  transform: translateY(-6px);
}

.object-card__badge {
  position: absolute;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 16px;
  border-radius: 30px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--gold);
  box-shadow: 0 8px 24px rgba(var(--gold-rgb), 0.4);
}

/* Pulsing "live" dot — signals active sales. */
.object-card__badge-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-accent);
}

.object-card__badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  animation: objectsPulse 2s ease-out infinite;
}

.object-card__body {
  display: flex;
  flex-direction: column;
  padding: 44px 48px 46px;
}

.object-card__name {
  position: relative;
  align-self: flex-start;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.18;
  color: var(--text-dark);
  margin: 0 0 16px;
  padding-bottom: 12px;
}

/* Gold underline that grows from a short tick to full width on hover. */
.object-card__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0.18);
  transform-origin: left center;
  opacity: 0.55;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.object-card:hover .object-card__name::after {
  transform: scaleX(1);
  opacity: 1;
}

.object-card__address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-light);
  margin: 0 0 6px;
}

.object-card__pin {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}

.object-card__landmark {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-light);
  opacity: 0.85;
}

.object-card__rooms {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 18px 0 0;
}

/* ── Tags / тип-баджи ─────────────────────────────────────────────────── */

.object-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 20px 0 6px;
  padding: 0;
}

.object-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 30px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
}

.object-card__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
}

/* ── Features ─────────────────────────────────────────────────────────── */

.object-card__features {
  display: grid;
  gap: 0;
  margin: 26px 0 32px;
  border-top: 1px solid var(--border-color);
}

.object-card__feature {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
}

.object-card__feature-label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-light);
  margin: 0;
}

.object-card__feature-value {
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: right;
  color: var(--text-dark);
  margin: 0;
}

.object-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: flex-start;
  margin-top: auto;
  padding: 16px 30px;
  border-radius: 44px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--gold);
  box-shadow: 0 10px 30px rgba(var(--gold-rgb), 0.3);
  transition: transform 0.18s, box-shadow 0.2s, background 0.2s;
}

.object-card__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.object-card__btn:hover {
  background: var(--gold-bright);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(var(--gold-rgb), 0.42);
}

/* ── «Все объекты» CTA ────────────────────────────────────────────────── */

.objects__cta {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

.objects__all-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 40px;
  border-radius: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-dark);
  background: transparent;
  border: 1.5px solid var(--gold);
  transition: transform 0.18s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.objects__all-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
  transition: transform 0.2s;
}

.objects__all-btn:hover {
  background: var(--gold);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--gold-rgb), 0.4);
}

.objects__all-btn:hover .objects__all-icon {
  background: rgba(0, 0, 0, 0.18);
  transform: translateX(3px);
}

/* ── Completed list ───────────────────────────────────────────────────── */

.objects__completed {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.objects__completed-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 26px;
}

.objects__completed-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.objects__completed-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s, transform 0.2s;
}

.objects__completed-item:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: translateY(-2px);
}

.objects__completed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.15);
  color: var(--gold);
}

@keyframes objectsGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -30px) scale(1.1); }
}

@keyframes objectsPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .objects__glow,
  .objects__title-accent,
  .objects__eyebrow::before,
  .object-card__badge-dot::after {
    animation: none;
  }
  .object-card,
  .object-card__img {
    transition: none;
  }
  .object-card:hover {
    transform: none;
  }
  .object-card:hover .object-card__img {
    transform: none;
  }
}

/* ── Scroll reveal animation ──────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* When GSAP drives the reveals (see initPremiumScroll), hand it a clean slate:
   no CSS transition to smear its per-frame tweening, and no base transform to
   fight the variant's from-state. GSAP sets opacity/transform inline instead. */
.gsap-ready [data-reveal] {
  transition: none;
  transform: none;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .object-card,
  .object-card:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .object-card:nth-child(even) .object-card__media {
    order: 0;
  }
  .object-card__media {
    min-height: 280px;
  }
}

@media (max-width: 900px) {
  .objects {
    padding: 84px 0;
  }
  .objects__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
    margin-bottom: 44px;
  }
  .objects__list {
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .object-card__body {
    padding: 30px 26px 32px;
  }
  .object-card__name {
    font-size: 1.625rem;
  }
  .object-card__btn,
  .objects__all-btn {
    width: 100%;
    justify-content: center;
  }
  .objects__completed {
    margin-top: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .object-card:hover,
  .object-card:hover .object-card__img {
    transform: none;
  }
}

/* =========================================
   ABOUT (О компании)
   ========================================= */

.about {
  position: relative;
  padding: var(--section-y) 0;
  /* Deeper slate canvas so the white cards read as elevated, not flush with
     the page. Layers, top → bottom: a fine architectural grid for craft, a
     directional slate wash (deeper toward the edges where cards sit), then the
     base tone. All neutral rgba over var(--bg-light) → adapts to every theme:
     in light it darkens the near-white base; in dark it sinks the canvas below
     the lighter card surface. Either way, cards float. */
  background:
    linear-gradient(rgba(28, 37, 54, 0.028) 1px, transparent 1px) 0 0 / 100% 68px,
    linear-gradient(90deg, rgba(28, 37, 54, 0.028) 1px, transparent 1px) 0 0 / 68px 100%,
    radial-gradient(120% 90% at 82% 12%, rgba(var(--gold-rgb), 0.05) 0%, rgba(var(--gold-rgb), 0) 55%),
    linear-gradient(162deg, rgba(28, 37, 54, 0.12) 0%, rgba(28, 37, 54, 0.035) 46%, rgba(28, 37, 54, 0.13) 100%),
    var(--bg-light);
  color: var(--text-dark);
  overflow: hidden;
}

/* Hairline gold frames top & bottom — quietly bracket the section. */
.about::before,
.about::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.32) 20%, rgba(var(--gold-rgb), 0.32) 80%, transparent);
  z-index: 1;
  pointer-events: none;
}

.about::before { top: 0; }
.about::after { bottom: 0; }

/* Decorative gold glow blob — drifts slowly behind the content. */
.about__glow {
  position: absolute;
  top: -180px;
  right: -160px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.2) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  z-index: 0;
  animation: aboutGlowDrift 16s ease-in-out infinite;
}

/* Oversized brand watermark, barely visible — editorial depth. */
.about__watermark {
  position: absolute;
  left: -2vw;
  bottom: -3.5vw;
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-dark);
  opacity: 0.028;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.about .container {
  position: relative;
  z-index: 1;
}

/* Asymmetric split: intro column + staggered card grid. */
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 84px;
  align-items: start;
}

.about__head {
  position: sticky;
  top: 120px;
  margin: 0;
}

.about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.about__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left center;
  animation: aboutLineGrow 1s ease 0.2s both;
}

.about__title {
  font-size: clamp(2.1rem, 3.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 22px;
}

.about__title-accent {
  display: block;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aboutAccentShimmer 6s linear infinite;
}

.about__lead {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
}

/* Signature stat — premium anchor under the lead. */
.about__signature {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border-color);
}

.about__sig-num {
  font-size: clamp(3.4rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text-dark);
}

.about__sig-num span {
  color: var(--gold);
}

.about__sig-label {
  max-width: 16ch;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-light);
}

/* Staggered two-column bento — right column drops down for asymmetry. */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}

.about-card:nth-child(2n) {
  margin-top: 36px;
}

.about-card {
  position: relative;
  padding: 36px 32px 38px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  overflow: hidden;
  /* Resting elevation — lifts the card off the darker canvas so it never
     blends into the background. Deepens further on hover. */
  box-shadow: 0 2px 4px rgba(20, 22, 28, 0.03), 0 14px 34px rgba(20, 22, 28, 0.07);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease, border-color 0.4s ease;
}

.about-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(var(--gold-rgb), 0.55), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.about-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 34px 72px rgba(20, 22, 28, 0.2);
}

.about-card:hover::after {
  opacity: 1;
}

/* Editorial index number, top-right. */
.about-card__index {
  position: absolute;
  top: 26px;
  right: 30px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-light);
  opacity: 0.5;
  transition: color 0.4s ease, opacity 0.4s ease;
}

.about-card:hover .about-card__index {
  color: var(--gold);
  opacity: 1;
}

.about-card__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-radius: 17px;
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease, color 0.4s ease;
}

.about-card:hover .about-card__icon {
  transform: translateY(-2px) rotate(-6deg) scale(1.06);
  background: var(--gold);
  color: #fff;
}

.about-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.about-card__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
}

/* Featured card — gold-tinted, with a slow sheen sweep. */
.about-card--featured {
  background: linear-gradient(155deg, #1d2026 0%, #14161b 100%);
  border-color: rgba(var(--gold-rgb), 0.32);
}

.about-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(var(--gold-rgb), 0.16), transparent);
  transform: skewX(-18deg);
  animation: aboutSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

.about-card--featured .about-card__index {
  color: var(--gold-bright);
  opacity: 0.65;
}

.about-card--featured .about-card__icon {
  background: rgba(var(--gold-rgb), 0.18);
  color: var(--gold-bright);
}

.about-card--featured:hover .about-card__icon {
  background: var(--gold);
  color: var(--on-accent);
}

.about-card--featured .about-card__title {
  color: #fff;
}

.about-card--featured .about-card__text {
  color: rgba(255, 255, 255, 0.72);
}

.about-card--featured:hover {
  border-color: rgba(var(--gold-rgb), 0.55);
}

@keyframes aboutGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.08); }
}

@keyframes aboutLineGrow {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes aboutAccentShimmer {
  to { background-position: 200% center; }
}

@keyframes aboutSheen {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .about__glow,
  .about__title-accent,
  .about__eyebrow::before,
  .about-card--featured::before {
    animation: none;
  }
  .about-card,
  .about-card__icon,
  .about-card::after,
  .about-card__index {
    transition: none;
  }
  .about-card:hover {
    transform: none;
  }
  .about-card:hover .about-card__icon {
    transform: none;
  }
}

/* =========================================
   NEWS (Новости)
   ========================================= */

.news {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: var(--page-bg);
  color: var(--text-dark);
}

/* Keep real content above the decorative blueprint layer. */
.news > .container {
  position: relative;
  z-index: 1;
}

/* ── Decorative accent — a single thin gold arc, drawn in on scroll (GSAP).
   Minimal: just breaks the white field in one corner. Theme-aware (--gold). */
.news__deco {
  position: absolute;
  inset: 0;
  color: var(--gold);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Soft gold glow — adds warmth/volume behind the accent (top-right). */
.news__glow {
  position: absolute;
  top: -140px;
  right: -160px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: objectsGlowDrift 20s ease-in-out infinite;
}

/* Volumetric Möbius ribbon (rendered on <canvas> by JS), with parallax.
   Sits a touch taller than the section so it bleeds off top & bottom. */
.news__mobius {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  opacity: 0.92;
  will-change: transform;
  /* Crisp cable — just a hint of extra saturation, no blur. */
  filter: saturate(1.06);
  /* Fade the ribbon into the top & bottom edges so it reads as background. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

@media (max-width: 640px) {
  .news__glow { width: 420px; height: 420px; }
  .news__mobius { opacity: 0.7; }
}

.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 56px;
}

.news__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.news__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.news__title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--text-dark);
  margin: 0;
}

.news__title-accent {
  color: var(--text-light);
}

.news__all-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 26px;
  border: 1px solid var(--border-color);
  border-radius: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.news__all-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.news__all-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.news__all-btn:hover .news__all-icon {
  transform: translateX(4px);
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--gold-rgb), 0.45);
  box-shadow: 0 24px 60px rgba(20, 22, 28, 0.16);
}

.news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card:hover .news-card__img {
  transform: scale(1.05);
}

.news-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 16px;
  border-radius: 30px;
  background: rgba(16, 18, 22, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 30px;
}

.news-card__date {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.news-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
}

.news-card__title a {
  color: var(--text-dark);
  transition: color 0.2s;
}

.news-card__title a:hover {
  color: var(--gold);
}

.news-card__excerpt {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0 0 22px;
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark);
  transition: color 0.2s;
}

.news-card__more:hover {
  color: var(--gold);
}

.news-card__more-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.news-card__more:hover .news-card__more-icon {
  transform: translateX(4px);
}

/* =========================================
   CTA (Заявка на консультацию)
   ========================================= */

.cta {
  padding: var(--section-y) 0;
  background: var(--bg-light);
  color: var(--text-dark);
}

.cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.cta__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.cta__title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--text-dark);
  margin: 0 0 22px;
}

.cta__title-accent {
  color: var(--text-light);
}

.cta__lead {
  max-width: 440px;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0 0 44px;
}

.cta__contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  margin: 0;
  padding-top: 36px;
  border-top: 1px solid var(--border-color);
}

.cta__contact {
  margin: 0;
}

.cta__contact-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}

.cta__contact-value {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-dark);
}

.cta__contact-value a {
  color: var(--text-dark);
  transition: color 0.2s;
}

.cta__contact-value a:hover {
  color: var(--gold);
}

.cta__contact-note {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-light);
}

.cta__socials {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* ── Form card ─────────────────────────────────────────────────────────── */

.cta__form-wrap {
  position: relative;
}

/* Honeypot — off-screen, not display:none (bots skip display:none). */
.cta__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Lead-form result messages (success replaces the form; error sits inline). */
.cta__form-ok {
  padding: 28px 24px;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-dark);
}
.cta__form-error,
.iplan-form__error {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #dc2626;
}

.cta__form {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 44px 44px 40px;
  box-shadow: 0 30px 80px rgba(20, 22, 28, 0.12);
}

.cta__form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.cta__form-subtitle {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-light);
  margin: 0 0 30px;
}

.cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.cta__field {
  margin-bottom: 22px;
}

.cta__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}

.cta__form .cta__input {
  width: 100%;
  padding: 10px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
  transition: border-color 0.2s;
  outline: none;
}

.cta__form .cta__input::placeholder {
  color: var(--text-light);
  opacity: 0.7;
}

.cta__form .cta__input:focus {
  border-bottom-color: var(--gold);
  box-shadow: none;
}

.cta__form .cta__textarea {
  resize: vertical;
  min-height: 54px;
}

.cta__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c6a052' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 26px;
  cursor: pointer;
}

.cta__form .cta__select:focus {
  border-bottom-color: var(--gold);
}

.cta__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding: 18px 28px;
  border: none;
  border-radius: 44px;
  background: var(--gold);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(var(--gold-rgb), 0.32);
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
}

.cta__submit:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(var(--gold-rgb), 0.42);
}

.cta__submit-icon {
  display: inline-flex;
}

.cta__privacy {
  margin: 22px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-light);
}

.cta__privacy a {
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta__privacy a:hover {
  color: var(--gold);
}

/* =========================================
   ABOUT / NEWS / CTA — RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .about__head {
    position: static;
    top: auto;
    max-width: 720px;
  }
  .cta__inner {
    gap: 44px;
  }
}

@media (max-width: 1000px) {
  .news__grid {
    grid-template-columns: 1fr 1fr;
  }
  .cta__inner {
    grid-template-columns: 1fr;
  }
  .cta__lead {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .about,
  .news,
  .cta {
    padding: 80px 0;
  }
  .about__head,
  .news__head {
    margin-bottom: 44px;
  }
}

@media (max-width: 760px) {
  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .news__grid {
    grid-template-columns: 1fr;
  }
  .news__all-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .about {
    padding: 84px 0;
  }
  .about__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .about-card:nth-child(2n) {
    margin-top: 0;
  }
  .about__signature {
    margin-top: 32px;
    padding-top: 28px;
  }
  .cta__contacts {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .cta__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cta__form {
    padding: 32px 24px 30px;
  }
}

/* =========================================
   ABOUT PAGE (Template: О компании)
   Premium standalone page — reuses design tokens so it
   adapts to light/dark theme automatically.
   ========================================= */

/* Shared bits ------------------------------------------------------------ */
.apage-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.apage-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.apage-accent {
  display: block;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aboutAccentShimmer 6s linear infinite;
}

.apage-section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

.apage-section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.apage-section-head--center .apage-eyebrow::before {
  display: none;
}

.apage-section-title {
  font-size: clamp(1.9rem, 3vw, 2.85rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}

/* Hero ------------------------------------------------------------------- */
.apage-hero {
  position: relative;
  padding: 116px 0 92px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-light) 100%);
  overflow: hidden;
}

.apage-hero__glow {
  position: absolute;
  top: -200px;
  right: -160px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.18) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: aboutGlowDrift 16s ease-in-out infinite;
}

.apage-hero__watermark {
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  font-size: clamp(7rem, 20vw, 20rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-dark);
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
}

.apage-hero .container {
  position: relative;
  z-index: 1;
}

.apage-hero__inner {
  max-width: 820px;
}

.apage-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.apage-hero__eyebrow::before {
  content: '';
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.apage-hero__title {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0 0 26px;
}

.apage-hero__accent {
  display: block;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aboutAccentShimmer 6s linear infinite;
}

.apage-hero__lead {
  max-width: 640px;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
}

/* Story ------------------------------------------------------------------ */
.apage-story {
  padding: var(--section-y) 0;
  background: var(--bg-light);
}

.apage-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.apage-story__title {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 28px;
}

.apage-story__p {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0 0 18px;
}

.apage-story__p:last-child {
  margin-bottom: 0;
}

.apage-quote {
  position: sticky;
  top: 120px;
  padding: 40px 36px 36px;
  background: linear-gradient(155deg, #1d2026 0%, #14161b 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 22px;
  overflow: hidden;
}

.apage-quote__mark {
  display: block;
  font-size: 5rem;
  line-height: 0.6;
  font-weight: 800;
  color: var(--gold);
  opacity: 0.55;
  margin-bottom: 6px;
}

.apage-quote__text {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 22px;
}

.apage-quote__author {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* Metrics ---------------------------------------------------------------- */
.apage-metrics {
  padding: 0 0 6px;
  background: var(--bg-light);
}

.apage-metrics__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 54px 48px;
  background: linear-gradient(155deg, #1d2026 0%, #14161b 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 26px;
  overflow: hidden;
}

.apage-metric {
  position: relative;
  padding: 8px 28px;
  text-align: center;
}

.apage-metric + .apage-metric::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.apage-metric__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 14px;
}

.apage-metric__suffix {
  color: var(--gold);
}

.apage-metric__label {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
}

/* Values ----------------------------------------------------------------- */
.apage-values {
  position: relative;
  padding: 120px 0;
  background: var(--bg-light);
  overflow: hidden;
}

.apage-values__glow {
  position: absolute;
  top: 10%;
  left: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: aboutGlowDrift 18s ease-in-out infinite;
}

.apage-values .container {
  position: relative;
  z-index: 1;
}

.apage-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Override the home stagger — here it's a clean 3-column grid. */
.apage-values__grid .about-card:nth-child(2n) {
  margin-top: 0;
}

/* Mission & values ------------------------------------------------------- */
.apage-mission {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-light) 100%);
  overflow: hidden;
}

.apage-mission__glow {
  position: absolute;
  top: -160px;
  right: 8%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.13) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: aboutGlowDrift 17s ease-in-out infinite;
}

.apage-mission .container {
  position: relative;
  z-index: 1;
}

.apage-mission__top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 58px;
  border-bottom: 1px solid var(--border-color);
}

.apage-mission__title {
  font-size: clamp(1.9rem, 3vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}

.apage-mission__statement {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0;
}

.apage-mission__lead {
  font-weight: 600;
  color: var(--gold);
}

.apage-mission__values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.apage-value {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--border-color);
}

.apage-value::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--gold);
}

.apage-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease, color 0.4s ease;
}

.apage-value:hover .apage-value__icon {
  transform: translateY(-3px) rotate(-6deg);
  background: var(--gold);
  color: #fff;
}

.apage-value__title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 9px;
}

.apage-value__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
}

/* Timeline --------------------------------------------------------------- */
.apage-timeline {
  padding: var(--section-y) 0;
  background: var(--surface);
}

.apage-tl {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 6px 0;
  list-style: none;
}

/* Central spine. */
.apage-tl::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(var(--gold-rgb), 0) 0%,
    var(--gold) 12%,
    var(--gold) 88%,
    rgba(var(--gold-rgb), 0) 100%);
}

.apage-tl__item {
  position: relative;
  width: 50%;
  padding: 0 52px 40px 0;
  text-align: right;
}

.apage-tl__item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 40px 52px;
  text-align: left;
}

.apage-tl__item:last-child {
  padding-bottom: 0;
}

/* Node on the spine. */
.apage-tl__dot {
  position: absolute;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0.16);
  z-index: 1;
}

.apage-tl__item:nth-child(odd) .apage-tl__dot {
  right: -8px;
}

.apage-tl__item:nth-child(even) .apage-tl__dot {
  left: -8px;
}

.apage-tl__card {
  position: relative;
  display: inline-block;
  text-align: left;
  max-width: 420px;
  padding: 26px 30px 28px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease, border-color 0.4s ease;
}

.apage-tl__item:hover .apage-tl__card {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(20, 22, 28, 0.14);
  border-color: rgba(var(--gold-rgb), 0.4);
}

/* Connector from card to the spine node. */
.apage-tl__card::before {
  content: '';
  position: absolute;
  top: 20px;
  width: 40px;
  height: 2px;
}

.apage-tl__item:nth-child(odd) .apage-tl__card::before {
  right: -44px;
  background: linear-gradient(270deg, var(--gold), rgba(var(--gold-rgb), 0.2));
}

.apage-tl__item:nth-child(even) .apage-tl__card::before {
  left: -44px;
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb), 0.2));
}

.apage-tl__year {
  display: block;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 12px;
}

.apage-tl__title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.apage-tl__text {
  font-size: 0.96875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
}

/* Process ---------------------------------------------------------------- */
.apage-process {
  padding: 120px 0;
  background: var(--bg-light);
}

.apage-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.apage-step {
  position: relative;
  padding: 38px 28px 34px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease, border-color 0.4s ease;
}

.apage-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(20, 22, 28, 0.14);
  border-color: rgba(var(--gold-rgb), 0.4);
}

.apage-step__num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--gold-rgb), 0.6);
  margin-bottom: 22px;
}

.apage-step__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.apage-step__text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
}

/* About page — responsive ------------------------------------------------ */
@media (max-width: 1000px) {
  .apage-story__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .apage-quote {
    position: static;
  }
  .apage-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .apage-process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .apage-mission__top {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
    margin-bottom: 50px;
    padding-bottom: 44px;
  }
  .apage-mission__values {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 40px;
  }
}

/* Collapse the alternating timeline to a single left-hand axis. */
@media (max-width: 860px) {
  .apage-tl {
    max-width: 560px;
  }
  .apage-tl::before {
    left: 7px;
    transform: none;
  }
  .apage-tl__item,
  .apage-tl__item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    text-align: left;
    padding: 0 0 30px 44px;
  }
  .apage-tl__item:nth-child(odd) .apage-tl__dot,
  .apage-tl__item:nth-child(even) .apage-tl__dot {
    left: 0;
    right: auto;
  }
  .apage-tl__card {
    display: block;
    max-width: none;
  }
  .apage-tl__card::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .apage-hero {
    padding: 80px 0 64px;
  }
  .apage-story,
  .apage-mission,
  .apage-values,
  .apage-timeline,
  .apage-process {
    padding: 76px 0;
  }
  .apage-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 36px 24px;
  }
  .apage-metric {
    padding: 22px 16px;
  }
  /* On a 2-col grid, dividers only between columns look wrong — drop them. */
  .apage-metric + .apage-metric::before {
    display: none;
  }
  .apage-section-head {
    margin-bottom: 40px;
  }
}

@media (max-width: 560px) {
  .apage-values__grid,
  .apage-process__grid,
  .apage-mission__values {
    grid-template-columns: 1fr;
  }
  .apage-metrics__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   OBJECTS CATALOGUE  (page-objects.php)  +  OBJECT DETAIL (page-object.php)
   Premium listing with status filters, compact asymmetric masonry grid,
   and an editorial internal page. Theme-aware via existing tokens.
   ========================================================================= */

.site-main--catalog,
.site-main--object {
  padding: 0;
}

/* ── Inner hero (catalogue) ───────────────────────────────────────────── */
.cat-hero {
  position: relative;
  padding: calc(var(--header-h) + 28px) 0 32px;
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(var(--gold-rgb), 0.10), transparent 55%),
    var(--page-bg);
  overflow: hidden;
}

.cat-hero__glow {
  position: absolute;
  top: -160px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.16) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: objectsGlowDrift 18s ease-in-out infinite;
}

.cat-hero .container { position: relative; z-index: 1; }

/* Decorative blueprint / compass motif on the right */
.cat-hero__decor {
  position: absolute;
  top: 50%;
  right: -130px;
  transform: translateY(-50%);
  width: 540px;
  height: 540px;
  color: var(--gold);
  pointer-events: none;
  z-index: 0;
  animation: objectsGlowDrift 22s ease-in-out infinite;
}
.cat-hero__decor svg { display: block; width: 100%; height: 100%; }
@media (max-width: 980px) { .cat-hero__decor { display: none; } }

.cat-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-light);
  margin-bottom: 20px;
}
.cat-hero__crumbs a { color: var(--text-light); transition: color 0.25s ease; }
.cat-hero__crumbs a:hover { color: var(--gold); }
.cat-hero__crumb-current { color: var(--text-dark); font-weight: 600; }

.cat-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
}
.cat-hero__head { max-width: 720px; }

.cat-hero__lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  margin: 16px 0 0;
  max-width: 620px;
}

.cat-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.cat-hero__eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.cat-hero__title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0;
}
.cat-hero__title-accent {
  display: block;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aboutAccentShimmer 6s linear infinite;
}

/* ── Catalogue section ────────────────────────────────────────────────── */
.catalog {
  padding: 40px 0 120px;
  background: var(--page-bg);
}

/* Status filter tabs */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 60px;
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.cat-filter__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: none;
  border-radius: 50px;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-light);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}
.cat-filter__tab:hover { color: var(--text-dark); }
.cat-filter__tab.is-active {
  color: var(--on-accent);
  background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  box-shadow: 0 10px 26px rgba(var(--gold-rgb), 0.34);
}
.cat-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}
.cat-filter__tab.is-active .cat-filter__count { background: rgba(0, 0, 0, 0.16); }
[data-theme="dark"] .cat-filter__count { background: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .cat-filter__tab.is-active .cat-filter__count { background: rgba(0, 0, 0, 0.22); }

/* ── Catalogue grid (first row 2 cards, rest 3 per row) ───────────────── */
.obj-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
}
/* Regular tile = 1/3 of the row */
.obj-grid > .obj-tile { grid-column: span 2; }
/* Featured tiles (first visible row) = 1/2 of the row */
.obj-grid > .obj-tile--wide { grid-column: span 3; }

@media (max-width: 960px) {
  .obj-grid { grid-template-columns: repeat(2, 1fr); }
  .obj-grid > .obj-tile,
  .obj-grid > .obj-tile--wide { grid-column: span 1; }
}
@media (max-width: 680px)  {
  .obj-grid { grid-template-columns: 1fr; }
  .obj-grid > .obj-tile,
  .obj-grid > .obj-tile--wide { grid-column: auto; }
}

.obj-tile {
  display: flex;
  margin: 0;
}
.obj-tile.is-hidden { display: none; }

.obj-tile__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease, border-color 0.5s ease;
}
.obj-tile__link:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--gold-rgb), 0.5);
  box-shadow: 0 30px 70px rgba(20, 22, 28, 0.2);
  color: inherit;
}

.obj-tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.obj-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.obj-tile__link:hover .obj-tile__img { transform: scale(1.07); }

.obj-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 17, 22, 0.32) 0%, transparent 34%, transparent 58%, rgba(15, 17, 22, 0.5) 100%);
  pointer-events: none;
}

/* Status badge — colour by state */
.obj-tile__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 13px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--gold);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.obj-tile__badge.is-building { background: #3b82f6; color: #fff; }
.obj-tile__badge.is-done     { background: rgba(20, 22, 28, 0.78); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.obj-tile__badge-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.obj-tile__badge.is-sale .obj-tile__badge-dot::after,
.obj-tile__badge.is-building .obj-tile__badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  animation: objectsPulse 2s ease-out infinite;
}

.obj-tile__class {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 22, 28, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.obj-tile__no {
  position: absolute;
  right: 18px;
  bottom: 8px;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0.22;
  pointer-events: none;
}

.obj-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 26px 26px 28px;
}

.obj-tile__name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.18;
  color: var(--text-dark);
  margin: 0 0 12px;
}

.obj-tile__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-light);
  margin: 0 0 18px;
}
.obj-tile__pin { flex-shrink: 0; margin-top: 1px; color: var(--gold); display: inline-flex; }

.obj-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}
.obj-tile__price { font-size: 1.0625rem; font-weight: 800; color: var(--gold); }
.obj-tile__area  { font-size: 0.875rem; font-weight: 500; color: var(--text-light); }

.obj-tile__rooms {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.obj-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.obj-tile__tag {
  padding: 6px 13px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
}

.obj-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}
.obj-tile__more-icon { display: inline-flex; transition: transform 0.35s ease; }
.obj-tile__link:hover .obj-tile__more-icon { transform: translateX(6px); }

.cat-empty {
  text-align: center;
  font-size: 1.125rem;
  color: var(--text-light);
  padding: 80px 0;
}

/* ========================================================================
   OBJECT DETAIL PAGE
   ===================================================================== */

/* Hero */
.obj-hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  padding: 80px 0 80px;
  overflow: hidden;
}
.obj-hero__media { position: absolute; inset: 0; z-index: 0; }
.obj-hero__img { width: 100%; height: 100%; object-fit: cover; }
.obj-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 17, 22, 0.5) 0%, rgba(15, 17, 22, 0.1) 30%, rgba(15, 17, 22, 0.35) 70%, rgba(15, 17, 22, 0.85) 100%);
}
.obj-hero__inner { position: relative; z-index: 1; }

.obj-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
}
.obj-hero__crumbs a { color: rgba(255, 255, 255, 0.8); transition: color 0.25s ease; }
.obj-hero__crumbs a:hover { color: var(--gold-bright); }
.obj-hero__crumb-current { color: #fff; font-weight: 600; }

.obj-hero__head { max-width: 820px; }

.obj-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 14px;
  border-radius: 30px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--gold);
  margin-bottom: 20px;
}
.obj-hero__badge.is-building { background: #3b82f6; color: #fff; }
.obj-hero__badge.is-done     { background: rgba(255, 255, 255, 0.92); color: var(--on-accent); }
.obj-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.obj-hero__class {
  display: inline-block;
  margin-left: 10px;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.obj-hero__title {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px;
}

.obj-hero__address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.obj-hero__address svg { flex-shrink: 0; margin-top: 3px; color: var(--gold-bright); }
.obj-hero__landmark { display: block; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }

/* Quick facts bar */
.obj-facts {
  background: var(--surface);
  border-bottom: 1px solid var(--border-color);
}
.obj-facts__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}
.obj-facts__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px 36px;
  border-right: 1px solid var(--border-color);
}
.obj-facts__item:last-child { border-right: none; }
.obj-facts__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}
.obj-facts__value { font-size: 1.1875rem; font-weight: 700; color: var(--text-dark); }

/* Body grid */
.obj-main { position: relative; overflow: hidden; padding: 90px 0 110px; background: var(--page-bg); }

/* Decorative blueprint accent — soft glow + diagonal gold lines behind the
   whole light body, matching the homepage sections. */
.obj-main__deco {
  position: absolute;
  inset: 0;
  color: var(--gold);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.obj-main__glow {
  position: absolute;
  top: -160px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.09) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
  animation: objectsGlowDrift 24s ease-in-out infinite;
}
.obj-main__lines {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  opacity: 0.4;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 90%, transparent 100%);
}
.obj-main > .container { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .obj-main__glow { width: 420px; height: 420px; }
  .obj-main__lines { opacity: 0.3; }
}
.obj-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}

.obj-block { margin-bottom: 64px; }
.obj-block:last-child { margin-bottom: 0; }
.obj-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}
.obj-block__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.obj-block__lead {
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0 0 22px;
}
.obj-block__text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0 0 18px;
}

/* About the project — display heading + text / spec-grid columns + tags */
.obj-intro__title {
  max-width: 22ch;
  margin: 0 0 40px;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.obj-intro__rule {
  display: block;
  height: 1px;
  margin: 0 0 48px;
  background: var(--border-color);
}
.obj-intro__cols {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.obj-intro__text { font-size: 1.0625rem; line-height: 1.75; color: var(--text-light); }

.obj-intro__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--border-color);
  overflow: hidden;
}
.obj-intro__spec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  background: var(--surface);
}
.obj-intro__spec-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
}
.obj-intro__spec-value {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-dark);
}

.obj-intro__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 52px;
}
.obj-intro__tag {
  padding: 12px 22px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  font-size: 0.9375rem;
  color: var(--text-dark);
  background: var(--surface);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.obj-intro__tag:hover { border-color: rgba(var(--gold-rgb), 0.5); color: var(--gold); }

@media (max-width: 860px) {
  .obj-intro__cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .obj-intro__specs { grid-template-columns: 1fr; }
}

/* Perks — numbered mosaic (one featured card + smaller ones) */
.obj-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.obj-perk {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--surface);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.obj-perk:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--gold-rgb), 0.45);
  box-shadow: 0 20px 50px rgba(20, 22, 28, 0.12);
}
.obj-perk__num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--text-light);
  margin-bottom: 22px;
}
.obj-perk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  color: var(--text-dark);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  margin-bottom: 18px;
}
.obj-perk__title { font-size: 1.1875rem; font-weight: 700; color: var(--text-dark); margin: 0 0 10px; }
.obj-perk__text { font-size: 0.9375rem; line-height: 1.55; color: var(--text-light); margin: 0; }

/* Featured (first) card — brand accent, larger type */
.obj-perk--featured {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--gold-rgb), 0.14), transparent 55%),
    var(--surface);
  border-color: rgba(var(--gold-rgb), 0.35);
}
.obj-perk--featured .obj-perk__icon {
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.14);
  border-color: rgba(var(--gold-rgb), 0.3);
}
.obj-perk--featured .obj-perk__title {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.obj-perk--featured .obj-perk__text { font-size: 1.0625rem; line-height: 1.65; max-width: 42ch; }

/* ── Promo block — highlighted key feature, dark/gold band between light blocks ── */
.obj-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 44px;
  padding: 50px 54px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(150deg, #1d2026 0%, #14161b 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.34);
  color: #fff;
  box-shadow: 0 30px 70px rgba(20, 22, 28, 0.28);
}
.obj-promo__glow {
  position: absolute;
  top: -45%;
  right: -8%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.22) 0%, rgba(var(--gold-rgb), 0) 68%);
  pointer-events: none;
}
.obj-promo__body { position: relative; z-index: 1; }
.obj-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 16px;
}
.obj-promo__eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.obj-promo__title {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 14px;
}
.obj-promo__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 26px;
  max-width: 52ch;
}
.obj-promo__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: 0 12px 30px rgba(var(--gold-rgb), 0.34);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.obj-promo__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(var(--gold-rgb), 0.44);
}
.obj-promo__btn svg { transition: transform 0.35s ease; }
.obj-promo__btn:hover svg { transform: translateX(4px); }

.obj-promo__figure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 230px;
  padding: 32px 40px;
  border-radius: 20px;
  background: rgba(var(--gold-rgb), 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
}
.obj-promo__value {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.obj-promo__value-label {
  margin-top: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  max-width: 18ch;
}

@media (max-width: 820px) {
  .obj-promo { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; }
  .obj-promo__figure { min-width: 0; align-items: flex-start; text-align: left; padding: 24px 28px; }
  .obj-promo__value-label { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .obj-promo__btn, .obj-promo__btn svg { transition: none; }
}

/* Mosaic: featured spans two rows in the left column (enough cards to fill) */
.obj-perks--mosaic .obj-perk--featured { grid-row: span 2; }

@media (max-width: 900px) {
  .obj-perks { grid-template-columns: repeat(2, 1fr); }
  .obj-perks--mosaic .obj-perk--featured { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 560px) {
  .obj-perks { grid-template-columns: 1fr; }
  .obj-perks--mosaic .obj-perk--featured { grid-column: auto; }
}

/* Large editorial sections — heading + point lists + photo collage (repeater) */
.obj-sections { display: flex; flex-direction: column; gap: 88px; }
.obj-sect { display: flex; gap: 56px; align-items: center; }
/* Layout per section (ACF select); `auto` zig-zags by position. */
.obj-sect--auto:nth-child(even) { flex-direction: row-reverse; }
.obj-sect--text-left { flex-direction: row; }
.obj-sect--text-right { flex-direction: row-reverse; }
.obj-sect--text-bottom { flex-direction: column; align-items: stretch; }
.obj-sect--text-bottom .obj-sect__text { order: 2; flex: none; }
.obj-sect--text-bottom .obj-sect__gallery { order: 1; }
.obj-sect__text { flex: 0 0 33%; }
/* Decorative gold tick above the heading */
.obj-sect__title {
  position: relative;
  margin: 0 0 28px;
  padding-top: 26px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.obj-sect__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* Point list — decorative gold diamond markers */
.obj-sect__points { list-style: none; margin: 0 0 26px; padding: 0; }
.obj-sect__points li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-dark);
}
.obj-sect__points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Description — decorative leading rule + refined accent type */
.obj-sect__caption {
  position: relative;
  margin: 0;
  padding-top: 22px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-light);
}
.obj-sect__caption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Secondary button — opens the callback modal */
.obj-sect__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 13px 26px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  background: transparent;
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.obj-sect__btn svg { transition: transform 0.3s ease; }
.obj-sect__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.obj-sect__btn:hover svg { transform: translateX(3px); }

.obj-sect__gallery {
  flex: 1;
  display: grid;
  /* Mobile-first: simple 2-col grid; art-directed composition kicks in ≥901px. */
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  gap: 14px;
}
.obj-sect__gallery .obj-sect__img:first-child { grid-column: span 2; }
.obj-sect__img {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 22px 50px rgba(20, 22, 28, 0.16);
}
.obj-sect__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.obj-sect__img:hover img { transform: scale(1.06); }

@media (min-width: 901px) {
  /* Fine 6-col canvas — each photo count gets a hand-tuned asymmetric layout
     with one dominant focal frame and staggered, gap-free tiling. */
  .obj-sect__gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 46px;
    gap: 18px;
  }
  .obj-sect__gallery .obj-sect__img { grid-column: auto; }

  .obj-sect__gallery--n1 .obj-sect__img:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 8; }

  .obj-sect__gallery--n2 .obj-sect__img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 8; }
  .obj-sect__gallery--n2 .obj-sect__img:nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 8; }

  .obj-sect__gallery--n3 .obj-sect__img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 8; }
  .obj-sect__gallery--n3 .obj-sect__img:nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 4; }
  .obj-sect__gallery--n3 .obj-sect__img:nth-child(3) { grid-column: 5 / 7; grid-row: 4 / 8; }

  .obj-sect__gallery--n4 .obj-sect__img:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 8; }
  .obj-sect__gallery--n4 .obj-sect__img:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 4; }
  .obj-sect__gallery--n4 .obj-sect__img:nth-child(3) { grid-column: 4 / 7; grid-row: 4 / 8; }
  .obj-sect__gallery--n4 .obj-sect__img:nth-child(4) { grid-column: 1 / 7; grid-row: 8 / 12; }

  .obj-sect__gallery--n5 .obj-sect__img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 8; }
  .obj-sect__gallery--n5 .obj-sect__img:nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 4; }
  .obj-sect__gallery--n5 .obj-sect__img:nth-child(3) { grid-column: 5 / 7; grid-row: 4 / 9; }
  .obj-sect__gallery--n5 .obj-sect__img:nth-child(4) { grid-column: 1 / 5; grid-row: 8 / 12; }
  .obj-sect__gallery--n5 .obj-sect__img:nth-child(5) { grid-column: 5 / 7; grid-row: 9 / 12; }

  /* Text-bottom: collage is full-width, so widen the focal frame. */
  .obj-sect--text-bottom .obj-sect__gallery--n5 .obj-sect__img:nth-child(1) { grid-column: 1 / 4; }
  .obj-sect--text-bottom .obj-sect__gallery--n5 .obj-sect__img:nth-child(4) { grid-column: 1 / 4; }
  .obj-sect--text-bottom .obj-sect__gallery--n5 .obj-sect__img:nth-child(2),
  .obj-sect--text-bottom .obj-sect__gallery--n5 .obj-sect__img:nth-child(3),
  .obj-sect--text-bottom .obj-sect__gallery--n5 .obj-sect__img:nth-child(5) { grid-column: 4 / 7; }
}

@media (max-width: 900px) {
  .obj-sect, .obj-sect:nth-child(even) { flex-direction: column; gap: 28px; align-items: stretch; }
  .obj-sect__text { flex: none; }
  .obj-sections { gap: 64px; }
}
@media (max-width: 560px) {
  .obj-sect__gallery { grid-auto-rows: 130px; }
}

/* Specs */

/* ── Layouts — filterable card grid (4 per row) ─────────────────────────── */
.obj-lay__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 30px;
}
.obj-lay__bar .obj-block__eyebrow { margin: 0; }
.obj-lay__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.obj-lay__rooms { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.obj-lay__blocks { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.obj-lay__chip {
  padding: 9px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--surface);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.obj-lay__chip:hover { color: var(--text-dark); border-color: rgba(var(--gold-rgb), 0.5); }
.obj-lay__chip.is-active {
  color: var(--on-accent);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(var(--gold-rgb), 0.3);
}

/* Area dual-range slider */
.obj-lay__area { display: inline-flex; flex-direction: column; gap: 10px; min-width: 230px; }
.obj-lay__area-cap { font-size: 0.875rem; font-weight: 600; color: var(--text-light); }
.obj-lay__area-cap b { color: var(--text-dark); font-weight: 700; }
.obj-lay__range { position: relative; height: 24px; display: flex; align-items: center; }
.obj-lay__range-track {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--border-color);
}
.obj-lay__range-fill {
  position: absolute;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.obj-lay__range-input {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 24px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.obj-lay__range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.25);
  cursor: pointer;
}
.obj-lay__range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.25);
  cursor: pointer;
}

/* Card grid */
.obj-lay__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.obj-lay-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.obj-lay-card:hover,
.obj-lay-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow: 0 24px 54px rgba(20, 22, 28, 0.14);
}
.obj-lay-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* "Подробнее" affordance — signals the whole card opens a popup. */
.obj-lay-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gold);
}
.obj-lay-card__more svg { transition: transform 0.3s ease; }
.obj-lay-card:hover .obj-lay-card__more svg { transform: translateX(4px); }
.obj-lay-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--gold-rgb), 0.08), transparent 60%),
    var(--surface-2);
  border-bottom: 1px solid var(--border-color);
}
.obj-lay-card__plan,
.obj-lay-card__img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 2D (plan) ↔ 3D (render) stack: show one at a time on dual cards. */
.obj-lay-card.has-3d .obj-lay-card__img[data-view="render"] { display: none; }
.obj-lay-card.has-3d.is-render .obj-lay-card__img[data-view="plan"] { display: none; }
.obj-lay-card.has-3d.is-render .obj-lay-card__img[data-view="render"] { display: block; }

/* View switch (top-right of the media). */
.obj-lay-card__views {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-color);
  z-index: 1;
}
.obj-lay-card__view {
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.obj-lay-card__view:hover { color: var(--text-dark); }
.obj-lay-card__view.is-active {
  color: var(--on-accent);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
}

.obj-lay-card__ph { width: 56%; color: rgba(var(--gold-rgb), 0.55); }
.obj-lay-card__ph svg { width: 100%; height: auto; }
.obj-lay-card__area {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-color);
}
.obj-lay-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 22px;
}
.obj-lay-card__head { display: flex; flex-direction: column; gap: 3px; }
.obj-lay-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--text-dark); margin: 0; }
.obj-lay-card__sub { font-size: 0.8125rem; font-weight: 600; color: var(--text-light); }
.obj-lay-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dark);
  background: transparent;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.obj-lay-card__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.obj-lay-card__btn svg { transition: transform 0.3s ease; }
.obj-lay-card__btn:hover svg { transform: translateX(3px); }
.obj-lay-card[hidden] { display: none; }
.obj-lay__empty { margin: 8px 0 0; color: var(--text-light); font-size: 0.9375rem; }

@media (max-width: 1080px) { .obj-lay__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .obj-lay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 640px) {
  .obj-lay__bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .obj-lay__filters { flex-direction: column; align-items: stretch; gap: 14px; }
  .obj-lay__area { min-width: 0; }
}
@media (max-width: 460px)  { .obj-lay__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .obj-lay-card, .obj-lay__chip, .obj-lay-card__btn svg { transition: none; }
}

/* Gallery */
.obj-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.obj-gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}
.obj-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.obj-gallery__item:hover img { transform: scale(1.08); }

/* Location — full-bleed interactive map with a floating brand card */
#obj-location {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.obj-loc {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  min-height: 620px;
}
.obj-loc__map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-light);
}
.obj-loc__map.leaflet-container { font-family: var(--font-sans); }
.obj-loc__pin { background: none; border: 0; color: var(--gold); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.obj-loc__infra-pin span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-color); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }

/* ── Object: house specs (key/value) ────────────────────────────────── */
.obj-house { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-color); columns: 2; column-gap: 3rem; }
.obj-house__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border-color); break-inside: avoid; }
.obj-house__label { color: var(--text-light); font-size: 0.9375rem; }
.obj-house__value { color: var(--text-dark); font-weight: 700; text-align: right; }

/* ── Object: documents — large premium cards with view/download ─────── */
.obj-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.obj-doc { display: flex; }
.obj-doc__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.04);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
/* Gold hairline that sweeps in on hover along the top edge. */
.obj-doc__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.obj-doc__card:not(.obj-doc__card--empty):hover {
  border-color: rgba(var(--gold-rgb), 0.55);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(20, 22, 28, 0.12);
}
.obj-doc__card:not(.obj-doc__card--empty):hover::before { transform: scaleX(1); }
.obj-doc__top { display: flex; align-items: center; gap: 18px; flex: 1; }
.obj-doc__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  color: var(--gold);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.14), rgba(var(--gold-rgb), 0.05));
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  transition: background .22s ease, color .22s ease;
}
.obj-doc__card:not(.obj-doc__card--empty):hover .obj-doc__icon {
  color: var(--on-accent);
  background: linear-gradient(160deg, var(--gold), var(--gold-bright));
  border-color: transparent;
}
.obj-doc__name { flex: 1; min-width: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--text-dark); }
/* Action buttons — pinned to the bottom so cards stay height-aligned. */
.obj-doc__actions { display: flex; gap: 10px; margin-top: 22px; }
.obj-doc__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.obj-doc__btn svg { flex: none; }
.obj-doc__btn--view {
  color: var(--text-dark);
  background: var(--surface);
  border: 1px solid var(--border-color);
}
.obj-doc__btn--view:hover {
  border-color: rgba(var(--gold-rgb), 0.6);
  color: var(--gold);
  transform: translateY(-1px);
}
.obj-doc__btn--dl {
  color: var(--on-accent);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
  border: 1px solid transparent;
  box-shadow: 0 8px 20px rgba(var(--gold-rgb), 0.32);
}
.obj-doc__btn--dl:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--gold-rgb), 0.44); }
.obj-doc__soon {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  background: var(--bg-light);
  border: 1px dashed var(--border-color);
}
.obj-doc__card--empty { opacity: 0.85; }

/* ── Object: construction progress — large premium cards ────────────── */
.obj-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.obj-prog__item {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.obj-prog__item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow: 0 26px 56px rgba(20, 22, 28, 0.14);
}
.obj-prog__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.obj-prog__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(21, 23, 28, 0.34));
  pointer-events: none;
}
.obj-prog__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
.obj-prog__item:hover .obj-prog__media img { transform: scale(1.05); }
/* Percent — gold pill overlaid on the image corner. */
.obj-prog__pct {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--on-accent);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: 0 8px 22px rgba(var(--gold-rgb), 0.4);
}
.obj-prog__body { padding: 24px 26px 28px; }
.obj-prog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.obj-prog__label { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text-dark); }
/* Percent shown inline in the body head only when there is no image to sit on. */
.obj-prog__pct--inline { position: static; box-shadow: none; }
.obj-prog__bar { height: 9px; border-radius: 999px; background: var(--bg-light); border: 1px solid var(--border-color); margin: 16px 0 14px; overflow: hidden; }
.obj-prog__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5);
}
.obj-prog__text { margin: 0; color: var(--text-light); font-size: 1rem; line-height: 1.6; }

/* ── Object: infrastructure list ────────────────────────────────────── */
/* Asymmetric flex row — items size to their content and grow to fill,
   so widths vary naturally (no rigid equal columns) and names never cramp. */
.obj-infra { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.obj-infra__item {
  flex: 1 1 auto;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.04);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Every 3rd / 5th item leans wider — a light asymmetric rhythm across rows. */
.obj-infra__item:nth-child(3n) { flex-grow: 1.6; }
.obj-infra__item:nth-child(5n) { flex-grow: 2.2; }
.obj-infra__item:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(20, 22, 28, 0.1);
}
.obj-infra__icon {
  flex: none;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--gold);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.14), rgba(var(--gold-rgb), 0.05));
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}
.obj-infra__name { flex: 1; font-weight: 700; color: var(--text-dark); font-size: 1.0625rem; line-height: 1.3; }
.obj-infra__dist {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
}

/* ── Object: installment calculator ─────────────────────────────────── */
/* ── Object: installment calculator — premium gold theme ────────────── */
.obj-calc { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: stretch; }
.obj-calc__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.04);
}
.obj-calc__title { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em; }
.obj-calc__note {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
}
.obj-calc__note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.obj-calc__field { display: flex; flex-direction: column; gap: 12px; }
.obj-calc__cap { font-size: 0.9375rem; color: var(--text-light); }
.obj-calc__cap b { color: var(--gold); font-weight: 800; }
.obj-calc__price {
  padding: 16px 18px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-light);
  color: var(--text-dark);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.obj-calc__price:focus {
  outline: none;
  background: var(--surface);
  border-color: rgba(var(--gold-rgb), 0.7);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.12);
}
/* Custom gold slider with a value-driven filled track (--pct set by JS). */
.obj-calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright)) no-repeat,
              var(--border-color);
  background-size: var(--pct, 0%) 100%, 100% 100%;
  cursor: pointer;
}
.obj-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.obj-calc__range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.obj-calc__range:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0.18), 0 4px 12px rgba(var(--gold-rgb), 0.45); }
.obj-calc__range::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.45);
}
.obj-calc__range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--border-color); }
.obj-calc__range::-moz-range-progress { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }

/* Result card — deep premium panel with gold hairline + monthly figure. */
.obj-calc__result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(165deg, #23262e 0%, #14161b 60%, #0e1014 100%);
  color: #fff;
  box-shadow: 0 30px 60px rgba(14, 16, 20, 0.35);
}
.obj-calc__result::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
/* Soft gold glow in the top-right corner. */
.obj-calc__result::after {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.22), transparent 70%);
  pointer-events: none;
}
.obj-calc__result-cap { position: relative; z-index: 1; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.obj-calc__result-val {
  position: relative;
  z-index: 1;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.obj-calc__rows { position: relative; z-index: 1; list-style: none; margin: 10px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: 12px; }
.obj-calc__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); }
.obj-calc__rows b { color: #fff; font-size: 1.0625rem; font-weight: 700; }
.obj-calc__btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 16px 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 1.0625rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(var(--gold-rgb), 0.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.obj-calc__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--gold-rgb), 0.5); }
.obj-calc__disclaimer { position: relative; z-index: 1; margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); }

@media (max-width: 860px) {
  .obj-house { columns: 1; }
  .obj-calc { grid-template-columns: 1fr; }
}

.obj-loc__card {
  position: absolute;
  z-index: 2;
  top: 40px;
  /* Map is full-bleed (100vw), but the card lines up with the global
     .container content edge: 40px padding inside a max 1600px column. */
  left: max(40px, calc(50vw - 760px));
  width: min(380px, calc(100vw - 80px));
  padding: 22px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 60px rgba(20, 22, 28, 0.22);
}
.obj-loc__media {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
}
.obj-loc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.obj-loc__title {
  margin: 0 0 18px;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-dark);
}

.obj-loc__address {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--text-dark);
}
.obj-loc__address svg { flex: none; margin-top: 2px; color: var(--gold); }
.obj-loc__landmark { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--text-light); }

.obj-loc__phone {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 22px;
  color: var(--text-dark);
}
.obj-loc__phone svg { flex: none; color: var(--gold); }
.obj-loc__phone-box { display: flex; flex-direction: column; }
.obj-loc__phone-num { font-size: 1.35rem; font-weight: 700; line-height: 1.2; transition: color 0.25s ease; }
.obj-loc__phone-label { font-size: 0.8125rem; color: var(--text-light); }
.obj-loc__phone:hover .obj-loc__phone-num { color: var(--gold); }

.obj-loc__btn {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: 0 14px 30px rgba(var(--gold-rgb), 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.obj-loc__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(var(--gold-rgb), 0.5); }

@media (max-width: 720px) {
  .obj-loc { min-height: 0; border-radius: 18px; }
  .obj-loc__map { position: relative; inset: auto; height: 300px; }
  .obj-loc__card {
    position: static;
    width: 100%;
    padding: 22px 4px 4px;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Sticky aside */
.obj-aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }

.obj-cta {
  padding: 32px;
  border-radius: 22px;
  background: linear-gradient(160deg, #1d2026 0%, #15171c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px rgba(20, 22, 28, 0.28);
}
.obj-cta__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.obj-cta__price { display: block; font-size: 1.875rem; font-weight: 800; color: var(--gold-bright); margin-bottom: 16px; }
.obj-cta__note { font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.7); margin: 0 0 24px; }

.obj-cta__field { position: relative; margin-bottom: 14px; }
.obj-cta__field input {
  width: 100%;
  padding: 18px 18px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.obj-cta__field input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.07); }
.obj-cta__field label {
  position: absolute;
  left: 19px;
  top: 16px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition: all 0.2s ease;
}
.obj-cta__field input:focus + label,
.obj-cta__field input:not(:placeholder-shown) + label {
  top: 7px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.obj-cta__submit {
  width: 100%;
  padding: 17px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  color: var(--on-accent);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 6px;
}
.obj-cta__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(var(--gold-rgb), 0.4); }
.obj-cta__privacy { font-size: 0.75rem; line-height: 1.5; color: rgba(255, 255, 255, 0.45); margin: 14px 0 0; text-align: center; }

.obj-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-dark);
  transition: all 0.3s ease;
}
.obj-back:hover { border-color: var(--gold); color: var(--gold); }
.obj-back svg { transition: transform 0.3s ease; }
.obj-back:hover svg { transform: translateX(-5px); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .obj-main__grid { grid-template-columns: 1fr; gap: 48px; }
  .obj-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .obj-cta { flex: 1 1 320px; }
  .obj-back { flex: 1 1 200px; }
}
@media (max-width: 820px) {
  .obj-facts__list { grid-template-columns: repeat(2, 1fr); }
  .obj-facts__item:nth-child(2) { border-right: none; }
  .obj-facts__item { border-bottom: 1px solid var(--border-color); }
  .obj-perks { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .obj-facts__list { grid-template-columns: 1fr; }
  .obj-facts__item { border-right: none; }
  .obj-gallery { grid-template-columns: 1fr; }
  .cat-filter { width: 100%; border-radius: 20px; }
  .cat-filter__tab { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-hero__glow,
  .cat-hero__decor,
  .cat-hero__title-accent,
  .obj-tile__badge-dot::after { animation: none; }
  .obj-tile__link,
  .obj-tile__img,
  .obj-perk { transition: none; }
}

/* the_content() body inside an object block (single-object.php) */
.obj-block__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0 0 18px;
}
.obj-block__body p:last-child { margin-bottom: 0; }
.obj-block__body h2,
.obj-block__body h3 {
  color: var(--text-dark);
  margin: 28px 0 14px;
}
.obj-block__body ul,
.obj-block__body ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-light); }
.obj-block__body li { margin-bottom: 8px; }

/* ============================================================================
   NEWS ARCHIVE  (page-news.php)  +  SINGLE ARTICLE (single.php)
   ========================================================================= */

.news--archive { padding: 80px 0 110px; }

/* Pagination */
.news-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 64px;
}
.news-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  transition: all 0.3s ease;
}
a.news-pagination__item:hover { border-color: var(--gold); color: var(--gold); }
.news-pagination__item.current {
  background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  border-color: transparent;
  color: var(--on-accent);
}
.news-pagination__item.dots { border: none; background: transparent; }

/* ── Single article ───────────────────────────────────────────────────── */
.site-main--article { padding: 0; }

.article-hero { position: relative; overflow: hidden; }

/* With a featured image: tall hero, white text over scrim. */
.article-hero.has-cover {
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 0 56px;
}
.article-hero__media { position: absolute; inset: 0; z-index: 0; }
.article-hero__img { width: 100%; height: 100%; object-fit: cover; }
.article-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,17,22,0.45) 0%, rgba(15,17,22,0.12) 32%, rgba(15,17,22,0.35) 66%, rgba(15,17,22,0.88) 100%);
}
.article-hero.has-cover .article-hero__inner { position: relative; z-index: 1; }
.article-hero.has-cover .article-hero__crumbs,
.article-hero.has-cover .article-hero__crumbs a { color: rgba(255,255,255,0.78); }
.article-hero.has-cover .article-hero__crumbs a:hover { color: var(--gold-bright); }
.article-hero.has-cover .article-hero__crumb-current { color: #fff; }
.article-hero.has-cover .article-hero__title { color: #fff; }
.article-hero.has-cover .article-hero__date { color: rgba(255,255,255,0.8); }

/* No featured image: compact header on theme background. */
.article-hero.no-cover {
  padding: calc(var(--header-h) + 60px) 0 10px;
  border-bottom: 1px solid var(--border-color);
}

.article-hero__inner { max-width: 860px; }
.article-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-light);
  margin-bottom: 26px;
}
.article-hero__crumbs a { color: var(--text-light); transition: color 0.25s ease; }
.article-hero__crumbs a:hover { color: var(--gold); }
.article-hero__crumb-current { color: var(--text-dark); font-weight: 600; }

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.article-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--gold);
}
.article-hero__date { font-size: 0.9375rem; font-weight: 500; color: var(--text-light); }

.article-hero__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}

/* Body — constrained reading column. */
.article-body { padding: 64px 0 100px; background: var(--page-bg); }
.article-content { max-width: 760px; margin: 0 auto; }
.article-content > p {
  font-size: 1.1875rem;
  line-height: 1.75;
  color: var(--text-dark);
  margin: 0 0 26px;
}
.article-content > p:first-of-type { font-size: 1.3125rem; color: var(--text-dark); }
.article-content h2 { font-size: 1.75rem; font-weight: 800; margin: 44px 0 16px; color: var(--text-dark); }
.article-content h3 { font-size: 1.375rem; font-weight: 700; margin: 36px 0 14px; color: var(--text-dark); }
.article-content ul,
.article-content ol { margin: 0 0 26px; padding-left: 24px; color: var(--text-dark); font-size: 1.0625rem; line-height: 1.7; }
.article-content li { margin-bottom: 10px; }
.article-content img { border-radius: 16px; margin: 12px 0 28px; }
.article-content blockquote {
  margin: 32px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--gold);
  font-size: 1.3125rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-dark);
}
.article-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--gold-bright); }

.article-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; }
.article-tag {
  padding: 7px 15px;
  border-radius: 30px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
}

.article-foot {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border-color);
}
.article-foot .obj-back { display: inline-flex; margin-bottom: 28px; }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface);
  transition: all 0.3s ease;
}
.article-nav__link:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20,22,28,0.12); }
.article-nav__link--next { text-align: right; }
.article-nav__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.article-nav__title { font-size: 1rem; font-weight: 700; color: var(--text-dark); line-height: 1.35; }

@media (max-width: 600px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__link--next { text-align: left; }
}

/* ============================================================================
   OBJECT HERO — premium first screen (single-object.php)
   ========================================================================= */

/* Soft gold glow drifting behind the hero content. */
.obj-hero__glow {
  position: absolute;
  left: -180px;
  bottom: -160px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.22) 0%, rgba(var(--gold-rgb), 0) 70%);
  pointer-events: none;
  z-index: 1;
  animation: objectsGlowDrift 18s ease-in-out infinite;
}

/* Richer, more cinematic scrim for the premium first screen. */
.obj-hero__scrim {
  background:
    radial-gradient(120% 90% at 18% 100%, rgba(15,17,22,0.78) 0%, rgba(15,17,22,0) 60%),
    linear-gradient(180deg, rgba(15,17,22,0.5) 0%, rgba(15,17,22,0.08) 26%, rgba(15,17,22,0.1) 56%, rgba(15,17,22,0.82) 100%);
}

.obj-hero__inner { position: relative; z-index: 2; width: 100%; }

.obj-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.obj-hero__tags .obj-hero__badge,
.obj-hero__tags .obj-hero__class { margin: 0; }
.obj-hero__class--soft {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.obj-hero__title {
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.obj-hero__address { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }

.obj-hero__lead {
  max-width: 600px;
  margin: 18px 0 0;
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* Action buttons */
.obj-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.obj-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.obj-btn__icon { display: inline-flex; transition: transform 0.35s ease; }

.obj-btn--gold {
  color: var(--on-accent);
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: 0 16px 38px rgba(var(--gold-rgb), 0.42);
}
.obj-btn--gold:hover {
  color: var(--on-accent);
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(var(--gold-rgb), 0.55);
}

.obj-btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.obj-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-3px);
}
.obj-btn--ghost:hover .obj-btn__icon { transform: translateX(5px); }

/* Scroll-down indicator */
.obj-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.obj-hero__scroll-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.obj-hero__scroll-mouse span {
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: #fff;
  animation: objHeroScroll 1.8s ease-in-out infinite;
}
@keyframes objHeroScroll {
  0%   { opacity: 0; transform: translateY(-4px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

/* Sticky-header offset so in-page anchors land below the header. */
#obj-overview,
#obj-layouts,
#obj-location,
#iplan {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

@media (max-width: 560px) {
  .obj-hero__actions { flex-direction: column; align-items: stretch; }
  .obj-btn { justify-content: center; }
  .obj-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .obj-hero__glow,
  .obj-hero__scroll-mouse span { animation: none; }
}

/* ============================================================================
   OBJECT PAGE — TRANSPARENT HEADER OVER HERO (mirrors the home behaviour)
   ========================================================================= */

.single-object .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
}
.single-object .site-header-content { height: var(--header-h); }

/* Solid glass once scrolled */
.single-object .site-header.scrolled {
  position: fixed;
  background: var(--hero-header-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--hero-header-border);
  box-shadow: var(--hero-header-shadow);
}

/* Logo + text light over the hero */
.single-object .brand-logo .logo-white { display: block; }
.single-object .brand-logo .logo-dark  { display: none; }
.single-object .brand-name { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.single-object .brand-tagline { color: rgba(255, 255, 255, 0.65); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

.single-object .main-navigation ul li a {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.single-object .main-navigation ul li a:hover,
.single-object .main-navigation ul li.current-menu-item > a,
.single-object .main-navigation ul li.current_page_item > a { color: #fff; }

.single-object .header-phone__number { color: #fff; }
.single-object .header-phone__note { color: rgba(255, 255, 255, 0.5); }

.single-object .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.single-object .theme-toggle:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* Scrolled glass — light theme flips text/logo back to dark for contrast */
[data-theme="light"] .single-object .site-header.scrolled .brand-name { color: var(--text-dark); }
[data-theme="light"] .single-object .site-header.scrolled .brand-tagline { color: var(--gold-bright); }
[data-theme="light"] .single-object .site-header.scrolled .main-navigation ul li a { color: var(--text-dark); }
[data-theme="light"] .single-object .site-header.scrolled .main-navigation ul li a:hover,
[data-theme="light"] .single-object .site-header.scrolled .main-navigation ul li.current-menu-item > a { color: var(--primary-color); }
[data-theme="light"] .single-object .site-header.scrolled .header-phone__number { color: var(--text-dark); }
[data-theme="light"] .single-object .site-header.scrolled .header-phone__note { color: var(--text-light); }
[data-theme="light"] .single-object .site-header.scrolled .theme-toggle { color: var(--text-dark); border-color: var(--border-color); }
[data-theme="light"] .single-object .site-header.scrolled .logo-white { display: none; }
[data-theme="light"] .single-object .site-header.scrolled .logo-dark { display: block; }

.single-object .site-header.scrolled .main-navigation ul li a,
.single-object .site-header.scrolled .brand-name,
.single-object .site-header.scrolled .brand-tagline { text-shadow: none; }

/* Header now overlays — hero fills the whole viewport. */
.single-object .obj-hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 40px);
}

/* ============================================================================
   OBJECT HERO — asymmetric layout (content left · glass facts panel right)
   ========================================================================= */

.obj-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 400px);
  align-items: end;
  gap: 56px;
  margin-top: 40px;
}

.obj-hero__head { max-width: 720px; }

/* More breathing room between the stacked blocks (was cramped). */
.obj-hero__tags { margin-bottom: 26px; }
.obj-hero__title { margin: 0 0 26px; line-height: 1.04; }
.obj-hero__address { margin: 0; }
.obj-hero__address + .obj-hero__lead { margin-top: 22px; }
.obj-hero__lead { margin-top: 22px; }
.obj-hero__actions { margin-top: 40px; }

/* Glass facts panel */
.obj-hero__panel {
  padding: 30px 30px 26px;
  border-radius: 20px;
  background: rgba(18, 20, 26, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.obj-hero__panel-list { list-style: none; margin: 0; padding: 0; }
.obj-hero__panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.obj-hero__panel-row:last-child { border-bottom: none; }
.obj-hero__panel-key { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.obj-hero__panel-val { font-size: 0.9375rem; font-weight: 700; color: #fff; text-align: right; }

.obj-hero__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.obj-hero__panel-cta svg { transition: transform 0.35s ease; }
.obj-hero__panel-cta:hover { color: #fff; }
.obj-hero__panel-cta:hover svg { transform: translateX(6px); }

@media (max-width: 980px) {
  .obj-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .obj-hero__panel { max-width: 460px; }
}
@media (max-width: 640px) {
  /* Declutter the object hero on phones — readable over the render, not overloaded.
     Let it size to content (no forced 100vh), darken the scrim uniformly, trim
     the copy, and drop the lead (it repeats as the «О проекте» heading below). */
  .single-object .obj-hero {
    min-height: 100vh;
    min-height: 100svh;                       /* full-screen immersive hero */
    padding-top: calc(var(--header-h) + 18px);
    padding-bottom: 34px;                      /* content sits at the bottom (align-items: flex-end) */
  }
  .obj-hero__scrim {
    background: linear-gradient(180deg, rgba(15, 17, 22, 0.6) 0%, rgba(15, 17, 22, 0.4) 44%, rgba(15, 17, 22, 0.88) 100%);
  }
  .obj-hero__grid { gap: 16px; margin-top: 16px; }
  /* Declutter: drop the breadcrumbs, status/class stickers and the lead (the
     lead repeats as the «О проекте» heading below). Keep the key facts, compact. */
  .obj-hero__crumbs,
  .obj-hero__tags,
  .obj-hero__lead { display: none; }
  .obj-hero__title { font-size: clamp(1.8rem, 8vw, 2.3rem); margin: 0 0 10px; }
  .obj-hero__address { font-size: 0.9375rem; }
  .obj-hero__actions { margin-top: 18px; gap: 10px; }
  .obj-btn { padding: 13px 22px; font-size: 0.9375rem; border-radius: 12px; }
  .obj-hero__scroll { display: none; }

  /* Key facts — compact borderless 2-column strip instead of the glass panel. */
  .obj-hero__panel {
    margin-top: 2px;
    padding: 0;
    max-width: none;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .obj-hero__panel-title,
  .obj-hero__panel-cta { display: none; }
  .obj-hero__panel-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
  }
  .obj-hero__panel-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .obj-hero__panel-key { font-size: 0.75rem; }
  .obj-hero__panel-val { font-size: 0.9375rem; text-align: left; }
}
@media (max-width: 560px) {
  .single-object .obj-hero { padding-top: calc(var(--header-h) + 18px); }
}

/* ── Object body: single column (floating aside removed) ──────────────── */
.obj-main__content {
  /* Span the global .container — one width for every block on the page.
     Wide grids (specs, gallery) and the full-bleed map break out from here. */
  width: 100%;
}
.obj-main__foot {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--border-color);
}

/* Hero facts panel — section title (price block removed) */
.obj-hero__panel-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* CTA section anchor offset under the sticky header */
#callback { scroll-margin-top: calc(var(--header-h) + 20px); }

/* ============================================================================
   OBJECT GALLERY — premium Swiper (single-object.php)
   ========================================================================= */

.ogal { position: relative; }

/* Main stage */
.ogal__main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  box-shadow: 0 34px 80px rgba(20, 22, 28, 0.22);
}
.ogal__main .swiper-slide { overflow: hidden; }
.ogal__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle ken-burns on the active slide for a premium feel. */
.ogal__main .swiper-slide-active img { animation: ogalZoom 7s ease forwards; }
@keyframes ogalZoom {
  from { transform: scale(1.001); }
  to   { transform: scale(1.07); }
}

/* Nav arrows — glass circles */
.ogal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(18, 20, 26, 0.4);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.ogal__nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}
.ogal__nav--prev { left: 22px; }
.ogal__nav--next { right: 22px; }
.ogal__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Counter pill */
.ogal__counter {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 9px 18px;
  border-radius: 30px;
  background: rgba(18, 20, 26, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ogal__current { color: var(--gold-bright); font-weight: 800; font-size: 1rem; }
.ogal__sep, .ogal__total { color: rgba(255, 255, 255, 0.7); }

/* Thumbnails */
.ogal__thumbs { margin-top: 16px; }
.ogal__thumbs .swiper-slide {
  width: 128px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  position: relative;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ogal__thumbs .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color 0.3s ease;
}
.ogal__thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ogal__thumbs .swiper-slide:hover { opacity: 0.85; }
.ogal__thumbs .swiper-slide-thumb-active { opacity: 1; }
.ogal__thumbs .swiper-slide-thumb-active::after { border-color: var(--gold); }

@media (max-width: 600px) {
  .ogal__main { aspect-ratio: 4 / 3; }
  .ogal__nav { width: 44px; height: 44px; }
  .ogal__nav--prev { left: 12px; }
  .ogal__nav--next { right: 12px; }
  .ogal__thumbs .swiper-slide { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .ogal__main .swiper-slide-active img { animation: none; }
}

/* ============================================================================
   Interactive plan picker (single-object) — building → floor → apartment
   ========================================================================= */

.iplan {
  position: relative;
  /* Theme-aware tokens — light defaults, dark overridden below. */
  --iplan-panel-bg:
    radial-gradient(140% 100% at 0% 0%, rgba(var(--gold-bright-rgb), 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  --iplan-fg: #1d2430;
  --iplan-fg-muted: rgba(29, 36, 48, 0.64);
  --iplan-panel-border: rgba(var(--gold-bright-rgb), 0.45);
  --iplan-num-border: rgba(29, 36, 48, 0.2);
  --iplan-num-fg: #2a3040;
  --iplan-chip-bg: rgba(29, 36, 48, 0.05);
  --iplan-chip-border: rgba(29, 36, 48, 0.12);
  --iplan-scrim: linear-gradient(90deg, rgba(243, 245, 248, 0.6) 0%, transparent 24%);
  /* Floor-plan viewer — the plan PNG is grey on transparent, so a light canvas reads cleanly. */
  --iplan-plan-bg: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #eef1f5 78%);
  --iplan-plan-border: rgba(29, 36, 48, 0.1);
  --iplan-plan-shadow: rgba(29, 36, 48, 0.16);
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg, #f6f7f9 0%, #eceff3 100%);
  color: var(--iplan-fg);
  overflow: hidden;
}
[data-theme="dark"] .iplan {
  --iplan-panel-bg:
    radial-gradient(140% 100% at 0% 0%, rgba(var(--gold-bright-rgb), 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #1c2026 0%, #131519 100%);
  --iplan-fg: #ffffff;
  --iplan-fg-muted: rgba(243, 244, 246, 0.72);
  --iplan-panel-border: rgba(var(--gold-bright-rgb), 0.18);
  --iplan-num-border: rgba(243, 244, 246, 0.22);
  --iplan-num-fg: rgba(243, 244, 246, 0.85);
  --iplan-chip-bg: rgba(243, 244, 246, 0.05);
  --iplan-chip-border: rgba(243, 244, 246, 0.1);
  --iplan-scrim: linear-gradient(90deg, rgba(19, 21, 25, 0.55) 0%, transparent 22%);
  --iplan-plan-bg: radial-gradient(120% 100% at 50% 0%, #20242b 0%, #14161b 72%);
  --iplan-plan-border: rgba(255, 255, 255, 0.08);
  --iplan-plan-shadow: rgba(0, 0, 0, 0.5);
  background:
    radial-gradient(120% 80% at 50% -10%, #2a2f37 0%, transparent 60%),
    linear-gradient(180deg, #181b20 0%, #101216 100%);
}

.iplan__viewport {
  position: relative;
  width: 100%;
}

.iplan__step {
  display: none;
}
.iplan__step.is-active {
  display: block;
  animation: iplan-fade 0.45s ease both;
}

@keyframes iplan-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Step 1 — two-column premium composition ──────────────────────────── */
.iplan__compose {
  display: grid;
  grid-template-columns: minmax(320px, 30%) 1fr;
  height: clamp(560px, 90vh, 940px);
}

.iplan__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vh, 1.7rem);
  padding: clamp(2rem, 4vw, 3.6rem);
  background: var(--iplan-panel-bg);
  border-right: 1px solid var(--iplan-panel-border);
  overflow: hidden;
}
.iplan__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold-bright, #d4af37), transparent 70%);
}

/* 3-step progress */
.iplan__steps {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.4vh, 1rem);
}
.iplan__step-item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.iplan__step-item.is-current { opacity: 1; }
.iplan__step-num {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--iplan-num-border);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--iplan-num-fg);
}
.iplan__step-item.is-current .iplan__step-num {
  border-color: var(--gold-bright, #d4af37);
  color: #1a1407;
  background: var(--gold-bright, #d4af37);
  box-shadow: 0 8px 24px rgba(var(--gold-bright-rgb), 0.35);
}
.iplan__step-cap { display: flex; flex-direction: column; line-height: 1.25; }
.iplan__step-cap strong { font-size: 1rem; font-weight: 700; color: var(--iplan-fg); }
.iplan__step-cap em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--iplan-fg-muted);
}

.iplan__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.3rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  width: fit-content;
  background: var(--iplan-chip-bg);
  border: 1px solid var(--iplan-chip-border);
  font-size: 0.8125rem;
  color: var(--iplan-fg-muted);
}
.iplan__hint svg { color: var(--gold-bright, #d4af37); }

/* ── Stage (image / plate) ────────────────────────────────────────────── */
.iplan__stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.iplan__stage--floor {
  height: clamp(460px, 72vh, 760px);
  margin: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1rem, 2vw, 1.75rem);
  /* Blueprint canvas — kept dark on both themes so the white floor plate reads. */
  background: radial-gradient(120% 100% at 50% 0%, #20242b 0%, #15171c 70%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
}

.iplan__stage-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--iplan-scrim);
}

.iplan__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.iplan__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.iplan__svg--floor {
  position: relative;
}

/* Floor hit-areas + labels (injected) */
.iplan-floor { cursor: pointer; }
.iplan-floor__shape {
  fill: rgba(var(--gold-bright-rgb), 0);
  stroke: rgba(var(--gold-bright-rgb), 0);
  stroke-width: 3;
  transition: fill 0.18s ease, stroke 0.18s ease;
}
.iplan-floor.is-hover .iplan-floor__shape {
  fill: rgba(var(--gold-bright-rgb), 0.30);
  stroke: var(--gold-bright, var(--gold-bright));
}
.iplan-floor__num {
  fill: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 40px;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0;
  paint-order: stroke;
  stroke: rgba(16, 18, 22, 0.85);
  stroke-width: 6px;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.iplan-floor.is-hover .iplan-floor__num { opacity: 1; }

/* Panel copy */
.iplan__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright, #d4af37);
}
.iplan__eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}
.iplan__title {
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--iplan-fg);
}
.iplan__sub {
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--iplan-fg-muted);
}

/* ── Floating tooltip ─────────────────────────────────────────────────── */
.iplan__tooltip {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 16px));
  min-width: 11.5rem;
  padding: 0.95rem 1.1rem 0.9rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--gold-bright-rgb), 0.14), transparent 55%),
    linear-gradient(180deg, rgba(24, 27, 32, 0.98), rgba(13, 15, 19, 0.98));
  border: 1px solid rgba(var(--gold-bright-rgb), 0.5);
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.iplan__tooltip[hidden] { display: none; }
.iplan__tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(13, 15, 19, 0.98);
  border-right: 1px solid rgba(var(--gold-bright-rgb), 0.5);
  border-bottom: 1px solid rgba(var(--gold-bright-rgb), 0.5);
}

/* Head — apartment name (or floor label) with a small № chip. */
.iplan-tip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}
.iplan-tip__title { letter-spacing: -0.01em; }
.iplan-tip__no {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-bright, #d4af37);
  padding: 0.14rem 0.5rem;
  border: 1px solid rgba(var(--gold-bright-rgb), 0.5);
  border-radius: 999px;
  white-space: nowrap;
}
.iplan-tip__area {
  margin-top: 0.55rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-bright, #d4af37);
}
.iplan-tip__area span {
  margin-left: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(243, 244, 246, 0.65);
}
.iplan-tip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.iplan-tip__rooms { font-size: 0.8125rem; color: rgba(243, 244, 246, 0.72); }

/* Building-step tooltip keeps a simple key/value row. */
.iplan-tip__row {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: rgba(243, 244, 246, 0.8);
}
.iplan-tip__row b { color: #fff; font-weight: 600; }

.iplan-tip__status {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.iplan-tip__foot .iplan-tip__status { margin-top: 0; }
.iplan-tip__status::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.iplan-tip__status.is-available { color: #4ade80; }
.iplan-tip__status.is-reserved  { color: #fbbf24; }
.iplan-tip__status.is-sold      { color: #9ca3af; }

/* ── Floor step bar ───────────────────────────────────────────────────── */
.iplan__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--iplan-chip-border);
}
.iplan__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  background: var(--iplan-chip-bg);
  border: 1px solid var(--iplan-chip-border);
  border-radius: 999px;
  color: var(--iplan-fg);
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.iplan__back:hover {
  background: rgba(var(--gold-bright-rgb), 0.18);
  border-color: var(--gold-bright, var(--gold-bright));
}
.iplan__bar-title { margin-right: auto; }
.iplan__bar-title strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--iplan-fg);
}
.iplan__legend {
  display: flex;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.iplan__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--iplan-fg-muted);
}
.iplan__legend-item span {
  width: 12px; height: 12px; border-radius: 4px;
  border: 1.5px solid;
}
.iplan__legend-item.is-available span { background: rgba(22,163,74,.25); border-color: #16a34a; }
.iplan__legend-item.is-reserved  span { background: rgba(var(--primary-rgb),.25);  border-color: var(--primary-color); }
.iplan__legend-item.is-sold      span { background: rgba(156,163,175,.3); border-color: #9ca3af; }

/* ── Step 2 — floor plan + apartment list ─────────────────────────────── */
.iplan__floor {
  display: grid;
  grid-template-columns: 1.5fr 0.82fr;
  gap: clamp(0.85rem, 1.8vw, 1.6rem);
  align-items: stretch;
  height: clamp(440px, 74vh, 800px);
  padding: clamp(1rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}

/* Floor plan viewer — light canvas (plan is grey-on-transparent, reads on white). */
.iplan__plan {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* let the hover tooltip escape the frame */
  border: none;
  padding: clamp(1rem, 2.4vw, 2.6rem);
}

/* Step 2 shares the two-column composition with step 1: panel left, plan right.
   Bound the single grid row to the compose height so the (tall, portrait) plan
   scales down to fit the screen instead of overflowing it. */
.iplan__compose--floor { align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.iplan__compose--floor .iplan__panel { justify-content: center; min-height: 0; }
.iplan__compose--floor .iplan__plan { min-height: 0; height: 100%; }
.iplan__compose--floor .iplan__plan-frame {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.iplan__floor-count {
  font-size: 0.875rem;
  color: var(--iplan-fg-muted);
}
.iplan__panel .iplan__legend { flex-wrap: wrap; gap: 0.75rem 1.1rem; }

/* Frame matches the plan's intrinsic aspect (set inline), so image + SVG
   overlay share one box — hotspot coords map 1:1 to plan pixels. */
.iplan__plan-frame {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
}

.iplan__plan-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}
.iplan-hot { cursor: pointer; }
.iplan-hot__shape {
  fill: rgba(var(--gold-bright-rgb), 0);
  stroke: rgba(var(--gold-bright-rgb), 0);
  stroke-width: 6;
  stroke-linejoin: round;
  transition: fill 0.16s ease, stroke 0.16s ease;
}
.iplan-hot:hover .iplan-hot__shape,
.iplan-hot.is-active .iplan-hot__shape {
  fill: rgba(var(--gold-bright-rgb), 0.22);
  stroke: var(--gold-bright, #d4af37);
}
.iplan__plan-eyebrow {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iplan-fg-muted);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--iplan-chip-bg);
  border: 1px solid var(--iplan-chip-border);
  backdrop-filter: blur(6px);
}

@keyframes iplan-aurora {
  0%   { transform: translate(0, 0) scale(1);      opacity: 0.8; }
  100% { transform: translate(4%, 3%) scale(1.14); opacity: 1; }
}

/* Apartment list */
.iplan__apts {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.iplan__apts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--iplan-chip-border);
}
.iplan__apts-title { font-size: 1rem; font-weight: 800; color: var(--iplan-fg); }
.iplan__apts-count { font-size: 0.75rem; color: var(--iplan-fg-muted); white-space: nowrap; }
.iplan__apts-list {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0.35rem 0.2rem 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-bright-rgb), 0.5) transparent;
}
.iplan__apts-list::-webkit-scrollbar { width: 5px; }
.iplan__apts-list::-webkit-scrollbar-thumb { background: rgba(var(--gold-bright-rgb), 0.4); border-radius: 3px; }

.iplan-aptrow {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 11px;
  background: var(--iplan-chip-bg);
  border: 1px solid var(--iplan-chip-border);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.iplan-aptrow:hover,
.iplan-aptrow:focus-visible,
.iplan-aptrow.is-active {
  transform: translateX(3px);
  border-color: rgba(var(--gold-bright-rgb), 0.6);
  background: rgba(var(--gold-bright-rgb), 0.08);
  outline: none;
}
.iplan-aptrow__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.iplan-aptrow.is-available .iplan-aptrow__dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.iplan-aptrow.is-reserved  .iplan-aptrow__dot { background: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18); }
.iplan-aptrow.is-sold      .iplan-aptrow__dot { background: #9ca3af; box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2); }
.iplan-aptrow__main { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.iplan-aptrow__no { font-weight: 800; color: var(--iplan-fg); font-size: 0.9375rem; }
.iplan-aptrow__rooms { font-size: 0.74rem; color: var(--iplan-fg-muted); }
.iplan-aptrow__area { font-weight: 700; color: var(--iplan-fg); font-size: 0.875rem; white-space: nowrap; }
.iplan-aptrow__area i { font-style: normal; font-size: 0.6875rem; color: var(--iplan-fg-muted); margin-left: 0.12rem; }
.iplan-aptrow__status {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.iplan-aptrow.is-available .iplan-aptrow__status { color: #15803d; background: rgba(22, 163, 74, 0.12); }
.iplan-aptrow.is-reserved  .iplan-aptrow__status { color: var(--primary-color); background: rgba(var(--primary-rgb), 0.12); }
.iplan-aptrow.is-sold      .iplan-aptrow__status { color: #6b7280; background: rgba(156, 163, 175, 0.15); }
.iplan-aptrow.is-sold { opacity: 0.74; }
.iplan-aptrow__chev { color: var(--iplan-fg-muted); flex: none; transition: transform 0.16s ease, color 0.16s ease; }
.iplan-aptrow:hover .iplan-aptrow__chev,
.iplan-aptrow:focus-visible .iplan-aptrow__chev { color: var(--gold-bright, #d4af37); transform: translateX(2px); }

[data-theme="dark"] .iplan-aptrow.is-available .iplan-aptrow__status { color: #4ade80; background: rgba(22, 163, 74, 0.18); }
[data-theme="dark"] .iplan-aptrow.is-reserved  .iplan-aptrow__status { color: #fbbf24; background: rgba(var(--primary-rgb), 0.2); }
[data-theme="dark"] .iplan-aptrow.is-sold      .iplan-aptrow__status { color: #cbd5e1; background: rgba(156, 163, 175, 0.18); }

/* ── Floor plate apartments (injected) ────────────────────────────────── */
.iplan-plate__wall {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 3;
}
.iplan-plate__core {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}
.iplan-plate__core-label {
  fill: rgba(243, 244, 246, 0.55);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

.iplan-apt { cursor: pointer; }
.iplan-apt__shape {
  stroke-width: 2.5;
  transition: filter 0.18s ease, fill-opacity 0.18s ease;
}
.iplan-apt.is-available .iplan-apt__shape { fill: #16a34a; fill-opacity: 0.16; stroke: #16a34a; }
.iplan-apt.is-reserved  .iplan-apt__shape { fill: var(--primary-color); fill-opacity: 0.16; stroke: var(--primary-color); }
.iplan-apt.is-sold      .iplan-apt__shape { fill: #9ca3af; fill-opacity: 0.22; stroke: #9ca3af; }
.iplan-apt.is-hover .iplan-apt__shape { fill-opacity: 0.42; }
.iplan-apt__num {
  fill: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  text-anchor: middle;
  pointer-events: none;
}
.iplan-apt__meta {
  fill: rgba(243, 244, 246, 0.85);
  font-family: var(--font-sans);
  font-size: 19px;
  text-anchor: middle;
  pointer-events: none;
}

/* ── Apartment modal (step 3) ─────────────────────────────────────────── */
.iplan-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}
.iplan-modal[hidden] { display: none; }
.iplan-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(4px);
  animation: iplan-fade 0.25s ease both;
}
.iplan-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text-dark);
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: iplan-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes iplan-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.iplan-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dark);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease, background 0.18s ease;
}
.iplan-modal__close:hover { transform: rotate(90deg); background: var(--surface-2); }
.iplan-modal__body { overflow-y: auto; }

.iplan-card { display: grid; grid-template-columns: 1.5fr 1fr; }

/* View switcher — 3D / 2D plan */
.iplan-card__view {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  overflow: hidden;
}
.iplan-card__glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 30% 28%, rgba(var(--gold-bright-rgb), 0.22), transparent 70%),
    radial-gradient(36% 36% at 74% 72%, rgba(var(--primary-rgb), 0.18), transparent 70%);
  animation: iplan-aurora 16s ease-in-out infinite alternate;
}
.iplan-card__pane {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.iplan-card__pane[hidden] { display: none; }
.iplan-card__pane--2d { background: #ffffff; }
.iplan-card__media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.iplan-card__pane--3d .iplan-card__media { border-radius: 12px; }
.iplan-card__soon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.iplan-card__soon svg { color: var(--gold-bright, #d4af37); }
.iplan-card__soon span { font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; }

.iplan-card__tabs {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: rgba(16, 18, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.iplan-card__tab {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.iplan-card__tab:hover { color: #fff; }
.iplan-card__tab.is-active { background: var(--gold-bright, var(--gold-bright)); color: var(--on-accent); }

/* 2D plan primitives */
.iplan-pl__outer { fill: none; stroke: #2b2f36; stroke-width: 1.4; stroke-linejoin: round; }
.iplan-pl__room  { fill: #ffffff; stroke: #aeb4bd; stroke-width: 0.5; }
.iplan-pl__win   { stroke: #7fb2d9; stroke-width: 1.6; stroke-linecap: round; }
.iplan-pl__door  { stroke: var(--primary-color); stroke-width: 1.4; stroke-linecap: round; }
.iplan-pl__swing { fill: none; stroke: #c2c7cf; stroke-width: 0.5; }
.iplan-pl__label {
  fill: #4b5563;
  font-family: var(--font-sans);
  font-size: 3.1px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* 3D isometric primitives */
.iplan-iso__floor  { fill: #c9b291; stroke: #7a6a4f; stroke-width: 1.2; stroke-linejoin: round; }
.iplan-iso__wall-b { fill: #e3d7bf; stroke: #7a6a4f; stroke-width: 1;   stroke-linejoin: round; }
.iplan-iso__wall-l { fill: #a8967a; stroke: #7a6a4f; stroke-width: 1;   stroke-linejoin: round; }
.iplan-iso__label {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(20, 22, 27, 0.85);
  stroke-width: 3px;
}
.iplan-card__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: rgba(16, 18, 22, 0.7);
}
.iplan-card__badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.iplan-card__badge.is-available { color: #4ade80; }
.iplan-card__badge.is-reserved  { color: #fbbf24; }
.iplan-card__badge.is-sold      { color: #d1d5db; }

/* Info + form column */
.iplan-card__info {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}
.iplan-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.iplan-card__title {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}
.iplan-card__sub { color: var(--text-light); font-size: 0.9375rem; }
.iplan-card__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px; /* hairline between tiles instead of a visible gap */
  margin: 1.4rem 0;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.iplan-spec {
  padding: 0.85rem 1rem;
  background: var(--bg-light);
}
.iplan-spec__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.2rem;
}
.iplan-spec__value { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); }
/* Площадь — hero spec, larger for hierarchy. */
.iplan-card__specs .iplan-spec:first-child .iplan-spec__value { font-size: 1.375rem; letter-spacing: -0.01em; }
/* Статус — colored dot + tone. */
.iplan-spec__status { display: inline-flex; align-items: center; gap: 0.45rem; }
.iplan-spec__status::before {
  content: "";
  flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
}
.iplan-spec__status.is-available { color: #16a34a; }
.iplan-spec__status.is-reserved  { color: var(--primary-color); }
.iplan-spec__status.is-sold      { color: #9ca3af; }

/* Lead form inside card */
.iplan-form {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}
.iplan-form__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.iplan-form__sub { font-size: 0.875rem; color: var(--text-light); margin-bottom: 0.9rem; }
.iplan-form__row { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.iplan-form__input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text-dark);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 0.7rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.iplan-form__input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}
.iplan-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.2rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--primary-color);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.iplan-form__submit:hover { background: #b45309; transform: translateY(-1px); }
.iplan-form__submit[disabled] { opacity: 0.6; cursor: default; transform: none; }
.iplan-form__note {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  color: var(--text-light);
}
.iplan-form__ok {
  margin-top: auto;
  padding: 1.5rem;
  text-align: center;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 12px;
  color: #15803d;
  font-weight: 600;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .iplan-card { grid-template-columns: 1fr; }
  .iplan-card__view { min-height: 300px; }
  .iplan__compose {
    grid-template-columns: 1fr;
    height: auto;
  }
  .iplan__panel {
    border-right: 0;
    border-bottom: 1px solid var(--iplan-panel-border);
    padding: clamp(1.6rem, 6vw, 2.4rem);
    gap: 1rem;
  }
  .iplan__stage { height: clamp(360px, 56vh, 560px); }
  .iplan__stage-scrim { display: none; }

  .iplan__floor {
    grid-template-columns: 1fr;
    height: auto;
  }
  .iplan__plan { height: clamp(280px, 42vh, 460px); }
  .iplan__apts-list { max-height: 52vh; }
}
@media (max-width: 540px) {
  .iplan__bar { gap: 0.75rem; }
  .iplan__legend { width: 100%; justify-content: space-between; }
  .iplan-form__row { grid-template-columns: 1fr; }
  .iplan__steps { gap: 0.6rem; }
  .iplan__step-num { width: 2.3rem; height: 2.3rem; }
  .iplan-aptrow { gap: 0.6rem; padding: 0.7rem 0.85rem; }
  .iplan-aptrow__status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .iplan__step.is-active,
  .iplan-modal__dialog,
  .iplan-modal__overlay { animation: none; }
  .iplan__plan::before,
  .iplan-card__glow { animation: none; }
  .header-cta::after,
  .cb-modal__dialog,
  .cb-modal__overlay { animation: none; }
}

/* =========================================
   CALLBACK MODAL (header CTA → contacts + form)
   ========================================= */
.cb-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}
.cb-modal[hidden] { display: none; }

.cb-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(4px);
  animation: cb-fade 0.25s ease both;
}
@keyframes cb-fade { from { opacity: 0; } to { opacity: 1; } }

.cb-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 92vh;
  overflow: hidden auto;
  background: var(--surface, #fff);
  color: var(--text-dark);
  border-radius: 26px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04) inset,
    0 48px 110px -20px rgba(0, 0, 0, 0.62),
    0 18px 44px -24px rgba(0, 0, 0, 0.5);
  animation: cb-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cb-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.cb-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--text-dark);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.cb-modal__close:hover {
  transform: rotate(90deg);
  background: var(--gold);
  color: var(--on-accent);
}

.cb-modal__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
}

/* ── Left panel — premium dark, gold-lit ──────────────────────────────── */
.cb-modal__info {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 3.4vw, 3.4rem);
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--gold-rgb), 0.20), transparent 55%),
    radial-gradient(150% 120% at 100% 100%, rgba(var(--gold-rgb), 0.10), transparent 60%),
    linear-gradient(155deg, #23272f 0%, #16181e 55%, #0f1115 100%);
}

/* Gold hairline down the seam between the two panels. */
.cb-modal__info::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(var(--gold-rgb), 0.5), transparent);
}

.cb-modal__info-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.cb-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.1rem;
}

.cb-modal__eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.cb-modal__title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 0.9rem;
}

.cb-modal__lead {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
  margin: 0 0 2.1rem;
  max-width: 34ch;
}

.cb-modal__phones {
  padding-top: 1.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cb-modal__phones-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 0.9rem;
}

.cb-modal__phone {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  transition: color 0.2s ease;
}

.cb-modal__phone + .cb-modal__phone {
  margin-top: 0.55rem;
}

.cb-modal__phone:hover {
  color: var(--gold-bright);
}

.cb-modal__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.14);
  border: 1px solid rgba(var(--gold-rgb), 0.34);
  color: var(--gold-bright);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.cb-modal__phone:hover .cb-modal__phone-icon {
  background: rgba(var(--gold-rgb), 0.24);
  border-color: rgba(var(--gold-rgb), 0.55);
  transform: translateY(-1px);
}

/* ── Right panel — form ───────────────────────────────────────────────── */
.cb-modal__form-wrap {
  padding: clamp(2rem, 3.4vw, 3.4rem);
  display: flex;
  align-items: center;
}

/* Flatten the reused .cta__form card — the modal dialog is already the card. */
.cb-modal__form {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Premium polish for the form inside the modal (scoped, so the homepage
   CTA section keeps its own sizing). */
.cb-modal__form .cta__form-title {
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.cb-modal__form .cta__form-subtitle {
  margin-bottom: 2rem;
}

.cb-modal__form .cta__submit {
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
}

/* Stack the name/phone fields in one column inside the modal. */
.cb-modal__form .cta__row {
  grid-template-columns: 1fr;
  gap: 0;
}

@media (max-width: 720px) {
  .cb-modal__grid { grid-template-columns: 1fr; }
  .cb-modal__close {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  }
}

/* ── Layout modal — reuses the interactive-plan card (.iplan-modal /
   .iplan-card / .iplan-form); the 2D plan on white for readability. ─── */
.lay-modal .iplan-card__pane--2d { background: #ffffff; }

/* =========================================
   PREMIUM PRELOADER (front page)
   Full-screen reveal shown on first paint of the homepage: a dark,
   luxe backdrop with a soft gold aura, a shimmering gold ring around
   the mark, the brand name rising into place and a gold progress line.
   On load it curtain-wipes upward to reveal the site.
   Palette-aware via --gold; theme-independent by design (always dark).
   Markup in header.php, behaviour in assets/js/main.js.
   ========================================= */

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 85% at 50% 22%, #1b1e25 0%, #131519 46%, #0b0d11 100%);
  will-change: transform, opacity;
  transition:
    transform 1s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.55s ease;
}

.preloader__aura {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 32% at 50% 32%, rgba(var(--gold-rgb), 0.18), transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: preAura 2.4s ease forwards;
}

.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem;
}

.preloader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
}

/* Rotating gold sweep — a hairline ring drawn via a masked conic gradient. */
.preloader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--gold-rgb), 0) 0deg,
    rgba(var(--gold-rgb), 0) 205deg,
    var(--gold) 315deg,
    var(--gold-bright) 348deg,
    rgba(var(--gold-rgb), 0) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0.95;
  animation: preSpin 1.15s linear infinite;
}

.preloader__logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.82);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55));
  animation: preLogo 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.preloader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
  text-align: center;
}

.preloader__name {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.42em;
  padding-left: 0.42em; /* optical centring for the tracked-out caps */
  color: #f4f1ea;
  opacity: 0;
  transform: translateY(120%);
  animation: preRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;
}

.preloader__tagline {
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  color: rgba(var(--gold-bright-rgb), 0.92);
  opacity: 0;
  transform: translateY(120%);
  animation: preRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}

.preloader__progress {
  position: relative;
  width: min(220px, 60vw);
  height: 2px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  opacity: 0;
  animation: preFadeIn 0.6s ease 0.55s forwards;
}

.preloader__progress-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.6);
  animation: preFill 1.7s cubic-bezier(0.4, 0, 0.1, 1) 0.6s forwards;
}

/* Exit — JS drives it: complete the bar, then wipe the panel upward. */
.preloader.is-hiding .preloader__progress-fill {
  width: 100% !important;
  animation: none;
  transition: width 0.35s ease;
}

.preloader.is-leaving {
  transform: translateY(-100%);
}

.preloader.is-removed {
  display: none;
}

@keyframes preSpin   { to { transform: rotate(360deg); } }
@keyframes preAura   { to { opacity: 1; } }
@keyframes preLogo   { to { opacity: 1; transform: scale(1); } }
@keyframes preRise   { to { opacity: 1; transform: translateY(0); } }
@keyframes preFadeIn { to { opacity: 1; } }
@keyframes preFill   { 0% { width: 0; } 72% { width: 82%; } 100% { width: 92%; } }

@media (prefers-reduced-motion: reduce) {
  .preloader__aura,
  .preloader__ring,
  .preloader__logo,
  .preloader__name,
  .preloader__tagline,
  .preloader__progress,
  .preloader__progress-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .preloader__progress-fill { width: 62%; }
  .preloader { transition: opacity 0.3s ease; }
  .preloader.is-leaving { transform: none; opacity: 0; }
}

/* =========================================
   FLOATING WHATSAPP BUTTON (bottom-left)
   Premium: glossy green orb, dual pulse, online dot, hover label reveal.
   ========================================= */
.wa-fab {
  position: fixed;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  /* Collapsed to a circle by default; expands on hover to reveal the label. */
  width: 60px;
  overflow: hidden;
  /* Glossy orb — a soft top-left highlight over the green gradient. */
  background:
    radial-gradient(130% 120% at 32% 22%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(150deg, #2bd66b 0%, #12a24a 100%);
  box-shadow:
    0 14px 32px rgba(18, 162, 74, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.24),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  /* Smooth entrance on load — fades and rises into place. */
  animation: waIntro 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
  will-change: width;
}

@keyframes waIntro {
  from { opacity: 0; transform: translateY(22px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

.wa-fab__icon {
  position: relative;
  z-index: 2;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* "Online" status dot — quiet trust cue at the orb's top-right. */
.wa-fab__icon::after {
  content: '';
  position: absolute;
  top: 11px;
  right: 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7bed9f;
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(123, 237, 159, 0.9);
  z-index: 4;
  animation: waOnline 2.4s ease-in-out infinite;
}
@keyframes waOnline {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.wa-fab__label {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-right: 22px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
}

/* Pulsing rings — attention without noise. */
.wa-fab__pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(41, 211, 102, 0.55);
  z-index: 0;
  animation: waPulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
.wa-fab__pulse--2 { animation-delay: 1.3s; }

@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.wa-fab:hover,
.wa-fab:focus-visible {
  /* Fixed target width (not 100% + max-width) so the width transition animates
     the whole way in both directions — smooth expand on hover, smooth collapse
     on mouse-leave / blur. */
  width: 246px;
  box-shadow:
    0 16px 34px rgba(23, 163, 74, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
  outline: none;
}

.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label {
  opacity: 1;
  transform: translateX(0);
}

/* Pause the pulse on hover so the expanded pill stays clean. */
.wa-fab:hover .wa-fab__pulse,
.wa-fab:focus-visible .wa-fab__pulse {
  animation-play-state: paused;
  opacity: 0;
}

@media (max-width: 600px) {
  .wa-fab { height: 54px; width: 54px; }
  .wa-fab__icon,
  .wa-fab__pulse { width: 54px; height: 54px; }
  .wa-fab__icon { flex-basis: 54px; }
  /* Keep it a tap-friendly circle on phones — no hover to expand. */
  .wa-fab:hover, .wa-fab:focus-visible { width: 54px; transform: none; }
  .wa-fab:hover .wa-fab__label, .wa-fab:focus-visible .wa-fab__label { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab__label { transition: none; }
  .wa-fab { animation: none; opacity: 1; }
  .wa-fab__pulse { animation: none; opacity: 0; }
  .wa-fab__icon::after { animation: none; }
}

/* =========================================================================
   MOBILE BUTTON SIZING — slightly smaller CTAs on phones for a tighter,
   less bulky layout. Consolidated so all primary buttons scale together.
   ========================================================================= */
@media (max-width: 600px) {
  .hero__btn          { padding: 14px 24px; font-size: var(--fs-base); }
  .obj-btn            { padding: 14px 22px; font-size: var(--fs-base); }
  .cta__submit        { padding: 15px 22px; font-size: var(--fs-base); }
  .obj-calc__btn      { padding: 14px 20px; font-size: var(--fs-md); }
  .footer-cta         { padding: 11px 20px; }
  .iplan-form__submit { padding: 0.7rem 1rem; }
  .btn                { padding: 10px 20px; }
  .obj-doc__btn       { padding: 10px 12px; font-size: var(--fs-msm); }
}