:root{
  /* ink */
  --ink:#2D2D2D; --ink-2:#4a4a4a; --ink-soft:#6f7b85;
  /* surfaces */
  --paper:#F3EFE7; --paper-2:#EAE4D8; --white:#FFFFFF;
  /* brand */
  --burgundy:#7F1732; --burgundy-dk:#5E1125;
  /* structural blues */
  --navy:#183A5B; --steel:#5D7A94;
  /* greens */
  --sage:#8FA88C; --teal:#2E8C87; --teal-dk:#23706C;
  /* section tints */
  --t-sage:#DCE6DA; --t-teal:#D6E7E5; --t-steel:#DDE5EE;
  --green:#b8e18d; --green-pale:#E7EDE5;
  --line:rgba(24,58,91,.16);
  --display:"Oswald",Impact,sans-serif; --body:"Open Sans",system-ui,sans-serif;
  --r:6px; --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.15;text-transform:uppercase;letter-spacing:.01em}
a{color:var(--burgundy)}
img{max-width:100%;display:block}
.flag{font-family:var(--body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dk);background:var(--green-pale);border-radius:3px;padding:2px 7px;display:inline-block;vertical-align:middle;font-weight:700}

header{position:sticky;top:0;z-index:50;background:rgba(251,251,251,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:22px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 2px 6px rgba(45,45,45,.18)}
.brand b{font-family:var(--display);font-weight:600;color:var(--burgundy);font-size:17px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;display:block}
.brand span{display:block;margin-top:5px;font-family:var(--body);font-size:10px;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;font-weight:600;line-height:1}
nav{margin-left:auto;display:flex;gap:19px;align-items:center}
nav a{font-family:var(--display);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none}
nav a:hover{color:var(--burgundy)}
.lang{border:1px solid var(--steel);border-radius:3px;font-size:12px;font-weight:700;padding:5px 9px;background:none;cursor:pointer;font-family:var(--body);letter-spacing:.06em}
.btn{display:inline-block;background:var(--burgundy);color:var(--white)!important;text-decoration:none;padding:11px 20px;border-radius:var(--r);font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:none;cursor:pointer}
.btn:hover{background:var(--burgundy-dk)}
.btn.alt{background:var(--green);color:var(--ink)!important}
.btn.ghost{background:none;color:var(--burgundy)!important;border:1.5px solid var(--burgundy)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  margin-left:auto;padding:0 9px;background:none;border:1px solid var(--steel);border-radius:var(--r);cursor:pointer}
.burger span{display:block;height:2px;width:100%;background:var(--burgundy);border-radius:2px;
  transition:transform .25s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(45,45,45,.45);z-index:48;border:0}

@media(max-width:900px){
  .burger{display:flex}
  nav{position:fixed;top:70px;left:0;right:0;z-index:49;flex-direction:column;align-items:stretch;
      gap:0;background:var(--white);border-bottom:1px solid var(--line);
      box-shadow:0 14px 30px rgba(45,45,45,.16);
      max-height:0;overflow:hidden;visibility:hidden;
      transition:max-height .28s ease, visibility 0s linear .28s}
  nav.open{max-height:calc(100vh - 70px);overflow-y:auto;visibility:visible;transition-delay:0s}
  nav a{padding:15px 24px;border-bottom:1px solid var(--line);font-size:16px}
  nav a:not(.btn){display:block}
  nav .lang{margin:14px 24px 0;align-self:flex-start}
  nav .sms{margin:12px 24px}
  nav .btn{margin:6px 24px 20px;text-align:center}
  .smsline{display:inline}
}

.hero{background:var(--white);border-bottom:1px solid var(--line);padding:70px 0 76px}
.hero .wrap{display:grid;grid-template-columns:1.35fr .9fr;gap:52px;align-items:center}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:32px}}
.hero h1{font-size:clamp(34px,5vw,54px);color:var(--burgundy);font-weight:600}
.hero .sub{font-size:18px;color:var(--ink-2);margin-top:18px;max-width:54ch}
.hero .cta{margin-top:28px;display:flex;gap:11px;flex-wrap:wrap}
.hero .mark{width:100%;max-width:330px;margin:0 auto;filter:drop-shadow(0 12px 34px rgba(0,0,0,.13))}
.modes{margin-top:26px;font-family:var(--display);font-size:15px;letter-spacing:.12em;color:var(--ink-soft)}
.modes b{color:var(--burgundy);font-weight:600}

