/* ============================================================
   VARIANT B — editorial / magazine · 9 blocks
   ============================================================ */
.wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 20px; }
@media(min-width:768px){ .wrap{ padding:0 48px; } }
@media(min-width:1100px){ .wrap{ padding:0 48px 0 96px; } }

/* wordmark variant: GOVORIN_KONTAKT */
.wm{ font-family:var(--font-head); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); position:relative; display:inline-block; padding-bottom:.3em; font-size:.86rem; white-space:nowrap; }
.wm .k{ font-family:var(--font-mono); font-weight:700; letter-spacing:.02em; }
.wm::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:.6; }

/* ---------- side social rail ---------- */
.rail{ display:none; }
@media(min-width:1100px){
  .rail{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; position:fixed; left:34px; top:0; bottom:0; z-index:50; justify-content:center; pointer-events:none; }
  .rail a{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-head); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); pointer-events:auto; transition:color .2s; }
  .rail a:hover{ color:var(--accent); }
  .rail .bar{ width:1px; height:60px; background:var(--line); }
}

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:60; background:rgba(36,40,43,0); transition:background .3s, backdrop-filter .3s; }
.hdr.stuck{ background:rgba(36,40,43,.9); backdrop-filter:blur(10px); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:1rem; }
.nav{ display:none; }
.nav a{ font-family:var(--font-head); font-weight:500; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); transition:color .2s; }
.nav a:hover{ color:var(--accent); }
.hdr-right{ display:flex; align-items:center; gap:1rem; }
.lang{ display:flex; gap:.5rem; font-family:var(--font-head); font-size:.74rem; letter-spacing:.1em; }
.lang a{ color:var(--ink-dim); } .lang a.on{ color:var(--accent); } .lang a:hover{ color:var(--ink); }
.lang .sep{ color:var(--ink-faint); }
.burger{ width:28px; height:14px; position:relative; }
.burger span{ position:absolute; left:0; right:0; height:1.5px; background:var(--ink); }
.burger span:first-child{ top:0; } .burger span:last-child{ bottom:0; }
@media(min-width:980px){ .nav{ display:flex; gap:1.5rem; } .burger{ display:none; } }

