/* ==========================================================================
   Marina Tikhova — tarot landing page.
   Pure CSS: no frameworks, no libraries. All ambient motion lives here;
   script.js only handles scroll fade-ups and the flip-card tap toggle.
   Palette is strict: warm black bg, cream text, muted tan, velvet red
   (surfaces/accents only), gold (light and ornament only).
   ========================================================================== */

/* --- Reset & design tokens ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0D0A08;
  --surface: #161010;
  --cream: #F2E8D5;
  --muted: #A08E76;
  --red: #8E1E1E;
  --gold: #E8A93D;
  --gold-line: rgba(232, 169, 61, .45);   /* thin ornamental borders */
  --gold-deco: rgba(232, 169, 61, .8);    /* corner flourishes */
  --gold-faint: rgba(232, 169, 61, .18);  /* hairlines */
  --cream-soft: rgba(242, 232, 213, .88);
  /* Cinzel has no Cyrillic subset on Google Fonts, so Cormorant (full
     Cyrillic, classical display serif) carries the Russian headings. */
  --font-display: 'Cinzel', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --header-h: 72px;
  color-scheme: dark;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  position: relative;
  z-index: 0;   /* stacking context: negative-z atmosphere layers paint above
                   the body background but below every piece of content */
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain: fixed noise veil (inline SVG feTurbulence, no asset file).
   Negative z keeps it above the page/section backgrounds but below all
   content; static by design — no animated filter anywhere. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  opacity: .045;
}
/* Star sky: ~90 inline-SVG sparkles generated by script.js into ONE
   absolutely-positioned layer that spans the full document height (body is
   the relative wrapper), so stars SCROLL WITH THE PAGE — never fixed.
   z-index -1: above page background + grain, below all content. */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.star {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: var(--o, .4);
}
/* Twinkle: slow opacity oscillation around each star's own base alpha.
   JS assigns 3-6s durations with random negative delays — never in sync. */
@keyframes starTwinkle {
  0%, 100% { opacity: var(--o); }
  50% { opacity: calc(var(--o) * .3); }
}

img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(142, 30, 30, .8); color: var(--cream); }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Layout helpers ------------------------------------------------------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section { position: relative; padding: 88px 0; }
section[id] { scroll-margin-top: 96px; }

/* --- Per-section atmosphere: ghost symbols only (no radial glows) -----------
   Wrapper clips its ghosts at the section (= viewport) edge and sits at
   z-index -1: above page backgrounds, below every piece of content. The page
   background stays ONE uninterrupted black across all section boundaries.
   Everything here is static — no animated blur or filter on huge layers. */
.sec-atmo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.sec-ghost { position: absolute; opacity: .08; pointer-events: none; }
/* Outlined Roman numerals I·II·III (~260px each) stacked at the right edge,
   ~85% of the glyph column inside the viewport */
.sec-ghost--nums { top: 50%; right: -50px; width: 330px; transform: translateY(-50%); }
/* Row of five outlined moon phases, ~140px tall, along the left edge (~88% in) */
.sec-ghost--moons { top: 18%; left: -80px; width: 660px; height: 140px; }
/* SECOND identical moon row on the right, offset ~37% of section height lower
   (18% → 55%); same stroke/size/opacity, ~94% inside the viewport */
.sec-ghost--moons-r { top: 55%; right: -40px; width: 660px; height: 140px; }
/* Large outlined quill (~450px long, angled 30deg, gold stroke) on the left
   of certificates, vertically centred; the laurel seal on the right stays */
.sec-ghost--quill { left: -30px; top: 54%; width: 200px; height: 450px; transform: translateY(-50%) rotate(30deg); }
/* Outlined laurel seal ~500px behind the certificates (~84% in) */
.sec-ghost--seal { right: -80px; bottom: -80px; width: 500px; height: 500px; }

/* Fade-up on scroll. Initial hidden state only applies when JS is on,
   so the page stays readable if script.js never runs. */
.js .fade {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.js .fade.is-visible { opacity: 1; transform: none; }

/* --- Typography ----------------------------------------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cream);
}
.section-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 1px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}
.section-title--center { text-align: center; }
.section-title--center::after {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Buttons: radius 0-2px, mono caps, gold glow on hover ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: box-shadow .35s ease, border-color .35s ease, color .35s ease, background-color .35s ease;
}
.btn--primary { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn--ghost { background: transparent; border-color: var(--gold-line); color: var(--cream); }
.btn--sm { padding: 11px 20px; font-size: 10.5px; letter-spacing: .14em; }
.btn--tel { flex-direction: column; gap: 5px; }
.btn__sub { font-size: 10px; font-weight: 400; letter-spacing: .16em; color: rgba(242, 232, 213, .72); }
@media (hover: hover) {
  .btn--primary:hover { border-color: rgba(232, 169, 61, .65); box-shadow: 0 0 28px rgba(232, 169, 61, .28); }
  .btn--ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 28px rgba(232, 169, 61, .2); }
}

/* --- Header ---------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 10, 8, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-faint);
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Monogram: pure CSS — thin gold ring with an inner hairline ring */
.monogram {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 169, 61, .75);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--gold);
  text-decoration: none;
}
.monogram::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold-faint);
  border-radius: 50%;
}
.nav { display: flex; align-items: center; gap: 14px; }
.nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-soft);
  padding: 6px 2px;
  transition: color .3s ease;
}
.nav a:hover, .nav a:active { color: var(--gold); }
.nav__dot { color: var(--muted); font-size: 12px; user-select: none; }
/* Burger toggle: desktop never shows it; the <=768px block turns it on */
.nav-toggle { display: none; }
.nav-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
/* Six nav links: tighten tracking on narrow tablets so the row never wraps */
@media (max-width: 899px) {
  .nav { gap: 8px; }
  .nav a { font-size: 9.5px; letter-spacing: .1em; padding: 6px 1px; }
  .header__inner { gap: 14px; }
  .btn--sm { padding: 9px 14px; font-size: 10px; }
}
/* Five nav items: tighten tracking below 1024px so the row never overflows */
@media (max-width: 1023px) {
  .nav { gap: 10px; }
  .nav a { font-size: 10.5px; letter-spacing: .12em; }
}

