/* ==========================================================================
   Homepage sections — PT Mustika Benang Brilian
   Redesign in preserve mode: brand tokens are inherited, not replaced.
   Palette green #2c724f, Libre Baskerville display, Work Sans body.
   Namespaced .hm* so nothing here can collide with main.css / responsive.css.

   Shape system (one scale, applied everywhere):
     panels & media 6px  ·  interactive pills 999px  ·  nothing else
   Light theme only, matching every other page on the site.
   ========================================================================== */

.hm {
  --hm-green: #2c724f;
  --hm-green-dark: #1f5439;
  --hm-green-soft: #eef4f1;
  --hm-ink: #17211c;
  --hm-body: #4f5f57;
  --hm-muted: #67766e;
  --hm-line: #e2e8e5;
  --hm-radius: 6px;
}

.hm-sec {
  position: relative;
  padding: 92px 0;
}

.hm-sec--tint {
  background: #f7f9f8;
}

/* ---------- shared type ---------- */

.hm-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hm-green);
}

.hm-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
}

.hm-h2 {
  margin: 0 0 16px;
  font-family: "Libre Baskerville", serif;
  font-size: 38px;
  line-height: 1.26;
  color: var(--hm-ink);
}

.hm-lead {
  max-width: 62ch;
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--hm-body);
}

.hm-head {
  margin-bottom: 44px;
}

/* ---------- buttons ---------- */

.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.15s ease;
}

.hm-btn:active {
  transform: translateY(1px);
}

.hm-btn--primary {
  background: var(--hm-green);
  color: #fff;
}

.hm-btn--primary:hover,
.hm-btn--primary:focus {
  background: var(--hm-green-dark);
  color: #fff;
}

.hm-btn--ghost {
  border-color: var(--hm-line);
  background: #fff;
  color: var(--hm-ink);
}

.hm-btn--ghost:hover,
.hm-btn--ghost:focus {
  border-color: var(--hm-green);
  color: var(--hm-green);
}

.hm-btn:focus-visible {
  outline: 3px solid var(--hm-green);
  outline-offset: 3px;
}

.hm-btn .icon {
  font-size: 18px;
}

/* ---------- hero: full-bleed background ----------
   The photo is a real <img> layer rather than a CSS background-image so it can
   carry fetchpriority="high" and intrinsic dimensions: as the LCP element it
   should be discoverable in the initial HTML scan, which a background-image is
   not. The scrim is what buys white text its contrast, so it is not optional. */

.hm-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 620px;
  padding: 168px 0 96px;
  overflow: hidden;
  background: #0d2016;
}

.hm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  will-change: transform;
}

/* Parallax via a CSS scroll-driven animation: it runs off the main thread and
   needs no scroll listener, so there is nothing to jank. Browsers without
   animation-timeline simply get the static hero, which is a fine outcome.
   The layer is oversized and offset upward so the travel can never expose an
   edge; see the geometry note on the keyframes. */
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .hm-hero__bg {
      /* 136% tall pinned at -24% covers -24%..112% of the hero box. */
      top: -24%;
      height: 136%;
      animation: hm-hero-parallax linear both;
      /* scroll() rather than view(): the hero sits at the top of the document,
         so progress should start at scrollTop 0, which view() does not give. */
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

@keyframes hm-hero-parallax {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* +16% of a 136%-tall layer = 21.8% of the hero, so the top edge ends at
       -2.2% and the bottom at 134%: covered at both ends with margin to spare.
       Reads as roughly 15% lag against the scroll distance, which is visible
       without tipping into the showy end. */
    transform: translate3d(0, 16%, 0);
  }
}

.hm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(9, 26, 17, 0.93) 0%,
    rgba(9, 26, 17, 0.86) 38%,
    rgba(9, 26, 17, 0.58) 72%,
    rgba(9, 26, 17, 0.42) 100%
  );
}

/* .hm-hero is a flex container, so .auto-container becomes a flex item and
   shrink-to-fit collapses it to its content width, which pulled the copy into
   the middle of the viewport. Force it back to full width. */
.hm-hero > .auto-container {
  width: 100%;
}

.hm-hero__inner {
  position: relative;
  max-width: 44rem;
}

.hm-hero .hm-eyebrow {
  color: #9fd9bd;
}