/* ---------- buttons ---------- */
.btn{ font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6em; transition:all .25s; cursor:pointer; border:none; background:none; }
.btn-line{ color:var(--accent); padding-bottom:.3em; border-bottom:1px solid var(--accent); }
.btn-line:hover{ gap:1em; }
.btn-ghost{ border:1px solid var(--line); padding:.85em 1.5em; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-solid{ background:var(--accent); color:#23251c; padding:.95em 1.9em; }
.btn-solid:hover{ background:#fff; }

/* ---------- numbered block frame ---------- */
.block{ padding:4.5rem 0; border-top:1px solid var(--line-soft); }
.block-grid{ display:grid; gap:2.4rem; }
.block-side{ display:flex; flex-direction:column; gap:.55rem; }
.block-side .bignum{ font-family:var(--font-head); font-weight:800; font-size:clamp(2.4rem,9vw,4.2rem); line-height:.85; color:var(--accent); letter-spacing:-.02em; }
.block-side h2{ font-family:var(--font-head); font-weight:300; font-size:clamp(1.7rem,5vw,2.4rem); margin:.2rem 0 0; line-height:1.02; }
.block-side h2 b{ color:var(--accent); font-weight:600; }
.block-side .sub{ font-family:var(--font-head); font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-top:.3rem; }
@media(min-width:860px){ .block-grid{ grid-template-columns:230px 1fr; gap:3.5rem; } }

/* ---------- HERO ---------- */
.hero{ padding:1rem 0 0; }
.hero-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
@media(min-width:760px){ .hero-img{ aspect-ratio:16/8; } }
.hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,40,43,.15) 0%, rgba(36,40,43,.05) 40%, rgba(36,40,43,.92) 100%), linear-gradient(90deg, rgba(36,40,43,.7), transparent 55%); }
.hero-arc{ position:absolute; right:-90px; top:-90px; width:280px; height:280px; border-radius:50%; z-index:2; background:conic-gradient(from 160deg, transparent 0deg, var(--accent) 60deg, #fff7c8 110deg, transparent 200deg) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 14px rgba(252,251,177,.5)); pointer-events:none; opacity:.85; }
.hero-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:2rem 1.4rem; }
.hero-eyebrow{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.hero-eyebrow .ln{ width:40px; height:1px; background:var(--accent); }
.hero-eyebrow span{ font-family:var(--font-head); font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.hero h1{ font-family:var(--font-head); font-weight:300; font-size:clamp(1.7rem,4.6vw,3.1rem); line-height:1.08; margin:0; letter-spacing:-.01em; max-width:20ch; }
.hero h1 b{ font-weight:700; color:var(--accent); }
.hero-bottom{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.hero-pos{ font-family:var(--font-head); font-weight:500; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.7rem; }
.hero-pos .ln{ width:28px; height:1px; background:var(--accent); }
@media(min-width:760px){ .hero-overlay{ padding:3rem 3rem; } }

/* ---------- ABOUT ---------- */
.about-grid2{ display:grid; gap:2rem; align-items:center; }
.about-txt .hi{ font-family:var(--font-head); font-weight:300; font-size:clamp(1.6rem,4.4vw,2.3rem); margin:0 0 1.2rem; line-height:1.12; }
.about-txt .hi b{ color:var(--accent); font-weight:600; }
.about-txt p{ color:var(--ink-soft); }
.about-photo2{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.about-photo2 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.02); }
.about-photo2 .accent-bar{ position:absolute; left:0; top:18%; bottom:18%; width:4px; background:var(--accent); z-index:2; }
@media(min-width:780px){ .about-grid2{ grid-template-columns:1.25fr .9fr; gap:3.5rem; } }

/* ---------- PHILOSOPHY ---------- */
.phil-list{ display:grid; gap:0; }
.phil{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.8rem 0; border-top:1px solid var(--line-soft); align-items:start; }
.phil:first-child{ border-top:none; }
.phil .n{ font-family:var(--font-head); font-weight:700; color:var(--accent); font-size:.8rem; letter-spacing:.08em; padding-top:.35rem; }
.phil p{ margin:0; font-family:var(--font-head); font-weight:300; font-size:clamp(1.15rem,2.8vw,1.5rem); line-height:1.32; color:var(--ink); }
.phil p em{ color:var(--accent); font-style:italic; }

/* ---------- SERVICES + PRICE ---------- */
.price-list{ display:grid; gap:0; }
.price-item{ border-top:1px solid var(--line); padding:2.2rem 0; display:grid; gap:1.6rem; }
.price-item:first-child{ border-top:none; padding-top:.5rem; }
.price-head{ display:flex; align-items:baseline; gap:1rem; }
.price-head .no{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.6rem,5vw,2.4rem); color:var(--accent); line-height:.9; }
.price-head h3{ font-family:var(--font-head); font-weight:300; font-size:clamp(1.4rem,4vw,2rem); margin:0; text-transform:uppercase; letter-spacing:.01em; }
.price-body{ display:grid; gap:1.4rem; }
.price-meta{ display:grid; gap:1.1rem; }
.price-meta .row .label{ display:block; margin-bottom:.25rem; }
.price-meta .row p{ margin:0; color:var(--ink-soft); }
.price-aside{ display:flex; flex-direction:column; gap:1.2rem; }
.price-fig .label{ display:block; margin-bottom:.3rem; }
.price-fig .t{ color:var(--ink-soft); font-size:.92rem; }
.price-fig .amt{ font-family:var(--font-head); font-weight:400; font-size:1.4rem; }
.price-fig .amt b{ color:var(--accent); font-weight:600; }
@media(min-width:820px){
  .price-body{ grid-template-columns:1fr 280px; gap:3rem; }
  .price-aside{ border-left:1px solid var(--line-soft); padding-left:2.4rem; justify-content:space-between; }
}

/* ---------- STATS ---------- */
.stats-grid{ display:grid; gap:2.4rem; }
.stat{ display:grid; gap:.4rem; border-top:1px solid var(--line-soft); padding-top:1.4rem; }
.stat .v{ font-family:var(--font-head); font-weight:200; font-size:clamp(3rem,12vw,5rem); line-height:.9; color:var(--accent); }
.stat .v b{ font-weight:400; }
.stat .k{ color:var(--ink-soft); font-size:.95rem; max-width:24ch; }
@media(min-width:760px){ .stats-grid{ grid-template-columns:repeat(3,1fr); gap:2rem; } }

/* ---------- REVIEWS ---------- */
.rev-grid{ display:grid; gap:1.2rem; }
.rev{ border:1px solid var(--line); display:grid; }
.rev-top{ display:flex; justify-content:space-between; padding:.7rem 1.2rem; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-dim); }
.rev-mid{ padding:1.2rem; }
.rev-mid h4{ font-family:var(--font-head); font-weight:500; font-size:1.15rem; margin:0 0 1rem; }
.rev-mid p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.rev-mid .by{ display:block; margin-top:.8rem; color:var(--accent); font-style:italic; font-size:.86rem; }
@media(min-width:760px){ .rev-grid{ grid-template-columns:1fr 1fr; } }

/* portfolio strip under reviews */
.pf-strip{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:1.6rem; }
.pf-strip .f{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.pf-strip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.03); transition:transform .6s ease; }
.pf-strip .f:hover img{ transform:scale(1.04); }