/* --- Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 0;                           /* stacking context: embers sit under text */
  overflow: hidden;
  height: 100vh;                          /* photo column fills the viewport exactly */
  margin-top: calc(-1 * var(--header-h) - 1px); /* anchored to the very top edge (1px = header border) */
  background: radial-gradient(1100px 520px at 74% 10%, rgba(232, 169, 61, .055), transparent 62%);
}
.hero__inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 45% minmax(0, 1fr);
}
/* Text column sits to the right of the photo */
.hero__text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  max-width: 680px;
  padding: 88px 64px 64px 72px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.8vw, 3.7rem);
  letter-spacing: .05em;
  line-height: 1.14;
  text-transform: uppercase;
  margin: 22px 0 24px;
}
/* The word «картах»: gold gradient through background-clip */
.gold {
  background: linear-gradient(100deg, #E8A93D 0%, #F3CE83 48%, #E8A93D 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(232, 169, 61, .28));
}
.hero__subline {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--cream-soft);
  max-width: 36em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin: 36px 0 30px; }
.hero__trust {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Portrait: full-height left column, edge-to-edge, no frame, no radius */
.hero__portrait {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* Horizontal scrim: the last 150px of the photo melt into the background */
.hero__portrait::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 150px;
  background: linear-gradient(to right, transparent, var(--bg) 94%);
  pointer-events: none;
}
/* 1px vertical gold hairline on the seam */
.hero__portrait::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: rgba(232, 169, 61, .3);
  pointer-events: none;
}

/* Drifting embers: gold dots rising bottom-to-top with sway and opacity flicker.
   Half of them carry --b (blur 1-2px) for a bokeh feel. Layer sits below the
   photo and the text (negative z inside the hero stacking context). */
.hero__embers,
.booking__embers,
.atmo__embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__embers { z-index: -1; }
/* Inside the booking card and the section atmosphere the rise distance is
   container-scaled via --r */
.booking__embers { z-index: 0; --r: 760px; }
.atmo__embers { z-index: 0; --r: 820px; }
.hero__embers i,
.booking__embers i,
.atmo__embers i {
  position: absolute;
  bottom: -8px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--gold);
  filter: blur(var(--b, 0px));
  opacity: 0;
  animation: emberRise var(--t) linear infinite;
  animation-delay: var(--d);
}
@keyframes emberRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: var(--o, .4); }
  20%  { opacity: calc(var(--o, .4) * .7); }
  30%  { transform: translate3d(var(--sw, 12px), calc(var(--r, 108vh) * -.28), 0); }
  34%  { opacity: var(--o, .4); }
  48%  { opacity: calc(var(--o, .4) * .78); }
  55%  { transform: translate3d(calc(var(--sw, 12px) * -.6), calc(var(--r, 108vh) * -.54), 0); }
  62%  { opacity: var(--o, .4); }
  76%  { opacity: calc(var(--o, .4) * .72); }
  80%  { transform: translate3d(calc(var(--sw, 12px) * .8), calc(var(--r, 108vh) * -.8), 0); }
  90%  { opacity: calc(var(--o, .4) * .85); }
  100% { transform: translate3d(calc(var(--sw, 12px) * -.3), calc(var(--r, 108vh) * -1), 0); opacity: 0; }
}

/* Name plate on the photo, bottom-left corner — clear of face and hands */
.hero__plate {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 82%;
  margin: 0;
  padding: 34px 36px 20px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .4) 55%, transparent 100%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #EAD9B4; /* gold-ish cream */
}

/* Scroll cue near the bottom edge of the 100vh hero, aligned with the text column */
.hero__cue {
  position: absolute;
  left: calc(45% + 72px);
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero__cue-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .55);
}
.hero__cue-line {
  position: relative;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(232, 169, 61, .16);
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--gold);
  animation: cueDrop 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes cueDrop {
  0%   { transform: translateY(-16px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(52px); opacity: 0; }
}

/* Faint red glow balancing the bottom-right corner of the text zone */
.hero__corner {
  position: absolute;
  right: -5%;
  bottom: -10%;
  width: 620px;
  height: 460px;
  background: radial-gradient(closest-side, rgba(142, 30, 30, .1), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

/* Candle glow: soft radial gold gradient with a slow, subtle flicker (7s).
   Sized a bit larger and centred over the text zone on the right. */
.hero__glow {
  position: absolute;
  top: -12%;
  right: -4%;
  width: min(940px, 84vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(232, 169, 61, .15) 0%, rgba(232, 169, 61, .06) 40%, transparent 68%);
  animation: flicker 7s ease-in-out infinite;
  pointer-events: none;
}
.booking__glow {
  position: absolute;
  left: 50%;
  top: -150px;
  width: 460px;
  height: 300px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232, 169, 61, .2), transparent);
  animation: flicker 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flicker {
  0%, 100% { opacity: .8; }
  22%      { opacity: 1; }
  46%      { opacity: .74; }
  68%      { opacity: .94; }
  84%      { opacity: .82; }
}

/* Star dust: two layers of tiny gold dots, slow opacity twinkle, pure CSS.
   Limited to the text zone so the photo column stays clean. */
.hero__dust { position: absolute; top: 0; bottom: 0; left: 45%; right: 0; pointer-events: none; }
.hero__dust::before,
.hero__dust::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.hero__dust::before {
  background-image:
    radial-gradient(2px 2px at 7% 18%, rgba(232, 169, 61, .95) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 13% 44%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 12%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(2px 2px at 24% 62%, rgba(232, 169, 61, .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 31% 30%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 37% 74%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 10%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 51% 40%, rgba(232, 169, 61, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 20%, rgba(232, 169, 61, .95) 50%, transparent 51%),
    radial-gradient(2px 2px at 64% 56%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 14%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 36%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 62%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 24%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 48%, rgba(232, 169, 61, .9) 50%, transparent 51%);
  animation: twinkleA 6.5s ease-in-out infinite alternate;
}
.hero__dust::after {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 30%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 16% 66%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 22% 20%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 48%, rgba(232, 169, 61, .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 84%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 26%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(2px 2px at 48% 58%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 54% 6%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 44%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 72%, rgba(232, 169, 61, .8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 28%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 54%, rgba(232, 169, 61, .85) 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 16%, rgba(232, 169, 61, .9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 40%, rgba(232, 169, 61, .85) 50%, transparent 51%);
  animation: twinkleB 8s ease-in-out infinite alternate;
}
@keyframes twinkleA { from { opacity: .14; } to { opacity: .3; } }
@keyframes twinkleB { from { opacity: .26; } to { opacity: .1; } }

/* Orchestrated hero entrance (fade-ups are triggered by IntersectionObserver) */
.hero .eyebrow.fade        { transition-delay: .05s; }
.hero h1.fade              { transition-delay: .15s; }
.hero__subline.fade        { transition-delay: .25s; }
.hero__cta.fade            { transition-delay: .35s; }
.hero__trust.fade          { transition-delay: .45s; }

/* --- Wax dividers between sections ----------------------------------------- */
.divider { height: 56px; }
.divider svg { display: block; width: 100%; height: 100%; }

/* --- Services: tarot spread of 4 flip cards -------------------------------- */
.spread {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 64px;
}
/* Mono hint under the spread */
.spread__hint {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(232, 169, 61, .55);
}

/* Slight rotations like a real spread: -3deg, 2deg, -1deg, 3deg.
   The tilt lives on .card__inner; the wrapper only fades and floats. */
.card {
  position: relative;
  z-index: 1;
  aspect-ratio: 2 / 3.4;           /* portrait card ratio, both faces identical */
  perspective: 1400px;
  transition: opacity .8s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.card:nth-of-type(1) { --rot: -3deg; }
.card:nth-of-type(2) { --rot: 2deg; }
.card:nth-of-type(3) { --rot: -1deg; }
.card:nth-of-type(4) { --rot: 3deg; }

/* Card fade-up on the wrapper (float animation later overrides transform) */
.js .card.fade { opacity: 0; transform: translateY(28px); }
.js .card.fade.is-visible { opacity: 1; transform: translateY(0); }

.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(var(--rot, 0deg));  /* fan tilt; eased to 0deg on the info side */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.45, .05, .2, 1);
  will-change: transform;
}
.card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 169, 61, .5);
  border-radius: 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Ornamental corner flourishes: eight 1px gold ticks drawn as backgrounds */
.card__face::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco));
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Front face: full-bleed square artwork cropped to portrait, dark scrim, title */
.card__face--front { background: var(--surface); }
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 10, 8, .95) 0%, rgba(13, 10, 8, .74) 24%, rgba(13, 10, 8, .14) 52%, rgba(13, 10, 8, .06) 100%);
}
.card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 18px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.15vw, 22px);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .75);
}
.card__title::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 12px;
  background: var(--gold);
  opacity: .85;
}

