/* ==========================================================================
   JasExplains — brand design system
   Direction: ORCHID (locked 2026-07-25)
   Deep plum-black canvas · orchid accent · Outfit (matches siddharthrajsekar.com)
   Each of the 4 paths owns its own accent; a page sets --accent to become it.
   ========================================================================== */

:root{
  /* canvas */
  --bg:#0B0810;
  --bg2:#100C17;
  --surface:#171021;
  --surface2:#1D1429;
  --line:#2B2138;
  /* type */
  --txt:#F8F4FB;
  --muted:#B0A3C2;
  --dim:#796C90;
  /* brand accent */
  --accent:#D368E0;
  --accent2:#F3B9F0;
  --accent-ink:#0B0510;
  --glow:rgba(211,104,224,.15);
  /* the four paths */
  --c-single:#2ED98A;   /* emerald green — growth, go, fresh start   */
  --c-rel:#D75BD6;      /* magenta orchid — the brand's heart        */
  --c-married:#9B6BF0;  /* violet — depth, commitment, maturity      */
  --c-heart:#FF4D5E;    /* red — the wound, urgency, the turn        */
  --r:20px;
  --maxw:1180px;
}

/* a page/section can adopt a path identity by setting these */
.t-single   {--accent:var(--c-single);  --glow:rgba(46,217,138,.17);  --accent-ink:#03291A}
.t-rel      {--accent:var(--c-rel);     --glow:rgba(215,91,214,.15);  --accent-ink:#28062A}
.t-married  {--accent:var(--c-married); --glow:rgba(155,107,240,.16); --accent-ink:#150636}
.t-heart    {--accent:var(--c-heart);   --glow:rgba(255,77,94,.17);   --accent-ink:#2A0508}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Outfit',system-ui,-apple-system,sans-serif;font-weight:300;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.serif{font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:-.025em}
.narrow{max-width:780px;margin-inline:auto}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
header.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{font-size:19px;font-weight:600;letter-spacing:-.02em;flex-shrink:0}
.brand i{font-style:normal;color:var(--accent)}
.navlinks{display:flex;gap:32px}
.navlinks a{font-size:14px;color:var(--muted);transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--txt)}
.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-ink);
  font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;transition:.28s;border:0;cursor:pointer;font-family:inherit;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px var(--glow)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.btn.lg{padding:15px 30px;font-size:15px}
@media(max-width:900px){.navlinks{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:104px 0 92px;overflow:hidden}
.hero.sm{padding:80px 0 64px}
.hero::before{
  content:"";position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1000px;height:700px;background:radial-gradient(ellipse at center,var(--glow),transparent 66%);pointer-events:none;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;margin-bottom:30px;
}
.eyebrow s{width:5px;height:5px;border-radius:50%;background:var(--accent);text-decoration:none}
h1.hero-h{font-size:clamp(37px,5.4vw,64px);line-height:1.08;letter-spacing:-.03em;max-width:17ch;font-weight:600}
h1.hero-h em{font-style:normal;color:var(--accent)}
h1.hero-h .gw{background:linear-gradient(180deg,#F2EDFA 0%,#C6BBDA 55%,#9A8DB4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:28px;max-width:56ch;font-size:clamp(16px,1.9vw,19px);color:var(--muted);font-weight:300;line-height:1.72}
.hero-sub strong{color:var(--txt);font-weight:500}
.hero-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- stats ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:44px 26px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(32px,4.4vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat .n u{text-decoration:none;color:var(--accent)}
.stat .l{margin-top:11px;font-size:12.5px;color:var(--dim);letter-spacing:.05em}
@media(max-width:760px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}

/* ---------- sections ---------- */
section{padding:110px 0}
section.tight{padding:78px 0}
.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
h2{font-size:clamp(31px,4.5vw,54px);line-height:1.11;letter-spacing:-.025em;max-width:20ch}
h2 em{font-style:normal;color:var(--accent)}
h2 .gw{background:linear-gradient(180deg,#F2EDFA 0%,#C6BBDA 55%,#9A8DB4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h3.sub{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;font-weight:500}
.lede{margin-top:20px;max-width:56ch;color:var(--muted);font-size:17px;font-weight:300;line-height:1.75}
.lede strong{color:var(--txt);font-weight:500}

/* ---------- the four doors ---------- */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:54px}
.door{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:38px 34px 32px;transition:.35s cubic-bezier(.2,.7,.2,1);overflow:hidden;display:block;
  --dc:var(--accent);
}
.door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dc);opacity:.85}
.door::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(620px 210px at var(--mx,50%) 0,color-mix(in srgb,var(--dc) 18%,transparent),transparent 70%);
  opacity:0;transition:opacity .35s;
}
.door:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--dc) 55%,var(--line))}
.door:hover::after{opacity:1}
.door .num{font-size:12px;color:var(--dim);letter-spacing:.14em;font-weight:600}
.door h3{margin-top:15px;font-size:clamp(23px,2.7vw,29px);letter-spacing:-.02em;font-weight:500;color:var(--dc)}
.door p{margin-top:12px;color:var(--muted);font-size:15.5px;font-weight:300;line-height:1.68;max-width:38ch}
.door .go{margin-top:24px;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--dc)}
.door .go svg{transition:transform .3s}
.door:hover .go svg{transform:translateX(5px)}
.d-single{--dc:var(--c-single)} .d-rel{--dc:var(--c-rel)}
.d-married{--dc:var(--c-married)} .d-heart{--dc:var(--c-heart)}
@media(max-width:760px){.doors{grid-template-columns:1fr}}

