/* =========================================================
   MAG ALASTAR — Cinematic Mysticism v3
   Dark hero · Light editorial sections · Dialogic-inspired
   ========================================================= */

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  /* dark (hero / footer) */
  --ink-0:#06050B;
  --ink-1:#0D0A17;
  --ink-2:#13102B;

  --p-0:#EDE4CC;
  --p-1:rgba(237,228,204,.78);
  --p-2:rgba(237,228,204,.52);
  --p-3:rgba(237,228,204,.28);

  /* light (content sections) */
  --cr:#F5F0E6;
  --cr-2:#EBE5D5;
  --cr-3:#DDD6C2;
  --tx:#1C1810;
  --tx-2:rgba(28,24,16,.68);
  --tx-3:rgba(28,24,16,.40);
  --tx-line:rgba(28,24,16,.12);

  /* amber accent */
  --am:#C97B0D;
  --am-2:#E8940F;
  --am-3:#F5AC2A;

  /* gold (dark sections only) */
  --gold:#D9A84E;
  --gold-2:#B87D28;

  /* structural */
  --line:rgba(237,228,204,.10);
  --line-2:rgba(237,228,204,.18);
  --max:1180px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;

  /* fonts */
  --serif:"Cormorant Garamond","Times New Roman",ui-serif,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ── Reset ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:72px;
}
body{
  background:var(--ink-0);
  color:var(--p-0);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html,body{max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none}

/* ── Film grain overlay ──────────────────────────────────── */
body::after{
  content:"";
  position:fixed;inset:0;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.9  0 0 0 0 0.84  0 0 0 0.055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.28;mix-blend-mode:overlay;pointer-events:none;
}

/* ── Layout ──────────────────────────────────────────────── */
.container{box-sizing:border-box;width:100%;max-width:var(--max);margin:0 auto;padding:0 28px;position:relative;z-index:2}
section{position:relative;z-index:2}
main,section,.container,
.editorial > *,.s-head > *,.contact-strip > *,
.pc,.prod,.trust-card,.review-card,.media-ph,.foot{
  min-width:0;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

/* =========================================================
   HEADER
   — transparent + light text over hero
   — switches to cream + dark text after hero
   ========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  border-bottom:1px solid transparent;
}
.header .nav-wrap{
  display:grid;
  align-items:center;
  min-height:64px;
}

/* — dark state (over hero) — */
.header.dark-mode{
  background:rgba(6,5,11,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.header.dark-mode .brand-name{ color:var(--p-0) }
.header.dark-mode .brand-sub{ color:var(--p-2) }
.header.dark-mode .menu > a,
.header.dark-mode .dd-trigger{ color:var(--p-1) }
.header.dark-mode .menu > a:hover,
.header.dark-mode .dd-trigger:hover{ color:var(--p-0) }
.header.dark-mode .brand-mark{ border-color:rgba(217,168,78,.45) }

/* — light state (over content) — */
.header.light-mode{
  background:var(--cr);
  border-bottom-color:var(--tx-line);
  box-shadow:0 2px 28px rgba(0,0,0,.07);
}
.header.light-mode .brand-name{ color:var(--tx) }
.header.light-mode .brand-sub{ color:var(--tx-3) }
.header.light-mode .menu > a,
.header.light-mode .dd-trigger{ color:var(--tx-2) }
.header.light-mode .menu > a:hover,
.header.light-mode .dd-trigger:hover{ color:var(--tx) }
.header.light-mode .brand-mark{ border-color:rgba(201,123,13,.5) }
.header.light-mode .btn-book{ background:var(--am);color:#fff }
.header.light-mode .btn-book:hover{ background:var(--am-2) }

/* — nav layout — */
.nav-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  padding:0 28px;
  max-width:var(--max);
  margin:0 auto;
  width:100%;
}

/* — brand — */
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(217,168,78,.40);
  display:grid;place-items:center;flex-shrink:0;
  transition:border-color .25s ease;
}
.brand-name{
  font-family:var(--serif);font-size:18px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;line-height:1.1;
  transition:color .3s ease;
}
.brand-sub{
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  display:block;margin-top:2px;transition:color .3s ease;
}

/* — menu — */
.menu{
  display:flex;align-items:center;justify-content:center;gap:2px;
}
.menu > a{
  font-size:13px;letter-spacing:.12em;
  padding:10px 12px;border-radius:999px;
  transition:color .2s ease,background .2s ease;
  white-space:nowrap;
}
.menu > a:hover{background:rgba(28,24,16,.06)}
.header.dark-mode .menu > a:hover{background:rgba(255,255,255,.06)}

/* — dropdown — */
.dd{position:relative}
.dd-trigger{
  display:flex;align-items:center;gap:6px;
  font-size:13px;letter-spacing:.12em;
  padding:10px 12px;border-radius:999px;
  cursor:pointer;
  transition:color .2s ease,background .2s ease;
  white-space:nowrap;
}
.dd-trigger:hover{background:rgba(28,24,16,.06)}
.header.dark-mode .dd-trigger:hover{background:rgba(255,255,255,.06)}
.dd-caret{
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.dd-caret svg{transition:transform .25s ease}
.dd.open .dd-caret svg{transform:rotate(180deg)}
/* Bridge hover gap: без «моста» курсор проходит пустой зазор между кнопкой и
   панелью → mouseleave на .dd → меню исчезает до клика по пункту. */
.dd-panel{
  position:absolute;
  top:100%;
  left:50%;
  margin-top:6px;
  min-width:220px;
  background:var(--cr);
  border:1px solid var(--tx-line);
  border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.16);
  /* overflow:visible — иначе ::before-мост обрезается и зазор снова «убивает» hover */
  overflow:visible;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:120;
}
/* Невидимая зона над панелью (перекрывает зазор до триггера) — курсор не выходит из .dd */
.dd-panel::before{
  content:"";
  position:absolute;
  left:-24px;
  right:-24px;
  bottom:100%;
  height:18px;
}
.dd.open .dd-panel{
  opacity:1;
  pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.dd-panel a{
  display:block;padding:11px 18px;
  font-size:13px;letter-spacing:.06em;
  color:var(--tx-2);
  transition:background .15s ease, color .15s ease;
}
.dd-panel a:hover{background:var(--cr-2);color:var(--tx)}
.dd-divider{height:1px;background:var(--tx-line);margin:4px 0}
.dd-panel a.dd-main{font-weight:600;color:var(--am)}

/* — actions — */
.nav-actions{
  display:flex;align-items:center;gap:10px;
  justify-content:flex-end;
}
.btn-tg{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);
  color:var(--p-0);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-tg:hover{border-color:var(--gold);background:rgba(217,168,78,.08)}
.header.dark-mode .btn-tg{color:var(--p-0)}
.header.light-mode .btn-tg{
  border-color:var(--tx-line);
  color:var(--tx);
}
.header.light-mode .btn-tg:hover{border-color:var(--am);background:rgba(201,123,13,.08);color:var(--tx)}
.btn-tg svg{width:18px;height:18px}

.btn-book{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:var(--gold);color:#1A1208;
  border:none;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-book:hover{
  background:var(--am-3);transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(201,123,13,.32);
}
.btn-book .arr{display:inline-block;transition:transform .25s ease}
.btn-book:hover .arr{transform:translateX(3px)}

/* =========================================================
   BUTTONS (global)
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.12em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;border:none;cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn .arr{display:inline-block;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(3px)}

/* primary amber — on light sections */
.btn-amber{
  background:var(--am);color:#fff;
  box-shadow:0 10px 28px rgba(201,123,13,.28);
}
.btn-amber:hover{background:var(--am-2);box-shadow:0 14px 36px rgba(201,123,13,.38)}

/* primary gold — on dark sections */
.btn-gold{
  background:linear-gradient(180deg,var(--am-3),var(--gold-2));
  color:#1A1208;
  box-shadow:0 10px 28px rgba(217,168,78,.25);
}
.btn-gold:hover{box-shadow:0 14px 36px rgba(217,168,78,.38)}

/* ghost on dark */
.btn-ghost-dark{
  background:transparent;color:var(--p-0);
  border:1px solid var(--line-2);
}
.btn-ghost-dark:hover{border-color:var(--gold);color:var(--gold)}

/* ghost on light */
.btn-ghost-light{
  background:transparent;color:var(--tx);
  border:1px solid var(--tx-line);
}
.btn-ghost-light:hover{border-color:var(--am);color:var(--am)}

/* pill — inside photo cards */
.btn-pill{
  background:var(--am);color:#fff;
  border-radius:999px;padding:11px 20px;
  font-size:12px;font-weight:700;letter-spacing:.14em;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .2s ease, transform .15s ease;
  box-shadow:0 6px 20px rgba(201,123,13,.35);
}
.btn-pill:hover{background:var(--am-2);transform:translateY(-1px)}

.btn-sm{padding:9px 16px;font-size:11px}

/* =========================================================
   HERO — dark, full viewport
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  padding:100px 0 80px;overflow:hidden;
  background:var(--ink-0);
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}

/* atmospheric glow blobs */
.hero-atm{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 700px at 75% 5%, rgba(110,70,190,.18), transparent 60%),
    radial-gradient(700px 600px at 15% 30%, rgba(80,150,210,.09), transparent 55%),
    radial-gradient(700px 600px at 55% 95%, rgba(201,123,13,.09), transparent 55%);
  animation:atmDrift 20s ease-in-out infinite alternate;
}
@keyframes atmDrift{
  from{transform:translate3d(-20px,-10px,0) scale(1)}
  to{transform:translate3d(18px,12px,0) scale(1.02)}
}

.sigil-wrap{
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);
  width:min(760px,88vw);aspect-ratio:1/1;
  opacity:.50;
  filter:drop-shadow(0 0 40px rgba(217,168,78,.15));
}
.sigil-ring{transform-origin:center}
.sigil-ring.r1{animation:spin 80s linear infinite}
.sigil-ring.r2{animation:spin-rev 130s linear infinite}
.sigil-ring.r3{animation:spin 200s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}

.hero-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 50% 50%, transparent 40%, rgba(6,5,11,.7) 80%, var(--ink-0) 100%),
    linear-gradient(180deg, rgba(6,5,11,.5) 0%, transparent 20%, transparent 72%, rgba(6,5,11,.98) 100%);
}

.hero-inner{
  position:relative;z-index:2;
  text-align:center;padding:0 20px;width:100%;max-width:1020px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:16px;
  font-size:10px;letter-spacing:.55em;text-transform:uppercase;color:var(--p-2);
  margin-bottom:26px;
}
.eyebrow::before,.eyebrow::after{
  content:"";display:inline-block;width:42px;height:1px;
  background:linear-gradient(90deg,transparent,var(--p-3));
}
.eyebrow::after{background:linear-gradient(90deg,var(--p-3),transparent)}

.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(62px,13vw,180px);
  line-height:.9;letter-spacing:.03em;text-transform:uppercase;
  margin:0 0 24px;
}
.hero-title .w{
  display:inline-block;
  background:linear-gradient(175deg,#FFFCE8 0%,var(--p-0) 42%,#9C7A38 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 28px rgba(217,168,78,.18));
}
.hero-tag{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,2vw,22px);color:var(--p-1);
  letter-spacing:.08em;margin:0 auto 14px;
}
.hero-sub{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,2.2vw,24px);color:var(--p-1);
  max-width:60ch;margin:0 auto 38px;line-height:1.5;letter-spacing:.01em;
}
.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