/* Back face: velvet-tinted surface, list, price line */
.card__face--back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 24px 20px 18px;
  background:
    radial-gradient(95% 55% at 50% 0%, rgba(142, 30, 30, .2), transparent 72%),
    linear-gradient(175deg, #1b1313, #161010 58%, #120c0c);
}
.card__back-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .06em;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  margin: 4px 0 14px;
}
.card__list {
  list-style: none;
  flex: 1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}
.card__list li { position: relative; padding-left: 16px; margin-bottom: 8px; }
.card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 4px;
  height: 4px;
  background: var(--gold);
  opacity: .8;
  transform: rotate(45deg);
}
.card__more { color: var(--muted); font-style: italic; }
.card__price {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gold-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
/* Services legibility at desktop widths (>=1024px): explicit values with
   (0,2,0) specificity so they win over the base (0,1,0) rules at 1024, 1366
   and 1920 alike; the <=767px block still owns mobile. Padding tightens a
   touch so the 16px list never clips inside the fixed card ratio. */
@media (min-width: 1024px) {
  .spread .card__list { font-size: 16px; line-height: 1.55; }
  .spread .card__list li { margin-bottom: 6px; }
  .spread .card__face--back { padding: 20px 18px 16px; }
  .spread .card__title { font-size: 21px; }
  .spread .card__price { font-size: 12px; }
}
/* Narrow desktop band: cards get a taller ratio so the 16px list (which
   wraps at ~225px card width) never clips; all four stay equal height. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .spread .card { aspect-ratio: 2 / 4.2; }
}

/* Flip states: the art side keeps the fan tilt; every info-side state eases the
   inner rotation to 0deg so the text sits perfectly level. Flip rotateY and the
   tilt live on .card__inner; the idle float lives on the .card wrapper. */
.card.is-revealed .card__inner,
.card.is-flipped .card__inner,
.card:focus-visible .card__inner {
  transform: rotate(0deg) rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { z-index: 3; }
  .card:hover .card__inner { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
  .card:hover.is-revealed .card__inner,
  .card:hover.is-flipped .card__inner { transform: translateY(-6px) rotate(0deg) rotateY(180deg); }
  .card:hover .card__face { border-color: rgba(232, 169, 61, .75); box-shadow: 0 0 26px rgba(232, 169, 61, .16); }
}
.card:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
.card:focus-visible .card__face { border-color: rgba(232, 169, 61, .75); box-shadow: 0 0 26px rgba(232, 169, 61, .16); }

/* Idle float after the auto-reveal sequence: distinct periods, offset phases */
.card:nth-of-type(1) { --ft: 5.6s; --fd: -.9s; }
.card:nth-of-type(2) { --ft: 6.4s; --fd: -2.3s; }
.card:nth-of-type(3) { --ft: 7.2s; --fd: -4.1s; }
.card:nth-of-type(4) { --ft: 8s;   --fd: -1.7s; }
.card.is-floating { animation: cardFloat var(--ft) ease-in-out infinite; animation-delay: var(--fd); }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* Hover/focus pauses that card's float; the lift comes from .card__inner */
.card:hover, .card:focus-visible { animation-play-state: paused; }

/* --- Framed photos (how / about) -------------------------------------------- */
.photo-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0;
  justify-self: center;
}
/* height:auto overrides the HTML height attribute so the natural 3:4 ratio holds */
.photo-frame img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  pointer-events: none;
}

/* --- How it works ------------------------------------------------------------- */
.how { padding: 76px 0; }
.how__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.how__photo { grid-column: 1; grid-row: 1; transform: rotate(-1.2deg); }
.how__body { grid-column: 2; grid-row: 1; }

.steps { list-style: none; margin-top: 24px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--gold-faint);
}
.step:last-child { border-bottom: 0; padding-bottom: 4px; }
.step__num {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--gold);
}
.step__num::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--red);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(232, 169, 61, .35);
}
.step__text { font-size: 19px; line-height: 1.55; color: var(--cream-soft); }

/* Sequence reveal (IO threshold .3 on #how, once per load): heading first,
   then the three steps at a 250ms stagger, then meta line and CTA link */