/* ---------- timeline / beats ---------- */
.beats{margin-top:56px}
.beat{display:grid;grid-template-columns:150px 1fr;gap:36px;padding:34px 0;border-top:1px solid var(--line)}
.beat:last-child{border-bottom:1px solid var(--line)}
.beat .yr{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.04em;padding-top:4px}
.beat h4{font-size:21px;font-weight:500;letter-spacing:-.015em}
.beat p{margin-top:10px;color:var(--muted);font-size:16px;font-weight:300;line-height:1.75;max-width:62ch}
.beat p + p{margin-top:14px}
@media(max-width:700px){.beat{grid-template-columns:1fr;gap:8px}}

/* ---------- beliefs ---------- */
.belief{border-top:1px solid var(--line);padding:44px 0;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.belief:last-of-type{border-bottom:1px solid var(--line)}
.belief q{font-family:'Outfit',sans-serif;font-weight:500;font-size:clamp(24px,3.2vw,38px);line-height:1.22;letter-spacing:-.02em;quotes:none;display:block}
.belief q::before,.belief q::after{content:""}
.belief p{color:var(--muted);font-size:16px;font-weight:300;line-height:1.78;padding-top:8px}
@media(max-width:820px){.belief{grid-template-columns:1fr;gap:16px}}

/* ---------- feature quote card ---------- */
.quotecard{
  margin-top:70px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(38px,6vw,74px);position:relative;overflow:hidden;
}
.quotecard::before{content:"";position:absolute;top:-160px;right:-120px;width:520px;height:420px;background:radial-gradient(ellipse,var(--glow),transparent 68%);pointer-events:none}
.quotecard .q{font-family:'Outfit',sans-serif;font-weight:500;font-size:clamp(23px,3.1vw,36px);line-height:1.3;letter-spacing:-.02em;max-width:28ch;position:relative}
.quotecard .q b{font-weight:600;color:var(--accent);font-style:normal}
.quotecard .by{margin-top:28px;font-size:13.5px;color:var(--dim);letter-spacing:.05em}

/* ---------- mission ---------- */
.mission{text-align:center}
.mission .big{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(33px,5.8vw,66px);line-height:1.15;letter-spacing:-.025em;max-width:18ch;margin:20px auto 0}
.mission .big em{font-style:normal;color:var(--accent)}

/* ---------- cards / proof ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:50px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:.3s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.card .stars{color:var(--accent);font-size:14px;letter-spacing:3px}
.card p{margin-top:15px;font-size:15.5px;font-weight:300;line-height:1.7;color:var(--txt)}
.card .who{margin-top:19px;font-size:13px;color:var(--dim)}
.card h4{font-size:19px;font-weight:500;letter-spacing:-.015em}
@media(max-width:880px){.grid3,.grid2{grid-template-columns:1fr}}

/* ---------- symptom / checklist ---------- */
.checks{margin-top:44px;display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.check{display:flex;gap:18px;align-items:flex-start;padding:24px 28px;background:var(--surface)}
.check b{color:var(--accent);font-size:15px;font-weight:600;flex-shrink:0;width:22px;padding-top:1px}
.check span{color:var(--muted);font-size:16px;font-weight:300;line-height:1.68}
.check span i{font-style:normal;color:var(--txt);font-weight:500}

/* ---------- offer / free training block ---------- */
.offer{
  margin-top:52px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
  border-radius:var(--r);padding:clamp(34px,5vw,58px);position:relative;overflow:hidden;
}
.offer::before{content:"";position:absolute;bottom:-220px;left:-140px;width:560px;height:460px;background:radial-gradient(ellipse,var(--glow),transparent 68%);pointer-events:none}
.offer .k{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.offer h3{margin-top:14px;font-size:clamp(25px,3.2vw,36px);letter-spacing:-.02em;font-weight:500;max-width:20ch;position:relative}
.offer ul{margin-top:24px;display:grid;gap:11px;list-style:none;position:relative}
.offer li{display:flex;gap:12px;color:var(--muted);font-size:16px;font-weight:300;line-height:1.6}
.offer li svg{flex-shrink:0;margin-top:5px;color:var(--accent)}
.offer .cta{margin-top:32px;position:relative}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 44px;background:var(--bg2)}
.fgrid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.fnav{display:flex;gap:28px;flex-wrap:wrap}
.fnav a{font-size:14px;color:var(--muted);transition:.2s}
.fnav a:hover{color:var(--accent)}
.fine{margin-top:38px;padding-top:26px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.support{margin-top:22px;font-size:12.5px;color:var(--dim);max-width:66ch;line-height:1.7}
.support a{color:var(--muted);border-bottom:1px solid var(--line)}

/* ---------- misc ---------- */
.note{display:inline-block;font-size:11px;color:var(--accent);border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:middle;letter-spacing:.03em}
.center{text-align:center}
.center h2,.center .lede{margin-inline:auto}
.final{text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;bottom:-300px;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse at center,var(--glow),transparent 68%);pointer-events:none}
.backlink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);margin-bottom:26px;transition:.2s}
.backlink:hover{color:var(--accent)}

