/* ==========================================================================
   NADIIA — home.css
   Preloader · pinned cinematic scene · about · why · before/after · reviews
   ========================================================================== */

/* preloader styles живуть у base.css (спільні для всіх сторінок) */

/* ---------- SCENE I : pinned cinematic sequence ---------- */
.scene {
  position: relative;
  height: 1100vh;
  background: linear-gradient(180deg, #F1E5D2 0%, #F5EBDB 70%, #FBF6EE 100%);
}
.scene-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  will-change: transform, opacity;
}
.scene-light {
  position: absolute;
  top: -12vh; left: -14vw;
  width: 64vw; height: 100vh;
  background: radial-gradient(ellipse at center, rgba(253,250,244,.9) 0%, rgba(253,250,244,0) 65%);
  pointer-events: none;
}
.scene-wash { display: none; }

/* hero state */
.hero-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 6vw, 96px);
  will-change: transform, opacity;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(84px, 15vw, 250px);
  line-height: .92;
  letter-spacing: .06em;
  color: var(--gold-600);
}
.hero-sub {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-sub .dash { height: 1px; width: clamp(30px, 5vw, 80px); background: var(--gold-400); }
.hero-sub .label {
  font-size: clamp(12px, 1.5vw, 21px);
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 300;
  white-space: nowrap;
}
.hero-sub-wrap { margin-top: clamp(14px, 2.4vh, 30px); }
.hero-tag-wrap { margin-top: clamp(26px, 4.5vh, 52px); }
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink-900);
}
.hero-lead-wrap { margin-top: 14px; }
.hero-lead {
  max-width: 380px;
  font-size: 14.5px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--ink-500);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(30px, 5.5vh, 54px); }

.hero-flower {
  position: absolute;
  left: -40px; bottom: 30px;
  transform: rotate(70deg);
  transform-origin: 50% 90%;
  pointer-events: none;
  animation: ndFadeIn 2.2s ease .9s both;
}
@keyframes ndFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* the hand */
.hero-hand {
  position: absolute;
  right: 0; bottom: -7vh;
  z-index: 3;
  will-change: transform;
}
/* делікатна левітація сама по собі (на обгортці, щоб не заважати
   GSAP-інтро самого зображення); вимикається при reduced-motion */
.hero-hand { animation: ndHandFloat 6.5s ease-in-out infinite; }
@keyframes ndHandFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hand { animation: none; }
}
.hero-hand img {
  display: block;
  height: min(86vh, 125vw);
  width: auto;
  filter: drop-shadow(-26px 42px 58px rgba(60, 44, 32, .10)) drop-shadow(-8px 14px 22px rgba(60, 44, 32, .1));
}

/* services intro state */
.svc-intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(24px, 8vw, 120px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.svc-intro-eyebrow { display: flex; align-items: center; gap: 22px; margin-bottom: 34px; }
.svc-intro-eyebrow .dash { height: 1px; width: 54px; background: var(--gold-400); }
.svc-intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.06;
  color: var(--text-heading);
  text-wrap: balance;
}
.svc-intro h2 em, .moment h3 em { font-style: italic; color: var(--gold-500); }
.svc-intro p {
  margin: 30px 0 0;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-500);
}

/* service moments */
.moment {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.moment-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 110px);
  padding: 90px clamp(24px, 7vw, 110px) 0;
}
.moment-inner.is-reverse { flex-direction: row-reverse; }
.moment-img {
  width: clamp(280px, 34vw, 480px);
  height: min(62vh, 120vw);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 50px 110px rgba(60,44,32,.28);
  flex: none;
}
.moment-img.is-wide   { width: clamp(280px, 36vw, 520px); height: min(58vh, 120vw); }
.moment-img.is-tall   { width: clamp(280px, 32vw, 460px); height: min(64vh, 120vw); }
.moment-img.is-wider  { width: clamp(280px, 38vw, 560px); height: min(56vh, 120vw); }
.moment-img img { width: 100%; height: 100%; object-fit: cover; }

