/* Comfort section: locked to the photo layout's proportions (2469x1080) so the boxes sit on the right areas at any desktop width. */
.zcomf{--zc-ink:var(--zip-ink,#14263d);--zc-blue:var(--zip-blue,#0a6cc4);
/* clip-path shapes for the two layered photos (4 points each, so they can animate into one another) */
--zc-all:polygon(45.5% 0,100% 0,100% 100%,39% 100%);
--zc-top:polygon(45.5% 0,100% 0,100% 64.9%,42.5% 46.4%);
--zc-bot:polygon(42.42% 47.4%,100% 65.9%,100% 100%,39% 100%);
--zc-edge:polygon(45.05% 0,100% 0,100% 100%,38.55% 100%);
position:relative;z-index:3;width:100%;aspect-ratio:2469/1080;background:#eef5fc var(--zc-bg) left center/auto 100% no-repeat;overflow-x:clip;color:var(--zc-ink)}
.zcomf *,.zcomf *::before,.zcomf *::after{box-sizing:border-box}
.zcomf__mask{display:block;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

.zcomf__left{position:absolute;left:6.3%;top:12%;width:36vw;z-index:4}
.zcomf .zcomf__eyebrow{margin:0 0 1.5vw;font-size:clamp(10px,1vw,18px);font-weight:500;letter-spacing:.3em;line-height:1.4;text-transform:uppercase;color:var(--zc-ink)}
.zcomf .zcomf__title{margin:0 0 1.5vw;font-size:var(--zip-h3-size);font-weight:700;line-height:1.12;letter-spacing:0;text-transform:uppercase;color:var(--zc-ink)}
.zcomf__line{display:block}
.zcomf__accent{color:var(--zip-blue,#0a6cc4)}
.zcomf .zcomf__desc{margin:0 0 2vw;max-width:34vw;font-size:clamp(13px,1.111vw,24px);font-weight:400;line-height:1.65;color:var(--zc-ink)}
.zcomf .zh__btn{display:inline-flex;align-items:center;gap:.7em;padding:.85em 1.7em;border-radius:.5em;background:var(--zc-blue);color:#fff;font-size:clamp(14px,1.25vw,22px);font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;transition:filter .2s}
.zcomf .zh__btn:hover{filter:brightness(.9);color:#fff}
.zcomf__mask--btn{width:1.1em;height:1.1em;transition:transform .2s}
.zcomf__btn:hover .zcomf__mask--btn{transform:translateX(3px)}

/* ---- the two photos: layered in one container, clip-path decides what shows ---- */
.zcomf__right{position:absolute;inset:0;z-index:1}
.zcomf__media{position:absolute;inset:0;z-index:1;pointer-events:none}
.zcomf__edge{position:absolute;inset:0;z-index:1;background:#fff;clip-path:var(--zc-edge)}
.zcomf__layer{position:absolute;inset:0;z-index:2;display:block;transition:clip-path .9s cubic-bezier(.65,0,.25,1),z-index 0s linear .9s}
.zcomf__layer--top{clip-path:var(--zc-top);background:#8fbbe3}
.zcomf__layer--bot{clip-path:var(--zc-bot);background:#3d2c1d}
/* the photo fills the right-hand area (not the whole section) so the scene is framed like the design */
.zcomf__img{position:absolute;left:39%;top:0;width:61%;height:100%;display:block;object-fit:cover}
.zcomf__layer--top .zcomf__img{object-position:center top}
.zcomf__layer--bot .zcomf__img{object-position:center bottom}
.zcomf__media.is-top .zcomf__layer--top,.zcomf__media.is-bot .zcomf__layer--bot{z-index:3;clip-path:var(--zc-all);transition:clip-path .9s cubic-bezier(.65,0,.25,1),z-index 0s}
/* invisible hit areas keep the ORIGINAL regions, so the other photo can still be reached while one is expanded */
.zcomf__hit{position:absolute;inset:0;z-index:5;display:block;margin:0;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.zcomf__hit:focus{outline:0}
.zcomf__hit--top{clip-path:var(--zc-top)}
.zcomf__hit--bot{clip-path:var(--zc-bot)}
/* the box that sits on the covered photo steps aside */
.zcomf__box{transition:opacity .5s ease}
.zcomf__media.is-top ~ .zcomf__box--eve,.zcomf__media.is-bot ~ .zcomf__box--day{opacity:0!important}

/* ---- icon boxes ---- */
.zcomf__box{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.zcomf__box--day{left:46%;top:17%}
.zcomf__box--eve{left:45.4%;top:69%;color:#fff}
.zcomf__circle{display:flex;align-items:center;justify-content:center;width:4.4vw;height:4.4vw;border-radius:50%;background:rgba(255,255,255,.82);color:var(--zc-ink)}
.zcomf__circle .zcomf__mask{width:2.3vw;height:2.3vw}
.zcomf__moon{display:flex;align-items:center;justify-content:center;width:4.4vw;height:4.4vw;border-radius:50%;background:rgba(36,26,14,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--zc-moon,#f0c75e)}
.zcomf__moon .zcomf__mask{width:2.5vw;height:2.5vw}
/* heading + description share ONE translucent block */
.zcomf__txtbox{display:inline-block;margin-top:.8vw;padding:.55vw 1.1vw .65vw;border-radius:.8vw;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.zcomf__box--day .zcomf__txtbox{background:rgba(255,255,255,.72);color:var(--zc-ink)}
.zcomf__box--eve .zcomf__txtbox{background:rgba(36,26,14,.36);color:rgba(255,255,255,.95)}
.zcomf .zcomf__box h4{margin:0 0 .25vw;padding:0;font-size:clamp(14px,1.6vw,30px);font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none}
.zcomf .zcomf__box--day h4{color:var(--zc-blue)}
.zcomf .zcomf__box--eve h4{color:#fff}
.zcomf .zcomf__box p{margin:0;padding:0;background:none;font-size:clamp(10px,1.05vw,19px);font-weight:400;line-height:1.3;color:inherit}

/* bottom-left plant: bleeds off the left edge (clipped by the section) and out of the bottom, over the next section */
.zcomf__plant{position:absolute;left:-1.5vw;bottom:-5vw;width:8vw;z-index:6;pointer-events:none}
.zcomf__plant img{display:block;width:100%;height:auto}
.zcomf__plant2{position:absolute;left:-1vw;top:0;width:16vw;z-index:3;pointer-events:none}.zcomf__plant2 img{display:block;width:100%;height:auto}
.zcomf__plant-in{transform-origin:0 100%}
.zcomf__plant img{transform-origin:0 100%}

.zcomf.zc-pre [data-zc],.zcomf.zc-pre .zcomf__plant-in,.zcomf.zc-pre .zcomf__plant2-in{opacity:0}
.zcomf__plant2-in,.zcomf__plant2 img{transform-origin:0 100%}

@media (prefers-reduced-motion:reduce){.zcomf__layer,.zcomf__box{transition:none}}

/* tablet + mobile: text on top, photo block below (same two-photo effect, tap instead of hover) */
@media (max-width:1024px){
.zcomf{--zc-all:polygon(0 0,100% 0,100% 100%,0 100%);--zc-top:polygon(0 0,100% 0,100% 62%,0 38%);--zc-bot:polygon(0 39%,100% 63%,100% 100%,0 100%);--zc-edge:polygon(0 0,100% 0,100% 100%,0 100%);
aspect-ratio:auto;background:#eef5fc;display:flex;flex-direction:column;padding-top:56px}
.zcomf__left{position:relative;left:auto;top:auto;width:auto;padding:0 20px}
.zcomf .zcomf__eyebrow{font-size:12px;margin-bottom:14px}
.zcomf .zcomf__title{font-size:var(--zip-h3-size);margin-bottom:16px}
.zcomf .zcomf__desc{max-width:none;font-size:16px;margin-bottom:24px}
.zcomf .zh__btn{font-size:16px}
.zcomf__right{position:relative;inset:auto;margin-top:40px;min-height:56vw}
.zcomf__img{left:0;width:100%}
.zcomf__box--day{left:7%;top:9%}
.zcomf__box--eve{left:7%;top:auto;bottom:9%}
.zcomf__circle{width:54px;height:54px}
.zcomf__circle .zcomf__mask{width:28px;height:28px}
.zcomf__moon{width:54px;height:54px}
.zcomf__moon .zcomf__mask{width:30px;height:30px}
.zcomf__txtbox{margin-top:8px;padding:8px 14px 9px;border-radius:12px}
.zcomf .zcomf__box h4{margin:0 0 3px;font-size:20px}
.zcomf .zcomf__box p{font-size:13px}
.zcomf__plant{left:-3vw;bottom:-9vw;width:12vw}
.zcomf__plant2{display:block;position:absolute;left:-4vw;top:0;width:20vw;z-index:3;pointer-events:none}.zcomf__plant2 img{display:block;width:100%;height:auto}
}
@media (max-width:767px){
.zcomf__plant2{width:26vw;left:-6vw}
.zcomf{padding-top:44px}
.zcomf__left{padding:0 15px}
.zcomf .zcomf__title{font-size:var(--zip-h3-size)}
.zcomf .zcomf__desc{font-size:16px}
.zcomf .zh__btn{font-size:14px;padding:12px 18px}
.zcomf__right{min-height:130vw}
.zcomf__circle,.zcomf__moon{width:44px;height:44px}
.zcomf__circle .zcomf__mask{width:22px;height:22px}
.zcomf__moon .zcomf__mask{width:24px;height:24px}
.zcomf__txtbox{margin-top:6px;padding:6px 11px 7px;border-radius:10px}
.zcomf .zcomf__box h4{margin:0 0 2px;font-size:16px}
.zcomf .zcomf__box p{font-size:11px}
.zcomf__plant{width:12.5vw;bottom:-14vw}
}
/* the photos fade in with plain CSS: they never depend on the entrance script to become visible */
.zcomf__media{animation:zc-media-in 1.2s ease .1s both}
@keyframes zc-media-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.zcomf__media{animation:none}}
/* tablet only: smaller and lower, so the blurred lower leaves sit on the solid background below the photo block instead of over the photo */
@media (min-width:768px) and (max-width:1024px){
.zcomf__plant{width:10vw;bottom:-12.5vw}
}