/* ============================================================
   Mayank J. Trivedi — Founder Ecosystem Site
   ============================================================ */

:root {
  --cream:        #f3ecdf;
  --cream-2:      #efe7d8;
  --paper:        #faf6ee;
  --card:         #ffffff;
  --ink:          #2f2415;
  --ink-soft:     #5a4a35;
  --brown:        #4a3315;
  --brown-deep:   #3a2710;
  --gold:         #b8893a;
  --gold-soft:    #d8c9ac;
  --hairline:     #e3d9c6;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Montserrat', system-ui, sans-serif;
  --script: 'Dancing Script', cursive;

  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ---------- Shared: dividers ---------- */
.divider {
  position: relative;
  height: 1px;
  margin: 26px 0;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}
.divider--soft { background: linear-gradient(90deg, transparent, var(--hairline), transparent); }
.divider--center { margin-left: auto; margin-right: auto; max-width: 220px; }
.divider__diamond {
  position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}
.divider__diamond--gold { background: var(--gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    radial-gradient(120% 90% at 0% 0%, var(--paper) 0%, var(--cream) 45%, var(--cream-2) 100%);
}
.hero__inner {
  /* Full-bleed: the portrait runs to the right edge of the screen.
     The text column is padded so its left edge lines up with the
     centered content container used by the rest of the page. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88vh;
}
.hero__content {
  padding: 56px 48px 64px max(48px, calc((100vw - var(--maxw)) / 2 + 40px));
  align-self: center;
}

.monogram {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 2px solid var(--brown);
  padding: 8px 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--brown);
  line-height: 1;
  margin-bottom: 38px;
}
.monogram__bar { width: 2px; height: 26px; background: var(--brown); }

.hero__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 86px);
  line-height: 0.98;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-bottom: 22px;
}
.hero__role {
  font-size: 13px;
  letter-spacing: 4px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hero .divider { max-width: 320px; }

.hero__lede {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink-soft);
  margin-bottom: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn--primary {
  background: var(--brown);
  color: #f6efe3;
  padding: 18px 30px;
  box-shadow: 0 10px 28px -12px rgba(58,39,16,.7);
}
.btn--primary:hover { background: var(--brown-deep); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(58,39,16,.8); }
.btn__arrow { transition: transform .2s ease; }
.btn--primary:hover .btn__arrow { transform: translateX(5px); }

/* portrait */
.hero__portrait { position: relative; overflow: hidden; }
.hero__portrait-frame {
  position: absolute; inset: 0;
}
.hero__portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* The portrait already has a soft cream fade baked into its left edge,
   so no desktop overlay is needed — a second fade created a bright band.
   ::before is reused only on mobile (below) for a bottom fade. */
.hero__portrait-frame::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}
.hero__portrait-frame.is-placeholder {
  background:
    linear-gradient(160deg, #6a5640, #3c2f21);
}
.hero__portrait-frame.is-placeholder::after {
  content: "Portrait";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,.4);
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
}

/* ============================================================
   ECOSYSTEM
   ============================================================ */
.ecosystem {
  background: var(--cream);
  padding: 70px 24px 84px;
}
.section-head { text-align: center; margin-bottom: 48px; }
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--ink);
}

.cards {
  width: min(var(--maxw), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.card {
  background: var(--card);
  border-radius: 4px;
  padding: 40px 34px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px -28px rgba(60,45,20,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 28px 52px -26px rgba(60,45,20,.55); }

.card__logo { height: 120px; display: grid; place-items: center; margin-bottom: 6px; }
.card__logo svg { max-height: 120px; width: auto; }
.card__logo img { max-height: 110px; max-width: 230px; width: auto; height: auto; object-fit: contain; }

.card__desc {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  max-width: 240px;
  margin: 8px auto 0;
}
.card .divider--soft { margin: 22px auto; }

.card__link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--link, var(--gold));
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  transition: gap .2s ease, opacity .2s ease;
}
.card__link:hover { gap: 13px; opacity: .8; }

/* ============================================================
   QUOTE
   ============================================================ */
.quote {
  width: min(var(--maxw), 100% - 40px);
  margin: 0 auto 60px;
  background: linear-gradient(180deg, var(--paper), #f0e8d9);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 56px 32px 48px;
  text-align: center;
  position: relative;
}
.quote__mark {
  font-family: var(--serif);
  font-size: 90px;
  line-height: .5;
  color: var(--gold);
  display: block;
  height: 40px;
}
.quote__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--ink);
  margin-bottom: 6px;
}
.quote .divider--center { max-width: 120px; }
.quote__author {
  font-family: var(--script);
  font-size: 34px;
  color: var(--brown);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  width: min(var(--maxw), 100% - 40px);
  margin: 0 auto;
  padding: 26px 24px 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
}
.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.footer__link:hover { color: var(--brown); }
.footer__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--brown);
  border-radius: 4px;
}
.footer__icon--mail { background: transparent; border: 1px solid var(--gold); }
.footer__sep { width: 1px; height: 30px; background: var(--hairline); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.cards .reveal:nth-child(2) { transition-delay: .08s; }
.cards .reveal:nth-child(3) { transition-delay: .16s; }
.cards .reveal:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Tablet & below: stack the hero ---- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__content { padding: 44px 32px 48px; order: 2; }
  .hero__portrait {
    order: 1;
    height: clamp(300px, 58vw, 460px);
  }
  /* fade now runs from the bottom edge into the content below */
  .hero__portrait-frame::before {
    background: linear-gradient(0deg, var(--cream) 0%, rgba(243,236,223,.25) 18%, transparent 42%);
  }
}

/* ---- Cards collapse to a single column ---- */
@media (max-width: 640px) {
  .ecosystem { padding: 60px 20px 72px; }
  .cards { grid-template-columns: 1fr; gap: 22px; }
  .card { padding: 36px 28px 28px; }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
  .hero__content { padding: 36px 22px 42px; }
  .monogram { font-size: 22px; padding: 7px 10px; margin-bottom: 26px; }
  .monogram__bar { height: 22px; }
  .hero__role { font-size: 11px; letter-spacing: 2px; }
  .hero__lede { font-size: 18px; }
  .btn--primary { padding: 16px 24px; letter-spacing: 2px; }
  .section-title { letter-spacing: 4px; }
  .quote { padding: 44px 22px 38px; }
  .quote__author { font-size: 30px; }
  .footer {
    flex-direction: column;
    gap: 18px;
    padding: 24px 20px 40px;
  }
  .footer__sep { display: none; }
}

/* ---- Very small phones: prevent the role line from overflowing ---- */
@media (max-width: 360px) {
  .hero__role { font-size: 10px; letter-spacing: 1px; }
  .card__desc { font-size: 17px; }
}