.moment-text { position: relative; max-width: 480px; }
.moment-num {
  position: absolute;
  top: -11vw; left: -3vw;
  font-family: var(--font-display);
  font-size: clamp(140px, 17vw, 280px);
  line-height: 1;
  color: rgba(181, 142, 76, 0.08);
  pointer-events: none;
  user-select: none;
}
.moment-body { position: relative; }
.moment-label {
  font-size: 11px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
}
.moment h3 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.06;
  color: var(--ink-900);
}
.moment-rule { height: 1px; width: 64px; background: var(--gold-400); margin: 26px 0; }
.moment p {
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-500);
}
.moment-price {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--gold-600);
}
.moment-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  text-decoration: none;
  color: var(--gold-600);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-300);
  padding-bottom: 7px;
  transition: color .35s ease, gap .35s var(--ease-lux), border-color .35s ease;
}
.moment-link:hover { color: var(--gold-700); gap: 16px; border-color: var(--gold-500); }

.moment.is-center .moment-inner {
  flex-direction: column;
  text-align: center;
  gap: 0;
  padding: 90px clamp(24px, 8vw, 120px) 0;
}
.moment.is-center .moment-text { max-width: 640px; }
.moment.is-center .moment-num { left: 50%; top: -13vw; transform: translateX(-50%); }
.moment.is-center .moment-body { display: flex; flex-direction: column; align-items: center; }
.moment.is-center .moment-rule { margin: 26px auto; }
.moment.is-center .moment-icon { width: 40px; height: 40px; margin-bottom: 30px; }
.moment.is-center p { max-width: 460px; }

/* group flowers */
.gflower {
  position: absolute;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.gflower.g1  { left: 2.5vw; bottom: 6vh; }
.gflower.g2  { left: 3.5vw; bottom: 9vh; }
.gflower.g3a { left: 2.5vw; top: 17%; }
.gflower.g3b { left: 6vw; bottom: 10vh; }

/* CTA state */
.scene-cta {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(24px, 8vw, 120px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.scene-cta .icn { width: 32px; height: 32px; margin-bottom: 36px; }
.scene-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.1;
  color: var(--text-heading);
  text-wrap: balance;
}
.scene-cta h2 em { font-style: italic; color: var(--gold-500); }
.scene-cta .btn { margin-top: 48px; }
.scene-cta-flower {
  position: absolute;
  left: 9vw; bottom: 9vh;
  transform: rotate(6deg);
  transform-origin: 50% 90%;
  pointer-events: none;
}

/* scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  animation: ndFadeIn 1.6s ease 1.8s both;
}
.scroll-hint span:first-child {
  font-size: 10px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.scroll-hint .line {
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--gold-400), transparent);
  transform-origin: top;
  animation: ndScrollLine 2.8s ease-in-out infinite;
}
@keyframes ndScrollLine {
  0%   { transform: scaleY(.35); opacity: .75; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(.35); opacity: .75; }
}

/* scene progress rail */
.scene-progress {
  position: absolute;
  left: clamp(18px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
}
.scene-progress .num {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-600);
}
.scene-progress .num.total { color: var(--ink-400); }
.scene-progress .track {
  position: relative;
  width: 1px;
  height: 120px;
  background: rgba(181,142,76,.25);
  overflow: hidden;
  display: block;
}
.scene-progress .fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--gold-500);
  transform: scaleY(0);
  transform-origin: top;
  display: block;
}

