/*
 * Infinity Rise — Homepage (front-page) styles.
 * Builds on design-system.css tokens. Desktop-first; responsive across
 * 1920 / 1536 / 1440 / 1280 / 1024 / 768 / 425 / 393.
 * Background images are referenced relative to /assets/css/.
 */

.lp-section { padding: var(--sec-pt) var(--sec-pr) var(--sec-pb) var(--sec-pl); }
.lp-center { text-align: center; }
.lp-heading { margin: 0 0 16px; }
.lp-intro { max-width: 880px; margin: 0 auto 40px; color: #4a4a4a; }
@media (min-width: 1537px) { .lp-intro { max-width: 1155px; } }
@media (min-width: 1441px) and (max-width: 1536px) { .lp-intro { max-width: 1040px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .lp-intro { max-width: 940px; } }
/* Mobile: drop the intro paragraph's bottom margin. */
@media (max-width: 768px) { .lp-intro { margin: 0 auto 0px; } }
.lp-center.lp-intro { margin-inline: auto; }
.lp-section__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.lp-section__head .lp-heading { margin: 0; }

/* ---------- HERO ---------- */
.lp-hero { position: relative; background-size: cover; background-position: center; color: var(--color-white); display: flex; align-items: center; justify-content: center; text-align: center; min-height: var(--bnr-h); padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); }
@media (min-width: 1441px) and (max-width: 1536px) { .lp-hero { padding: 160px 180px; } }
/* Banner height = viewport height on all non-mobile screens; mobile (<=768) keeps the px height. */
@media (min-width: 769px) { .lp-hero { min-height: 100vh; } }
/* 1920: header + hero fit one screen (leave a small sliver of the next section),
   so the hero no longer overflows below the fold. Header is ~101px tall here. */
@media (min-width: 1900px) { .lp-hero { min-height: calc(100vh - 120px); } }
/* 1536 band: header + hero fill exactly one screen (hero reaches the bottom, Play
   Video visible), instead of 100vh overflowing by the header height. Header ~88px. */
@media (min-width: 1441px) and (max-width: 1536px) { .lp-hero { min-height: calc(94vh - 88px); } }
/* 1280 band: shorter banner (90vh) with tighter padding per design. */
@media (min-width: 1025px) and (max-width: 1280px) { .lp-hero { min-height: 90vh; padding: 180px 180px 80px 180px; } }
.lp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lp-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 1; }
.lp-hero__inner { position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; text-align: center; }
.lp-hero__cta { background: rgba(255,255,255,.82); color: var(--color-black); border-color: transparent; border-radius: 0; backdrop-filter: blur(2px); }
.lp-hero__cta:hover, .lp-hero__cta:focus { background: var(--color-primary); color: var(--color-ancient); border-color: transparent; }
.lp-hero__title { color: var(--color-white); font-size: var(--fs-h1); font-weight: 600; line-height: 1.1; margin: 0 0 20px; overflow-wrap: break-word; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.lp-hero__text { color: rgba(255,255,255,.92); margin: 0 auto 28px; max-width: 1080px; }
@media (min-width: 1537px) { .lp-hero__text { font-size: 24px; font-weight: 500; } }
@media (min-width: 1441px) and (max-width: 1536px) { .lp-hero__text { margin: 0 165px 28px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .lp-hero__text { margin: 0 auto 28px; max-width: 600px; } }
.lp-hero__play { position: absolute; right: 40px; bottom: 40px; z-index: 2; display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; cursor: pointer; font-family: var(--font-primary); padding: 0; }
.lp-hero__play-icon { width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lp-hero__play-icon svg { width: 22px; height: 24px; }
.lp-hero__play-label { font-size: 20px; font-weight: 400; }
@media (min-width: 1025px) and (max-width: 1280px) { .lp-hero__play-icon { width: 56px; height: 56px; } .lp-hero__play-icon svg { width: 18px; height: 20px; } }

/* ---------- SECTION 1 · Trusted ---------- */
.lp-trusted { background-color: #F6F2EF; }
/* Remove the bottom padding of the Trusted section (all screen sizes). */
section.lp-section.lp-trusted { padding-bottom: 0; }
.lp-trusted .lp-heading { text-align: center; }
.lp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 24px; }
.lp-feature { text-align: center; padding: 24px 48px; }
.lp-feature + .lp-feature { border-left: 1px solid #e3ded1; }
.lp-feature--dup { display: none; } /* duplicate set only used for the mobile marquee loop */
/* Keep the icon out of text selection so the gold selection tint can't wash over its gold artwork. */
.lp-feature__icon { margin: 0 auto 16px; -webkit-user-select: none; user-select: none; }
.lp-feature__title { margin: 0 0 10px; }
.lp-feature__text { color: #5a5a5a; margin: 0; }
/* Section 1 typography (per spec) — scoped to .lp-trusted only. */
.lp-trusted .lp-heading { font-size: 56px; font-weight: 500; }
.lp-trusted .lp-intro { font-size: 20px; text-align: center; }
.lp-trusted .lp-feature__title { font-size: 36px; font-weight: 400; }
.lp-trusted .lp-feature__text { font-size: 20px; }
@media (max-width: 1536px) { .lp-trusted .lp-heading { font-size: 46px; } .lp-trusted .lp-intro { font-size: 18px; } .lp-trusted .lp-feature__title { font-size: 30px; } .lp-trusted .lp-feature__text { font-size: 18px; } }
@media (max-width: 1440px) { .lp-trusted .lp-heading { font-size: 42px; } .lp-trusted .lp-intro { font-size: 17px; } .lp-trusted .lp-feature__title { font-size: 28px; } .lp-trusted .lp-feature__text { font-size: 17px; } }
@media (max-width: 1280px) { .lp-trusted .lp-heading { font-size: 38px; } .lp-trusted .lp-intro { font-size: 16px; } .lp-trusted .lp-feature__title { font-size: 26px; } .lp-trusted .lp-feature__text { font-size: 16px; } }
@media (max-width: 1024px) { .lp-trusted .lp-heading { font-size: 32px; } .lp-trusted .lp-intro { font-size: 16px; } .lp-trusted .lp-feature__title { font-size: 24px; } .lp-trusted .lp-feature__text { font-size: 16px; } }
@media (max-width: 425px)  { .lp-trusted .lp-heading { font-size: 28px; } .lp-trusted .lp-intro { font-size: 15px; } .lp-trusted .lp-feature__title { font-size: 22px; } .lp-trusted .lp-feature__text { font-size: 15px; } }
@media (max-width: 425px)  { .lp-trusted .lp-heading { font-size: 26px; } .lp-trusted .lp-intro { font-size: 15px; } .lp-trusted .lp-feature__title { font-size: 22px; } .lp-trusted .lp-feature__text { font-size: 15px; } }

/* ---------- SECTION 2 · Global Network ---------- */
.lp-network { position: relative; background-size: cover; background-position: center; padding: 64px var(--sec-pr) 64px var(--sec-pl); }
.lp-network__overlay { display: block; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .38); }
.lp-network__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lp-network__inner { position: relative; z-index: 1; }
.lp-network__card { background: var(--color-white); color: var(--color-black); max-width: 900px; padding: 40px 48px; border-radius: 0; box-shadow: none; }
@media (min-width: 1441px) and (max-width: 1536px) { .lp-network__card { background: var(--color-white); color: var(--color-black); max-width: 612px; padding: 56px 64px; border-radius: 0; box-shadow: none; } }
.lp-network__title { margin: 0 0 12px; }
.lp-network__text { color: #4a4a4a; margin: 0 0 16px; }
.lp-network__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 18px; }
.lp-network__list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.lp-network__list li img { width: 26px; height: 26px; flex: 0 0 auto; }
.lp-network__note { display: inline-block; background: var(--color-ancient); color: var(--color-primary); font-weight: 600; padding: 10px 18px; border-radius: 0; margin: 0; }
/* Section 2 typography (per spec) — scoped to .lp-network only. */
.lp-network__title { font-size: 52px; font-weight: 500; }
.lp-network__text { font-size: 20px; }
.lp-network__list li { font-size: 20px; font-weight: 500; }
.lp-network__note { font-size: 24px; font-weight: 500; }
@media (max-width: 1536px) { .lp-network__title { font-size: 46px; } .lp-network__text { font-size: 18px; } .lp-network__list li { font-size: 18px; } .lp-network__note { font-size: 20px; } }
@media (max-width: 1440px) { .lp-network__title { font-size: 42px; } .lp-network__text { font-size: 17px; } .lp-network__list li { font-size: 17px; } .lp-network__note { font-size: 19px; } }
@media (max-width: 1280px) { .lp-network__title { font-size: 32px; } .lp-network__text { font-size: 14px; } .lp-network__list li { font-size: 14px; } .lp-network__note { font-size: 18px; } }
@media (max-width: 1024px) { .lp-network__title { font-size: 30px; } .lp-network__text { font-size: 16px; } .lp-network__list li { font-size: 16px; } .lp-network__note { font-size: 18px; } }
@media (max-width: 425px)  { .lp-network__title { font-size: 26px; } .lp-network__text { font-size: 15px; } .lp-network__list li { font-size: 15px; } .lp-network__note { font-size: 16px; } }
@media (max-width: 425px)  { .lp-network__title { font-size: 24px; } .lp-network__text { font-size: 15px; } .lp-network__list li { font-size: 15px; } .lp-network__note { font-size: 16px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .lp-network__card { max-width: 600px; padding: 40px 40px; } .lp-network__list li img { width: 20px; height: 20px; } }
/* 1920 screens (viewport ~1905px) — Global Network section per the design:
   a narrower left card (~820px) with roomier checklist rows, taller section. */
@media (min-width: 1900px) { .lp-network { padding-top: 72px; padding-bottom: 72px; } .lp-network__card { max-width: 866px; padding: 52px 64px; } .lp-network__card.lp-reveal.lp-reveal--in { width: 866px; } .lp-network__list { gap: 30px 24px; } .lp-network__text { margin-bottom: 22px; } }
/* "Read more" toggle: hidden on desktop (full intro always shown). */
.lp-network__toggle { display: none; }
/* Mobile only: clamp the intro to 2 lines with a "Read more" toggle so the card is
   shorter and more of the background video shows. Tapping it expands the full text. */
@media (max-width: 768px) {
	.lp-network__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 6px; }
	.lp-network__text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
	.lp-network__toggle { display: inline-block; margin: 0 0 14px; padding: 0; background: none; border: 0; color: var(--color-secondary); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
}

/* ---------- SECTION 3 · Product Categories (carousel) ---------- */
.lp-categories .lp-heading { font-size: 52px; font-weight: 500; }
.lp-cat-carousel { position: relative; overflow: hidden; }
.lp-cat-grid { display: flex; width: max-content; animation: lp-cat-marquee 45s linear infinite; }
.lp-cat-carousel:hover .lp-cat-grid { animation-play-state: paused; }
@keyframes lp-cat-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-cat { flex: 0 0 340px; margin-right: 24px; display: flex; flex-direction: column; text-decoration: none; }
.lp-cat__media { display: block; position: relative; aspect-ratio: 3 / 4; background-size: cover; background-position: center; overflow: hidden; }
/* Category image: smooth zoom on hover (clipped within the frame). */
.lp-cat__media::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform .5s ease; }
.lp-cat:hover .lp-cat__media::before { transform: scale(1.08); }
.lp-cat__caption { position: absolute; left: 24px; bottom: 24px; color: #fff; font-size: 28px; font-weight: 400; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.55); opacity: 0; transition: opacity .3s ease; }
.lp-cat:hover .lp-cat__caption { opacity: 1; }
.lp-cat__label { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0 0; }
.lp-cat__arrow { flex: 0 0 auto; width: 32px; height: 32px; background: url('../images/landing/s3/service-icon-default.svg') center / contain no-repeat; }
.lp-cat:hover .lp-cat__arrow { background-image: url('../images/landing/s3/service-icon-hover.svg'); }
/* 1280: smaller category arrow icon (28px). */
@media (min-width: 1025px) and (max-width: 1280px) { .lp-cat__arrow { width: 22px; height: 22px; } }
.lp-cat__name { font-size: 28px; font-weight: 500; line-height: 1.3; color: var(--color-black); }
.lp-cat:hover .lp-cat__name { color: var(--color-secondary); }
.lp-cat-viewall { color: var(--color-black); font-size: 24px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.lp-cat-viewall:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) { .lp-cat-grid { animation: none; } }
@media (max-width: 1536px) { .lp-categories .lp-heading { font-size: 44px; } .lp-cat__name { font-size: 22px; } .lp-cat__caption { font-size: 22px; } .lp-cat { flex-basis: 300px; } }
@media (max-width: 1280px) { .lp-categories .lp-heading { font-size: 38px; } .lp-cat__name { font-size: 20px; } .lp-cat__caption { font-size: 20px; } .lp-cat { flex-basis: 280px; } }
@media (max-width: 1024px) { .lp-categories .lp-heading { font-size: 32px; } .lp-cat__name { font-size: 19px; } .lp-cat__caption { font-size: 19px; } .lp-cat { flex-basis: 260px; } }
@media (max-width: 768px)  { .lp-cat { flex-basis: 240px; } }
@media (max-width: 425px)  { .lp-categories .lp-heading { font-size: 28px; } .lp-cat__name { font-size: 18px; } .lp-cat__caption { font-size: 18px; } .lp-cat { flex-basis: 220px; } }
/* Mobile: the category carousel is a native touch scroller that JS (main.js)
   auto-advances via scrollLeft, looping over the duplicate (aria-hidden) set —
   CSS marquee animations freeze on iPhones (Reduce Motion / Low Power), so the
   CSS animation is off and movement + seamless wrap are scroll-position based.
   Manual swipe keeps working (auto-scroll pauses while touching). */
@media (max-width: 768px) {
	/* NOTE: no -webkit-overflow-scrolling:touch here — on iOS it composites the
	   scroller so programmatic scrollLeft (the JS auto-scroll) is ignored.
	   scroll-behavior pinned to auto so per-frame scrollLeft writes land instantly. */
	.lp-cat-carousel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; }
	.lp-cat-carousel::-webkit-scrollbar { display: none; }
	.lp-cat-grid { animation: none; }
}

/* ---------- SECTION 4 · Sustainable ---------- */
.lp-sustain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 48px; }
.lp-sustain__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 16px 20px; font-size: var(--fs-h6); font-weight: 500; }
.lp-sustain__item--dup { display: none; } /* duplicate set only used for the mobile marquee loop */
@keyframes lp-sustain-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-sustain .lp-heading { font-size: 52px; font-weight: 500; }
.lp-sustain .lp-intro { font-size: 24px; font-weight: 400; }
@media (min-width: 1025px) { .lp-sustain__item + .lp-sustain__item { border-left: 1px dashed #cdbf9f; } }
@media (max-width: 1536px) { .lp-sustain .lp-heading { font-size: 44px; } .lp-sustain .lp-intro { font-size: 20px; } }
@media (max-width: 1280px) { .lp-sustain .lp-heading { font-size: 38px; } .lp-sustain .lp-intro { font-size: 18px; } }
@media (max-width: 1024px) { .lp-sustain .lp-heading { font-size: 32px; } .lp-sustain .lp-intro { font-size: 16px; } }
@media (max-width: 425px)  { .lp-sustain .lp-heading { font-size: 28px; } .lp-sustain .lp-intro { font-size: 16px; } }
@media (max-width: 425px)  { .lp-sustain .lp-heading { font-size: 26px; } }
/* Reduce the gap between the Categories slider and the Sustainability section. */
.lp-categories { padding-bottom: 70px; }
.lp-sustain { padding-top: 70px; }
@media (max-width: 1536px) { .lp-categories { padding-bottom: 60px; } .lp-sustain { padding-top: 60px; } }
@media (max-width: 1280px) { .lp-categories { padding-bottom: 50px; } .lp-sustain { padding-top: 50px; } }
@media (max-width: 1024px) { .lp-categories { padding-bottom: 40px; } .lp-sustain { padding-top: 40px; } }
@media (max-width: 425px)  { .lp-categories { padding-bottom: 30px; } .lp-sustain { padding-top: 30px; } }
@media (max-width: 425px)  { .lp-categories { padding-bottom: 24px; } .lp-sustain { padding-top: 24px; } }

/* ---------- SECTION 5 · R&D ---------- */
.lp-rd { background: var(--color-bg-2); }
.lp-rd__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; background: var(--color-bg-1); padding: 48px 80px; }
.lp-rd__text .lp-heading { text-align: left; font-size: 52px; font-weight: 500; }
.lp-rd__text .lp-intro { font-size: 24px; font-weight: 400; }
.lp-rd__link { display: inline-block; margin-top: 24px; color: var(--color-black); font-size: 24px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.lp-rd__link:hover { color: var(--color-secondary); }
.lp-rd__media img { width: 100%; max-width: 440px; margin-inline: auto; display: block; }
@media (max-width: 1536px) { .lp-rd__text .lp-heading { font-size: 44px; } .lp-rd__text .lp-intro { font-size: 20px; } .lp-rd__link { font-size: 20px; } }
@media (max-width: 1280px) { .lp-rd__inner { padding: 28px 56px; gap: 40px; } .lp-rd__text .lp-heading { font-size: 38px; } .lp-rd__text .lp-intro { font-size: 18px; } .lp-rd__link { font-size: 18px; } .lp-rd__media img { max-width: 340px; } }
@media (max-width: 1024px) { .lp-rd__inner { padding: 36px 40px; } .lp-rd__text .lp-heading { font-size: 32px; } .lp-rd__text .lp-intro { font-size: 16px; } .lp-rd__link { font-size: 16px; } }
@media (max-width: 425px)  { .lp-rd__inner { padding: 24px 28px; } .lp-rd__text .lp-heading { font-size: 28px; } }
/* Reduce the gap between the Sustainability and R&D sections. */
.lp-sustain { padding-bottom: 70px; }
.lp-rd { padding-top: 70px; }
@media (max-width: 1536px) { .lp-sustain { padding-bottom: 60px; } .lp-rd { padding-top: 60px; } }
@media (max-width: 1280px) { .lp-sustain { padding-bottom: 50px; } .lp-rd { padding-top: 50px; } }
@media (max-width: 1024px) { .lp-sustain { padding-bottom: 40px; } .lp-rd { padding-top: 40px; } }
@media (max-width: 425px)  { .lp-sustain { padding-bottom: 30px; } .lp-rd { padding-top: 30px; } }
@media (max-width: 425px)  { .lp-sustain { padding-bottom: 24px; } .lp-rd { padding-top: 24px; } }
/* Reduce the gap between the R&D and Why Choose sections. */
.lp-rd { padding-bottom: 70px; }
.lp-why { padding-top: 70px; }
@media (max-width: 1536px) { .lp-rd { padding-bottom: 60px; } .lp-why { padding-top: 60px; } }
@media (max-width: 1280px) { .lp-rd { padding-bottom: 50px; } .lp-why { padding-top: 50px; } }
@media (max-width: 1024px) { .lp-rd { padding-bottom: 40px; } .lp-why { padding-top: 40px; } }
@media (max-width: 425px)  { .lp-rd { padding-bottom: 30px; } .lp-why { padding-top: 30px; } }
@media (max-width: 425px)  { .lp-rd { padding-bottom: 24px; } .lp-why { padding-top: 24px; } }
/* Reduce the gap between the How We Work and Latest Insights sections. */
.lp-how { padding-bottom: 70px; }
.lp-blog { padding-top: 70px; }
@media (max-width: 1536px) { .lp-how { padding-bottom: 60px; } .lp-blog { padding-top: 60px; } }
@media (max-width: 1280px) { .lp-how { padding-bottom: 50px; } .lp-blog { padding-top: 50px; } }
@media (max-width: 1024px) { .lp-how { padding-bottom: 40px; } .lp-blog { padding-top: 40px; } }
@media (max-width: 425px)  { .lp-how { padding-bottom: 30px; } .lp-blog { padding-top: 30px; } }
@media (max-width: 425px)  { .lp-how { padding-bottom: 24px; } .lp-blog { padding-top: 24px; } }

/* ---------- SECTION 6 · Why ---------- */
.lp-why .lp-heading { font-size: 52px; font-weight: 500; }
.lp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px 48px; margin-top: 64px; }
.lp-why__item { text-align: center; }
.lp-why__item img { margin: 0 auto 28px; }
.lp-why__item--dup { display: none; } /* duplicate set only used for the mobile auto-scroll loop */
.lp-why__title { margin: 0 0 14px; font-size: 32px; font-weight: 500; }
.lp-why__text { color: #5a5a5a; margin: 0 auto; max-width: 400px; font-size: 20px; font-weight: 400; }
@media (max-width: 1536px) { .lp-why .lp-heading { font-size: 44px; } .lp-why__title { font-size: 24px; } .lp-why__text { font-size: 18px; } }
@media (max-width: 1280px) { .lp-why .lp-heading { font-size: 38px; } .lp-why__title { font-size: 24px; } .lp-why__text { font-size: 16px; } }
@media (max-width: 1024px) { .lp-why .lp-heading { font-size: 32px; } .lp-why__title { font-size: 22px; } .lp-why__text { font-size: 16px; } }
@media (max-width: 425px)  { .lp-why .lp-heading { font-size: 28px; } .lp-why__title { font-size: 20px; } .lp-why__text { font-size: 15px; } }

/* ---------- SECTION 7 · Industries (card over background image) ---------- */
.lp-industries { position: relative; background: var(--color-primary) center / cover no-repeat; padding: 64px var(--sec-pr) 64px var(--sec-pl); }
/* Crossfade layer: JS fades the incoming background in over the current one on click. */
.lp-industries__fade { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .6s ease; z-index: 0; pointer-events: none; }
.lp-industries__inner { position: relative; z-index: 1; }
.lp-industries__card { background: #fff; max-width: 552px; padding: 40px 48px; }
.lp-industries__title { margin: 0 0 12px; font-size: 52px; font-weight: 500; }
.lp-industries__intro { color: #4a4a4a; margin: 0 0 16px; max-width: 520px; }
.lp-ind-list { list-style: none; margin: 0 0 16px; padding: 0; }
.lp-ind-row { display: flex; align-items: center; gap: 16px; padding: 8px 18px; font-size: 22px; font-weight: 500; color: var(--color-black); transition: background-color .25s ease, color .25s ease; }
.lp-ind-row__bar { width: 3px; align-self: stretch; min-height: 28px; background: transparent; flex: 0 0 auto; transition: background-color .25s ease; }
.lp-ind-row__icon { width: 42px; height: 42px; flex: 0 0 auto; background-color: #000; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color .25s ease; }
.lp-ind-row:hover .lp-ind-row__icon { background-color: var(--color-secondary); }
.lp-ind-row:hover { background: #f7efdd; color: var(--color-secondary); }
.lp-ind-row:hover .lp-ind-row__bar { background: var(--color-secondary); }
.lp-industries__link { display: inline-block; color: var(--color-black); font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.lp-industries__link:hover { color: var(--color-secondary); }
@media (max-width: 1536px) { .lp-industries__title { font-size: 44px; } .lp-ind-row { font-size: 18px; } }
@media (max-width: 1280px) { .lp-industries__title { font-size: 32px; } .lp-ind-row { font-size: 18px; } .lp-industries__card { padding: 40px; } }
@media (min-width: 1025px) and (max-width: 1280px) { .lp-ind-row__icon { width: 30px; height: 30px; } .container.lp-industries__inner { max-width: 460px; } .lp-industries__card { padding: 32px 40px; } .lp-industries__intro { margin-bottom: 14px; } .lp-ind-row { padding: 7px 18px; } .lp-ind-row__bar { min-height: 20px; } }
@media (max-width: 1024px) { .lp-ind-row { font-size: 20px; } }
@media (max-width: 1024px) { .lp-industries__title { font-size: 32px; } .lp-industries__card { max-width: 100%; padding: 36px; } }
@media (max-width: 425px)  { .lp-industries__title { font-size: 28px; } .lp-industries__card { padding: 24px; } .lp-ind-row { font-size: 18px; gap: 12px; padding: 12px 8px; } .lp-ind-row__icon { width: 34px; height: 34px; } }

/* ---------- SECTION 8 · How We Work ---------- */
.lp-how .lp-heading { text-align: left; font-size: 52px; font-weight: 500; }
.lp-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; }
.lp-how__item { text-align: left; position: relative; }
.lp-how__item img { display: block; margin: 0 0 24px; }
.lp-how__title { margin: 0 0 14px; font-size: 32px; font-weight: 400; }
.lp-how__text { color: #5a5a5a; margin: 0; font-size: 20px; font-weight: 400; }
@media (max-width: 1536px) { .lp-how .lp-heading { font-size: 44px; } .lp-how__title { font-size: 24px; } .lp-how__text { font-size: 18px; } }
@media (max-width: 1280px) { .lp-how .lp-heading { font-size: 38px; } .lp-how__title { font-size: 24px; } .lp-how__text { font-size: 16px; } }
@media (max-width: 1024px) { .lp-how .lp-heading { font-size: 32px; } .lp-how__title { font-size: 22px; } .lp-how__text { font-size: 16px; } }
@media (max-width: 425px)  { .lp-how .lp-heading { font-size: 28px; } .lp-how__title { font-size: 20px; } .lp-how__text { font-size: 15px; } }
@media (min-width: 1025px) {
	.lp-how__item { padding: 0 44px; }
	.lp-how__item:first-child { padding-left: 0; }
	.lp-how__item:last-child { padding-right: 0; }
	.lp-how__item + .lp-how__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 32px; transform: translateX(-50%); background: url('../images/landing/s8/divider.svg') center / auto 100% no-repeat; }
}

/* ---------- Latest Insights ---------- */
.lp-blog__head { align-items: flex-start; }
.lp-blog .lp-heading { font-size: 52px; font-weight: 500; }
.lp-blog__subtitle { color: #4a4a4a; margin: 12px 0 0; font-size: 20px; font-weight: 400; }
.lp-blog__viewall { color: var(--color-black); font-size: 24px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.lp-blog__viewall:hover { color: var(--color-secondary); }
@media (max-width: 1536px) { .lp-cat-viewall, .lp-blog__viewall { font-size: 20px; } }
@media (max-width: 1280px) { .lp-cat-viewall, .lp-blog__viewall { font-size: 18px; } }
@media (max-width: 425px)  { .lp-cat-viewall, .lp-blog__viewall { font-size: 16px; } }
.lp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.lp-blog__card { display: block; position: relative; background: var(--color-bg-1); border: 0; border-radius: 0; padding: 0; overflow: hidden; text-decoration: none; color: var(--color-black); transition: box-shadow .25s ease; }
.lp-blog__card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: var(--color-secondary); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: 2; }
.lp-blog__card:hover::after { transform: scaleX(1); }
.lp-blog__card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.lp-blog__media { display: block; width: 100%; aspect-ratio: 16 / 11; background: #dcd7cd center / cover no-repeat; transition: transform .5s ease; }
.lp-blog__card:hover .lp-blog__media { transform: scale(1.06); }
.lp-blog__body { display: block; padding: 30px 34px 40px; }
.lp-blog__meta { color: #3a3a3a; font-size: 16px; font-weight: 400; }
.lp-blog__sep { color: #b3a98f; }
.lp-blog__title { margin: 18px 0 28px; font-size: 24px; font-weight: 500; line-height: 1.3; }
.lp-blog__more { display: inline-block; color: var(--color-black); font-size: 20px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.lp-blog__more:hover { color: var(--color-primary); }
@media (max-width: 1536px) { .lp-blog .lp-heading { font-size: 44px; } .lp-blog__title { font-size: 18px; } .lp-blog__subtitle, .lp-blog__more { font-size: 18px; } .lp-blog__body { padding: 26px 26px 32px; } }
@media (max-width: 1280px) { .lp-blog .lp-heading { font-size: 38px; } .lp-blog__title { font-size: 16px; } .lp-blog__subtitle, .lp-blog__more { font-size: 16px; } }
@media (max-width: 1024px) { .lp-blog .lp-heading { font-size: 32px; } .lp-blog__title { font-size: 22px; } }
@media (max-width: 425px)  { .lp-blog .lp-heading { font-size: 28px; } .lp-blog__body { padding: 22px 20px 28px; } }

/* (CTA band is a shared section — styles live in main.css so it renders on every page.) */

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.lp-feature-grid { gap: 0; }
	.lp-why-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; margin-top: 40px; }
	.lp-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.lp-sustain-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 16px; }
	.lp-how-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
	.lp-blog-grid { grid-template-columns: 1fr; }
	.lp-rd__inner { grid-template-columns: 1fr; gap: 32px; }
	.lp-ind-grid { gap: 16px; }
	.lp-network__card { max-width: 100%; padding: 40px; }
}
@media (max-width: 768px) {
	/* Trusted strip on mobile is a static 3-across icon grid (no slider) — see the
	   "Trusted-features section = 3 items across" block further down, which wins
	   over anything set here. Only the desktop cell borders are dropped. */
	.lp-feature + .lp-feature { border-left: 0; border-top: 0; }
	.lp-industries .lp-ind-grid { grid-template-columns: repeat(2, 1fr); }
	.lp-network__list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
	/* Mobile: show the playing background video as a band/frame around the card. */
	.lp-network { padding: 50px 20px; }
	.lp-network__card { max-width: 100%; }
	/* Sustainability — manual horizontal scroll on mobile: 2.5 items visible at a
	   time (2 full + half of the next as the right-hand offset). JS wraps
	   scrollLeft over the duplicated set for a seamless manual loop. */
	.lp-sustain-grid { display: flex; gap: 12px; margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 16px; scroll-snap-type: x proximity; }
	.lp-sustain-grid::-webkit-scrollbar { display: none; }
	.lp-sustain__item { flex: 0 0 33vw; scroll-snap-align: start; }
	.lp-sustain__item--dup { display: flex; }
	/* How We Work — icon left, heading + text right (one step per row). */
	.lp-how-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }   /* tighten heading ↔ icon-box gap on mobile (was 56px) */
	.lp-how__item { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
	.lp-how__item img { grid-row: 1 / 3; grid-column: 1; margin: 0; }
	.lp-how__title { grid-column: 2; grid-row: 1; margin: 0 0 4px; }
	.lp-how__text { grid-column: 2; grid-row: 2; margin: 0; }
	/* Hero on mobile: stack content, drop the play button below it (no overlap). */
	.lp-hero { flex-direction: column; }
	.lp-hero__play { position: static; right: auto; bottom: auto; margin-top: 28px; justify-content: center; }
	.lp-hero__play-icon { width: 48px; height: 48px; }
	.lp-hero__play-icon svg { width: 16px; height: 18px; }
}
@media (max-width: 425px) {
	.lp-cat-grid { grid-template-columns: 1fr; }
	.lp-sustain-grid { grid-template-columns: repeat(2, 1fr); }
	.lp-why-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
	.lp-how-grid { grid-template-columns: 1fr; }
	.lp-industries .lp-ind-grid { grid-template-columns: 1fr; }
	.lp-hero__play-icon { width: 44px; height: 44px; }
	.lp-network__card { padding: 24px; }
}

/* ---- 1280px typography pass (overrides the per-section 1280 sizes above) ---- */
@media (max-width: 1280px) {
	.lp-trusted .lp-heading { font-size: 32px; }
	.lp-trusted .lp-intro { font-size: 14px; }
	.lp-trusted .lp-feature__title { font-size: 20px; }
	.lp-trusted .lp-feature__text { font-size: 14px; }
	.lp-categories .lp-heading { font-size: 32px; }
	.lp-cat__name { font-size: 18px; }
	.lp-cat-viewall, .lp-blog__viewall { font-size: 14px; }
	.lp-sustain .lp-heading { font-size: 32px; }
	.lp-sustain .lp-intro { font-size: 14px; }
	.lp-rd__text .lp-heading { font-size: 32px; }
	.lp-rd__text .lp-intro { font-size: 14px; }
	.lp-rd__link { font-size: 14px; }
	.lp-why .lp-heading { font-size: 32px; }
	.lp-why__title { font-size: 20px; }
	.lp-why__text { font-size: 14px; }
	.lp-how .lp-heading { font-size: 32px; }
	.lp-how__title { font-size: 20px; }
	.lp-how__text { font-size: 14px; }
	.lp-blog .lp-heading { font-size: 32px; }
	.lp-blog__subtitle, .lp-blog__more { font-size: 14px; }
	.lp-blog__meta { color: #3a3a3a; font-size: 14px; font-weight: 400; }
}

/* ---- mobile (≤425px) typography pass (overrides per-section sizes above) ---- */
@media (max-width: 425px) {
	.lp-section { padding: 24px 20px !important; }
	section.lp-industries { padding: 50px 20px; }
	.lp-hero__title { font-size: 26px; }
	.lp-trusted .lp-heading { font-size: 22px; }
	.lp-network__title { font-size: 22px; }
	.lp-categories .lp-heading { font-size: 22px; }
	.lp-sustain .lp-heading { font-size: 22px; }
	.lp-cat__name { font-size: 15px; }
	.lp-rd__text .lp-heading { font-size: 22px; }
	.lp-rd__inner { gap: 20px; }   /* tighten the text ↔ wheel-image space on mobile */
	.lp-why .lp-heading { font-size: 22px; }
	.lp-why__title { font-size: 16px; }
	.lp-industries__title { font-size: 22px; }
	.lp-ind-row { font-size: 14px; gap: 12px; padding: 12px 8px; }
	.lp-how .lp-heading { font-size: 22px; }
	.lp-how__title { font-size: 18px; }
	.lp-blog .lp-heading { font-size: 22px; }
	.lp-blog__title { font-size: 20px; }
}

/* Phones above the 425px band (e.g. 428–430px Pro Max, and the fractional ~425.x
   widths that fall in the gap between max-width:425 and the tablet tokens): the
   tablet tokens give the hero 140px side padding, squishing the title into a narrow
   column that breaks mid-word. Give the hero the mobile treatment for this band.
   min-width:425 (not 426) closes the sub-pixel dead zone at exactly ~425px. */
@media (min-width: 425px) and (max-width: 768px) {
	.lp-hero { padding-left: 20px; padding-right: 20px; }
	.lp-hero__title { font-size: 32px; }
	.lp-section { padding: 24px 20px !important; }
	section.lp-industries { padding: 50px 20px; }
}

/* Mobile: Trusted-features section = 3 items across (no auto-scroll slider),
   showing only the icon + heading (description text hidden). Placed last so it
   overrides the marquee + the <=1280 title size. */
@media (max-width: 768px) {
	.lp-trusted .container { overflow: visible; }
	.lp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: auto; gap: 0; margin-top: 16px; animation: none; }
	.lp-feature { flex: none; margin-right: 0; padding: 16px 6px; }
	.lp-feature--dup { display: none; }
	.lp-feature__icon { width: 44px; height: 44px; margin: 0 auto 10px; }
	.lp-trusted .lp-feature__title { font-size: 13px; font-weight: 500; margin: 0; line-height: 1.25; }
	.lp-feature__text { display: none; }
}

/* Mobile: Sustainability strip = manual horizontal scroll (swipe), looping
   seamlessly via JS. The flex scroller + visible duplicate set are defined in the
   <=768 block above; nothing overrides them back to a static grid here. */

/* Mobile: tighten the Categories->Sustainability gap and the Sustainability
   section's bottom space (overrides the .lp-section 50px !important padding). */
@media (max-width: 768px) {
	.lp-categories.lp-section { padding-bottom: 20px !important; }
	.lp-sustain.lp-section { padding-top: 20px !important; padding-bottom: 10px !important; }
}

/* Mobile: reduce the Trusted (Global Reach / Smart Sourcing / Reliable Delivery)
   icons section's top & bottom space, and the gap before "Product Categories". */
@media (max-width: 768px) {
	.lp-trusted.lp-section { padding-top: 24px !important; padding-bottom: 8px !important; }
	.lp-feature-grid { margin-top: 8px; }
	.lp-feature { padding: 10px 6px; }
	.lp-categories.lp-section { padding-top: 20px !important; }
}

/* Mobile: tighten the gap between How We Work and the Latest Insights (blog). */
@media (max-width: 768px) {
	.lp-how.lp-section { padding-bottom: 20px !important; }
	.lp-blog.lp-section { padding-top: 20px !important; }
	/* Smaller blog-card title on phones (long titles were wrapping large). */
	.lp-blog__title { font-size: 16px; line-height: 1.3; }
}
/* Small phones: blog-card title a touch smaller still. */
@media (max-width: 425px) {
	.lp-blog__title { font-size: 15px; }
}

/* Mobile: the shared "Latest Insights" section (any page it appears on) = manual
   horizontal swipe with the next card peeking on the right (native scroll-snap).
   Scoped to the insights grid only — NOT the blog listing/archive grids which keep
   their stacked layout. */
@media (max-width: 768px) {
	.lp-blog-grid:not(.blog-list__grid):not(.blog-archive__grid) { display: flex; grid-template-columns: none; gap: 14px; margin-top: 28px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; cursor: grab; }
	.lp-blog-grid:not(.blog-list__grid):not(.blog-archive__grid).is-dragging { cursor: grabbing; scroll-snap-type: none; }
	.lp-blog-grid:not(.blog-list__grid):not(.blog-archive__grid)::-webkit-scrollbar { display: none; }
	.lp-blog-grid:not(.blog-list__grid):not(.blog-archive__grid) > .lp-blog__card { flex: 0 0 85%; scroll-snap-align: start; }
}

/* Mobile: consistent top/bottom spacing across ALL home content sections so the
   vertical rhythm is even (Hero and the CTA band keep their intentional spacing).
   Placed last so it wins over the per-section paddings above. */
@media (max-width: 768px) {
	.lp-trusted.lp-section,
	.lp-categories.lp-section,
	.lp-sustain.lp-section,
	.lp-network,
	.lp-rd.lp-section,
	.lp-why.lp-section,
	section.lp-industries,
	.lp-how.lp-section,
	.lp-blog.lp-section {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* Mobile only: taller video band above & below the Global Network card so the
   playing background video is clearly visible framing the card (the shared
   24px !important rule above leaves only a thin sliver). */
@media (max-width: 768px) {
	.lp-network { padding-top: 110px !important; padding-bottom: 24px !important; }
	.lp-network__card { max-width: 90%; margin-left: auto; margin-right: auto; }
}

/* Mobile only: taller top band on the Industries section so its background image
   is clearly visible framing the card (same treatment as the network section).
   Uses section.lp-industries to beat the shared 24px !important rule's specificity. */
@media (max-width: 768px) {
	section.lp-industries { padding-top: 110px !important; padding-bottom: 24px !important; }
	.lp-industries__card { max-width: 90%; margin-left: auto; margin-right: auto; }
	/* Fill the whole section with the background image (client wants cover on
	   mobile — contain left empty bands above/below the landscape image). */
	.lp-industries, .lp-industries__fade { background-size: cover; background-position: center top; }
	/* Show only the first 4 industries on mobile (other devices show all).
	   Keep the tall 110px top background band; only a small 24px band at the bottom. */
	.lp-industries .lp-ind-list .lp-ind-row:nth-child(n+5) { display: none; }
}

/* Mobile: "Why Global Buyers Choose" — the card GRID itself is a native touch
   scroller (one card in view, next peeking; the heading stays put instead of
   scrolling away with the old .container scroller). JS in main.js auto-advances
   scrollLeft and loops over the duplicate set — CSS marquee animations freeze
   on iPhones (Reduce Motion / Low Power). Manual swipe keeps working.
   Placed last so it wins over the grid rules above. */
@media (max-width: 768px) {
	/* Same as the categories scroller: no -webkit-overflow-scrolling:touch (breaks
	   programmatic scrollLeft on iOS), scroll-behavior pinned to auto. */
	.lp-why-grid { display: flex; gap: 0; margin-top: 32px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; }
	.lp-why-grid::-webkit-scrollbar { display: none; }
	.lp-why__item { flex: 0 0 74vw; margin-right: 16px; }
	.lp-why__item--dup { display: block; }
}

/* How We Work title: 18px on mobile/tablet (<=1024). */
@media (max-width: 1024px) { .lp-how__title { font-size: 18px; } }

/* 1536 band only (1441-1536px): section padding + sustain bottom.
   .lp-sustain must come after .lp-section so its padding-bottom isn't reset by
   the section shorthand (both target the sustain section, same specificity). */
@media (min-width: 1441px) and (max-width: 1536px) {
	.lp-section { padding: 100px 90px; }
	.lp-sustain { padding-bottom: 120px; }
	section.lp-section.lp-categories.bg-2 { padding-bottom: 0px; }
	section.lp-section.lp-rd { padding-bottom: 0px; }
	section.lp-section.lp-how { padding-bottom: 120px; }
}

/* How We Work bottom spacing per requested screen bands. */
@media (min-width: 1900px) { section.lp-section.lp-how { padding-bottom: 120px; } }
@media (min-width: 1025px) and (max-width: 1280px) { section.lp-section.lp-how { padding-bottom: 80px; } }