/* ============================================================
   Iseki Music Studio — playful / kids theme
   ============================================================ */
:root{
  --sky:#3fb9e8;
  --sky-d:#2a9fd0;
  --sun:#ffd23f;
  --sun-d:#ffbd1f;
  --coral:#ff7aa2;
  --coral-d:#ff5c8a;
  --mint:#42d1a4;
  --mint-d:#2bbd90;
  --grape:#9b7ede;
  --grape-d:#8163d0;
  --cream:#fffaf2;
  --cream-2:#fff1dd;
  --ink:#46435f;          /* soft dark navy/purple */
  --ink-soft:#7d7a96;
  --white:#ffffff;
  --radius:22px;
  --radius-lg:34px;
  --radius-xl:46px;
  --shadow:0 22px 44px -20px rgba(70,67,95,.42);
  --shadow-sm:0 14px 30px -16px rgba(70,67,95,.4);
  --shadow-color:0 14px 0 -4px rgba(0,0,0,.06);
  --max:1140px;
  --rounded:"M PLUS Rounded 1c","Kosugi Maru",sans-serif;
  --display:"Fredoka","M PLUS Rounded 1c",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:hidden}
body{
  font-family:var(--rounded);
  color:var(--ink);
  background:var(--cream);
  line-height:1.9;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{width:min(100% - 36px,var(--max));margin-inline:auto}
.section{padding:clamp(60px,9vw,110px) 0;position:relative}

/* polka-dot helper background for some sections */
.section--dots::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,122,162,.16) 3px,transparent 3px),
                   radial-gradient(rgba(63,185,232,.14) 3px,transparent 3px);
  background-size:46px 46px,46px 46px;background-position:0 0,23px 23px;
  opacity:.7;
}
.section > .container{position:relative;z-index:1}

/* ---------- Section heads ---------- */
.section__eyebrow{
  display:inline-block;
  font-family:var(--display);
  letter-spacing:.04em;
  font-weight:700;
  font-size:.92rem;
  color:#fff;
  background:var(--sky);
  padding:.3em 1.1em;border-radius:999px;
  margin-bottom:1rem;transform:rotate(-2deg);
  box-shadow:0 8px 0 -3px rgba(63,185,232,.35);
}
.section__eyebrow.light{background:var(--sun);color:var(--ink)}
.section__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,5vw,2.9rem);
  line-height:1.45;
  color:var(--ink);
  letter-spacing:.01em;
}
.section__desc{margin-top:.8rem;color:var(--ink-soft);font-weight:500}
.section__head{margin-bottom:clamp(34px,5vw,56px)}
.section__head.center{text-align:center}
.section__head.center .section__title::after{margin-inline:auto}
.section__title::after{
  content:"";display:block;width:70px;height:8px;border-radius:999px;
  background:repeating-linear-gradient(90deg,var(--coral) 0 14px,var(--sun) 14px 28px,var(--mint) 28px 42px,var(--sky) 42px 56px);
  margin-top:16px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:1em 2em;border-radius:999px;font-weight:700;font-size:1rem;
  font-family:var(--display);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease,color .2s ease;
  cursor:pointer;border:none;
}
.btn--primary{
  background:var(--coral);color:#fff;
  box-shadow:0 9px 0 -1px var(--coral-d),0 18px 30px -14px rgba(255,92,138,.7);
}
.btn--primary:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 12px 0 -1px var(--coral-d),0 22px 34px -14px rgba(255,92,138,.7)}
.btn--primary:active{transform:translateY(3px);box-shadow:0 4px 0 -1px var(--coral-d)}
.btn--ghost{background:#fff;color:var(--sky-d);box-shadow:0 9px 0 -1px rgba(63,185,232,.35)}
.btn--ghost:hover{transform:translateY(-3px) rotate(1deg);background:#fff;color:var(--sky-d)}
.btn--dark{background:var(--mint);color:#fff;box-shadow:0 9px 0 -1px var(--mint-d)}
.btn--dark:hover{transform:translateY(-3px);background:var(--mint);color:#fff}
.btn--full{width:100%}

/* ============================================================
   Header
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
  padding:16px 0;
}
.header__inner{
  width:min(100% - 32px,1240px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.header.scrolled{background:transparent;box-shadow:0 8px 26px -16px rgba(70,67,95,.5);padding:9px 0}
/* frosted background applied to a pseudo-element so the header itself does NOT
   become the containing block for its position:fixed child (.nav). Putting
   backdrop-filter on .header directly would clip the mobile drawer to the
   header height. */
.header.scrolled::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:-1}
.brand{display:flex;align-items:center;gap:12px;color:#fff;transition:color .3s}
.header.scrolled .brand{color:var(--ink)}
.brand__icon{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--sun);color:#fff;font-size:1.4rem;
  box-shadow:0 6px 0 -1px var(--sun-d);
  animation:wiggle 3s ease-in-out infinite;
}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.08rem;display:block;line-height:1.3}
.brand__sub{font-family:var(--display);font-size:.62rem;letter-spacing:.18em;opacity:.85;font-weight:600}

.nav__list{display:flex;align-items:center;gap:4px}
.nav__link{
  position:relative;padding:.55em 1em;font-size:.95rem;font-weight:700;color:#fff;
  border-radius:999px;transition:color .2s,background .2s,transform .2s;
}
.header.scrolled .nav__link{color:var(--ink)}
.nav__link:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.header.scrolled .nav__link:hover{background:var(--cream-2);color:var(--coral-d)}
.nav__link--cta{
  background:var(--coral);color:#fff!important;
  padding:.6em 1.3em;margin-left:8px;box-shadow:0 6px 0 -1px var(--coral-d);
}
.nav__link--cta:hover{transform:translateY(-2px) rotate(-2deg);background:var(--coral);box-shadow:0 8px 0 -1px var(--coral-d)}

.hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:46px;height:46px;padding:0;border:none;cursor:pointer;z-index:60;border-radius:50%;
  background:#fff;
  box-shadow:0 5px 0 -1px rgba(70,67,95,.16),0 12px 20px -10px rgba(70,67,95,.5);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .25s ease;
}
.hamburger:hover{transform:translateY(-2px) rotate(-4deg);box-shadow:0 7px 0 -1px rgba(70,67,95,.16),0 16px 22px -10px rgba(70,67,95,.5)}
.hamburger:active{transform:translateY(2px);box-shadow:0 3px 0 -1px rgba(70,67,95,.16)}
.hamburger span{width:22px;height:3px;background:var(--ink);border-radius:3px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s,background .25s}
.hamburger.active{background:var(--coral);box-shadow:0 5px 0 -1px var(--coral-d),0 12px 20px -10px rgba(255,92,138,.7)}
.hamburger.active:hover{box-shadow:0 7px 0 -1px var(--coral-d),0 16px 22px -10px rgba(255,92,138,.7)}
.hamburger.active span{background:#fff}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;color:#fff}
.hero__slider{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 7s ease;
}
.hero__slide.is-active{opacity:1;transform:scale(1)}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(63,185,232,.82),rgba(155,126,222,.6) 55%,rgba(255,122,162,.62));
}
/* floating playful icons */
.hero__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.float{position:absolute;font-size:2.4rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));animation:floaty 6s ease-in-out infinite}
.float--1{top:18%;left:8%;animation-delay:0s}
.float--2{top:30%;right:10%;font-size:3rem;animation-delay:.8s}
.float--3{top:62%;left:12%;font-size:2rem;animation-delay:1.6s}
.float--4{top:70%;right:14%;font-size:2.8rem;animation-delay:.4s}
.float--5{top:14%;right:26%;animation-delay:2.1s}
.float--6{top:48%;left:46%;font-size:1.8rem;animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(8deg)}}

