.ingredient-detail { color: var(--title); background: #fff; }
.ingredient-hero { padding: 10rem 0 5rem; background: linear-gradient(118deg, #f2f9fb 0%, #fff 52%, #e7f6fc 100%); overflow: hidden; }
.ingredient-hero-grid, .ingredient-system-grid, .ingredient-fit-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(32rem, .72fr); gap: 5rem; align-items: center; }
.ingredient-eyebrow, .ingredient-kicker { margin: 0 0 1.6rem; color: var(--primary); font-size: 1.45rem; font-weight: 750; letter-spacing: .035em; line-height: 1.2; text-transform: none; }
.ingredient-profile-label { margin: 0 0 1.8rem; color: var(--primary); font-size: 2.4rem; font-weight: 720; letter-spacing: -.02em; line-height: 1.2; text-transform: none; }
.ingredient-hero h1 { max-width: 82rem; margin: 0; font-size: clamp(4rem, 5.8vw, 7.4rem); line-height: .98; letter-spacing: -.055em; }
.ingredient-positioning { max-width: 72rem; margin: 2.4rem 0 0; color: var(--text); font-size: 2rem; line-height: 1.55; }
.ingredient-actions { display: flex; flex-wrap: wrap; gap: 2.2rem; align-items: center; margin-top: 3.4rem; }
.ingredient-text-link { color: var(--title); font-weight: 650; text-decoration: none; }
.ingredient-text-link span { color: var(--primary); padding-left: .6rem; }
.ingredient-hero-image { display: grid; min-height: 36rem; place-items: center; overflow: visible; }
.ingredient-hero-image img { display: block; width: min(100%, 44rem); max-height: 44rem; object-fit: contain; filter: drop-shadow(0 2.6rem 2.4rem rgba(31, 115, 147, .16)); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.ingredient-hero-image:hover img { transform: translateY(-.9rem) scale(1.045); filter: drop-shadow(0 3.8rem 3rem rgba(31, 115, 147, .24)); }
.ingredient-profile { margin-top: 3.8rem; padding: 2.7rem 0 0; border-top: 1px solid #c9e6f1; }
.ingredient-profile dl { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.65fr 1.3fr; margin: 0; }
.ingredient-profile dl div { min-height: 8rem; padding: 0 2.2rem; border-left: 1px solid #d8ebf2; transition: background-color .25s ease, transform .25s ease; }
.ingredient-profile dl div:first-child { padding-left: 0; border-left: 0; }
.ingredient-profile dl div:hover { transform: translateY(-.25rem); background: rgba(226, 246, 252, .7); }
.ingredient-profile dt { margin-bottom: .85rem; color: var(--text); font-size: 1.4rem; font-weight: 600; }
.ingredient-profile dd { margin: 0; font-size: 1.65rem; font-weight: 700; line-height: 1.4; }
.ingredient-section { padding: 9rem 0; }
.ingredient-value-section { background: #f8fcfd; }
.ingredient-section-heading { margin-bottom: 4rem; }
.ingredient-section h2, .ingredient-cta h2 { max-width: 72rem; margin: 0; font-size: clamp(3rem, 3.8vw, 5rem); line-height: 1.08; letter-spacing: -.045em; }
.ingredient-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.ingredient-benefit-card { display: flex; min-height: 18rem; align-items: flex-end; padding: 3.2rem; border: 1px solid #dbeef5; border-radius: 2rem; background: #fff; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease; }
.ingredient-benefit-card:hover { transform: translateY(-.8rem); border-color: #91d4ee; box-shadow: 0 2rem 3.6rem rgba(17, 108, 145, .12); }
.ingredient-benefit-card p { margin: 0; font-size: 2.25rem; font-weight: 680; line-height: 1.24; letter-spacing: -.025em; }
.ingredient-system-section { background: var(--title); color: #fff; }
.ingredient-system-section .ingredient-kicker { color: #8bd6f4; }
.ingredient-system-section p:not(.ingredient-kicker):not(.ingredient-profile-label) { max-width: 64rem; margin: 2.4rem 0 0; color: #c7dce5; font-size: 1.7rem; line-height: 1.65; }
.ingredient-inci-card { padding: 3.2rem; border: 1px solid rgba(139,214,244,.35); border-radius: 2rem; background: rgba(255,255,255,.06); transition: transform .3s ease, border-color .3s ease, background-color .3s ease; }
.ingredient-inci-card:hover { transform: translateY(-.6rem); border-color: rgba(139,214,244,.8); background: rgba(255,255,255,.1); }
.ingredient-inci-card .ingredient-profile-label { color: #8bd6f4; font-size: 2.6rem; }
.ingredient-fit-grid { align-items: stretch; }
.ingredient-application-list { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.ingredient-application-list span { padding: 1rem 1.4rem; border-radius: 999px; background: #edf8fc; color: #17698e; font-size: 1.5rem; font-weight: 650; transition: transform .22s ease, background-color .22s ease, color .22s ease; }
.ingredient-application-list span:hover { transform: translateY(-.35rem); background: var(--primary); color: #fff; }
.ingredient-notes { padding: 3.2rem; border-left: .4rem solid var(--primary); background: #f7fbfc; transition: transform .3s ease, box-shadow .3s ease; }
.ingredient-notes:hover { transform: translateX(.6rem); box-shadow: -1.4rem 1.4rem 3.2rem rgba(17, 108, 145, .09); }
.ingredient-notes ul { margin: 1.8rem 0 0; padding-left: 2rem; color: var(--text); font-size: 1.6rem; line-height: 1.65; }
.ingredient-notes li + li { margin-top: .9rem; }
.ingredient-cta { padding: 9rem 0; background: linear-gradient(120deg, #d9f3fd, #f5fbfe); text-align: center; }
.ingredient-cta h2, .ingredient-cta p:not(.ingredient-kicker) { margin-right: auto; margin-left: auto; }
.ingredient-cta p:not(.ingredient-kicker) { max-width: 68rem; margin-top: 2rem; color: var(--text); font-size: 1.75rem; line-height: 1.6; }
.ingredient-cta .btn { margin-top: 2.8rem; }
@media (prefers-reduced-motion: reduce) { .ingredient-detail *, .ingredient-detail *::before, .ingredient-detail *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media screen and (max-width: 768px) { .ingredient-hero { padding: 10rem 0 4rem; } .ingredient-hero-grid, .ingredient-system-grid, .ingredient-fit-grid, .ingredient-benefit-grid { grid-template-columns: 1fr; gap: 2rem; } .ingredient-hero-image { min-height: 23rem; margin-top: -1rem; } .ingredient-hero-image img { width: min(100%, 32rem); max-height: 32rem; } .ingredient-profile { margin-top: 2.5rem; padding-top: 2rem; } .ingredient-profile-label { font-size: 2.1rem; } .ingredient-profile dl { grid-template-columns: 1fr 1fr; gap: 0; } .ingredient-profile dl div { min-height: 0; padding: 1.5rem 1.2rem; border-top: 1px solid #d8ebf2; border-left: 0; } .ingredient-profile dl div:first-child { padding-left: 0; } .ingredient-profile dl div:nth-child(odd) { padding-left: 0; } .ingredient-profile dt { font-size: 1.25rem; } .ingredient-profile dd { font-size: 1.45rem; } .ingredient-section, .ingredient-cta { padding: 5.5rem 0; } .ingredient-section-heading { margin-bottom: 2.4rem; } .ingredient-benefit-card { min-height: 14rem; padding: 2.3rem; } .ingredient-benefit-card p { font-size: 2rem; } .ingredient-positioning { font-size: 1.7rem; } }