.scroll-cue{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  z-index:2;color:var(--p-2);font-size:9px;letter-spacing:.5em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-line{
  width:1px;height:44px;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:lineGrow 2.6s ease-in-out infinite;
}
@keyframes lineGrow{
  0%{transform:scaleY(0);transform-origin:top;opacity:1}
  50%{transform:scaleY(1);transform-origin:top;opacity:1}
  51%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  position:relative;z-index:3;overflow:hidden;
  padding:20px 0;
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.marquee-track{
  display:flex;gap:60px;white-space:nowrap;width:max-content;
  animation:mq 45s linear infinite;
  font-family:var(--serif);font-style:italic;
  font-size:20px;color:var(--p-1);letter-spacing:.03em;
}
.marquee-track span{display:inline-flex;align-items:center;gap:60px}
.marquee-track span::after{content:"✦";color:var(--gold);font-style:normal;font-size:12px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   LIGHT SECTIONS
   ========================================================= */
.ls{
  background:var(--cr);
  color:var(--tx);
  position:relative;z-index:3;
}
.ls-alt{background:var(--cr-2)}

/* section chrome */
.s-pad{padding:100px 0}
.s-pad-sm{padding:70px 0}

.s-eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.s-no{
  font-family:var(--serif);font-style:italic;color:var(--am);
  font-size:15px;letter-spacing:.14em;
}
.s-label{
  font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--tx-3);
}
.s-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,5vw,62px);
  line-height:1.05;letter-spacing:.01em;color:var(--tx);margin-bottom:18px;
  overflow-wrap:anywhere;
}
.s-lead{
  font-size:17px;color:var(--tx-2);max-width:62ch;margin-bottom:52px;
  overflow-wrap:anywhere;
}
.s-head{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;
  margin-bottom:52px;
}