section{padding:72px 0;border-bottom:1px solid var(--line)}
.s-white{background:var(--white)}
.s-ivory{background:var(--paper)}
.s-sage{background:var(--t-sage)}
.s-teal{background:var(--t-teal)}
.s-steel{background:var(--t-steel)}
.eyebrow{font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-dk);margin-bottom:9px}
section h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:16px;color:var(--burgundy);font-weight:600}
.lead{color:var(--ink-2);max-width:70ch;margin-bottom:26px}

.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);background:var(--white)}
.s-white .acc details{background:var(--paper)}
.acc summary{list-style:none;cursor:pointer;padding:17px 18px;display:flex;align-items:center;gap:13px;font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary:before{content:"+";color:var(--burgundy);font-family:var(--body);font-weight:700;font-size:19px;width:20px;flex:none}
.acc details[open] summary:before{content:"–"}
.acc details[open] summary{color:var(--burgundy)}
.acc .body{padding:0 18px 22px 51px;color:var(--ink-2);max-width:78ch;font-size:15px}
.acc .body p + p,.acc .body ul{margin-top:11px}
.acc .body ul{margin-left:19px}
.acc .body li{margin-bottom:5px}
.acc h4{font-size:14px;letter-spacing:.1em;color:var(--burgundy);margin:16px 0 5px}

.fam{margin-bottom:32px}
.fam h3{font-family:var(--display);font-size:15px;letter-spacing:.18em;color:var(--navy);margin-bottom:15px;padding-bottom:9px;border-bottom:2px solid var(--sage)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;align-self:start}
.tcard summary{list-style:none;cursor:pointer}
.tcard summary::-webkit-details-marker{display:none}
.tcard img,.tcard .noph{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1);transition:filter .25s}
.tcard:hover img{filter:grayscale(0)}
.tcard .noph{background:var(--paper-2);display:grid;place-items:center;color:var(--ink-soft);font-size:12px;text-align:center;padding:14px;filter:none}
.tcard .meta{padding:13px 15px}
.tcard b{display:block;font-family:var(--display);font-size:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--burgundy);font-weight:500}
.tcard .inst{font-size:13px;color:var(--ink-soft);margin-top:2px}
.tcard .mode{display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;background:var(--green-pale);color:var(--teal-dk);padding:2px 7px;border-radius:3px;font-weight:700}
.tcard .bio{padding:12px 15px 14px;font-size:12.5px;line-height:1.62;font-weight:300;color:var(--ink-soft);border-top:1px solid var(--line);max-height:250px;overflow-y:auto;scrollbar-width:thin}
.tcard[open] .bio{-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 92%,transparent 100%)}
.tcard .bio p + p{margin-top:8px}
.arch{font-size:13.5px;color:var(--ink-soft);margin-top:6px;max-width:78ch}

