.lf-home-hero {
  position: relative;
  min-height: 868px;
  display: flex;
  align-items: center;
  padding: 0 var(--lf-container-margin);
  overflow: hidden;
}
.lf-home-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lf-home-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.lf-home-hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44, 42, 41, 0.65) 0%, rgba(44, 42, 41, 0.25) 50%, rgba(44, 42, 41, 0) 80%);
}
.lf-home-hero__slide--active {
  opacity: 1;
}
.lf-home-hero__content {
  position: relative;
  z-index: 1;
  max-width: 938px;
  color: var(--lf-color-white);
}
.lf-home-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: rgba(44, 42, 41, 0.25);
  color: var(--lf-color-white);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lf-home-hero__arrow:hover {
  background: rgba(44, 42, 41, 0.5);
}
.lf-home-hero__arrow--prev {
  left: var(--lf-space-4);
}
.lf-home-hero__arrow--next {
  right: var(--lf-space-4);
}
.lf-home-hero__counter {
  position: absolute;
  bottom: var(--lf-space-4);
  right: var(--lf-space-4);
  z-index: 2;
  color: var(--lf-color-white);
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
}
/* Hero text is visible on page load (above the fold, no scroll needed), so
   it gets a plain CSS entrance animation instead of the IntersectionObserver
   reveal used further down the page — same light fade-up feel, just
   triggered immediately and staggered across headline/subtext/button.
   @keyframes lf-hero-fade-up lives in components.css (shared by every hero). */
.lf-home-hero__headline,
.lf-home-hero__subtext,
.lf-home-hero__content .lf-btn {
  animation: lf-hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lf-home-hero__headline {
  animation-delay: 0.1s;
}
.lf-home-hero__subtext {
  animation-delay: 0.25s;
}
.lf-home-hero__content .lf-btn {
  animation-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .lf-home-hero__headline,
  .lf-home-hero__subtext,
  .lf-home-hero__content .lf-btn {
    animation: none;
  }
}
.lf-home-hero__headline {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h1-size);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 var(--lf-space-3);
  color: var(--lf-color-white);
}
.lf-home-hero__subtext {
  max-width: 385px;
  font-family: var(--lf-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 var(--lf-space-4);
  color: var(--lf-color-white);
}

.lf-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  scroll-margin-top: 80px; /* offsets the #products anchor jump so the sticky .lf-header doesn't cover the top of the section */
  /* Explicit title/label/image rows (not just column gap) so each row is
     sized to the tallest card via subgrid below — if any one title wraps
     an extra line at some viewport width, every card's label still starts
     on the same line and every image still starts at the same Y, instead
     of just following whatever gap its own title happened to leave. */
  grid-template-rows: auto auto auto;
  gap: var(--lf-space-4);
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-5) var(--lf-container-margin);
}

.lf-inspiration-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 540px;
  padding: var(--lf-space-5) var(--lf-container-margin);
  color: var(--lf-color-ink);
  text-decoration: none;
  overflow: hidden;
}
.lf-inspiration-teaser__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.lf-inspiration-teaser:hover .lf-inspiration-teaser__bg {
  transform: scale(1.04);
}
.lf-inspiration-teaser__headline,
.lf-inspiration-teaser__subtext,
.lf-inspiration-teaser__arrow {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.lf-inspiration-teaser:hover .lf-inspiration-teaser__headline,
.lf-inspiration-teaser:hover .lf-inspiration-teaser__subtext,
.lf-inspiration-teaser:hover .lf-inspiration-teaser__arrow {
  transform: translate(4px, -4px);
}
.lf-inspiration-teaser:hover .lf-inspiration-teaser__arrow {
  background-color: rgba(44, 42, 41, 0.5);
}
.lf-inspiration-teaser__headline {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  max-width: 555px;
  color: #000;
}
.lf-inspiration-teaser__subtext {
  display: block;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-m-size);
  font-weight: 500;
  margin-top: var(--lf-space-1);
  max-width: 555px;
  color: #000;
}
.lf-inspiration-teaser__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: var(--lf-space-5);
  border-radius: 50%;
  background-color: rgba(44, 42, 41, 0.25);
  color: var(--lf-color-white);
}