/* ==========================================================================
   v2 — the futuristic layer (2026-07-25)
   ========================================================================== */

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px var(--glow)}

/* cursor orb (desktop only, added by JS) */
#orb{position:fixed;top:0;left:0;width:340px;height:340px;border-radius:50%;
  pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);
  transform:translate(-50%,-50%);transition:opacity .4s}
@media (pointer:coarse),(prefers-reduced-motion:reduce){#orb{display:none}}

/* aurora hero */
.hero{isolation:isolate}
.hero::before{animation:aur1 16s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;top:-200px;right:-260px;width:760px;height:620px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 65%);
  pointer-events:none;animation:aur2 20s ease-in-out infinite alternate;z-index:-1}
@keyframes aur1{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-42%) translateY(46px) scale(1.12)}}
@keyframes aur2{from{transform:translateY(0) scale(1)}to{transform:translateY(-52px) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}

/* particle canvas */
#fx{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* ---------- hero portrait ---------- */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,72px);align-items:center}
.hero-copy{min-width:0}
.hero-photo{position:relative;margin:0;justify-self:end;width:100%;max-width:560px}
/* orchid bloom behind him */
.hero-photo::before{
  content:"";position:absolute;inset:-16% -12% -10%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,var(--glow),transparent 66%);
  filter:blur(12px);pointer-events:none;z-index:0;
  animation:hpglow 9s ease-in-out infinite alternate;
}
@keyframes hpglow{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.hp-frame{
  position:relative;z-index:1;border-radius:230px 230px 26px 26px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 70px color-mix(in srgb,var(--accent) 12%,transparent);
  animation:hpfloat 7.5s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes hpfloat{from{transform:translateY(0)}to{transform:translateY(-13px)}}
.hp-frame img{
  width:100%;height:auto;display:block;
  /* melt the base of the photo into the page */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.6) 90%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,.6) 90%,transparent 100%);
}
/* orchid wash so the daylight photo belongs to the dark brand */
.hp-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg) 72%,transparent) 88%,var(--bg) 100%),
    linear-gradient(200deg,color-mix(in srgb,var(--accent) 15%,transparent),transparent 58%);
  mix-blend-mode:soft-light;
}
@media (prefers-reduced-motion:reduce){.hero-photo::before,.hp-frame{animation:none}}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-photo{justify-self:center;max-width:400px;order:2}
  .hp-frame{border-radius:180px 180px 22px 22px}
}

/* buttons that IGNITE */
.btn{position:relative;overflow:hidden}
.btn:not(.ghost)::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.65) 50%,transparent 68%);
  transform:translateX(-130%) skewX(-8deg);transition:transform .05s;pointer-events:none}
.btn:not(.ghost):hover::before{transform:translateX(130%) skewX(-8deg);transition:transform .65s cubic-bezier(.3,.6,.3,1)}
.btn:not(.ghost):hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 75%,#fff),
             0 10px 34px var(--glow),
             0 0 80px var(--glow)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 10%,transparent),0 0 34px var(--glow);
  transform:translateY(-2px)}

/* doors: 3D tilt */
.doors{perspective:1200px}
.door{transform-style:preserve-3d;will-change:transform}
.door:hover{transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---------- podcast rail ---------- */
.podwrap{position:relative}
.podrail{display:grid;grid-auto-flow:column;grid-auto-columns:min(360px,78vw);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:52px 4px 22px;
  scrollbar-width:none;-ms-overflow-style:none}
.podrail::-webkit-scrollbar{display:none}
.pod{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.35s cubic-bezier(.2,.7,.2,1);
  position:relative;display:block;text-align:left;font-family:inherit;color:inherit;padding:0}
.pod:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 40px var(--glow)}
/* display:block is REQUIRED — .thumb is a <span>, and while inline its width stays "auto",
   which silently breaks BOTH aspect-ratio:16/9 (card fell back to 4:3 and cropped the
   thumbnail) and the play button's left:50% (it resolved to 0 and sat on the edge). */
.pod .thumb{display:block;position:relative;aspect-ratio:16/9;background:var(--surface2);overflow:hidden}
.pod .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pod:hover .thumb img{transform:scale(1.06)}
.pod .thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,8,16,.88))}
.pod .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--accent-ink);
  box-shadow:0 0 0 0 var(--glow);transition:.35s;opacity:.92}