/* =========================================================
   PHOTO CARDS (services)
   ========================================================= */
.pc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;align-items:stretch;
}
.pc{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--bg,linear-gradient(180deg,#1B1430,#07050F));
  background-size:cover;background-position:center;
  transition:transform .3s ease,box-shadow .3s ease;
}
.pc:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(0,0,0,.35)}
.pc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88) 100%);
}
.pc-gradient{position:absolute;inset:0}
/* per-card atmospheric gradients (no photos yet) */
.pc.pc-tarot .pc-gradient{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(80,40,160,.55),transparent 60%),
    linear-gradient(180deg,rgba(60,30,120,.5),rgba(5,4,14,.8));
}
.pc.pc-ritual .pc-gradient{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(180,40,40,.45),transparent 60%),
    linear-gradient(180deg,rgba(120,20,20,.5),rgba(5,4,14,.85));
}
.pc.pc-reiki .pc-gradient{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(20,90,140,.55),transparent 60%),
    linear-gradient(180deg,rgba(10,60,100,.5),rgba(5,4,14,.8));
}
/* icon orb */
.pc-icon{
  position:absolute;top:22px;left:22px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;color:var(--am-3);
}
.pc-body{
  position:relative;z-index:1;padding:22px;
}
.pc-no{
  font-size:10px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(255,255,255,.52);margin-bottom:8px;
}
.pc-title{
  font-family:var(--serif);font-weight:500;font-size:24px;
  line-height:1.15;letter-spacing:.01em;color:#fff;margin-bottom:8px;
}
.pc-desc{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:16px;line-height:1.5}

/* =========================================================
   EDITORIAL (two-column)
   ========================================================= */
.editorial{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:start;
}
.ed-text{}
.ed-text .ed-body{
  font-size:16px;color:var(--tx-2);line-height:1.75;
  margin-bottom:28px;
}
.ed-text .ed-body p+p{margin-top:16px}
.ed-visual{
  display:flex;flex-direction:column;gap:18px;
}
.portrait{
  position:relative;
  border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:3/4;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(110,70,190,.35),transparent 55%),
    linear-gradient(180deg,var(--ink-2),var(--ink-0));
  border:1px solid var(--tx-line);
}
.portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}
.portrait-ph{
  font-family:var(--serif);font-style:italic;font-size:18px;
  color:rgba(28,24,16,.30);text-align:center;padding:20px;
}
.pull-quote{
  background:var(--cr-2);border-radius:var(--r-lg);padding:24px 28px;
  border-left:3px solid var(--am);
}
.pull-quote p{
  font-family:var(--serif);font-style:italic;
  font-size:18px;line-height:1.6;color:var(--tx);
}
.pull-quote cite{
  display:block;margin-top:10px;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tx-3);font-style:normal;
}

/* =========================================================
   STATS ROW
   ========================================================= */
.stats{
  display:flex;gap:0;border:1px solid var(--tx-line);border-radius:var(--r-lg);
  overflow:hidden;margin-top:32px;
}
.stat{
  flex:1;padding:20px 24px;text-align:center;
  border-right:1px solid var(--tx-line);
}
.stat:last-child{border-right:none}
.stat-n{
  font-family:var(--serif);font-size:38px;line-height:1;color:var(--am);letter-spacing:-.01em;
}
.stat-l{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx-3);margin-top:6px}

/* =========================================================
   TIMELINE (how it works)
   ========================================================= */
.timeline{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  position:relative;margin-top:52px;
}
.timeline::before{
  content:"";position:absolute;left:22px;right:22px;top:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--am) 20%,var(--am) 80%,transparent);
  opacity:.3;
}
.tl{position:relative;padding-top:48px}
.tl-dot{
  position:absolute;left:0;top:16px;
  width:14px;height:14px;border-radius:50%;
  background:var(--am);
  box-shadow:0 0 0 4px rgba(201,123,13,.18), 0 0 20px rgba(201,123,13,.4);
}
.tl-n{
  font-family:var(--serif);font-style:italic;color:var(--am);
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px;
}
.tl-title{
  font-family:var(--serif);font-weight:500;font-size:20px;
  letter-spacing:.01em;margin-bottom:6px;color:var(--tx);
}
.tl-desc{font-size:14px;color:var(--tx-2)}

/* =========================================================
   SHOP GRID
   ========================================================= */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prod{
  border:1px solid var(--tx-line);border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--cr);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.prod:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.10);border-color:var(--am)}
.prod-ph{
  aspect-ratio:4/5;
  background:linear-gradient(180deg,var(--cr-2),var(--cr-3));
  display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--tx-3);
  text-align:center;padding:16px;
  border-bottom:1px solid var(--tx-line);
}
.prod-ph.has-image{
  padding:10px;
  background:#f1f1f1;
}
.prod-ph.has-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
/* Квадрат 1:1 — как на shop.html (свечи, книги, таро) */
.prod-ph.has-image.prod-photo-2048{
  aspect-ratio:1/1;
  padding:0;
  background:var(--cr-2);
}
.prod-ph.has-image.prod-photo-2048 img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.prod-info{padding:14px}
.prod-title{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--tx);margin-bottom:4px}
.prod-price{font-size:12px;letter-spacing:.22em;color:var(--am);text-transform:uppercase}

