/* ============================================================
   ПАЛЕРМО — Funeral Agency · Design tokens & components
   ============================================================ */
:root{
  --white-primary:#FAF8F5; --white-deep:#F0EBE3; --cream:#EDE6DB; --cream-light:#F5F0EA;
  --gold:#C9A96E; --gold-dim:#B89B60; --gold-deep:#A6863F;
  --text-primary:#241F18; --text-secondary:#46413A; --text-tertiary:#6B655B;
  --serenity:#8A9BAE; --serenity-light:#A8B8C8; --serenity-deep:#566A7D;
  --cross:#1A1A1A; --linen:#FDFBF7;
  --maxw:1180px;
  --shadow-card:0 22px 60px -30px rgba(30,22,10,0.55);
  --shadow-card-hover:0 34px 80px -32px rgba(30,22,10,0.62);
  --shadow-glow-gold:0 0 44px -6px rgba(201,169,110,0.6);
  --glass-bg:linear-gradient(165deg, rgba(255,252,247,0.30), rgba(247,241,233,0.16));
  --glass-blur:blur(36px) saturate(1.4);
  --glass-shadow:0 60px 150px -60px rgba(12,8,3,0.55);
  --halo:0 1px 2px rgba(40,30,14,0.10), 0 2px 22px rgba(255,252,246,0.55);
  --ff-head:"Playfair Display", Georgia, serif;
  --ff-body:"Inter", system-ui, sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body); color:var(--text-primary);
  background:#0a0d18; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:rgba(201,169,110,0.30); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:15px; }

/* scrollbar */
*{ scrollbar-width:thin; scrollbar-color:var(--gold) var(--white-primary); }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:var(--white-primary); }
*::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:6px; }

/* ---- background canvas + grain ---- */
#divine-bg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; pointer-events:none; background:#0a0d18; }
#fxCanvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:1; display:block; pointer-events:none; }
.grain-overlay{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* ---- typography utilities ---- */
.chapter{ display:flex; align-items:center; gap:0; margin-bottom:24px; }
.chapter-line{ width:30px; height:2px; background:var(--gold); display:inline-block; margin-right:14px; border-radius:2px; }
.chapter-label{ color:var(--gold-deep); font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; }
.h-serif{ font-family:var(--ff-head); font-weight:500; line-height:1.04; letter-spacing:-0.015em; color:var(--text-primary); text-wrap:balance; }
.sec-intro{ color:var(--text-secondary); font-size:clamp(16px,2.1vw,21px); max-width:640px; margin-top:18px; line-height:1.55; }
.gold-link{ display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep); font-weight:600; font-size:16px; }
.gold-link .arr{ transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.gold-link:hover .arr{ transform:translateX(6px); }

/* ---- layout ---- */
main{ position:relative; z-index:10; overflow-x:clip; }
.section{ padding:74px 0; position:relative; }
@media(min-width:768px){ .section{ padding:120px 0; } }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
@media(min-width:1024px){ .wrap{ padding:0 48px; } }

/* ---- liquid glass: frameless, transparent, depth from soft light not borders ---- */
.panel{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); }
.glass{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); border-radius:42px; position:relative; }
/* faint top sheen + hairline of light instead of a hard border */
.glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0.28), transparent 30%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55); opacity:.9; }
/* legibility on transparent glass — soft luminous halo behind text */
.glass :is(h1,h2,h3,h4,p,blockquote,li,.chapter-label,.sec-intro,.role,.name,.faq-q){ text-shadow:var(--halo); }
/* headings sit RAISED off the glass — soft top sheen + gentle drop = embossed, smooth, fully legible */
.glass :is(h1,h2,h3).h-serif, .glass .head-lg, .glass .head-md{
  text-shadow:0 -1px 0 rgba(255,255,255,0.55), 0 1px 1px rgba(52,38,16,0.20), 0 2px 5px rgba(52,38,16,0.14), 0 3px 18px rgba(255,252,246,0.40); }
.glass-pad{ padding:34px; }
@media(min-width:768px){ .glass-pad{ padding:60px; } }

/* gentle float */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.float{ animation:floaty 8s ease-in-out infinite; }
.float-2{ animation:floaty 9.4s ease-in-out infinite; animation-delay:-2s; }
.float-3{ animation:floaty 10.6s ease-in-out infinite; animation-delay:-4s; }

/* card surface — frameless; depth from a soft diffuse shadow + inner light,
   slightly translucent so the divine background still breathes through */
.surface{ background:linear-gradient(150deg, rgba(255,253,249,0.80), rgba(247,242,235,0.66));
  box-shadow:0 30px 80px -42px rgba(15,10,4,0.5), inset 0 1px 0 rgba(255,255,255,0.6); }

/* tap affordance */
.tap-hint{ display:inline-flex; align-items:center; gap:9px; color:var(--gold-deep); font-weight:600; font-size:16px; }
.tap-hint .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); animation:tapPulse 2.2s ease-out infinite; }
@keyframes tapPulse{ 0%{ box-shadow:0 0 0 0 rgba(201,169,110,0.55); } 70%{ box-shadow:0 0 0 9px rgba(201,169,110,0); } 100%{ box-shadow:0 0 0 0 rgba(201,169,110,0); } }
[role=button]{ cursor:pointer; }

/* reveal helper — content is visible by DEFAULT (safe for no-JS, hidden tabs,
   and capture/verify contexts where CSS transitions are frozen). The hidden
   start-state is only applied once JS adds html.anim, i.e. when we can animate. */
.reveal{ opacity:1; transform:none; transition:opacity 1.25s cubic-bezier(.16,.84,.28,1), transform 1.25s cubic-bezier(.16,.84,.28,1); will-change:opacity,transform; }
html.anim .reveal{ opacity:0; transform:translateY(34px); }
html.anim .reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.10s; } .reveal-d2{ transition-delay:.20s; }
.reveal-d3{ transition-delay:.30s; } .reveal-d4{ transition-delay:.40s; }

/* ============================================================ NAV */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:60px;
  display:flex; align-items:center; transition:background .5s, border-color .5s, transform .5s, height .4s; border-bottom:1px solid transparent; }