.pod:hover .play{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 18%,transparent),0 0 44px var(--glow);transform:translate(-50%,-50%) scale(1.08)}
.pod .meta{padding:20px 22px 24px}
.pod .ep{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pod h4{margin-top:9px;font-size:16.5px;font-weight:500;line-height:1.45;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pod.slot{border-style:dashed;display:grid;place-items:center;min-height:100%;
  color:var(--dim);font-size:14px;text-align:center;padding:30px;cursor:default}
.pod.slot:hover{transform:none;box-shadow:none;border-color:var(--line)}
.podnav{position:absolute;top:8px;right:0;display:flex;gap:8px}
.podnav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.25s}
.podnav button:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 24px var(--glow)}

/* ---------- the theater (in-site player) ---------- */
.theater{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(7,4,11,.82);backdrop-filter:blur(18px);padding:24px}
.theater.open{display:flex;animation:thin .35s ease}
@keyframes thin{from{opacity:0}to{opacity:1}}
.theater .stage{width:min(1020px,96vw);position:relative;animation:stgin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes stgin{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.theater .frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 110px var(--glow);background:#000}
.theater iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.theater .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.theater .t{font-size:15px;color:var(--muted);font-weight:300}
.theater .t b{color:var(--txt);font-weight:500}
.theater .ctr{display:flex;gap:8px;flex-shrink:0}
.theater .ctr button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.25s}
.theater .ctr button:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 24px var(--glow)}
.theater .x{position:absolute;top:12px;right:12px;z-index:5}
.theater .x button{background:rgba(11,8,16,.82);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.22);color:#fff;width:44px;height:44px}
.theater .x button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.theater .hint{margin-top:10px;font-size:12.5px;color:var(--dim);text-align:center}
body.lock{overflow:hidden}

/* ---------- strategy-call form ---------- */
.jas-form{display:grid;gap:18px;margin-top:30px;max-width:620px;position:relative}
.f-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}
.f label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px;font-weight:600}
.f input,.f textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;color:var(--txt);font-family:inherit;font-size:15.5px;font-weight:300;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.f input::placeholder,.f textarea::placeholder{color:var(--dim);opacity:.7}
.f input:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);background:var(--bg2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent),0 0 34px var(--glow);
}
.f textarea{min-height:118px;resize:vertical;line-height:1.6}
.f-priv{font-size:12.5px;color:var(--dim);line-height:1.65;max-width:52ch}
.form-msg{display:none;margin-top:18px;padding:16px 18px;border-radius:13px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  color:var(--txt);font-size:15px;font-weight:300;line-height:1.6}
.form-msg.show{display:block;animation:fmin .4s ease}
@keyframes fmin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* two-offer split */
.offer.alt2{background:var(--bg2)}
/* .withpic turns the offer box into text + poster. Scoped to the modifier so every other
   .offer on the site keeps its original single-column layout. */
.offer.withpic{display:grid;grid-template-columns:1.15fr minmax(270px,430px);
  gap:clamp(30px,4vw,54px);align-items:center}
.offer.withpic>*{min-width:0}
.offer-body{position:relative}
.offer-pic{margin:0;position:relative;border-radius:calc(var(--r) - 12px);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  box-shadow:0 22px 60px rgba(0,0,0,.45)}
.offer-pic img{display:block;width:100%;height:auto}
@media(max-width:900px){.offer.withpic{grid-template-columns:1fr}}

/* ---- booking section: pick a slot → the call connects ----
   Shared by all four path pages; the accent comes from each page's own theme.
   .call-grid wraps only the copy + CTA, so "Not ready for a call?" stays full width below. */
.call-grid{display:grid;grid-template-columns:1.2fr minmax(210px,290px);
  gap:clamp(30px,4.5vw,58px);align-items:center}
.call-grid>*{min-width:0}
.call-body{position:relative}
.cv-wrap{justify-self:center;width:100%;max-width:290px}
.bkv{position:relative;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 16px var(--glow))}
/* the slot being chosen */
.bkv .pick{transform-origin:102px 98px;animation:bkpick 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bkpick{0%{opacity:0;transform:scale(2.1)}
  10%{opacity:.8}18%,88%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.bkv .chosen{transform-origin:102px 98px;opacity:0;animation:bkchosen 7s ease-out infinite}
@keyframes bkchosen{0%,15%{opacity:0;transform:scale(.3)}
  23%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* the call connecting */
.bkv .wire{stroke-dasharray:46;stroke-dashoffset:46;animation:bkwire 7s ease-in-out infinite}
@keyframes bkwire{0%,30%{stroke-dashoffset:46;opacity:.9}
  44%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.bkv .pulse{transform-origin:150px 216px;opacity:0;animation:bkpulse 7s ease-out infinite}
@keyframes bkpulse{0%,44%{transform:scale(.85);opacity:0}
  54%{opacity:.42}78%,100%{transform:scale(1.55);opacity:0}}
.bkv .waves{opacity:0;animation:bkwaves 7s linear infinite}
@keyframes bkwaves{0%,46%{opacity:0}54%,88%{opacity:1}100%{opacity:0}}
.bkv .wave{transform-box:fill-box;transform-origin:center;animation:bkbounce 1s ease-in-out infinite}
.bkv .w2{animation-delay:.12s}.bkv .w3{animation-delay:.24s}
.bkv .w4{animation-delay:.36s}.bkv .w5{animation-delay:.48s}
@keyframes bkbounce{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .bkv .pick,.bkv .chosen,.bkv .wire,.bkv .pulse,.bkv .waves,.bkv .wave{animation:none}
  .bkv .chosen,.bkv .waves{opacity:1;transform:none}
  .bkv .wire{stroke-dashoffset:0}
  .bkv .pulse{opacity:0}
}
@media(max-width:900px){
  .call-grid{grid-template-columns:1fr;gap:36px}
  .cv-wrap{max-width:240px}
}
.orsep{display:flex;align-items:center;gap:18px;margin:44px 0 0;color:var(--dim);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.orsep::before,.orsep::after{content:"";height:1px;flex:1;background:var(--line)}

/* ==========================================================================
   per-page visuals (2026-07-25)
   ========================================================================== */
.pagevis{margin:56px 0 0;position:relative}
.pv-photo{position:relative;max-width:620px;margin-inline:auto}
.pv-photo::before{content:"";position:absolute;inset:-12% -8%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%,var(--glow),transparent 66%);filter:blur(10px);z-index:0}
.pv-frame{position:relative;z-index:1;border-radius:26px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--accent) 10%,transparent);
  animation:hpfloat 8s ease-in-out infinite alternate}
.pv-frame img{width:100%;height:auto;display:block}
.pv-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 55%);
  mix-blend-mode:soft-light}
