/* ============================================================================
   sections/about.css — CHAPTER 01, ORIGIN (dark indigo)
   ----------------------------------------------------------------------------
   Client verdict: "Rooted in the Delta doesn't look premium in ivory." So this
   chapter is DARK — the gold lota-pata arch reads best on indigo (the golden
   vine on blue is the look the client loves), and gold is king again here.
   Asymmetric: the arched portrait leads on the left at .8fr, the story runs
   wider at 1.2fr. One shape language with the hero portal.
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}

/* ---- The arched portrait --------------------------------------------- */
.about-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 100 / 140;
  max-height: 620px;
}
.about-portrait-img { position: absolute; inset: 0; background: linear-gradient(180deg, var(--indigo-800), var(--indigo-950)); }
/* contain, not cover: show the whole admin-set image (logo + all products)
   inside the arch rather than cropping it to fill. */
.about-portrait-img img { width: 100%; height: 100%; object-fit: contain; }
/* The gentle push-in on hover only once the unveil has finished — otherwise the
   two transforms fight over the same property and the image jumps. */
.about-portrait.is-visible:hover .unveil img { transform: scale(1.045); }
.about-portrait figcaption {
  position: absolute;
  left: 50%; bottom: -1.75rem;
  transform: translateX(-50%);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-500);
  white-space: nowrap;
  opacity: .85;
}

/* ---- The story ------------------------------------------------------- */
.about-text .lead { max-width: 56ch; }

.pull-quote {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2.7px solid var(--clay-400);   /* terracotta — the rare spark, brighter on dark */
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--gold-100);
  max-width: 46ch;
}

/* The creed: hairline-ruled definition rows. Reads like a letterhead, not like
   another grid of identical feature cards. */
.creed {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1.35px solid var(--line);
}
.creed > div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1.35px solid var(--line);
}
.creed dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.creed dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted-on-dark);
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-height: 460px; margin-inline: auto; width: min(100%, 340px); }
  .about-portrait figcaption {
    position: static; transform: none;
    display: block; margin-top: 1.4rem; text-align: center;
  }
}
@media (max-width: 560px) {
  .creed > div { grid-template-columns: 1fr; gap: .25rem; }
}


/* The tiger now floats behind the story text on the right (background.js),
   so the section no longer needs the extra ground-stage bottom padding. */

/* ===== The Managing Director's note ==================================== */
.md-note { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 52ch; }
.md-note > p:first-child {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.06rem; line-height: 1.65; color: var(--gold-100); opacity: .92;
  border-left: 2px solid rgba(200,162,74,.45); padding-left: 1rem;
}
.md-sign { margin-top: .8rem; padding-left: 1rem; display: flex; flex-direction: column; gap: .1rem; }
.md-name { font-family: var(--font-serif); font-size: 1.22rem; color: var(--gold-300); }
.md-title { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted-on-dark); }