/* ---------- SCENE II : about ---------- */
.about {
  position: relative;
  background: linear-gradient(180deg, #FBF6EE 0%, #F6EEE0 100%);
  padding: clamp(110px, 16vh, 190px) var(--pad-x);
  overflow: hidden;
}
.about-glow {
  position: absolute;
  top: 8vh; right: -6vw;
  width: 46vw; height: 60vh;
  background: radial-gradient(ellipse at center, rgba(230,206,156,.22) 0%, rgba(230,206,156,0) 70%);
  pointer-events: none;
}
.about-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
}
.about-photo-col { grid-column: 1 / span 6; position: relative; }
.about-initial {
  position: absolute;
  top: -70px; left: -20px;
  width: clamp(150px, 18vw, 290px);
  aspect-ratio: 348 / 228;
  background: var(--gold-200);
  opacity: .15;
  -webkit-mask: url('../assets/nd_logo.svg') no-repeat center / contain;
  mask: url('../assets/nd_logo.svg') no-repeat center / contain;
  pointer-events: none;
  user-select: none;
}
.about-photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  /* box-shadow: 0 40px 90px rgba(60,44,32,.2); */
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 45% 15%;
}
.about-badge {
  position: absolute;
  bottom: -26px;
  right: clamp(-10px, 2vw, 30px);
  background: var(--brown-600);
  color: var(--cream-100);
  padding: 22px 30px;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(36,26,18,.35);
}
.about-badge .big {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold-300);
}
.about-badge .small {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(251,246,238,.7);
}

.about-text-col { grid-column: 8 / span 5; }
.about-text-col .eyebrow-row { margin-bottom: 30px; }
.about-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.05vw, 43px);
  line-height: 1.08;
  color: var(--brown-600);
  white-space: nowrap;
}
.about-sub-wrap { margin-top: 8px; }
.about-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  color: var(--gold-500);
}
.about-p1 {
  margin: 30px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink-700);
}
.about-p2 {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink-500);
}
.about-rule { height: 1px; background: var(--gold-300); opacity: .5; margin: 34px 0; }

.about-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px clamp(20px, 3vw, 44px);
}
.about-feat { display: flex; gap: 16px; align-items: flex-start; }
.about-feat .icn { width: 30px; height: 30px; }
.about-feat-t {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  color: var(--brown-600);
}
.about-feat-t small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-500);
  font-weight: 300;
}
.about-sign {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: 38px;
}
.about-sign .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 42px;
  color: var(--gold-500);
}
.about-sign .icn { width: 26px; height: 26px; background: var(--gold-400); align-self: center; }

/* ---------- SCENE III : why (dark) ---------- */
.why {
  position: relative;
  background: linear-gradient(180deg, var(--brown-700) 0%, var(--brown-600) 100%);
  padding: clamp(110px, 16vh, 190px) var(--pad-x);
  overflow: hidden;
}
.why-ghost {
  position: absolute;
  top: 4vh; right: -2vw;
  font-family: var(--font-display);
  font-size: clamp(160px, 26vw, 420px);
  line-height: 1;
  color: rgba(251, 246, 238, 0.02);
  pointer-events: none;
  user-select: none;
}
.why-inner { max-width: 1220px; margin: 0 auto; position: relative; }
.why-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  margin-bottom: clamp(70px, 11vh, 130px);
}
.why-head-col { grid-column: 1 / span 8; }
.why-head .eyebrow { color: var(--gold-300); }
.why-head .eyebrow-row { margin-bottom: 28px; }
.why-head .eyebrow-row .rule { background: var(--gold-400); opacity: .35; }
.why-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.06;
  color: var(--cream-100);
}
.why-h em { font-style: italic; color: var(--gold-300); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(56px, 9vh, 100px);
}
.why-item { grid-column: 1 / span 5; }
.why-item:nth-child(even) { grid-column: 7 / span 5; margin-top: clamp(0px, 6vh, 70px); }
.why-item:nth-child(3) { grid-column: 2 / span 5; }
.why-item:nth-child(4) { grid-column: 8 / span 5; }
.why-item-head { display: flex; align-items: baseline; gap: 18px; }
.why-item-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 68px);
  line-height: 1;
  color: rgba(216,181,112,.34);
}
.why-item .icn { width: 26px; height: 26px; background: var(--gold-300); align-self: center; }
.why-item h3 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--cream-100);
}
.why-item p {
  margin: 10px 0 0;
  max-width: 330px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(251,246,238,.6);
}

