/* ===== Design d'intérieur : style.css ===== */

/* ---------- Міжсторінкові переходи ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.35s ease both vt-out; }
::view-transition-new(root) { animation: 0.45s ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- Зареєстровані властивості для mesh-градієнта ---------- */
@property --room-mx1 { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
@property --room-my1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --room-mx2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --room-my2 { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --room-mx3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --room-my3 { syntax: '<percentage>'; inherits: false; initial-value: 85%; }

/* ---------- Змінні теми ---------- */
:root {
  --room-bg: #FBF7F2;
  --room-surface: #FFFFFF;
  --room-tone: #9E4524;
  --room-tone-hover: #7F3619;
  --room-ink: #1A1A2A;
  --room-muted: #4B4B5C;
  --room-line: #E4DCD2;
  --room-deep: #1F2A2E;
  --room-on-deep: #F7F2EC;
  --room-sand: #E9B48F;
  --room-swatch-a: #9E4524;
  --room-swatch-b: #2F5D62;
  --room-swatch-c: #4D4A7A;
  --room-swatch-d: #6B5A2E;
  --room-gradient: linear-gradient(135deg, #9E4524 0%, #C8733F 55%, #E9B48F 100%);
  --room-pad: 10dvh;
  --room-radius: 3px;
  --room-max: 1200px;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--room-bg);
  color: var(--room-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main { display: block; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 700;
  text-transform: none;
}
p { margin: 0 0 1rem; }
.room-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--room-tone); outline-offset: 4px; }
.room-logo-accent { fill: var(--room-tone); }
.room-h2 { font-size: clamp(2rem, 4vw, 3.2rem); }

/* ---------- Header ---------- */
.room-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 5vw;
  background: var(--room-surface);
  border-bottom: 1px solid var(--room-line);
}
.room-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--room-ink);
}
.room-logo { width: 40px; height: 40px; flex: 0 0 40px; }
.room-brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1;
  font-weight: 700;
}
.room-brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--room-muted);
  margin-top: 0.35rem;
}
.room-nav { display: none; width: 100%; }
.room-nav ul {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.room-nav a {
  font-variant: small-caps;
  font-weight: 300;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.3rem 0;
  display: inline-block;
  border-bottom: 1px solid transparent;
}
.room-nav a:hover,
.room-nav a[aria-current="page"] {
  border-bottom-color: var(--room-tone);
  color: var(--room-tone);
}
.room-menu-check { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.room-burger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 0.5rem; }
.room-burger i { display: block; width: 28px; height: 2px; background: var(--room-ink); }
.room-menu-check:checked ~ .room-nav { display: block; }
.room-menu-check:focus-visible ~ .room-burger { outline: 2px solid var(--room-tone); outline-offset: 2px; }
.room-scroll-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background: var(--room-tone);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .room-scroll-bar {
    animation: room-grow-x linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes room-grow-x { to { transform: scaleX(1); } }

@media (min-width: 900px) {
  .room-burger { display: none; }
  .room-nav { display: block; width: auto; }
  .room-nav ul { flex-direction: row; gap: 2.2rem; padding: 0; }
  .room-nav a { font-size: 0.95rem; }
}

/* ---------- Кнопки (без transform) ---------- */
.room-btn {
  display: inline-block;
  padding: 0.95rem 1.7rem;
  background: var(--room-tone);
  color: #fff;
  border: 1px solid var(--room-tone);
  border-radius: var(--room-radius);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.room-btn:hover {
  background: var(--room-tone-hover);
  border-color: var(--room-tone-hover);
  box-shadow: 0 0 0 4px rgba(158, 69, 36, 0.2);
}
.room-btn--ghost { background: transparent; color: var(--room-on-deep); border-color: var(--room-on-deep); }
.room-btn--ghost:hover { background: var(--room-on-deep); color: var(--room-deep); border-color: var(--room-on-deep); box-shadow: none; }
.room-btn--light { background: var(--room-on-deep); color: var(--room-deep); border-color: var(--room-on-deep); }
.room-btn--light:hover { background: #FFFFFF; color: var(--room-deep); border-color: #FFFFFF; }
.room-text-link {
  align-self: center;
  color: var(--room-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  padding: 0.5rem 0;
}
.room-text-link:hover { color: var(--room-tone); }

/* ---------- Кінематика: reveal (лише з класом .js) ---------- */
.js [data-room-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js [data-room-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Clip-reveal зображень ---------- */
.room-clip { position: relative; margin: 0; overflow: hidden; }
.room-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  .room-clip {
    animation: room-clip-in linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 35%;
  }
}
@keyframes room-clip-in {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- Hero з mesh-градієнтом ---------- */
.room-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 86dvh;
  padding: var(--room-pad) 5vw;
}
.room-hero--short { min-height: auto; padding-top: calc(var(--room-pad) * 1.4); padding-bottom: calc(var(--room-pad) * 0.6); }
.room-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--room-mx1) var(--room-my1), rgba(158, 69, 36, 0.22), transparent 45%),
    radial-gradient(circle at var(--room-mx2) var(--room-my2), rgba(233, 180, 143, 0.45), transparent 50%),
    radial-gradient(circle at var(--room-mx3) var(--room-my3), rgba(31, 42, 46, 0.14), transparent 55%);
  animation: room-mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes room-mesh-drift {
  from {
    --room-mx1: 15%; --room-my1: 20%;
    --room-mx2: 80%; --room-my2: 30%;
    --room-mx3: 50%; --room-my3: 85%;
  }
  to {
    --room-mx1: 35%; --room-my1: 70%;
    --room-mx2: 60%; --room-my2: 55%;
    --room-mx3: 20%; --room-my3: 40%;
  }
}
.room-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("img/bg.webp") center / cover no-repeat;
  opacity: 0.08;
}
.room-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--room-max);
  margin: 0 auto;
}
.room-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--room-tone);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.room-kicker--light { color: var(--room-sand); }
.room-hero-title {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}
.room-hero-title--sm { font-size: clamp(2.2rem, 5.5vw, 4.4rem); }
.room-word { display: block; width: fit-content; max-width: 100%; }
.room-word--l { margin-right: auto; }
.room-word--r { margin-left: auto; text-align: right; }
.room-accent {
  font-style: italic;
  color: var(--room-tone);
  text-decoration: underline;
  text-decoration-color: var(--room-sand);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.14em;
}
.room-hero-sub {
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--room-muted);
  margin-bottom: 2.2rem;
}
.room-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }

