/* ════════════════════════════════════════
   SHRI SANGEETHAS – ABOUT PAGE
   ════════════════════════════════════════ */

/* ── HERO ── */
.about-hero { width: 100%; line-height: 0; }
.about-hero img { width: 100%; height: auto; display: block; }

/* ── STORY ── */
.about-story {
  background: var(--cream);
  padding: 80px 60px 0;
}

/* Centered heading */
.story-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px;
}
.story-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  color: #5C2A0E;
  line-height: 1.25;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.story-dot { color: #C8762A; font-size: 13px; flex-shrink: 0; }
.story-intro {
  font-size: 15px;
  line-height: 1.85;
  color: #888;
}

/* Store image + orange box wrapper */
.story-store {
  max-width: 1280px;
  margin: 0 auto;
  line-height: 0;
}
.story-store > img {
  width: 100%;
  height: auto;
  display: block;
  line-height: 0;
}

/* Orange box */
.story-orange {
  background: #E85A22;
  padding: 44px 72px 0;
  line-height: 1;
}
.story-orange-text {
  font-size: 15px;
  line-height: 1.9;
  color: #fff;
  text-align: center;
  max-width: 980px;
  margin: 0 auto 36px;
  display: block;
}

/* Decorative diamond pattern row */
.story-pattern {
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36'%3E%3Cpolygon points='16,4 28,18 16,32 4,18' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 32px 36px;
}

/* ── VALUES ── */
.about-values { background: var(--cream); }
.values-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  color: #5C2A0E;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
}
.value-card { text-align: center; }
.value-img {
  overflow: hidden;
  margin-bottom: 24px;
  aspect-ratio: 4/3;
}
.value-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.value-card:hover .value-img img { transform: scale(1.06); }
.value-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}
.value-desc {
  font-size: 14px;
  line-height: 1.85;
  color: #888;
  max-width: 320px;
  margin: 0 auto;
}

/* ── CERTIFICATIONS ── */
.about-certs { background: var(--cream); }
.certs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.cert-item img {
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.3s, transform 0.3s;
}
.cert-item:hover img { filter: grayscale(0%); transform: scale(1.06); }

/* ── CTA ── */
.about-cta {
  background: var(--dark);
  padding: 90px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(200,146,42,0.12) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; }
.cta-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}
.cta-sub {
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  max-width: 480px;
  margin: 0 auto 10px;
  line-height: 1.7;
}
.cta-hours {
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 36px;
  letter-spacing: 0.5px;
}
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-outline-light {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  padding: 13px 42px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: border-color 0.3s, background 0.3s;
}
.btn-outline-light:hover {
  border-color: var(--gold);
  background: rgba(200,146,42,0.15);
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .values-grid { grid-template-columns: 1fr; gap: 28px; max-width: 480px; }
  .story-orange { padding: 36px 36px 0; }
}
@media (max-width: 768px) {
  .about-story { padding: 64px 24px 0; }
  .story-orange { padding: 32px 24px 0; }
  .story-orange-text { font-size: 14px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .certs-row { gap: 28px; }
  .cert-item img { width: 90px; }
  .about-cta { padding: 64px 28px; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid { max-width: 100%; }
  .cta-btns { flex-direction: column; align-items: center; }
}