/* =========================================================
   TRUST / REVIEWS / FAQ / MEDIA
   ========================================================= */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.trust-card{
  background:var(--cr-2);
  border:1px solid var(--tx-line);
  border-radius:var(--r-lg);
  padding:24px 20px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.trust-card:hover{
  transform:translateY(-3px);
  border-color:rgba(201,123,13,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.trust-card h3{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  color:var(--tx);
  margin-bottom:8px;
}
.trust-card p{
  font-size:14px;
  color:var(--tx-2);
  line-height:1.65;
}

.media-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}
.media-grid-youtube{
  grid-template-columns:minmax(0,1fr);
}
.media-ph{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px dashed rgba(28,24,16,.18);
  background:
    radial-gradient(110% 75% at 50% 0%,rgba(201,123,13,.18),transparent 55%),
    linear-gradient(180deg,var(--cr),var(--cr-2));
  min-height:240px;
  display:flex;
  align-items:flex-end;
  position:relative;
}
.media-youtube{
  aspect-ratio:16/9;
  min-height:0;
  border-style:solid;
  border-color:var(--tx-line);
  background:#111;
  display:block;
}
.media-youtube iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.media-real{
  border-style:solid;
  border-color:var(--tx-line);
  background:#111;
}
.media-real video,
.media-real img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.media-ph figcaption{
  width:100%;
  padding:14px 16px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tx-3);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);
  z-index:1;
}
.media-ph-video{min-height:280px}
.media-ph-photo{
  background:
    radial-gradient(90% 70% at 70% 10%,rgba(110,70,190,.18),transparent 60%),
    linear-gradient(180deg,var(--cr),var(--cr-2));
}
.media-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:66px;
  height:66px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--am);
  border:1px solid rgba(201,123,13,.42);
  background:rgba(255,255,255,.7);
  box-shadow:0 12px 28px rgba(0,0,0,.11);
  animation:mediaPulse 2.8s ease-in-out infinite;
}
@keyframes mediaPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.04)}
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.review-card{
  margin:0;
  background:var(--cr);
  border:1px solid var(--tx-line);
  border-radius:var(--r-lg);
  padding:22px 20px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.review-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(0,0,0,.08);
}
.review-card p{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  line-height:1.45;
  color:var(--tx);
}
.review-card cite{
  display:block;
  margin-top:12px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tx-3);
  font-style:normal;
}

.faq{
  margin-top:20px;
  border:1px solid var(--tx-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.faq-item + .faq-item{border-top:1px solid var(--tx-line)}
.faq-q{
  width:100%;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  text-align:left;
  color:var(--tx);
}
.faq-q span:first-child{
  font-family:var(--serif);
  font-size:24px;
  line-height:1.2;
}
.faq-icon{
  font-size:22px;
  color:var(--am);
  transition:transform .25s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease;
}
.faq-item.open .faq-a{max-height:220px}
.faq-a p{
  padding:0 20px 18px;
  font-size:15px;
  color:var(--tx-2);
}

/* =========================================================
   CONTACT STRIP (dark)
   ========================================================= */
.contact-strip{
  background:
    radial-gradient(600px 280px at 10% 50%,rgba(201,123,13,.14),transparent 60%),
    var(--ink-2);
  border-radius:var(--r-xl);
  padding:40px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  border:1px solid var(--line-2);
}
.cs-title{
  font-family:var(--serif);font-weight:500;font-size:30px;
  color:var(--p-0);margin-bottom:10px;letter-spacing:.01em;
}
.cs-desc{color:var(--p-1);margin-bottom:18px}
.cs-contacts{display:flex;flex-wrap:wrap;gap:10px}
.cs-item{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--p-1);
  transition:border-color .2s ease,color .2s ease;
}
.cs-item:hover{border-color:var(--gold);color:var(--p-0)}
.cs-item b{color:var(--p-0)}

/* =========================================================
   DARK QUOTE
   ========================================================= */
.dark-quote{
  background:var(--ink-1);
  position:relative;z-index:3;
  padding:80px 0;
  overflow:hidden;
}
.dark-quote::before{
  content:"";position:absolute;left:-10%;right:-10%;top:-50%;bottom:-50%;
  background:radial-gradient(700px 500px at 50% 50%,rgba(201,123,13,.12),transparent 65%);
  pointer-events:none;
}
.dq-text{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(26px,4vw,50px);line-height:1.3;
  color:var(--p-0);max-width:28ch;
}
.dq-text::before{content:"\201C";font-size:1.4em;color:var(--gold);margin-right:.05em}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--ink-0);
  border-top:1px solid var(--line);
  padding:60px 0 130px;
  position:relative;z-index:3;
}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:36px;margin-bottom:48px;width:100%;
}
.foot{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.foot h5{
  font-family:var(--serif);font-weight:500;font-size:17px;
  color:var(--p-0);margin-bottom:14px;letter-spacing:.02em;
}
.foot a,.foot p{
  font-size:14px;color:var(--p-2);display:block;margin-bottom:8px;
  transition:color .2s ease;
}
.foot a:hover{color:var(--p-0)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--p-3);
}

/* =========================================================
   MOBILE BOTTOM BAR
   ========================================================= */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:none;
  padding:10px 14px;
  background:rgba(6,5,11,.92);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.bb-inner{
  display:grid;grid-template-columns:1.5fr .85fr .85fr;gap:8px;
  max-width:var(--max);margin:0 auto;
}
.bb-inner a{
  text-align:center;padding:13px 8px;border-radius:14px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--p-0);background:rgba(20,16,40,.6);
}
.bb-inner a.bb-primary{
  background:var(--am);border-color:transparent;color:#fff;
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.r{
  opacity:0;transform:translateY(16px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1);
}
.r.in{opacity:1;transform:none}
.r-left{
  opacity:0;transform:translateX(-20px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1);
}
.r-left.in{opacity:1;transform:none}
.r-right{
  opacity:0;transform:translateX(20px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1);
}
.r-right.in{opacity:1;transform:none}

.ws>.w{
  display:inline-block;
  opacity:0;transform:translateY(.35em);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
}
.ws.in>.w{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .pc-grid{grid-template-columns:1fr 1fr}
  .shop-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .media-grid{grid-template-columns:1fr 1fr}
  .media-grid-youtube{grid-template-columns:minmax(0,1fr)}
  .timeline::before{display:none}
  .editorial{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr}
}
@media (max-width:768px){
  .menu,.dd{display:none}
  .nav-wrap{grid-template-columns:minmax(0,1fr) auto;padding:0 18px}
  .container{padding:0 18px}
  .btn-book{display:none}
  .brand-sub{display:none}
  .brand-name{font-size:16px;letter-spacing:.12em}
  .nav-actions{gap:6px}
  .btn-tg{width:34px;height:34px}
  .s-pad{padding:64px 0}
  .pc-grid{grid-template-columns:1fr}
  .pc{aspect-ratio:4/3}
  .shop-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .bottom-bar{display:block}
  .footer{padding-bottom:120px}
  .timeline{grid-template-columns:1fr}
  .contact-strip{padding:24px}
  .stats{flex-wrap:wrap}
  .stat{flex-basis:45%}
  .s-head{grid-template-columns:1fr}
  .trust-grid,
  .reviews-grid,
  .media-grid{grid-template-columns:1fr}
  .faq-q span:first-child{font-size:20px}
  .review-card p{font-size:18px}
  .hero-title{font-size:clamp(44px,14vw,72px)}
  .hero-sub{font-size:16px}
  .eyebrow{
    letter-spacing:.28em;
    gap:8px;
    white-space:normal;
    justify-content:center;
  }
  .eyebrow::before,.eyebrow::after{width:20px}
  .foot-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    letter-spacing:.14em;
  }
}
@media (max-width:560px){
  .container{padding:0 14px}
  .nav-wrap{padding:0 14px}
  .shop-grid{grid-template-columns:1fr}
  .stat{flex-basis:100%}
  .contact-strip{padding:20px}
  .cs-item{letter-spacing:.12em}
}

