/* Spentra Materials — the company homepage (index.html only), loaded after spentra.css.
   Short and structured: who we are with two paths (text-only hero), what we do (three steps),
   the product and partner paths as two distinct cards, then a story teaser.
   The long material journey lives on /partner-with-us/. */

.company-home { --hp-ember: #2C150C; --hp-steel: #013B1F; --hp-roast: #2C150C; }

/* ---------- hero ---------- */
.hp-hero { background: var(--bg); padding: clamp(28px, 6vw, 72px) 0 clamp(36px, 6vw, 80px); }
.hp-hero-inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hp-hero h1 { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.6rem); line-height: 1.02; max-width: 14ch; }
.hp-hero .h1-brand {
  display: block; font-stretch: 112%; font-weight: 620; font-size: 0.42em;
  letter-spacing: 0; line-height: 1.3; color: var(--green); margin-bottom: 0.4em;
}
.hp-hero .t-lead { margin-top: 20px; color: var(--ink-2); max-width: 36rem; }
.hp-hero .btn-row { margin-top: 26px; }
/* 1024px and up: no drawing beside the copy, so the hero is a centred composition */
@media (min-width: 1024px) {
  .hp-hero { padding: clamp(56px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); }
  .hp-hero-inner { justify-items: center; text-align: center; }
  .hp-hero h1 { margin-inline: auto; }
  .hp-hero .t-lead { margin-inline: auto; }
  .hp-hero .btn-row { justify-content: center; }
}


/* ---------- what we do ---------- */
.hp-what { background: var(--surface); padding: clamp(44px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.hp-what-lead { margin: 12px 0 0; max-width: 40rem; color: var(--ink-2); font-size: 1.12rem; }
.hp-steps { list-style: none; margin: clamp(24px, 4vw, 40px) 0 0; padding: 0; counter-reset: hp; display: grid; gap: clamp(18px, 3vw, 32px); }
.hp-steps li { counter-increment: hp; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; }
.hp-steps li::before {
  content: counter(hp); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1.5px solid var(--ink); font-weight: 700; font-stretch: 110%;
}
.hp-steps h3 { margin: 6px 0 0; font-size: 1.12rem; font-stretch: 110%; }
.hp-steps p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- the two paths ---------- */
.hp-paths { background: var(--bg); padding: clamp(44px, 7vw, 88px) 0; }
.hp-cards { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.hp-card { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px); display: grid; align-content: start; gap: 12px; }
.hp-card p { margin: 0; max-width: 34rem; }
.hp-card .btn-row { margin-top: 8px; }
.hp-card-kicker { font-size: .92rem; font-weight: 600; opacity: .8; }
.hp-card-product { background: radial-gradient(120% 90% at 85% 100%, rgba(233, 135, 59, .45), transparent 60%), var(--hp-ember); color: var(--roast-ink); }
.hp-card-product p { color: var(--roast-muted); }
.hp-card-product .hp-card-kicker { color: var(--ember); opacity: 1; }
.hp-wm { margin: 0; }
.hp-wm .coffire-wm { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); color: var(--roast-ink); }
.hp-card-partner { background: var(--hp-steel); color: #ECE8E0; }
.hp-card-partner .t-h2 { color: #ECE8E0; margin: 0; }
.hp-card-partner p { color: var(--green-muted); }
.hp-card-partner .hp-card-kicker { color: var(--accent); opacity: 1; }
.btn-light { background: #EEEAE3; color: var(--ink); }
.btn-light:hover { background: #fff; }
.hp-card-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hp-card-links a { color: #EEEAE3; }
.hp-card :focus-visible { outline-color: var(--accent); }

/* ---------- story teaser ---------- */
.hp-story { background: var(--bg); padding: 0 0 clamp(48px, 7vw, 88px); }
.hp-story-inner { display: grid; gap: 10px; justify-items: start; }
.hp-story-inner::before { content: ""; justify-self: stretch; border-top: 1px solid var(--line); margin-bottom: clamp(22px, 4vw, 46px); }
.hp-story .t-h2 { margin: 0; }
.hp-story p { margin: 0; max-width: 38rem; color: var(--ink-2); font-size: 1.12rem; }

@media (min-width: 860px) {
  .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .hp-hero h1 { font-size: 2.1rem; }
}

/* brand colour roles on the homepage */
.hp-what .t-h2, .hp-story .t-h2 { color: var(--green); }
.hp-steps li::before { border-color: var(--green); color: var(--green); }