/* ---------- Есе / колонки ---------- */
.room-essay { padding: var(--room-pad) 5vw; border-top: 1px solid var(--room-line); }
.room-essay-inner { max-width: var(--room-max); margin: 0 auto; }
.room-head-lead { max-width: 44rem; margin-bottom: 2.5rem; }
.room-columns {
  columns: 3;
  column-gap: 3rem;
  column-rule: 1px solid var(--room-line);
}
.room-columns article { break-inside: avoid; margin-bottom: 2.4rem; }
.room-columns h3 { font-size: 1.45rem; }
.room-icon { color: var(--room-tone); margin-top: 0.8rem; }

/* ---------- Фото-смуга bg2 ---------- */
.room-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 50vh;
  display: flex;
  align-items: center;
  background: url("img/bg2.webp") center / cover no-repeat;
  color: #FFFFFF;
}
.room-photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 22, 30, 0.9) 0%, rgba(20, 22, 30, 0.6) 55%, rgba(20, 22, 30, 0.25) 100%);
}
.room-band-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 6dvh 5vw;
}
.room-photo-band h2 { color: #FFFFFF; }
.room-band-text p { color: #F3EEE8; }

/* ---------- Маніфест-рядки ---------- */
.room-manifest { padding: var(--room-pad) 5vw; }
.room-manifest-inner { max-width: var(--room-max); margin: 0 auto; }
.room-manifest-inner > .room-h2 { margin-bottom: 1.5rem; }
.room-manifest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--room-line);
}
.room-manifest-row:last-child { border-bottom: 0; }
.room-manifest-row svg { color: var(--room-tone); flex: 0 0 24px; align-self: center; }
.room-manifest-row h3 { font-size: 1.4rem; margin: 0; font-weight: 700; }
.room-manifest-row p { margin: 0; color: var(--room-muted); flex: 1 1 320px; }