.pv-cap{margin-top:18px;text-align:center;font-size:13.5px;color:var(--dim);letter-spacing:.03em}

/* chat mockup (single) */
.chatmock{max-width:430px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:26px;padding:26px 22px 24px;position:relative;
  box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 60px color-mix(in srgb,var(--accent) 9%,transparent)}
.chatmock::before{content:"";position:absolute;inset:-14% -10%;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,var(--glow),transparent 66%);filter:blur(12px)}
.cm-top{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.cm-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 30%,#000))}
.cm-nm{font-size:14.5px;font-weight:500}
.cm-st{font-size:11.5px;color:var(--accent);margin-top:2px}
.bub{max-width:78%;padding:11px 15px;border-radius:17px;font-size:14.5px;line-height:1.5;margin-bottom:10px;
  opacity:0;animation:bubin .5s cubic-bezier(.2,.7,.2,1) forwards}
.bub.them{background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:5px}
.bub.you{background:var(--accent);color:var(--accent-ink);margin-left:auto;border-bottom-right-radius:5px;font-weight:500}
.bub:nth-child(1){animation-delay:.2s}.bub:nth-child(2){animation-delay:1.0s}
.bub:nth-child(3){animation-delay:1.8s}.bub:nth-child(4){animation-delay:2.6s}
@keyframes bubin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.cm-foot{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);text-align:center}
@media (prefers-reduced-motion:reduce){.bub{opacity:1;animation:none}.pv-frame{animation:none}}

/* heartbeat line (heartbroken) */
.ecg{max-width:620px;margin-inline:auto;position:relative}
.ecg svg{width:100%;height:auto;display:block;overflow:visible}
.ecg path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 9px var(--glow));
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:trace 5.5s cubic-bezier(.4,0,.5,1) infinite}
@keyframes trace{0%{stroke-dashoffset:1200}55%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ecg-cap{margin-top:20px;text-align:center;font-size:13.5px;color:var(--dim)}
@media (prefers-reduced-motion:reduce){.ecg path{stroke-dashoffset:0;animation:none}}

/* contact + form placeholder */
.form-slot{margin-top:30px;border:1px dashed color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:16px;padding:26px 24px;text-align:center;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.form-slot b{display:block;font-size:14.5px;color:var(--txt);font-weight:500}
.form-slot span{display:block;margin-top:7px;font-size:13px;color:var(--dim)}
.contact-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px;position:relative}

/* ==========================================================================
   Art-of-Chatting components (ported from jasexplains-rebuild, re-skinned)
   ========================================================================== */
.showcase{display:grid;grid-template-columns:1fr auto;gap:clamp(34px,6vw,80px);align-items:center}
@media(max-width:900px){.showcase{grid-template-columns:1fr;justify-items:center}}

.phone{width:300px;height:600px;border-radius:44px;background:#0b0810;
  border:1px solid var(--line);flex-shrink:0;position:relative;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.62),0 0 0 10px #150F1E,0 0 110px var(--glow)}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:110px;height:26px;background:#000;border-radius:14px;z-index:3}
.scrn{position:absolute;inset:0;padding:52px 16px 20px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.day{text-align:center;font-size:11px;color:var(--dim);margin:2px 0 6px}
.msg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:13.5px;line-height:1.45;
  opacity:0;transform:translateY(14px) scale(.96);animation:pop .5s forwards}
.msg.them{background:var(--surface2);color:var(--txt);align-self:flex-start;border-bottom-left-radius:6px}
.msg.me{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#fff));
  color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:6px;font-weight:500}
.msg .tick{font-size:10px;opacity:.8;margin-left:6px}
.typing{align-self:flex-start;background:var(--surface2);border-radius:18px;border-bottom-left-radius:6px;
  padding:12px 16px;display:flex;gap:5px;opacity:0;animation:pop .4s forwards}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes pop{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* step cards */
.hgrid{margin-top:54px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.hcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:36px 28px;text-align:center;transition:.32s cubic-bezier(.2,.7,.2,1)}
.hcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
  box-shadow:0 18px 46px rgba(0,0,0,.45),0 0 40px var(--glow)}
.hcard .ic{width:62px;height:62px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;font-size:26px;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 34%,transparent),color-mix(in srgb,var(--accent) 8%,transparent))}
.hcard h4{font-size:18.5px;font-weight:500;margin-bottom:11px;letter-spacing:-.015em}
.hcard p{font-size:14.5px;color:var(--muted);line-height:1.65;font-weight:300}