.lf-about-brand {
  display: block;
  padding: var(--lf-space-5) 0 var(--lf-space-5);
  scroll-margin-top: 80px; /* offsets the #about-brand anchor jump so the sticky .lf-header doesn't cover the top of the section */
}
.lf-about-brand__inner {
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: 0 var(--lf-container-margin) var(--lf-space-4);
}
.lf-about-brand__heading {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-2);
}
.lf-about-brand__text {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-size);
  color: var(--lf-color-ink);
  opacity: 0.75;
  margin: 0 0 var(--lf-space-4);
}
.lf-about-brand__media {
  position: relative;
  width: 100%;
  min-height: 480px;
  background-size: cover;
  background-position: center;
}
.lf-about-brand__play {
  position: absolute;
  top: var(--lf-space-3);
  right: var(--lf-space-3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lf-color-primary);
  color: var(--lf-color-white);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lf-about-brand__play:hover {
  background: var(--lf-color-primary-hover);
}
.lf-about-brand__more {
  display: inline-flex;
  align-items: center;
  gap: var(--lf-space-2);
  margin-top: var(--lf-space-4);
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-m-size);
  font-weight: 500;
  color: var(--lf-color-ink);
  text-decoration: underline;
}
.lf-about-brand__stats-bar {
  position: absolute;
  left: var(--lf-container-margin);
  bottom: 0;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  background: rgba(44, 42, 41, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lf-about-brand__stat {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  column-gap: var(--lf-space-2);
  row-gap: var(--lf-space-1);
  align-items: center;
  width: 152px;
  padding: var(--lf-space-3);
  border-right: 1px solid rgba(245, 247, 244, 0.2);
}
.lf-about-brand__stat:last-child {
  border-right: none;
}
.lf-about-brand__stat-icon {
  grid-row: 1;
  grid-column: 1;
  width: 25px;
  height: 25px;
}
.lf-about-brand__stat-number {
  grid-row: 1;
  grid-column: 2;
}
.lf-about-brand__stat-label {
  grid-row: 2;
  grid-column: 1 / span 2;
  max-width: 120px;
  overflow-wrap: break-word;
}
.lf-about-brand__stat-number {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lf-color-light);
}
.lf-about-brand__stat-label {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-xs-size);
  color: var(--lf-color-light);
  opacity: 0.75;
}

.lf-trust-badges {
  display: block;
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-5) var(--lf-container-margin) var(--lf-space-5);
}
.lf-trust-badges__grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: var(--lf-space-4);
}
.lf-trust-badges__item {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-space-2);
  text-align: left;
  transition: transform 0.3s ease;
}
.lf-trust-badges__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}
.lf-trust-badges__text {
  display: flex;
  flex-direction: column;
  max-width: 170px;
}
.lf-trust-badges__title {
  font-family: var(--lf-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-1);
}
.lf-trust-badges__description {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  opacity: 0.75;
}
.lf-trust-badges__item:hover {
  transform: translateY(-6px);
}
.lf-trust-badges__icon {
  transition: transform 0.3s ease;
}
.lf-trust-badges__item:hover .lf-trust-badges__icon {
  transform: scale(1.1);
}

.lf-timeline {
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-5) var(--lf-container-margin);
  overflow: hidden;
  /* Divider rules belong to this outer block (the component Figma actually
     measured), not tight around the track — a border there collided with
     the "above" item text, which extends past the track's own box. */
  border-top: 1px solid rgba(44, 42, 41, 0.12);
  border-bottom: 1px solid rgba(44, 42, 41, 0.12);
}
.lf-timeline__track {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  /* Year + gap + 49px stem + up to ~3 wrapped lines of description text can
     reach well past var(--lf-space-6) (64px) above/below the center line —
     that shortfall was letting the absolutely-positioned text spill out of
     the track's own box and overlap neighboring content. */
  padding: 140px 75px;
}
.lf-timeline__track::before {
  content: '';
  position: absolute;
  /* The horizontal line itself still spans the full 1280px width (confirmed
     in Figma) — only the dots are inset from the edges — so pull it back out
     past the track's own side padding added above. */
  left: -75px;
  right: -75px;
  top: 50%;
  height: 1px;
  background: var(--lf-color-ink);
  opacity: 0.3;
  z-index: 0;
}
.lf-timeline__item {
  position: relative;
  flex: 0 0 auto;
  width: 0;
}
.lf-timeline__item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-color-primary-hover);
  /* Crisp "bullseye": solid center, a background-colored gap, then a solid ring —
     not a soft glow, confirmed against a close-up Figma crop. */
  box-shadow:
    0 0 0 4px var(--lf-color-white),
    0 0 0 6px var(--lf-color-primary-hover);
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.3s ease;
}
.lf-timeline__item:hover::before {
  transform: translate(-50%, -50%) scale(1.25);
}
/* Thin stem connecting the dot to whichever side holds the longer description
   text (the year sits close to the dot with no connector, per Figma) — exact
   length (49px) and gap confirmed against a Figma layer inspector screenshot. */