.hm-hero__h1 {
  margin: 0 0 20px;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Brand green is too dark to read against the scrim, so the emphasis colour
   steps up to the light mint used for the eyebrow. */
.hm-hero__h1 em {
  font-style: normal;
  color: #9fd9bd;
}

.hm-hero__sub {
  max-width: 44ch;
  margin: 0 0 34px;
  font-family: "Work Sans", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #dfeae4;
}

.hm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Ghost button on a photographic backdrop needs its own stroke and fill,
   never a transparent button relying on the page background. */
.hm-btn--onDark {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
}

.hm-btn--onDark:hover,
.hm-btn--onDark:focus {
  border-color: #fff;
  background: #fff;
  color: var(--hm-green-dark);
}

.hm-btn--onDark:focus-visible {
  outline: 3px solid #9fd9bd;
  outline-offset: 3px;
}

/* ---------- stats strip: hairline columns, no cards ---------- */

.hm-stats {
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
  background: #fff;
}

.hm-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hm-stat {
  padding: 34px 26px;
  border-left: 1px solid var(--hm-line);
  font-family: "Work Sans", sans-serif;
}

.hm-stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.hm-stat__num {
  display: block;
  font-family: "Libre Baskerville", serif;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--hm-green);
}

.hm-stat__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hm-muted);
}

/* ---------- product lines: asymmetric grid, 5 real cells ---------- */

.hm-lines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hm-line {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.hm-line:hover,
.hm-line:focus-visible {
  border-color: var(--hm-green);
  transform: translateY(-3px);
}

.hm-line:focus-visible {
  outline: 3px solid var(--hm-green);
  outline-offset: 2px;
}

/* The flagship line takes the full first row with its photo alongside. */
.hm-line--lead {
  grid-column: span 4;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  padding: 0;
  overflow: hidden;
}

.hm-line--lead .hm-line__media {
  position: relative;
  flex: 0 0 38%;
  align-self: stretch;
  min-height: 270px;
  background: #e9edeb;
}

.hm-line--lead .hm-line__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hm-line--lead .hm-line__body {
  padding: 32px 36px 32px 0;
}

.hm-line__name {
  margin: 0 0 12px;
  font-family: "Libre Baskerville", serif;
  font-size: 21px;
  line-height: 1.3;
  color: var(--hm-ink);
}

.hm-line--lead .hm-line__name {
  font-size: 27px;
}

.hm-line__spec {
  margin: 0 0 14px;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--hm-body);
}

.hm-line__spec b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hm-muted);
}

.hm-line__use {
  margin: 0 0 20px;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--hm-muted);
}

.hm-line__more {
  margin-top: auto;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--hm-green);
}

.hm-line__more .ti-arrow-right {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  transition: transform 0.25s ease;
}

.hm-line:hover .hm-line__more .ti-arrow-right {
  transform: translateX(4px);
}

/* ---------- process: 4 steps on a connecting rule ---------- */

.hm-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.hm-step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--hm-green-soft);
  font-family: "Work Sans", sans-serif;
}

.hm-step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--hm-green);
}

.hm-step__media {
  margin-bottom: 18px;
  border-radius: var(--hm-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9edeb;
}

.hm-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hm-step__name {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--hm-ink);
}

.hm-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: var(--hm-body);
}

/* ---------- why: divided rows, no cards ---------- */

.hm-why {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

.hm-why__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hm-line);
}

.hm-why__item {
  padding: 26px 0;
  border-bottom: 1px solid var(--hm-line);
  font-family: "Work Sans", sans-serif;
}

.hm-why__name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--hm-ink);
}

.hm-why__name .icon {
  font-size: 16px;
  color: var(--hm-green);
}

.hm-why__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--hm-body);
}

/* ---------- gallery preview ---------- */

.hm-gallery__foot {
  margin-top: 30px;
  text-align: center;
}

/* ---------- legalitas: 3x2 icon grid, evenly filled ---------- */

.hm-legal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hm-line);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  overflow: hidden;
}

.hm-legal__item {
  padding: 32px 28px;
  background: #fff;
  font-family: "Work Sans", sans-serif;
}

.hm-legal__icon {
  display: block;
  margin-bottom: 16px;
  font-size: 26px;
  color: var(--hm-green);
}

.hm-legal__name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--hm-ink);
}

.hm-legal__val {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hm-muted);
  overflow-wrap: anywhere;
}

/* Footer styles live in css/site-footer.css: the footer is shared by every
   page, so it must not depend on this homepage-only stylesheet. */

/* ---------- scroll reveal ----------
   The theme loads wow.js, but the fadeIn* keyframes it expects live in
   css/animate.css which no page ever links, so those classes have never
   actually animated anything. This is a self-contained replacement. */

/* Gated on .js (set by an inline script in the head) so that with JavaScript
   off the content is simply visible instead of stuck at opacity 0. The flag is
   applied during head parsing, so there is no unstyled flash. */
