/* Lost Echos — shared styles for inner pages (Masterclasses, Services).
   Same tokens, fonts, grain, vignette and golden cursor as the homepage. */
:root{
  --ink:#07070a;--ink-2:#0f0d10;--ink-3:#171418;
  --parchment:#e8dcc0;--parchment-dim:#c8bda3;
  --gold:#c9a961;--gold-bright:#e8c987;--gold-deep:#8a6d3b;
  --line:rgba(201,169,97,0.28);--hair:rgba(232,220,192,0.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--parchment);font-family:'Inter',sans-serif;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Film grain + vignette (identical to homepage) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%)}

/* Golden Arrow cursor (identical to homepage) */
body, body *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='21' viewBox='0 0 28 32'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff3cf'/><stop offset='.5' stop-color='%23e8c987'/><stop offset='1' stop-color='%23a67c3a'/></linearGradient></defs><path d='M3 2 L3 25 L9 19.5 L13 29 L17.5 27 L13.5 18 L21.5 18 Z' fill='url(%23g)'/></svg>") 2 1, auto}
a, a *, button, button *, [role="button"], .sp-card, .sp-card *, .pr-card a{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 24 26'><defs><linearGradient id='h' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff6d8'/><stop offset='.5' stop-color='%23e8c987'/><stop offset='1' stop-color='%23a67c3a'/></linearGradient></defs><path d='M8 1.5c1.1 0 2 .9 2 2V11l.6-.1V9.3c0-1.1.9-2 2-2s2 .9 2 2v1.9l.6.1V10.6c0-1.1.9-2 2-2s2 .9 2 2v1.5l.3.1c.2-.9 1-1.5 1.9-1.5 1.1 0 1.9.9 1.9 2v5.8c0 4.4-3.3 7.9-7.6 7.9h-2.2c-2.4 0-4.6-1.2-5.9-3.2L2.3 15.9c-.6-.9-.4-2.2.5-2.8.9-.6 2.1-.4 2.8.4L6 14V3.5c0-1.1.9-2 2-2z' fill='url(%23h)'/></svg>") 8 2, pointer !important}

/* Type */
.eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:500}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--parchment)}
h1{font-size:clamp(42px,6vw,84px);line-height:1.02;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;color:var(--gold-bright)}
h3{font-size:28px;line-height:1.15}

/* Top bar */
.sp-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px 44px;background:rgba(7,7,10,0.92);border-bottom:1px solid var(--hair);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sp-brand{display:flex;align-items:center;gap:14px}
.sp-brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(201,169,97,0.35))}
.sp-brand .n{font-family:'Cinzel',serif;font-size:15px;letter-spacing:.32em;color:var(--parchment)}
.sp-back{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;padding:11px 22px;
  border:1px solid var(--gold);color:var(--gold-bright);transition:all .35s;display:inline-flex;align-items:center;gap:10px}
.sp-back:hover{background:var(--gold);color:var(--ink);box-shadow:0 0 22px rgba(201,169,97,0.4)}

/* Page shell */
.sp-main{position:relative;padding:180px 44px 140px;min-height:100vh;overflow:hidden}
.sp-main::before{content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;background-size:cover;background-position:center;
  opacity:.35;animation:spDrift 30s ease-in-out infinite alternate}
.sp-main::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%, rgba(201,169,97,0.10) 0%, transparent 60%),
             linear-gradient(180deg, rgba(7,7,10,0.75) 0%, rgba(7,7,10,0.82) 50%, rgba(7,7,10,0.96) 100%)}
.sp-main > *{position:relative;z-index:1}
@keyframes spDrift{0%{transform:scale(1.03) translate(1%,.5%)}100%{transform:scale(1.03) translate(-1%,-.5%)}}
.sp-wrap{max-width:1180px;margin:0 auto}
.sp-head{text-align:center;margin-bottom:72px}
.sp-head .eyebrow{display:inline-block;margin-bottom:20px}
.sp-head p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--parchment-dim);max-width:620px;margin:22px auto 0}
.sp-rule{width:120px;height:1px;margin:28px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* Placeholder cards */
.sp-card{position:relative;border:1px solid var(--line);background:linear-gradient(180deg, rgba(23,20,24,0.72), rgba(10,9,12,0.82));
  padding:44px 38px;min-height:320px;display:flex;flex-direction:column;transition:border-color .4s, box-shadow .4s, transform .4s}
.sp-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--hair);pointer-events:none}
.sp-card:hover{border-color:var(--gold);box-shadow:0 0 34px rgba(201,169,97,0.16);transform:translateY(-2px)}
.sp-card .num{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.36em;color:var(--gold)}
.sp-card h3{margin:14px 0 10px}
.sp-card .slot{margin-top:auto;border:1px dashed rgba(201,169,97,0.25);padding:22px;text-align:center;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(200,189,163,0.55)}
.sp-card .desc{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--parchment-dim);margin-bottom:26px}
.sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sp-single{max-width:820px;margin:0 auto;min-height:380px;align-items:center;justify-content:center;text-align:center}