.js .how .how__title,
.js .how .step,
.js .how .how__meta,
.js .how .how__cta-link {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js .how.is-live .how__title { opacity: 1; transform: none; }
.js .how.is-live .step:nth-of-type(1) { opacity: 1; transform: none; transition-delay: .25s; }
.js .how.is-live .step:nth-of-type(2) { opacity: 1; transform: none; transition-delay: .5s; }
.js .how.is-live .step:nth-of-type(3) { opacity: 1; transform: none; transition-delay: .75s; }
.js .how.is-live .how__meta { opacity: 1; transform: none; transition-delay: 1s; }
.js .how.is-live .how__cta-link { opacity: 1; transform: none; transition-delay: 1.15s; }

/* Red thread through the diamond markers; draws top to bottom once live.
   Each segment spans from its diamond to the next, so heights stay flexible. */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 68px;
  bottom: -70px;
  width: 1px;
  background: rgba(142, 30, 30, .8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s ease;
}
.js .how.is-live .step:nth-of-type(1)::before { transform: scaleY(1); transition-delay: .25s; }
.js .how.is-live .step:nth-of-type(2)::before { transform: scaleY(1); transition-delay: .7s; }

/* Mono info line + sliding-underline CTA link under the steps */
.how__meta {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .6);
}
.how__cta-link {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
}
.how__cta-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.how__cta-link:hover::after,
.how__cta-link:focus-visible::after { transform: scaleX(1); }

/* Candle life on the portrait: irregular ~3.5s flicker over the candle area
   (max opacity delta .08) plus a larger ~8s warm breath. Deliberately subtle. */
.how__candle {
  position: absolute;
  left: 2%;
  bottom: 4%;
  width: 52%;
  height: 46%;
  background: radial-gradient(closest-side, rgba(232, 169, 61, .16), rgba(232, 169, 61, .05) 55%, transparent 78%);
  animation: candleFlick 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes candleFlick {
  0%, 100% { opacity: .55; }
  17%      { opacity: .63; }
  34%      { opacity: .57; }
  52%      { opacity: .62; }
  69%      { opacity: .56; }
  85%      { opacity: .61; }
}
.how__breath {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(232, 169, 61, .1), transparent 72%);
  animation: warmBreath 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes warmBreath {
  0%, 100% { opacity: .55; }
  50%      { opacity: .7; }
}

/* Gold corner ornaments on the portrait frame, echoing the service cards */
.how__photo::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* --- About -------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.about__body { grid-column: 1; grid-row: 1; max-width: 640px; }
.about__photo { grid-column: 2; grid-row: 1; transform: rotate(1.2deg); }
.about__text {
  margin-top: 30px;
  font-size: 19px;
  line-height: 1.75;
  color: var(--cream-soft);
}
.about__lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45em;
  letter-spacing: .03em;
  color: var(--cream);
}
/* Closing pull-line in "Обо мне": gold hairline above, italic cream statement */
.about__pull {
  position: relative;
  margin-top: 36px;
  max-width: 34em;
  font-style: italic;
  font-size: 19px;
  line-height: 1.7;
  color: var(--cream);
}
.about__pull::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}
/* Round 14 — content-anchored halos: each glow is a radial disc centred on
   the portrait / text column / portrait foot and decays to ZERO at its own
   radius (700/800/500px), far inside the section box — no corner washes, no
   full-section gradients, junctions stay seamless black. */
.about__halo {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.about__halo--portrait {
  left: 69%;
  top: 52%;
  width: 700px;
  height: 700px;
  opacity: .07;
  background: radial-gradient(circle, rgba(232, 169, 61, .9) 0%, rgba(232, 169, 61, .35) 45%, rgba(232, 169, 61, 0) 100%);
}
.about__halo--text {
  left: 36%;
  top: 40%;
  width: 800px;
  height: 800px;
  opacity: .04;
  background: radial-gradient(circle, rgba(232, 169, 61, .9) 0%, rgba(232, 169, 61, .3) 45%, rgba(232, 169, 61, 0) 100%);
}
.about__halo--red {
  left: 66%;
  top: 80%;
  width: 500px;
  height: 500px;
  opacity: .05;
  background: radial-gradient(circle, rgba(142, 30, 30, .9) 0%, rgba(142, 30, 30, .35) 45%, rgba(142, 30, 30, 0) 100%);
}
/* Mono eyebrow over the section title */
.about__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .7);
}
/* Drop cap: the «М» of «Марина» (::first-letter reaches through the <strong>,
   whose 1.45em scale is compensated: 2.2em x 1.45em = 3.19em of the paragraph) */
.about p:first-of-type::first-letter {
  font-family: "Cinzel", serif;
  color: #E8A93D;
  float: left;
  font-size: 2.9em;
  line-height: .78;
  padding-right: .12em;
  margin-top: .04em;
}
/* Facts row under the pull-quote */
.about__facts {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .7);
}
.about__facts .dot { color: var(--gold); padding: 0 8px; }
/* Gold thread: 1px vertical gradient along the text column's left edge,
   eyebrow → facts row; pseudo-element, so inherently aria-hidden; static */
.about__body { position: relative; }
.about__body::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(232, 169, 61, 0),
    rgba(232, 169, 61, .25) 10%,
    rgba(232, 169, 61, .25) 90%,
    rgba(232, 169, 61, 0)
  );
}
/* Small crescent + two sparkles filling the bottom-left void */
.sec-ghost--crescent { left: 7%; bottom: 7%; width: 190px; height: 152px; }
@media (max-width: 899px) {
  .about__halo--portrait { left: 53%; top: 71%; width: 520px; height: 520px; }
  .about__halo--text { left: 50%; top: 26%; width: 600px; height: 600px; }
  .about__halo--red { left: 50%; top: 84%; width: 360px; height: 360px; }
  .about__body::before { left: -12px; }
}
@media (max-width: 767px) {
  .sec-ghost--crescent { width: 130px; height: 104px; left: 5%; bottom: 4%; }
}

/* --- Certificates --------------------------------------------------------------- */
.certs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  max-width: 1020px;
  margin: 60px auto 0;
}
.cert {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  padding: 14px;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.cert:nth-of-type(2) { transition-delay: .12s; }
.cert img { width: 100%; height: auto; border: 1px solid var(--gold-faint); }
.cert__caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  color: var(--muted);
}
@media (hover: hover) {
  .cert:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 169, 61, .65);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 30px rgba(232, 169, 61, .08);
  }
}

/* --- Contacts atmosphere: living dark air behind the CTA card ----------------------- */
.booking { position: relative; }
.booking__atmo {
  position: absolute;
  inset: 0;
  overflow: hidden;   /* ghosts crop at the section edge = viewport edge */
  z-index: 0;
  pointer-events: none;
}
/* One deep-red radial glow bleeding from behind the card's top-right corner.
   Kept at ~.05 alpha so it never reads as a blob against the black field;
   its 11s breath never syncs with the card's 7s / 7.5s pulses. */
