@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");

/* Concept C: warm, personal, welcoming private-studio energy. */
.concept--studio {
  --ink: #26332d;
  --ink-soft: #5e6b64;
  --paper: #fffaf2;
  --cream: #f7e8dc;
  --cream-deep: #eed4c5;
  --wine: #b94f4b;
  --wine-dark: #8d3937;
  --wine-light: #dd7569;
  --gold: #dc9a42;
  --gold-light: #f4d49a;
  --sage: #486a59;
  --white: #fff;
  --line: rgba(38, 51, 45, 0.14);
  --shadow: 0 26px 70px rgba(66, 48, 36, 0.13);
  --shadow-soft: 0 15px 40px rgba(66, 48, 36, 0.09);
  --radius: 2rem;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito Sans", "Segoe UI", sans-serif;
  background: var(--paper);
}

.concept--studio .container {
  width: min(1200px, calc(100% - 3rem));
}

.concept--studio .topbar {
  color: rgba(255,255,255,0.88);
  background: var(--sage);
}

.concept--studio .site-header,
.concept--studio .site-header.is-scrolled {
  border-color: rgba(38,51,45,0.1);
  background: rgba(255,250,242,0.92);
  box-shadow: 0 9px 35px rgba(66,48,36,0.06);
}

.concept--studio .header__inner {
  min-height: 6rem;
}

.concept--studio .brand img {
  width: clamp(210px, 21vw, 285px);
  filter: hue-rotate(320deg) saturate(0.82);
}