/* Services overview: clickable category cards */
.sp-grid-2{grid-template-columns:repeat(2,1fr);max-width:980px;margin:0 auto}
.sp-link{min-height:340px}
.sp-link .desc{margin-bottom:28px}
.sp-from{margin-top:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--hair)}
.sp-from span{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--parchment-dim)}
.sp-from strong{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:36px;color:var(--gold-bright)}
.sp-from em{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--parchment-dim)}
.sp-go{margin-top:22px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);transition:letter-spacing .4s}
.sp-link:hover .sp-go{letter-spacing:.38em}

/* Pricing tiers */
.pr-grid{display:grid;gap:28px;align-items:stretch;margin:0 auto}
.pr-cols-2{grid-template-columns:repeat(2,1fr);max-width:980px}
.pr-cols-3{grid-template-columns:repeat(3,1fr)}
.pr-card{position:relative;display:flex;flex-direction:column;padding:46px 36px 36px;
  border:1px solid var(--line);background:linear-gradient(180deg, rgba(23,20,24,0.78), rgba(10,9,12,0.88));
  transition:border-color .4s, box-shadow .4s, transform .4s}
.pr-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--hair);pointer-events:none}
.pr-card:hover{border-color:var(--gold);box-shadow:0 0 34px rgba(201,169,97,0.16);transform:translateY(-3px)}
.pr-card.featured{border-color:var(--gold);background:linear-gradient(180deg, rgba(42,34,22,0.82), rgba(12,10,10,0.9));
  box-shadow:0 0 44px rgba(201,169,97,0.18)}
.pr-badge{position:absolute;top:-1px;right:28px;transform:translateY(-50%);padding:6px 14px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));color:var(--ink);
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
.pr-card .num{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold)}
.pr-card h3{font-size:32px;margin:12px 0 18px}
.pr-price{padding:18px 0 22px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:26px}
.pr-price strong{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,3vw,38px);line-height:1.1;color:var(--gold-bright)}
.pr-price em{display:block;margin-top:6px;font-family:'Cinzel',serif;font-style:normal;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--parchment-dim)}
.pr-feats{list-style:none;display:grid;gap:16px;margin-bottom:34px}
.pr-feats li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
.pr-feats svg{color:var(--gold);margin-top:5px}
.pr-feats b{display:block;font-family:'Cinzel',serif;font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--parchment);margin-bottom:3px}
.pr-feats span{display:block;font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.45;color:var(--parchment-dim);text-wrap:pretty}
.pr-cta{margin-top:auto;display:block;text-align:center;padding:15px 20px;border:1px solid var(--gold);color:var(--gold-bright);
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;transition:all .35s}
.pr-cta:hover{background:var(--gold);color:var(--ink);box-shadow:0 0 22px rgba(201,169,97,0.4)}
.pr-cta.primary{background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));color:var(--ink);border-color:var(--gold-bright)}
.pr-cta.primary:hover{box-shadow:0 0 30px rgba(201,169,97,0.5)}

/* Terms box */
.pr-terms{max-width:980px;margin:64px auto 0;padding:34px 38px;border:1px solid var(--line);background:rgba(10,9,12,0.78);position:relative}
.pr-terms::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(201,169,97,0.14);pointer-events:none}
.pr-terms .eyebrow{display:block;margin-bottom:18px}
.pr-terms ul{list-style:none;display:grid;gap:12px}
.pr-terms li{font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.5;color:var(--parchment-dim);padding-left:18px;position:relative;text-wrap:pretty}
.pr-terms li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.pr-terms b{color:var(--parchment);font-weight:500}
.pr-home{text-align:center;margin-top:52px}
.pr-home a{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--parchment-dim);transition:color .3s}
.pr-home a:hover{color:var(--gold-bright)}

@media (max-width:1100px){.pr-cols-3{grid-template-columns:1fr 1fr}.pr-cols-3 .pr-card:last-child{grid-column:1/-1}}
@media (max-width:760px){.sp-grid-2,.pr-cols-2,.pr-cols-3{grid-template-columns:1fr}.pr-cols-3 .pr-card:last-child{grid-column:auto}
  .pr-card{padding:40px 24px 28px}.pr-terms{padding:28px 22px}}