/* testimonial marquee */
.mq-wrap{position:relative;display:flex;flex-direction:column;gap:20px;margin-top:52px}
.mq{display:flex;overflow:hidden;position:relative}
.mq .track{display:flex;gap:20px;padding-right:20px;width:max-content;
  animation:scrollx var(--dur,44s) linear infinite}
.mq.rev .track{animation-direction:reverse}
.mq:hover .track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-fade{position:absolute;top:0;bottom:0;width:150px;z-index:2;pointer-events:none}
.mq-fade.l{left:0;background:linear-gradient(to right,var(--bg2),transparent)}
.mq-fade.r{right:0;background:linear-gradient(to left,var(--bg2),transparent)}
.tcard{width:360px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;flex-shrink:0}
.tcard q{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300;quotes:"\201C" "\201D"}
.tcard .who{display:flex;align-items:center;gap:13px}
.tcard .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:15px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#000));color:var(--accent-ink)}
.tcard .who b{display:block;font-weight:500;font-size:14.5px;color:var(--txt)}
.tcard .who span{font-size:12.5px;color:var(--dim)}
@media (prefers-reduced-motion:reduce){.mq .track{animation:none}.msg,.typing{opacity:1;animation:none}}

/* ==========================================================================
   symbol heroes (2026-07-26) — heartbreak-healing + chat-spark motion graphics
   ========================================================================== */
.hp-frame.symbol{aspect-ratio:4/5;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 8%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),
    radial-gradient(100% 70% at 50% 105%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
    var(--surface)}
.hp-frame.symbol svg{width:78%;height:auto;overflow:visible}

/* ---- heartbreak → healing ---- */
.hb-sym .outline{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 14px var(--glow))}
.hb-sym .half{animation:hbsplit 10s cubic-bezier(.4,0,.3,1) infinite}
.hb-sym .half.r{animation-name:hbsplitR}
@keyframes hbsplit{0%,14%{transform:translate(0,0) rotate(0)}
  22%,42%{transform:translate(-17px,6px) rotate(-3deg)}
  58%,100%{transform:translate(0,0) rotate(0)}}
@keyframes hbsplitR{0%,14%{transform:translate(0,0) rotate(0)}
  22%,42%{transform:translate(17px,6px) rotate(3deg)}
  58%,100%{transform:translate(0,0) rotate(0)}}
.hb-sym .crack{fill:none;stroke:var(--accent2);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:hbcrack 10s linear infinite}
@keyframes hbcrack{0%,13%{stroke-dashoffset:340;opacity:1}
  20%{stroke-dashoffset:0;opacity:1}55%{stroke-dashoffset:0;opacity:1}
  66%,100%{stroke-dashoffset:0;opacity:0}}
