/* Shared solution-detail layout. Page-specific assets and copy stay in each HTML file. */
.page-solution-detail {
  --solution-width: min(83.333vw, 1600px);
  --solution-green: #376036;
  --solution-pale: #f5f5f5;
  background: #fff;
}

.solution-container { width: var(--solution-width); margin: 0 auto; }
.solution-section-title { margin: 0; color: #000; text-align: center; font-size: 26px; line-height: 1.4; font-weight: 500; }

.solution-hero {
  position: relative;
  height: 620px;
  padding-top: 120px;
  overflow: hidden;
  color: #fff;
  background: #866044;
}

.solution-hero > img,
.solution-hero-shade {
  position: absolute;
  inset: 120px 0 0;
  width: 100%;
  height: 500px;
}

.solution-hero > img { object-fit: cover; object-position: center; }
.solution-hero-shade { background: rgba(0, 0, 0, .2); }
.solution-hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 500px; padding-left: 100px; }
.solution-hero h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.25; font-weight: 700; }
.solution-hero p { margin: 0; font-size: 20px; line-height: 1.65; }

.solution-subnav {
  position: sticky;
  z-index: 40;
  top: 84px;
  height: 63px;
  color: rgba(255,255,255,.72);
  background: var(--solution-green);
}
.solution-subnav-inner { display: grid; grid-template-columns: repeat(8, 1fr); width: var(--solution-width); height: 100%; margin: 0 auto; }
.solution-subnav a { display: grid; place-items: center; min-width: 0; font-size: 16px; transition: color .2s ease, background .2s ease; }
.solution-subnav a:hover,
.solution-subnav a.active { color: #fff; background: rgba(255,255,255,.04); }
.solution-subnav a.active { font-weight: 700; }

.solution-intro { padding: 80px 0 70px; }
.solution-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: center; margin-top: 68px; }
.solution-intro-visual { height: 444px; margin: 0; overflow: hidden; }
.solution-intro-visual img { width: 100%; height: 100%; object-fit: cover; }
.solution-intro-copy { align-self: center; }
.solution-intro-copy h3 { margin: 0 0 22px; color: var(--solution-green); font-size: 26px; line-height: 1.4; font-weight: 500; }
.solution-intro-copy p { margin: 0; color: #333; font-size: 16px; line-height: 1.9; text-align: justify; }
.solution-intro-copy p + p { margin-top: 2px; }

.applications { padding: 8px 0 72px; }
.application-stage { display: grid; grid-template-columns: 487px 1fr; min-height: 706px; margin-top: 40px; background: var(--solution-pale); }
.application-tabs { --application-tab-left: 100px; --application-tab-right: 62px; position: relative; display: grid; align-content: center; min-width: 0; gap: 46px; padding: 60px var(--application-tab-right) 60px var(--application-tab-left); }
.application-tabs::before { position: absolute; top: 40px; bottom: 40px; left: var(--application-tab-left); width: 1px; background: #d9d9d9; content: ""; }
.application-tabs button { position: relative; z-index: 1; min-height: 64px; padding: 8px 0 8px 23px; border: 0; color: #9a9a9a; text-align: left; background: transparent; font-size: 16px; line-height: 1.6; transition: color .2s ease; }
.application-tabs button::before { position: absolute; top: 0; bottom: 0; left: -3px; width: 6px; background: transparent; content: ""; transition: background .2s ease; }
.application-tabs button:hover { color: #555; }
.application-tabs button.is-active { color: var(--solution-green); font-weight: 700; }
.application-tabs button.is-active::before { background: var(--solution-green); }
.application-tabs.is-centered { display: block; }
.application-tabs.is-centered button { position: absolute; top: 50%; right: var(--application-tab-right); left: var(--application-tab-left); transform: translateY(calc(-50% + var(--application-tab-offset, 0px))); transition: color .2s ease, transform .3s ease; }
.application-tabs.is-centered button.is-active { z-index: 2; }
.application-panels { position: relative; align-self: center; min-width: 0; height: 626px; margin-right: 0; overflow: hidden; background: #d5d5d5; }
.application-panel { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.application-panel.is-active { z-index: 1; opacity: 1; }
.application-panel > img { width: 100%; height: 100%; object-fit: cover; }
.application-caption { position: absolute; right: 0; bottom: 0; left: 0; min-height: 276px; padding: 126px 20px 20px; color: #fff; background: linear-gradient(180deg, rgba(55,96,54,0) 0%, rgba(55,96,54,.94) 59%, rgba(55,96,54,.98) 100%); }
.application-caption p { margin: 0; font-size: 14px; line-height: 1.8; text-align: justify; }
.application-caption p + p { margin-top: 7px; }

.project-cases { padding: 0 0 74px; }
.case-carousel { position: relative; margin-top: 40px; padding: 0 100px 50px; }
.case-viewport { overflow: hidden; }
.case-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; transition: opacity .2s ease, transform .28s ease; }
.case-carousel.is-single { padding-bottom: 0; }
.case-carousel.is-single .case-track { grid-template-columns: minmax(0, 453px); }
.case-carousel.is-single.is-flush { padding-inline: 0; }
.case-carousel.is-single :is(.case-control, .case-dots) { display: none; }
.case-track.is-moving { opacity: .42; transform: translateX(var(--case-shift, 18px)); }
.case-card { display: flex; flex-direction: column; min-width: 0; height: 576px; padding: 36px 30px 40px; background: var(--solution-pale); }
.case-card h3 { min-height: 52px; margin: 0 0 10px; color: #000; font-size: 20px; line-height: 26px; font-weight: 500; }
.case-card > p { display: -webkit-box; min-height: 52px; margin: 0 0 20px; overflow: hidden; color: #333; font-size: 16px; line-height: 26px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.case-card > img { width: 100%; height: 294px; margin-top: auto; object-fit: cover; }
.solution-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 146px; height: 38px; margin: 27px auto 0; border-radius: 4px; color: #fff; background: var(--solution-green); font-size: 16px; line-height: 1; transition: transform .2s ease, box-shadow .2s ease; }
.solution-more:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(55,96,54,.2); }
.solution-more img { width: 20px; height: 20px; transform: rotate(180deg); }
.case-control { position: absolute; z-index: 2; top: calc(50% - 55px); display: grid; place-items: center; width: 66px; height: 66px; padding: 0 0 8px; border: 0; border-radius: 50%; color: #fff; background: #c9c9c9; font-family: Georgia, serif; font-size: 54px; line-height: 1; transition: background .2s ease, transform .2s ease; }
.case-control:hover { background: var(--solution-green); transform: scale(1.04); }
.case-prev { left: 0; }
.case-next { right: 0; }
.case-dots { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 13px; }
.case-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #d0d0d0; }
.case-dots button.is-active { width: 27px; border-radius: 8px; background: var(--solution-green); }

.solution-partners { padding: 0 0 72px; }
.partner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 40px auto 0; width: calc(100% - 152px); }
.partner-grid figure { display: flex; align-items: center; justify-content: center; height: 110px; margin: 0; overflow: hidden; border: 1px solid #cacaca; background: #fff; }
.partner-grid img { width: auto; height: auto; max-width: 88%; max-height: 84%; object-fit: contain; }

.related-products { padding: 0 0 80px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.product-card { display: grid; grid-template-columns: minmax(0, 1fr) 323px; gap: 24px; min-height: 363px; padding: 20px 20px 20px 60px; background: var(--solution-pale); }
.product-copy { display: flex; flex-direction: column; min-width: 0; padding: 22px 0; }
.product-copy h3 { margin: 0 0 22px; color: #000; font-size: 20px; line-height: 26px; font-weight: 500; }
.product-copy ul { margin: 0; padding: 0; color: #737373; list-style: none; font-size: 16px; line-height: 36px; }
.product-copy .solution-more { margin: auto 0 0; }
.product-card figure { align-self: stretch; margin: 0; background: #fff; }
.product-card figure img { width: 100%; height: 100%; object-fit: contain; }

.page-solution-detail .contact { min-height: 800px; }
.page-solution-detail .contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 9%; align-items: center; min-height: 800px; }
.page-solution-detail .contact-copy { max-width: 500px; margin: 0; }
.page-solution-detail .contact-form { margin: 0; }
.page-solution-detail .footer-links h3 a { color: #fff; }
.page-solution-detail .footer-links a.active { color: var(--yellow); }

@media (max-width: 1500px) {
  .page-solution-detail { --solution-width: min(92vw, 1280px); }
  .solution-hero { height: 592px; padding-top: 92px; }
  .solution-hero > img, .solution-hero-shade { top: 92px; }
  .solution-hero-content { height: 500px; padding-left: 70px; }
  .solution-intro-grid { gap: 70px; }
  .solution-intro-copy p { font-size: 14px; line-height: 1.8; }
  .application-stage { grid-template-columns: 380px 1fr; min-height: 610px; }
  .application-tabs { --application-tab-left: 72px; }
  .application-panels { height: 540px; }
  .case-carousel { padding-inline: 72px; }
  .case-card { height: 520px; padding: 28px 24px 32px; }
  .case-card h3 { font-size: 17px; line-height: 24px; }
  .case-card > p { font-size: 14px; line-height: 23px; }
  .case-card > img { height: 260px; }
  .partner-grid { width: calc(100% - 120px); gap: 16px; }
  .product-card { grid-template-columns: minmax(0, 1fr) 260px; padding-left: 42px; }
  .product-copy ul { font-size: 14px; line-height: 32px; }
}

@media (max-width: 1199.98px) {
  .solution-hero-content { padding-left: 0; }
  .solution-subnav { height: auto; overflow-x: auto; scrollbar-width: none; }
  .solution-subnav::-webkit-scrollbar { display: none; }
  .solution-subnav-inner { grid-template-columns: repeat(8, 130px); width: max-content; min-width: 100%; height: 60px; padding: 0 18px; }
  .solution-intro-grid { gap: 45px; }
  .solution-intro-visual { height: 390px; }
  .application-stage { grid-template-columns: 300px 1fr; }
  .application-tabs { --application-tab-left: 52px; --application-tab-right: 38px; gap: 30px; padding-block: 44px; }
  .application-caption { padding-top: 90px; }
  .application-caption p { font-size: 12px; }
  .case-carousel { padding-inline: 50px; }
  .case-control { width: 48px; height: 48px; font-size: 42px; }
  .case-card { height: 485px; padding: 24px 20px 28px; }
  .case-card > img { height: 235px; }
  .product-card { grid-template-columns: 1fr 210px; padding-left: 30px; }
  .product-copy ul { line-height: 29px; }
}

@media (max-width: 900px) {
  .solution-intro-grid { grid-template-columns: 1fr; }
  .solution-intro-visual { height: auto; aspect-ratio: 1.65; }
  .solution-intro-copy h3 { font-size: 23px; }
  .application-stage { display: block; min-height: 0; padding-top: 0; }
  .application-tabs { display: flex; gap: 0; padding: 0 var(--application-end-space, 0px) 0 var(--application-start-space, 0px); overflow-x: auto; overscroll-behavior-x: contain; border-bottom: 1px solid #ddd; }
  .application-tabs::before { display: none; }
  .application-tabs button { flex: 0 0 230px; min-height: 76px; padding: 12px 18px; text-align: center; }
  .application-tabs button::before { top: auto; right: 20px; bottom: 0; left: 20px; width: auto; height: 4px; }
  .application-panels { height: auto; margin: 0; aspect-ratio: 1.45; }
  .application-caption { min-height: 45%; padding: 90px 18px 16px; }
  .case-track { grid-template-columns: repeat(3, minmax(310px, calc(100vw - 150px))); gap: 16px; }
  .case-card { height: 535px; }
  .case-card > img { height: 290px; }
  .case-carousel { padding-inline: 44px; }
  .partner-grid { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: 1fr 280px; }
  .page-solution-detail .contact-grid { grid-template-columns: 1fr; gap: 50px; min-height: 0; padding: 80px 0; }
}

@media (max-width: 760px) {
  .page-solution-detail { --solution-width: calc(100vw - 36px); }
  .solution-subnav { top: 72px; }
  .solution-hero { height: 430px; padding-top: 72px; }
  .solution-hero > img, .solution-hero-shade { top: 72px; height: 358px; }
  .solution-hero > img { object-position: 56% center; }
  .solution-hero-content { height: 358px; }
  .solution-hero h1 { font-size: 27px; }
  .solution-hero p { font-size: 15px; }
  .solution-intro { padding: 62px 0 58px; }
  .solution-section-title { font-size: 24px; }
  .solution-intro-grid { margin-top: 38px; }
  .solution-intro-copy p { line-height: 1.9; }
  .applications { padding-bottom: 58px; }
  .application-stage { margin-top: 34px; }
  .application-panels { aspect-ratio: .9; }
  .application-panel > img { height: 55%; }
  .application-caption { position: static; min-height: 45%; padding: 22px 18px; color: #fff; background: var(--solution-green); }
  .application-caption p { font-size: 13px; line-height: 1.7; }
  .project-cases { padding-bottom: 60px; }
  .case-carousel { margin-top: 34px; padding: 0 30px 46px; }
  .case-track { grid-template-columns: repeat(3, calc(100vw - 96px)); }
  .case-carousel.is-single { padding-inline: 30px; }
  .case-carousel.is-single.is-flush { padding-inline: 30px; }
  .case-carousel.is-single .case-track { grid-template-columns: minmax(0, 1fr); }
  .case-card { height: 510px; }
  .case-card h3 { font-size: 17px; }
  .case-card > img { height: 250px; }
  .case-control { top: 48%; width: 42px; height: 42px; font-size: 36px; }
  .case-prev { left: -14px; }
  .case-next { right: -14px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 34px; }
  .partner-grid figure { height: 92px; }
  .solution-partners { padding-bottom: 60px; }
  .related-products { padding-bottom: 65px; }
  .product-grid { margin-top: 34px; }
  .product-card { grid-template-columns: 1fr; padding: 28px; }
  .product-card figure { grid-row: 1; height: 280px; }
  .product-copy { padding: 0; }
  .product-copy ul { font-size: 13px; line-height: 1.8; }
}

@media (max-width: 460px) {
  .solution-hero p br { display: none; }
  .solution-intro-visual { aspect-ratio: 1.2; }
  .application-tabs button { flex-basis: 200px; font-size: 14px; }
  .application-panels { aspect-ratio: .7; }
  .case-card { height: 500px; padding-inline: 18px; }
  .partner-grid figure { height: 82px; }
  .product-card figure { height: 235px; }
}

@media (prefers-reduced-motion: reduce) {
  .application-tabs.is-centered button { transition: none; }
}