/* ---------- Кроки з повернутими числами ---------- */
.room-steps { padding: var(--room-pad) 5vw; background: var(--room-surface); }
.room-steps-inner {
  max-width: var(--room-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3rem;
}
.room-steps-title { flex: 0 0 100%; margin-bottom: 1rem; }
.room-step { position: relative; flex: 1 1 280px; padding-top: 2.5rem; }
.room-step-num {
  position: absolute;
  top: -1.2rem;
  left: -0.4rem;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--room-tone);
  opacity: 0.15;
  transform: rotate(-10deg);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.room-step-body { position: relative; z-index: 1; }
.room-step h3 { font-size: 1.4rem; }
.room-step p { color: var(--room-muted); }
@media (min-width: 900px) {
  .room-step:nth-child(3) { margin-top: 3.5rem; }
  .room-step:nth-child(4) { margin-top: 1.5rem; }
}

/* ---------- CTA strip ---------- */
.room-strip {
  background: var(--room-deep);
  color: var(--room-on-deep);
  padding: calc(var(--room-pad) * 0.8) 5vw;
}
.room-strip-inner {
  max-width: var(--room-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.room-strip h2 {
  color: var(--room-on-deep);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  max-width: 20ch;
  margin: 0;
}

/* ---------- Експерт ---------- */
.room-bio { display: grid; grid-template-columns: 1fr 1fr; min-height: 80dvh; }
.room-bio-photo { min-height: 420px; }
.room-bio-text {
  padding: var(--room-pad) 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.room-bio-text .room-h2 { margin-bottom: 1.5rem; }
.room-dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 5.4rem;
  line-height: 0.85;
  padding: 0.5rem 0.7rem 0 0;
  color: var(--room-tone);
  font-weight: 700;
}
.room-pillars {
  max-width: var(--room-max);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}
.room-pillars svg { color: var(--room-tone); margin-bottom: 1rem; }
.room-pillars h3 { font-size: 1.4rem; }
.room-pillars p { color: var(--room-muted); margin: 0; }
.room-stats-wrap { padding: var(--room-pad) 5vw; border-top: 1px solid var(--room-line); }
.room-stats-inner { max-width: var(--room-max); margin: 0 auto; }
.room-stats {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
}
.room-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--room-tone);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.room-stat-label { color: var(--room-muted); margin: 0; max-width: 20ch; }

/* ---------- Footer ---------- */
.room-foot {
  background: var(--room-deep);
  color: var(--room-on-deep);
  padding: 4rem 5vw 2rem;
  font-size: 0.95rem;
}
.room-foot .room-brand { color: var(--room-on-deep); }
.room-foot .room-brand-name small { color: #E7DED4; }
.room-foot-grid {
  max-width: var(--room-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.room-foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}
.room-foot a { color: var(--room-on-deep); text-underline-offset: 0.25em; }
.room-foot-base {
  max-width: var(--room-max);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 242, 236, 0.2);
}
.room-disclaimer { color: #E7DED4; font-size: 0.9rem; }
.room-copy { margin: 0; color: #E7DED4; font-size: 0.85rem; }

/* ---------- Cookie-банер (статичний) ---------- */
.room-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 5vw;
  background: var(--room-deep);
  color: var(--room-on-deep);
  box-shadow: 0 -2px 0 var(--room-tone);
}
.room-cookie[hidden] { display: none; }
.room-cookie p { margin: 0; max-width: 60ch; font-size: 0.95rem; }
.room-cookie-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.room-cookie .room-btn { padding: 0.7rem 1.2rem; }

/* ---------- Reserve ---------- */
.room-reserve-hero { padding: calc(var(--room-pad) * 1.2) 5vw 4rem; border-bottom: 1px solid var(--room-line); }
.room-reserve-hero-inner { max-width: var(--room-max); margin: 0 auto; }
.room-reserve-hero h1 { font-size: clamp(2.6rem, 7.5vw, 6.2rem); letter-spacing: -0.015em; max-width: 12ch; }
.room-cards-wrap { padding: var(--room-pad) 5vw; }
.room-cards {
  max-width: var(--room-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.room-card {
  background: var(--room-surface);
  border: 1px solid var(--room-line);
  border-radius: var(--room-radius);
  padding: 2rem;
}
.room-card svg { color: var(--room-tone); margin-bottom: 1rem; }
.room-card h3 { font-size: 1.35rem; }
.room-card p { color: var(--room-muted); margin: 0; }
.room-plan { padding: var(--room-pad) 5vw; background: var(--room-surface); border-top: 1px solid var(--room-line); }
.room-plan-inner { max-width: 760px; margin: 0 auto; }
.room-plan-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.4rem;
}
.room-plan-list li { display: flex; gap: 1rem; align-items: flex-start; }
.room-badge {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-weight: 700;
}
.room-badge--a { background: var(--room-swatch-a); }
.room-badge--b { background: var(--room-swatch-b); }
.room-badge--c { background: var(--room-swatch-c); }
.room-badge--d { background: var(--room-swatch-d); }
.room-form-wrap { padding: var(--room-pad) 5vw; }
.room-form-title { text-align: center; margin-bottom: 2.5rem; }
.room-form { max-width: 640px; margin: 0 auto; }
.room-field { display: block; margin-bottom: 1.9rem; }
.room-field-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--room-ink); margin-bottom: 0.35rem; }
.room-field input,
.room-field textarea {
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--room-ink);
  border-radius: 0;
  background: transparent;
  color: var(--room-ink);
  font-family: var(--font-body);
  font-size: 1rem;
}
.room-field textarea { min-height: 110px; resize: vertical; }
.room-consent {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  color: var(--room-muted);
}
.room-consent input { margin-top: 0.35rem; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--room-tone); }
.room-consent a { color: var(--room-tone); }
.room-submit { cursor: pointer; }
.room-contact-line { max-width: 640px; margin: 2rem auto 0; color: var(--room-muted); }
.room-mail { font-weight: 600; color: var(--room-tone); }
.room-faq-wrap { padding: 0 5vw var(--room-pad); }
.room-faq { max-width: 760px; margin: 0 auto; }
.room-faq > .room-h2 { margin-bottom: 1rem; }
.room-faq details { border-bottom: 1px solid var(--room-line); padding: 1.2rem 0; }
.room-faq summary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
.room-faq details p { margin: 0.8rem 0 0; color: var(--room-muted); }

/* ---------- Bio (expert) ---------- */
@media (max-width: 899px) {
  .room-columns { columns: 1; }
  .room-bio { grid-template-columns: 1fr; }
  .room-bio-photo { min-height: 300px; }
}

/* ---------- Legal ---------- */
.room-doc { max-width: 820px; margin: 0 auto; padding: 6dvh 5vw; min-height: 100vh; }
.room-doc h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 1.5rem; }
.room-doc h2 { font-size: 1.7rem; margin-top: 2.5rem; scroll-margin-top: 6rem; }
.room-doc section[id] { scroll-margin-top: 6rem; }

/* ---------- Thanks ---------- */
.room-thanks {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 75dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--room-pad) 5vw;
}
.room-thanks-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("img/bg3.webp") center / cover no-repeat;
  opacity: 0.14;
}
.room-thanks-inner { position: relative; z-index: 1; max-width: 620px; }
.room-thanks h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.room-thanks .room-kicker { justify-self: center; }

/* ---------- Доступність руху ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { view-transition-name: none; }
  .js [data-room-reveal] { opacity: 1; transform: none; }
}