/* ============================================================
   BALAJI CORPORATION — Design System
   Field to Formulation. Since 1989.
   Palette: graphite charcoal + warm ivory + antique brass accent.
   ============================================================ */

/* ---------- Fonts (loaded via Google CDN link in each page head) ---------- */
/* Display + Body: Poppins (geometric sans, weight contrast carries hierarchy) */

/* ---------- Tokens ---------- */
:root {
  /* PRIMARY — graphite / charcoal. The anchor colour: deep, expensive,
     lets product photography carry all the colour. (Token names kept as
     `green-*` so every existing rule inherits the new palette.) */
  --green-950: #0d0f0e;   /* near-black, faint warm cast */
  --green-900: #161918;
  --green-800: #1f2422;   /* primary surface for dark UI + buttons */
  --green-700: #2f3634;
  --green-600: #454e4b;
  --green-500: #6b7570;
  --green-300: #a8b0ab;
  --green-100: #e8eae7;

  /* ACCENT — antique brass. Single restrained accent, used sparingly. */
  --gold-700: #8a6b2f;
  --gold-600: #a8863f;
  --gold-500: #c2a15a;
  --gold-300: #dbc48d;
  --gold-100: #f3ecd9;

  /* NEUTRALS — warm ivory canvas, soft and gallery-like */
  --paper: #f8f6f1;
  --paper-2: #efece4;
  --sand: #ddd8cd;
  --ink: #14100c;      /* warm near-black for type */
  --ink-soft: #4a453e;
  --ink-mute: #7d766c;

  /* Semantic */
  --bg: var(--paper);
  --surface: #ffffff;
  --accent: var(--gold-600);
  --brand: var(--green-800);

  /* Type scale — tuned for Poppins (wider than a grotesque, so smaller steps) */
  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.6vw, 2.85rem);
  --step-4: clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

  /* Radii — one soft system */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Layout */
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --gutter: clamp(1.2rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadow — pine-tinted, never pure black */
  --shadow-sm: 0 2px 10px rgba(20, 16, 12, 0.06);
  --shadow-md: 0 16px 44px rgba(20, 16, 12, 0.11);
  --shadow-lg: 0 34px 80px rgba(20, 16, 12, 0.18);

  /* Font families */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
.serif { font-family: var(--font-display); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: var(--step-3); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
h3 { font-size: var(--step-2); font-weight: 600; }

/* Italic display accent uses the same family (Poppins) */
h1 em, h2 em, .about-lead em, .pd-overview__lead em, .hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-700);
}

p { max-width: 66ch; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: inline-block;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--wrap-wide); }
.section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section-tight { padding-block: clamp(2.5rem, 4vw, 3.75rem); }

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--60-40 { grid-template-columns: 1.4fr 1fr; }
  .split--40-60 { grid-template-columns: 1fr 1.4fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn--primary {
  background: var(--green-800);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--green-900); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn--gold {
  background: var(--gold-600);
  color: var(--green-950);
  box-shadow: var(--shadow-sm);
}
.btn--gold:hover { background: var(--gold-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--green-800);
  box-shadow: inset 0 0 0 1.5px rgba(31, 36, 34, 0.30);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--green-800); transform: translateY(-2px); }

.btn--light {
  background: rgba(255,255,255,0.14);
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
}
.btn--light:hover { background: rgba(255,255,255,0.24); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--green-700);
  border-bottom: 1.5px solid transparent;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-arrow svg { width: 1.15em; height: 1.15em; flex: none; }
.link-arrow:hover { gap: 0.9em; color: var(--gold-700); border-color: var(--gold-600); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 246, 241, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.scrolled { border-color: var(--sand); box-shadow: var(--shadow-sm); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.nav__logo { display: flex; align-items: center; gap: 0.6rem; }
.nav__logo img { height: 44px; width: auto; }
.nav__logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-800);
  letter-spacing: 0.01em;
  line-height: 1;
}
.nav__logo-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  color: var(--gold-700);
  font-weight: 700;
  margin-top: 2px;
}