.atmo__glow { position: absolute; }
.atmo__glow--red {
  right: -10%;
  top: -28%;
  width: 820px;
  height: 620px;
  background: radial-gradient(closest-side, rgba(142, 30, 30, .05), transparent 74%);
  animation: atmoBreathB 11s ease-in-out -5s infinite;
}
@keyframes atmoBreathB {
  0%, 100% { opacity: 1;   transform: scale(1.06); }
  50%      { opacity: .72; transform: scale(1); }
}
/* Ghost line symbols in the card pattern's line style: huge, static, 3-5% */
.atmo__ghost { position: absolute; }
.atmo__ghost--moon {
  top: -150px;
  left: -170px;
  width: 620px;
  height: 620px;
  opacity: .045;
}
.atmo__ghost--star {
  bottom: -170px;
  right: -150px;
  width: 560px;
  height: 560px;
  opacity: .05;
}
.atmo__ghost--moon2 {
  top: -190px;
  right: -90px;
  width: 420px;
  height: 420px;
  opacity: .035;
  transform: rotate(-24deg) scaleX(-1);
}

/* --- Booking: deep velvet panel with celestial pattern ------------------------------ */
.booking__panel {
  position: relative;
  z-index: 1;   /* card floats above the section atmosphere */
  overflow: hidden;
  max-width: 840px;
  margin: 0 auto;
  padding: 72px 40px 60px;
  text-align: center;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  background:
    radial-gradient(115% 85% at 50% 0%, rgba(142, 30, 30, .4), rgba(142, 30, 30, .12) 48%, transparent 76%),
    linear-gradient(180deg, #1a1111, #130d0d 70%);
  box-shadow: 0 36px 110px rgba(0, 0, 0, .62), 0 6px 30px rgba(0, 0, 0, .4);
}
/* Double gold hairline: outer border above + inner hairline, with small corner
   ornaments echoing the tarot cards in the services spread */
.booking__panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(232, 169, 61, .22);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.booking__panel::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco));
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
/* Celestial pattern: one cover image at ~12% over the velvet glow.
   Decoration only — if the file is missing the layer paints nothing. */
.booking__pattern {
  position: absolute;
  inset: 0;
  background: url("assets/cta-pattern.jpg") center / cover no-repeat;
  opacity: .12;
  pointer-events: none;
}
/* Soft vignette: keeps the middle dark behind the text, lets the
   pattern read near the edges without fighting the buttons */
.booking__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(105% 82% at 50% 44%, rgba(19, 13, 13, .86) 0%, rgba(19, 13, 13, .62) 40%, rgba(19, 13, 13, .22) 72%, rgba(19, 13, 13, 0) 100%);
  pointer-events: none;
}
/* Slow red breath (~7s) keeps the card alive under the gold flicker */
.booking__pulse {
  position: absolute;
  left: 50%;
  top: -140px;
  width: 640px;
  height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(142, 30, 30, .32), transparent 78%);
  animation: bookingBreath 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bookingBreath {
  0%, 100% { opacity: .68; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
/* Content sits above the decorative layers */
.booking__medallion,
.booking__panel .section-title,
.booking__subline,
.booking__meta,
.booking__cta,
.booking__maxwrap,
.booking__trust { position: relative; z-index: 1; }
/* Portrait medallion: 76px circle, thin gold ring, face-cropped */
.booking__medallion {
  width: 76px;
  height: 76px;
  margin: 0 auto 26px;
  padding: 3px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background-color: rgba(13, 10, 8, .72);
  background-image: url("assets/about_me.png");
  background-position: center 21%;
  background-size: 260% auto;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(232, 169, 61, .16);
}
.booking__subline {
  max-width: 30em;
  margin: 22px auto 0;
  font-size: 19px;
  color: var(--cream-soft);
}
.booking__meta {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .6);
}
.booking__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  margin-top: 36px;
}
/* Buttons: lift + gold border sweeping in from the left on hover */
.booking__cta .btn {
  position: relative;
  transition: transform .3s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease, background-color .35s ease;
}
.booking__cta .btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.booking__cta .btn:focus-visible::after { clip-path: inset(0 0 0 0); }
@media (hover: hover) {
  .booking__cta .btn:hover { transform: translateY(-2px); }
  .booking__cta .btn:hover::after { clip-path: inset(0 0 0 0); }
  /* Telegram keeps a faint warm halo on top of the gold sweep */
  .booking__cta .btn--primary:hover {
    box-shadow: 0 0 30px rgba(232, 169, 61, .22), 0 0 64px rgba(142, 30, 30, .45);
  }
}
/* MAX line: interactive copy-to-clipboard row with a confirmation tooltip */
.booking__maxwrap { margin-top: 26px; }
.booking__max {
  display: inline-block;
  max-width: 100%;
  padding: 2px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--muted);
  transition: color .3s ease, border-color .3s ease;
}
@media (hover: hover) {
  .booking__max:hover { color: var(--gold); border-bottom-color: var(--gold-line); }
}
.booking__max-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  padding: 6px 12px;
  background: rgba(13, 10, 8, .94);
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.booking__maxwrap.is-copied .booking__max-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* Bottom trust line */
.booking__trust {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 232, 213, .5);
}

/* --- Footer ---------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--gold-faint);
  padding: 44px 0 52px;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 48px;
  align-items: center;
}
.footer__inner > p:nth-child(1) { grid-column: 1; grid-row: 1; }
.footer__inner > p:nth-child(2) { grid-column: 1; grid-row: 2; }
.footer__contacts { grid-column: 2; grid-row: 1; text-align: right; }
.footer__note { grid-column: 2; grid-row: 2; text-align: right; }
.footer p {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.8;
  color: var(--muted);
}
.footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.footer a:hover { color: var(--gold); border-color: var(--gold-line); }

/* --- Responsive: tablets ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 899px) {
  .how__grid, .about__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .about__body { grid-column: 1; grid-row: 1; max-width: none; }
  .about__photo { grid-column: 1; grid-row: 2; max-width: 400px; }
  /* Mobile order: portrait first, then heading, steps, info line, CTA */
  .how__photo { grid-column: 1; grid-row: 1; max-width: 400px; }
  .how__body { grid-column: 1; grid-row: 2; max-width: none; }
}

