/* css/ranni-ptashky.css — сторінка кампанії «Ранні пташки» (/ranni-ptashky/).
   У межах залоченого бренду: токени styles.css, нових hex нема (alpha = rgba наявних).
   Патерни: hero+редакційні секції — еталон dlya-dvoh.css; картки будинків — budynky.css (.bud-house → .rp-house). */

/* ── Редакційні мітки секцій: hairline + letterspaced label ── */
.rp-how .kicker, .rp-houses .kicker, .rp-glance .kicker, .rp-honest .kicker, .faq .kicker {
  color:var(--brown,#8C5A2B); display:inline-flex; align-items:center; gap:.7em }
.rp-how .kicker::before, .rp-houses .kicker::before, .rp-glance .kicker::before,
.rp-honest .kicker::before, .faq .kicker::before {
  content:''; width:30px; height:1px; background:currentColor; opacity:.55 }

/* Заголовки — стримана міра + консистентний відступ kicker→h2 */
.rp-how h2, .rp-houses h2, .rp-glance h2, .rp-honest h2, .faq h2 { max-width:18ch; letter-spacing:-.01em; margin-top:clamp(18px,1.8vw,24px) }

/* ── ① Hero: бейдж тижня + текст ── */
.rp-hero__inner { position:relative; z-index:2; width:100%; max-width:1280px; margin-inline:auto;
  padding:128px clamp(24px,5vw,56px) 84px }
.rp-hero .hero__sub { max-width:44ch }
.rp-badge { display:inline-flex; align-items:baseline; gap:.45em; margin:22px 0 14px;
  padding:10px 18px; border-radius:999px; color:var(--ecru,#F7F3EC);
  background:rgba(25,26,24,.46); backdrop-filter:blur(15px) saturate(1.08); -webkit-backdrop-filter:blur(15px) saturate(1.08);
  border:1px solid rgba(247,243,236,.18); box-shadow:0 24px 60px -32px rgba(0,0,0,.7);
  font-size:.95rem; letter-spacing:.02em }
.rp-badge strong { font-family:var(--font-h,'Tenor Sans',serif); font-weight:400; font-size:1.5rem; line-height:1;
  color:var(--sand,#E8D9C3); font-variant-numeric:tabular-nums }
.rp-hero h1 .l1, .rp-hero h1 .l2 { display:block }
.rp-hero .rings--card { width:430px; height:430px; right:-120px; top:56%; transform:translateY(-50%); opacity:.14; z-index:1 }
@media (max-width:999px){ .rp-hero .rings--card { display:none } }

/* ── ② Як це працює: нумеровані кроки 01/02/03 ── */
.rp-steps { list-style:none; padding:0; margin:clamp(36px,4.5vw,64px) 0 0; counter-reset:step;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px) }
.rp-steps li { counter-increment:step; padding-top:18px; border-top:1px solid rgba(140,90,43,.18) }
.rp-steps h3 { font-size:1.35rem; margin:0 0 10px; display:flex; align-items:baseline; gap:.65em }
.rp-steps h3::before { content:counter(step,decimal-leading-zero); font-size:.8rem; letter-spacing:.12em;
  color:var(--brown,#8C5A2B); font-family:var(--font-b,sans-serif); font-weight:700 }
.rp-steps p { color:var(--ink-soft,#33352F); max-width:38ch }
.rp-how__cta { margin-top:clamp(32px,4vw,48px) }

/* ── ③ Три будинки з басейном (еталон budynky .bud-house: тепла біла картка + смужка + орнамент-емблема біля назви) ── */
.rp-houses { background:var(--paper,#fff) }
.rp-houses .section-sub { max-width:60ch; color:var(--ink-soft,#33352F); margin-top:16px }
.rp-houses__grid { margin-top:clamp(36px,4.5vw,64px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,36px) }
.rp-house { position:relative; background:var(--ecru,#F7F3EC); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card,0 1px 2px rgba(25,26,24,.05)), var(--edge-card,inset 0 0 0 1px rgba(25,26,24,.06));
  transition:transform .4s var(--ease-out,ease), box-shadow .4s var(--ease-out,ease) }
.rp-house:hover { transform:translateY(-4px); box-shadow:0 18px 50px -30px rgba(25,26,24,.5) }
.rp-house picture { display:block; aspect-ratio:16/11; overflow:hidden; background:var(--sand,#E8D9C3) }
.rp-house img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-zoom,.4s) var(--ease-out,ease) }
.rp-house:hover img { transform:scale(1.04) }
.rp-house__stripe { display:block; height:5px; background:var(--house) }
/* орнамент-емблема: малий вертикальний знак у кольорі будинку, локап із назвою (НЕ на фото) */
.rp-house__head { display:flex; align-items:center; gap:11px; margin-bottom:2px }
.rp-house__orn { flex:none; width:18px; height:42px;
  background:var(--house); -webkit-mask:var(--orn) no-repeat center/contain; mask:var(--orn) no-repeat center/contain }
.rp-house__body { padding:16px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1 }
.rp-house__body h3 { font-family:var(--font-h,'Tenor Sans',serif); font-weight:400; font-size:1.4rem; line-height:1 }
.rp-house__body > p { color:var(--ink-soft,#33352F); font-size:.95rem }
.rp-house__meta { color:var(--willow,#67725A); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase }
.rp-house .btn--ghost { align-self:flex-start; margin-top:auto }
.rp-houses__note { margin-top:26px; color:var(--willow,#67725A); font-size:.92rem; max-width:64ch }

/* ── ④ Що включено — спец-аркуш ── */
.rp-glance__included { list-style:none; padding:0; margin:28px 0 clamp(40px,5vw,64px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 clamp(28px,4vw,56px) }
.rp-glance__included li { padding:13px 0 13px 22px; position:relative; color:var(--ink-soft,#33352F); border-top:1px solid rgba(140,90,43,.14) }
.rp-glance__included li::before { content:''; position:absolute; left:0; top:1.2em; width:6px; height:6px; border-radius:50%; background:var(--brown,#8C5A2B) }
.rp-facts--wide { display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,4vw,56px); border-top:2px solid rgba(140,90,43,.22); margin-top:4px }
.rp-facts--wide > div { display:block; padding:18px 0; border-top:1px solid rgba(140,90,43,.14) }
.rp-facts--wide dt { color:var(--willow,#67725A); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px }
.rp-facts--wide dd { margin:0; font-weight:600; font-size:1.06rem; line-height:1.4; font-variant-numeric:tabular-nums }

/* ── ⑤ Чесний такт — велике редакційне твердження + бренд-кільце ── */
.rp-honest { position:relative; overflow:hidden; padding-block:clamp(64px,9vh,128px) }
.rp-honest .wrap { position:relative; z-index:1 }
.rp-honest .rings { width:min(42vw,460px); height:min(42vw,460px); border-width:clamp(26px,3.4vw,48px); right:-11vw; top:-14%; opacity:.13; z-index:0 }
.rp-honest h2 { font-size:clamp(2rem,4.2vw,3.2rem) }
.rp-honest__body { font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.75; max-width:60ch; margin-top:24px; color:var(--ink-soft,#33352F) }
.rp-honest__body--yes { color:var(--ink,#191A18); font-family:var(--font-h,'Tenor Sans',serif); font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.5 }

/* ── ⑥ FAQ — тонкі лінії + хвіст-CTA ── */
.faq h2 { font-size:clamp(1.9rem,3.4vw,3rem) }
.faq .faq__item { border-top:1px solid rgba(140,90,43,.18) }
.faq .faq__item:last-of-type { border-bottom:1px solid rgba(140,90,43,.18) }
.rp-faq__ask { margin-top:clamp(32px,4vw,48px); display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.rp-faq__ask p { color:var(--willow,#67725A) }

/* ── ⑦ Фінальний CTA — темний такт із кільцем ── */
.rp-final { position:relative; overflow:hidden; background:var(--ink,#191A18); color:var(--ecru,#F7F3EC); text-align:center }
.rp-final::before { content:''; position:absolute; width:min(60vw,640px); height:min(60vw,640px); border-radius:50%;
  border:clamp(32px,5vw,64px) solid var(--brown,#8C5A2B); opacity:.16; left:50%; top:-32%; transform:translateX(-50%); pointer-events:none }
.rp-final .wrap { position:relative; z-index:1 }
.rp-final h2 { color:var(--ecru,#F7F3EC); max-width:16ch; margin-inline:auto; font-size:clamp(2rem,4vw,3.2rem) }
.rp-final p { margin:16px auto 14px; color:rgba(247,243,236,.85); font-size:1.1rem; max-width:44ch }

/* ── Responsive ── */
@media (max-width:900px){ .rp-houses__grid { grid-template-columns:1fr 1fr } }
@media (max-width:880px){ .rp-facts--wide { grid-template-columns:repeat(2,1fr) } .rp-steps { grid-template-columns:1fr } }
@media (max-width:600px){ .rp-houses__grid { grid-template-columns:1fr } .rp-facts--wide { grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce) {
  .rp-house, .rp-house img { transition:none }
  .rp-house:hover { transform:none }
  .rp-house:hover img { transform:none }
}