/* ---------- FAQ accordion ---------- */
.faq-list{ display:grid; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; gap:1.2rem; padding:1.5rem 0; cursor:pointer; background:none; border:none; color:var(--ink); }
.faq-q .ic{ font-family:var(--font-head); font-weight:300; font-size:1.6rem; color:var(--accent); line-height:1; width:1.2rem; text-align:center; transition:transform .3s ease; flex:none; }
.faq-q .qt{ font-family:var(--font-head); font-weight:400; font-size:clamp(1.02rem,2.6vw,1.25rem); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a .inner{ padding:0 0 1.6rem 2.4rem; color:var(--ink-soft); max-width:62ch; }
.faq-item.open .faq-q .ic{ transform:rotate(45deg); }

/* ---------- FINAL CTA ---------- */
.final{ padding:6rem 0; position:relative; overflow:hidden; text-align:center; }
.final-arc{ position:absolute; left:50%; top:-120px; transform:translateX(-50%); width:360px; height:360px; border-radius:50%; background:conic-gradient(from 200deg, transparent, var(--accent) 70deg, #fff7c8 130deg, transparent 220deg) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 18px rgba(252,251,177,.4)); opacity:.5; pointer-events:none; }
.final .eyebrow{ margin-bottom:1.4rem; }
.final h2{ font-family:var(--font-head); font-weight:200; font-size:clamp(2rem,6vw,3.4rem); margin:0 auto 1.6rem; line-height:1.05; max-width:16ch; }
.final h2 b{ color:var(--accent); font-weight:400; }
.final-quote{ color:var(--ink-soft); max-width:48ch; margin:0 auto 2.4rem; font-size:1.05rem; font-style:italic; }
.final .btn-solid{ font-size:.86rem; padding:1.1em 2.6em; }

/* ---------- FOOTER ---------- */
.ftr{ border-top:1px solid var(--line); padding:3.5rem 0 2.4rem; }
.ftr-grid{ display:grid; gap:2.4rem; }
.ftr-col h4{ font-family:var(--font-head); font-weight:300; font-size:1.4rem; margin:0 0 1.3rem; display:flex; align-items:center; gap:.8rem; }
.ftr-col h4::after{ content:""; flex:1; max-width:46px; height:1px; background:var(--accent); }
.ftr-col p, .ftr-col a{ color:var(--ink-soft); margin:.3rem 0; display:block; }
.ftr-col a:hover{ color:var(--accent); }
.ftr-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; border-top:1px solid var(--line-soft); margin-top:2.6rem; padding-top:1.6rem; }
.ftr-copy{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); letter-spacing:.06em; }
@media(min-width:760px){ .ftr-grid{ grid-template-columns:1.2fr 1fr 1fr; gap:3rem; } }

/* ============================================================
   BOOKING MODAL (3 steps) + ABOUT POPUP
   ============================================================ */
.overlay{ position:fixed; inset:0; z-index:200; background:rgba(20,23,25,.72); backdrop-filter:blur(6px); display:none; align-items:flex-end; justify-content:center; padding:0; }
.overlay.open{ display:flex; }
@media(min-width:680px){ .overlay{ align-items:center; padding:24px; } }
.modal{ background:var(--bg-deep); border:1px solid var(--line); width:100%; max-width:560px; max-height:94vh; overflow-y:auto; border-radius:14px 14px 0 0; position:relative; }
@media(min-width:680px){ .modal{ border-radius:10px; } }
.modal-head{ position:sticky; top:0; background:var(--bg-deep); display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.6rem; border-bottom:1px solid var(--line-soft); z-index:2; }
.modal-head .mt{ font-family:var(--font-head); font-weight:500; font-size:1.05rem; }
.modal-close{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%; color:var(--ink); display:grid; place-items:center; font-size:1.1rem; background:none; cursor:pointer; }
.modal-close:hover{ border-color:var(--accent); color:var(--accent); }
.modal-body{ padding:1.6rem; }

/* stepper */
.stepper{ display:flex; gap:.5rem; margin-bottom:1.8rem; }
.stepper .s{ flex:1; display:flex; flex-direction:column; gap:.5rem; }
.stepper .s .bar{ height:3px; background:var(--line); border-radius:2px; }
.stepper .s.active .bar, .stepper .s.done .bar{ background:var(--accent); }
.stepper .s .lb{ font-family:var(--font-head); font-weight:600; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.stepper .s.active .lb{ color:var(--accent); }

.step-pane{ display:none; }
.step-pane.show{ display:block; animation:fade .35s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.step-hint{ color:var(--ink-soft); font-size:.92rem; margin:0 0 1.4rem; }

.modal-foot{ display:flex; gap:1rem; align-items:center; justify-content:space-between; margin-top:1.8rem; }
.modal-foot .btn-back{ font-family:var(--font-head); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); cursor:pointer; background:none; border:none; }
.modal-foot .btn-back:hover{ color:var(--ink); }
.modal-foot .btn-back[disabled]{ opacity:.3; cursor:default; }

/* calendar */
.cal{ }
.cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-top .mo{ font-family:var(--font-head); font-weight:500; font-size:1rem; text-transform:capitalize; }
.cal-nav{ width:34px; height:34px; border:1px solid var(--line); background:none; color:var(--ink); border-radius:6px; cursor:pointer; }
.cal-nav:hover{ border-color:var(--accent); color:var(--accent); }
.cal-nav[disabled]{ opacity:.3; cursor:default; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-grid .dow{ font-family:var(--font-head); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); text-align:center; padding:.4rem 0; }
.cal-day{ aspect-ratio:1; border:1px solid transparent; background:var(--bg-deeper); color:var(--ink); border-radius:6px; font-family:var(--font-head); font-size:.9rem; cursor:pointer; transition:all .15s; }
.cal-day:hover:not([disabled]){ border-color:var(--accent); }
.cal-day[disabled]{ color:var(--ink-faint); background:transparent; cursor:default; }
.cal-day.sel{ background:var(--accent); color:#23251c; font-weight:600; }
.cal-day.empty{ background:none; border:none; cursor:default; }

/* slots */
.slot-date{ font-family:var(--font-head); font-weight:500; color:var(--accent); margin:0 0 1rem; font-size:.95rem; }
.slot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(min-width:520px){ .slot-grid{ grid-template-columns:repeat(4,1fr); } }
.slot{ padding:.7rem 0; border:1px solid var(--line); background:var(--bg-deeper); color:var(--ink); border-radius:6px; font-family:var(--font-mono); font-size:.84rem; cursor:pointer; transition:all .15s; }
.slot:hover:not([disabled]){ border-color:var(--accent); }
.slot[disabled]{ color:var(--ink-faint); opacity:.5; cursor:default; text-decoration:line-through; }
.slot.sel{ background:var(--accent); color:#23251c; border-color:var(--accent); font-weight:700; }
.slot-loading{ color:var(--ink-dim); font-size:.9rem; padding:2rem 0; text-align:center; }

/* about popup body */
.pop{ max-width:640px; }
.pop-body{ padding:1.8rem 1.6rem 2.4rem; }
.pop-body p{ color:var(--ink-soft); }
.pop-body p.lead{ font-family:var(--font-head); font-weight:300; font-size:1.3rem; color:var(--ink); line-height:1.3; margin-top:0; }
@media(min-width:680px){ .pop-body{ padding:2rem 2.4rem 2.8rem; } }

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:none; }
}