.concept--studio .site-nav a:not(.button) {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.concept--studio .site-nav a:not(.button)::after {
  height: 6px;
  bottom: 0.15rem;
  border-radius: 999px;
  opacity: 0.28;
  background: var(--wine-light);
}

.concept--studio .button {
  min-height: 3.35rem;
  padding-inline: 1.35rem;
  border-color: var(--sage);
  color: white;
  background: var(--sage);
  font-weight: 800;
  box-shadow: 0 10px 0 rgba(72,106,89,0.12);
}

.concept--studio .button:hover {
  border-color: #335344;
  background: #335344;
  box-shadow: 0 7px 0 rgba(72,106,89,0.12);
  transform: translateY(3px);
}

.concept--studio .button--outline {
  border-color: var(--wine);
  color: var(--wine-dark);
  background: transparent;
  box-shadow: none;
}

.concept--studio .button--outline:hover {
  color: white;
  background: var(--wine);
}

.concept--studio h1,
.concept--studio h2,
.concept--studio h3 {
  font-weight: 600;
}

.concept--studio h1 {
  max-width: 700px;
  font-size: clamp(4.2rem, 8vw, 8rem);
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.concept--studio h2 {
  font-size: clamp(3.1rem, 5.5vw, 5.6rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.concept--studio .eyebrow {
  color: var(--wine);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.concept--studio .eyebrow::before {
  width: 2.6rem;
  height: 0.5rem;
  border-radius: 999px;
  opacity: 0.35;
  background: var(--gold);
}

.concept--studio .hero {
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(6rem, 10vw, 9rem);
  background:
    radial-gradient(circle at 12% 5%, rgba(244,212,154,0.72), transparent 23rem),
    radial-gradient(circle at 88% 75%, rgba(185,79,75,0.14), transparent 29rem),
    #f9e9dd;
}

.concept--studio .hero::before {
  top: -11rem;
  left: 54%;
  width: 44rem;
  height: 44rem;
  border: 0;
  border-radius: 38% 62% 52% 48% / 45% 40% 60% 55%;
  background: rgba(255,255,255,0.46);
  transform: rotate(18deg);
}

.concept--studio .hero::after {
  position: absolute;
  bottom: 2rem;
  left: 3vw;
  width: 145px;
  height: 90px;
  opacity: 0.28;
  background-image: radial-gradient(var(--wine) 2px, transparent 2px);
  background-size: 14px 14px;
  content: "";
  transform: rotate(-8deg);
}

.concept--studio .hero__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(400px, 0.82fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
}

.concept--studio .hero__copy .lede {
  max-width: 580px;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
}

.concept--studio .hero__note::before {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(220,154,66,0.14);
}

.concept--studio .hero__visual {
  transform: rotate(2deg);
}

.concept--studio .hero__visual::before {
  inset: -1.2rem -1rem 1.5rem 1.4rem;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 44% 56% 36% 64% / 51% 35% 65% 49%;
  background: var(--sage);
  transform: rotate(-5deg);
}

.concept--studio .hero__visual img {
  aspect-ratio: 0.86;
  border: 8px solid white;
  border-radius: 48% 52% 34% 66% / 55% 38% 62% 45%;
  object-position: 59% center;
  box-shadow: var(--shadow);
}

.concept--studio .hero__card {
  right: -1.5rem;
  bottom: 1rem;
  width: 275px;
  padding: 1.2rem 1.3rem;
  border: 0;
  border-radius: 1.3rem 1.3rem 0.35rem 1.3rem;
  background: #fff7d9;
  box-shadow: 0 18px 45px rgba(66,48,36,0.18);
  transform: rotate(-3deg);
}

.concept--studio .hero__card strong {
  color: var(--sage);
  font-size: 1.45rem;
}

.concept--studio .trust-strip {
  margin-top: -3rem;
}

.concept--studio .trust-strip__inner {
  gap: 0.8rem;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.concept--studio .stat {
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  color: var(--ink);
  background: white;
  box-shadow: var(--shadow-soft);
}

.concept--studio .stat + .stat {
  border-left: 1px solid var(--line);
}

.concept--studio .stat strong {
  color: var(--wine);
  font-size: clamp(2.5rem, 4vw, 4rem);
}

.concept--studio .stat span {
  color: var(--ink-soft);
}

.concept--studio .section {
  padding-block: clamp(5.5rem, 9vw, 9rem);
}

.concept--studio .split {
  grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr);
}

.concept--studio .portrait-frame {
  width: min(88%, 445px);
  transform: rotate(-2deg);
}

.concept--studio .portrait-frame::before {
  right: -1.8rem;
  bottom: -1.8rem;
  width: 86%;
  height: 86%;
  border: 0;
  border-radius: 3rem 3rem 45% 3rem;
  background: #f2c97f;
  transform: rotate(6deg);
}

.concept--studio .portrait-frame img {
  border: 8px solid white;
  border-radius: 3rem 3rem 48% 3rem;
  box-shadow: var(--shadow);
}

.concept--studio .signature-quote {
  padding: 1.4rem 1.7rem;
  border: 0;
  border-radius: 1.4rem;
  color: var(--sage);
  background: #f8e6a8;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  transform: rotate(-1deg);
}

.concept--studio .section--cream {
  background:
    radial-gradient(circle at 8% 95%, rgba(220,154,66,0.18), transparent 21rem),
    var(--cream);
}

.concept--studio .service-feature {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin-top: 3rem;
  border: 8px solid white;
  border-radius: 2.4rem;
  background: white;
  box-shadow: var(--shadow);
}

.concept--studio .service-feature img {
  min-height: 500px;
  border-radius: 1.6rem;
}

.concept--studio .service-feature__copy li {
  color: var(--sage);
  background: #e7efe7;
}

.concept--studio .services-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.concept--studio .service-card {
  min-height: 280px;
  padding: 1.6rem;
  border: 0;
  border-radius: 1.6rem;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 7px 0 rgba(38,51,45,0.06);
}

.concept--studio .service-card:nth-child(3n + 1) {
  background: #fff5ce;
}

.concept--studio .service-card:nth-child(3n + 2) {
  background: #e5eee7;
}

.concept--studio .service-card:nth-child(3n) {
  background: #f6dcd5;
}

.concept--studio .service-card:hover {
  box-shadow: 0 11px 0 rgba(38,51,45,0.09);
  transform: translateY(-4px) rotate(-1deg);
}

.concept--studio .service-card__number {
  border: 0;
  color: white;
  background: var(--wine);
}

.concept--studio .event-gallery {
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.concept--studio .event-gallery figure {
  border: 7px solid white;
  border-radius: 2rem;
}

.concept--studio .event-gallery img {
  border-radius: 1.45rem;
}

.concept--studio .event-gallery figcaption {
  border: 0;
  border-radius: 1rem;
  background: rgba(38,51,45,0.82);
}

.concept--studio .section--dark {
  background: var(--sage);
}

.concept--studio #reviews {
  background:
    radial-gradient(circle at 85% 20%, rgba(244,212,154,0.17), transparent 26rem),
    var(--sage);
}

.concept--studio .rating-card {
  border: 0;
  border-radius: 2rem;
  background: rgba(255,255,255,0.1);
  box-shadow: none;
  transform: rotate(-2deg);
}

.concept--studio .stars {
  color: #f8cf72;
}

.concept--studio .review-quote {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
}

.concept--studio #listen {
  background: #314d40;
}

.concept--studio .music-intro__photo {
  border: 7px solid rgba(255,255,255,0.9);
  border-radius: 45% 45% 1.8rem 1.8rem;
  transform: rotate(2deg);
}

.concept--studio .player {
  border: 7px solid rgba(255,255,255,0.92);
  border-radius: 2rem;
  box-shadow: 0 30px 80px rgba(22,37,30,0.33);
}

.concept--studio .now-playing {
  background: #fff6d9;
}

.concept--studio .track-search input {
  border-radius: 0.8rem;
}

.concept--studio .track-button[aria-current="true"] {
  color: var(--sage);
  background: #e5efe7;
}

.concept--studio .track-button[aria-current="true"] .track-number {
  border-color: var(--sage);
  background: var(--sage);
}

.concept--studio .faq-preview {
  grid-template-columns: 0.72fr 1.28fr;
}

.concept--studio .accordion {
  border-top: 0;
}

.concept--studio .accordion details {
  margin-bottom: 0.75rem;
  padding: 0 1.2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: white;
}

.concept--studio .accordion summary {
  color: var(--sage);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.concept--studio #contact {
  background:
    radial-gradient(circle at 0 20%, rgba(185,79,75,0.12), transparent 25rem),
    #f7e8dc;
}

.concept--studio .contact-card {
  border: 7px solid white;
  border-radius: 2rem;
  box-shadow: var(--shadow);
}

.concept--studio .contact-method {
  border: 0;
  border-radius: 1.2rem;
  background: rgba(255,255,255,0.74);
}

.concept--studio .contact-method__icon {
  background: var(--sage);
}

.concept--studio .field input,
.concept--studio .field select,
.concept--studio .field textarea {
  border-color: rgba(38,51,45,0.22);
  border-radius: 0.9rem;
  background: #fffdf9;
}

.concept--studio .cta-band {
  border-radius: 2.2rem;
  background:
    radial-gradient(circle at 83% 30%, rgba(244,212,154,0.24), transparent 14rem),
    var(--wine-dark);
}

.concept--studio .footer {
  background: #263d32;
}

.concept--studio .footer__logo {
  border-radius: 1rem;
}

@media (max-width: 1100px) {
  .concept--studio .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  .concept--studio .container {
    width: min(100% - 2rem, 650px);
  }

  .concept--studio .site-nav {
    background: var(--paper);
  }

  .concept--studio .hero__grid,
  .concept--studio .split,
  .concept--studio .service-feature,
  .concept--studio .reviews-layout,
  .concept--studio .music-layout,
  .concept--studio .faq-preview,
  .concept--studio .contact-layout {
    grid-template-columns: 1fr;
  }

  .concept--studio h1 {
    font-size: clamp(4rem, 18vw, 6.7rem);
  }

  .concept--studio .hero__visual {
    width: 88%;
    margin-inline: auto;
  }

  .concept--studio .service-feature img {
    min-height: 360px;
  }
}

@media (max-width: 560px) {
  .concept--studio .topbar__inner {
    justify-content: center;
  }

  .concept--studio .topbar p {
    display: none;
  }

  .concept--studio .trust-strip__inner,
  .concept--studio .services-grid,
  .concept--studio .event-gallery {
    grid-template-columns: 1fr;
  }

  .concept--studio .service-card {
    min-height: 0;
  }
}