/* ============================================================
   TEIMOOR JAAFAR · about.css
   About us: manifesto, story split, the standard, interlude,
   visit block, closing CTA. Leans on style.css for the rest.
   ============================================================ */

/* ---------- 1. MANIFESTO (oversized promise, white band) ---------- */
.manifesto {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(110px, 17vw, 250px) 0;
  overflow: hidden;
}
.manifesto__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.manifesto__statement {
  font-size: clamp(44px, 8.4vw, 112px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 15ch;
  color: var(--bone);
}
.manifesto__foot {
  margin-top: clamp(44px, 6vw, 76px);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.manifesto__rule {
  display: block;
  height: 1px;
  flex: 0 0 clamp(56px, 11vw, 150px);
  background: var(--gold);
  transform-origin: left;
}

/* ---------- 2. STORY SPLIT (craft image + narrative) ---------- */
.story {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(96px, 13vw, 190px) var(--gutter);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
}
.story__media { margin: 0; }
.story__body h2 {
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.06;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.story__body p:not(.eyebrow) {
  color: var(--bone-2);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  max-width: 46ch;
}
.story__body p:not(.eyebrow) + p { margin-top: 16px; }

/* ---------- 3. THE STANDARD (numbered principles) ---------- */
.standard {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(90px, 12vw, 170px) 0;
}
.standard__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.standard__head h2 {
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.08;
  max-width: 12ch;
}

/* ---------- 4. INTERLUDE (full-bleed photo + floating line) ---------- */
.interlude {
  position: relative;
  min-height: clamp(440px, 78vh, 760px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #08090C;
}
.interlude__media { position: absolute; inset: 0; }
.interlude__media img { width: 100%; height: 116%; object-fit: cover; }
.interlude__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 9, 12, 0.60), rgba(8, 9, 12, 0.28) 55%, rgba(8, 9, 12, 0.44)),
    radial-gradient(70% 60% at 50% 55%, rgba(8, 9, 12, 0.42), transparent);
}
.interlude__quote {
  position: relative;
  z-index: var(--z-content);
  font-style: italic;
  text-align: center;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 18ch;
  padding: 0 var(--gutter);
  text-shadow: 0 2px 34px rgba(8, 9, 12, 0.65);
}
.interlude .word--em { color: var(--tiffany-soft); }

/* ---------- 5. VISIT (dark dubai block additions) ---------- */
.visit__actions {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.visit__link {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
}
.visit__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.visit__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 6. CLOSING CTA ---------- */
.next {
  background: #fff;
  border-top: 1px solid var(--line-soft);
  padding: clamp(96px, 13vw, 190px) var(--gutter);
  text-align: center;
}
.next__inner { max-width: var(--maxw); margin: 0 auto; }
.next__inner h2 {
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1.06;
  max-width: 18ch;
  margin: 0 auto;
}
.next__actions {
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 18px;
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .story { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 60px); }
  .story .approach__media { max-width: 460px; }
  .standard__inner { grid-template-columns: 1fr; gap: 36px; }
  .standard__head h2 { max-width: none; }
}

@media (max-width: 640px) {
  .visit__actions { flex-direction: column; align-items: stretch; }
  .visit__actions .visit__link { align-self: flex-start; }
  .next__actions { flex-direction: column; align-items: stretch; max-width: 420px; margin-left: auto; margin-right: auto; }
  .manifesto__foot { flex-wrap: wrap; }
}