/* ---------- SCENE IV : before / after ---------- */
.ba {
  position: relative;
  background: linear-gradient(180deg, #F6EEE0 0%, #FBF6EE 100%);
  padding: clamp(110px, 16vh, 190px) var(--pad-x);
  overflow: hidden;
}
.ba-inner { max-width: 1120px; margin: 0 auto; }
.ba-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  margin-bottom: clamp(56px, 9vh, 100px);
  align-items: end;
}
.ba-head-l { grid-column: 1 / span 7; }
.ba-head-l .eyebrow-row { margin-bottom: 26px; }
.ba-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.05;
  color: var(--text-heading);
}
.ba-h em { font-style: italic; color: var(--gold-500); }
.ba-head-r { grid-column: 9 / span 4; }
.ba-head-r p {
  margin: 24px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-500);
}

/* сцена підлаштована під портретні фото 3:4; ширина виводиться
   з бажаної висоти, на вузьких екранах впирається у 100% */
.ba-frame {
  position: relative;
  padding: clamp(10px, 1.6vw, 22px);
  width: min(100%, calc(min(72vh, 680px) * 0.75));
  margin: 0 auto;
}
.ba-frame-border {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.ba-stage {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 40px 100px rgba(60,44,32,.22);
  background: var(--cream-300);
}
.ba-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease-lux); }
.ba-layer.is-active { opacity: 1; }
.ba-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  background: var(--cream-200);
}
.ba-tag {
  position: absolute;
  top: 22px;
  z-index: 5;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--cream-100);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba-tag.is-before { left: 22px; background: rgba(46,33,21,.6); }
.ba-tag.is-after  { right: 22px; background: rgba(181,142,76,.9); color: var(--cream-50); }

.ba-handle {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 64px;
  margin-left: -32px;
  z-index: 6;
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
}
.ba-handle .rail {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(rgba(243,231,203,.2), var(--gold-200) 30%, var(--gold-200) 70%, rgba(243,231,203,.2));
}
.ba-handle .knob {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(251,246,238,.94);
  border: 1px solid var(--gold-300);
  box-shadow: 0 14px 34px rgba(60,44,32,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.ba-handle .ar-l { width: 8px; height: 8px; border-left: 1.5px solid var(--gold-600); border-bottom: 1.5px solid var(--gold-600); transform: rotate(45deg); }
.ba-handle .ar-r { width: 8px; height: 8px; border-right: 1.5px solid var(--gold-600); border-top: 1.5px solid var(--gold-600); transform: rotate(45deg); }

.ba-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(30px, 5vh, 48px);
}
.ba-arrow {
  width: 56px; height: 56px;
  flex: none;                       /* не сплющувати в овал, коли поруч широкий лічильник */
  border-radius: 50%;
  background: none;
  border: 1px solid var(--gold-300);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .4s ease, border-color .4s ease;
}
.ba-arrow:hover { background: var(--gold-50); border-color: var(--gold-500); }
.ba-arrow .ar-l { width: 10px; height: 10px; border-left: 1.5px solid var(--gold-600); border-bottom: 1.5px solid var(--gold-600); transform: rotate(45deg); margin-left: 4px; }
.ba-arrow .ar-r { width: 10px; height: 10px; border-right: 1.5px solid var(--gold-600); border-top: 1.5px solid var(--gold-600); transform: rotate(45deg); margin-right: 4px; }

/* фіксовані габарити: підписи різної довжини не рухають стрілки */
.ba-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(320px, 56vw);
  flex: none;
}
.ba-counter-nums { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.ba-counter-cur { font-size: 26px; color: var(--gold-600); }
.ba-counter-total { font-size: 15px; color: var(--ink-400); }
.ba-counter-label {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-400);
  text-align: center;
  line-height: 1.7;
  min-height: 3.4em; /* резерв під два рядки */
}

