/* Handmade objects take the lead, with genuine Harbour work as context. */
.care-list{margin-top:26px;border-top:1px solid var(--line);max-width:520px}
.care-item{border-bottom:1px solid var(--line)}
.care-item h3{margin:0;font:inherit}
.care-item button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:15px 0;border:0;background:none;text-align:left;font-size:clamp(17px,1.4vw,21px);font-weight:600;letter-spacing:-.015em;cursor:pointer;color:var(--slate)}
.care-item button:hover,.care-item.on button{color:var(--ink)}
.care-item button>span{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1.5px solid var(--light);border-radius:50%;background:var(--light);font-size:18px;font-weight:400;line-height:1;color:var(--ink);transition:background .24s var(--curve)}
.care-item.on button>span{background:none}
.care-item>p{margin:0;padding:0 34px 18px 0;font-size:15px;line-height:1.55;color:var(--slate);max-width:49ch}
.care-stage{min-width:0;width:100%;height:min(62vh,590px)}
.care-visuals,.care-visual{position:relative;width:100%;height:100%}
.care-visual{animation:care-arrive .35s var(--curve) both}
.care-visual[hidden],.care-item>p[hidden]{display:none}
@keyframes care-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.care-proof{position:absolute;z-index:1;top:8%;right:0;width:76%;overflow:hidden;border:1px solid #dedede;border-radius:14px;background:#fff;box-shadow:0 22px 52px -27px #1e293440,0 2px 7px #1e29340a;transform:rotate(1deg)}
.care-proof-label{display:block;padding:11px 14px;border-bottom:1px solid #ececec;background:#fcfcfb;font-size:11px;font-weight:600;letter-spacing:.035em;color:var(--slate)}
.care-proof-label span{color:var(--light);padding:0 4px}
.care-proof img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.care-object{position:absolute;z-index:2;display:block;object-fit:contain;filter:drop-shadow(0 18px 17px #22252a24)}
.care-object-mug{left:-4%;bottom:10%;width:64%;height:73%}
.care-object-laptop{left:-5%;bottom:8%;width:70%;height:75%}
.care-object-mark{left:0;bottom:10%;width:61%;height:74%}
.care-object-phone{left:4%;bottom:9%;width:47%;height:86%}
.care-caption{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12px;color:var(--steel)}
.care-goals .care-proof{transform:rotate(-1deg)}
.care-requests .care-proof{top:10%;transform:rotate(1.3deg)}
.care-channels{position:absolute;z-index:1;right:4%;top:18%;width:52%;padding:0 0 12px;border:1px solid #dedede;border-radius:14px;background:#fff;box-shadow:0 22px 52px -27px #1e293440,0 2px 7px #1e29340a;transform:rotate(1deg)}
.care-channels ul{list-style:none;margin:0;padding:9px 22px 1px}
.care-channels li{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #ececec;font-size:clamp(13px,1.1vw,17px);font-weight:550;color:var(--ink)}
.care-channels li:last-child{border:0}
.care-channels li:before{content:'';display:block;flex:none;width:7px;height:7px;border-radius:2px;background:var(--light)}
@media (min-width:901px) and (max-height:760px){
  .s-keys h2{font-size:clamp(34px,3.6vw,50px)}
  .s-keys .lede{font-size:16px;margin-top:18px}
  .care-list{margin-top:20px}
  .care-item button{padding:12px 0;font-size:18px}
  .care-item>p{font-size:14px;padding-bottom:14px}
}
@media (max-width:900px) and (max-aspect-ratio:11/10),(max-width:480px){
  .care-list{margin-top:clamp(12px,2vh,24px);max-width:none}
  .care-item button{padding:clamp(10px,1.5vh,15px) 0;font-size:clamp(16.5px,2.6vw,21px)}
  .care-item>p{padding:0 34px clamp(10px,1.5vh,16px) 0;font-size:clamp(14px,1.9vw,15.5px);max-width:60ch}
  .care-stage{flex:1 1 0;min-height:0;height:auto;margin-top:clamp(10px,2vh,28px);container:care/size}
  .care-visuals{width:auto;max-width:100%;aspect-ratio:5/4;margin:0 auto}
}
@media (max-width:560px) and (max-aspect-ratio:11/10),(max-width:480px){
  .s-keys .lede{display:none}
  .care-item button{padding:9px 0}
  .care-item button>span{width:23px;height:23px;font-size:17px}
  .care-item>p{padding:0 30px 11px 0}
}
@media (max-width:560px) and (max-height:700px){
  .care-list{margin-top:10px}
  .care-item button{padding:8px 0}
  .care-item>p{padding-bottom:9px;font-size:13.5px;line-height:1.45}
  .care-stage{margin-top:8px}
}
@media (min-height:561px) and (max-height:660px) and (min-aspect-ratio:11/10){
  .care-list{margin-top:16px}
  .care-item button{padding:10px 0;font-size:17px}
  .care-item>p{padding-bottom:12px;font-size:14px}
  .care-stage{height:min(60vh,590px)}
}
@media (min-height:561px) and (max-height:660px) and (min-aspect-ratio:11/10) and (max-width:1000px){.s-keys .lede{display:none}}
@media (max-height:560px) and (min-aspect-ratio:11/10){
  .s-keys .lede{display:none}
  .care-list{margin-top:10px}
  .care-item button{padding:7px 0;font-size:16px}
  .care-item button>span{width:22px;height:22px;font-size:16px}
  .care-item>p{padding:0 30px 9px 0;font-size:13px;line-height:1.45}
  .care-stage{height:min(72vh,320px,100vh - 114px);container:care/size}
}
@container care (max-width:519px) or (max-height:379px){
  .care-visuals{width:100%;max-width:520px;aspect-ratio:auto}
  .care-proof{top:3%;right:0;width:73%;border-radius:10px}
  .care-proof-label{padding:7px 10px;font-size:9px}
  .care-object-mug,.care-object-laptop,.care-object-mark{height:85%;bottom:4%}
  .care-object-phone{height:92%;bottom:3%}
  .care-caption{bottom:0;font-size:10px}
  .care-channels{top:5%;right:0;width:53%;border-radius:10px}
  .care-channels ul{padding:5px 11px 0}
  .care-channels li{padding:6px 0;font-size:11px;gap:6px}
  .care-channels li:before{width:5px;height:5px}
}
@container care (max-height:259px){
  .care-proof,.care-channels,.care-caption{display:none}
  .care-object{left:50%;right:auto;top:0;bottom:auto;width:90%;height:100%;transform:translateX(-50%)}
  .care-object-phone{width:70%}
}
/* A wide tablet has room for both layers even when the pinned scene is short. */
@container care (min-width:520px) and (min-height:180px) and (max-height:259px){
  .care-proof,.care-channels{display:block;top:0;right:1%;width:59%}
  .care-proof img{height:155px}
  .care-object{left:0;top:0;width:48%;transform:none}
  .care-object-phone{left:8%;width:37%}
  .care-channels{width:53%}
}
@container care (max-height:105px){.care-visuals{display:none}}
@media (prefers-reduced-motion:reduce){.care-visual{animation:none}}