/* ====================================================================
   HOME.CSS — Elements India
   --------------------------------------------------------------------
   Styles specific to index.html sections. Class names below are the
   contract that index.html will be built against.
   ==================================================================== */


/* --------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: calc(100vh - var(--header-height));
  max-height: 760px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--container-pad);
  max-width: 560px;
  margin-inline-start: auto;
}

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.hero__title em {
  font-style: italic;
  color: var(--color-rust);
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-6);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.hero__image-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--color-line);
}

.hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Real spec strip inside the hero — the signature element, front and center */
.hero__specs {
  display: flex;
  gap: var(--space-6);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
}

.hero__specs .spec-strip__item span {
  font-size: var(--fs-base);
  font-weight: 600;
}


/* --------------------------------------------------------------------
   2. ABOUT COMPANY
   -------------------------------------------------------------------- */

.about-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}

.about__image-wrap {
  overflow: hidden;
}

.about__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.about__content .eyebrow {
  display: block;
}

.about__content h2 {
  margin-bottom: var(--space-5);
  max-width: 14ch;
}

.about__content p + p {
  margin-top: var(--space-4);
}

.about__stats {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.about__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-rust);
  display: block;
}

.about__stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Reversed layout: image on the right, text on the left — used on
   about.html so a second image/text section doesn't visually repeat
   the Company Introduction block above it */
.about-section--reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

.about-section--reverse .about__image-wrap {
  order: 2;
}

.about-section--reverse .about__content {
  order: 1;
}


/* --------------------------------------------------------------------
   3. PRODUCTS
   -------------------------------------------------------------------- */

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.section-heading h2 {
  max-width: 16ch;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
}

/* Flagship HL3 card — spans the full grid row, image beside content */
.product-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  border-color: var(--color-rust);
}

.product-card--featured .product-card__image-wrap {
  flex: 1 1 45%;
  aspect-ratio: auto;
}

.product-card--featured .product-card__body {
  flex: 1 1 55%;
  justify-content: center;
  padding: var(--space-7);
}

.product-card--featured .product-card__title {
  font-size: var(--fs-xl);
}

.product-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

.product-card:hover .product-card__image-wrap img {
  transform: scale(1.04);
}

.product-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}

.product-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
  flex: 1;
}

.product-card__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-rust);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.product-card__link::after {
  content: '→';
  transition: transform var(--duration-fast) var(--ease-standard);
}

.product-card__link:hover::after {
  transform: translateX(3px);
}


/* --------------------------------------------------------------------
   4. WHY CHOOSE US
   -------------------------------------------------------------------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.why-item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.why-item__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-rust);
  display: block;
  margin-bottom: var(--space-3);
}

.why-item h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.why-item p {
  font-size: var(--fs-sm);
}


/* --------------------------------------------------------------------
   5. INDUSTRIES WE SERVE (slate band)
   -------------------------------------------------------------------- */

.industries-section .section-heading h2 {
  color: var(--color-white);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.industry-item {
  background-color: var(--color-slate);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.industry-item:hover {
  background-color: var(--color-slate-light);
}

.industry-item img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.industry-item span {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-white);
}


/* --------------------------------------------------------------------
   6. INQUIRY CTA BANNER
   -------------------------------------------------------------------- */

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  background-color: var(--color-ink);
  flex-wrap: wrap;
}

.cta-banner__content h2 {
  color: var(--color-white);
  font-size: var(--fs-2xl);
  max-width: 18ch;
  margin-bottom: var(--space-2);
}

.cta-banner__content p {
  color: rgba(255, 255, 255, 0.65);
  max-width: 42ch;
}

.cta-banner__actions {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
}


/* ====================================================================
   HOMEPAGE — "SPECIFICATION SHEET" REDESIGN
   --------------------------------------------------------------------
   All rules below are scoped under .home-page (set on <main> in
   index.html) so they never collide with the legacy classes above,
   which are still used by about.html and the product pages.
   ==================================================================== */