.nav__menu { display: none; align-items: center; gap: 2.2rem; }
@media (min-width: 1000px) { .nav__menu { display: flex; } }
.nav__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gold-600);
  transition: width 0.28s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--green-800); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

/* Dropdown mega-menu */
.nav__item--has-menu { position: relative; }
.nav__item--has-menu > .nav__link { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__item--has-menu > .nav__link svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.nav__item--has-menu:hover > .nav__link svg,
.nav__item--has-menu:focus-within > .nav__link svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 460px;
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 120;
}
.nav__dropdown::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.nav__item--has-menu:hover .nav__dropdown,
.nav__item--has-menu:focus-within .nav__dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__dd-link {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center;
  padding: 0.7rem 0.8rem; border-radius: var(--r-sm);
  transition: background 0.2s var(--ease);
}
.nav__dd-link:hover { background: var(--paper-2); }
.nav__dd-link .dd-ic {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; flex: none;
}
.nav__dd-link .dd-ic svg { width: 18px; height: 18px; }
.nav__dd-link b { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: var(--ink); display: block; line-height: 1.2; }
.nav__dd-link small { font-size: 0.72rem; color: var(--ink-mute); }
.nav__dd-all {
  grid-column: 1 / -1; margin-top: 0.3rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0.9rem; border-radius: var(--r-sm);
  background: var(--green-800); color: #fff; font-weight: 600; font-size: 0.85rem;
  transition: background 0.2s var(--ease);
}
.nav__dd-all:hover { background: var(--green-900); }
.nav__dd-all svg { width: 16px; height: 16px; }

/* Mobile submenu grouping */
.mobile-menu .m-group { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; padding: 1rem 0.4rem 0.3rem; border: none; }
.mobile-menu .m-sub { padding-left: 1.2rem; font-size: 0.98rem; color: var(--ink-soft); }

.nav__cta { display: none; }
@media (min-width: 1000px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
@media (min-width: 1000px) { .nav__toggle { display: none; } }
.nav__toggle span {
  width: 24px; height: 2px; background: var(--green-800);
  border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 74px 0 auto 0;
  background: var(--paper);
  border-bottom: 1px solid var(--sand);
  padding: 1.4rem var(--gutter) 2rem;
  display: grid;
  gap: 0.4rem;
  transform: translateY(-120%);
  transition: transform 0.4s var(--ease);
  z-index: 99;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  padding: 0.85rem 0.4rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid var(--paper-2);
}
.mobile-menu .btn { margin-top: 1rem; justify-content: center; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 1em;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--green-100);
  color: var(--green-800);
}
.pill--gold { background: var(--gold-100); color: var(--gold-700); }
.pill--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--sand); color: var(--ink-soft); }

/* ---------- Reveal animation (IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green-950);
  color: rgba(255,255,255,0.72);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.site-footer a { color: rgba(255,255,255,0.72); transition: color 0.2s; }
.site-footer a:hover { color: var(--gold-300); }
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.4fr; } }
.footer-brand .serif { color: #fff; font-size: 1.7rem; font-weight: 700; }
.footer-col h4 {
  font-family: var(--font-body);
  color: var(--gold-300);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col li { font-size: 0.92rem; }
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.stack-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.maxw-xl { max-width: 720px; }
.maxw-lg { max-width: 620px; }

/* ---------- Heading fit inside narrow/split columns ----------
   Poppins is wide; full-scale H2s inside a half-width column produce
   4-line headings and large dead space. Cap them in split contexts. */
.split h2,
.contact-grid h2,
.prod-block__intro h2,
.unit h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem);
  line-height: 1.14;
}
.split .sec-head h2 { font-size: var(--step-3); }

/* Section heading blocks: keep measure sane so headings don't sprawl */
.sec-head h2 { max-width: 18ch; }
.sec-head.center h2 { margin-inline: auto; }
.sec-head .lede { max-width: 54ch; }

/* Body copy inside split columns should not run to 66ch and then leave a gap */
.split p { max-width: 58ch; }