/* Footer line */
.sp-foot{border-top:1px solid var(--hair);padding:30px 44px;display:flex;justify-content:space-between;
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:.2em;opacity:.55;background:#050405}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){.sp-grid{grid-template-columns:1fr}}
@media (max-width:900px){
  .sp-bar{padding:14px 20px}
  .sp-brand .n{display:none}
  .sp-main{padding:140px 22px 100px}
  .sp-foot{flex-direction:column;gap:8px;padding:26px 22px;text-align:center}
}
@media (prefers-reduced-motion:reduce){.sp-main::before{animation:none}.reveal{transition:none;opacity:1;transform:none}}

/* ===== Shared additions: particles, transparent bar, card entrance ===== */
.divine-particles{position:fixed;inset:0;pointer-events:none;z-index:9990;overflow:hidden}
.divine-particles .dp{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 6px var(--gold-bright), 0 0 12px rgba(232,201,135,0.5);opacity:0;animation:dpDrift linear infinite;will-change:transform,opacity}
.divine-particles .dp.tiny{width:2px;height:2px;box-shadow:0 0 4px var(--gold-bright)}
.divine-particles .dp.big{width:4px;height:4px;box-shadow:0 0 10px var(--gold-bright), 0 0 20px rgba(232,201,135,0.4)}
.divine-particles .dp.warm{background:#e8c987;box-shadow:0 0 8px #e8c987, 0 0 16px rgba(232,201,135,0.5)}
.divine-particles .dp.cool{background:#c8bda3;box-shadow:0 0 6px #e8dcc0, 0 0 12px rgba(200,189,163,0.4)}
@keyframes dpDrift{
  0%{transform:translate(0,100vh) scale(0.6);opacity:0}
  8%{opacity:.9}
  50%{transform:translate(var(--drift, 30px),50vh) scale(1)}
  92%{opacity:.7}
  100%{transform:translate(calc(var(--drift, 30px) * 2), -10vh) scale(0.8);opacity:0}
}
/* Top bar: no black strip — transparent over the image, solid only after scrolling */
.sp-bar{background:linear-gradient(to bottom, rgba(7,7,10,0.55), transparent) !important;border-bottom:1px solid transparent !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;transition:background .4s, border-color .4s, padding .4s}
.sp-bar.scrolled{background:rgba(7,7,10,0.82) !important;border-bottom-color:var(--hair) !important;
  -webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important}
.sp-main{padding-top:150px}
/* Card opening animation: rises from depth, unblurs, gold edge sweeps */
.sp-card.reveal,.pr-card.reveal,.pr-terms.reveal{opacity:0;transform:perspective(1200px) translateY(46px) rotateX(9deg) scale(.96);filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.3s cubic-bezier(.19,1,.22,1), filter 1s ease, border-color .4s, box-shadow .4s}
.sp-card.reveal.in,.pr-card.reveal.in,.pr-terms.reveal.in{opacity:1;transform:none;filter:none}
.sp-card.reveal.in:hover,.pr-card.reveal.in:hover{transform:translateY(-3px)}
.sp-card,.pr-card{overflow:visible}
.sp-card::after,.pr-card::after{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,230,170,.55) 50%, transparent 65%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  border:1px solid transparent;background-size:250% 100%;background-position:120% 0}
.sp-card.in::after,.pr-card.in::after{animation:edgeSweep 1.8s .35s cubic-bezier(.4,0,.2,1) both}
@keyframes edgeSweep{0%{opacity:0;background-position:120% 0}25%{opacity:1}100%{opacity:0;background-position:-40% 0}}
.pr-grid .pr-card:nth-child(2){transition-delay:.12s}
.pr-grid .pr-card:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.divine-particles{display:none}.sp-card.reveal,.pr-card.reveal,.pr-terms.reveal{filter:none;transform:none}}

/* ===== Glass top bar + blended footer (no black bands) ===== */
.sp-bar{background:linear-gradient(to bottom, rgba(7,7,10,0.28), transparent) !important}
.sp-bar.scrolled{background:rgba(14,11,12,0.22) !important;border-bottom-color:rgba(201,169,97,0.12) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2) !important;backdrop-filter:blur(14px) saturate(1.2) !important;
  box-shadow:0 8px 30px -18px rgba(0,0,0,.5)}