/* Touch devices fallback:
   Some mobile browsers can render pages in "desktop width".
   This forces mobile layout on coarse pointers as well. */
@media (hover:none) and (pointer:coarse){
  .menu,.dd{display:none}
  .burger{display:flex!important}
  .btn-book{display:none}
  .brand-sub{display:none}
  .brand-name{font-size:16px;letter-spacing:.12em}
  .nav-wrap{grid-template-columns:minmax(0,1fr) auto;padding:0 14px}
  .container{padding:0 14px}
  .s-pad{padding:64px 0}
  .pc-grid{grid-template-columns:1fr}
  .pc{aspect-ratio:4/3}
  .shop-grid{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr}
  .timeline::before{display:none}
  .editorial{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .s-head{grid-template-columns:1fr}
  .stats{flex-wrap:wrap}
  .stat{flex-basis:45%}
  .trust-grid,.reviews-grid,.media-grid,.foot-grid{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr;padding:24px}
  .bottom-bar{display:block}
  .footer{padding-bottom:120px}
  .hero-title{font-size:clamp(44px,14vw,72px)}
  .hero-sub{font-size:16px}
}

/* Hard fallback for phones when browser forces desktop viewport mode */
html.force-mobile .menu,
html.force-mobile .dd{display:none}
html.force-mobile .burger{display:flex!important}
html.force-mobile .btn-book{display:none}
html.force-mobile .brand-sub{display:none}
html.force-mobile .brand-name{font-size:16px;letter-spacing:.12em}
html.force-mobile .nav-wrap{grid-template-columns:minmax(0,1fr) auto;padding:0 14px}
html.force-mobile .container{padding:0 14px}
html.force-mobile .s-pad{padding:64px 0}
html.force-mobile .pc-grid{grid-template-columns:1fr}
html.force-mobile .pc{aspect-ratio:4/3}
html.force-mobile .shop-grid{grid-template-columns:1fr}
html.force-mobile .timeline{grid-template-columns:1fr}
html.force-mobile .timeline::before{display:none}
html.force-mobile .editorial{grid-template-columns:1fr}
html.force-mobile .grid-2{grid-template-columns:1fr}
html.force-mobile .s-head{grid-template-columns:1fr}
html.force-mobile .stats{flex-wrap:wrap}
html.force-mobile .stat{flex-basis:100%}
html.force-mobile .trust-grid,
html.force-mobile .reviews-grid,
html.force-mobile .media-grid,
html.force-mobile .foot-grid{grid-template-columns:1fr}
html.force-mobile .contact-strip{grid-template-columns:1fr;padding:24px}
html.force-mobile .bottom-bar{display:block}
html.force-mobile .footer{padding-bottom:120px}
html.force-mobile .hero-title{font-size:clamp(44px,14vw,72px)}
html.force-mobile .hero-sub{font-size:16px}
html.force-mobile,
html.force-mobile body{
  width:var(--mobile-vw,100%) !important;
  max-width:var(--mobile-vw,100%) !important;
  overflow-x:hidden !important;
}
html.force-mobile main,
html.force-mobile section,
html.force-mobile .ls,
html.force-mobile .hero,
html.force-mobile .dark-quote,
html.force-mobile .footer{
  width:var(--mobile-vw,100%) !important;
  max-width:var(--mobile-vw,100%) !important;
}
html.force-mobile .nav-wrap{
  grid-template-columns:minmax(0,1fr) auto !important;
  min-height:58px;
}
html.force-mobile .brand{min-width:0}
html.force-mobile .brand-name{
  font-size:15px !important;
  letter-spacing:.1em !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html.force-mobile .nav-actions{gap:6px}
html.force-mobile .btn-tg{display:none}
html.force-mobile .pc,
html.force-mobile .trust-card,
html.force-mobile .review-card,
html.force-mobile .prod{
  border-radius:16px;
}
html.force-mobile .pc-body{padding:18px}
html.force-mobile .pc-title{font-size:26px}
html.force-mobile .pc-desc{font-size:15px;line-height:1.55}
html.force-mobile .prod-title{font-size:19px}
html.force-mobile .prod-price{font-size:13px;letter-spacing:.16em}
html.force-mobile .trust-card h3{font-size:26px}
html.force-mobile .trust-card p{font-size:16px}
html.force-mobile .review-card p{font-size:20px}
html.force-mobile .faq-q span:first-child{font-size:22px}

/* =========================================================
   SERVICE PAGE — cinematic hero (dialogictarot-style)
   ========================================================= */
.sh{
  position:relative;
  min-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:100%;
  padding:clamp(100px,14vw,160px) 0 clamp(56px,8vw,80px);
  overflow:hidden;
  background:var(--ink-0);
  isolation:isolate;
}
.sh-visual{
  position:absolute;
  inset:0;
  z-index:0;
}
.sh-bg-img{
  position:absolute;
  inset:-8%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#0a0813;
  animation:shKen 32s ease-in-out infinite alternate;
  will-change:transform;
}
/* Дополнительный «свет» поверх — работает и когда image не загрузилась */
.sh-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,168,78,.18), transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(80,30,140,.35), transparent 65%);
  mix-blend-mode:screen;
}
@keyframes shKen{
  from{transform:scale(1.06)}
  to{transform:scale(1.14)}
}
.sh .sh-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
  pointer-events:none;
}
.sh-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(6,5,11,.72) 0%,rgba(6,5,11,.45) 38%,rgba(6,5,11,.92) 100%),
    radial-gradient(70% 50% at 50% 50%,transparent 0%,rgba(6,5,11,.55) 100%);
  z-index:1;
}
.sh-noise{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.12;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
}
.sh-inner{
  position:relative;
  z-index:3;
  text-align:center;
  box-sizing:border-box;
  width:min(100%,820px);
  max-width:820px;
  flex:0 1 auto;
  margin-inline:auto;
  padding:0 24px;
}
.sh-eyebrow{
  font-size:10px;
  letter-spacing:.48em;
  text-transform:uppercase;
  color:rgba(237,228,204,.55);
  margin-bottom:18px;
}
.sh-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(36px,7vw,72px);
  line-height:1.05;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--p-0);
  margin:0 0 16px;
}
.sh-tag{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px,2vw,19px);
  color:var(--p-1);
  margin:0 0 22px;
  letter-spacing:.06em;
}
.sh-lead{
  font-size:17px;
  line-height:1.65;
  color:rgba(237,228,204,.82);
  margin:0 auto 36px;
  max-width:52ch;
}
.sh-cta{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Липкая плашка «Запись» внизу экрана на странице услуги */
.svc-float{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:85;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 12px 18px;
  border-radius:999px;
  background:rgba(14,11,23,.88);
  backdrop-filter:blur(12px);
  border:1px solid rgba(237,228,204,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  animation:svcFloatIn .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes svcFloatIn{
  from{opacity:0;transform:translate(-50%,16px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.svc-float span{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--p-2);
  display:none;
}
@media (min-width:520px){
  .svc-float span{display:inline}
}
@media (max-width:768px){
  .svc-float{bottom:92px;padding:10px 12px}
  .svc-float .btn-gold{padding:10px 16px;font-size:11px}
}

.svc-prose{
  font-size:17px;
  line-height:1.75;
  color:var(--tx-2);
}
.svc-prose p+p{margin-top:1em}
.svc-prose a{
  color:var(--am);
  text-decoration:underline;
  text-underline-offset:3px;
}
.svc-prose a:hover{color:var(--am-2)}
.svc-list{
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.svc-list li{
  padding:12px 0 12px 28px;
  border-bottom:1px solid var(--tx-line);
  position:relative;
  font-size:16px;
  color:var(--tx-2);
}
.svc-list li::before{
  content:"✦";
  position:absolute;
  left:0;
  color:var(--am);
  font-size:12px;
  top:14px;
}
.svc-price-tag{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-top:24px;
  padding:14px 20px;
  border-radius:var(--r-lg);
  border:1px solid var(--tx-line);
  background:var(--cr-2);
}
.svc-price-tag strong{
  font-family:var(--serif);
  font-size:28px;
  color:var(--tx);
}

.pc-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
}
.pc-price-txt{
  font-family:var(--serif);
  font-size:22px;
  color:#fff;
}
.pc .btn-pill{
  pointer-events:none;
}

/* =========================================================
   SERVICE PAGE — enhanced layout (process / pricing / CTA)
   ========================================================= */

/* make hero full viewport */
.sh{ min-height:100vh; min-height:100svh; }

/* ── Service pages: clear fixed header, hero never fights nav ───────── */
body.page-service .header{ z-index:200; }
body.page-service main{
  position:relative;
  z-index:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  /* Жесткий отступ под fixed header: предотвращает наезд hero-текста на шапку */
  padding-top:clamp(74px,7.5vw,102px);
}
/* Hero текст виден сразу — без «пустого» первого кадра из .r */
body.page-service .sh .r{
  opacity:1;
  transform:none;
}
body.page-service .sh{
  padding-top:clamp(48px,6vw,86px);
  padding-bottom:clamp(3.5rem,10vw,6.5rem);
  min-height:calc(100svh - clamp(74px,7.5vw,102px));
}
/* Убираем дубль «Таро» у логотипа | строка «Услуга · Tarot» в hero */
body.page-service .brand-sub{ display:none; }

/* Дополнительная страховка: контент hero всегда ниже шапки */
body.page-service .sh-inner{
  margin-top:clamp(8px,1.4vw,18px);
}

/* scroll hint arrow at hero bottom */
.sh-scroll{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.sh-scroll-line{
  width:1px;
  height:38px;
  background:linear-gradient(180deg,rgba(237,228,204,0) 0%,rgba(237,228,204,.5) 100%);
  animation:scrollLinePulse 2.2s 1.2s ease-in-out infinite;
}
@keyframes scrollLinePulse{
  0%,100%{opacity:.3;transform:scaleY(1)}
  50%{opacity:.8;transform:scaleY(1.08)}
}
.sh-scroll-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(237,228,204,.5);
  animation:scrollDotDrop 2.2s 1.2s ease-in-out infinite;
}
@keyframes scrollDotDrop{
  0%{opacity:0;transform:translateY(-10px)}
  40%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(8px)}
}

/* ── intro strip (serif statement) ──────────────────────── */
.svc-intro{
  padding:clamp(80px,11vw,118px) 0 clamp(72px,10vw,108px);
  background:var(--cr);
  text-align:center;
}
.svc-intro-text{
  font-family:var(--serif);
  font-size:clamp(20px,3vw,34px);
  font-style:italic;
  line-height:1.55;
  color:var(--tx);
  max-width:760px;
  margin:0 auto;
  padding:0 24px;
}
.svc-intro-text::before{ content:'\201C'; color:var(--am); opacity:.65; }
.svc-intro-text::after{ content:'\201D'; color:var(--am); opacity:.65; }
.svc-intro-author{
  display:block;
  margin-top:20px;
  font-family:var(--sans);
  font-style:normal;
  font-size:11px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--tx-3);
}

/* ── dark process / steps section ───────────────────────── */
.svc-steps{
  padding:clamp(80px,11vw,120px) 0;
  background:var(--ink-0);
  position:relative;
  overflow:hidden;
}
.svc-steps::before{
  content:"";
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,168,78,.07) 0%,transparent 70%);
  top:-200px;right:-200px;
  pointer-events:none;
}
.svc-steps-hd{
  text-align:center;
  margin-bottom:clamp(44px,6vw,68px);
}
.svc-steps-hd .s-eyebrow .s-label{ color:rgba(237,228,204,.4); }
.svc-steps-hd .s-title{ color:var(--p-0); }

.svc-steps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(237,228,204,.07);
}
.svc-step{
  background:var(--ink-0);
  padding:36px 26px 32px 30px;
  position:relative;
  transition:background .35s, transform .35s;
  border-left:3px solid rgba(217,168,78,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.svc-step:hover{ background:var(--ink-1); transform:translateY(-2px); }
.svc-step-num{
  font-family:var(--serif);
  font-size:72px;
  font-weight:500;
  line-height:.9;
  color:var(--am);
  opacity:.2;
  display:block;
  margin-bottom:18px;
  transition:opacity .35s;
}
.svc-step:hover .svc-step-num{ opacity:.32; }
.svc-step-title{
  font-family:var(--serif);
  font-size:18px;
  color:var(--p-0);
  margin:0 0 8px;
}
.svc-step-desc{
  font-size:14px;
  line-height:1.68;
  color:rgba(237,228,204,.55);
  margin:0;
}

/* ── features bar (icon + label row) ────────────────────── */
.svc-features{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:clamp(40px,6vw,64px);
}
.svc-feat{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(237,228,204,.05);
  border:1px solid rgba(237,228,204,.1);
  font-size:13px;
  color:rgba(237,228,204,.6);
  letter-spacing:.04em;
}
.svc-feat svg{ color:var(--am); flex-shrink:0; }

/* ── pricing section ─────────────────────────────────────── */
.svc-pricing{
  padding:clamp(80px,11vw,120px) 0;
  background:var(--cr-2);
  color:var(--tx);
}
.svc-pricing .s-title{color:var(--tx)}
.svc-pricing .s-lead{color:var(--tx-2)}
.svc-pricing .s-eyebrow .s-label{color:var(--tx-3)}
.svc-pricing-hd{
  text-align:center;
  margin-bottom:clamp(44px,6vw,60px);
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.svc-price-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  max-width:960px;
  margin:0 auto;
}
.spc{
  background:var(--cr);
  border:1px solid var(--tx-line);
  border-radius:var(--r-lg);
  padding:28px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:box-shadow .3s,transform .3s;
}
.spc:hover{
  box-shadow:0 14px 44px rgba(0,0,0,.09);
  transform:translateY(-3px);
}
.spc.featured{
  border-color:var(--am);
  background:linear-gradient(150deg,#fffef9 0%,#fef7e0 100%);
}
.spc-badge{
  display:inline-block;
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--am);
  border:1px solid var(--am);
  border-radius:999px;
  padding:3px 10px;
  align-self:flex-start;
  margin-bottom:4px;
}
.spc-label{
  font-size:10px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.spc-price{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,44px);
  line-height:1;
  color:var(--tx);
}
.spc-price small{
  font-size:.44em;
  font-family:var(--sans);
  color:var(--tx-3);
  letter-spacing:.02em;
}
.spc-desc{
  font-size:14px;
  line-height:1.62;
  color:var(--tx-2);
  flex:1;
}
.spc .btn{
  margin-top:6px;
  width:100%;
  text-align:center;
  justify-content:center;
}

/* ── CTA band ─────────────────────────────────────────────── */
.svc-cta-band{
  padding:clamp(80px,12vw,130px) 0;
  background:var(--ink-0);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.svc-cta-band::before{
  content:"✦";
  position:absolute;
  font-size:500px;
  line-height:1;
  color:rgba(217,168,78,.03);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  letter-spacing:-.02em;
}
.svc-cta-eyebrow{
  font-size:10px;
  letter-spacing:.48em;
  text-transform:uppercase;
  color:rgba(237,228,204,.3);
  margin-bottom:14px;
}
.svc-cta-title{
  font-family:var(--serif);
  font-size:clamp(34px,5.5vw,62px);
  color:var(--p-0);
  line-height:1.08;
  margin:0 0 14px;
}
.svc-cta-sub{
  font-size:16px;
  color:rgba(237,228,204,.5);
  max-width:44ch;
  margin:0 auto 38px;
  line-height:1.6;
}
.svc-cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.svc-contacts-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(237,228,204,.35);
}
.svc-contacts-row a{
  color:rgba(237,228,204,.5);
  text-decoration:none;
  transition:color .25s;
}
.svc-contacts-row a:hover{ color:var(--am); }

/* ── video block ──────────────────────────────────────────── */
.svc-video-wrap{
  position:relative;
  width:100%;
  max-width:860px;
  margin:clamp(44px,7vw,72px) auto 0;
  aspect-ratio:16/9;
  background:var(--ink-1);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(237,228,204,.08);
  display:flex;align-items:center;justify-content:center;
}
.svc-video-wrap video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.svc-video-placeholder{
  position:absolute;
  inset:10px;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  pointer-events:none;
  padding:28px 22px;
  border-radius:calc(var(--r-lg) - 6px);
  border:1px dashed rgba(237,228,204,.16);
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(217,168,78,.14), transparent 62%),
    linear-gradient(165deg, rgba(19,16,43,.55), rgba(6,5,11,.92));
}
.svc-video-wrap.has-video .svc-video-placeholder{ display:none; }
.svc-video-wrap.is-missing video{ display:none; }
.svc-video-wrap.is-missing .svc-video-placeholder{ display:flex; }
.svc-video-play{
  width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(237,228,204,.22);
  display:flex;align-items:center;justify-content:center;
  color:rgba(237,228,204,.5);
  background:rgba(6,5,11,.4);
  box-shadow:0 0 0 1px rgba(217,168,78,.12) inset,0 12px 40px rgba(0,0,0,.35);
  animation:svcPlayPulse 3.2s ease-in-out infinite;
}
@keyframes svcPlayPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(217,168,78,.12) inset,0 12px 40px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 1px rgba(217,168,78,.35) inset,0 16px 44px rgba(217,168,78,.08)}
}
.svc-video-caption{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(237,228,204,.42);
  max-width:34ch;
  line-height:1.65;
}
.svc-video-figure{
  width:100%;
  max-width:860px;
  margin:clamp(44px,7vw,72px) auto 0;
}
.svc-video-figure .svc-video-wrap{margin:0}
.svc-video-figcaption{
  margin-top:14px;
  text-align:center;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(237,228,204,.48);
  line-height:1.6;
}