/* --- Responsive: mobile (<=768px) — burger nav, stacked hero, 2x2 spread --- */
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { font-size: 17px; }
  .container { padding: 0 16px; }
  .section { padding: 64px 0; }
  section[id] { scroll-margin-top: 84px; }

  /* Burger: nav links collapse into a dropdown under the sticky header */
  .header__inner { padding: 10px 16px; gap: 12px; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 10px 9px;
    background: none;
    border: 1px solid var(--gold-line);
    border-radius: 2px;
    cursor: pointer;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--gold); transition: transform .3s ease, opacity .3s ease; }
  .header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 16px 24px;
    background: rgba(13, 10, 8, .97);
    border-bottom: 1px solid var(--gold-faint);
  }
  .header.nav-open .nav { display: flex; }
  .nav a { font-size: 12px; letter-spacing: .14em; }
  .nav__dot { display: none; }   /* dropdown reads as a plain column */
  .sec-ghost--nums { width: 200px; right: -40px; }
  .sec-ghost--moons { width: 400px; height: 85px; left: -60px; }
  .sec-ghost--moons-r { width: 400px; height: 85px; right: -60px; }
  .sec-ghost--quill { width: 130px; height: 300px; left: -20px; }
  .sec-ghost--seal { width: 320px; height: 320px; right: -60px; bottom: -60px; }

  /* Hero stacks: full-width ~40vh portrait on top, name plate as a static
     strip DIRECTLY below the photo (no overlay, no scrim), centred text
     column below, full-width stacked CTAs, cue with clear margins.
     padding-top = sticky header height: the photo must start fully BELOW
     the header (zero overlap, no gap beyond ~16px). */
  .hero { height: auto; margin-top: 0; padding-top: 0px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hero__portrait { grid-column: 1; grid-row: 1; height: auto; }
  .hero__portrait img { position: static; width: 100%; height: 40vh; }
  .hero__portrait::after { display: none; }
  .hero__portrait::before { display: none; }
  .hero__plate {
    position: static;
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    background: var(--surface);
    text-align: center;
    font-size: 12px;
    letter-spacing: .14em;
  }
  .hero__text { grid-column: 1; grid-row: 2; max-width: none; padding: 36px 16px 8px; text-align: center; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin: 16px 0 14px; }
  .hero__subline { max-width: 34em; margin: 0 auto; font-size: 17px; }
  .hero__cta { justify-content: center; gap: 12px; margin: 24px 0 20px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__trust { font-size: 10px; letter-spacing: .12em; line-height: 1.9; max-width: 30em; margin: 0 auto; }
  .hero__dust { left: 0; }
  .hero__cue { position: static; align-items: center; margin: 8px auto 56px; }

  .divider { height: 40px; }

  .spread { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
  /* Cards stack in a 2x2 grid without rotation; flip works on tap.
     Specificity must match .card:nth-of-type(n) above, hence .spread .card.
     Taller ratio so the 14px info list never clips at 390px. */
  .spread .card { --rot: 0deg; aspect-ratio: 2 / 4.6; }
  .js .card.fade { transform: translateY(20px); }
  .card__face::after {
    inset: 5px;
    background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  }
  .card__title { padding: 12px 10px 14px; font-size: 20px; letter-spacing: .04em; line-height: 1.15; }
  .card__title::before { width: 20px; margin-bottom: 7px; }
  .card__face--back { padding: 14px 12px 12px; }
  .card__back-title { font-size: 20px; letter-spacing: .04em; margin: 2px 0 10px; }
  .card__list { font-size: 14px; line-height: 1.55; }
  .card__list li { padding-left: 12px; margin-bottom: 2px; }
  .card__list li::before { width: 3px; height: 3px; left: 1px; top: .55em; }
  .card__price { margin-top: auto; padding-top: 8px; }
  .spread__hint { margin-top: 28px; font-size: 11px; }

  /* Photos stand straight and pull their outline in, so nothing overflows 390px */
  .photo-frame { max-width: 340px; transform: none; }
  .photo-frame::after { inset: -8px; }

  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .step:not(:last-child)::before { top: 62px; bottom: -64px; }
  .step__num { font-size: 22px; }
  .step__text { font-size: 17px; }
  .how { padding: 56px 0; }

  .about__text { font-size: 17.5px; }

  .certs__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 44px; }
  .about__pull { font-size: 17px; }

  .booking__panel { padding: 52px 18px 52px; }
  .booking__panel::before, .booking__panel::after { inset: 5px; }
  .booking__panel::after {
    background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  }
  .booking__embers { --r: 900px; }
  .atmo__embers { --r: 960px; }
  .atmo__ghost--moon { width: 380px; height: 380px; top: -110px; left: -140px; }
  .atmo__ghost--star { width: 340px; height: 340px; bottom: -120px; right: -110px; }
  .atmo__ghost--moon2 { width: 260px; height: 260px; top: -120px; right: -60px; }
  .booking__cta { gap: 14px; }
  .booking__cta .btn { flex: 1 1 100%; }

  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .footer__contacts, .footer__note { text-align: center; }
}

/* --- Reduced motion: keep content, drop animation ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .js .fade:not(.card) { opacity: 1 !important; transform: none !important; }
  .js .card.fade { opacity: 1 !important; transform: none !important; }
  /* No float, no stagger: cards render already on the info side */
  .card.is-floating { animation: none !important; }
  .card:not(.is-flipped) .card__inner { transform: rotate(0deg) rotateY(180deg) !important; }
  .card.is-flipped .card__inner { transform: rotate(0deg) rotateY(0deg) !important; }
  /* How section renders statically in its final state */
  .js .how .how__title,
  .js .how .step,
  .js .how .how__meta,
  .js .how .how__cta-link { opacity: 1 !important; transform: none !important; }
  .step:not(:last-child)::before { transform: scaleY(1) !important; transition: none !important; }
  .how__candle, .how__breath { animation: none !important; }
  /* Contacts atmosphere: static glows, no embers */
  .atmo__glow { animation: none !important; }
  .atmo__embers { display: none; }
  /* Booking card: no breathing glow, no embers; the copy tooltip shows instantly */
  .booking__pulse, .booking__glow { animation: none !important; }
  .booking__embers { display: none; }
  /* Star sky: stars stay (static layer), but nothing twinkles */
  .star { animation: none !important; }
}

/* --- FINAL services type floor (appended last on purpose) --------------------
   Targets the real classes from the DevTools diagnosis: the info-side list
   items live in ul.card__list inside .card__face--back; the title is
   h3.card__title; the price line is p.card__price. Placed at the very end of
   the stylesheet with !important so nothing earlier can win at any desktop
   viewport; the <=767px mobile block keeps its own 14px list scale. */
@media (min-width: 1024px) {
  .spread .card__list li { font-size: 17px !important; line-height: 1.55 !important; }
  .spread .card__title { font-size: 21px !important; }
  .spread .card__price { font-size: 12px !important; }
}