.hero__content{position:relative;z-index:2;width:min(100% - 36px,var(--max));margin-inline:auto;padding:120px 0 90px}
.hero__eyebrow{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.9rem;
  background:var(--sun);color:var(--ink);
  padding:.4em 1.2em;border-radius:999px;margin-bottom:1.4rem;transform:rotate(-2deg);
  box-shadow:0 8px 0 -2px var(--sun-d);
}
.hero__title{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,8vw,5rem);line-height:1.2;text-shadow:0 6px 0 rgba(0,0,0,.12),0 14px 30px rgba(0,0,0,.25)}
.hero__lead{margin:1.5rem 0 2.4rem;font-size:clamp(1rem,1.8vw,1.2rem);max-width:40ch;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px}
.hero__scroll{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%)}
.hero__scroll span{display:block;width:28px;height:46px;border:3px solid rgba(255,255,255,.85);border-radius:16px;position:relative}
.hero__scroll span::after{content:"";position:absolute;top:8px;left:50%;width:5px;height:9px;background:#fff;border-radius:3px;transform:translateX(-50%);animation:scroll 1.6s infinite}
@keyframes scroll{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,15px)}100%{opacity:0}}

/* ---------- Ticker ---------- */
.ticker{background:var(--grape);color:#fff;overflow:hidden;white-space:nowrap;padding:14px 0}
.ticker__track{display:inline-flex;gap:46px;animation:ticker 26s linear infinite;font-family:var(--display);font-weight:700;letter-spacing:.02em}
.ticker__track span{font-size:.98rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   About
   ============================================================ */
.about{background:var(--cream)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--radius-xl);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;border:6px solid #fff}
.about__media::before{content:"";position:absolute;inset:-14px -14px 20px 14px;background:var(--sun);border-radius:var(--radius-xl);z-index:-1;transform:rotate(-3deg)}
.about__badge{
  position:absolute;right:-12px;bottom:20px;background:#fff;border-radius:var(--radius);
  padding:14px 22px;box-shadow:var(--shadow-sm);text-align:center;border:3px solid var(--mint);transform:rotate(3deg);
}
.about__badge-num{display:block;font-family:var(--display);font-size:1.3rem;color:var(--mint-d);font-weight:700}
.about__badge-label{font-size:.78rem;color:var(--ink-soft);font-weight:600}
.about__text{margin-top:1.2rem;color:var(--ink-soft);font-weight:500}
.about__sign{margin-top:1.6rem;font-family:var(--display);font-size:1.15rem;color:var(--coral-d);font-weight:700}

/* ============================================================
   Features
   ============================================================ */
.features{background:var(--cream-2);overflow:hidden}
.features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feature{
  background:#fff;border-radius:var(--radius-lg);padding:40px 28px 34px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  border:3px solid transparent;
}
.feature:nth-child(1){border-color:var(--coral)}
.feature:nth-child(2){border-color:var(--sky)}
.feature:nth-child(3){border-color:var(--mint)}
.feature:hover{transform:translateY(-10px) rotate(-1deg)}
.feature__icon{
  width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  font-size:2.8rem;
}
.feature:nth-child(1) .feature__icon{background:#ffe4ec}
.feature:nth-child(2) .feature__icon{background:#dcf2fc}
.feature:nth-child(3) .feature__icon{background:#d9f6ec}
.feature__title{font-family:var(--display);color:var(--ink);font-size:1.4rem;margin-bottom:.6rem;font-weight:700}
.feature__text{color:var(--ink-soft);font-size:.96rem;font-weight:500}

/* ============================================================
   Lessons
   ============================================================ */
.lessons{background:var(--cream)}
.lessons__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.lesson-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .3s ease;border:4px solid #fff;
}
.lesson-card--piano{border-color:var(--coral)}
.lesson-card--cello{border-color:var(--sky)}
.lesson-card:hover{transform:translateY(-8px)}
.lesson-card__head{padding:32px 30px 26px;color:#fff;position:relative}
.lesson-card--piano .lesson-card__head{background:var(--coral)}
.lesson-card--cello .lesson-card__head{background:var(--sky)}
.lesson-card__tag{font-family:var(--display);letter-spacing:.06em;font-weight:700;font-size:.95rem;opacity:.95}
.lesson-card__title{font-family:var(--display);font-size:1.7rem;margin:.1rem 0 .6rem;font-weight:700}
.lesson-card__note{font-size:.85rem;opacity:.96;line-height:1.7;font-weight:500}
.lesson-card__plans{padding:26px 30px 34px}
.lesson-card__plans h4{
  font-size:1rem;margin:1.4rem 0 .7rem;font-weight:700;font-family:var(--display);
  display:flex;align-items:center;gap:8px;color:var(--ink);
}
.lesson-card--piano .lesson-card__plans h4::before{content:"🎹"}
.lesson-card__plans h4:first-child{margin-top:0}
.price-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:.6em 0;border-bottom:2px dotted #efe6d8;font-size:.95rem;font-weight:500;
}
.price-list li span{color:var(--ink-soft)}
.price-list li b{font-family:var(--display);color:var(--ink);white-space:nowrap;font-weight:700}
.lesson-card--piano .price-list li b{color:var(--coral-d)}
.lesson-card--cello .price-list li b{color:var(--sky-d)}
.lesson-card__small{margin-top:1.3rem;font-size:.82rem;color:var(--ink-soft);line-height:1.8;font-weight:500}

/* ============================================================
   Teachers
   ============================================================ */
.teachers{background:var(--cream-2)}
.teachers__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.teacher{
  background:#fff;border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm);
  border:3px solid var(--grape);
}
.teacher__top{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.teacher__avatar{
  width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:2rem;
  background:#ece3fb;box-shadow:0 6px 0 -1px rgba(155,126,222,.3);
}
.teacher__role{font-family:var(--display);letter-spacing:.05em;font-weight:700;color:var(--grape-d);font-size:.85rem}
.teacher__name{font-family:var(--display);font-size:1.45rem;color:var(--ink);line-height:1.3;font-weight:700}
.teacher__name span{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
.teacher__text{color:var(--ink-soft);font-size:.92rem;font-weight:500}

/* ============================================================
   Studio
   ============================================================ */
.studio{background:var(--cream)}
.studio__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,70px);align-items:center}
.studio__text{margin-top:1rem;color:var(--ink-soft);font-weight:500}
.studio__rooms{margin:1.6rem 0 .4rem;display:grid;gap:14px}
.studio__rooms li{
  background:#fff;border-radius:var(--radius);padding:16px 22px;box-shadow:var(--shadow-sm);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-left:8px solid var(--sun);
}
.studio__rooms li:nth-child(2){border-left-color:var(--mint)}
.studio__rooms li:nth-child(3){border-left-color:var(--grape)}
.studio__room-name{font-family:var(--display);color:var(--ink);font-size:1.05rem;font-weight:700}
.studio__room-name span{display:block;font-family:var(--rounded);font-size:.78rem;color:var(--ink-soft);font-weight:500}
.studio__room-price{font-family:var(--display);color:var(--coral-d);font-size:1.1rem;font-weight:700;text-align:right}
.studio__room-price small{display:block;font-family:var(--rounded);font-weight:500;font-size:.72rem;color:var(--ink-soft)}
.studio__media img{border-radius:var(--radius-xl);box-shadow:var(--shadow);aspect-ratio:3/4;object-fit:cover;border:6px solid #fff}

/* ============================================================
   Gallery
   ============================================================ */
.gallery{background:var(--cream-2)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery__item{overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);aspect-ratio:4/3;border:4px solid #fff}
.gallery__item:nth-child(3n+1){border-color:var(--coral)}
.gallery__item:nth-child(3n+2){border-color:var(--sky)}
.gallery__item:nth-child(3n){border-color:var(--mint)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery__item:hover img{transform:scale(1.1) rotate(1deg)}

/* ============================================================
   Access
   ============================================================ */
.access{background:var(--cream)}
.access__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
.access__list{margin:1.6rem 0;display:grid;gap:2px}
.access__list>div{display:grid;grid-template-columns:108px 1fr;gap:14px;padding:14px 0;border-bottom:2px dotted #efe6d8}
.access__list dt{font-weight:700;color:var(--sky-d);font-size:.95rem;font-family:var(--display)}
.access__list dd{color:var(--ink-soft);font-size:.95rem;font-weight:500}
.access__list a{color:var(--coral-d);font-weight:700}
.access__map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);height:100%;min-height:340px;border:6px solid #fff}
.access__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* ============================================================
   Contact
   ============================================================ */
.contact{background:var(--cream-2)}
.contact__card{
  display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow);border:5px solid #fff;
}
.contact__intro{
  background:linear-gradient(150deg,var(--grape),var(--sky) 60%,var(--mint));
  color:#fff;padding:clamp(36px,5vw,56px);display:flex;flex-direction:column;justify-content:center;
}
.contact__intro .section__title{color:#fff}
.contact__intro .section__title::after{background:var(--sun)}
.contact__lead{margin:1.2rem 0 2rem;color:#fff;opacity:.95;font-size:.98rem;font-weight:500}
.contact__tel{
  display:block;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.55);
  border-radius:var(--radius);padding:18px 22px;transition:background .25s,transform .2s;
}
.contact__tel:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}
.contact__tel span{font-size:.82rem;font-weight:600}
.contact__tel strong{display:block;font-family:var(--display);font-size:1.8rem;margin-top:.2rem;font-weight:700}
.contact__form{background:#fff;padding:clamp(34px,5vw,52px);display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:700;color:var(--ink);font-family:var(--display)}
.field label span{
  font-size:.66rem;background:var(--coral);color:#fff;border-radius:6px;padding:.2em .7em;margin-left:.4em;
  font-weight:700;vertical-align:middle;
}
.field input,.field textarea{
  font-family:var(--rounded);font-size:1rem;font-weight:500;padding:.85em 1em;border:2.5px solid #eee2d2;border-radius:16px;
  background:var(--cream);transition:border-color .25s,box-shadow .25s;width:100%;color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(63,185,232,.2);background:#fff}
.field textarea{resize:vertical}
.contact__privacy{font-size:.76rem;color:var(--ink-soft);text-align:center;margin-top:.2rem;font-weight:500}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--grape);color:#fff;padding:54px 0 26px}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-bottom:28px;border-bottom:2px dashed rgba(255,255,255,.3)}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__name{font-family:var(--display);font-size:1.15rem;color:#fff;font-weight:700}
.footer__sub{font-size:.82rem;opacity:.9;margin-top:.2rem;font-weight:500}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__nav a{font-size:.9rem;opacity:.92;transition:opacity .2s;font-weight:600}
.footer__nav a:hover{opacity:1;text-decoration:underline}
.footer__copy{text-align:center;font-size:.8rem;opacity:.85;margin-top:24px;font-family:var(--display);letter-spacing:.04em}

/* ---------- Page top ---------- */
.pagetop{
  position:fixed;right:22px;bottom:22px;z-index:40;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:var(--coral);color:#fff;
  font-size:1.4rem;box-shadow:0 8px 0 -1px var(--coral-d);opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s,transform .3s;
}
.pagetop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.pagetop:hover{transform:translateY(-4px)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.reveal.visible{opacity:1;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .about__grid,.studio__grid,.access__grid,.lessons__grid,.teachers__grid,.contact__card,.features__grid{grid-template-columns:1fr}
  .features__grid{gap:18px}
  .about__media{max-width:420px;margin-inline:auto}
  .studio__media{max-width:420px;margin-inline:auto}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
  .hamburger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(82%,330px);background:var(--cream);
    box-shadow:-20px 0 60px -20px rgba(70,67,95,.5);transform:translateX(100%);
    transition:transform .35s cubic-bezier(.34,1.4,.64,1);padding:96px 26px 40px;z-index:55;
  }
  .nav.open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:10px}
  .nav__link{display:flex;align-items:center;color:var(--ink);padding:.8em 1em;border-radius:16px;background:#fff;box-shadow:0 5px 0 -2px rgba(70,67,95,.12);line-height:1.2}
  .header.scrolled .nav__link{color:var(--ink)}
  .nav__link:hover{background:var(--cream-2);transform:none}
  .nav__link--cta{margin:12px 0 0;justify-content:center;color:#fff!important;background:var(--coral);box-shadow:0 6px 0 -2px var(--coral-d)}
  .nav-overlay{position:fixed;inset:0;background:rgba(70,67,95,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:45}
  .nav-overlay.show{opacity:1;pointer-events:auto}
  .hero__content{padding-top:140px}
  body.nav-open{overflow:hidden}
  .float{font-size:1.8rem}
  .float--2,.float--4{font-size:2.2rem}
}

@media (max-width:480px){
  .gallery__grid{grid-template-columns:1fr}
  .studio__rooms li{flex-direction:column;align-items:flex-start;gap:6px}
  .studio__room-price{text-align:left}
  .access__list>div{grid-template-columns:88px 1fr}
  .brand__name{font-size:.95rem}
  .float--5,.float--6{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Subpages (piano / cello detail)
   ============================================================ */
/* lesson-card footer link (homepage cards) */
.lesson-card__foot{padding:0 30px 32px;margin-top:auto}
.lesson-card__foot .btn{width:100%}

/* ---------- Subpage hero ---------- */
.subhero{position:relative;padding:clamp(132px,20vw,178px) 0 clamp(58px,9vw,90px);color:#fff;overflow:hidden;text-align:center}
.subhero--piano{background:linear-gradient(130deg,var(--coral),var(--grape))}
.subhero--cello{background:linear-gradient(130deg,var(--sky),var(--mint))}
.subhero__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.subhero__inner{position:relative;z-index:2;width:min(100% - 36px,var(--max));margin-inline:auto}
.subhero__icon{display:block;font-size:clamp(3rem,8vw,4.4rem);margin-bottom:.5rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.subhero__badge{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.9rem;
  background:var(--sun);color:var(--ink);
  padding:.35em 1.2em;border-radius:999px;margin-bottom:1.1rem;transform:rotate(-2deg);
  box-shadow:0 8px 0 -2px var(--sun-d);
}
.subhero__title{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,6.4vw,3.6rem);line-height:1.3;text-shadow:0 5px 0 rgba(0,0,0,.12),0 12px 26px rgba(0,0,0,.22)}
.subhero__lead{margin:1.2rem auto 0;max-width:54ch;font-weight:600;opacity:.97;text-shadow:0 2px 8px rgba(0,0,0,.28)}

/* ---------- Detail intro ---------- */
.detail-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,70px);align-items:center}
.detail-intro__media{position:relative}
.detail-intro__media img{border-radius:var(--radius-xl);box-shadow:var(--shadow);border:6px solid #fff;aspect-ratio:4/3;object-fit:cover;width:100%}
.detail-intro__media::before{content:"";position:absolute;inset:-14px 14px 18px -14px;background:var(--sun);border-radius:var(--radius-xl);z-index:-1;transform:rotate(-3deg)}
.detail-intro__text{color:var(--ink-soft);margin-top:1.1rem;font-weight:500}

/* ---------- Flow steps ---------- */
.flow__list{display:grid;gap:18px;max-width:840px;margin-inline:auto}
.flow__item{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:#fff;border-radius:var(--radius-lg);padding:24px 28px;box-shadow:var(--shadow-sm);
  border:3px solid #fff;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.flow__item:hover{transform:translateY(-6px)}
.flow__num{
  width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.35rem;font-weight:700;color:#fff;
  background:var(--sky);box-shadow:0 6px 0 -1px var(--sky-d);
}
.flow__item:nth-child(1) .flow__num{background:var(--coral);box-shadow:0 6px 0 -1px var(--coral-d)}
.flow__item:nth-child(2) .flow__num{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 -1px var(--sun-d)}
.flow__item:nth-child(3) .flow__num{background:var(--mint);box-shadow:0 6px 0 -1px var(--mint-d)}
.flow__item:nth-child(4) .flow__num{background:var(--grape);box-shadow:0 6px 0 -1px var(--grape-d)}
.flow__body h3{font-family:var(--display);font-size:1.2rem;color:var(--ink);margin-bottom:.3rem;font-weight:700}
.flow__body p{color:var(--ink-soft);font-size:.94rem;font-weight:500}

/* ---------- FAQ ---------- */
.faq__list{max-width:840px;margin-inline:auto;display:grid;gap:16px}
.faq__item{background:#fff;border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-sm);border-left:8px solid var(--sun)}
.faq__item:nth-child(2n){border-left-color:var(--mint)}
.faq__q{font-family:var(--display);font-weight:700;color:var(--ink);display:flex;gap:12px;align-items:baseline;font-size:1.02rem}
.faq__q::before{content:"Q";color:var(--coral-d);font-family:var(--display);font-weight:700}
.faq__a{margin-top:.7rem;color:var(--ink-soft);font-size:.94rem;font-weight:500;display:flex;gap:12px;align-items:baseline}
.faq__a::before{content:"A";color:var(--sky-d);font-family:var(--display);font-weight:700}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--grape),var(--sky) 60%,var(--mint));
  color:#fff;text-align:center;border-radius:var(--radius-xl);
  padding:clamp(42px,7vw,66px) 24px;box-shadow:var(--shadow);border:5px solid #fff;
}
.cta-band__title{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.4;margin-bottom:.8rem}
.cta-band__lead{opacity:.96;margin:0 auto 1.9rem;max-width:46ch;font-weight:500}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

@media (max-width:900px){
  .detail-intro__grid{grid-template-columns:1fr}
  .detail-intro__media{max-width:460px;margin-inline:auto}
}
@media (max-width:480px){
  .flow__item{grid-template-columns:1fr;gap:10px}
  .flow__num{width:46px;height:46px;font-size:1.15rem}
}

/* ============================================================
   Rental Studio page (studio.html)
   ============================================================ */
.subhero--studio{background:linear-gradient(130deg,var(--grape-d),var(--sky-d))}

/* ---------- Room cards ---------- */
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:22px}
.room-card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:3px solid #fff;
  padding:26px 24px;display:flex;flex-direction:column;gap:9px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.room-card:hover{transform:translateY(-6px)}
.room-card__badge{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:.76rem;color:#fff;background:var(--sky);border-radius:999px;padding:.28em 1em}
.room-card:nth-child(2) .room-card__badge{background:var(--coral)}
.room-card:nth-child(3) .room-card__badge{background:var(--mint)}
.room-card__name{font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--ink);line-height:1.35}
.room-card__spec{font-size:.85rem;color:var(--ink-soft);font-weight:500}
.room-card__price{margin-top:8px;display:grid;gap:5px;padding-top:10px;border-top:2px dashed rgba(70,67,95,.16)}
.room-card__price div{display:flex;justify-content:space-between;font-size:.9rem;font-weight:600}
.room-card__price b{font-family:var(--display);color:var(--sky-d);font-size:1.02rem}
.room-card__price small{color:var(--ink-soft);font-weight:500}
.room-card .btn{width:100%;margin-top:14px}

/* ---------- Booking widget ---------- */
.booking{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,40px);align-items:start}
.booking__panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(22px,4vw,36px);border:3px solid #fff}
.booking__panel h3,.booking__side-title{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.16rem;margin-bottom:16px;display:flex;gap:10px;align-items:center}
.booking__side-title{margin-top:2px}
.booking__field{margin-bottom:15px}
.booking__row--2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.booking label{font-size:.85rem;font-weight:700;font-family:var(--display);color:var(--ink);display:block;margin-bottom:6px}
.booking label span{font-size:.62rem;background:var(--coral);color:#fff;border-radius:6px;padding:.2em .6em;margin-left:.4em;vertical-align:middle}
.booking select,.booking input,.booking textarea{
  font-family:var(--rounded);font-size:1rem;font-weight:500;padding:.72em .9em;border:2.5px solid #eee2d2;
  border-radius:14px;background:var(--cream);color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s;
}
.booking select:focus,.booking input:focus,.booking textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(63,185,232,.2);background:#fff}
.booking textarea{min-height:88px;resize:vertical;line-height:1.6;font-family:var(--rounded)}

/* availability slot grid */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;margin-top:2px}
.slot{
  font-family:var(--display);font-weight:600;font-size:.82rem;padding:.6em .2em;border-radius:12px;
  border:2px solid #e7ddcf;background:var(--cream);color:var(--ink);cursor:pointer;text-align:center;
  transition:transform .15s,background .15s,border-color .15s,color .15s;
}
.slot:hover:not(:disabled){border-color:var(--sky);transform:translateY(-2px)}
.slot.is-selected{background:var(--sky);border-color:var(--sky-d);color:#fff;box-shadow:0 5px 0 -2px var(--sky-d)}
.slot:disabled{background:#f2e9dc;color:#c3b6a3;cursor:not-allowed;text-decoration:line-through}
.slot-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-soft);font-weight:600;margin-top:12px}
.slot-legend span{display:inline-flex;align-items:center;gap:6px}
.slot-legend i{width:14px;height:14px;border-radius:5px;display:inline-block;border:2px solid transparent}

/* summary + messages */
.booking__summary{background:var(--cream-2);border-radius:var(--radius);padding:16px 20px;margin:16px 0;display:grid;gap:7px}
.booking__summary div{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;font-weight:600}
.booking__summary .booking__total{border-top:2px dashed rgba(70,67,95,.25);padding-top:9px;margin-top:2px;align-items:baseline}
.booking__total b{font-family:var(--display);font-size:1.5rem;color:var(--coral-d)}
.booking__msg{border-radius:14px;padding:.8em 1.05em;font-size:.88rem;font-weight:700;margin-bottom:14px;display:none;line-height:1.6}
.booking__msg.show{display:block}
.booking__msg.err{background:#ffe2ea;color:var(--coral-d)}
.booking__msg.ok{background:#dcf6ec;color:var(--mint-d)}

/* reservation list */
.reslist{display:grid;gap:14px}
.res-empty{color:var(--ink-soft);font-weight:600;background:#fff;border-radius:var(--radius);padding:26px 22px;text-align:center;border:2px dashed #e7ddcf}
.res-empty span{display:block;font-size:1.8rem;margin-bottom:.3rem}
.res-item{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-left:8px solid var(--mint)}
.res-item__info{display:grid;gap:3px;min-width:0}
.res-item__when{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.02rem}
.res-item__meta{font-size:.82rem;color:var(--ink-soft);font-weight:500}
.res-item__price{font-family:var(--display);color:var(--sky-d);font-weight:700;font-size:.92rem;margin-top:2px}
.res-cancel{
  flex:none;background:#fff;border:2px solid var(--coral);color:var(--coral-d);border-radius:999px;
  padding:.42em 1.05em;font-family:var(--display);font-weight:700;font-size:.8rem;cursor:pointer;transition:background .2s,color .2s;
}
.res-cancel:hover{background:var(--coral);color:#fff}

@media (max-width:900px){
  .booking{grid-template-columns:1fr}
}
@media (max-width:480px){
  .booking__row--2{grid-template-columns:1fr}
  .res-item{flex-direction:column;align-items:flex-start}
  .res-cancel{align-self:flex-end}
}

/* ============================================================
   Homepage buttons — more compact for cleaner hierarchy / visibility
   (hero + homepage lesson-card footers only)
   ============================================================ */
.hero__actions .btn,
.lesson-card__foot .btn{
  padding:.7em 1.5em;
  font-size:.9rem;
}
.hero__actions .btn{gap:.4em}

/* ============================================================
   Cello page — green-based, chic / refined theme
   Scoped to <body class="theme-cello">. Custom properties are
   remapped so the whole page shifts to a sophisticated green
   palette with a muted-gold accent.
   ============================================================ */
.theme-cello{
  --coral:#5f9e7f;   --coral-d:#3f7d60;
  --sky:#3f8f6a;     --sky-d:#2c6b4d;
  --grape:#34694f;   --grape-d:#234a38;
  --mint:#6cbf9a;    --mint-d:#49a079;
  --sun:#d7c69a;     --sun-d:#c1ac76;      /* muted gold accent */
  --ink:#2f3d36;     --ink-soft:#66756c;   /* green-tinted charcoal */
  --cream:#f5f5ef;   --cream-2:#e9ede3;    /* cooler, calmer off-white */
}

/* refined serif for headings → chic, grown-up feel */
.theme-cello .subhero__title,
.theme-cello .section__title,
.theme-cello .cta-band__title,
.theme-cello .lesson-card__title,
.theme-cello .subhero__lead{
  font-family:"Shippori Mincho B1",var(--display);
  letter-spacing:.04em;
}
.theme-cello .subhero__title{text-shadow:0 4px 18px rgba(0,0,0,.28)}

/* deep, calm green hero gradient (no playful multi-hue) */
.theme-cello .subhero--cello{
  background:linear-gradient(135deg,#1e4634,#356b52 55%,#4f9375);
}
.theme-cello .subhero__floats{opacity:.45}

/* quieter badge — no tilt, gentle gold */
.theme-cello .subhero__badge{
  transform:none;letter-spacing:.16em;text-transform:uppercase;
  background:var(--sun);color:#3f5a4b;box-shadow:0 6px 0 -2px var(--sun-d);
}

/* title underline: subtle solid green rule instead of rainbow stripes */
.theme-cello .section__title::after{
  background:var(--sky);height:5px;width:56px;
}

/* eyebrow chips: flat, calm */
.theme-cello .section__eyebrow{
  transform:none;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;
  box-shadow:0 6px 0 -3px rgba(44,107,77,.3);
}

/* section dot pattern recoloured to greens */
.theme-cello .section--dots::before{
  background-image:radial-gradient(rgba(63,143,106,.16) 3px,transparent 3px),
                   radial-gradient(rgba(52,105,79,.12) 3px,transparent 3px);
}

/* feature cards — green-family icon tints */
.theme-cello .feature:nth-child(1) .feature__icon{background:#dcefe2}
.theme-cello .feature:nth-child(2) .feature__icon{background:#e6f0dd}
.theme-cello .feature:nth-child(3) .feature__icon{background:#d7ede0}

/* teacher avatar tint */
.theme-cello .teacher__avatar{background:#dcece2;box-shadow:0 6px 0 -1px rgba(52,105,79,.28)}

/* lesson-card head keeps green (via --sky remap); soften the rounded shadow */
.theme-cello .lesson-card__title{font-size:1.55rem}

/* cello icon (inline SVG; replaces the U+1F3BB violin emoji on the cello page).
   Tall viewBox 48x120 → width .4em at height 1em-ish */
.cello-icon{display:inline-block;width:.48em;height:1.2em;vertical-align:middle;overflow:visible}
.subhero__icon .cello-icon{height:1.55em;width:.62em;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.float .cello-icon{height:1.7em;width:.68em}
/* homepage cello course card: on a dark photo overlay → larger + light halo for contrast */
.course-card__icon .cello-icon{height:1.6em;width:.64em;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.45))}
/* inline in buttons (e.g. piano.html CTA band); .btn gap provides the spacing */
.btn .cello-icon{height:1.3em;width:.52em}
/* lesson-card plan headings: same artwork as a data URI (CSS can't reference the HTML sprite) */
.lesson-card--cello .lesson-card__plans h4::before{
  content:"";flex:none;width:.6em;height:1.5em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 120'%3E%3Cpath d='M23 105h2l-.6 11.5L24 119.6l-.4-3.1z' fill='%23d4dadb' stroke='%234b5354' stroke-width='.6'/%3E%3Cpath d='M24 36C32 36 38 40 38 48C38 54 34 56 33 58C31 61 31 67 33 70C36 72 42 78 42 88C42 99 33 104 24 104C15 104 6 99 6 88C6 78 12 72 15 70C17 67 17 61 15 58C14 56 10 54 10 48C10 40 16 36 24 36Z' fill='%23b5652b' stroke='%235a2c0e' stroke-width='1.3'/%3E%3Cg fill='none' stroke='%232a1608' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M18.6 64C16.4 68 20.2 74 17.4 80'/%3E%3Cpath d='M29.4 64C31.6 68 27.8 74 30.6 80'/%3E%3C/g%3E%3Cpath d='M17.4 11.4h13.2v2H17.4zM17.4 15.6h13.2v2H17.4zM22 18h4l1.6 50q-3.6 2-7.2 0zM21.6 83h4.8l1.2 15q-3.6 2-7.2 0zM22 102.4h4v3.4h-4z' fill='%2324160e'/%3E%3Cpath d='M19.8 77.6h8.4l-.8-3.2h-6.8z' fill='%23f0cf93'/%3E%3Crect x='21.2' y='9' width='5.6' height='11' rx='1.4' fill='%238a4a1f'/%3E%3Ccircle cx='24' cy='6' r='4.6' fill='%23a65a26' stroke='%235a2c0e' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* CTA band → elegant green gradient */
.theme-cello .cta-band{
  background:linear-gradient(135deg,#234a38,#356b52 55%,#4f9375);
}

/* buttons on cello page: refined, flatter shadows */
.theme-cello .btn--primary{
  background:var(--sky);
  box-shadow:0 8px 0 -1px var(--sky-d),0 18px 30px -16px rgba(44,107,77,.7);
}
.theme-cello .btn--primary:hover{
  box-shadow:0 11px 0 -1px var(--sky-d),0 22px 34px -16px rgba(44,107,77,.7);
}
.theme-cello .btn--primary:active{box-shadow:0 4px 0 -1px var(--sky-d)}
.theme-cello .btn--ghost{color:var(--sky-d);box-shadow:0 8px 0 -1px rgba(63,143,106,.32)}

/* ============================================================
   Homepage course navigation cards — big image cards that
   guide visitors to the piano.html / cello.html detail pages
   ============================================================ */
.course-nav{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.course-card{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  min-height:360px;display:flex;align-items:flex-end;color:#fff;
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-sm);border:4px solid #fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}
.course-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(0,0,0,.06),rgba(0,0,0,.2) 45%,rgba(0,0,0,.74));
  transition:opacity .3s ease;
}
.course-card--piano::before{background:linear-gradient(160deg,rgba(255,122,162,.55),rgba(155,126,222,.35) 45%,rgba(32,18,42,.82))}
.course-card--cello::before{background:linear-gradient(160deg,rgba(63,143,106,.55),rgba(44,107,77,.4) 45%,rgba(14,34,24,.82))}
.course-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.course-card__inner{position:relative;z-index:1;padding:34px 32px}
.course-card__icon{display:block;font-size:2.4rem;margin-bottom:.3rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.course-card__tag{font-family:var(--display);font-weight:700;letter-spacing:.08em;font-size:.85rem;opacity:.92}
.course-card__title{font-family:var(--display);font-weight:700;font-size:1.85rem;margin:.1rem 0 .5rem;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.course-card__text{font-size:.95rem;font-weight:500;opacity:.97;margin-bottom:1.3rem;line-height:1.8;max-width:36ch;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.course-card__btn{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);font-weight:700;font-size:.9rem;
  background:#fff;color:var(--ink);padding:.72em 1.5em;border-radius:999px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55);transition:transform .2s ease;
}
.course-card--piano .course-card__btn{color:var(--coral-d)}
.course-card--cello .course-card__btn{color:#2c6b4d}
.course-card:hover .course-card__btn{transform:translateY(-2px)}

@media (max-width:768px){
  .course-nav{grid-template-columns:1fr}
  .course-card{min-height:300px}
}

/* ============================================================
   Rental booking — LINE send button (shown after a booking)
   ============================================================ */
.line-send-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.line-send{
  display:inline-flex;align-items:center;gap:.45em;
  background:#06c755;color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem;
  padding:.7em 1.4em;border-radius:999px;text-decoration:none;
  box-shadow:0 8px 18px -8px rgba(6,199,85,.7);transition:transform .2s ease,box-shadow .2s ease;
}
.line-send:hover{transform:translateY(-2px);box-shadow:0 12px 22px -8px rgba(6,199,85,.7)}
.line-add{font-family:var(--display);font-weight:700;font-size:.85rem;color:#06a648;text-decoration:none}
.line-add:hover{text-decoration:underline}

/* ============================================================
   Teacher social link (Instagram) on piano / cello pages
   ============================================================ */
.teacher__social{margin-top:1.2rem;display:flex;gap:10px;flex-wrap:wrap}
.social-link{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.55em 1.15em;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:.85rem;color:#fff;
  background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
  box-shadow:0 8px 18px -8px rgba(220,39,67,.6);
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.social-link svg{width:18px;height:18px;flex:none}
.social-link:hover{transform:translateY(-2px);box-shadow:0 12px 22px -8px rgba(220,39,67,.6)}
.social-link:active{transform:translateY(0)}
.social-link--yt{background:linear-gradient(45deg,#ff4e45,#e60000);box-shadow:0 8px 18px -8px rgba(230,0,0,.6)}
.social-link--yt:hover{box-shadow:0 12px 22px -8px rgba(230,0,0,.6)}

/* ============================================================
   Brand logo image (header + footer) — assets/img/logo.png
   ============================================================ */
.brand__logo{
  height:42px;width:auto;flex:none;display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.footer__logo{height:72px;width:auto;flex:none;display:block}

/* ============================================================
   Decorative sheet-music divider — assets/img/music.png
   ============================================================ */
.music-divider{background:var(--cream);padding:6px 0 0;overflow:hidden;line-height:0}
.music-divider img{
  display:block;width:min(100% - 36px,1000px);height:auto;margin:0 auto;opacity:.85;
}

/* ============================================================
   Teacher profile with photo — assets/img/piano.jpg / assets/img/cello.jpg
   ============================================================ */
.teacher--profile{
  display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;
}
.teacher__photo{margin:0}
.teacher__photo img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--radius);box-shadow:var(--shadow-sm);border:4px solid #fff;
}
@media (max-width:640px){
  .teacher--profile{grid-template-columns:1fr;gap:20px}
  .teacher__photo img{max-width:240px;margin-inline:auto}
}