/* ---------- SCENE V : reviews ---------- */
.reviews {
  position: relative;
  background: var(--cream-100);
  padding: clamp(110px, 16vh, 190px) var(--pad-x) clamp(130px, 18vh, 210px);
  overflow: hidden;
}
.reviews-ghost {
  position: absolute;
  top: 6vh; left: -3vw;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(140px, 22vw, 340px);
  line-height: 1;
  color: rgba(181, 142, 76, 0.03);
  pointer-events: none;
  user-select: none;
}
.reviews-inner { max-width: 1240px; margin: 0 auto; position: relative; }
.reviews-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(64px, 10vh, 110px);
}
.reviews-h-wrap { margin-top: 22px; }
.reviews-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.08;
  color: var(--text-heading);
}
.reviews-h em { font-style: italic; color: var(--gold-500); }
.reviews-head p {
  margin: 24px 0 0;
  max-width: 460px;
  font-size: 14.5px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-500);
}

.reviews-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 56px);
}
.review-card {
  border-radius: var(--radius-lg);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.review-card img {
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--cream-50);
  transition: opacity var(--dur-medium) ease;
}
.review-card:hover img { opacity: .9; }
.review-card.r1 { transform: rotate(-3deg); margin-top: 40px; }
.review-card.r1 img { width: min(235px, 40vw); height: min(430px, 74vw); box-shadow: 0 26px 60px rgba(60,44,32,.16); }
.review-card.r2 { transform: rotate(1.8deg); }
.review-card.r2 img { width: min(270px, 42vw); height: min(500px, 82vw); box-shadow: 0 32px 74px rgba(60,44,32,.2); }
.review-card.r3 { transform: rotate(-1.4deg); margin-top: 70px; }
.review-card.r3 img { width: min(225px, 40vw); height: min(400px, 70vw); box-shadow: 0 24px 56px rgba(60,44,32,.15); }
.review-card.r4 { transform: rotate(2.6deg); margin-top: 24px; }
.review-card.r4 img { width: min(240px, 40vw); height: min(440px, 76vw); box-shadow: 0 26px 60px rgba(60,44,32,.16); }

.reviews-more { display: flex; justify-content: center; margin-top: clamp(64px, 10vh, 100px); }
.reviews-more a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--gold-600);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-300);
  padding-bottom: 10px;
  transition: color var(--dur-fast) ease;
}
.reviews-more a:hover { color: var(--gold-700); }
.reviews-more .icn { width: 20px; height: 20px; background: var(--gold-600); }

/* ---------- review gallery (fullscreen, luxury-quiet) ---------- */
.rg-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(36,26,18,.94);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 20px);
  animation: bkOverlayIn .45s ease both;
}
.rg-overlay.is-open { display: flex; }
.rg-overlay.is-closing { animation: bkOverlayOut .4s ease both; }
.rg-overlay.is-closing .rg-stage,
.rg-overlay.is-closing .rg-footer { animation: rgOut .4s var(--ease-lux) both; }

@keyframes rgIn  { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
@keyframes rgOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.985); } }

.rg-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  animation: rgIn .55s var(--ease-lux) both;
}
.rg-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(86vw, 560px);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .45s ease;
}
.rg-img.is-active { opacity: 1; }

.rg-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: 22px;
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(251,246,238,.22);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(251,246,238,.75);
  transition: color var(--dur-medium) ease, border-color var(--dur-medium) ease;
}
.rg-close:hover { color: var(--gold-200); border-color: rgba(216,181,112,.5); }