.home-page .tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rust);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.home-page .tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}
.home-page .tag--light { color: #fff; }

.home-page .arw {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.home-page .btn:hover .arw,
.home-page .prod__more:hover .arw { transform: translateX(3px); }

/* Section reference tag — meaningful documentation numbering (01 / 02 / 03) */
.home-page .sec-ref {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  border-top: 1px solid var(--color-line-strong);
  padding-top: var(--space-4);
  margin-bottom: var(--space-6);
}
.home-page .sec-ref__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--color-rust);
}
.home-page .sec-ref__ti {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.home-page .blk-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* ---- HERO ---- */
.home-page .home-hero {
  border-bottom: 1px solid var(--color-line);
  background-image: radial-gradient(rgba(22, 25, 24, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.home-page .home-hero__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
}
.home-page .home-hero__title { margin-top: var(--space-5); }
.home-page .home-hero__title em { font-style: normal; color: var(--color-rust); }
.home-page .home-hero__sub {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  max-width: 46ch;
}
.home-page .home-hero__cta {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Signature: the hero as an engineering datasheet (no photo) */
.home-page .speccard {
  border: 1px solid var(--color-line-strong);
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
}
.home-page .speccard__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-slate);
  padding: 0.85rem 1.1rem;
}
.home-page .speccard__badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--color-rust);
  padding: 3px 9px;
}
.home-page .speccard__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.home-page .specrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.home-page .specrow:last-child { border-bottom: 0; }
.home-page .specrow dt {
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-xs);
}
.home-page .specrow dd { color: var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.home-page .specrow dd b { color: var(--color-rust); font-weight: 500; }


/* ---- DATA STRIPE ---- */
.home-page .datastripe {
  background: var(--color-slate);
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  border-block: 1px solid var(--color-slate-light);
}
.home-page .datastripe__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-slate-light);
}
.home-page .stat {
  background: var(--color-slate);
  padding: clamp(1.4rem, 3vw, 2rem) var(--space-5);
}
.home-page .stat__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.home-page .stat__n em { font-style: normal; color: var(--color-rust); }
.home-page .stat__l {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}


/* ---- PRODUCT SHEET ---- */
.home-page .prodsheet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.home-page .prod {
  grid-column: span 3;
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  transition: background var(--duration-fast) var(--ease-standard);
}
.home-page .prod:hover { background: var(--color-panel); }
.home-page .prod--wide { grid-column: span 6; }
.home-page .prod--feat { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; }
.home-page .prod--feat .prod__thumb {
  position: relative;
  overflow: hidden;
  background: var(--color-slate);
  min-height: 220px;
}
.home-page .prod--feat .prod__thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-page .prod__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 210px;
}
.home-page .prod--feat .prod__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 0; }
.home-page .prod__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.home-page .prod__idx { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--color-stone); }
.home-page .prod__flag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-rust); }
.home-page .prod__title { font-size: var(--fs-lg); margin: var(--space-4) 0 var(--space-2); }
.home-page .prod--feat .prod__title { font-size: var(--fs-xl); }
.home-page .prod__desc { font-size: var(--fs-sm); color: var(--color-ink-soft); }
.home-page .prod__mini { display: flex; gap: var(--space-6); margin-top: var(--space-4); }
.home-page .prod__mini div { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-stone); display: flex; flex-direction: column; gap: 2px; }
.home-page .prod__mini b { color: var(--color-ink); font-weight: 500; font-size: var(--fs-sm); }
.home-page .prod__more {
  margin-top: auto;
  padding-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.home-page .prod__more .arw { color: var(--color-rust); }


/* ---- CAPABILITIES ---- */
.home-page .section--panel { background: var(--color-paper-dim); border-block: 1px solid var(--color-line); }
.home-page .caps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.home-page .cap { background: var(--color-panel); padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; gap: var(--space-4); }
.home-page .cap__m {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-rust);
  padding-top: 0.2rem;
  flex: none;
  min-width: 3.2ch;
}
.home-page .cap h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-2); }
.home-page .cap p { font-size: var(--fs-sm); }


/* ---- INDUSTRIES CHIPS ---- */
.home-page .industries-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-page .chip {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-soft);
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.home-page .chip:hover { border-color: var(--color-rust); color: var(--color-ink); }


/* ---- INQUIRY CTA ---- */
.home-page .home-cta-wrap { padding-bottom: var(--space-9); }
.home-page .home-cta {
  background: var(--color-slate);
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}
.home-page .home-cta h2 { color: #fff; margin-top: var(--space-4); max-width: 20ch; }
.home-page .home-cta p { color: rgba(255, 255, 255, 0.7); margin-top: var(--space-3); max-width: 44ch; }
.home-page .home-cta__act { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: flex-end; }


/* ---- HOMEPAGE RESPONSIVE ---- */
@media (max-width: 1024px) {
  .home-page .home-hero__grid { grid-template-columns: 1fr; }
  .home-page .speccard { max-width: 520px; }
}
@media (max-width: 900px) {
  .home-page .prod { grid-column: span 6; }
  .home-page .prod--feat { grid-template-columns: 1fr; }
  .home-page .caps { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .home-page .datastripe__grid { grid-template-columns: 1fr 1fr; }
  .home-page .home-cta { grid-template-columns: 1fr; }
  .home-page .home-cta__act { justify-content: flex-start; }
}
@media (max-width: 440px) {
  .home-page .datastripe__grid { grid-template-columns: 1fr; }
  .home-page .home-hero__cta .btn,
  .home-page .home-cta__act .btn { flex: 1 1 auto; }
}