/* About Page Add-On CSS - Dr Guitar Care */
.about-hero {
  position: relative;
  min-height: 760px;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.54) 42%, rgba(0,0,0,.35) 100%),
    url("img/hero-about-dr-guitar-care.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 120px;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 30%, rgba(255,180,70,.16), transparent 35%);
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 2;
}

.about-hero-title {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 800;
}

.about-hero-copy {
  max-width: 720px;
  font-size: 1.12rem;
  line-height: 1.75;
}

.about-photo {
  object-fit: cover;
  width: 100%;
}

.about-soft-card,
.about-principle-card,
.about-faq-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.about-principle-card {
  transition: transform .22s ease, box-shadow .22s ease;
}

.about-principle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

.about-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,193,7,.13);
  color: #b77900;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.about-warm-section {
  background:
    linear-gradient(135deg, #fffdf8 0%, #f7efe4 100%);
}

.about-dark-texture {
  background:
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.86)),
    radial-gradient(circle at top right, rgba(255,193,7,.16), transparent 35%),
    #111;
}

.about-quote-box {
  border-left: 4px solid #ffc107;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
}

.about-accordion .accordion-button {
  font-weight: 700;
  line-height: 1.35;
}

.about-accordion .accordion-button:not(.collapsed) {
  background: #fff6df;
  color: #111;
  box-shadow: none;
}

.about-accordion .accordion-body {
  color: #333;
  line-height: 1.75;
}

.about-mini-note {
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: rgba(255,193,7,.08);
}

@media (max-width: 991px) {
  .about-hero {
    min-height: 680px;
    padding-top: 110px;
    background-position: center center;
  }
}

@media (max-width: 575px) {
  .about-hero {
    min-height: 640px;
  }
  .about-hero-title {
    font-size: 2.55rem;
  }
}