/* Editorial home. Photography stays original; composition is responsive. */
.helen-preview .he-hero{display:grid;grid-template-columns:48% 52%;background:#e9e3de;min-height:560px}
.he-copy{padding:65px 10%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.he-copy .eyebrow{font-size:10px;letter-spacing:2.8px;color:#55504c}
.he-copy h1{font-size:clamp(38px,4.4vw,72px);line-height:1.07;font-weight:400;letter-spacing:-1.8px;margin:30px 0 24px;max-width:640px}
.he-copy h1 em{display:block;font-weight:400;color:#765a4c}
.he-copy>p{max-width:420px;font-size:14px;line-height:1.8;color:#57514c}
.he-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:20px}.he-text-link{font-size:12px;padding:12px 0;border-bottom:1px solid #aaa099}
.he-signature{font-size:10px;letter-spacing:2px;margin-top:58px;color:#6e635c}.he-signature span{margin:0 14px}
.he-portrait{position:relative;min-width:0;overflow:hidden;background:#c5c3c5}.he-portrait>img{display:block;width:100%;height:100%;max-height:730px;object-fit:cover;object-position:center 35%}.he-photo-credit{position:absolute;bottom:22px;right:24px;font-size:9px;letter-spacing:1.8px;color:#333;background:#ffffffce;padding:9px 12px}
.helen-preview .hs-home-strip{background:#f7f5f3;padding:21px 5%}
.helen-preview .he-universes{padding-top:75px}.helen-preview .hs-home-heading .eyebrow{font-size:10px;letter-spacing:2px}.helen-preview .hs-home-heading{margin-bottom:32px}
.he-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:270px 270px;gap:20px}.he-story{position:relative;overflow:hidden;background:#272624;isolation:isolate}.he-story>img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.he-story:hover>img{transform:scale(1.035)}.he-story:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 75%);z-index:0}.he-story>div{position:absolute;bottom:30px;left:32px;right:32px;color:white;z-index:1}.he-story span{font-size:10px;letter-spacing:1.8px}.he-story h3{font-size:clamp(26px,2.5vw,40px);font-weight:400;line-height:1.1;margin:12px 40px 10px 0;color:white}.he-story p{font-size:12px;margin:0;color:#f1eeea}.he-story b{position:absolute;right:0;bottom:0;font-weight:400;font-size:25px}.he-colour{grid-row:1/3}.he-colour>img{object-position:20% center}.he-care>img{object-position:center 35%}.he-men>img{object-position:center 28%}
.helen-preview .hs-home-feature{padding-top:65px}.helen-preview .hs-home-feature .products li.product img{height:265px;object-fit:contain}.helen-preview .hs-home-feature .products li.product h2{font-size:16px}.helen-preview .hs-home-feature .pro-price{font-size:11px;margin:12px 0}
.he-tools{margin:65px 5% 80px;background:#f1eeea;display:grid;grid-template-columns:1fr 1fr;align-items:center}.he-tools>div{padding:45px 12%}.he-tools-image{background:#faf9f7}.he-tools-image img{display:block;width:100%;height:300px;object-fit:contain;mix-blend-mode:multiply}.he-tools h2{font-size:clamp(30px,3vw,44px);line-height:1.12;font-weight:400;margin:20px 0}.he-tools p{font-size:14px;line-height:1.8;color:#625e59}.he-tools .eyebrow{font-size:10px;letter-spacing:2px}.he-tools .hs-cta{margin-top:15px}
@media(min-width:1700px){.he-copy{padding-left:12%}.he-hero{max-height:730px}}
@media(max-width:850px){.he-copy{padding:40px 8%}.he-copy h1{font-size:40px}.he-signature{margin-top:30px}.he-mosaic{grid-template-rows:240px 240px}}
@media(max-width:600px){.helen-preview .he-hero{grid-template-columns:1fr;min-height:0}.he-copy{padding:36px 6% 32px}.he-copy h1{font-size:42px;letter-spacing:-1px;margin:22px 0 18px}.he-copy>p{font-size:13px}.he-actions{gap:12px 20px;margin-top:10px}.he-signature{display:none}.he-portrait>img{height:390px;object-position:center 25%}.he-photo-credit{font-size:8px;bottom:14px;right:14px}.helen-preview .he-universes{padding-top:42px}.he-mosaic{grid-template-columns:1fr;grid-template-rows:360px 290px 250px;gap:16px}.he-colour{grid-row:auto}.he-story>div{left:24px;right:24px;bottom:24px}.he-story h3{font-size:30px}.helen-preview .hs-home-feature{padding-top:40px}.helen-preview .hs-home-feature .products li.product img{height:180px}.he-tools{grid-template-columns:1fr;margin-top:40px;margin-bottom:45px}.he-tools>div{padding:30px 8%}.he-tools-image img{height:200px}}
@media(prefers-reduced-motion:reduce){.he-story>img{transition:none}.he-story:hover>img{transform:none}}
@media(min-width:601px){.helen-preview .he-hero{min-height:0}.he-portrait{height:clamp(540px,44vw,660px)}.he-portrait>img{height:100%;max-height:none}.he-copy{padding-top:42px;padding-bottom:42px}}

/* Keep both the hair portrait and all four colour ranges in frame. */
.helen-preview .he-colour{display:flex;flex-direction:column;background:#30221d}
.helen-preview .he-colour>img{display:block;object-fit:contain;object-position:center;width:100%;height:auto;min-height:0;flex:1}
.helen-preview .he-colour:hover>img{transform:none}
.helen-preview .he-colour:after{display:none}
.helen-preview .he-colour>div{position:relative;inset:auto;padding:22px 26px;background:#30221d}
.helen-preview .he-colour>div b{right:26px;bottom:24px}
@media(max-width:600px){.helen-preview .he-mosaic{grid-template-rows:auto 290px 250px}.helen-preview .he-colour>img{flex:none;aspect-ratio:1672/941}.helen-preview .he-colour>div{padding:20px 22px}.helen-preview .he-colour h3{font-size:27px;margin-top:10px}}

/* Native vector arrows cannot become emoji on mobile. */
.helen-preview .he-arrow{display:inline-block;width:26px;height:26px;vertical-align:middle;flex-shrink:0}
.helen-preview .hs-home-heading .he-arrow{width:17px;height:17px;margin-left:5px}
@media(min-width:601px){
 .helen-preview .he-colour{display:block}
 .helen-preview .he-colour>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 .helen-preview .he-colour:after{display:block;background:linear-gradient(0deg,rgba(28,17,13,.86),transparent 48%)}
 .helen-preview .he-colour>div{position:absolute;left:32px;right:32px;bottom:30px;padding:0;background:transparent}
 .helen-preview .he-colour>div b{right:0;bottom:0}
}

/* Mobile colour card: full composition, quiet title overlay. */
@media(max-width:600px){
 .helen-preview .he-colour{display:block}
 .helen-preview .he-colour>img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
 .helen-preview .he-colour:after{display:block;background:linear-gradient(0deg,rgba(24,15,12,.82),rgba(24,15,12,.2) 28%,transparent 55%)}
 .helen-preview .he-colour>div{position:absolute;left:16px;right:16px;bottom:14px;padding:0;background:transparent}
 .helen-preview .he-colour h3{font-size:clamp(20px,5.7vw,28px);line-height:1.15;margin:0 30px 0 0}
 .helen-preview .he-colour>div>p{display:none}
 .helen-preview .he-colour>div b{right:0;bottom:0;line-height:1}
 .helen-preview .he-colour .he-arrow{width:22px;height:22px}
}

/* Salon care portrait: retain the gesture in wide and mobile crops. */
.helen-preview .he-care>img{object-position:70% 48%}
.helen-preview .he-care:after{background:linear-gradient(0deg,rgba(25,19,15,.7),transparent 65%)}
@media(max-width:600px){.helen-preview .he-care>img{object-position:65% center}}