.rg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(251,246,238,.2);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-medium) ease, background-color var(--dur-medium) ease;
}
.rg-arrow:hover { border-color: rgba(216,181,112,.55); background: rgba(216,181,112,.08); }
.rg-prev { left: clamp(14px, 4vw, 56px); }
.rg-next { right: clamp(14px, 4vw, 56px); }
.rg-arrow .ar-l { width: 9px; height: 9px; border-left: 1.5px solid var(--gold-300); border-bottom: 1.5px solid var(--gold-300); transform: rotate(45deg); margin-left: 3px; }
.rg-arrow .ar-r { width: 9px; height: 9px; border-right: 1.5px solid var(--gold-300); border-top: 1.5px solid var(--gold-300); transform: rotate(45deg); margin-right: 3px; }

.rg-footer {
  flex: none;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  animation: rgIn .55s var(--ease-lux) .08s both;
}
.rg-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.rg-cur {
  display: inline-block;
  font-size: 19px;
  letter-spacing: .14em;
  color: var(--gold-300);
  transition: opacity .22s ease, transform .22s ease;
}
.rg-cur.is-swap { opacity: 0; transform: translateY(6px); }
.rg-sep, .rg-total {
  font-size: 13px;
  letter-spacing: .14em;
  color: rgba(251,246,238,.45);
}

.rg-thumbs {
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 4px 8px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rg-thumbs::-webkit-scrollbar { display: none; }
.rg-thumb {
  flex: none;
  width: 54px; height: 74px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: .42;
  transition: opacity var(--dur-medium) ease, border-color var(--dur-medium) ease;
}
.rg-thumb:hover { opacity: .75; }
.rg-thumb.is-active { opacity: 1; border-color: var(--gold-400); }
.rg-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}

@media (max-width: 920px) {
  .rg-arrow { display: none; }
  .rg-img { max-width: 92vw; }
  .rg-close { right: 14px; }
  .rg-thumb { width: 44px; height: 60px; }
}

/* ---------- flower placements (about / why / ba / reviews / footer) ---------- */
.secflower.f-about   { left: 2.5vw; bottom: 7vh; }
.secflower.f-why-1   { top: 44%; left: 1.5vw; }
.secflower.f-why-2   { bottom: 4vh; right: 2vw; }
.secflower.f-ba      { bottom: 4vh; left: 1vw; }
.secflower.f-reviews { bottom: 16vh; left: 3vw; }
.secflower.f-footer  { bottom: 22vh; left: 4vw; }
.flower-h96 { height: 96px; opacity: .9; }
.flower-h88 { height: 88px; opacity: .9; }
.flower-h86 { height: 86px; opacity: .9; }
.flower-h84 { height: 84px; opacity: .9; }
.flower-h82 { height: 82px; opacity: .85; }
.flower-h78 { height: 78px; opacity: .9; }
.flower-h78-dim { height: 78px; opacity: .55; filter: drop-shadow(0 16px 26px rgba(20,12,6,.3)); }
.flower-h82-dim { height: 82px; opacity: .5;  filter: drop-shadow(0 16px 26px rgba(20,12,6,.3)); }
.flower-h76 { height: 76px; opacity: .85; }
.flower-h72-dim { height: 72px; opacity: .5;  filter: drop-shadow(0 14px 24px rgba(20,12,6,.3)); }
.flower-h70 { height: 70px; opacity: .88; }
.flower-h64 { height: 64px; opacity: .85; }

