/* ═══════════════════════════════════════════════
   Ishwar Sarees — about page
   Reuses commerce/contact tokens; adds the story
   layout, value cards and hero banner.
   ═══════════════════════════════════════════════ */

.ab-main { max-width: 1180px; }

/* ── hero ── */

.ab-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 6vh;
  min-height: 42vh;
}

.ab-hero-media { position: absolute; inset: 0; }
.ab-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.ab-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(62,16,10,0.15) 0%, rgba(45,10,6,0.72) 100%);
}

.ab-hero-copy {
  position: relative;
  padding: 8vh 6% 4vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 42vh;
}

.ab-hero-copy .com-eyebrow { color: #F2D9BE; }

.ab-h1 {
  color: #FBEAD4;
  font-size: clamp(30px, 5.6vh, 52px);
}

/* ── story ── */

.ab-story {
  position: relative;
  max-width: 68ch;
  margin: 0 auto 8vh;
  text-align: center;
}

.ab-story-mark {
  color: #A5493B;
  width: 24px;
  margin: 0 auto 2.4vh;
}

.ab-lede {
  font-size: clamp(17px, 2.4vh, 21px);
  line-height: 1.65;
  color: #4A1208;
  margin: 0 0 2.6vh;
}

.ab-body {
  font-size: clamp(15px, 1.9vh, 17px);
  line-height: 1.75;
  color: #6B3B2E;
  margin: 0;
}

/* ── values ── */

.ab-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vh 3%;
  margin-bottom: 9vh;
}

.ab-value {
  text-align: center;
  padding: 3.5vh 2%;
}

.ab-value .ci-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: rgba(165,73,59,0.1);
  color: #A5493B;
  margin-bottom: 1.6vh;
}

.ab-value .ci-icon svg { width: 1.5em; height: 1.5em; }

.ab-value h3 {
  font-family: 'Cormorant', Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 2.4vh, 22px);
  color: #4A1208;
  margin: 0 0 1vh;
}

.ab-value p {
  font-size: clamp(13.5px, 1.7vh, 15.5px);
  line-height: 1.55;
  color: #6B3B2E;
  margin: 0;
}

/* ── contact strip ── */

.ab-contact { text-align: center; }

.ab-contact .com-eyebrow { text-align: center; }

.ab-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vh 3%;
  text-align: left;
  margin: 3vh 0 5vh;
}

.ab-contact-btn { margin: 0 auto; }

@media (max-width: 900px) {
  .ab-values, .ab-contact-grid { grid-template-columns: 1fr; }
  .ab-hero { min-height: 36vh; }
  .ab-hero-copy { min-height: 36vh; padding: 6vh 7% 3.5vh; }
}