/* =========================================================
   INDUSTRY PAGES — Wholesalers (Figma 337:1500)
   ========================================================= */
.ind-lead { font-size: 24px; opacity: .8; }

/* Hero */
.ind-hero { background: #fff; }
.ind-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 54px; padding-top: 80px; padding-bottom: 80px; }
.ind-hero__text { flex: 0 1 598px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 42px; }
.ind-hero__eyebrow { margin-bottom: -18px; font-size: 32px; color: var(--green-dark); }
.ind-hero__title { font-size: 64px; font-weight: 400; line-height: 1.1; color: var(--black); }
.ind-hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.ind-hero__title .w > span { display: inline-block; transform: translateY(105%); animation: wordUp .9s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i) * .05s); }
.ind-hero .hero-in { opacity: 0; animation: fadeUp .9s var(--ease-out) forwards; animation-delay: var(--d, .2s); }
.ind-btn-21 { font-size: 21px; }
.ind-hero__img { position: relative; flex: 0 0 628px; height: 420px; border-radius: 24px; overflow: hidden; animation: indImgIn 1.4s var(--ease-out) .15s both; }
.ind-hero__img img { width: 100%; height: 100%; object-fit: cover; animation: indZoom 2.4s var(--ease-out) .15s both; }

/* Built for */
.ind-built { background: #F4F8FD; padding: 100px 0 60px; }
.ind-built__head { margin-bottom: 60px; }
.ind-built__img { position: relative; height: 407px; border-radius: 24px; overflow: hidden; }
.ind-built__img img { position: absolute; left: 0; top: -47.64%; width: 104.3%; height: 218.59%; max-width: none; object-fit: cover; }

/* Challenges */
.ind-chal { background: #F4F8FD; padding: 60px 0 100px; }
.ind-chal__head { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 80px; }
.ind-chal__head h2 { flex: 1; min-width: 0; }
.ind-chal__head p { flex: 0 0 628px; }
.ind-chal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 24px; }
.ind-chal__item { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ind-chal__item h3 { font-size: 28px; font-weight: 400; transition: color .3s; }
.ind-chal__item p { font-size: 20px; opacity: .8; }
.ind-chal__item::before { content: ""; position: absolute; left: -18px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--green-dark); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.ind-chal__item:hover::before { transform: scaleY(1); }
.ind-chal__item:hover h3 { color: var(--marine); }

/* How PMI helps */
.ind-helps { position: relative; overflow: hidden; padding: 80px 0; background: linear-gradient(180deg, #003D7C 0%, #092553 100%); color: #fff; }
.ind-helps__lines { position: absolute; top: -20.35px; left: calc(50% + 163px); width: 701.12px; height: 170.18px; pointer-events: none; }
.ind-helps__line { transform-box: fill-box; transform-origin: 50% 0; }
.ind-helps__line--a { animation: indSway 9s ease-in-out infinite; }
.ind-helps__line--b { animation: indSway 12s ease-in-out -3s infinite reverse; }
.ind-helps .container { position: relative; }
.ind-helps__head { max-width: 846px; margin: 0 auto 80px; display: flex; flex-direction: column; gap: 32px; text-align: center; }
.ind-helps__head p { font-size: 20px; opacity: .8; }
.ind-helps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ind-help { display: flex; flex-direction: column; padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, .08); transition: background-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.ind-help__icon { font-size: 52px; color: var(--green); margin-bottom: 14px; transition: transform .5s var(--ease); }
.ind-help h3 { font-size: 28px; font-weight: 400; color: var(--green); margin-bottom: 24px; }
.ind-help p { font-size: 18px; opacity: .8; }
.ind-help:hover { background: rgba(255, 255, 255, .13); transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55); }
.ind-help:hover .ind-help__icon { transform: scale(1.12) rotate(-8deg); }
.ind-helps__rule { margin: 80px 0; border-top-color: rgba(255, 255, 255, .2); }
.ind-range { display: flex; align-items: center; gap: 60px; }
.ind-range__img { position: relative; flex: 0 0 628px; height: 400px; border-radius: 24px; overflow: hidden; }
.ind-range__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: clip-path 1.4s var(--ease-out), transform 1.6s var(--ease); }
.ind-range:hover .ind-range__img img { transform: scale(1.04); }
.ind-range__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.ind-range__body p { align-self: stretch; font-size: 20px; opacity: .8; }
.ind-range__body .btn { font-size: 20px; }

/* Why choose */
.ind-why { position: relative; overflow: hidden; min-height: 900px; padding: 433.65px 60px 0; display: flex; flex-direction: column; justify-content: flex-end; }
.ind-why__bg { position: absolute; inset: 0; overflow: hidden; }
.ind-why__bg img { position: absolute; left: -6.63%; top: -32%; width: 123.84%; height: 132.05%; max-width: none; object-fit: cover; }
.ind-why__card { position: relative; flex: none; width: 100%; max-width: 1320px; margin: 0 auto; display: flex; align-items: flex-end; gap: 24px; padding: 64px 64px 144px; border-radius: 24px 24px 0 0; background: #fff; }
.ind-why__card h2 { flex: 0 0 470px; }
.ind-why__grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 24px; }
.ind-why__item { display: flex; gap: 14px; align-items: flex-start; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.ind-why__card.is-visible .ind-why__item { opacity: 1; transform: none; }
.ind-why__item iconify-icon { flex: none; width: 24px; height: 40px; display: flex; align-items: center; font-size: 24px; color: var(--green-dark); }
.ind-why__item div { display: flex; flex-direction: column; gap: 14px; }
.ind-why__item h3 { font-size: 24px; font-weight: 400; }
.ind-why__item p { font-size: 20px; opacity: .8; }

/* How we work — steps */
.ind-work { background: #fff; padding: 1px 0 100px; }
.ind-work__rule { height: 0; margin: 0 0 100px; border: 0; border-top: 1px solid rgba(28, 28, 27, .1); }
.ind-work__inner { display: flex; align-items: flex-start; gap: 24px; }
.ind-work__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.ind-work__text p { font-size: 20px; opacity: .8; }

/* CTA */
.ind-cta { background: #fff; padding: 0 0 100px; }

@keyframes indImgIn { from { opacity: 0; transform: translateY(30px); clip-path: inset(12% 0 0 0 round 24px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); } }
@keyframes indZoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes indSway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-26px); } }

@media (prefers-reduced-motion: reduce) {
	.ind-hero__title .w > span { transform: none !important; }
	.ind-hero .hero-in, .ind-why__item { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1400px) {
	.ind-hero__img { flex-basis: min(628px, 46%); }
	.ind-chal__head p { flex-basis: min(628px, 50%); }
	.ind-range__img { flex-basis: min(628px, 48%); }
}

@media (max-width: 1240px) {
	.ind-hero__title { font-size: 52px; }
	.ind-hero__eyebrow { font-size: 26px; }
	.ind-hero__img { height: 380px; }
	.ind-helps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ind-why__card { flex-direction: column; align-items: flex-start; gap: 48px; padding-bottom: 64px; }
	.ind-why__card h2 { flex: none; }
	.ind-why__grid { width: 100%; }
	.ind-why { padding-top: 360px; }
}

@media (max-width: 1024px) {
	.ind-hero__inner { flex-direction: column; align-items: stretch; padding-top: 56px; padding-bottom: 64px; gap: 48px; }
	.ind-hero__text { flex: none; max-width: 640px; }
	.ind-hero__img { flex: none; width: 100%; height: auto; aspect-ratio: 628 / 420; }
	.ind-built { padding: 80px 0 48px; }
	.ind-built__head { margin-bottom: 40px; }
	.ind-built__img { height: auto; aspect-ratio: 1280 / 520; }
	.ind-chal { padding: 48px 0 80px; }
	.ind-chal__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 56px; }
	.ind-chal__head p { flex: none; }
	.ind-helps__head { margin-bottom: 56px; }
	.ind-helps__rule { margin: 64px 0; }
	.ind-range { flex-direction: column; align-items: stretch; gap: 40px; }
	.ind-range__img { flex: none; width: 100%; height: auto; aspect-ratio: 628 / 400; }
	.ind-why { min-height: 0; padding: 300px var(--gutter) 64px; display: block; }
	.ind-why__card { padding-bottom: 64px; border-radius: 24px; }
	.ind-why__bg img { left: 0; top: 0; width: 100%; height: 100%; object-position: 50% 15%; }
	.ind-work { padding-bottom: 80px; }
	.ind-work__rule { margin-bottom: 72px; }
	.ind-work__inner { flex-direction: column; gap: 56px; }
	.ind-cta { padding-bottom: 80px; }
}

@media (max-width: 760px) {
	.ind-lead { font-size: 19px; }
	.ind-hero__eyebrow { font-size: 22px; margin-bottom: -22px; }
	.ind-hero__title { font-size: 38px; }
	.ind-hero__text { gap: 32px; }
	.ind-btn-21 { font-size: 18px; }
	.ind-hero__img, .ind-built__img, .ind-range__img { border-radius: 18px; }
	.ind-built__img { aspect-ratio: 4 / 3; }
	.ind-chal__grid { grid-template-columns: 1fr; gap: 32px; }
	.ind-chal__item h3 { font-size: 24px; }
	.ind-chal__item p { font-size: 18px; }
	.ind-helps { padding: 64px 0; }
	.ind-helps__lines { left: auto; right: -260px; }
	.ind-helps__head { gap: 20px; }
	.ind-helps__head p { font-size: 18px; }
	.ind-helps__grid { grid-template-columns: 1fr; gap: 16px; }
	.ind-help h3 { font-size: 24px; margin-bottom: 14px; }
	.ind-help__icon { font-size: 44px; }
	.ind-range__body p br { display: none; }
	.ind-range__body .btn { font-size: 17px; white-space: normal; text-align: center; }
	.ind-why { padding: 220px 20px 40px; }
	.ind-why__card { padding: 32px 24px; border-radius: 18px; gap: 32px; }
	.ind-why__grid { grid-template-columns: 1fr; gap: 28px; }
	.ind-why__item h3 { font-size: 22px; }
	.ind-why__item p { font-size: 18px; }
	.ind-why__item div { gap: 8px; }
	.ind-work__text p br { display: none; }
	.ind-work__text p { font-size: 18px; }
	.ind-cta { padding-bottom: 64px; }
}