/* Dedicated readability, access, and responsive-density refinement. */
:root {
  --ink: #183247;
  --muted: #50697c;
  --type-body: clamp(1rem, .96rem + .15vw, 1.125rem);
  --type-support: clamp(1.0625rem, 1.01rem + .2vw, 1.25rem);
  --type-caption: .875rem;
}
html { scroll-padding-top: 88px; }
body { font-size: var(--type-body); line-height: 1.65; }
section[id], #contact { scroll-margin-top: 88px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #2b9cdf; outline-offset: 3px; }
.desktop-nav { gap: clamp(1rem, 1.7vw, 1.8rem); font-size: .9375rem; }
.desktop-nav a { padding: .5rem 0; }
.nav-wrap { min-height: 76px; }
.nav-cta { min-height: 44px; padding: 0 1.05rem; font-size: .9375rem; }
.brand { font-size: 1.35rem; }
.eyebrow, .section-index, .detail-tag { font-size: .75rem; letter-spacing: .065em; }
.hero-intro { max-width: 34rem; color: #d2e0e8; font-size: var(--type-support); line-height: 1.58; }
.hero-context, .hero-measure { font-size: .75rem; }
.button { min-height: 48px; padding: 0 1.2rem; font-size: .9375rem; font-weight: 700; }
.button span { font-size: 1.1rem; }
.benefits article { min-height: 122px; padding: 1.55rem; }
.benefits p { max-width: 14rem; color: #c6d6e0; font-size: .9375rem; line-height: 1.55; }
.intro-main p, .about-copy p:not(.eyebrow), .contact-copy p { font-size: var(--type-support); line-height: 1.62; }
.intro-main p { max-width: 36rem; }
.intro-list div { grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.22rem 0; }
.intro-list p { font-size: 1rem; line-height: 1.62; }
.section-head > p { max-width: 25rem; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.section-head.inverse > p, .scientific-head > p { color: #c3d4df; }
.micro-stage { min-height: 425px; padding-top: 1.35rem; }
.micro-stage > span { font-size: .75rem; }
.micro-stage h3 { margin-top: 1.35rem; font-size: 1.5rem; }
.micro-stage p { max-width: 18rem; color: #c5d6df; font-size: 1rem; line-height: 1.6; }
.ingredient-field, .image-stage img { height: 225px; }
.phase-copy p:not(.eyebrow) { max-width: 38rem; color: #d5e2e9; font-size: var(--type-support); line-height: 1.62; }
.text-link { min-height: 44px; align-items: center; font-size: .9375rem; }
.phase-overlay { font-size: .75rem; }
.application-tab { min-height: 70px; grid-template-columns: 3.2rem 1fr 1.2rem; }
.application-tab b { font-size: 1rem; }
.application-tab span { font-size: .75rem; }
.application-content { max-width: 25rem; padding: 1.85rem; }
.application-content .detail-tag { margin-bottom: 5.5rem; }
.application-content h3 { font-size: clamp(1.75rem, 2.2vw, 2.15rem); }
.application-content p { max-width: 22rem; color: #d9e5eb; font-size: 1rem; line-height: 1.62; }
.application-content a { min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem; }
.data-line { min-height: 164px; gap: 2.2rem; }
.data-line p { color: #c5d6df; font-size: 1rem; }
.data-line strong { font-size: clamp(3.5rem, 4.8vw, 4.5rem); }
.data-line strong small { font-size: 1.45rem; }
.data-line > span { font-size: .75rem; }
.data-rail { min-height: 38px; }
.data-rail b { color: #e1ebf1; font-size: 1rem; font-weight: 600; }
.range-strip div { min-height: 132px; gap: .55rem; padding: 1.35rem 1.6rem; }
.range-strip span { color: #c3d5df; font-size: .9375rem; }
.range-strip b { font-size: 1.85rem; }
.range-strip em { color: #b6cbd7; font-size: .875rem; line-height: 1.55; }
.evidence-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding-top: 1.85rem; border-top: 1px solid rgba(207,227,239,.2); }
.evidence-cta > div:first-child { max-width: 37rem; }
.evidence-cta p { margin: 0 0 .35rem; color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; }
.evidence-cta span { color: #c1d3de; font-size: 1rem; line-height: 1.55; }
.evidence-cta > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.evidence-cta .text-link { color: #cfe2eb; }
.product-tab { min-height: 118px; padding: 1.3rem 1.55rem; }
.product-tab span, .product-tab em { font-size: .75rem; }
.product-tab b { font-size: 1.7rem; }
.product-detail-content { max-width: 32rem; padding: 2.2rem; }
.product-detail .detail-tag { margin-bottom: 6.5rem; }
.product-detail h3 { font-size: clamp(3rem, 4vw, 4.4rem); }
.product-detail p:not(.detail-tag) { color: #d7e3e9; font-size: 1.05rem; line-height: 1.62; }
.production-flow { font-size: .75rem; }
.process-step { min-height: 235px; padding: 1.65rem; }
.process-step > span { font-size: .75rem; }
.process-step h3 { margin-top: 4rem; font-size: 1.5rem; }
.process-step p { max-width: 18rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.about-list div { grid-template-columns: 3rem 1fr; padding: 1.3rem 0; }
.about-list p { font-size: 1rem; line-height: 1.62; }
.contact-details p { color: #bed0da; font-size: .9375rem; line-height: 1.65; }
.contact-details .small-link { font-size: .9375rem; }
.contact-form { gap: 1.35rem; padding: 2.1rem; }
.form-title { padding-bottom: 1.15rem; font-size: 1.25rem; }
.contact-form label { gap: .55rem; color: #416078; font-size: .75rem; }
.contact-form input, .contact-form select, .contact-form textarea { min-height: 48px; padding: .75rem 0; border-bottom-width: 2px; color: var(--navy); font-size: 1rem; line-height: 1.5; }
.contact-form textarea { min-height: 98px; }
.form-status { min-height: 1.4rem; margin: -.35rem 0 0; color: #237542; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.form-note { margin: -.4rem 0 0; color: #597487; font-size: .8125rem; line-height: 1.55; }
.footer-top > p, .footer-top > div { font-size: .8125rem; line-height: 1.6; }
.footer-top > div span, .footer-bottom { font-size: .6875rem; }

@media (max-width: 960px) {
  .container { width: min(100% - 44px, 1190px); }
  .desktop-nav { gap: 1rem; font-size: .875rem; }
  .hero-layout { min-height: 575px; }
  .section-head { gap: 2.5rem; }
  .data-line { grid-template-columns: .95fr 1.2fr 2rem; gap: 1.4rem; }
  .application-layout { grid-template-columns: .76fr 1.24fr; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }
  section[id], #contact { scroll-margin-top: 76px; }
  .container, .nav-wrap { width: min(100% - 40px, 1190px); }
  .nav-wrap { min-height: 68px; }
  .brand { font-size: 1.3rem; }
  .menu-button { width: 44px; height: 44px; }
  .mobile-menu { top: 68px; gap: 1rem; padding: 1.25rem 20px 1.5rem; }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; font-size: 1rem; font-weight: 600; }
  .hero-layout { padding-top: 46px; }
  .hero h1 { font-size: clamp(2.65rem, 11vw, 3.15rem); line-height: 1.03; letter-spacing: -.07em; }
  .hero-intro { font-size: 1rem; line-height: 1.65; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .hero-actions .button { width: 100%; }
  .hero-context { gap: .55rem; margin-top: 2.1rem; font-size: .625rem; }
  .hero-context span { padding-right: .55rem; }
  .hero-measure { font-size: .625rem; }
  .benefits article { min-height: 120px; gap: .65rem; padding: 1.1rem; }
  .benefits p { font-size: .875rem; line-height: 1.52; }
  .intro-main h2, .about-copy h2, .contact-copy h2, .phase-copy h2, .production-overlay h2 { font-size: clamp(2rem, 8.8vw, 2.35rem); line-height: 1.1; }
  .intro-main p, .about-copy p:not(.eyebrow), .contact-copy p, .phase-copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.65; }
  .intro-list p { font-size: .9375rem; }
  .section-head h2 { font-size: clamp(2rem, 8.8vw, 2.35rem); }
  .section-head > p { font-size: 1rem; line-height: 1.62; }
  .micro-stage h3 { font-size: 1.35rem; }
  .micro-stage p { font-size: .9375rem; }
  .phase-copy { padding-bottom: 73px; }
  .phase-overlay { font-size: .625rem; }
  .application-tab { min-height: 64px; }
  .application-tab b { font-size: .9375rem; }
  .application-content { max-width: 20rem; padding: 1.3rem; }
  .application-content h3 { font-size: 1.65rem; }
  .application-content p { font-size: .9375rem; line-height: 1.58; }
  .data-line { min-height: 178px; padding: 1.4rem 0; }
  .data-line p, .data-rail b { font-size: .9375rem; }
  .data-line strong { font-size: 3.5rem; }
  .range-strip span { font-size: .9375rem; }
  .range-strip em { font-size: .875rem; }
  .evidence-cta { display: block; margin-top: 1.75rem; padding-top: 1.55rem; }
  .evidence-cta p { font-size: 1.25rem; }
  .evidence-cta span { font-size: .9375rem; }
  .evidence-cta > div:last-child { margin-top: 1.2rem; display: grid; }
  .evidence-cta .button, .evidence-cta .text-link { width: 100%; justify-content: center; }
  .product-tab b { font-size: 1.35rem; }
  .product-detail-content { padding: 1.45rem; }
  .product-detail .detail-tag { margin-bottom: 4.25rem; }
  .product-detail h3 { font-size: 3rem; }
  .product-detail p:not(.detail-tag) { font-size: 1rem; line-height: 1.58; }
  .process-step h3 { font-size: 1.35rem; }
  .process-step p, .about-list p { font-size: .9375rem; }
  .contact-form { padding: 1.5rem; }
  .form-title { font-size: 1.2rem; }
  .form-note, .form-status { font-size: .8125rem; }
  .footer-top > p, .footer-top > div { font-size: .75rem; }
}

@media (max-width: 900px) and (min-width: 721px) {
  .desktop-nav { display: none; }
  .nav-cta { margin-left: auto; white-space: nowrap; }
  .menu-button { display: flex; width: 44px; height: 44px; margin-left: .75rem; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #b9c9d3; background: transparent; }
  .menu-button span { width: 14px; height: 1px; background: var(--navy); transition: transform .18s var(--ease); }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: 76px; left: 0; right: 0; display: grid; gap: 1rem; padding: 1.25rem 22px 1.5rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 14px 25px rgba(10,37,56,.1); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; color: var(--navy); font-size: 1rem; font-weight: 600; }
  .mobile-menu a:last-child { color: var(--green-dark); }
}

/* Replaces generic generated scene imagery with clear, non-photographic technical diagrams. */
.diagram-flow .micro-stage { min-height: 430px; }
.diagram-visual { position: relative; height: 225px; margin-top: 26px; overflow: hidden; border: 1px solid rgba(188,218,235,.23); background-color: rgba(4,24,42,.24); background-image: linear-gradient(rgba(171,208,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(171,208,230,.08) 1px, transparent 1px); background-size: 28px 28px; }
.ingredient-diagram::before { content: "ACTIVE"; position: absolute; left: 16px; top: 14px; color: #9fc2d5; font: .6875rem var(--mono); letter-spacing: .08em; }
.ingredient-diagram::after { content: ""; position: absolute; left: 20px; right: 20px; top: 51%; border-top: 1px dashed rgba(174,210,231,.38); }
.ingredient-diagram i, .dispersion-diagram i { position: absolute; display: block; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(232,135,71,.12); }
.ingredient-diagram i:nth-child(1) { width: 25px; height: 25px; left: 20%; top: 34%; }.ingredient-diagram i:nth-child(2) { width: 18px; height: 18px; left: 43%; top: 63%; }.ingredient-diagram i:nth-child(3) { width: 22px; height: 22px; left: 68%; top: 30%; }.ingredient-diagram i:nth-child(4) { width: 13px; height: 13px; left: 77%; top: 68%; }.ingredient-diagram i:nth-child(5) { width: 13px; height: 13px; left: 49%; top: 33%; }.ingredient-diagram i:nth-child(6) { width: 16px; height: 16px; left: 27%; top: 73%; }
.micelle-diagram { display: grid; place-items: center; background-image: radial-gradient(circle at center, rgba(112,207,93,.16) 0 19%, transparent 19.5%), linear-gradient(rgba(171,208,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(171,208,230,.08) 1px, transparent 1px); }
.micelle-diagram::before, .micelle-diagram::after { content: ""; position: absolute; border: 1px solid rgba(112,207,93,.5); border-radius: 50%; }.micelle-diagram::before { width: 128px; height: 128px; }.micelle-diagram::after { width: 170px; height: 170px; border-color: rgba(153,205,227,.23); }
.micelle-core { position: relative; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 10px rgba(232,135,71,.13); }
.micelle-diagram i { position: absolute; z-index: 2; width: 15px; height: 15px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(112,207,93,.11); }.micelle-diagram i:nth-of-type(1) { transform: translate(0,-66px); }.micelle-diagram i:nth-of-type(2) { transform: translate(47px,-47px); }.micelle-diagram i:nth-of-type(3) { transform: translate(66px,0); }.micelle-diagram i:nth-of-type(4) { transform: translate(47px,47px); }.micelle-diagram i:nth-of-type(5) { transform: translate(0,66px); }.micelle-diagram i:nth-of-type(6) { transform: translate(-47px,47px); }.micelle-diagram i:nth-of-type(7) { transform: translate(-66px,0); }.micelle-diagram i:nth-of-type(8) { transform: translate(-47px,-47px); }
.dispersion-diagram::before { content:""; position:absolute; inset: 44% 17px auto; border-top: 1px solid rgba(178,216,235,.4); }.dispersion-diagram::after { content:"UNIFORM DISTRIBUTION"; position:absolute; left:16px; bottom:14px; color:#9fc2d5; font:.6875rem var(--mono); letter-spacing:.08em; }.dispersion-diagram i { width: 13px; height: 13px; background: var(--green); box-shadow: 0 0 0 5px rgba(112,207,93,.11); }.dispersion-diagram i:nth-child(1) { left:12%; top:25%; }.dispersion-diagram i:nth-child(2) { left:30%; top:52%; }.dispersion-diagram i:nth-child(3) { left:49%; top:31%; }.dispersion-diagram i:nth-child(4) { left:67%; top:61%; }.dispersion-diagram i:nth-child(5) { left:81%; top:26%; }.dispersion-diagram i:nth-child(6) { left:20%; top:73%; }.dispersion-diagram i:nth-child(7) { left:42%; top:70%; }.dispersion-diagram i:nth-child(8) { left:60%; top:18%; }.dispersion-diagram i:nth-child(9) { left:84%; top:72%; }

.phase-section { background: #09233b; }
.phase-diagram { position: absolute; z-index: 1; inset: 0 0 0 47%; display: grid; grid-template-columns: 1fr .82fr 1fr; align-items: center; overflow: hidden; background: linear-gradient(110deg, rgba(11,42,68,.28), rgba(26,76,107,.52)); }
.phase-diagram::before { content:""; position:absolute; inset: 10% 7%; border: 1px solid rgba(159,203,226,.18); }.phase-side, .phase-center { position: relative; z-index: 2; display: grid; justify-items: center; gap: 13px; }.phase-side span, .phase-center > span { color: #d2e6ef; font: .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }.phase-side i { width: 15px; height: 15px; border: 1px solid #75c0ec; border-radius: 50%; }.phase-water-side i:nth-of-type(2n) { transform: translateX(23px); }.phase-fat-side i { border-color: #e6ba5c; }.phase-fat-side i:nth-of-type(2n) { transform: translateX(-22px); }.phase-micelle { position: relative; width: 112px; height: 112px; border: 1px solid rgba(112,207,93,.55); border-radius: 50%; }.phase-micelle b { position:absolute; left:43px; top:43px; width:24px; height:24px; border-radius:50%; background:var(--orange); }.phase-micelle i { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--green); }.phase-micelle i:nth-of-type(1){left:48px;top:-7px}.phase-micelle i:nth-of-type(2){right:8px;top:16px}.phase-micelle i:nth-of-type(3){right:-7px;top:48px}.phase-micelle i:nth-of-type(4){right:8px;bottom:16px}.phase-micelle i:nth-of-type(5){left:48px;bottom:-7px}.phase-micelle i:nth-of-type(6){left:8px;top:16px}.phase-path { position:absolute; z-index:1; left:18%; right:18%; top:50%; border-top:1px dashed rgba(186,220,236,.38); }
.phase-copy { z-index: 3; }

.application-detail { background: #102e48; }
.application-schematic { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 72% 25%, rgba(112,207,93,.22), transparent 28%), linear-gradient(120deg, #102d47, #174766); }.application-schematic > span { position:absolute; right:20px; top:19px; color:#9dc3d8; font:.6875rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.application-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(185,218,234,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(185,218,234,.3) 1px,transparent 1px); background-size:35px 35px; mask-image:linear-gradient(90deg,transparent 0,#000 48%); }.application-dots i { position:absolute; display:block; width:46px; height:46px; border:1px solid rgba(112,207,93,.72); border-radius:50%; box-shadow: inset 0 0 0 11px rgba(112,207,93,.11); }.application-dots i:nth-child(1){right:13%;top:25%}.application-dots i:nth-child(2){right:30%;top:49%;width:65px;height:65px}.application-dots i:nth-child(3){right:11%;bottom:11%;width:28px;height:28px}.application-dots i:nth-child(4){right:48%;top:19%;width:25px;height:25px}.application-dots i:nth-child(5){right:43%;bottom:20%;width:35px;height:35px}.type-confectionery { background: radial-gradient(circle at 72% 25%, rgba(232,135,71,.25), transparent 28%), linear-gradient(120deg,#102d47,#5e3d42); }.type-confectionery .application-dots i { border-color:#e88747; box-shadow:inset 0 0 0 11px rgba(232,135,71,.12); }.type-margarine { background: radial-gradient(circle at 72% 25%, rgba(230,186,92,.22), transparent 28%), linear-gradient(120deg,#102d47,#395d5c); }.type-bakery { background: radial-gradient(circle at 72% 25%, rgba(216,163,89,.26), transparent 28%), linear-gradient(120deg,#102d47,#705139); }.type-creams { background: radial-gradient(circle at 72% 25%, rgba(176,218,232,.26), transparent 28%), linear-gradient(120deg,#102d47,#496b78); }.type-dairy { background: radial-gradient(circle at 72% 25%, rgba(100,178,224,.28), transparent 28%), linear-gradient(120deg,#102d47,#316080); }
.application-content { z-index: 3; }

.product-code-art.product-schematic { display:grid; place-items:center; background: linear-gradient(135deg,#0b2943,#153f5c); }.product-schematic > span { position:absolute; right:28px; top:24px; color:#a5c9db; font:.75rem var(--mono); text-transform:uppercase; letter-spacing:.07em; }.product-rings { position:relative; width:210px; height:210px; border:1px solid rgba(112,207,93,.55); border-radius:50%; box-shadow:0 0 0 35px rgba(112,207,93,.04), 0 0 0 70px rgba(92,168,221,.04); }.product-rings::before { content:""; position:absolute; inset:22px; border:1px solid rgba(153,205,227,.33); border-radius:50%; }.product-rings b { position:absolute; left:83px; top:83px; width:42px; height:42px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 12px rgba(232,135,71,.1); }.product-rings i { position:absolute; width:17px; height:17px; border-radius:50%; background:var(--green); }.product-rings i:nth-of-type(1){left:97px;top:-8px}.product-rings i:nth-of-type(2){right:-8px;top:97px}.product-rings i:nth-of-type(3){left:97px;bottom:-8px}.product-rings i:nth-of-type(4){left:-8px;top:97px}

.production-section { min-height: 520px; background: linear-gradient(120deg,#0a2943 0%,#0d3859 100%); }.production-diagram { position:absolute; z-index:1; left:48%; right:6%; top:50%; display:flex; align-items:center; justify-content:space-between; transform:translateY(-50%); }.production-stage { display:grid; justify-items:center; gap:10px; min-width:76px; text-align:center; }.production-stage b { display:grid; place-items:center; width:52px; height:52px; color:var(--green); border:1px solid rgba(112,207,93,.7); border-radius:50%; font:.875rem var(--mono); }.production-stage span { color:#e0edf4; font:.75rem var(--mono); line-height:1.35; }.production-diagram > i { flex:1; height:1px; max-width:70px; margin:0 10px; background:rgba(192,220,234,.35); }.production-diagram > i::after { content:""; display:block; float:right; width:7px; height:7px; margin-top:-3px; border-top:1px solid var(--green); border-right:1px solid var(--green); transform:rotate(45deg); }.production-overlay { z-index:2; padding-top:105px; }.production-overlay > p:not(.eyebrow) { max-width:425px; color:#c5d7e1; font-size:1.0625rem; line-height:1.62; }.production-overlay h2 { margin-bottom:23px; }

@media (max-width: 720px) {
  .diagram-flow .micro-stage { min-height: 0; }.diagram-visual { height: 190px; margin-top:18px; }.micelle-diagram::before { width:110px; height:110px; }.micelle-diagram::after { width:145px; height:145px; }.phase-diagram { inset:0; display:block; opacity:.72; }.phase-side { position:absolute; top:55px; }.phase-water-side { left:8%; }.phase-fat-side { right:8%; }.phase-center { position:absolute; left:50%; top:126px; transform:translateX(-50%); }.phase-path { left:18%; right:18%; top:38%; }.phase-copy { padding:310px 0 70px; }.phase-copy h2 { max-width:350px; }.application-schematic > span { right:14px; top:14px; }.product-rings { width:160px; height:160px; }.product-rings b { left:62px; top:62px; width:36px; height:36px; }.product-rings i:nth-of-type(1){left:72px}.product-rings i:nth-of-type(2){top:72px}.product-rings i:nth-of-type(3){left:72px}.product-rings i:nth-of-type(4){top:72px}.production-section { min-height:430px; }.production-diagram { display:none; }.production-overlay { padding-top:70px; }.production-overlay > p:not(.eyebrow) { max-width:300px; font-size:1rem; }.production-overlay h2 { max-width:340px; }
}

/* Mobile hero: keep content, micelle, and benefit grid in distinct visual bands. */
@media (max-width: 720px) {
  .hero-layout { padding-top: 38px; }
  .hero-copy { padding-bottom: 0; }
  .hero-context { margin-top: 1.65rem; margin-bottom: 1.35rem; }
  .hero-art { height: 350px; margin: 0; overflow: hidden; }
  .hero-art img { width: min(92vw, 360px); height: min(92vw, 360px); right: 50%; top: 0; transform: translateX(50%); animation: none; }
  .hero-art::after { width: min(92vw, 360px); height: min(92vw, 360px); right: 50%; top: 0; transform: translateX(50%); }
  .hero-art::before { width: min(99vw, 390px); height: min(99vw, 390px); right: 50%; top: -15px; transform: translateX(50%); box-shadow: 0 0 0 45px rgba(195,221,237,.025), 0 0 0 90px rgba(195,221,237,.017); }
  .art-label { display: none; }
  .hero-measure { min-height: 48px; gap: 1rem; font-size: .61rem; }
  .benefits article { min-height: 128px; }
}

/* Mobile hero refinement: a contained specimen panel followed by a compact scan list. */
@media (max-width: 720px) {
  .hero-grid { display: none; }
  .hero-layout { padding-top: 34px; }
  .hero-context { margin: 1.5rem 0 .8rem; padding: 0; line-height: 1.45; }
  .hero-art { width: 100%; max-width: 330px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto 1rem; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(165,205,227,.19); background: radial-gradient(circle at 50% 49%, rgba(66,134,175,.16), transparent 58%), linear-gradient(135deg, rgba(13,43,68,.95), rgba(6,30,48,.98)); }
  .hero-art::before { width: 300px; height: 300px; right: 50%; top: 50%; transform: translate(50%, -50%); box-shadow: 0 0 0 22px rgba(195,221,237,.025), 0 0 0 46px rgba(195,221,237,.014); }
  .hero-art img { width: 276px; height: 276px; right: 50%; top: 50%; transform: translate(50%, -50%); object-fit: cover; filter: drop-shadow(0 16px 18px rgba(0,0,0,.28)); }
  .hero-art::after { width: 276px; height: 276px; right: 50%; top: 50%; transform: translate(50%, -50%); background: radial-gradient(circle at 47% 48%, transparent 51%, rgba(5,24,41,.16) 73%, rgba(5,24,41,.48) 100%); }
  .hero-measure { min-height: 0; padding: .95rem 0 1.15rem; justify-content: flex-start; font-size: .69rem; letter-spacing: .045em; }
  .hero-measure span:first-child::before { content: "MICELLDD SYSTEM / "; color: var(--green); }
  .hero-measure span:last-child { display: none; }
  .benefit-bar { background: #0b2841; border-top: 1px solid rgba(205,226,239,.14); }
  .benefits { display: block; border-left: 0; }
  .benefits article { min-height: auto; display: grid; grid-template-columns: 2.25rem 1fr; gap: .55rem; padding: 1.15rem 0; border-right: 0; border-bottom: 1px solid rgba(205,226,239,.14); }
  .benefits article:last-child { border-bottom: 0; }
  .benefits span { padding-top: .22rem; font-size: .7rem; }
  .benefits p { max-width: none; margin: 0; color: #c7d8e2; font-size: .94rem; line-height: 1.48; }
  .benefits b { display: inline; color: #fff; }
}

/* Premium mobile composition: fewer elements, stronger hierarchy, and a clear next-section transition. */
@media (max-width: 720px) {
  .site-header { background: rgba(255,255,255,.98); }
  .nav-wrap { min-height: 64px; }
  .menu-button { width: 44px; height: 44px; border: 0; background: transparent; }
  .menu-button span { width: 18px; background: var(--navy); }
  .mobile-menu { top: 64px; }

  .hero { background: radial-gradient(circle at 76% 62%, rgba(74,145,185,.18), transparent 33%), linear-gradient(132deg, #102f4a 0%, #0b2942 100%); }
  .hero-layout { min-height: 0; padding: 32px 0 0; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { margin-bottom: .75rem; color: #b9d0dd; font-size: .7rem; }
  .hero h1 { max-width: 350px; margin-bottom: 1.2rem; font-size: clamp(2.65rem, 11.6vw, 3rem); line-height: 1.01; letter-spacing: -.07em; }
  .hero-intro { max-width: 355px; margin-bottom: 1.5rem; color: #dce8ee; font-size: 1.0625rem; font-weight: 500; line-height: 1.56; }
  .hero-actions { display: flex; align-items: flex-start; gap: .85rem; }
  .hero-actions .button { width: 100%; min-height: 54px; font-size: 1rem; }
  .hero-actions .button-quiet { width: auto; min-height: 38px; padding: 0 .2rem; color: #cfdee6; border: 0; font-size: .9375rem; font-weight: 650; }
  .hero-actions .button-quiet span { color: var(--green); }
  .hero-context { display: none; }
  .hero-art { width: min(100% + 32px, 360px); max-width: none; height: 300px; aspect-ratio: auto; margin: 1.35rem auto 0; display: block; overflow: visible; border: 0; background: transparent; }
  .hero-art::before { width: 300px; height: 300px; top: 0; right: 50%; transform: translateX(50%); border-color: rgba(181,216,233,.16); box-shadow: 0 0 0 22px rgba(195,221,237,.02); }
  .hero-art::after { width: 292px; height: 292px; top: 4px; right: 50%; transform: translateX(50%); background: radial-gradient(circle at 47% 48%, transparent 47%, rgba(7,29,47,.07) 68%, rgba(7,29,47,.48) 100%); }
  .hero-art img { width: 292px; height: 292px; top: 4px; right: 50%; transform: translateX(50%); filter: drop-shadow(0 20px 22px rgba(0,0,0,.24)); }
  .hero-measure { display: none; }

  .benefit-bar { color: var(--navy); background: #fff; border-top: 0; }
  .benefits { padding: .55rem 0 1.1rem; }
  .benefits::before { content: "WHY MICELLDD"; display: block; padding: 1.15rem 0 .75rem; color: var(--green-dark); font: .7rem var(--mono); letter-spacing: .08em; }
  .benefits article { grid-template-columns: 2.15rem 1fr; gap: .7rem; min-height: auto; padding: 1rem 0; border-color: var(--line); }
  .benefits span { color: var(--green-dark); font-size: .72rem; }
  .benefits p { color: var(--muted); font-size: .98rem; line-height: 1.5; }
  .benefits b { color: var(--navy); font-weight: 750; }

  .intro-section { padding-top: 3.5rem; background: #f5f8fa; }
  .intro-main h2 { max-width: 345px; }
}

@media (max-width: 900px) and (min-width: 721px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .benefits article { min-height: 96px; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(205,226,239,.12); }
  .benefits p { max-width: 17rem; font-size: .95rem; }
  .benefits article:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Mobile micelle: unframed scientific object, not a circular card. */
@media (max-width: 720px) {
  .hero-art { width: calc(100% + 40px); max-width: none; height: 268px; margin: .85rem -20px 0; overflow: visible; background: transparent; }
  .hero-art::before, .hero-art::after { display: none; }
  .hero-art img { width: 330px; height: 330px; top: -30px; right: -22px; transform: none; border-radius: 0; object-fit: cover; mix-blend-mode: screen; filter: drop-shadow(0 18px 20px rgba(0,0,0,.2)); }
}

@media (max-width: 720px) {
  .hero-art { height: 258px; margin-top: 1rem; }
  .hero-art img { width: 340px; height: 340px; top: -43px; right: -6px; mix-blend-mode: normal; -webkit-mask-image: radial-gradient(ellipse 74% 74% at 51% 49%, #000 48%, rgba(0,0,0,.92) 58%, rgba(0,0,0,.34) 70%, transparent 79%); mask-image: radial-gradient(ellipse 74% 74% at 51% 49%, #000 48%, rgba(0,0,0,.92) 58%, rgba(0,0,0,.34) 70%, transparent 79%); }
}

/* Wide seamless micelle visual: no circle, frame, labels, or cutout dependency. */
.hero-art::before, .hero-art::after { display: none; }
.hero-art { height: 468px; overflow: hidden; }
.hero-art img { width: 700px; height: 467px; top: 3px; right: -50px; border-radius: 0; object-fit: cover; object-position: center; filter: none; animation: none; }
.art-label { display: none; }
@media (max-width: 720px) {
  .hero-art { width: calc(100% + 40px); height: 270px; margin: .95rem -20px 0; overflow: hidden; }
  .hero-art img { width: 480px; height: 320px; top: -24px; right: -52px; transform: none; object-fit: cover; object-position: center; -webkit-mask-image: none; mask-image: none; filter: none; }
}

/* Mobile hero structure: immediate text-to-action-to-visual sequence. */
@media (max-width: 720px) {
  .hero-layout { padding-top: 26px; }
  .hero .eyebrow { margin-bottom: .65rem; }
  .hero h1 { max-width: 340px; margin-bottom: 1rem; font-size: clamp(2.5rem, 11vw, 2.9rem); line-height: 1.02; }
  .hero-intro { max-width: 345px; margin-bottom: 1.3rem; font-size: 1rem; line-height: 1.58; }
  .hero-actions { gap: .6rem; }
  .hero-actions .button { min-height: 52px; }
  .hero-actions .button-quiet { min-height: 34px; }
  .hero-art { width: calc(100% + 40px); height: 260px; margin: .2rem -20px 0; overflow: hidden; }
  .hero-art img { width: 100%; height: auto; top: 0; right: 0; transform: none; object-fit: contain; object-position: center; }
  .benefit-bar { position: relative; z-index: 2; }
}

/* Tablet hero: keep the wide scientific visual entirely within the composition. */
@media (min-width: 721px) and (max-width: 960px) {
  .hero-art { height: 420px; }
  .hero-art img { width: 640px; height: 427px; top: 12px; right: 86px; object-fit: cover; object-position: center; }
}

/* Anchored hero object: compact cutout, placed beside—not beyond—the message. */
@media (min-width: 961px) {
  .hero-layout { grid-template-columns: minmax(0, .93fr) minmax(430px, 1.07fr); gap: clamp(2rem, 4vw, 4.8rem); }
  .hero-art { height: 430px; overflow: visible; }
  .hero-art img { width: clamp(330px, 29vw, 430px); height: auto; top: 20px; right: clamp(1rem, 3vw, 4rem); object-fit: contain; object-position: center; border-radius: 0; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .22)); }
}

@media (min-width: 721px) and (max-width: 960px) {
  .hero-art { height: 408px; overflow: visible; }
  .hero-art img { width: 330px; height: auto; top: 56px; right: 18px; object-fit: contain; object-position: center; border-radius: 0; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .2)); }
}

@media (max-width: 720px) {
  .hero-art { height: 282px; margin: .4rem -20px 0; overflow: visible; }
  .hero-art img { width: 300px; height: auto; top: 0; right: 50%; transform: translateX(50%); object-fit: contain; object-position: center; border-radius: 0; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .2)); }
}

/* Final desktop balance: pull the hero object into the content field, retaining a clear reading lane. */
@media (min-width: 961px) {
  .hero-art img { right: clamp(3rem, 7vw, 7.5rem); }
}

/* Clean hero source: opaque navy asset blended into the matching hero field. */
@media (min-width: 961px) {
  .hero-art { height: 420px; overflow: hidden; }
  .hero-art img { width: clamp(360px, 30vw, 420px); height: clamp(360px, 30vw, 420px); top: 4px; right: clamp(4.5rem, 8.5vw, 9rem); object-fit: cover; object-position: center; border-radius: 0; mix-blend-mode: screen; filter: none; }
}

@media (min-width: 721px) and (max-width: 960px) {
  .hero-art { height: 400px; overflow: hidden; }
  .hero-art img { width: 350px; height: 350px; top: 26px; right: 34px; object-fit: cover; object-position: center; border-radius: 0; mix-blend-mode: screen; filter: none; }
}

@media (max-width: 720px) {
  .hero-art { height: 280px; margin: .4rem -20px 0; overflow: hidden; }
  .hero-art img { width: 320px; height: 320px; top: -16px; right: 50%; transform: translateX(50%); object-fit: cover; object-position: center; border-radius: 0; mix-blend-mode: screen; filter: none; }
}

/* Final hero rendering: clean alpha asset, contained with no background field. */
@media (min-width: 961px) {
  .hero-art img { mix-blend-mode: normal; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .20)); }
}
@media (min-width: 721px) and (max-width: 960px) {
  .hero-art img { mix-blend-mode: normal; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .18)); }
}
@media (max-width: 720px) {
  .hero-art img { mix-blend-mode: normal; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18)); }
}