/* ── compact 21:9 service media banner ───────────────────── */
body.page-service .service-banner{
  background:var(--cr) !important;
}
body.page-service .media-219{
  width:100%;
  max-width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.16);
}
body.page-service .media-219::after{
  background:
    linear-gradient(180deg,rgba(6,5,11,.38),rgba(6,5,11,.62)),
    radial-gradient(70% 75% at 50% 45%,rgba(6,5,11,.18),rgba(6,5,11,.74)) !important;
}
body.page-service .media-overlay-center{
  inset:0 !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:none !important;
  min-width:0;
  text-align:center;
  padding:clamp(24px,5vw,56px) !important;
  overflow:hidden;
}
body.page-service .media-title,
body.page-service .media-lead,
body.page-service .media-kicker{
  max-width:100%;
  overflow-wrap:anywhere;
}
body.page-service .media-overlay-center .media-lead{
  margin-inline:auto;
}
.media-cta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
  width:100%;
  max-width:100%;
  min-width:0;
}
.media-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.media-meta span{
  padding:7px 12px;
  border:1px solid rgba(237,228,204,.24);
  border-radius:999px;
  background:rgba(6,5,11,.26);
  color:rgba(237,228,204,.74);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-details{
  background:var(--cr);
  color:var(--tx);
}
.service-details-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.service-details-card{
  border:1px solid var(--tx-line);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.32);
  padding:clamp(22px,3vw,32px);
}
.service-details-card h3{
  font-family:var(--serif);
  font-size:clamp(26px,3vw,36px);
  font-weight:500;
  line-height:1.1;
  margin:0 0 14px;
  color:var(--tx);
}
.service-details-card h3.h-sub{
  margin-top:28px;
  font-size:clamp(22px,2.4vw,28px);
}
.service-details-card h3.h-sub + .svc-list{margin-top:12px}
.service-note{
  margin-top:20px;
  color:var(--tx-3);
  font-size:13px;
  line-height:1.65;
}
@media(max-width:820px){
  .service-details-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  body.page-service .service-banner{
    padding:0 0 28px !important;
  }
  body.page-service .media-219{
    border-radius:0;
    border-left:0;
    border-right:0;
    min-height:clamp(360px,82svh,560px) !important;
    aspect-ratio:auto !important;
  }
  body.page-service .media-overlay-center{
    padding:84px 18px 42px !important;
  }
  body.page-service .media-title{
    font-size:clamp(30px,10vw,44px) !important;
    line-height:1.05;
  }
  body.page-service .media-lead{
    font-size:15px;
    line-height:1.55;
  }
  .media-cta .btn{
    max-width:100%;
    min-width:0;
    white-space:normal;
    text-align:center;
    line-height:1.35;
  }
  .svc-float{
    display:none;
  }
}
@media(max-width:520px){
  .media-cta .btn{width:100%;justify-content:center}
  .media-meta{display:none}
}