.hb-sym .stitch{fill:none;stroke:var(--accent2);stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;animation:hbstitch 10s linear infinite}
.hb-sym .stitch.s2{animation-delay:.55s}.hb-sym .stitch.s3{animation-delay:1.1s}.hb-sym .stitch.s4{animation-delay:1.65s}
@keyframes hbstitch{0%,58%{stroke-dashoffset:60;opacity:0}
  60%{opacity:1}68%{stroke-dashoffset:0;opacity:1}
  88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.hb-sym .pulse{transform-origin:200px 210px;animation:hbpulse 10s ease-in-out infinite}
@keyframes hbpulse{0%,74%{transform:scale(1)}
  79%{transform:scale(1.05)}83%{transform:scale(1)}
  87%{transform:scale(1.04)}91%,100%{transform:scale(1)}}
.hb-sym .glowheart{fill:var(--accent);opacity:0;filter:blur(26px);
  animation:hbglow 10s ease-in-out infinite}
@keyframes hbglow{0%,70%{opacity:0}80%{opacity:.34}88%{opacity:.18}100%{opacity:0}}
.hb-cap,.cs-cap{margin-top:0}

/* ---- conversation ignites ---- */
.cs-sym .bub{transform-origin:center;opacity:0;animation:csbub 9s cubic-bezier(.2,.7,.2,1) infinite}
.cs-sym .bub.b1{animation-delay:0s}
.cs-sym .bub.b2{animation-delay:1.1s}
.cs-sym .bub.b3{animation-delay:2.3s}
@keyframes csbub{0%{opacity:0;transform:translateY(16px) scale(.92)}
  6%,84%{opacity:1;transform:translateY(0) scale(1)}
  94%,100%{opacity:0;transform:translateY(-6px) scale(.98)}}
.cs-sym .b-them{fill:var(--surface2);stroke:var(--line);stroke-width:2}
.cs-sym .b-you{fill:var(--accent);filter:drop-shadow(0 0 18px var(--glow))}
.cs-sym .dot{fill:var(--dim);animation:csdot 1.2s infinite}
.cs-sym .dot.d2{animation-delay:.2s}.cs-sym .dot.d3{animation-delay:.4s}
@keyframes csdot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.cs-sym .line-you{stroke:var(--accent-ink);stroke-width:6;stroke-linecap:round;opacity:.85}
.cs-sym .line-them{stroke:var(--muted);stroke-width:6;stroke-linecap:round;opacity:.6}
.cs-sym .spark{fill:var(--accent2);transform-origin:center;opacity:0;animation:csspark 9s ease-out infinite}
.cs-sym .spark.p2{animation-delay:.35s}.cs-sym .spark.p3{animation-delay:.7s}
@keyframes csspark{0%,38%{opacity:0;transform:translateY(0) scale(.6)}
  44%{opacity:1;transform:translateY(-26px) scale(1)}
  58%,100%{opacity:0;transform:translateY(-64px) scale(.5)}}
.cs-sym .heart{fill:var(--accent);filter:drop-shadow(0 0 16px var(--glow));
  transform-origin:200px 150px;opacity:0;animation:csheart 9s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes csheart{0%,46%{opacity:0;transform:translateY(24px) scale(.5)}
  54%{opacity:1;transform:translateY(0) scale(1.08)}
  58%{transform:translateY(0) scale(1)}
  82%{opacity:1;transform:translateY(-8px) scale(1)}
  92%,100%{opacity:0;transform:translateY(-30px) scale(.9)}}

@media (prefers-reduced-motion:reduce){
  .hb-sym .half,.hb-sym .crack,.hb-sym .stitch,.hb-sym .pulse,.hb-sym .glowheart,
  .cs-sym .bub,.cs-sym .spark,.cs-sym .heart,.cs-sym .dot{animation:none}
  .hb-sym .crack{stroke-dashoffset:340}
  .hb-sym .stitch{stroke-dashoffset:0;opacity:1}
  .cs-sym .bub,.cs-sym .heart{opacity:1;transform:none}
}



/* qualifying-form selects */
.f select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;color:var(--txt);font-family:inherit;font-size:15.5px;font-weight:300;
  transition:border-color .25s,box-shadow .25s,background .25s;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.f select:focus{outline:none;border-color:var(--accent);background-color:var(--bg2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent),0 0 34px var(--glow)}
.f select option{background:var(--surface);color:var(--txt)}

/* ---------- guitar beside the guitar quote ---------- */
.quotecard.withvis{display:grid;grid-template-columns:1.25fr minmax(190px,270px);gap:clamp(26px,5vw,60px);align-items:center}
.quotecard.withvis>*{min-width:0}
.quotecard.withvis .q{max-width:none}
.qv{position:relative;justify-self:center}
.qv::before{content:"";position:absolute;inset:-18% -22%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%,var(--glow),transparent 66%);filter:blur(10px)}
.gtr{position:relative;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 16px var(--glow));animation:gtrsway 9s ease-in-out infinite alternate}
@keyframes gtrsway{from{transform:rotate(-2.5deg) translateY(0)}to{transform:rotate(2.5deg) translateY(-10px)}}
/* strings get plucked in sequence */
.gtr .str{transform-origin:center;animation:pluck 4.5s ease-in-out infinite}
.gtr .s1{animation-delay:0s}.gtr .s2{animation-delay:.13s}.gtr .s3{animation-delay:.26s}
.gtr .s4{animation-delay:.39s}.gtr .s5{animation-delay:.52s}.gtr .s6{animation-delay:.65s}
@keyframes pluck{
  0%,70%,100%{transform:translateX(0);opacity:.85}
  73%{transform:translateX(-2.2px);opacity:1}
  77%{transform:translateX(2px);opacity:1}
  81%{transform:translateX(-1.2px)}
  85%{transform:translateX(.8px)}
  90%{transform:translateX(0);opacity:.85}
}
/* sound-hole resonance ring */
.gtr .ring{transform-origin:110px 262px;opacity:0;animation:reso 4.5s ease-out infinite}
@keyframes reso{0%,70%{transform:scale(1);opacity:0}
  76%{opacity:.55}100%{transform:scale(2.6);opacity:0}}
/* notes float away after the pluck */
.gtr .note{opacity:0;animation:notefly 4.5s ease-out infinite}
.gtr .n1{animation-delay:.1s}.gtr .n2{animation-delay:.45s}.gtr .n3{animation-delay:.8s}
@keyframes notefly{
  0%,70%{opacity:0;transform:translate(0,0) scale(.7)}
  78%{opacity:.9;transform:translate(6px,-22px) scale(1)}
  100%{opacity:0;transform:translate(16px,-70px) scale(.85)}
}
@media (prefers-reduced-motion:reduce){
  .gtr,.gtr .str,.gtr .ring,.gtr .note{animation:none}
  .gtr .note{opacity:.9}
}
/* ---------- heartbreak visual: "time doesn't heal you, effort does" ----------
   Hands spin on their own (time). The ring only closes as the sparks rise (effort),
   then a clarity bloom. Same construction rules as .gtr: inline currentColor. */