.lf-timeline__item--above::after,
.lf-timeline__item--below::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 4px;
  height: 49px;
  /* The line plus a small dot capping its far end (at the text, away from
     the main dot) — confirmed against Figma, not just a bare line. The dot
     is solid ink; only the connecting line itself is translucent (they're
     separate background layers, so each gets its own color instead of a
     shared element-level opacity washing out the dot too). */
  transform: translateX(-50%);
}
.lf-timeline__item--above::after {
  bottom: 50%;
  background-image:
    radial-gradient(circle, var(--lf-color-ink) 1.5px, transparent 2px),
    linear-gradient(rgba(44, 42, 41, 0.4), rgba(44, 42, 41, 0.4));
  background-repeat: no-repeat, no-repeat;
  background-position: top center, center;
  background-size: 4px 4px, 1px 100%;
}
.lf-timeline__item--below::after {
  top: 50%;
  background-image:
    radial-gradient(circle, var(--lf-color-ink) 1.5px, transparent 2px),
    linear-gradient(rgba(44, 42, 41, 0.4), rgba(44, 42, 41, 0.4));
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, center;
  background-size: 4px 4px, 1px 100%;
}
/* The year and its description always sit on OPPOSITE sides of the center
   line (confirmed against Figma) — "--above"/"--below" names which side the
   YEAR is on; the text takes whichever side is left over. */
.lf-timeline__year,
.lf-timeline__text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  text-align: center;
}
.lf-timeline__item--below .lf-timeline__year {
  bottom: calc(50% + var(--lf-space-3));
}
.lf-timeline__item--below .lf-timeline__text {
  top: calc(50% + 49px);
}
.lf-timeline__item--above .lf-timeline__year {
  top: calc(50% + var(--lf-space-3));
}
.lf-timeline__item--above .lf-timeline__text {
  bottom: calc(50% + 49px);
}
.lf-timeline__year {
  display: block;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-s-size);
  font-weight: 700;
  color: var(--lf-color-ink);
}
.lf-timeline__text {
  display: block;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-xs-size);
  font-weight: 500;
  color: var(--lf-color-ink);
}
.lf-timeline__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--lf-space-2);
  margin: 0 0 var(--lf-space-3);
  background: none;
  border: none;
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-m-size);
  text-decoration: none;
  color: var(--lf-color-ink);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lf-timeline__toggle:hover {
  opacity: 0.6;
}
.lf-timeline__toggle-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.lf-timeline__toggle:hover .lf-timeline__toggle-arrow {
  transform: translateY(3px);
}
.lf-timeline__toggle[aria-expanded="true"] .lf-timeline__toggle-arrow {
  transform: rotate(180deg);
}
.lf-timeline__toggle[aria-expanded="true"]:hover .lf-timeline__toggle-arrow {
  transform: rotate(180deg) translateY(3px);
}
.lf-timeline__track--collapsed {
  display: none;
}

.lf-contact-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--lf-space-4);
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: var(--lf-space-5) var(--lf-container-margin);
  border-top: 1px solid rgba(44, 42, 41, 0.12);
  text-align: left;
}
.lf-contact-cta__heading {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h2-size);
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-2);
}
.lf-contact-cta__text {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-size);
  color: var(--lf-color-ink);
  opacity: 0.75;
  margin: 0;
}
.lf-contact-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--lf-space-2);
  flex: 0 0 auto;
}

