/* Clear product language and visible science, within the existing ivory/sage palette. */
.hero h1{font-size:clamp(54px,5.9vw,82px)}
.hero-intro{max-width:420px}
.hero-application{position:relative}
.hero-application>img{aspect-ratio:4/4.5;object-position:center top}
/* Layer images in one fixed-size frame so rotation never shifts the hero layout. */
.hero-gallery>.hero-image{opacity:0;transition:opacity .9s ease;pointer-events:none;object-position:center bottom}
.hero-gallery>.hero-image.is-current{opacity:1}
.hero-gallery>.hero-image~.hero-image{position:absolute;top:0;left:0}

.hero-regimen{position:absolute;inset:auto 20px 20px;padding:19px 20px 17px;background:rgba(248,249,243,.96);border:1px solid rgba(255,255,255,.65);box-shadow:0 8px 28px rgba(34,61,48,.1);z-index:2}
.hero-regimen>p{font-size:13px;font-weight:500;line-height:1.4;color:var(--ink);margin-bottom:13px}
.hero-regimen>div{display:flex;gap:7px}
.hero-regimen a{display:flex;align-items:center;justify-content:space-between;gap:9px;flex:1;min-width:0;min-height:38px;font-size:11px;line-height:1.3;background:#e1e9d8;border:1px solid #c8d5bc;padding:10px 11px;white-space:nowrap}
.hero-regimen a:hover{background:#cddcbe}
.hero-regimen a span{font-size:14px}
.hero-regimen small{display:block;font-size:9px;line-height:1.65;color:var(--body);margin-top:12px;max-width:370px}
.story-section{border-top:1px solid var(--line);padding-block:58px}
.story-heading{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:end;margin-bottom:38px}
.story-heading .eyebrow{margin-bottom:17px}
.story-heading h2{font-size:clamp(38px,3.6vw,51px);line-height:1.1}
.story-heading>p{font-size:14px;line-height:1.9;max-width:440px}
.root-science-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-visual{margin:0;border:1px solid #c7d4bc}
.root-illustration{background:linear-gradient(145deg,#f0f3e8,#e0e8d6);padding:20px 12px 25px}
.root-illustration svg{display:block;width:100%;height:auto}
.story-visual figcaption{font-size:10px;line-height:1.8;text-align:center;color:var(--body);padding-inline:15px}
.science-points{display:grid;gap:18px}
.science-points article{display:grid;grid-template-columns:54px minmax(0,1fr);gap:20px;padding-top:16px;border-top:1px solid var(--line)}
.science-points article:first-child{padding-top:0;border:0}
.science-marker{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid #b8c9aa;background:#e4ecd9;font-family:var(--serif);font-size:23px}
.science-points h3{font-family:var(--serif);font-size:25px;font-weight:400;margin-bottom:9px;line-height:1.2}
.science-points p{font-size:12px;line-height:1.85}
.science-points .source-link{margin-top:9px}
.story-context{font-size:10px;line-height:1.85;color:var(--body);margin-top:26px;max-width:980px}
.scalp-story-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:18px}
.scalp-panel{background:#e5ecd9;border:1px solid #c7d4bb;padding:29px 32px}
.scalp-panel.tea-tree-panel{grid-row:span 2;background:#d5e1c8;padding:34px 37px}
.scalp-panel .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:13px}
.scalp-panel h3{font-family:var(--serif);font-size:31px;font-weight:400;line-height:1.15;margin-bottom:15px}
.scalp-panel p:not(.eyebrow){font-size:12px;line-height:1.85}
.scalp-panel p+p:not(.eyebrow){margin-top:14px}
.tea-tree-panel h3{font-size:39px}
.compound-mark{display:grid;place-items:center;width:70px;height:70px;font-family:var(--serif);font-size:27px;border:1px solid #9db48b;border-radius:50%;margin-bottom:27px}
.antioxidant-strip{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:28px;align-items:center;padding:29px 0;margin-top:22px;border-block:1px solid var(--line)}
.antioxidant-strip .eyebrow{font-size:8px;margin-bottom:8px}
.antioxidant-strip h3{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.25}
.antioxidant-strip p:not(.eyebrow){border-left:1px solid var(--line);padding-left:24px}
.antioxidant-strip strong,.antioxidant-strip span{display:block}
.antioxidant-strip strong{font-size:12px;font-weight:500;color:var(--ink);margin-bottom:5px}
.antioxidant-strip span{font-size:10px;line-height:1.7}
.delivery-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}
.lipid-illustration{display:flex;flex-direction:column;justify-content:center;background:#dce6d1;padding:29px 32px 30px}
.lipid-illustration>.eyebrow{margin-bottom:19px}
.lipid-illustration svg{display:block;width:100%;max-height:290px;margin:auto}
.layer-key{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:23px 0 17px;font-size:9px}
.layer-key span{display:flex;align-items:center;gap:5px}
.layer-key i{display:block;width:9px;height:9px;border:1px solid #8ba27d;background:#f0f3e7}
.layer-key span:nth-child(2) i{background:#c2d3b1}
.layer-key span:nth-child(3) i{background:#a4b994}
.delivery-components{display:grid;grid-template-columns:1fr 1fr;gap:0 27px}
.delivery-components article{padding:24px 0;border-bottom:1px solid var(--line)}
.delivery-components article:nth-child(-n+2){border-top:1px solid var(--line)}
.delivery-components article>span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.delivery-components h3{font-family:var(--serif);font-size:25px;line-height:1.22;font-weight:400;margin:16px 0 12px}
.delivery-components p{font-size:12px;line-height:1.85}
.regimen-story{padding-block:24px 80px}
.regimen-inner{background:#d5dfc9;border:1px solid #bbcbb0;padding:44px 40px 30px}
.regimen-inner .story-heading{gap:60px;margin-bottom:33px}
.regimen-inner .story-heading>p{font-size:13px}
.regimen-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.regimen-cards article{background:#f2f5eb;border:1px solid #c4d1b9;padding:26px 24px;display:flex;flex-direction:column;align-items:start}
.regimen-cards svg{width:44px;height:44px;margin-bottom:24px}
.regimen-cards .eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:10px}
.regimen-cards h3{font-family:var(--serif);font-size:29px;line-height:1.2;font-weight:400;margin-bottom:14px}
.regimen-cards p:not(.eyebrow){font-size:12px;line-height:1.85;margin-bottom:21px}
.regimen-cards small{display:block;font-size:10px;line-height:1.8;color:var(--body);padding-top:17px;border-top:1px solid #ccd6c3;margin-top:auto}
.regimen-context{font-size:10px;line-height:1.85;margin-top:23px}
.regimen-context a{text-decoration:underline;text-underline-offset:3px;margin-left:10px;display:inline-block}
@media(max-width:1100px){
 .hero h1{font-size:clamp(42px,5.9vw,65px)}
 .hero-regimen{inset:auto 14px 14px;padding:16px}
 .hero-regimen a{font-size:10px;padding:9px 8px}
 .hero-regimen a span{display:none}
 .story-heading{gap:44px}
 .root-science-grid{gap:35px}
 .science-points article{gap:15px}
 .scalp-panel{padding:25px}
 .scalp-panel.tea-tree-panel{padding:29px}
 .antioxidant-strip{gap:18px}
 .antioxidant-strip p:not(.eyebrow){padding-left:18px}
 .delivery-story-grid{gap:28px}
 .regimen-inner{padding:35px 28px 27px}
 .regimen-cards{gap:13px}
 .regimen-cards article{padding:22px 18px}
 .regimen-cards h3{font-size:26px}
}
@media(max-width:767px){
 .hero h1{font-size:clamp(40px,11.8vw,72px)}
 .hero-application>img{aspect-ratio:1/1.12}
 .hero-regimen{inset:auto 12px 12px;padding:14px}
 .hero-regimen>p{font-size:12px;margin-bottom:10px}
 .hero-regimen>div{gap:5px}
 .hero-regimen a{font-size:10px;padding:9px 7px;justify-content:center}
 .hero-regimen small{font-size:9px;margin-top:9px;line-height:1.5}
 .story-section{padding-block:52px}
 .story-heading{grid-template-columns:1fr;gap:22px;margin-bottom:29px}
 .story-heading h2{font-size:36px}
 .story-heading>p{font-size:13px;line-height:1.85}
 .root-science-grid,.delivery-story-grid{grid-template-columns:1fr;gap:30px}
 .root-illustration{padding:9px 5px 20px}
 .root-illustration svg text{font-size:20px}
 .science-points{gap:23px}
 .science-points h3{font-size:24px}
 .science-marker{width:46px;height:46px;font-size:21px}
 .science-points article{grid-template-columns:46px minmax(0,1fr);gap:16px}
 .story-context{font-size:9px;margin-top:23px}
 .scalp-story-grid{grid-template-columns:1fr;gap:15px}
 .scalp-panel.tea-tree-panel{grid-row:auto;padding:27px}
 .scalp-panel{padding:26px}
 .scalp-panel h3{font-size:29px}
 .tea-tree-panel h3{font-size:36px}
 .compound-mark{float:right;width:59px;height:59px;font-size:24px;margin:0 0 16px 15px}
 .tea-tree-panel .eyebrow{max-width:140px;min-height:35px}
 .antioxidant-strip{grid-template-columns:1fr 1fr;gap:23px;padding-block:24px}
 .antioxidant-strip>div{grid-column:1/-1}
 .antioxidant-strip p:not(.eyebrow){border:0;padding:0}
 .antioxidant-strip p:last-child{grid-column:1/-1}
 .lipid-illustration{padding:25px 20px}
 .delivery-components{gap:0 25px}
 .delivery-components article{padding-block:22px}
 .delivery-components h3{font-size:24px;overflow-wrap:normal}
 .regimen-story{padding-block:10px 52px}
 .regimen-inner{padding:28px 20px 24px}
 .regimen-inner .story-heading{gap:20px;margin-bottom:27px}
 .regimen-cards{grid-template-columns:1fr;gap:14px}
 .regimen-cards article{padding:25px}
 .regimen-cards svg{width:37px;height:37px;margin-bottom:18px}
 .regimen-cards h3{font-size:29px}
 .regimen-cards p:not(.eyebrow){margin-bottom:18px}
 .regimen-context{font-size:9px}
 .regimen-context a{margin:7px 9px 0 0}
}
@media(max-width:360px){
 .hero-regimen{inset:auto 9px 9px;padding:12px 10px}
 .hero-regimen a{font-size:9.5px;padding:9px 4px}
 .hero-regimen>p{font-size:11px}
 .hero-regimen small{font-size:9px}
 .story-heading h2{font-size:32px}
 .delivery-components{grid-template-columns:1fr}
 .delivery-components article:nth-child(2){border-top:0}
 .regimen-inner{padding-inline:15px}
 .regimen-cards article{padding:22px 20px}
}