/* ==========================================================================
   Eldyne — page-level layout
   ========================================================================== */

/* Home: opening chapter ------------------------------------------------ */
.open__title { max-width: 14ch; }
.open__sub { color: var(--ink-2); font-size: var(--t-1); }
.open__hint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: 1px; height: 48px; background: linear-gradient(180deg, var(--ink-3), transparent);
}

/* Home: project names inside the kilometres chapter */
.chapter__projects { display: flex; gap: var(--s-4); flex-wrap: wrap; color: var(--ink-2); font-size: var(--t--1); margin-top: .5rem; }
.chapter__projects span { border-top: 1px solid var(--line); padding-top: .5rem; min-width: 10rem; }

/* Home: numbers strip */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-5); }
@media (max-width: 900px) { .numbers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Home: two-pillar close */
.close__intro { max-width: 28ch; margin-bottom: var(--s-5); }

/* Product pages ------------------------------------------------------- */
.product { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.product__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: end; margin-bottom: var(--s-5); }
.product__figure { margin-bottom: var(--s-5); }
@media (max-width: 900px) { .product__head { grid-template-columns: minmax(0, 1fr); } }

.approvals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.approval { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .25rem; }
.approval__name { font-weight: 500; }
.approval__ref { color: var(--ink-2); font-size: var(--t--1); }
@media (max-width: 900px) { .approvals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Krishi-EL story ----------------------------------------------------- */
.story-hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding-bottom: var(--s-6); overflow: hidden; }
.story-hero .media { position: absolute; inset: 0; aspect-ratio: auto; }
.story-hero__copy { position: relative; z-index: 1; display: grid; gap: var(--s-2); }
.problem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.problem__item { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.problem__item strong { font-weight: 500; }
.problem__item p { color: var(--ink-2); }
@media (max-width: 900px) { .problem { grid-template-columns: minmax(0, 1fr); } }

.specgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .specgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.concept { display: grid; gap: .75rem; }
.concept__title { font-weight: 500; }
.concept__text { color: var(--ink-2); font-size: var(--t--1); }
.concept .media { filter: saturate(.6); }
@media (max-width: 900px) { .concepts { grid-template-columns: minmax(0, 1fr); } }

/* Company ------------------------------------------------------------- */
.leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
}
.leader {
  display: grid;
  gap: .5rem;
}
.leader .media {
  background: #000;
  border-radius: 0;
  aspect-ratio: 1;
  border: none;
  box-shadow: none;
}
.leader:first-child .media,
.leader:nth-child(2) .media {
  filter: grayscale(1) contrast(1.08);
}
.leader--team .media {
  filter: none;
  border: 1px solid var(--line);
  box-shadow: none;
  background: #fff;
  padding: .45rem;
}
.leader--team .media > img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.leader__meta {
  display: grid;
  gap: .15rem;
}
.leader__name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}
.leader__role {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.leader--team {
  grid-column: 1 / -1;
  margin-top: .75rem;
}
@media (max-width: 900px) { .leaders { grid-template-columns: minmax(0, 1fr); } }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
.contact__details { display: grid; gap: var(--s-2); align-content: start; color: var(--ink-2); }
.contact__details strong { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* Narrow phones -------------------------------------------------------
   Below 600px these four grids stayed 2-up with ~144px columns, while their
   values ("₹1,000Cr+", "30,000sq ft", "3,700acres") measure 185–210px. The
   tracks could not shrink, so the whole page scrolled sideways. */
@media (max-width: 600px) {
  .numbers,
  .specgrid,
  .approvals { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-1); }
}

/* The opening hint line is decorative; it must not add height on short screens */
@media (max-height: 560px) {
  .open__hint { display: none; }
}

/* Home: the closing statement carries the brand pink-red ------------------ */
.close__line { color: var(--rose); }

/* The numbers carry the brand colour ------------------------------------
   6F1512 is the primary brand colour, but at ~2:1 on the dark page it is
   not readable, so the dark theme uses the palette's lighter rose and the
   light theme uses 6F1512 itself. Both are from the supplied palette. */
.numbers .stat__value,
.specgrid .stat__value { color: var(--brand-rose); }
[data-theme="light"] .numbers .stat__value,
[data-theme="light"] .specgrid .stat__value { color: var(--brand); }
.numbers .stat__value small,
.specgrid .stat__value small { color: var(--ink-2); }

/* Testimonial photograph fills its frame completely */


/* Leadership, revised --------------------------------------------------
   Two square portraits at half the page each came out around 940px wide,
   which made a pair of studio headshots the largest thing on the page and
   put every difference between the two shots — background grey, crop,
   exposure — on full display. Held to a portrait crop at a quarter of the
   width they read as a matched pair, and the team photograph below them
   becomes the picture that earns the space. */
.leaders {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-4);
}
.leader { max-width: 20rem; gap: 0; }
.leader .media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform var(--response) var(--ease-out), box-shadow var(--response) var(--ease);
}
.leader .media > img { object-position: 50% 12%; }
.leader:first-child .media,
.leader:nth-child(2) .media {
  /* Matching the two headshots to each other: the same desaturation and a
     touch of contrast, so the different studio backgrounds stop competing. */
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter 420ms var(--ease-out), transform var(--response) var(--ease-out),
              box-shadow var(--response) var(--ease);
}
.leader:first-child:hover .media,
.leader:nth-child(2):hover .media { filter: grayscale(.15) contrast(1.02); }
.leader:hover .media { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.leader__meta { padding-top: .85rem; gap: .1rem; }
.leader__name { font-size: var(--t-0); }
.leader__role { font-size: var(--t--1); color: var(--ink-3); }
.leader--team { max-width: none; margin-top: var(--s-3); }
.leader--team .media { aspect-ratio: auto; border-radius: var(--r-3); padding: 0; }
.leader--team:hover .media { transform: none; box-shadow: none; }
@media (max-width: 1100px) { .leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .leader { max-width: none; } }

/* Partners — a logo lockup, not three ruled paragraphs -----------------
   Each plate shows the partner's name set as a wordmark until a real logo
   file is dropped into media/. The moment one loads, the script swaps it
   in; nothing shows a broken image in the meantime. */
.partners { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.partner {
  border-top: 0; padding: 0;
  display: grid; gap: 0; align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color var(--response) var(--ease), box-shadow var(--response) var(--ease),
              transform var(--response) var(--ease-out);
}
.partner:hover {
  border-color: color-mix(in srgb, var(--brand-rose) 34%, var(--line));
  box-shadow: var(--shadow-2);
  transform: translateY(-4px);
}
.partner:active { transform: scale(.99); transition-duration: var(--press); }
.partner__plate {
  display: grid; place-items: center;
  min-height: 7.5rem; padding: var(--s-3);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.partner__logo { max-width: 72%; max-height: 3.5rem; width: auto; height: auto; display: none; }
.partner__plate.is-logo .partner__logo { display: block; }
.partner__plate.is-logo .partner__wordmark { display: none; }
.partner__wordmark {
  font-size: var(--t-1); font-weight: 600; letter-spacing: -.015em;
  color: #3D3D3D; text-align: center;
}
.partner__role {
  margin: 0; padding: var(--s-3) var(--s-3) 0;
  font-size: var(--t--1); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--brand-rose);
}
.partner__text { margin: 0; padding: .5rem var(--s-3) var(--s-3); color: var(--ink-2); font-size: var(--t--1); }
@media (max-width: 900px) { .partners { grid-template-columns: minmax(0, 1fr); } }

/* The team photograph --------------------------------------------------
   It was a bare full-bleed image with a two-word label under it, which
   read as an orphan beside the two framed portraits. Framed the same way
   and given a caption that says something, it closes the section. */
.leader--team { display: grid; margin: var(--s-4) 0 0; }
.leader--team .media {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-2);
}
.team__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem;
  padding-top: .85rem;
}
.team__meta .leader__name { font-size: var(--t-0); }
.team__meta .leader__role { color: var(--ink-3); }