.sp-foot{position:relative;background:transparent !important;border-top-color:transparent !important;opacity:1 !important}
.sp-foot > *{opacity:.6;position:relative;z-index:1}
.sp-foot::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-120px;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  background:linear-gradient(180deg, transparent 0%, rgba(7,7,10,0.35) 55%, rgba(7,7,10,0.6) 100%);
  -webkit-mask:linear-gradient(180deg, transparent 0%, #000 60%);mask:linear-gradient(180deg, transparent 0%, #000 60%)}

/* ===== Top bar: no strip at all — only the right-side button gets a glass blur ===== */
.sp-bar,.sp-bar.scrolled{background:transparent !important;border-bottom-color:transparent !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.sp-back{background:rgba(14,11,12,0.28);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
/* ===== Footer: minimal blur, thin dark area ===== */
.sp-foot::before{top:-40px !important;-webkit-backdrop-filter:blur(2px) !important;backdrop-filter:blur(2px) !important;
  background:linear-gradient(180deg, transparent 0%, rgba(7,7,10,0.18) 60%, rgba(7,7,10,0.35) 100%) !important}
.sp-foot{padding-top:22px;padding-bottom:22px}

/* ===== Top-left: logo only, in a glass circle (no LOST ECHOS text) ===== */
.sp-brand .n{display:none !important}
.sp-brand{width:62px;height:62px;border-radius:50%;justify-content:center;gap:0;
  background:rgba(14,11,12,0.3);border:1px solid rgba(201,169,97,0.28);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 6px 24px -10px rgba(0,0,0,.6)}
.sp-brand img{width:48px !important;height:48px !important}
@media (max-width:640px){.sp-brand{width:52px;height:52px}.sp-brand img{width:40px !important;height:40px !important}}
/* ===== Golden cursor enforced everywhere, same as homepage ===== */
body, body *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='21' viewBox='0 0 28 32'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff3cf'/><stop offset='.5' stop-color='%23e8c987'/><stop offset='1' stop-color='%23a67c3a'/></linearGradient></defs><path d='M3 2 L3 25 L9 19.5 L13 29 L17.5 27 L13.5 18 L21.5 18 Z' fill='url(%23g)'/></svg>") 2 1, auto !important}
a, a *, button, button *, [role="button"], select, label, .sp-card, .sp-card *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 24 26'><defs><linearGradient id='h' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff6d8'/><stop offset='.5' stop-color='%23e8c987'/><stop offset='1' stop-color='%23a67c3a'/></linearGradient></defs><path d='M8 1.5c1.1 0 2 .9 2 2V11l.6-.1V9.3c0-1.1.9-2 2-2s2 .9 2 2v1.9l.6.1V10.6c0-1.1.9-2 2-2s2 .9 2 2v1.5l.3.1c.2-.9 1-1.5 1.9-1.5 1.1 0 1.9.9 1.9 2v5.8c0 4.4-3.3 7.9-7.6 7.9h-2.2c-2.4 0-4.6-1.2-5.9-3.2L2.3 15.9c-.6-.9-.4-2.2.5-2.8.9-.6 2.1-.4 2.8.4L6 14V3.5c0-1.1.9-2 2-2z' fill='url(%23h)'/></svg>") 8 2, pointer !important}
input, textarea{cursor:text !important}

/* Logo fills the circle up to its outline (crop the empty sides of the wide PNG) */
.sp-brand{padding:0;overflow:hidden}
.sp-brand img{width:100% !important;height:100% !important;object-fit:cover;object-position:center;transform:scale(1.03)}
@media (max-width:640px){.sp-brand img{width:100% !important;height:100% !important}}

/* Top-left: logo only — no outer circle, smaller, brighter glow */
.sp-brand{width:auto !important;height:auto !important;border-radius:0 !important;background:transparent !important;border:none !important;
  box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;overflow:visible !important;padding:0 !important}
.sp-brand img{width:auto !important;height:50px !important;object-fit:contain !important;transform:none !important;image-rendering:auto;
  filter:brightness(1.25) saturate(1.15) drop-shadow(0 0 6px rgba(255,220,150,.55)) drop-shadow(0 0 16px rgba(201,169,97,.45)) !important;
  animation:spLogoGlow 4.5s ease-in-out infinite}
@keyframes spLogoGlow{50%{filter:brightness(1.4) saturate(1.2) drop-shadow(0 0 9px rgba(255,225,160,.75)) drop-shadow(0 0 24px rgba(201,169,97,.6))}}
@media (max-width:640px){.sp-brand img{height:42px !important}}
