/* Pink Toes — performing & musical arts school.
   Pink + soft pastel theme; six class colors from the workshop poster. */
.pinktoes {
  --honey-gold: #EC5677;        /* primary CTA — Pink Toes pink */
  --buzz-yellow: #F4B342;        /* warm secondary accent */
  --honey-tint: #FBE0E5;         /* soft pink surfaces */
  --hive-ink: #2A1B22;           /* warm dark text */
  --c-ballet: #EC5677;
  --c-guitar: #56B0A6;
  --c-piano: #4D8BC2;
  --c-violin: #8A6BB1;
  --c-voice: #EE933F;
  --c-ukulele: #6FAE56;
}
.pinktoes .btn-primary { background: #EC5677; color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px rgba(236, 86, 119, 0.32); }
.pinktoes .btn-primary:hover { background: #D8425F; }
.pinktoes .gold-pill { background: rgba(236, 86, 119, 0.18); color: #EC5677; }
.pinktoes .profile-card__title { color: #EC5677; }
.pinktoes .service-tile svg { color: #EC5677; }
.pinktoes .rates-list span { color: #EC5677; }
.pinktoes .schedule-card { background: #4A1D2A; }

/* Circular logo treatment (no shield frame) */
.pinktoes .profile-card__avatar {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15), 0 18px 48px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
  .pinktoes .profile-card__avatar { width: 200px; height: 200px; }
}
.pinktoes .brand-mark__art { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Workshop featured banner */
.workshop-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, #FFF6F8, #FBE0E5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(236, 86, 119, 0.18);
}
@media (min-width: 768px) {
  .workshop-feature { grid-template-columns: 220px 1fr; gap: var(--space-5); align-items: center; }
}
.workshop-feature img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.workshop-feature__body { display: flex; flex-direction: column; gap: var(--space-2); }
.workshop-feature__body .section-title { font-size: clamp(20px, 2.5vw, 24px); margin-top: 4px; }
.workshop-feature__body p { color: var(--stone-gray); font-size: 14.5px; line-height: 1.55; }
.workshop-meta { list-style: none; padding: 0; margin: var(--space-3) 0; display: flex; flex-direction: column; gap: 6px; }
.workshop-meta li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 12px; background: rgba(255, 255, 255, 0.65); border-radius: var(--radius-md); font-size: 13.5px; }
.workshop-meta strong { font-family: var(--font-heading); color: var(--hive-ink); }
.workshop-meta span { color: #EC5677; font-weight: 600; font-family: var(--font-heading); }
.workshop-feature .btn { align-self: flex-start; margin-top: var(--space-2); }

/* Classes grid — 6 colored cards with instrument thumbnails */
.classes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) { .classes-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

.class-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  text-align: left;
  background: var(--warm-white);
  border: 1px solid var(--soft-line);
  border-radius: var(--radius-lg);
  color: var(--hive-ink);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.class-card:hover {
  border-color: var(--c, #EC5677);
  box-shadow: 0 8px 24px var(--c-glow, rgba(236, 86, 119, 0.18));
  transform: translateY(-2px);
}
.class-card:hover .class-card__thumb { transform: scale(1.04); }

/* Thumbnail tile — solid color with white instrument SVG */
.class-card__thumb {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c, #EC5677), var(--c-deep, #C2436A));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.class-card__thumb::after {
  /* subtle light streak for depth */
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
  pointer-events: none;
}
.class-card__thumb svg {
  width: 52px;
  height: 52px;
  position: relative;
  z-index: 1;
}

/* Body content — stacked badge, title, description */
.class-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.class-card__badge {
  align-self: flex-start;
  background: var(--c-tint, rgba(236, 86, 119, 0.14));
  color: var(--c, #EC5677);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.class-card strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hive-ink);
}
.class-card small {
  color: var(--stone-gray);
  font-size: 13px;
  line-height: 1.45;
}
.class-card__arrow {
  color: var(--c, #EC5677);
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.class-card:hover .class-card__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Per-discipline color tokens — primary, deep (gradient bottom), tint (badge bg), glow (hover shadow) */
.class-card--ballet  { --c: #EC5677; --c-deep: #C13E5D; --c-tint: rgba(236, 86, 119, 0.14); --c-glow: rgba(236, 86, 119, 0.22); }
.class-card--guitar  { --c: #56B0A6; --c-deep: #3F8C84; --c-tint: rgba(86, 176, 166, 0.16); --c-glow: rgba(86, 176, 166, 0.22); }
.class-card--piano   { --c: #4D8BC2; --c-deep: #3870A0; --c-tint: rgba(77, 139, 194, 0.16); --c-glow: rgba(77, 139, 194, 0.22); }
.class-card--violin  { --c: #8A6BB1; --c-deep: #6F5293; --c-tint: rgba(138, 107, 177, 0.16); --c-glow: rgba(138, 107, 177, 0.22); }
.class-card--voice   { --c: #EE933F; --c-deep: #C97724; --c-tint: rgba(238, 147, 63, 0.16); --c-glow: rgba(238, 147, 63, 0.22); }
.class-card--ukulele { --c: #6FAE56; --c-deep: #588E42; --c-tint: rgba(111, 174, 86, 0.16); --c-glow: rgba(111, 174, 86, 0.22); }

/* Base hero — warm pink instead of navy */
.hero--profile, .hero--pink { position: relative; padding: var(--space-12) 0 var(--space-16); color: var(--warm-white); overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #5A2032 0%, #8A2D49 60%, #C24468 100%); }
.hero--profile .hero__cover, .hero--pink .hero__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.42; }
.hero--profile::after, .hero--pink::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 12, 22, 0.55), rgba(40, 12, 22, 0.82)); z-index: -1; }
.profile-card { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; text-align: center; }
@media (min-width: 768px) { .profile-card { grid-template-columns: auto 1fr; text-align: left; gap: var(--space-8); } }
.profile-card__avatar { width: 148px; height: 148px; margin: 0 auto; border-radius: var(--radius-full); overflow: hidden; box-shadow: 0 0 0 5px rgba(255, 252, 251, 0.15), 0 18px 48px rgba(0, 0, 0, 0.35); }
@media (min-width: 768px) { .profile-card__avatar { width: 176px; height: 176px; } }
.profile-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.profile-card__name { font-size: clamp(28px, 4.5vw, 40px); color: var(--warm-white); letter-spacing: -0.02em; }
.profile-card__title { color: var(--honey-gold); font-family: var(--font-heading); font-weight: 600; font-size: 17px; }
.profile-card__license { color: rgba(255, 252, 251, 0.55); font-size: 12.5px; letter-spacing: 0.05em; margin-top: -4px; }
.profile-card__bio { color: rgba(255, 252, 251, 0.82); font-size: 15px; line-height: 1.6; max-width: 60ch; margin-top: var(--space-3); }
.profile-card__bio strong { color: var(--warm-white); font-weight: 600; }
.profile-card__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); justify-content: center; }
@media (min-width: 768px) { .profile-card__cta { justify-content: flex-start; } }
.profile-card__cta .btn-outline { background: rgba(255, 252, 251, 0.06); color: var(--warm-white); border-color: rgba(255, 252, 251, 0.25); }
.profile-card__stats { list-style: none; padding: var(--space-5) 0 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); border-top: 1px solid rgba(255, 252, 251, 0.12); }
.profile-card__stats li { display: flex; flex-direction: column; gap: 2px; align-items: center; }
@media (min-width: 768px) { .profile-card__stats li { align-items: flex-start; } }
.profile-card__stats strong { color: var(--warm-white); font-family: var(--font-heading); font-size: 22px; font-weight: 700; }
.profile-card__stats small { color: rgba(255, 252, 251, 0.55); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.content { padding: var(--space-10) 0 var(--space-12); }
.content__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.content__main { display: flex; flex-direction: column; gap: var(--space-10); }
.content__side { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 960px) { .content { padding: var(--space-12) 0 var(--space-16); } .content__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-10); } .content__side { position: sticky; top: 100px; align-self: start; } }
.section-head { margin-bottom: var(--space-5); }
.section-head .section-title { margin-top: 4px; font-size: clamp(22px, 3vw, 26px); }

.services { border: 1px solid var(--soft-line); border-radius: var(--radius-lg); background: var(--warm-white); overflow: hidden; }
.service + .service { border-top: 1px solid var(--soft-line); }
.service__trigger { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; width: 100%; padding: var(--space-4) var(--space-5); text-align: left; color: var(--hive-ink); background: transparent; }
.service__trigger:hover { background: var(--light-stripe); }
.service__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--honey-tint); color: var(--hive-ink); flex-shrink: 0; }
.service__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.service__label strong { font-family: var(--font-heading); font-size: 15px; font-weight: 700; }
.service__label small { color: var(--stone-gray); font-size: 13px; }
.service__chev { color: var(--stone-gray); transition: transform var(--dur-base) var(--ease-out); }
.service__trigger[aria-expanded='true'] .service__chev { transform: rotate(180deg); color: var(--honey-gold); }
.service__panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.service__panel p { padding: 0 var(--space-5) var(--space-5); color: var(--stone-gray); font-size: 14px; line-height: 1.6; }

.rates-list { list-style: none; padding: 0; margin: 0; background: var(--warm-white); border: 1px solid var(--soft-line); border-radius: var(--radius-lg); overflow: hidden; }
.rates-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); align-items: baseline; }
.rates-list li + li { border-top: 1px solid var(--soft-line); }
.rates-list strong { font-family: var(--font-heading); font-size: 14.5px; font-weight: 700; }
.rates-list span { font-family: var(--font-heading); color: var(--honey-gold); font-weight: 700; font-size: 15px; white-space: nowrap; }

.schedule-card { padding: var(--space-5); }
.schedule-card .info-card__body { color: rgba(255, 252, 251, 0.78); font-size: 14px; padding-left: 0; }
.schedule-card__btn { margin-top: var(--space-3); }
.stripe-card { background: var(--light-stripe); border-color: transparent; padding: var(--space-5); }

/* Instructor section */
.instructor__card { display: grid; grid-template-columns: 1fr; gap: var(--space-5); background: var(--warm-white); border: 1px solid var(--soft-line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 6px 24px rgba(236, 86, 119, 0.06); min-width: 0; }
@media (min-width: 860px) { .instructor__card { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); align-items: start; } }
.instructor__side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.instructor__photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #FFD0DE, #EC5677); box-shadow: 0 8px 28px rgba(236, 86, 119, 0.18); max-width: 280px; margin: 0 auto; width: 100%; }
.instructor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instructor__photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(40, 12, 22, 0.35)); pointer-events: none; }
.instructor__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.instructor__head { display: flex; flex-direction: column; gap: 4px; }
.instructor__name { font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em; color: var(--hive-ink); margin: 0; }
.instructor__role { color: var(--honey-gold); font-family: var(--font-heading); font-weight: 600; font-size: 14px; margin: 0; }
.instructor__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--c-tint, rgba(236, 86, 119, 0.14)); color: var(--c-deep, #C13E5D); border: 1px solid var(--c-glow, rgba(236, 86, 119, 0.22)); }
.chip--ballet  { --c-tint: rgba(236, 86, 119, 0.14); --c-deep: #C13E5D; --c-glow: rgba(236, 86, 119, 0.28); }
.chip--guitar  { --c-tint: rgba(213, 127, 60, 0.14); --c-deep: #AA5F2A; --c-glow: rgba(213, 127, 60, 0.28); }
.chip--piano   { --c-tint: rgba(64, 130, 195, 0.14); --c-deep: #285F92; --c-glow: rgba(64, 130, 195, 0.28); }
.chip--violin  { --c-tint: rgba(138, 107, 177, 0.14); --c-deep: #5C4080; --c-glow: rgba(138, 107, 177, 0.28); }
.chip--voice   { --c-tint: rgba(238, 147, 63, 0.14); --c-deep: #B66A20; --c-glow: rgba(238, 147, 63, 0.28); }
.chip--ukulele { --c-tint: rgba(111, 174, 86, 0.14); --c-deep: #4C7C39; --c-glow: rgba(111, 174, 86, 0.28); }
.instructor__bio { color: var(--stone-gray); font-size: 15px; line-height: 1.65; margin: 0; }
.instructor__bio strong { color: var(--hive-ink); font-weight: 600; }
.instructor__credentials { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); min-width: 0; }
@media (min-width: 520px) { .instructor__credentials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } }
.cred { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 4px; align-items: start; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, var(--cr-tint, rgba(236, 86, 119, 0.10)), rgba(255, 255, 255, 0)); border: 1px solid var(--cr-glow, rgba(236, 86, 119, 0.18)); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); min-width: 0; }
.cred:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--cr-glow, rgba(236, 86, 119, 0.18)); }
.cred__icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cr, #EC5677), var(--cr-deep, #C13E5D)); color: #fff; box-shadow: 0 6px 16px var(--cr-glow, rgba(236, 86, 119, 0.30)); margin-bottom: 6px; }
.cred__icon svg { width: 20px; height: 20px; }
.cred__metric { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-deep, #C13E5D); }
.cred__title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--hive-ink); line-height: 1.3; }
.cred__sub { color: var(--stone-gray); font-size: 12px; line-height: 1.45; }
.cred--ballet   { --cr: #EC5677; --cr-deep: #C13E5D; --cr-tint: rgba(236, 86, 119, 0.10); --cr-glow: rgba(236, 86, 119, 0.22); }
.cred--piano    { --cr: #4082C3; --cr-deep: #285F92; --cr-tint: rgba(64, 130, 195, 0.10);  --cr-glow: rgba(64, 130, 195, 0.22); }
.cred--students { --cr: #EE933F; --cr-deep: #B66A20; --cr-tint: rgba(238, 147, 63, 0.10);  --cr-glow: rgba(238, 147, 63, 0.22); }
.instructor__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.instructor__cta .btn { flex: 1 1 auto; min-width: 0; padding-left: var(--space-3); padding-right: var(--space-3); }

.instructor__quick { margin: 0; padding: 14px; border-radius: var(--radius-md); background: var(--light-stripe); border: 1px solid var(--soft-line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.instructor__quick > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.instructor__quick dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone-gray); font-weight: 500; }
.instructor__quick dd { margin: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--hive-ink); line-height: 1.1; }
.instructor__contacts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.instructor__contacts a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--hive-ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); min-width: 0; }
.instructor__contacts a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.instructor__contacts a:hover { background: rgba(236, 86, 119, 0.08); color: var(--honey-gold); }
.instructor__contacts .icon { color: var(--honey-gold); flex-shrink: 0; }