.hlv{position:relative;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 16px var(--glow))}
.hlv .mn{transform-origin:110px 215px;animation:hlspin 7s linear infinite}
.hlv .hr{transform-origin:110px 215px;animation:hlspin 28s linear infinite}
@keyframes hlspin{to{transform:rotate(360deg)}}
/* r=93 -> circumference ~584 */
.hlv .arc{stroke-dasharray:584;stroke-dashoffset:584;
  animation:hlfill 7.5s cubic-bezier(.6,0,.3,1) infinite}
@keyframes hlfill{
  0%{stroke-dashoffset:584;opacity:.9}
  14%{stroke-dashoffset:476}
  30%{stroke-dashoffset:338}
  48%{stroke-dashoffset:206}
  66%{stroke-dashoffset:84}
  78%,90%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
.hlv .bloom{transform-origin:110px 215px;opacity:0;animation:hlbloom 7.5s ease-out infinite}
@keyframes hlbloom{0%,74%{transform:scale(1);opacity:0}
  82%{opacity:.5}100%{transform:scale(1.55);opacity:0}}
.hlv .spark{opacity:0;animation:hlrise 7.5s ease-out infinite}
.hlv .k1{animation-delay:.2s}.hlv .k2{animation-delay:1.7s}.hlv .k3{animation-delay:3.2s}
@keyframes hlrise{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  16%{opacity:.95;transform:translateY(-30px) scale(1)}
  100%{opacity:0;transform:translateY(-120px) scale(.7)}
}
@media (prefers-reduced-motion:reduce){
  .hlv .mn,.hlv .hr,.hlv .arc,.hlv .bloom,.hlv .spark{animation:none}
  .hlv .arc{stroke-dashoffset:0}
  .hlv .spark{opacity:.9}
}

/* ---- single: the chat that finally works ---- */
/* .by is a third grid child, so pin it under the quote and let the visual span both rows. */
/* Keep the grid to exactly TWO children — a text column and the visual — so `align-items:center`
   centres both against each other. Putting .q and .by in as separate grid children instead makes
   them two stretched rows, which pushes the visual off-centre against the text. */
.quotecard.withvis .qtext{display:flex;flex-direction:column;justify-content:center}
.csv{position:relative;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 16px var(--glow))}
.csv .typing{animation:csvtype 8s linear infinite}
@keyframes csvtype{0%,36%{opacity:1}43%,92%{opacity:0}100%{opacity:1}}
.csv .dot{animation:csvdot 1.3s ease-in-out infinite}
.csv .d2{animation-delay:.16s}.csv .d3{animation-delay:.32s}
@keyframes csvdot{0%,100%{opacity:.28;transform:translateY(0)}
  50%{opacity:.9;transform:translateY(-3px)}}
.csv .sent{opacity:0;animation:csvsend 8s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes csvsend{
  0%,38%{opacity:0;transform:translateY(12px) scale(.9)}
  46%,90%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-4px) scale(1)}
}
.csv .reply{opacity:0;animation:csvreply 8s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes csvreply{
  0%,56%{opacity:0;transform:translateY(10px)}
  64%,90%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(0)}
}
.csv .ring{transform-origin:137px 150px;opacity:0;animation:csvring 8s ease-out infinite}
@keyframes csvring{0%,42%{transform:scale(.72);opacity:0}
  52%{opacity:.4}100%{transform:scale(1.5);opacity:0}}
.csv .caret{animation:csvblink 1.1s steps(1,end) infinite}
@keyframes csvblink{0%,49%{opacity:.85}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .csv .typing,.csv .dot,.csv .sent,.csv .reply,.csv .ring,.csv .caret{animation:none}
  .csv .typing,.csv .ring{opacity:0}
  .csv .sent,.csv .reply{opacity:1;transform:none}
}

@media(max-width:820px){
  .quotecard.withvis{grid-template-columns:1fr;gap:34px}
  .qv{max-width:230px}
}

/* ---------- real WhatsApp proof wall ---------- */
.shots{margin-top:52px;columns:3;column-gap:18px}
@media(max-width:940px){.shots{columns:2}}
@media(max-width:600px){.shots{columns:1}}
.shot{break-inside:avoid;margin:0 0 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:.32s cubic-bezier(.2,.7,.2,1)}
.shot:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 38px var(--glow)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:15px 18px 17px;font-size:13.5px;line-height:1.55;color:var(--muted);
  border-top:1px solid var(--line);background:var(--bg2)}
.shot figcaption::before{content:"¹3 ";color:var(--accent);font-weight:600}

/* ---------- calendly cta ---------- */
.calendly-cta{display:flex;gap:13px;flex-wrap:wrap;position:relative;margin-top:30px}
.cal-missing{margin-top:14px;font-size:12.5px;color:var(--accent);
  border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);border-radius:8px;padding:8px 12px;display:inline-block}