.nav.solid{ background:rgba(250,248,245,0.90); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom-color:rgba(26,26,26,0.07); }
.nav.hide{ transform:translateY(-100%); }
@media(min-width:768px){ .nav{ height:64px; } }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:baseline; gap:9px; }
.logo .p{ font-family:var(--ff-head); font-style:italic; color:var(--gold); font-size:20px; line-height:1; }
.logo .name{ font-weight:600; font-size:13px; letter-spacing:0.10em; color:var(--text-primary); }
.nav-links{ display:none; gap:34px; }
@media(min-width:880px){ .nav-links{ display:flex; } }
.nav-links a{ font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(247,242,233,0.94); text-shadow:0 1px 8px rgba(0,0,0,0.5); transition:color .3s, text-shadow .3s; }
.nav-links a:hover{ color:#fff; }
.nav.solid .nav-links a{ color:var(--text-secondary); text-shadow:none; }
.nav.solid .nav-links a:hover{ color:var(--gold); }
.nav-right{ display:none; align-items:center; gap:14px; }
@media(min-width:880px){ .nav-right{ display:flex; } }
.nav-phone{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:rgba(247,242,233,0.96); text-shadow:0 1px 8px rgba(0,0,0,0.5); transition:color .3s, text-shadow .3s; }
.nav-phone svg{ width:15px; height:15px; stroke:var(--gold); }
.nav.solid .nav-phone{ color:var(--text-primary); text-shadow:none; }
.pill{ font-size:10px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:#fff; background:var(--gold); padding:5px 11px; border-radius:999px; }
.burger{ display:flex; flex-direction:column; gap:5px; padding:8px; }
@media(min-width:880px){ .burger{ display:none; } }
.burger span{ width:22px; height:1.5px; background:#F3EEE4; box-shadow:0 1px 4px rgba(0,0,0,0.4); transition:.3s; }
.nav.solid .burger span{ background:var(--text-primary); box-shadow:none; }
.mobile-menu{ position:fixed; inset:0; z-index:49; background:rgba(250,248,245,0.98); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; opacity:0; pointer-events:none; transition:opacity .4s; }
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--ff-head); font-size:30px; color:var(--text-primary); }
.mobile-menu a.tel{ color:var(--gold); font-size:24px; margin-top:14px; }

/* ============================================================ HERO */
.hero{ min-height:100svh; display:flex; align-items:flex-start; position:relative; padding-top:clamp(92px,11vh,150px); padding-bottom:56px; }
/* hero sits DIRECTLY on the divine background — no frame, just monumental type */
.hero-inner{ max-width:1000px; }
/* light matte veil under the hero copy so every letter reads instantly over the living background */
.hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,12,0.55) 0%, rgba(8,9,12,0.30) 26%, rgba(8,9,12,0.22) 52%, rgba(8,9,12,0.46) 100%),
    radial-gradient(120% 92% at 20% 50%, rgba(10,12,18,0.58), rgba(10,12,18,0.20) 54%, rgba(10,12,18,0) 78%); }
.hero > .wrap, .hero > .scroll-cue{ position:relative; z-index:1; }
.hero .chapter-label{ color:#F3E4C2; -webkit-text-stroke:.35px rgba(0,0,0,0.55); paint-order:stroke fill; }
.hero .chapter-line{ background:#E7CF9C; }
.hero h1{ font-size:clamp(44px,10vw,120px); font-weight:600; line-height:0.98; color:#FFFDF8; margin:0;
  -webkit-text-stroke:1px rgba(0,0,0,0.66); paint-order:stroke fill; letter-spacing:-0.02em; }
.hero .word{ display:inline-block; }
.hero .dignity{ font-family:var(--ff-head); font-style:italic; font-weight:600; font-size:clamp(40px,9.4vw,104px); line-height:1.08; letter-spacing:0.005em; display:block; min-height:0; margin-top:8px; padding:0.02em 0.16em 0.16em 0.02em; overflow:visible;
  background:url('assets/white-marble.png') center/cover; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:0; paint-order:normal;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.55)) drop-shadow(0 7px 24px rgba(0,0,0,0.5)); }