/* --- Card of the day (#day) ---------------------------------------------------
   Idle: five backs stacked (four static + the live top card, gentle CSS sway).
   Once per page load, when the section first enters the viewport, seven backs
   fan out from a bottom-center pivot (~70deg, 500ms) and regather (400ms).
   Draw: the top card lifts (~200ms), flips in flight (rotateY 600ms, faces
   swap at 90deg via backface-visibility), lands with a one-shot gold pulse;
   the bottom overlay (numeral / name / advice) fades in ~300ms after settle.
   Re-draw: flip back + slide into the stack (350ms), next card deals out
   (200ms lift + 400ms flip) — full cycle <= 1s.
   Seamless darkness: the only glow is anchored to the slot (640px disc that
   decays to zero well inside the section). overflow:clip keeps the mobile fan
   from ever creating horizontal scroll without making the section a scroll
   container (anchor scrolling to #booking stays intact). */
.day { overflow: clip; text-align: center; padding-bottom: 120px; }
.day__inner { position: relative; }
.day__eyebrow { display: block; margin-bottom: 16px; }
.day__subline {
  max-width: 30em;
  margin: 20px auto 0;
  font-size: 19px;
  font-style: italic;
  color: var(--cream-soft);
}

/* Celestial trio behind the card slot (lives inside .day__stage, so every
   centre sits EXACTLY on the deck's vertical midline): eight-point star
   centred on the slot; crescent moon and rayed sun mirrored left/right,
   fully inside the viewport (centres at 4vw + half-width from each edge,
   mirrored via vw offsets; the section's overflow:clip still guards).
   One line family: same #E8A93D stroke, same 1.2 weight at every size
   (non-scaling-stroke), same .08 opacity from .sec-ghost. Static,
   aria-hidden, pointer-events none; they join the starfield collision
   zones automatically via .sec-ghost. */
.sec-ghost--daystar {
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
}
.sec-ghost--daymoon,
.sec-ghost--daysun {
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
}
.sec-ghost--daymoon { transform: translate(-50%, -50%) translateX(calc(167.5px - 46vw)); }
.sec-ghost--daysun  { transform: translate(-50%, -50%) translateX(calc(46vw - 167.5px)); }
/* Trio opacity raised so the whole composition reads as one bright scene */
.day__stage .sec-ghost { opacity: .09; }

/* Stage: fixed-size box; deck + card are absolutely centred inside it, so
   draws never shift the surrounding layout */
.day__stage {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 520px;
  margin: 52px auto 0;
}
/* Standout halo: amber + deep red layers behind the deck — the brightest
   spot on the page. Diameter ≈ 70% of the section width on desktop, slow
   7s breathing; on first scroll-into-view JS adds .is-awake -> one ~1.2s
   swell to 1.5x brightness, then the breathing settles in. Both layers
   decay to zero well inside the section edges (seamless darkness kept). */
.day__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: dayBreath 7s ease-in-out infinite;
}
.day__halo--amber {
  width: 1150px;
  height: 1150px;
  background: radial-gradient(closest-side, rgba(232, 169, 61, .2), rgba(232, 169, 61, .07) 45%, transparent 72%);
}
.day__halo--red {
  width: 1330px;
  height: 1330px;
  background: radial-gradient(closest-side, rgba(142, 30, 30, .16), rgba(142, 30, 30, .05) 50%, transparent 74%);
}
.day.is-awake .day__halo--amber,
.day.is-awake .day__halo--red {
  animation: daySwell 1.2s ease-out both, dayBreath 7s ease-in-out 1.2s infinite;
}
@keyframes dayBreath {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes daySwell {
  0%   { opacity: .65; filter: brightness(1);   transform: translate(-50%, -50%) scale(1); }
  40%  { opacity: 1;   filter: brightness(1.5); transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: .7;  filter: brightness(1);   transform: translate(-50%, -50%) scale(1); }
}

/* Static spotlight: soft cone of light falling from top-centre onto the deck */
.day__beam { display: none !important; }

/* Shared geometry: fan layer, static stack and live card coincide exactly */
.day__fan, .day__stack, .day__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 450px;
  margin: -225px 0 0 -150px;
}
.day__fan { z-index: 1; visibility: hidden; pointer-events: none; }
.day__stack { z-index: 2; cursor: pointer; transition: opacity .4s ease; }
.day__card { z-index: 3; cursor: pointer; perspective: 1400px; }
.day__fan img, .day__stack img, .day__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.day__fan img, .day__stack img {
  border: 1px solid rgba(232, 169, 61, .5);
  border-radius: 2px;
}

/* Static deck: three backs under the live card, painted bottom to top */
.day__stack img { box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.day__stack-img--1 { transform: translate(-4px, 4px) rotate(-6deg); }
.day__stack-img--2 { transform: translate(3px, 3px) rotate(-3deg); }
.day__stack-img--3 { transform: translate(2px, 2px) rotate(3deg); }
/* While a card is out, the deck recedes so the reveal owns the eye */
.day__stage.is-drawn .day__stack { opacity: .55; }

/* Live top card: idle sway around its +6deg stack tilt; the draw states
   cancel the animation, and the transition starts from the swayed value */
.day__card {
  transform: translate(3px, -3px) rotate(6deg);
  animation: daySway 6.5s ease-in-out infinite;
  transition: transform .2s ease;
}
@keyframes daySway {
  0%, 100% { transform: translate(3px, -3px) rotate(4.9deg); }
  50%      { transform: translate(3px, -3px) rotate(7.1deg); }
}
/* Soft pulsing gold outer glow under the waiting top card (3s gentle
   pulse); hidden the moment the card leaves the stack (draw states own
   the eye instead). Base shadow doubles as the reduced-motion static glow. */
.day__card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 4px;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 40px rgba(232, 169, 61, .35);
  animation: dayTopPulse 3s ease-in-out infinite;
}
@keyframes dayTopPulse {
  0%, 100% { box-shadow: 0 0 36px rgba(232, 169, 61, .32); opacity: .85; }
  50%      { box-shadow: 0 0 52px rgba(232, 169, 61, .48); opacity: 1; }
}
.day__card.is-lifted::before,
.day__card.is-revealed::before,
.day__card.is-returning::before { animation: none; opacity: 0; }
.day__card.is-lifted { animation: none; transform: translate(0, -26px) rotate(2.5deg); }
.day__card.is-revealed {
  animation: none;
  transform: translate(0, -14px) rotate(0deg);
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.45, .05, .2, 1);
}
.day__card.is-quick.is-revealed { transition-duration: .4s; }
.day__card.is-returning { animation: none; transition-duration: .35s; }

.day__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.45, .05, .2, 1);
  will-change: transform;
}
.day__card.is-revealed .day__card-inner { transform: rotateY(180deg); }
.day__card.is-quick.is-revealed .day__card-inner { transition-duration: .4s; }
.day__card.is-returning .day__card-inner { transition-duration: .35s; }

/* Faces: double gold hairline (outer border + inner hairline) with corner
   ticks, matching the service-card frame */
