:root{--navy:#142c3a;--teal:#317c76;--paper:#f8f8f3;--muted:#52636a;--line:#d9dfd9;--sage:#e1e9e3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--navy);font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--teal);outline-offset:6px}a.button:focus-visible{outline-color:#86b5ac}img,svg{display:block;max-width:100%}.wrap{width:min(1200px,calc(100% - 104px));margin-inline:auto}.skip{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:12px}.header{height:116px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{width:188px;display:block}.brand img{width:100%;height:auto}.header nav{display:flex;gap:40px;align-items:center;font-size:14px;font-weight:600}.header nav a{padding:12px 0}.header nav a:last-child{display:flex;gap:22px}.header nav a:hover,.footer>a:last-child:hover{color:var(--teal)}.hero{display:grid;grid-template-columns:1.13fr 1fr;gap:64px;align-items:center;padding-block:66px 64px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:600;line-height:1.5;margin:0 0 28px}.hero .eyebrow{display:flex;gap:11px;align-items:center}.dot{width:7px;height:7px;background:var(--teal);display:inline-block}h1{font-size:clamp(45px,4.8vw,68px);font-weight:500;line-height:1.07;letter-spacing:-2.7px;margin:0 0 25px}h1 span{color:var(--teal)}.intro{color:var(--muted);font-size:17px;line-height:1.7;margin-bottom:31px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--navy);color:white;padding:19px 25px;font-size:14px;font-weight:600;min-height:56px;transition:background .18s}.button:hover{background:var(--teal)}.button span{font-size:21px;line-height:1}.micro{font-size:11px;color:var(--muted);margin:13px 0 0}.hero-visual{background:var(--sage);align-self:stretch;min-height:480px;position:relative;display:flex;flex-direction:column;justify-content:space-between}.visual-label{font-size:10px;letter-spacing:1.6px;padding:27px 30px 0;font-weight:600}.products{width:100%;margin-top:-20px;max-height:440px;flex:1}.visual-footer{padding:0 30px 25px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;color:var(--muted)}.audience{border-block:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding-block:25px}.audience>span{font-size:13px;color:var(--muted)}.audience p{margin:0;font-size:16px;font-weight:500}.audience p span{margin:0 22px;color:#8b9f98}.services{display:grid;grid-template-columns:1fr 1.15fr;gap:100px;padding-block:100px 105px}.section-intro h2{font-size:40px;font-weight:500;letter-spacing:-1.3px;line-height:1.15;margin:0 0 25px}.section-intro>p:last-child{font-size:16px;line-height:1.8;color:var(--muted);max-width:380px}.service-list article{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}.service-list article:first-child{padding-top:0}.number{color:var(--teal);font-size:11px;padding-top:5px}.service-list h3{font-size:22px;font-weight:500;letter-spacing:-.4px;margin:0 0 13px}.service-list p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.contact{background:var(--navy);color:white}.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:65px;padding-block:76px}.contact .eyebrow{color:#a6c3bd;margin-bottom:24px}.contact h2{font-size:53px;font-weight:500;line-height:1.12;letter-spacing:-1.8px;margin:0 0 25px}.contact-inner>div>p:last-child{font-size:14px;line-height:1.8;color:#c5d1d3}.contact-details{min-width:300px;padding-top:35px}.light{background:var(--paper);color:var(--navy);width:100%}.light:hover{background:#d6e5df}.phone{display:block;margin-top:25px;font-size:24px;letter-spacing:.2px}.phone:hover{text-decoration:underline;text-underline-offset:5px}.contact-details>p{margin-top:18px!important}.contact-details>p span{display:block;font-size:12px;color:#a4b9bc;margin-top:3px}.footer{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:145px}.footer .brand{width:148px}.footer p{margin-right:auto;font-size:12px;line-height:1.8;color:var(--muted)}.footer>a:last-child{font-size:12px;display:flex;gap:25px}
@media(min-width:1600px){.hero{padding-block:80px}.hero-visual{min-height:510px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero{gap:30px}.hero-visual{min-height:430px}.services{gap:50px}.contact-inner{gap:36px}h1{letter-spacing:-2px}.audience p span{margin:0 12px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:88px}.brand{width:152px}.header nav{gap:20px;font-size:12px}.header nav a:last-child{gap:7px}.hero{grid-template-columns:1fr;gap:38px;padding-block:42px 35px}.eyebrow{font-size:10px;margin-bottom:24px}h1{font-size:clamp(44px,9vw,60px);line-height:1.07;letter-spacing:-1.8px;margin-bottom:22px}.intro{font-size:16px}.hero-visual{min-height:0;max-height:none}.products{height:345px;flex:auto}.visual-label{padding:22px 25px 0}.visual-footer{padding:0 25px 22px}.audience{display:block;padding-block:21px}.audience>span{font-size:12px}.audience p{font-size:14px;margin-top:13px}.audience p span{margin:0 10px}.services{grid-template-columns:1fr;gap:35px;padding-block:60px}.section-intro h2{font-size:35px}.section-intro>p:last-child{max-width:none;font-size:15px}.service-list article{grid-template-columns:29px 1fr;gap:13px}.service-list h3{font-size:21px}.contact-inner{flex-direction:column;align-items:stretch;padding-block:54px;gap:15px}.contact h2{font-size:43px}.contact-details{min-width:0;padding-top:15px;max-width:360px}.phone{font-size:23px}.footer{padding-block:30px;gap:22px;flex-wrap:wrap}.footer p{font-size:11px}.footer>a:last-child{width:100%;border-top:1px solid var(--line);padding-top:20px;justify-content:space-between}.desktop-break{display:none}}
@media(max-width:380px){.header nav{gap:12px;font-size:11px}.brand{width:130px}.audience p{font-size:12px}.audience p span{margin:0 7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Motion follows the modular identity: assembly, gentle suspension and reveal. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--teal);z-index:20;transform:scaleX(0);transform-origin:left;pointer-events:none}
h1 .title-line{display:block;color:var(--navy)}h1 .title-line.accent{color:var(--teal)}
.hero-visual{overflow:hidden}.motion-toggle{border:0;background:none;color:var(--navy);font:inherit;letter-spacing:.2px;display:flex;align-items:center;gap:6px;padding:8px;margin:-8px;min-height:28px;cursor:pointer}.motion-toggle[hidden]{display:none}.motion-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.pause-icon{font-size:12px}.motion-toggle:hover{text-decoration:underline;text-underline-offset:3px}
.button{transition:background .22s,transform .22s}.button span{transition:transform .22s}.button:hover{transform:translateY(-2px)}.button:hover span{transform:translate(3px,-3px)}.button:active{transform:translateY(0)}
.header nav a{position:relative}.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s}.header nav a:hover::after{transform:scaleX(1)}
.service-list article{transition:background .3s}.service-list h3,.service-list .number{transition:transform .3s,color .3s}.service-list article:hover h3{color:var(--teal);transform:translateX(5px)}.service-list article:hover .number{transform:translateY(-2px)}
@media(prefers-reduced-motion:no-preference){
 .header .brand{animation:entrance .85s cubic-bezier(.22,1,.36,1) both}
 .hero-copy>.eyebrow{animation:entrance .8s .08s cubic-bezier(.22,1,.36,1) both}
 .title-line{animation:title-in 1s cubic-bezier(.22,1,.36,1) both}.title-line:nth-child(2){animation-delay:.12s}.title-line:nth-child(3){animation-delay:.24s}
 .hero-copy>.intro{animation:entrance .85s .32s cubic-bezier(.22,1,.36,1) both}.hero-copy>.button,.hero-copy>.micro{animation:entrance .85s .42s cubic-bezier(.22,1,.36,1) backwards}
 .hero-visual{animation:visual-in 1.1s .15s cubic-bezier(.22,1,.36,1) both}
 .corner-start{animation:corner-start 1.5s .25s cubic-bezier(.22,1,.36,1) both}.corner-end{animation:corner-end 1.5s .25s cubic-bezier(.22,1,.36,1) both}
 .product-baseline{stroke-dasharray:336;animation:draw-line 1.7s .35s both}
 .motion-ready .product-bottle{animation:float-bottle 6s 1s ease-in-out infinite}.motion-ready .product-tube{animation:float-tube 7s 1.4s ease-in-out infinite}.motion-ready .product-jar{animation:float-jar 6.5s .7s ease-in-out infinite}
}
@keyframes entrance{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes title-in{from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes visual-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes corner-start{from{opacity:0;transform:translate(-20px,-20px)}to{opacity:1;transform:translate(0,0)}}
@keyframes corner-end{from{opacity:0;transform:translate(20px,20px)}to{opacity:1;transform:translate(0,0)}}
@keyframes draw-line{from{stroke-dashoffset:336}to{stroke-dashoffset:0}}
@keyframes float-bottle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float-tube{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float-jar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.motion-paused .product,.page-hidden .product,.out-of-view .product{animation-play-state:paused!important}
.motion-paused .header .brand,.motion-paused .hero-copy>*,.motion-paused .title-line,.motion-paused .hero-visual,.motion-paused .matrix-corner,.motion-paused .product-baseline{animation:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:hover,.button:hover span,.service-list article:hover h3,.service-list article:hover .number{transform:none}.reading-progress{display:none}.motion-toggle{display:none!important}}

/* Editorial laboratory story */
.lab-story{display:grid;grid-template-columns:1.25fr .75fr;min-height:570px;margin-top:88px;background:var(--navy);color:white;overflow:hidden}
.lab-photo{position:relative;margin:0;min-height:570px;overflow:hidden}
.lab-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(20,44,58,.24));pointer-events:none}
.lab-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter .8s}
.lab-photo figcaption{position:absolute;left:22px;bottom:18px;z-index:1;padding:7px 10px;background:rgba(20,44,58,.78);color:#dce8e5;font-size:9px;letter-spacing:1.2px;text-transform:uppercase}
.lab-copy{padding:68px 55px;display:flex;flex-direction:column;justify-content:center}
.lab-copy .eyebrow{color:#a6c3bd;margin-bottom:30px}
.lab-copy h2{font-size:clamp(39px,3.8vw,56px);line-height:1.06;letter-spacing:-1.8px;font-weight:500;margin:0 0 30px}
.lab-copy h2 span{color:#82afa7}
.lab-copy>p:last-of-type{color:#c4d1d2;font-size:15px;line-height:1.8;margin:0 0 40px}
.lab-index{display:flex;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);font-size:9px;letter-spacing:1.25px;color:#a6c3bd}
.lab-story:hover .lab-photo img{transform:scale(1.025);filter:saturate(1.04)}
@media(max-width:900px){.lab-story{grid-template-columns:1fr;min-height:0;margin-top:64px}.lab-photo{min-height:420px}.lab-copy{padding:52px 42px}.lab-copy h2{font-size:44px}}
@media(max-width:760px){.lab-story{width:100%;margin-top:44px}.lab-photo{min-height:310px}.lab-copy{padding:45px 20px}.lab-copy h2{font-size:40px}.lab-copy>p:last-of-type{font-size:14px}.lab-index{gap:14px;flex-wrap:wrap}.lab-photo figcaption{left:14px;bottom:12px}.lab-story:hover .lab-photo img{transform:none}}

/* International production / maquila */
.maquila{display:grid;grid-template-columns:1.02fr .98fr;margin-top:28px;background:var(--sage);overflow:hidden}
.maquila-visual{position:relative;margin:0;min-height:520px;overflow:hidden;background:var(--navy)}
.maquila-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(20,44,58,.76));pointer-events:none}
.maquila-visual img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.maquila-visual figcaption{position:absolute;z-index:1;left:38px;right:38px;bottom:34px;color:white;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;border-top:1px solid rgba(255,255,255,.42);padding-top:18px}
.maquila-visual figcaption span{font-size:9px;letter-spacing:1.5px;color:#c7d9d5}.maquila-visual figcaption strong{font-size:18px;line-height:1.35;font-weight:500;text-align:right}
.maquila:hover .maquila-visual img{transform:scale(1.025)}
.maquila-copy{padding:68px 70px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.maquila-copy .eyebrow{color:var(--teal);margin-bottom:24px}
.maquila-copy h2{font-size:clamp(38px,3.7vw,54px);line-height:1.08;letter-spacing:-1.8px;font-weight:500;margin:0 0 25px}.maquila-copy h2 span{color:var(--teal)}
.maquila-copy>p:not(.eyebrow){max-width:570px;color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 28px}
.maquila-copy .maquila-note{display:flex;align-items:center;gap:12px;color:var(--navy);font-size:13px;line-height:1.5;margin:-7px 0 25px}.maquila-note span{width:24px;height:24px;display:inline-grid;place-items:center;background:var(--teal);color:white;font-size:17px;flex:0 0 auto}
.maquila-facts{display:flex;gap:14px 24px;flex-wrap:wrap;padding:20px 0;margin-bottom:30px;border-block:1px solid rgba(20,44,58,.16);width:100%;font-size:9px;letter-spacing:1.15px;font-weight:600;color:var(--navy)}
.maquila-facts span{display:flex;align-items:center;gap:9px}.maquila-facts span::before{content:"";width:5px;height:5px;background:var(--teal)}
@media(max-width:900px){.maquila{grid-template-columns:.9fr 1.1fr}.maquila-visual{min-height:500px}.maquila-copy{padding:55px 42px}.maquila-visual figcaption{left:28px;right:28px}}
@media(max-width:760px){.maquila{width:100%;grid-template-columns:1fr;margin-top:16px}.maquila-visual{min-height:360px}.maquila-visual figcaption{left:20px;right:20px;bottom:20px}.maquila-visual figcaption strong{font-size:15px}.maquila-copy{padding:45px 20px}.maquila-copy h2{font-size:38px}.maquila-copy>p:not(.eyebrow){font-size:14px}.maquila-facts{display:grid;gap:12px}.maquila-copy .button{width:100%}.maquila:hover .maquila-visual img{transform:none}}
