/* Visual use stories: paired images, readable without scroll-triggered reveals. */
.difference { background:#1b1916; max-width:none; padding:112px max(6%, calc((100vw - 1280px)/2)); }
.difference-heading { text-align:center; margin:0 auto 82px; max-width:720px; }
.difference-heading h2 { font-size:clamp(2.25rem,3.7vw,3.5rem); line-height:1.48; }
.difference-heading > p:last-child { color:var(--muted); font-size:1rem; line-height:1.95; margin-top:26px; }
.care-story { margin:0 auto 84px; }
.care-story-heading { display:grid; grid-template-columns:54px 1fr auto; gap:20px; align-items:center; margin-bottom:30px; }
.care-number { font:italic 1.4rem/1 var(--serif); color:var(--accent); align-self:start; padding-top:9px; }
.care-story-heading h3 { font:400 clamp(1.65rem,2.3vw,2.125rem)/1.55 var(--serif); letter-spacing:-.035em; }
.care-story-heading > p { color:var(--muted); font-size:1rem; text-align:right; line-height:1.8; }
.care-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; position:relative; }
.care-frame { min-width:0; }
.care-image { position:relative; background:#27221d; overflow:hidden; aspect-ratio:3/2; }
.care-image img { width:100%; height:100%; object-fit:cover; }
.care-image::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(17,14,11,.72),transparent 30%,transparent 72%,rgba(17,14,11,.28)); }
.care-image-label { position:absolute; left:24px; right:18px; top:18px; z-index:1; color:#eadfd2; font-size:.875rem; letter-spacing:.015em; }
.care-after .care-image-label { color:#f4d6af; }
.care-transition { position:absolute; top:calc((100vw - 12vw - 26px)/6); left:50%; z-index:2; width:116px; height:52px; transform:translate(-50%,-50%); pointer-events:none; }
.care-transition img { width:100%; height:100%; object-fit:contain; }
.care-frame figcaption { padding:24px 12px 0; }
.care-caption-kicker { display:block; margin-bottom:10px; font-size:.75rem; letter-spacing:.12em; color:#bcb0a2; }
.care-after .care-caption-kicker { color:var(--accent); }
.care-frame h4 { margin:0; font:400 clamp(1.3rem,1.7vw,1.6rem)/1.6 var(--serif); }
.care-frame figcaption p { margin-top:12px; color:var(--muted); font-size:1rem; line-height:1.85; }
.care-after h4 { color:#f0d0a8; }
.care-function-labels { position:absolute; z-index:1; bottom:16px; right:20px; display:flex; gap:8px; }
.care-function-labels span { font-size:.875rem; padding:3px 13px; border:1px solid #c2a07975; background:#211d1aba; color:#edd7bd; border-radius:20px; }
.care-refill-label { position:absolute; z-index:1; bottom:17px; left:24px; right:20px; color:#edd7bd; font-size:.875rem; text-align:center; text-shadow:0 1px 6px #000; }
/* Product imagery carries the airflow story, with copy kept as readable HTML. */
.care-air { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; margin:24px -3% 0; padding:0; isolation:isolate; }
.care-air-copy { grid-column:1; grid-row:1; z-index:1; padding:40px 0 40px 8%; }
.care-air-copy h3 { font:400 clamp(1.8rem,2.6vw,2.5rem)/1.5 var(--serif); letter-spacing:-.04em; }
.care-air-copy > p:not(.eyebrow) { font-size:1rem; line-height:2; color:var(--muted); margin-top:24px; }
.care-air-setting { display:block; margin-top:24px; color:#b3a18d; font-size:.875rem; }
.care-air-figure { grid-column:1/-1; grid-row:1; position:relative; min-width:0; overflow:hidden; }
.care-air-figure img { width:100%; height:auto; }
.care-air-figure::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#1b1916 0%,#1b1916e8 17%,#1b1916a6 29%,transparent 48%),linear-gradient(180deg,#1b1916 0%,transparent 14%,transparent 83%,#1b1916 100%); }
.care-air-figure figcaption { position:absolute; z-index:1; right:4%; bottom:5%; text-align:right; font:400 1.125rem/1.8 var(--serif); color:#ead5b9; }
.care-air-figure figcaption span { display:block; font:.8125rem/1.9 var(--sans); color:var(--muted); }
.care-note { border-top:1px solid #51463d80; padding-top:26px; margin-top:30px; color:#b4a594; font-size:.875rem; line-height:1.9; }
@media(min-width:1455px){.care-transition{top:209px}}
@media(max-width:1000px){
 .difference { padding-block:88px; }
 .care-story-heading { grid-template-columns:38px 1fr auto; gap:14px; }
 .care-pair { gap:18px; }
 .care-frame figcaption { padding-inline:4px; }
 .care-image-label { left:16px; top:12px; }
 .care-air-copy { padding-left:6%; }
 .care-air-copy h3 { font-size:1.8rem; }
}
@media(max-width:720px){
 .difference { padding:72px 6%; }
 .difference-heading { text-align:left; margin-bottom:54px; }
 .difference-heading h2 { font-size:2.2rem; }
 .difference-heading > p:last-child { margin-top:23px; }
 .care-story { margin-bottom:60px; }
 .care-story-heading { grid-template-columns:30px 1fr; column-gap:12px; margin-bottom:22px; }
 .care-story-heading h3 { font-size:1.55rem; }
 .care-number { font-size:1.125rem; padding-top:7px; }
 .care-story-heading > p { grid-column:2; text-align:left; margin-top:0; font-size:.9375rem; }
 .care-story-heading > p br { display:none; }
 .care-pair { gap:22px; grid-template-columns:1fr; }
 .care-image { aspect-ratio:3/2; }
 .care-image-label { left:18px; top:14px; font-size:.875rem; }
 .care-transition { position:static; width:100%; height:66px; transform:none; display:grid; place-items:center; margin:-12px 0; }
 .care-transition img { width:76px; height:36px; transform:rotate(90deg); }
 .care-frame figcaption { padding:17px 0 6px; }
 .care-caption-kicker { font-size:.75rem; margin-bottom:7px; }
 .care-frame h4 { font-size:1.35rem; }
 .care-frame figcaption p { margin-top:8px; }
 .care-after { padding-top:0; }
 .care-function-labels { bottom:12px; right:14px; }
 .care-function-labels span { font-size:.8125rem; padding:2px 11px; }
 .care-refill-label { bottom:13px; font-size:.8125rem; }
 .care-air { grid-template-columns:1fr; gap:10px; margin:0; padding-top:16px; }
 .care-air-copy { grid-column:1; grid-row:1; padding:0; }
 .care-air-figure { grid-row:2; margin-inline:-6.82%; }
 .care-air-figure img { aspect-ratio:1.1; height:auto; object-fit:cover; object-position:75% center; }
 .care-air-figure::after { background:linear-gradient(180deg,#1b1916 0%,transparent 14%,transparent 78%,#1b1916 100%); }
 .care-air-copy h3 { font-size:1.875rem; }
 .care-air-copy > p:not(.eyebrow) { margin-top:20px; }
 .care-air-setting { font-size:.875rem; line-height:1.9; }
 .care-air-figure figcaption { right:6%; bottom:4%; font-size:1rem; }
 .care-air-figure figcaption span { font-size:.75rem; }
 .care-note { margin-top:16px; font-size:.8125rem; }
 .care-note br { display:none; }
}