.stats{display:flex;gap:34px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin-bottom:22px}
.s-white .stats{background:var(--paper)}
.stats div b{display:block;font-family:var(--display);font-size:30px;color:var(--burgundy);font-weight:600;line-height:1.1}
.stats div span{font-size:13px;color:var(--ink-soft)}
.askbar{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:22px 26px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.askbar p{flex:1;min-width:250px;font-size:15px}
.askbar strong{color:var(--green)}

.bigcta{background:var(--burgundy);color:#fff;border-radius:var(--r);padding:30px 32px;margin-bottom:30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.bigcta .txt{flex:1;min-width:260px}
.bigcta h3{font-size:24px;color:#fff;margin-bottom:6px;font-weight:600}
.bigcta p{color:rgba(255,255,255,.82);font-size:15px}
.bigbtn{display:inline-block;background:var(--green);color:var(--ink)!important;text-decoration:none;padding:18px 34px;border-radius:var(--r);font-family:var(--display);font-size:19px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.bigbtn:hover{background:#fff}
.ptab{width:100%;border-collapse:collapse;margin-top:4px}
.ptab th{text-align:left;font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
.ptab td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.ptab td.f{font-family:var(--display);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--burgundy);white-space:nowrap}
.ptab td.p{text-align:right;white-space:nowrap;font-family:var(--display);font-size:19px;color:var(--burgundy)}
.ptab td.p small{display:block;font-family:var(--body);font-size:11px;color:var(--ink-soft);letter-spacing:0;text-transform:none}
.ptab tr:last-child td{border-bottom:none}
@media(max-width:640px){
  .ptab,.ptab tbody,.ptab tr,.ptab td{display:block;width:100%}
  .ptab thead{display:none}
  .ptab tr{border-bottom:1px solid var(--line);padding:10px 0}
  .ptab td{border:none;padding:2px 0}
  .ptab td.p{text-align:left;margin-top:5px}
}
.perlesson{background:var(--paper);border:1px solid var(--sage);color:var(--ink);border-radius:var(--r);padding:11px 15px;font-size:13.5px;margin-bottom:18px}
.pdfrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px}




.launch{display:inline-flex;align-items:center;gap:9px;line-height:1}
.launch .clef{flex:none}
.panel .top{display:flex;align-items:center;gap:11px}
.panel .top .clef{flex:none;color:var(--green)}
.panel .top .ttl{flex:1}
.sms{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:var(--ink)!important;
  text-decoration:none;padding:9px 15px;border-radius:var(--r);font-family:var(--display);
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.sms:hover{background:#a5d477}
.sms.big{padding:14px 24px;font-size:17px}
.smsfloat{position:fixed;right:20px;bottom:92px;z-index:99;display:inline-flex;align-items:center;gap:8px;
  background:var(--green);color:var(--ink);border:none;border-radius:var(--r);padding:12px 17px;
  font-family:var(--display);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;box-shadow:0 8px 22px rgba(45,45,45,.28)}
.panel{bottom:154px}

.partner{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:26px 30px;margin-top:30px}
.partner img{width:96px;height:96px;flex:none}
.partner .txt{flex:1;min-width:250px}
.partner h3{font-size:20px;color:var(--burgundy);margin-bottom:6px;font-weight:600}
.partner p{font-size:14.5px;color:var(--ink-2)}
@media(max-width:560px){.partner{padding:22px}.partner img{width:74px;height:74px}}

/* ===== hero ink animation ===== */
.inkstage{position:relative;width:100%;max-width:340px;aspect-ratio:1;margin:0 auto;cursor:pointer}
/* ---- the drop: present from the start, breathing to the music ---- */
.dropwrap{position:absolute;left:50%;top:54%;width:46%;aspect-ratio:1;translate:-50% -50%;z-index:2}
/* the notehead: an ellipse, tilted the way a real one is */
.note{position:absolute;inset:0;transform-origin:32% 86%}
.head{position:absolute;left:1%;bottom:3%;width:62%;aspect-ratio:1.70;transform:rotate(-12deg)}
/* the stem, rising off the right edge of the head */
.stem{position:absolute;left:57.6%;bottom:24%;width:4.7%;height:108%;
      border-radius:44% 44% 18% 18%/3.5% 3.5% 1.5% 1.5%;
      transform-origin:50% 100%;
      background:
        linear-gradient(90deg,#000 0%,#080808 16%,#2c2c2c 38%,#585858 47%,#232323 57%,#070707 78%,#000 100%),
        linear-gradient(180deg,#1a1a1a 0%,#000 22%,#000 78%,#141414 100%);
      background-blend-mode:screen,normal;
      box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), 2px 0 5px rgba(0,0,0,.45)}
/* specular streak down the shaft */
.stem:before{content:"";position:absolute;left:30%;top:2%;width:22%;height:58%;border-radius:2px;
      background:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 100%);
      filter:blur(.4px)}
/* polished cap */
.stem:after{content:"";position:absolute;left:14%;top:.3%;width:72%;height:1.8%;border-radius:50%;
      background:radial-gradient(ellipse at 40% 40%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.15) 60%,rgba(255,255,255,0) 100%)}
.drop{position:absolute;inset:0;border-radius:50%;overflow:hidden;transform-origin:50% 55%;
      background:
        radial-gradient(ellipse 34% 16% at 68% 90%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 70%),
        radial-gradient(circle at 40% 34%, #141414 0%, #0a0a0a 30%, #050505 58%, #000 82%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        inset -7% -9% 16% rgba(255,255,255,.13),
        inset 6% 7% 22% rgba(0,0,0,.95),
        0 12% 20% rgba(0,0,0,.45);
      animation:breathe 2.6s ease-in-out infinite}
/* hard specular pin */
.drop:after{content:"";position:absolute;left:22%;top:16%;width:17%;height:13%;
      background:radial-gradient(ellipse at center,#fff 0%,#fff 48%,rgba(255,255,255,0) 78%);
      border-radius:50%;transform:rotate(-26deg)}
.spark{position:absolute;left:43%;top:28%;width:6%;height:4.6%;background:#fff;
      border-radius:50%;filter:blur(.4px);opacity:.85;transform:rotate(-26deg);z-index:3}
/* travelling sheen */
.drop:before{content:"";position:absolute;inset:-30%;
      background:linear-gradient(114deg,transparent 44%,rgba(255,255,255,.42) 49%,
                 rgba(255,255,255,.06) 52%,transparent 57%);
      animation:sheen 3.6s ease-in-out infinite}

/* ---- the splash: the drop bursting open, notes already knocked out white ---- */
.splash{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3;
        transform-origin:42% 67%;transform:scale(.4);opacity:0}

/* ---- the notes, fluttering in ---- */
.flier{position:absolute;left:50%;top:50%;width:30%;translate:-50% -50%;z-index:1;
       transform-origin:50% 60%;opacity:0;color:var(--ink)}
.wing{transform-origin:50% 70%}

.ring{position:absolute;left:42%;top:67%;width:12px;height:12px;translate:-50% -50%;
      border:3px solid var(--ink);border-radius:50%;opacity:0}

/* idle: liquid jiggle, non-uniform so it reads as a wobbling drop not a pulsing dot */
@keyframes breathe{
  0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%; transform:scale(1,1)}
  22%    {border-radius:54% 46% 47% 53%/47% 52% 48% 53%; transform:scale(1.03,.972)}
  45%    {border-radius:46% 54% 53% 47%/53% 47% 53% 47%; transform:scale(.972,1.032)}
  68%    {border-radius:52% 48% 46% 54%/48% 53% 47% 52%; transform:scale(1.022,.984)}
  85%    {border-radius:48% 52% 52% 48%/52% 48% 52% 48%; transform:scale(.988,1.014)}
}

@keyframes sheen{
  0%,100%{transform:translateX(-42%) rotate(0deg)}
  50%    {transform:translateX(42%)  rotate(0deg)}
}
/* tremor: still at first, then shivering harder as the notes close in */
@keyframes tremor{
  0%,18%{transform:translate(0,0)}
  18.0%{transform:translate(0.05%,-0.03%)}
  18.9%{transform:translate(-0.05%,0.05%)}
  19.8%{transform:translate(0.05%,-0.03%)}
  20.7%{transform:translate(-0.05%,0.02%)}
  21.6%{transform:translate(0.05%,-0.04%)}
  22.5%{transform:translate(-0.06%,0.05%)}
  23.4%{transform:translate(0.06%,-0.02%)}
  24.4%{transform:translate(-0.06%,0.03%)}
  25.3%{transform:translate(0.06%,-0.05%)}
  26.3%{transform:translate(-0.06%,0.05%)}
  27.2%{transform:translate(0.07%,-0.02%)}
  28.2%{transform:translate(-0.07%,0.04%)}
  29.1%{transform:translate(0.07%,-0.07%)}
  30.1%{transform:translate(-0.08%,0.05%)}
  31.1%{transform:translate(0.08%,-0.03%)}
  32.1%{transform:translate(-0.09%,0.06%)}
  33.1%{transform:translate(0.09%,-0.08%)}
  34.2%{transform:translate(-0.10%,0.04%)}
  35.2%{transform:translate(0.10%,-0.04%)}
  36.3%{transform:translate(-0.11%,0.09%)}
  37.4%{transform:translate(0.11%,-0.09%)}
  38.5%{transform:translate(-0.12%,0.04%)}
  39.6%{transform:translate(0.13%,-0.07%)}
  40.7%{transform:translate(-0.14%,0.13%)}
  41.9%{transform:translate(0.15%,-0.10%)}
  43.1%{transform:translate(-0.16%,0.05%)}
  44.3%{transform:translate(0.18%,-0.12%)}
  45.5%{transform:translate(-0.19%,0.17%)}
  46.8%{transform:translate(0.21%,-0.10%)}
  48.0%{transform:translate(-0.22%,0.08%)}
  49.3%{transform:translate(0.25%,-0.20%)}
  50.7%{transform:translate(-0.27%,0.22%)}
  52.0%{transform:translate(0.30%,-0.11%)}
  53.4%{transform:translate(-0.33%,0.16%)}
  54.9%{transform:translate(0.36%,-0.33%)}
  56.3%{transform:translate(-0.40%,0.27%)}
  57.8%{transform:translate(0.45%,-0.14%)}
  59.4%{transform:translate(-0.50%,0.32%)}
  61.0%{transform:translate(0.57%,-0.52%)}
  62.6%{transform:translate(-0.64%,0.34%)}
  64.2%{transform:translate(0.73%,-0.26%)}
  65.9%{transform:translate(-0.84%,0.66%)}
  67.7%{transform:translate(0.97%,-0.82%)}
  69.5%{transform:translate(-1.12%,0.44%)}
  71.4%{transform:translate(1.30%,-0.59%)}
  73.3%{transform:translate(-1.53%,1.36%)}
  75.3%{transform:translate(1.80%,-1.30%)}
  77.3%{transform:translate(-2.15%,0.70%)}
  79.4%{transform:translate(2.57%,-1.53%)}
  81.6%{transform:translate(-3.11%,2.86%)}
  83.8%{transform:translate(3.79%,-2.15%)}
  86%,100%{transform:translate(0,0)}
}
/* butterfly approach: drifts, banks, hesitates, then dives */
@keyframes flutter{
  /* in from behind, upper left */
  0%  {opacity:0; transform:translate(-330%,-150%) rotate(-26deg) scale(.24)}
  7%  {opacity:1}
  15% {transform:translate(-235%,-205%) rotate(16deg)  scale(.32)}
  24% {transform:translate(-140%,-130%) rotate(-20deg) scale(.40)}
  /* crossing behind the note, heading right */
  33% {transform:translate(-42%,-186%)  rotate(15deg)  scale(.47)}
  42% {transform:translate(58%,-118%)   rotate(-13deg) scale(.55)}
  51% {transform:translate(132%,-166%)  rotate(12deg)  scale(.62)}
  /* out to the right, hovering */
  60% {transform:translate(186%,-92%)   rotate(-10deg) scale(.70)}
  68% {transform:translate(212%,-136%)  rotate(9deg)   scale(.76)}
  74% {transform:translate(196%,-70%)   rotate(-7deg)  scale(.81)}
  /* the wind-up */
  79% {opacity:1; transform:translate(222%,-104%) rotate(12deg) scale(.86)}
  /* smack back down onto the round part */
  83% {opacity:1; transform:translate(96%,-32%)   rotate(-6deg) scale(.96)}
  86% {opacity:1; transform:translate(-28%,50%)   rotate(0deg)  scale(1.06)}
  87.5%{opacity:0; transform:translate(-28%,50%)  rotate(0deg)  scale(1)}
  100%{opacity:0}
}
/* wing-beat: the flutter reads as wings, and stops during the dive */
@keyframes wings{
  0%,79%{transform:scaleX(1)}
  3%  {transform:scaleX(.40)}  7%  {transform:scaleX(1)}
  12% {transform:scaleX(.46)}  17% {transform:scaleX(1)}
  22% {transform:scaleX(.42)}  27% {transform:scaleX(1)}
  32% {transform:scaleX(.48)}  37% {transform:scaleX(1)}
  42% {transform:scaleX(.44)}  47% {transform:scaleX(1)}
  52% {transform:scaleX(.50)}  57% {transform:scaleX(1)}
  62% {transform:scaleX(.45)}  67% {transform:scaleX(1)}
  72% {transform:scaleX(.52)}  77% {transform:scaleX(1)}
  100%{transform:scaleX(1)}
}
/* the drop takes the hit: squashes, then is gone */
@keyframes skin{

  0%,18%{border-radius:50%}
  21%{border-radius:51% 49% 50% 50%/50% 50% 49% 51%}
  24%{border-radius:49% 51% 50% 50%/50% 50% 51% 49%}
  27%{border-radius:51% 49% 49% 51%/49% 51% 50% 50%}
  30%{border-radius:49% 51% 51% 49%/51% 49% 50% 50%}
  33%{border-radius:52% 48% 49% 51%/49% 51% 48% 52%}
  36%{border-radius:48% 52% 52% 48%/52% 48% 52% 48%}
  40%{border-radius:53% 47% 48% 52%/48% 53% 47% 53%}
  44%{border-radius:47% 53% 54% 46%/54% 46% 55% 45%}
  /* it is losing its shape now */
  56%{border-radius:58% 42% 43% 57%/42% 59% 41% 58%}
  64%{border-radius:41% 59% 62% 38%/63% 37% 64% 36%}
  71%{border-radius:64% 36% 33% 67%/34% 68% 31% 69%}
  77%{border-radius:33% 67% 71% 29%/72% 28% 74% 26%}
  81%{border-radius:72% 28% 24% 76%/26% 77% 22% 78%}
  /* no longer a drop */
  84%{border-radius:26% 74% 79% 21%/80% 20% 83% 17%}
  85.5%{border-radius:60% 40% 38% 62%/40% 60% 36% 64%}
  86.5%{border-radius:50%}
}
@keyframes squash{

  0%,18%{transform:scale(1,1); opacity:1}
  21%{transform:scale(1.004,.996)}
  24%{transform:scale(.995,1.005)}
  27%{transform:scale(1.007,.993)}
  30%{transform:scale(.991,1.009)}
  33%{transform:scale(1.012,.988)}
  36%{transform:scale(.986,1.014)}
  40%{transform:scale(1.020,.980)}
  44%{transform:scale(.972,1.029)}
  /* it is losing its shape now */
  56%{transform:scale(1.09,.92)}
  64%{transform:scale(.90,1.13)}
  71%{transform:scale(1.17,.86) rotate(-2deg)}
  77%{transform:scale(.84,1.22) rotate(2deg)}
  81%{transform:scale(1.26,.79) rotate(-3deg)}
  /* no longer a drop */
  84%{transform:scale(.78,1.30) rotate(3deg)}
  85.5%{transform:scale(1.42,.66) rotate(-1deg); opacity:1}
  86.5%{transform:scale(1.62,.44); opacity:0}
  100%{opacity:0}
}
/* ink bursts outward from the squashed drop */
@keyframes splash{
  0%,85.5%{transform:scale(.34) rotate(-8deg); opacity:0}
  88.5%   {transform:scale(1.20) rotate(4deg); opacity:1}
  93%     {transform:scale(.95) rotate(-2deg); opacity:1}
  97%     {transform:scale(1.03) rotate(1deg); opacity:1}
  100%    {transform:scale(1) rotate(0); opacity:1}
}
@keyframes ring{
  0%,85.5%{opacity:0; width:12px; height:12px; border-width:4px}
  88%     {opacity:.45}
  100%    {opacity:0; width:150%; height:150%; border-width:0}
}

.play .drop  {animation:skin 4.6s cubic-bezier(.3,0,.5,1) forwards}
.play .note  {animation:squash 4.6s cubic-bezier(.3,0,.5,1) forwards}
.play .dropwrap{animation:tremor 4.6s linear forwards}
.play .splash{animation:splash 4.6s cubic-bezier(.16,1,.3,1) forwards}
.play .flier {animation:flutter 4.6s ease-in-out forwards}
.play .wing  {animation:wings 4.6s ease-in-out forwards}
.play .ring  {animation:ring 4.6s ease-out forwards}

@media (prefers-reduced-motion: reduce){
  .play .drop,.play .splash,.play .flier,.play .wing,.play .ring{animation:none}
  .drop,.dropwrap,.stem,.note{opacity:0;animation:none}
  .splash{transform:scale(1);opacity:1}
  .flier,.ring{display:none}
}
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:30px}
.band img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media(max-width:860px){.band{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.band{grid-template-columns:1fr}}
.band.duo{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){.band.duo{grid-template-columns:1fr}}

.photosec{position:relative;background-size:cover;background-position:center 35%;border:none}
.photosec:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,58,91,.66),rgba(45,45,45,.80))}
.photosec .wrap{position:relative;z-index:1}
.photosec h2,.photosec .eyebrow{color:var(--green)}
.photosec .lead{color:rgba(243,239,231,.86)}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
@media(max-width:780px){.forms{grid-template-columns:1fr}}
.fcard{background:var(--burgundy);color:#fff;border-radius:var(--r);padding:26px 28px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fcard h3{font-size:21px;color:#fff;font-weight:600}
.fcard p{color:rgba(255,255,255,.82);font-size:14.5px;flex:1}
.fcard .bigbtn{font-size:16px;padding:14px 24px;margin-top:6px}

.carou{position:relative;margin-top:16px}
.track{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.track img{flex:0 0 190px;width:190px;height:190px;object-fit:cover;border-radius:var(--r);scroll-snap-align:start;filter:grayscale(1);transition:filter .25s}
.track img:hover{filter:grayscale(0)}
.cnav{position:absolute;top:calc(50% - 24px);width:38px;height:38px;border-radius:50%;border:1px solid var(--steel);background:var(--white);color:var(--burgundy);font-size:22px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 3px 12px rgba(0,0,0,.16)}
.cnav.prev{left:-15px}
.cnav.next{right:-15px}

.cv{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);color:var(--burgundy);text-decoration:none;font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.cv:hover{background:var(--burgundy);color:var(--white);border-color:var(--burgundy)}
.cv svg{flex:none}
.cnav:hover{background:var(--burgundy);color:var(--white)}
@media(max-width:640px){.cnav{display:none}.track img{flex-basis:150px;width:150px;height:150px}}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:780px){.cols{grid-template-columns:1fr}}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px;letter-spacing:.03em}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--steel);border-radius:var(--r);font:inherit;font-size:14px;background:var(--white)}
.slot{border:1px dashed rgba(31,31,31,.28);border-radius:var(--r);padding:34px 20px;text-align:center;color:var(--ink-soft);font-size:14px;background:var(--white)}

.contact{background:var(--ink);color:var(--paper);border:none}
.contact h2,.contact .eyebrow{color:var(--green)}
.contact a{color:var(--green)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;margin-top:22px}
.cgrid b{font-family:var(--display);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:5px}
.cgrid p{color:rgba(251,251,251,.78);font-size:15px}
footer{background:var(--ink);color:rgba(251,251,251,.42);font-size:12.5px;padding:0 0 40px;text-align:center}

.launch{position:fixed;right:20px;bottom:20px;z-index:99;background:var(--burgundy);color:var(--white);border:none;border-radius:var(--r);padding:13px 19px;font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 26px rgba(120,12,48,.36)}
.panel{position:fixed;right:20px;bottom:78px;width:min(360px,calc(100vw - 40px));background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.22);z-index:99;overflow:hidden;display:none}
.panel.on{display:block}
.panel .top{background:var(--navy);color:var(--white);padding:13px 16px;font-family:var(--display);letter-spacing:.05em;text-transform:uppercase}
.panel .top span{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;opacity:.78;text-transform:none;letter-spacing:0}
.panel .msgs{padding:15px;font-size:14px;max-height:250px;overflow-y:auto}
.bub{background:var(--paper-2);border-radius:8px 8px 8px 2px;padding:11px 13px;margin-bottom:9px;font-size:13.5px;line-height:1.55}
.bub.me{background:var(--burgundy);color:#fff;border-radius:8px 8px 2px 8px;margin-left:34px}
.bub.me a,.bub a{color:var(--burgundy)}
.bub.me a{color:#fff}
.panel .msgs{max-height:340px}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 15px 13px}
.quick button{border:1px solid var(--burgundy);color:var(--burgundy);background:none;border-radius:3px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.panel .in{border-top:1px solid var(--line);padding:11px 15px}
.panel .in input{width:100%;border:none;font:inherit;font-size:14px;outline:none}

/* venue credit on the photographic section */
.venue{margin-top:26px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(243,239,231,.72);display:flex;align-items:center;gap:9px}
.venue:before{content:"";width:26px;height:1px;background:var(--green);flex:none}