.js .hm-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: calc(var(--hm-i, 0) * 45ms);
}

.js .hm-rise.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .hm-hero {
    padding-top: 168px;
  }
  .hm-h2 {
    font-size: 32px;
  }
  .hm-stat__num {
    font-size: 34px;
  }
}

@media (max-width: 991px) {
  .hm-sec {
    padding: 70px 0;
  }
  .hm-hero {
    min-height: 520px;
    padding: 132px 0 72px;
  }
  .hm-lines,
  .hm-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-line--lead {
    grid-column: span 2;
  }
  .hm-why {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .hm-legal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-fcols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .hm-sec {
    padding: 56px 0;
  }
  .hm-hero {
    min-height: 0;
    padding: 104px 0 60px;
  }
  .hm-hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(9, 26, 17, 0.9) 0%,
      rgba(9, 26, 17, 0.84) 55%,
      rgba(9, 26, 17, 0.9) 100%
    );
  }
  .hm-h2 {
    font-size: 27px;
  }
  .hm-lead,
  .hm-hero__sub {
    font-size: 16px;
  }
  .hm-head {
    margin-bottom: 32px;
  }
  .hm-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-stat {
    padding: 24px 18px;
  }
  .hm-stat:first-child,
  .hm-stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .hm-stat:nth-child(3),
  .hm-stat:nth-child(4) {
    border-top: 1px solid var(--hm-line);
  }
  .hm-stat__num {
    font-size: 30px;
  }
  /* Single column for the line cards: the lead card's side-by-side media and
     body do not fit a phone, so it stacks like the rest. */
  .hm-lines,
  .hm-process {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-line--lead {
    grid-column: span 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hm-line--lead .hm-line__media {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .hm-line--lead .hm-line__body {
    padding: 26px 22px 28px;
  }
  /* At 21px the two longest line names wrapped to a second line on a phone
     ("Polipropylene multifilamen" from 360px down, "PTY/DTY/SDY Roto & Non
     Roto" at every narrow width). Measured at 320px the pair needs ~240px, so
     the type steps down and the card padding tightens to clear it. Deliberately
     no white-space: nowrap, so an even longer name added later wraps rather
     than overflowing the card. */
  .hm-line {
    padding: 24px 22px;
  }
  .hm-line__name,
  .hm-line--lead .hm-line__name {
    /* Measured at 320px: "Polipropylene multifilamen" is 241px wide at 17px in
       246px of space. 16.5px drops it to 234px, so there is real margin if
       Libre Baskerville has not loaded and a fallback serif with wider metrics
       renders instead. */
    font-size: 16.5px;
  }
  .hm-legal,
  .hm-fcols {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-btn {
    width: 100%;
  }
}

/* ---------- reduced motion ----------
   Also neutralises the theme's own .wow elements, which are left with
   visibility toggled by wow.js on the pages that still use them. */

@media (prefers-reduced-motion: reduce) {
  .js .hm-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hm-btn,
  .hm-line,
  .hm-line__more .ti-arrow-right {
    transition: none;
  }
  .hm-line:hover,
  .hm-line:focus-visible {
    transform: none;
  }
  .wow {
    animation: none !important;
    visibility: visible !important;
  }
}

/* ---------- header over the hero ----------
   Two separate states have to be handled.

   At the top of the page .main-header is position:absolute with a transparent
   .header-upper, so it floats over the hero photo and needs light text.

   Once scrolled, script.js adds .fixed-header and .header-upper becomes
   position:fixed with a solid white background. Light text there is invisible,
   which is exactly what happened: only the .current item stayed readable
   because main.css paints it #2c724f in that state. Hence :not(.fixed-header).

   Below 1024px responsive.css switches .main-header to position:relative, where
   it sits in normal flow on white rather than over the hero, so the light
   treatment stops at that breakpoint too.

   Scoped to .page-home so the other pages keep their default dark header. */

@media only screen and (min-width: 1024px) {
  .page-home .main-header:not(.fixed-header) .logo h5 {
    color: #fff;
  }

  .page-home .main-header:not(.fixed-header) .logo a:hover h5 {
    color: #9fd9bd;
  }

  .page-home .main-header:not(.fixed-header) .main-menu .navigation > li > a {
    color: #fff;
  }

  .page-home .main-header:not(.fixed-header) .main-menu .navigation > li.current > a,
  .page-home .main-header:not(.fixed-header) .main-menu .navigation > li:hover > a {
    color: #9fd9bd;
  }

  .page-home .main-header:not(.fixed-header) .mobile-nav-toggler .icon {
    color: #fff;
  }
}