/* Ironline — industrial. Reference pattern: Q-Industrial (dark canvas, split headline around a hero object). */
:root {
  --bg: #0b0c0a; --fg: #eef0eb; --muted: #a9ada5; --surface: #141613; --card: #141613; --line: #2a2d28;
  --accent: #c9f755; --accent-fg: #0b0c0a;
  --font-head: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
  --radius: 4px; --h-track: -0.035em;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
.eyebrow { font-family: var(--mono); font-weight: 500; color: var(--accent); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgb(11 12 10 / .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav__brand { letter-spacing: .1em; font-size: 1.2rem; }
.nav__brand span { color: var(--accent); }

/* Hero */
.hero { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: calc(100svh - 7rem); overflow: hidden; isolation: isolate; background: #000; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; z-index: -1; background: linear-gradient(to top, rgb(0 0 0 / .92) 35%, transparent); pointer-events: none; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 115%; object-fit: cover; object-position: center 40%; transform: translateY(calc(var(--py, 0px) * -.4)); }
.hero__title {
  align-self: center; display: flex; justify-content: space-between; gap: 2rem; padding-inline: var(--gutter);
  font: 500 clamp(3rem, 1rem + 9vw, 10.5rem)/.9 var(--font-head); letter-spacing: -.05em; text-shadow: 0 10px 40px rgb(0 0 0 / .6);
}
.hero__title span:last-child { text-align: right; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; align-items: end; padding-block: 2rem 3rem; }
.hero__intro .lead { color: #d6d9d2; max-width: 34rem; }
.hero__spec { display: grid; gap: .1rem; margin: 0; border-top: 1px solid var(--line); }
.hero__spec div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.hero__spec dt { font: 500 .75rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero__spec dd { margin: 0; font-weight: 600; text-align: right; }

/* Section heads */
.split-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.split-head .h2 { margin: 0; max-width: 18ch; }

/* Industries */
.industries { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.industries li { position: relative; display: grid; gap: .5rem; padding: 1.5rem 1.25rem 2.5rem 0; border-right: 1px solid var(--line); transition: background-color 300ms; }
.industries li + li { padding-left: 1.25rem; }
.industries li:last-child { border-right: 0; }
.industries li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
.industries li:hover::after { transform: scaleX(1); }
.industries__num { font: 500 .75rem/1 var(--mono); color: var(--accent); }
.industries h3 { font: 600 1.25rem/1.2 var(--font-head); margin-top: 1.5rem; }
.industries p { color: var(--muted); font-size: .875rem; }

/* Capabilities */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cap { display: grid; gap: .5rem; align-content: start; }
.cap__img { aspect-ratio: 4 / 5; margin-bottom: .75rem; }
.cap__num { font: 500 .75rem/1 var(--mono); color: var(--accent); }
.cap p:last-child { color: var(--muted); font-size: .9375rem; }

/* About band */
.about { position: relative; display: grid; align-items: end; min-height: min(80vh, 640px); isolation: isolate; overflow: hidden; }
.about__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.about::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(11 12 10 / .95) 15%, rgb(11 12 10 / .2) 70%); }
.about__copy { padding-block: 4rem; max-width: var(--max); }
.about__copy .h2 { max-width: 20ch; }
.about__copy .lead { color: #d6d9d2; }

/* Benefits */
.benefits { border-top: 1px solid var(--line); }
.benefits li { display: grid; grid-template-columns: clamp(4rem, 3rem + 4vw, 8rem) 1fr; gap: 1.5rem; padding-block: 1.75rem; border-bottom: 1px solid var(--line); align-items: start; }
.benefits span { font: 500 clamp(2.5rem, 1.8rem + 3vw, 4.5rem)/.8 var(--font-head); color: var(--accent); letter-spacing: -.05em; }
.benefits h3 { font: 600 1.375rem/1.2 var(--font-head); margin-bottom: .35rem; }
.benefits p { color: var(--muted); max-width: 40rem; }

/* Quality */
.quality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.quality__img { aspect-ratio: 16 / 10; }

/* RFQ */
.rfq { background: var(--accent); color: var(--accent-fg); }
.rfq .demo-note { background: transparent; border-color: rgb(11 12 10 / .4); }
.rfq a { color: var(--accent-fg); font-weight: 600; }

@media (max-width: 1000px) {
  .industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industries li:nth-child(3) { border-right: 0; }
  .industries li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .industries li:nth-child(4) { padding-left: 0; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* On phones the copy sits over the part, so dim the whole hero (the flange stays visible as texture) */
  .hero::after { height: 100%; background: linear-gradient(to top, rgb(0 0 0 / .92) 45%, rgb(0 0 0 / .5)); }
  .hero__title { flex-direction: column; justify-content: center; gap: 0; }
  .hero__foot, .split-head, .quality { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr 1fr; }
  .industries li, .industries li + li { padding: 1.25rem 1rem 1.75rem 0; border-right: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .caps, .industries { grid-template-columns: 1fr; }
}