.day__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(232, 169, 61, .5);
  border-radius: 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.day__face--front { transform: rotateY(180deg); }
.day__face::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 4;
  border: 1px solid rgba(232, 169, 61, .22);
  border-radius: 1px;
  pointer-events: none;
}
.day__face::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 4;
  pointer-events: none;
  background-image:
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco)),
    linear-gradient(var(--gold-deco), var(--gold-deco)), linear-gradient(var(--gold-deco), var(--gold-deco));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Reveal face: a dark scrim over the bottom ~40% so the inscription stays
    readable; the name sits on its own plate laid over the art's cartouche
    banner (bottom 8%, 78% wide, centred). Frame hairline + ticks (z4) stay
    crisp above both. */
.day__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 55%, transparent);
  pointer-events: none;
}
.day__plate {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  z-index: 3;
  padding: 7px 10px 8px;
  background: rgba(13, 10, 8, .55);
  border: 1px solid rgba(232, 169, 61, .5);
  border-radius: 2px;
  text-align: center;
  pointer-events: none;
}
.day__num {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .85);
}
/* Card names are Cyrillic, so they render in Cormorant — the page's
   established Cyrillic fallback inside the Cinzel-first display stack.
   Gold + dark shadow = engraved inscription on the cartouche. */
.day__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1.15;
  color: #E8A93D;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .5);
}

/* The card's message below the deck: reserved min-height keeps the button
   put (zero layout shift); fades out fast on re-draw, rises in slowly
   (~500ms after the flip settles, JS-timed via .is-shown) */
.day__message {
  min-height: 96px;
  margin: 26px auto 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.day__message.is-shown {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.day__message-eyebrow {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 169, 61, .7);
}
.day__message-text {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--cream);
}

/* Landing pulse: one-shot soft gold bloom, JS-timed at settle */
@keyframes dayGlow {
  0%   { box-shadow: 0 0 0 rgba(232, 169, 61, 0); }
  35%  { box-shadow: 0 0 44px rgba(232, 169, 61, .34), 0 0 90px rgba(232, 169, 61, .14); }
  100% { box-shadow: 0 0 0 rgba(232, 169, 61, 0); }
}
.day__card.is-pulse { animation: dayGlow .7s ease-out both; }

/* Fan moment (once per load, JS-choreographed): hide the stack, spread seven
   backs ~70deg around the bottom-center pivot, then regather into the stack */
.day__fan img {
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  will-change: transform;
}
.day.is-fanning .day__fan { visibility: visible; }
.day.is-fanning .day__stack,
.day.is-fanning .day__card { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.day.is-gathering .day__fan img {
  transition-duration: .4s;
  transition-timing-function: cubic-bezier(.45, .05, .2, 1);
}
.day.is-fanned .day__fan img:nth-child(1) { transform: rotate(-35deg); }
.day.is-fanned .day__fan img:nth-child(2) { transform: rotate(-23deg) translateY(-6px); }
.day.is-fanned .day__fan img:nth-child(3) { transform: rotate(-12deg) translateY(-10px); }
.day.is-fanned .day__fan img:nth-child(4) { transform: rotate(0deg) translateY(-12px); }
.day.is-fanned .day__fan img:nth-child(5) { transform: rotate(12deg) translateY(-10px); }
.day.is-fanned .day__fan img:nth-child(6) { transform: rotate(23deg) translateY(-6px); }
.day.is-fanned .day__fan img:nth-child(7) { transform: rotate(35deg); }
/* Handoff: once the fan has regathered it crossfades into the returning
   stack (both layers coincide at the centre), so the stage never blinks
   empty between the flourish and the idle deck */
.day.is-handoff .day__fan { opacity: 0; transition: opacity .3s ease; }
.day.is-handoff .day__stack,
.day.is-handoff .day__card { opacity: 1; transition: opacity .3s ease; }

/* Hover / focus on the deck, mirroring the service cards */
@media (hover: hover) and (pointer: fine) {
  .day__card:hover .day__face {
    border-color: rgba(232, 169, 61, .75);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 26px rgba(232, 169, 61, .16);
  }
}
.day__card:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
.day__card:focus-visible .day__face {
  border-color: rgba(232, 169, 61, .75);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 26px rgba(232, 169, 61, .16);
}

/* Button and the visually-hidden live region. Funnel line and CTA link were
   removed by design; the extra bottom padding optically centres the button
   in the void left behind (message reserve above, breathing room below). */
.day__actions { margin-top: 6px; }
.day__btn { min-width: 260px; }
.day__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mobile: 250x375 slot, near-full-width button, tighter overlay type.
   The fan simply clips at the section edge (overflow:clip) — no h-scroll. */
@media (max-width: 640px) {
  .day__stage { height: 440px; margin-top: 40px; }
  .day__fan, .day__stack, .day__card { width: 250px; height: 375px; margin: -187.5px 0 0 -125px; }
  .day__halo--amber { width: 820px; height: 820px; }
  .day__halo--red { width: 950px; height: 950px; }
  .day__beam { width: 440px; height: 560px; top: -120px; }
  .sec-ghost--daystar { width: 420px; height: 420px; }
  .sec-ghost--daymoon, .sec-ghost--daysun { width: 220px; height: 220px; }
  .sec-ghost--daymoon { transform: translate(-50%, -50%) translateX(calc(117.5px - 46vw)); }
  .sec-ghost--daysun  { transform: translate(-50%, -50%) translateX(calc(46vw - 117.5px)); }
  .day { padding-bottom: 128px; }
  .day__num { font-size: 10px; margin-bottom: 3px; }
  .day__name { font-size: 18px; }
  .day__plate { padding: 6px 8px 7px; }
  .day__message { min-height: 112px; margin-top: 20px; }
  .day__message-text { font-size: 18px; }
  .day__face::after, .day__face::before { inset: 4px; }
  .day__face::after {
    background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  }
  .day__btn { width: 100%; max-width: 340px; }
}

/* Reduced motion: no fan, no flight, no sway — the face swaps as an instant
   crossfade (.is-open toggles front-face opacity), the overlay just appears */
@media (prefers-reduced-motion: reduce) {
  .day__fan { display: none; }
  .day__halo--amber, .day__halo--red { animation: none !important; opacity: 1; }
  .day__card { animation: none !important; transform: none !important; }
  .day__card::before { animation: none !important; opacity: 1; }
  .day__card-inner { transform: none !important; transition: none !important; }
  .day__face--front { transform: none !important; opacity: 0; transition: opacity .3s ease; }
  .day__card.is-open .day__face--front { opacity: 1; }
  .day__message { transform: none; }
}