/* Scroll-reveal: JS adds .lf-reveal to any element it wants to animate in,
   then toggles .lf-reveal--visible once it scrolls into view. Generic (not
   scoped to specific selectors) so it also covers the per-child text
   cascade in initTextCascadeReveal(), not just whole-block reveals. Lives in
   components.css (shared by every LuxeForm template) since this utility
   isn't Home-specific. */
/* A light photo "settle" to go with the fade — scoped to the photo itself so
   it doesn't fight the card's own translateY above. Not applied to
   .lf-about-brand__media: it's full-bleed (edge to edge), so scaling it up
   has nowhere to grow into and pushes the page into horizontal scroll. */
.lf-card-category.lf-reveal .lf-card-category__image {
  transform: scale(1.06);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-card-category.lf-reveal--visible .lf-card-category__image {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .lf-reveal,
  .lf-reveal--visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 960px) {
  .lf-product-grid,
  .lf-trust-badges__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lf-about-brand__stats-bar {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 152px);
  }
  .lf-home-hero__headline {
    font-size: 36px;
  }
  /* 7 items across can't stay legible once the row gets this narrow —
     labels start overlapping their neighbors well before any single
     viewport-specific width tweak would fix it (no Figma mobile/tablet
     frames exist to match anyway). Switch to a vertical timeline instead:
     line down the left, dot + year + text per row. */
  .lf-timeline__track {
    flex-direction: column;
    align-items: stretch;
    gap: var(--lf-space-5);
    padding: 0;
  }
  .lf-timeline__track::before {
    left: 7px;
    top: 0;
    right: auto;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .lf-timeline__item {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding-left: var(--lf-space-5);
    padding-right: var(--lf-space-2);
  }
  .lf-timeline__item::before {
    left: 7px;
    top: 4px;
    transform: translate(-50%, 0);
  }
  .lf-timeline__item:hover::before {
    transform: translate(-50%, 0) scale(1.25);
  }
  .lf-timeline__item--above::after,
  .lf-timeline__item--below::after {
    display: none;
  }
  .lf-timeline__item:first-child .lf-timeline__year,
  .lf-timeline__item:first-child .lf-timeline__text,
  .lf-timeline__item:last-child .lf-timeline__year,
  .lf-timeline__item:last-child .lf-timeline__text,
  .lf-timeline__year,
  .lf-timeline__text {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: none;
    text-align: left;
  }
  .lf-timeline__year {
    font-size: var(--lf-h3-size);
    margin-bottom: var(--lf-space-1);
  }
  .lf-timeline__text {
    font-size: var(--lf-body-s-size);
  }
}

@media (max-width: 600px) {
  :root {
    /* Collapses the page-wide side gutter so narrow viewports don't cram
       multi-column content (stats bar, trust badges) into a sliver of space. */
    --lf-container-margin: 20px;
  }
  .lf-product-grid,
  .lf-trust-badges__grid {
    grid-template-columns: 1fr;
  }
  .lf-trust-badges__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lf-space-1);
  }
  .lf-trust-badges__text {
    max-width: none;
  }
  .lf-about-brand__stats-bar {
    grid-template-columns: repeat(1, 152px);
  }
  .lf-about-brand__stat {
    border-right: none;
    border-bottom: 1px solid rgba(245, 247, 244, 0.2);
  }
  .lf-about-brand__stat:last-child {
    border-bottom: none;
  }
  .lf-home-hero__headline {
    font-size: 28px;
  }
  .lf-contact-cta {
    flex-direction: column;
  }
  .lf-footer__inner {
    flex-direction: column;
  }
  /* Timeline's vertical layout is handled by the 960px breakpoint above —
     600px is already inside that range, nothing further needed here. */
}

/* Hide the vendor custom cursor entirely while over our own cards/teaser,
   which already draw a static corner arrow of their own — both its default
   dot+ring AND its big hover-arrow circle were landing right on top of that
   icon, not just the hover state. Pure CSS override, no JS fighting over the
   vendor's own classes. */
body.lf-cursor-suppress-arrow .circle-cursor-outer,
body.lf-cursor-suppress-arrow .circle-cursor-inner {
  opacity: 0 !important;
}