.hero p.sub{ color:rgba(255,251,244,0.96); font-size:clamp(18px,2.5vw,25px); max-width:620px; margin:8px 0 34px; line-height:1.55; -webkit-text-stroke:.4px rgba(0,0,0,0.45); paint-order:stroke fill; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.btn-gold{ display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff; font-weight:700; font-size:18px; padding:17px 32px; border-radius:14px; transition:box-shadow .35s, transform .35s; box-shadow:0 14px 34px -14px rgba(166,134,63,0.7); }
.btn-gold:hover{ box-shadow:var(--shadow-glow-gold), 0 18px 40px -14px rgba(166,134,63,0.8); transform:translateY(-2px); }
.badge-soft{ font-size:14px; font-weight:600; color:#241F18; background:rgba(247,242,230,0.78); backdrop-filter:blur(6px); padding:11px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.7); box-shadow:0 10px 26px -16px rgba(0,0,0,0.7); }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; background:rgba(16,14,10,0.46); backdrop-filter:blur(7px); color:#F4EEDC; font-weight:600; font-size:16px; padding:16px 26px; border-radius:14px; border:1px solid rgba(231,198,121,0.45); text-shadow:0 1px 3px rgba(0,0,0,0.5); box-shadow:0 12px 30px -16px rgba(0,0,0,0.8); transition:background .35s, border-color .35s, transform .35s; cursor:pointer; }
.btn-ghost:hover{ background:rgba(231,198,121,0.16); border-color:rgba(231,198,121,0.85); transform:translateY(-2px); }
.btn-ghost svg{ stroke:#E7C679; }
/* hero quick links — fast access on mobile & desktop */
.hero-quick{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:30px; }
.hero-quick .hq-label{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; font-weight:700; color:#E7CF9C; text-shadow:0 1px 8px rgba(0,0,0,0.6); margin-right:4px; }
.hero-quick .hq{ display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px; border-radius:999px; font-size:14.5px; font-weight:600; letter-spacing:0.005em; text-decoration:none; color:#F5EFDF; background:rgba(16,14,10,0.52); backdrop-filter:blur(7px); border:1px solid rgba(231,198,121,0.40); box-shadow:0 10px 26px -16px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06); text-shadow:0 1px 3px rgba(0,0,0,0.55); transition:background .3s, border-color .3s, transform .3s, box-shadow .3s; }
.hero-quick .hq:hover{ background:rgba(231,198,121,0.16); border-color:rgba(231,198,121,0.85); transform:translateY(-2px); }
.hero-quick .hq svg{ width:17px; height:17px; flex-shrink:0; stroke:#E7C679; }
.hero-quick .hq.is-accent{ color:#1d1708; background:linear-gradient(135deg,#D9BE86,#A6863F); border-color:transparent; text-shadow:none; box-shadow:0 12px 30px -14px rgba(166,134,63,0.85); }
.hero-quick .hq.is-accent svg{ stroke:#1d1708; }
.hero-quick .hq.is-accent:hover{ background:linear-gradient(135deg,#E4CB97,#B5933F); }
.hero-quick .hq:active{ transform:translateY(0) scale(.97); }
.btn-gold:active, .btn-ghost:active{ transform:translateY(0) scale(.98); }
@media(max-width:640px){
  /* swipeable edge-to-edge rail — premium mobile pattern, no awkward wrapping */
  .hero-quick{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:9px; margin:24px -22px 0; padding:2px 22px 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  .hero-quick::-webkit-scrollbar{ display:none; }
  .hero-quick .hq-label{ display:none; }
  .hero-quick .hq{ flex:0 0 auto; min-height:46px; font-size:14px; padding:0 16px; scroll-snap-align:start; }
}
.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.88); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,0.45); }
.scroll-cue .bar{ width:2px; height:42px; background:linear-gradient(#fff,transparent); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* section heading block */
.head-lg{ font-size:clamp(32px,6vw,68px); max-width:880px; }
.head-md{ font-size:clamp(28px,5vw,52px); }

/* ============================================================ SCENARIOS */
.cards{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:42px; }
@media(min-width:640px){ .cards{ grid-template-columns:1fr 1fr; gap:24px; } }
.s-card{ position:relative; border-radius:26px; padding:24px; overflow:hidden; cursor:pointer; transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
@media(min-width:768px){ .s-card{ padding:32px; } }
.s-card:hover,.s-card:focus-visible{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); outline:none; }
.s-card .num{ position:absolute; top:16px; right:22px; font-family:var(--ff-head); font-size:clamp(44px,7vw,76px); color:rgba(201,169,110,0.42); line-height:1; }
.s-card .img{ height:150px; border-radius:18px; overflow:hidden; position:relative; margin-bottom:22px; }
@media(min-width:1024px){ .s-card .img{ height:188px; } }
.s-card .img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.s-card:hover .img img{ transform:scale(1.07); }
.s-card .img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.25),transparent 60%); }
.s-card h3{ font-weight:700; font-size:clamp(19px,2.4vw,24px); margin-bottom:10px; }
.s-card p{ color:var(--text-secondary); font-size:clamp(15px,1.7vw,17px); margin-bottom:20px; }

/* ============================================================ WHY / stats */
.stats{ display:grid; grid-template-columns:1fr; border-radius:30px; padding:30px; margin-bottom:54px; }
@media(min-width:640px){ .stats{ grid-template-columns:repeat(3,1fr); padding:46px; } }
.stat{ text-align:center; padding:16px 0; }
@media(min-width:640px){ .stat+.stat{ border-left:1px solid rgba(120,90,40,0.16); } }
.stat .n{ font-family:var(--ff-head); color:var(--gold-deep); font-size:clamp(38px,5.5vw,58px); line-height:1; font-weight:600; }
.stat .l{ color:var(--text-secondary); font-size:15px; margin-top:9px; font-weight:500; }
.features{ display:grid; grid-template-columns:1fr; gap:28px; }
@media(min-width:640px){ .features{ grid-template-columns:1fr 1fr; gap:36px 48px; } }
.feature{ padding-left:20px; border-left:3px solid var(--gold); }
@media(min-width:640px){ .feature{ padding-left:24px; } }
.feature .fn{ color:var(--gold-deep); font-size:15px; font-weight:700; margin-bottom:9px; }
.feature h4{ font-weight:700; font-size:clamp(18px,2.2vw,22px); margin-bottom:8px; }
.feature p{ color:var(--text-secondary); font-size:clamp(15px,1.7vw,17px); }

/* ============================================================ PROCESS */
.steps{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:44px; }
@media(min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.step{ text-align:center; position:relative; border-radius:26px; padding:34px 26px; cursor:pointer; transition:transform .45s, box-shadow .45s; }
.step:hover,.step:focus-visible{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); outline:none; }
.step .circ{ width:84px; height:84px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-family:var(--ff-head); color:var(--gold-deep); font-size:30px; background:rgba(255,255,255,0.5); }
.step h4{ font-weight:700; font-size:22px; margin-bottom:11px; }
.step p{ color:var(--text-secondary); font-size:16px; max-width:300px; margin:0 auto 14px; }
.process-img{ margin-top:54px; height:300px; border-radius:30px; overflow:hidden; position:relative; }
@media(min-width:768px){ .process-img{ height:380px; } }
.process-img img{ width:100%; height:100%; object-fit:cover; }
.process-img .cap{ position:absolute; left:0; right:0; bottom:0; padding:36px; background:linear-gradient(to top,rgba(0,0,0,0.66),transparent); }
.process-img .cap h4{ font-family:var(--ff-head); color:#fff; font-size:clamp(24px,3.4vw,40px); font-weight:500; }
.process-img .cap p{ color:rgba(255,255,255,0.85); font-size:16px; margin-top:8px; }

/* ============================================================ SERVICES */
.srv-list{ margin-top:24px; }
.srv-row{ display:flex; align-items:center; gap:18px; padding:24px 14px; border-bottom:1px solid rgba(120,90,40,0.16); transition:transform .4s ease, background .3s; cursor:pointer; border-radius:16px; }
.srv-row:hover,.srv-row:focus-visible{ transform:translateX(10px); background:rgba(255,255,255,0.4); outline:none; }
.srv-row .rn{ font-family:var(--ff-head); color:var(--gold-deep); font-size:clamp(24px,3.4vw,34px); width:58px; flex-shrink:0; font-weight:600; }
@media(min-width:768px){ .srv-row .rn{ width:84px; } }
.srv-row h4{ font-weight:700; font-size:clamp(19px,2.6vw,26px); flex:1; transition:color .35s; }
.srv-row:hover h4{ color:var(--gold-deep); }
.srv-row .chev{ width:24px; height:24px; stroke:var(--gold-deep); flex-shrink:0; transition:transform .4s; }
.srv-row:hover .chev{ transform:translateX(5px); }
.srv-preview{ display:none; position:fixed; right:60px; top:50%; width:300px; height:200px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); transform:translateY(-50%) rotateY(-5deg); opacity:0; transition:opacity .4s; pointer-events:none; z-index:30; }
.srv-preview img{ width:100%; height:100%; object-fit:cover; }
@media(min-width:1100px){ .srv-preview.show{ display:block; opacity:1; } }

/* ============================================================ PRICES */
.price-cards{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:42px; }
@media(min-width:768px){ .price-cards{ grid-template-columns:repeat(3,1fr); } }
.p-card{ border-radius:28px; padding:36px; cursor:pointer; transition:transform .45s, box-shadow .45s; }
.p-card:hover,.p-card:focus-visible{ transform:translateY(-7px); box-shadow:var(--shadow-card-hover); outline:none; }
.p-card h4{ font-weight:700; font-size:22px; margin-bottom:20px; }
.p-card .price{ font-family:var(--ff-head); font-weight:600; font-size:clamp(44px,6vw,64px); color:var(--text-primary); line-height:1; }
.p-card .price .pre{ font-size:18px; color:var(--text-tertiary); font-family:var(--ff-body); font-weight:500; margin-right:8px; }
.p-card .price .eur{ color:var(--gold-deep); }
.p-card p{ color:var(--text-secondary); font-size:16px; margin-top:20px; }
.p-card .tap-hint{ margin-top:22px; }
.guarantee{ display:flex; align-items:flex-start; gap:18px; margin-top:30px; padding:28px 32px; border-radius:26px; }
.guarantee svg{ width:30px; height:30px; stroke:var(--gold-deep); flex-shrink:0; margin-top:2px; }
.guarantee p{ color:var(--text-secondary); font-size:16px; }

/* ============================================================ DIGNITY */
.dignity{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(180deg,#F0EBE3 0%,#A8B8C8 30%,#8A9BAE 60%,#5C6F82 80%,#3A4D60 100%); }
.dignity .d-inner{ text-align:center; max-width:760px; padding:0 24px; position:relative; z-index:3; }
.dignity .chapter{ justify-content:center; }
.dignity .chapter-label{ color:#fff; opacity:.85; }
.dignity .chapter-line{ background:#fff; }
.dignity h2{ color:var(--text-primary); font-size:clamp(28px,5vw,56px); }
.dignity .d-sub{ color:var(--serenity-deep); font-size:clamp(15px,2vw,19px); margin-top:22px; }
.d-drop{ position:absolute; left:50%; top:42%; width:64px; height:64px; transform:translate(-50%,-50%) scale(0); opacity:0; z-index:4;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 38% 30%, #ffffff 0%, #e9dcc2 26%, #C9A96E 70%, #9d7f48 100%);
  box-shadow:var(--shadow-glow-gold), inset 0 -8px 14px rgba(120,90,40,0.5), inset 0 6px 10px rgba(255,255,255,0.6); }
.d-drop .caustic{ position:absolute; top:18%; left:24%; width:30%; height:22%; border-radius:50%; background:rgba(255,255,255,0.85); filter:blur(2px); }
.d-glow{ position:absolute; left:50%; top:42%; width:200px; height:200px; transform:translate(-50%,-50%) scale(.5); border-radius:50%; opacity:0; z-index:3;
  background:radial-gradient(circle, rgba(201,169,110,0.5), transparent 68%); }
.d-ring{ position:absolute; left:50%; top:62%; width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.7); transform:translate(-50%,-50%) scale(0); opacity:0; z-index:2; }
.d-close{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; text-align:center; opacity:0; padding:0 24px; }
.d-close .d-requiem{ font-family:"EB Garamond", Georgia, serif; font-style:italic; font-weight:400; color:var(--gold-soft,#E8C97A); letter-spacing:0.04em;
  font-size:clamp(20px,3.2vw,34px); text-shadow:0 2px 24px rgba(0,0,0,0.45); margin-bottom:14px; }
.d-close .d-peace{ font-family:var(--ff-head); font-weight:300; font-style:italic; color:#fff; font-size:clamp(24px,4vw,44px); text-shadow:0 2px 30px rgba(0,0,0,0.3); }
/* dimension portal — opens beneath the words at the end of the sequence */
.d-portal{ position:absolute; left:50%; top:62%; width:min(60vw,420px); aspect-ratio:1; transform:translate(-50%,-50%) scale(0); opacity:0; z-index:3; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle, rgba(255,244,214,0.9) 0%, rgba(212,168,83,0.6) 24%, rgba(212,168,83,0.12) 52%, transparent 72%);
  filter:blur(2px); mix-blend-mode:screen; }

/* ============================================================ TESTIMONIALS */
.t-cards{ display:grid; grid-template-columns:1fr; gap:22px; margin-top:46px; }
@media(min-width:768px){ .t-cards{ grid-template-columns:repeat(3,1fr); } }
.t-card{ border-radius:26px; padding:32px; }
.stars{ display:flex; gap:4px; margin-bottom:18px; }
.stars svg{ width:19px; height:19px; fill:var(--gold); }
.t-card blockquote{ font-style:italic; color:var(--text-primary); font-size:17px; line-height:1.6; margin-bottom:18px; }
.t-card .who{ color:var(--text-tertiary); font-size:14px; font-weight:500; }

/* ============================================================ FAQ */
.faq-list{ max-width:820px; margin:36px auto 0; border-radius:30px; padding:14px 30px; }
.faq-item{ border-bottom:1px solid rgba(120,90,40,0.16); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:26px 0; font-weight:600; font-size:clamp(17px,2.2vw,20px); color:var(--text-primary); }
.faq-q .chev{ width:22px; height:22px; stroke:var(--gold-deep); flex-shrink:0; transition:transform .4s; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .4s, padding .4s; }
.faq-item.open .faq-a{ max-height:340px; opacity:1; padding-bottom:26px; }
.faq-a p{ color:var(--text-secondary); font-size:16px; max-width:700px; line-height:1.6; }

/* ============================================================ CONTACT */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:40px; margin-top:46px; }
@media(min-width:900px){ .contact-grid{ grid-template-columns:1.1fr 0.9fr; gap:56px; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; color:var(--text-secondary); margin-bottom:8px; font-weight:500; }
.field input,.field select,.field textarea{ width:100%; padding:15px 16px; border-radius:12px; border:1px solid rgba(120,90,40,0.18);
  background:rgba(255,255,255,0.7); backdrop-filter:blur(6px); color:var(--text-primary); transition:border-color .3s, box-shadow .3s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,110,0.16); }
.field textarea{ min-height:120px; resize:vertical; }
.form-msg{ color:var(--gold-deep); font-weight:700; font-size:15px; margin-top:10px; min-height:22px; }
.info-card{ display:flex; align-items:flex-start; gap:16px; padding:22px 0; border-bottom:1px solid rgba(120,90,40,0.14); }
.info-card .ic{ width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(201,169,110,0.16); }
.info-card .ic svg{ width:22px; height:22px; stroke:var(--gold-deep); }
.info-card.viber .ic{ background:rgba(115,96,242,0.14); } .info-card.viber .ic svg{ stroke:#7360F2; }
.info-card .lbl{ font-size:14px; color:var(--text-tertiary); margin-bottom:4px; }
.info-card .val{ font-family:var(--ff-head); font-weight:500; font-size:clamp(20px,2.4vw,28px); color:var(--text-primary); }
.info-card.phone .val{ color:var(--gold-deep); }
.callback{ margin-top:46px; border-radius:14px; padding:28px; text-align:center; }
.callback h4{ font-family:var(--ff-head); font-weight:300; font-size:24px; margin-bottom:6px; }
.callback p{ color:var(--text-secondary); font-size:14px; margin-bottom:18px; }
.callback .cb-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:440px; margin:0 auto; }
.callback .cb-row input{ flex:1; min-width:180px; padding:12px 15px; border-radius:9px; border:1px solid rgba(26,26,26,0.10); background:rgba(255,255,255,0.7); }

/* ============================================================ FOOTER */
.footer{ position:relative; z-index:10; background:var(--white-deep); border-top:1px solid rgba(26,26,26,0.06); padding:64px 0 36px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1.3fr; gap:40px; } }
.footer h5{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:16px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer ul a{ color:var(--text-secondary); font-size:14px; transition:color .3s; }
.footer ul a:hover{ color:var(--gold); }
.footer .desc{ color:var(--text-secondary); font-size:14px; max-width:280px; margin-top:14px; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid rgba(26,26,26,0.07); }
.footer-bottom .cr{ color:var(--text-tertiary); font-size:13px; }
.footer-bottom .motto{ font-family:var(--ff-head); font-style:italic; color:var(--gold); font-size:15px; }

/* ============================================================ REASSURANCE MODAL */
.modal-root{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; pointer-events:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(20,16,10,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .45s ease; }
.modal-root.open{ pointer-events:auto; }
.modal-root.open .modal-backdrop{ opacity:1; }
.modal-card{ position:relative; width:min(560px,94vw); max-height:88svh; overflow-y:auto; border-radius:32px;
  background:linear-gradient(150deg, rgba(255,253,250,0.94), rgba(245,240,232,0.9)); backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.8); box-shadow:0 40px 110px -30px rgba(20,14,6,0.7), inset 0 1px 0 rgba(255,255,255,0.9);
  padding:40px 34px; transform:translateY(28px) scale(0.96); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .45s; }
@media(min-width:768px){ .modal-card{ padding:50px 46px; } }
.modal-root.open .modal-card{ transform:none; opacity:1; }
.modal-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(120,90,40,0.10); transition:background .3s; }
.modal-close:hover{ background:rgba(120,90,40,0.2); }
.modal-close svg{ width:20px; height:20px; stroke:var(--text-primary); }
.modal-icon{ width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  background:linear-gradient(135deg, rgba(201,169,110,0.25), rgba(201,169,110,0.08)); border:1px solid rgba(201,169,110,0.4); }
.modal-icon svg{ width:30px; height:30px; stroke:var(--gold-deep); fill:none; }
.modal-kicker{ color:var(--gold-deep); font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:12px; }
.modal-card h3{ font-family:var(--ff-head); font-weight:600; font-size:clamp(26px,4vw,38px); line-height:1.08; color:var(--text-primary); margin-bottom:16px; }
.modal-card .m-body{ color:var(--text-secondary); font-size:17px; line-height:1.62; }
.modal-card .m-body p{ margin-bottom:14px; }
.modal-card .m-list{ list-style:none; margin:18px 0 6px; display:flex; flex-direction:column; gap:12px; }
.modal-card .m-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-secondary); font-size:16px; }
.modal-card .m-list li .tick{ width:24px; height:24px; flex-shrink:0; border-radius:50%; background:rgba(201,169,110,0.18); display:flex; align-items:center; justify-content:center; }
.modal-card .m-list li .tick svg{ width:14px; height:14px; stroke:var(--gold-deep); }
.modal-reassure{ margin-top:22px; padding:18px 20px; border-radius:18px; background:rgba(201,169,110,0.10); border:1px solid rgba(201,169,110,0.22); color:var(--text-primary); font-size:16px; line-height:1.55; font-style:italic; }
.modal-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.modal-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 0 10px; text-align:center; }
.modal-loader .ring{ width:62px; height:62px; border-radius:50%; border:3px solid rgba(201,169,110,0.22); border-top-color:var(--gold-deep); animation:spin 0.9s linear infinite; margin-bottom:22px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.modal-loader p{ color:var(--text-secondary); font-size:17px; font-style:italic; }
.modal-stage{ transition:opacity .35s ease; }

/* ============================================================ PRELOADER / INTRO */
html.cloak, html.cloak body{ overflow:hidden !important; height:100%; touch-action:none; }
#preloader{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%, #16161f 0%, #0a0b12 56%, #06070c 100%);
  transition:opacity 1.15s ease; animation:plFail 0.6s ease 8s forwards; }
#preloader::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 42%, transparent 38%, rgba(0,0,0,0.55)); }
#preloader.done{ opacity:0; pointer-events:none; }
@keyframes plFail{ to{ opacity:0; visibility:hidden; } }
.pl-stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:24px; }
.pl-logo{ display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transform:translateY(16px) scale(.95);
  animation:plLogo 1.3s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.pl-mono{ font-family:var(--ff-head); font-style:italic; font-weight:500; font-size:clamp(54px,12vw,76px); color:#E7C679; line-height:1;
  filter:drop-shadow(0 0 34px rgba(225,180,100,.55)); }
.pl-word{ font-family:var(--ff-body); letter-spacing:0.46em; font-size:13px; font-weight:600; color:rgba(255,250,240,.84); padding-left:.46em; }
.pl-agents{ display:flex; gap:30px; margin-top:46px; }
.pl-portrait{ width:clamp(82px,22vw,108px); aspect-ratio:1; border-radius:50%; overflow:hidden; position:relative; opacity:0;
  box-shadow:0 0 0 1px rgba(231,198,121,.45), 0 0 36px -6px rgba(231,198,121,.4), 0 22px 50px -20px rgba(0,0,0,.8); }
.pl-portrait img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92) brightness(.96); }
.pl-portrait::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 34px rgba(0,0,0,.55); }
.pl-portrait.a{ transform:translateX(20px) scale(.88); animation:plPort 1.2s cubic-bezier(.2,.8,.2,1) 1.0s forwards; }
.pl-portrait.b{ transform:translateX(-20px) scale(.88); animation:plPort 1.2s cubic-bezier(.2,.8,.2,1) 1.25s forwards; }
.pl-line{ width:0; height:2px; margin-top:48px; border-radius:2px; background:linear-gradient(90deg,transparent,#E7C679,transparent);
  animation:plLine 1.8s ease-out 1.7s forwards; }
@keyframes plLogo{ to{ opacity:1; transform:none; } }
@keyframes plPort{ to{ opacity:1; transform:none; } }
@keyframes plLine{ 0%{ width:0; opacity:0; } 30%{ opacity:1; } 100%{ width:min(240px,70vw); opacity:.9; } }
/* the loaded site is revealed (fades up) when the intro dissolves */
.site-fade{ transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
html.cloak .site-fade{ opacity:0; transform:translateY(10px); }

/* ============================================================ MOBILE: float everything, keep effects */
@media(max-width:767px){
  .glass-pad{ padding:26px 20px; }
  .s-card{ padding:22px; }
  /* calm, intentional elements on mobile (no wobble) — reads as premium, not broken */
  .hero{ padding-top:84px; padding-bottom:36px; }
  .hero h1{ line-height:1.02; }
  .hero p.sub{ margin-bottom:26px; }
  .hero-cta{ gap:12px; }
  .scroll-cue{ display:none; }

  /* ---- CASKETS 3D: tidy, compact, always-fits stack ---- */
  .casket-stage{ margin-top:30px; gap:22px; }
  .casket-viewer{ aspect-ratio:1 / 1; border-radius:22px; max-height:74vh; }
  .casket-loading{ font-size:13.5px; gap:13px; }
  .casket-loading .ring{ width:38px; height:38px; }
  .casket-hint{ bottom:12px; font-size:10.5px; padding:6px 12px; }
  .casket-controls{ gap:10px; }
  .finish-btn{ padding:12px 13px; gap:12px; border-radius:15px; }
  .finish-btn:hover,.finish-btn:focus-visible{ transform:none; }
  .fb-thumb{ width:58px; height:46px; border-radius:10px; }
  .fb-name{ font-size:14.5px; }
  .fb-desc{ font-size:11.5px; }
  .fb-go{ display:none; }
  .casket-cta{ padding:15px 20px; font-size:14.5px; margin-top:2px; }
  .casket-browse{ margin-top:30px; gap:10px; }
  .casket-browse-btn{ padding:15px 26px; font-size:14px; width:100%; justify-content:center; }
  .casket-browse-note{ font-size:13px; max-width:30ch; }
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .grain-overlay{ display:none; }
  .scroll-cue .bar, .float, .float-2, .float-3{ animation:none; }
  *{ animation:none !important; }
  .modal-card,.modal-backdrop{ transition:opacity .2s !important; }
}

/* ============================================================ BRAND LOGO (real crest) */
.logo{ display:inline-flex; align-items:center; }
.brand-img{ height:46px; width:auto; display:block; flex-shrink:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.logo:hover .brand-img{ transform:translateY(-1px) scale(1.03); }
/* nav lockup: gold crest over the dark hero, dark crest once the bar turns solid (cream) */
.nav .logo{ position:relative; }
.nav .brand-img.dark{ position:absolute; inset:0; opacity:0; }
.nav.solid .brand-img.gold{ opacity:0; }
.nav.solid .brand-img.dark{ opacity:1; position:static; }
@media(min-width:768px){ .brand-img{ height:50px; } }
.footer-logo{ display:inline-flex; margin-bottom:8px; }
.footer-logo .brand-img{ height:84px; }

/* ============================================================ CINEMATIC 3D INTRO */
#introCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; transition:opacity 1s ease; z-index:2; }
.intro-logo-wrap{ position:absolute; left:0; right:0; top:46%; transform:translateY(-50%); display:flex; justify-content:center; align-items:center;
  z-index:3; pointer-events:none; perspective:1400px; }
.intro-3d{ position:relative; width:min(420px,72vw); transform-origin:50% 60%;
  opacity:0; transform:rotateX(42deg) scale(0.74) translateY(40px);
  transition:opacity 1.2s cubic-bezier(.16,.84,.28,1), transform 1.45s cubic-bezier(.16,.84,.28,1); }
.intro-logo-layer{ width:100%; height:auto; display:block; }
/* sharp crest on top — its drop-shadow hugs each element's alpha, not a box */
#introLogo{ position:relative; z-index:2; filter:drop-shadow(0 12px 30px rgba(0,0,0,0.55)); }
/* glow layer: a blurred copy of the SAME art, so every element (dove, P, wordmark) glows by its own shape */
.intro-3d .glow{ position:absolute; inset:0; z-index:1; opacity:0; mix-blend-mode:screen; will-change:opacity,filter; }
html.intro-formed .intro-3d{ opacity:1; transform:rotateX(0deg) scale(1) translateY(0); }
html.intro-formed .intro-3d .glow{ animation:logoGlowPulse 2.6s ease-in-out infinite; }
@keyframes logoGlowPulse{
  0%,100%{ opacity:0.5; filter:blur(15px) saturate(1.5) brightness(1.18); }
  50%{ opacity:0.92; filter:blur(24px) saturate(1.7) brightness(1.5); }
}
html.intro-out .intro-3d{ opacity:0; transform:rotateX(-12deg) scale(1.16) translateY(-26px); transition:opacity .8s ease, transform .9s ease; }
.pl-skip{ position:absolute; left:0; right:0; bottom:6.5%; text-align:center; font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(240,227,196,0.42); opacity:0; transition:opacity 1.1s ease .3s; z-index:3; pointer-events:none; }
html.intro-formed .pl-skip{ opacity:1; }
html.intro-out .pl-skip{ opacity:0; }

/* ============================================================ CASKETS — live 3D */
.casket-stage{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:42px; align-items:center; }
@media(min-width:900px){ .casket-stage{ grid-template-columns:1.25fr 0.75fr; gap:46px; } }
.casket-viewer{ position:relative; width:100%; aspect-ratio:4/3; border-radius:30px; overflow:hidden; cursor:grab;
  background:radial-gradient(120% 100% at 50% 28%, rgba(255,250,240,0.55), rgba(232,222,206,0.26) 58%, rgba(120,100,70,0.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 30px 80px -42px rgba(15,10,4,0.5); }
.casket-viewer:active{ cursor:grabbing; }
#casketCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.casket-loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  color:var(--text-secondary); font-size:15px; font-style:italic; text-align:center; padding:20px; }
.casket-loading .ring{ width:46px; height:46px; border-radius:50%; border:3px solid rgba(201,169,110,0.25); border-top-color:var(--gold-deep); animation:spin .9s linear infinite; }
.casket-loading .pct{ font-style:normal; font-weight:700; color:var(--gold-deep); }
.casket-hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-tertiary);
  background:rgba(255,255,255,0.6); padding:7px 14px; border-radius:999px; opacity:0; transition:opacity .6s; pointer-events:none; backdrop-filter:blur(6px); }
.casket-viewer.loaded .casket-hint{ opacity:1; }
.casket-hint svg{ width:15px; height:15px; stroke:var(--gold-deep); }
/* static fallback when 3D can't run / load (older or low-power phones) */
.casket-fallback{ position:absolute; inset:0; z-index:2; }
.casket-fallback img{ width:100%; height:100%; object-fit:cover; display:block; }
.casket-fallback::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); }
.casket-viewer.is-fallback{ cursor:default; }
.casket-viewer.is-fallback .casket-hint{ display:none; }
.casket-controls{ display:flex; flex-direction:column; gap:13px; }
.finish-btn{ display:flex; align-items:center; gap:14px; text-align:left; padding:16px 18px; border-radius:18px; width:100%; border:1px solid transparent;
  background:linear-gradient(150deg, rgba(255,253,249,0.68), rgba(247,242,235,0.5)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .35s, box-shadow .35s, background .35s, border-color .35s; }
.finish-btn:hover,.finish-btn:focus-visible{ transform:translateX(4px); box-shadow:var(--shadow-card); outline:none; }
.finish-btn.active{ border-color:rgba(201,169,110,0.6); box-shadow:0 0 0 1px rgba(201,169,110,0.4), var(--shadow-card);
  background:linear-gradient(150deg, rgba(255,252,244,0.94), rgba(248,240,224,0.82)); }
.fb-swatch{ width:34px; height:34px; border-radius:9px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08), inset 0 -6px 10px rgba(0,0,0,0.28); }
.fb-swatch.s0{ background:linear-gradient(135deg,#8a271c,#3a0f0a); }
.fb-swatch.s1{ background:linear-gradient(135deg,#8a5a36,#4d2f1a); }
.fb-swatch.s2{ position:relative; background:linear-gradient(135deg,#cda35c,#8a6533); }
.fb-swatch.s2::after{ content:""; position:absolute; inset:0; border-radius:9px; box-shadow:inset 0 0 0 2px rgba(212,168,83,0.75); }
.fb-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.fb-name{ font-weight:700; font-size:16px; color:var(--text-primary); }
.fb-desc{ font-size:12.5px; color:var(--text-tertiary); }
.fb-price{ font-family:var(--ff-head); font-weight:600; font-size:23px; color:var(--gold-deep); flex-shrink:0; }
.casket-cta{ width:100%; justify-content:center; margin-top:6px; }
.casket-note{ font-size:12.5px; color:var(--text-tertiary); text-align:center; }

/* ---- full-width casket catalog banner ---- */
/* ---- finish menu: model thumbnails (no colour swatches) ---- */
.fb-thumb{ width:74px; height:56px; flex-shrink:0; border-radius:12px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(120,90,40,0.18), 0 6px 16px -10px rgba(60,44,18,0.5); background:#f1ead9; }
.fb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.finish-btn:hover .fb-thumb img, .finish-btn.active .fb-thumb img{ transform:scale(1.07); }
.fb-go{ width:20px; height:20px; stroke:var(--gold-deep); flex-shrink:0; opacity:0; transform:translateX(-4px); transition:opacity .35s, transform .35s; }
.finish-btn:hover .fb-go, .finish-btn.active .fb-go{ opacity:1; transform:translateX(0); }

/* ---- centered "browse catalog" button under the casket stage ---- */
.casket-browse{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:46px; text-align:center; }
.casket-browse-btn{ letter-spacing:0.10em; padding:18px 40px; font-size:17px; }
.casket-browse-btn svg{ stroke:#fff; transition:transform .35s; }
.casket-browse-btn:hover svg{ transform:translateX(5px); }
.casket-browse-note{ color:var(--text-tertiary); font-size:14px; }
.casket-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
@media(max-width:560px){ .casket-gallery{ grid-template-columns:1fr; } }
.cg-item{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); background:#0d0f12; }
.cg-item img{ width:100%; height:200px; object-fit:cover; display:block; transition:transform .7s ease; }
@media(min-width:768px){ .cg-item img{ height:240px; } }
.cg-item:hover img{ transform:scale(1.05); }
.cg-item figcaption{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:24px 20px 16px; color:#fff; font-weight:600; font-size:15px; background:linear-gradient(to top, rgba(8,7,6,0.82), transparent); }
.cg-item .cg-price{ font-family:var(--ff-head); color:#E7C679; font-size:19px; flex-shrink:0; }

/* ============================================================ REPATRIATION — obsidian "world" */
.repat{ position:relative; }
.repat-panel{ position:relative; border-radius:42px; overflow:hidden; padding:40px 28px;
  background:radial-gradient(120% 130% at 78% 20%, #14233a 0%, #0b1016 55%, #070809 100%);
  box-shadow:0 60px 150px -60px rgba(6,8,12,0.8), inset 0 1px 0 rgba(255,255,255,0.06); }
@media(min-width:768px){ .repat-panel{ padding:64px 60px; } }
.repat-grid{ display:grid; grid-template-columns:1fr; gap:30px; align-items:center; }
@media(min-width:900px){ .repat-grid{ grid-template-columns:1.05fr 0.95fr; gap:50px; } }
.repat-copy .chapter-label{ color:#E7C679; }
.repat-copy .chapter-line{ background:#E7C679; }
.repat-copy h2{ color:#FCF7EC; }
.repat-lead{ color:rgba(244,238,226,0.82); font-size:clamp(16px,2.1vw,20px); line-height:1.6; margin-top:18px; }
.repat-points{ list-style:none; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; }
.repat-points li{ display:flex; gap:13px; align-items:flex-start; color:rgba(238,231,217,0.9); font-size:16px; line-height:1.5; }
.rp-dot{ width:9px; height:9px; margin-top:7px; border-radius:50%; flex-shrink:0; background:#E7C679; box-shadow:0 0 12px rgba(231,198,121,0.7); }
.repat-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.btn-ghost-light{ display:inline-flex; align-items:center; gap:9px; padding:16px 26px; border-radius:14px; font-weight:600; font-size:16px;
  color:#F4EEDC; border:1px solid rgba(231,198,121,0.45); transition:background .35s, border-color .35s, transform .35s; }
.btn-ghost-light:hover{ background:rgba(231,198,121,0.12); border-color:rgba(231,198,121,0.8); transform:translateY(-2px); }
.repat-globe{ position:relative; width:100%; aspect-ratio:1/1; max-width:480px; margin:0 auto; }
#globeCanvas{ width:100%; height:100%; display:block; }
.repat-badge{ position:absolute; top:8%; right:6%; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700;
  color:#0b1016; background:linear-gradient(135deg,#F2D89E,#D4A853); padding:7px 13px; border-radius:999px; box-shadow:0 10px 26px -10px rgba(231,198,121,0.7); }

/* ============================================================ AGENT VIDEO */
/* ============================================================ TEAM — single cinematic appearance */
.team-cine{ position:relative; max-width:980px; margin:38px auto 0; border-radius:30px; overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 50px 130px -50px rgba(6,8,12,0.7), 0 0 0 1px rgba(201,169,110,0.18); background:#06070a; }
.team-video{ width:100%; height:100%; object-fit:cover; display:block; }
.team-vignette{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 120px 24px rgba(6,7,10,0.55);
  background:linear-gradient(180deg, rgba(6,7,10,0.2) 0%, transparent 30%, transparent 70%, rgba(6,7,10,0.4) 100%); }
.team-cards{ display:grid; grid-template-columns:1fr; gap:18px; max-width:980px; margin:22px auto 0; }
@media(min-width:640px){ .team-cards{ grid-template-columns:1fr 1fr; gap:22px; } }
.team-card{ border-radius:24px; padding:28px 30px; cursor:pointer; transition:transform .45s, box-shadow .45s; }
.team-card:hover,.team-card:focus-visible{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); outline:none; }
.tc-name{ font-family:var(--ff-head); font-size:clamp(26px,4vw,38px); font-weight:600; margin:0 0 6px; }
.tc-role{ color:var(--gold-deep); font-size:15px; font-weight:600; margin-bottom:14px; }
.tc-tel{ display:inline-block; font-size:21px; font-weight:700; color:var(--text-primary); letter-spacing:0.01em; transition:color .3s; }
.tc-tel:hover{ color:var(--gold-deep); }
.team-card .tap-hint{ margin-top:16px; }

/* ============================================================ LUXURY GRAVES */
.grave-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:42px; }
@media(min-width:700px){ .grave-grid{ grid-template-columns:1fr 1fr; gap:22px; } }
.grave-item{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); background:#0d0f12; aspect-ratio:4/3; }
.grave-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.grave-item:hover img{ transform:scale(1.06); }
.grave-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:32px 16px 14px; color:#fff; font-size:13px; font-weight:600;
  background:linear-gradient(to top, rgba(8,7,6,0.86), transparent); }
.graves-cta{ text-align:center; margin-top:38px; }

/* ============================================================ SCROLL PROGRESS + FLOATING CALL */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,#E7C679,#D4A853); box-shadow:0 0 12px rgba(212,168,83,0.6); transition:width .12s linear; }
.fab-call{ position:fixed; right:18px; bottom:18px; z-index:55; display:flex; align-items:center; height:58px; padding:0 17px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff; box-shadow:0 16px 40px -12px rgba(166,134,63,0.8);
  transform:translateY(120px); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s, box-shadow .35s; }
.fab-call.show{ transform:translateY(0); opacity:1; }
.fab-call svg{ width:24px; height:24px; flex-shrink:0; }
.fab-call .fab-label{ font-weight:700; font-size:15px; white-space:nowrap; margin-left:9px; }
@media(max-width:767px){ .fab-call{ height:58px; width:58px; padding:0; justify-content:center; } .fab-call .fab-label{ display:none; } }
.fab-call::after{ content:""; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(212,168,83,0.5); animation:fabPulse 2.6s ease-out infinite; }
@keyframes fabPulse{ 0%{ box-shadow:0 0 0 0 rgba(212,168,83,0.45);} 70%{ box-shadow:0 0 0 18px rgba(212,168,83,0);} 100%{ box-shadow:0 0 0 0 rgba(212,168,83,0);} }
@media(prefers-reduced-motion:reduce){ .fab-call::after{ animation:none; } }

/* ============================================================ CTA MAGIC (gentle pulse on the primary call) */
.hero-cta .btn-gold{ position:relative; }
.hero-cta .btn-gold::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(201,169,110,0.55); animation:ctaPulse 2.9s ease-out infinite; }
@keyframes ctaPulse{ 0%{ box-shadow:0 0 0 0 rgba(201,169,110,0.5);} 70%{ box-shadow:0 0 0 15px rgba(201,169,110,0);} 100%{ box-shadow:0 0 0 0 rgba(201,169,110,0);} }

/* ============================================================ iOS-STYLE NOTIFICATION */
.ios-toast{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 12px); left:50%; z-index:90; width:min(440px,94vw);
  transform:translate(-50%,-170%); opacity:0; transition:transform .62s cubic-bezier(.2,.9,.25,1), opacity .45s; pointer-events:none; }
.ios-toast.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.it-card{ background:rgba(26,24,22,0.74); -webkit-backdrop-filter:blur(22px) saturate(1.35); backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,0.14); border-radius:22px; padding:14px 16px 13px; box-shadow:0 26px 60px -18px rgba(0,0,0,0.72); color:#F4EFE6; }
.it-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.it-icon{ width:30px; height:30px; border-radius:9px; object-fit:contain; background:rgba(0,0,0,0.34); padding:3px; }
.it-meta{ display:flex; align-items:center; gap:8px; flex:1; font-size:12px; }
.it-app{ font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#E7CF9C; }
.it-time{ margin-left:auto; color:rgba(244,239,230,0.5); }
.it-body{ display:block; font-size:14.5px; line-height:1.46; }
.it-body strong{ display:block; font-weight:700; margin-bottom:2px; color:#FFF7E8; }
.it-body span{ color:rgba(244,239,230,0.82); }
.it-actions{ display:flex; gap:9px; margin-top:13px; }
.it-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:12px; font-size:14.5px; font-weight:700; text-decoration:none; cursor:pointer; border:none; transition:transform .25s, background .25s; }
.it-btn.ghost{ background:rgba(255,255,255,0.10); color:#EFE8DA; }
.it-btn.ghost:hover{ background:rgba(255,255,255,0.17); }
.it-btn.gold{ background:linear-gradient(135deg,#F0CE80,#C9A45A); color:#1d1708; box-shadow:0 10px 24px -12px rgba(201,164,90,0.9); }
.it-btn.gold:hover{ transform:translateY(-1px); }

@media(prefers-reduced-motion:reduce){ .hero-cta .btn-gold::after{ animation:none; } .ios-toast{ transition:opacity .3s; transform:translate(-50%,0); } }