/* ---------- mobile (<=920px) — recomposition from the mobile design ---------- */
@media (max-width: 920px) {
  .hide-m { display: none !important; }
  .secflower { display: block !important; }

  .scene-sticky { height: 100dvh; }
  .scene-bg { object-position: 80% top; }
  .scene-wash {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(251,246,238,.88) 0%, rgba(251,246,238,.62) 34%, rgba(251,246,238,.18) 58%, rgba(251,246,238,0) 75%);
  }

  .hero-state {
    justify-content: flex-start;
    padding: calc(env(safe-area-inset-top, 0px) + 14dvh) 26px 0;
    z-index: 3;
  }
  .hero-title { font-size: 22vw; letter-spacing: .05em; line-height: .94; }
  .hero-tagline, .hero-lead { max-width: 68vw; }   /* тримаємо текст лівою колонкою, подалі від руки й правого краю */
  .hero-hand { right: -18vw; bottom: -3dvh; }
  .hero-hand img { height: 48dvh; }

  .moment-inner, .moment-inner.is-reverse {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 18px;
    padding: calc(env(safe-area-inset-top, 0px) + 78px) 26px 9dvh;
  }
  .moment-img, .moment-img.is-wide, .moment-img.is-tall, .moment-img.is-wider {
    width: 100%;
    max-width: none;
    height: 36dvh;
  }
  .moment-num { font-size: 30vw; top: -16vw; }

  /* центрований момент (Послуга 06): перебиваємо десктопні відступи тією ж
     специфічністю (3 класи), інакше він лишає top 90px / bottom 0 і CTA
     впирається в низ; центруємо по вертикалі й даємо нижній відступ */
  .moment.is-center .moment-inner {
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 78px) 26px 9dvh;
  }
  .moment.is-center .moment-num { top: -18vw; }
  .moment.is-center .moment-rule { margin: 14px auto; }
  .moment.is-center .moment-icon { margin-bottom: 16px; }

  /* компактна типографіка моментів — щоб опис послуги вміщався
     й на невисоких екранах (SE/mini), без обрізання кнопки */
  .moment h3 { font-size: clamp(26px, 7.6vw, 34px); margin-top: 10px; }
  .moment-rule { margin: 14px 0; }
  .moment p { font-size: 13.5px; line-height: 1.65; }
  .moment-price { margin-top: 12px; font-size: 17px; }
  .moment-link { margin-top: 14px; padding-bottom: 6px; }

  /* дуже низькі екрани — ще трохи стискаємо фото, текст у пріоритеті */
  @media (max-height: 700px) {
    .moment-img, .moment-img.is-wide, .moment-img.is-tall, .moment-img.is-wider { height: 30dvh; }
    .moment-inner, .moment-inner.is-reverse { gap: 14px; padding-bottom: 7dvh; }
    .moment.is-center .moment-inner { padding-top: calc(env(safe-area-inset-top, 0px) + 64px); padding-bottom: 7dvh; }
    .moment p { font-size: 13px; line-height: 1.6; }
  }

  .about-photo-col, .about-text-col { grid-column: 1 / -1; }
  .about-text-col { margin-top: 64px; }

  .why-head-col { grid-column: 1 / -1; }
  .why-item, .why-item:nth-child(even), .why-item:nth-child(3), .why-item:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(251,246,238,.14);
  }
  .why-grid { row-gap: 30px; }
  .why-item h3 { font-size: 24px; margin-top: 12px; }
  .why-item p { max-width: none; margin-top: 8px; }

  .ba-head-l, .ba-head-r { grid-column: 1 / -1; }
  .ba-handle { width: 96px; margin-left: -48px; }

  .reviews-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .review-card.r1, .review-card.r2, .review-card.r3, .review-card.r4 { margin-top: 0; transform: none; }
  .review-card img { width: 100% !important; height: auto !important; aspect-ratio: 9 / 17; }

  h2, h3 { text-wrap: balance; }
  html { overscroll-behavior-y: none; }
}

/* ---------- reduced motion / no-GSAP static unfold ---------- */
.scene.is-static { height: auto; }
.scene.is-static .scene-sticky { position: relative; height: auto; overflow: visible; }
.scene.is-static .scene-bg {
  height: 100vh;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
  mask-image: linear-gradient(to bottom, black 60%, transparent);
}
.scene.is-static .hero-state { position: relative; inset: auto; min-height: 92vh; }
.scene.is-static .svc-intro,
.scene.is-static .moment,
.scene.is-static .scene-cta {
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  min-height: 90vh;
}
.scene.is-static .hero-hand,
.scene.is-static .scene-progress,
.scene.is-static .scroll-hint,
.scene.is-static .gflower { display: none; }