/* responsive tweaks for new blocks */
@media(max-width:768px){
  .svc-steps-grid{ grid-template-columns:1fr; }
  .svc-price-cards{ grid-template-columns:1fr; }
  .svc-features{ gap:8px; }
  .sh-scroll{ display:none; }
}
@media(max-width:520px){
  .svc-feat{ font-size:12px; padding:8px 14px; }
  /* Avoid double horizontal padding (container + inner blocks) on very small screens */
  .sh-inner{ padding-inline:0; }
  .svc-intro-text{ padding-inline:0; }
}

/* ── reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =========================================================
   RESPONSIVE SYSTEM V2 (desktop + mobile)
   ========================================================= */
main{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
section,.ls,.dark-quote,.footer,.marquee{
  width:100%;
  max-width:100%;
}

/* Desktop and laptop defaults */
@media (min-width:1200px){
  .pc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Tablets / small laptops */
@media (max-width:1199px){
  .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust-grid,.reviews-grid,.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* один плеер YouTube — всегда одна колонка (иначе на планшете «пустая» вторая ячейка) */
  .media-grid.media-grid-youtube{grid-template-columns:minmax(0,1fr)}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline::before{display:none}
  .s-title{font-size:clamp(30px,4.2vw,54px)}
}

/* Tablet portrait and phones */
@media (max-width:900px){
  .menu,.dd{display:none}
  .burger{display:flex!important}
  .btn-book{display:none}
  .brand-sub{display:none}
  .brand-name{font-size:16px;letter-spacing:.12em}
  .nav-wrap{grid-template-columns:minmax(0,1fr) auto;padding:0 14px}
  .container{padding:0 14px}
  .s-pad{padding:64px 0}
  .s-pad-sm{padding:54px 0}
  .pc-grid,
  .shop-grid,
  .timeline,
  .trust-grid,
  .reviews-grid,
  .media-grid,
  .foot-grid{grid-template-columns:1fr}
  .pc{aspect-ratio:4/3}
  .editorial,.grid-2,.s-head,.contact-strip{grid-template-columns:1fr}
  .contact-strip{padding:22px}
  .stats{flex-wrap:wrap}
  .stat{flex-basis:100%}
  .bottom-bar{display:block}
  .footer{padding-bottom:120px}
  .hero-title{font-size:clamp(42px,14vw,70px)}
  .hero-sub{font-size:16px;line-height:1.55}
  .eyebrow{letter-spacing:.22em;gap:8px}
  .eyebrow::before,.eyebrow::after{width:18px}
  .faq-q span:first-child{font-size:20px}
  .review-card p{font-size:18px}
  .foot-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    letter-spacing:.14em;
  }
}

@media (max-width:560px){
  .container{padding:0 12px}
  .nav-wrap{padding:0 12px}
  .cs-item{letter-spacing:.11em}
}

/* Real-phone fallback:
   works even when browser reports desktop layout viewport width. */
@media screen and (max-device-width:1024px){
  .menu,.dd{display:none !important}
  .burger{display:flex !important}
  .btn-book{display:none !important}
  .btn-tg{display:none !important}
  .brand-sub{display:none !important}
  .brand-name{
    font-size:15px !important;
    letter-spacing:.1em !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-wrap{
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:0 12px !important;
    min-height:58px;
  }
  .container{padding:0 12px !important}
  .s-pad{padding:58px 0 !important}
  .s-pad-sm{padding:48px 0 !important}

  .editorial,
  .grid-2,
  .s-head,
  .contact-strip,
  .pc-grid,
  .shop-grid,
  .timeline,
  .trust-grid,
  .reviews-grid,
  .media-grid,
  .foot-grid{
    grid-template-columns:1fr !important;
  }
  .timeline::before{display:none !important}
  .stats{flex-wrap:wrap !important}
  .stat{flex-basis:100% !important}
  .contact-strip{padding:20px !important}
  .bottom-bar{display:block !important}
  .footer{padding-bottom:120px !important}

  .hero-title{font-size:clamp(40px,13vw,64px) !important}
  .hero-sub{font-size:16px !important;line-height:1.55 !important}
  .eyebrow{letter-spacing:.2em !important;gap:8px !important}
  .eyebrow::before,.eyebrow::after{width:16px !important}

  .pc{aspect-ratio:4/3 !important;border-radius:16px !important}
  .pc-body{padding:18px !important}
  .pc-title{font-size:26px !important}
  .pc-desc{font-size:15px !important;line-height:1.55 !important}
  .prod{border-radius:16px !important}
  .prod-title{font-size:19px !important}
  .prod-price{font-size:13px !important;letter-spacing:.16em !important}
  .trust-card h3{font-size:26px !important}
  .trust-card p{font-size:16px !important}
  .review-card p{font-size:20px !important}
}