/* Zi Vital Home Hero V4 — open editorial carousel
 * Progressive enhancement: activates only after JS adds .zv4-hero-ready.
 */

.zv3-hero.zv4-hero-ready{
  display:block!important;
  min-height:0!important;
  padding:24px 0 82px!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 26%,rgba(231,210,181,.44),transparent 29%),
    radial-gradient(circle at 24% 78%,rgba(247,235,218,.82),transparent 34%),
    linear-gradient(180deg,#fff 0%,#fffdf9 56%,#fffaf4 100%)!important;
  isolation:isolate;
}
.zv3-hero.zv4-hero-ready::before{
  content:"";position:absolute;z-index:-1;left:-12%;right:-12%;bottom:-25%;height:58%;
  background:
    radial-gradient(ellipse at 24% 28%,rgba(255,255,255,.96) 0 26%,transparent 27%),
    radial-gradient(ellipse at 54% 48%,rgba(239,222,199,.76) 0 31%,transparent 32%),
    radial-gradient(ellipse at 82% 32%,rgba(255,255,255,.9) 0 28%,transparent 29%);
  filter:blur(10px);opacity:.92;transform:rotate(-3deg) scale(1.08)
}
.zv3-hero.zv4-hero-ready::after{
  content:"";position:absolute;z-index:-1;right:-140px;top:90px;width:620px;height:620px;border:1px solid rgba(184,141,51,.13);border-radius:50%;pointer-events:none
}
.zv4-hero__shell{width:min(calc(100% - 56px),1580px);margin:0 auto;position:relative}
.zv4-hero__viewport{position:relative;min-height:720px}
.zv4-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);gap:74px;align-items:center;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.72,.2,1),visibility 0s linear .8s}
.zv4-slide.is-active{position:relative;opacity:1;visibility:visible;transform:none;transition-delay:0s}
.zv4-slide__copy{position:relative;z-index:3;padding:56px 0 38px}
.zv4-slide__kicker{margin:0 0 18px;color:#9b7121;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.zv4-slide h1{max-width:770px;margin:0;font-family:"Cormorant Garamond",serif;font-size:clamp(60px,5.7vw,86px);font-weight:500;line-height:.89;letter-spacing:-.045em;color:#302924}
.zv4-slide__lead{max-width:650px;margin:28px 0 0;color:#817469;font-size:13px;line-height:1.82}
.zv4-slide__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.zv4-slide__trust{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:30px;color:#8b7e73;font-size:10px}
.zv4-slide__trust span{position:relative;padding-left:17px}
.zv4-slide__trust span::before{content:"✓";position:absolute;left:0;top:50%;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:#ead6a7;color:#8e681f;font-size:8px;transform:translateY(-50%)}

.zv4-slide__art{position:relative;min-height:650px;display:grid;place-items:center;padding:34px 0 30px}
.zv4-media{position:relative;width:min(610px,100%);height:650px;border:1px solid rgba(184,141,51,.16);border-radius:42px;background:linear-gradient(145deg,#f1e3d2 0%,#fbf5ed 50%,#e7d1b3 100%);box-shadow:0 30px 78px rgba(70,50,31,.1);overflow:hidden;isolation:isolate}
.zv4-media::before{content:"";position:absolute;z-index:0;inset:-14% -25% auto 32%;height:58%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.86),transparent 66%);filter:blur(4px)}
.zv4-media::after{content:"";position:absolute;z-index:4;top:-30%;left:-55%;width:28%;height:170%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.64),transparent);transform:rotate(12deg);transition:left .82s cubic-bezier(.2,.72,.2,1);pointer-events:none}
.zv4-media:hover::after{left:132%}
.zv4-media__image{position:absolute;z-index:1;inset:20px;overflow:hidden;border-radius:32px}
.zv4-media__image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transition:transform .9s cubic-bezier(.2,.72,.2,1)}
.zv4-media[data-fit="contain"] .zv4-media__image{inset:34px;background:rgba(255,255,255,.5)}
.zv4-media[data-fit="contain"] .zv4-media__image img{object-fit:contain;object-position:center}
.zv4-media:hover .zv4-media__image img{transform:scale(1.025)}

/* Keep informational chips fully inside the rounded media shell.
 * Earlier negative offsets made the first/last letters clip against overflow:hidden.
 */
.zv4-chip{position:absolute;z-index:5;max-width:calc(100% - 36px);padding:9px 15px;border:1px solid rgba(184,141,51,.23);border-radius:999px;background:rgba(255,252,247,.92);backdrop-filter:blur(10px);box-shadow:0 12px 28px rgba(75,55,33,.06);color:#9b7121;font-size:8px;font-weight:800;letter-spacing:.12em;line-height:1.15;text-transform:uppercase;white-space:nowrap;overflow:visible}
.zv4-chip--one{left:18px;top:170px}.zv4-chip--two{right:18px;bottom:170px}
.zv4-media__caption{position:absolute;z-index:5;left:30px;right:30px;bottom:26px;padding:17px 19px;border:1px solid rgba(255,255,255,.58);border-radius:21px;background:rgba(247,237,225,.86);backdrop-filter:blur(14px);box-shadow:0 16px 38px rgba(64,47,30,.08)}
.zv4-media__caption small,.zv4-media__caption span{display:block;font-family:"Manrope",sans-serif}
.zv4-media__caption small{color:#8e765c;font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.zv4-media__caption strong{display:block;margin:4px 0 2px;font-family:"Cormorant Garamond",serif;font-size:27px;font-weight:500;line-height:1;color:#3d322b}
.zv4-media__caption span{color:#8a7c71;font-size:8px}

.zv4-hero__controls{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:4px;padding:0 4px}
.zv4-hero__dots{display:flex;gap:8px}
.zv4-hero__dot{width:32px;height:5px;border:0;border-radius:99px;background:#eadfca;cursor:pointer;transition:width .3s ease,background .3s ease,transform .3s ease}
.zv4-hero__dot.is-active{width:48px;background:#9f7628}.zv4-hero__dot:hover{transform:translateY(-1px)}
.zv4-hero__pause{border:0;background:transparent;color:#9a8d81;font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}

/* Make the header and open hero feel intentional together without boxing them. */
body.home .act-header{margin-bottom:0!important}
body.home .act-header .act-container{width:min(calc(100% - 56px),1580px)!important}
body.home .act-header__inner{border-color:rgba(184,141,51,.18)!important;box-shadow:0 12px 34px rgba(72,53,34,.055)!important}

@media(max-width:1120px){
  .zv4-slide{grid-template-columns:minmax(0,1fr) minmax(400px,.85fr);gap:42px}.zv4-media{height:590px}.zv4-slide h1{font-size:clamp(56px,6vw,76px)}
}
@media(max-width:900px){
  .zv3-hero.zv4-hero-ready{padding-top:18px!important}.zv4-hero__shell{width:min(calc(100% - 36px),900px)}.zv4-hero__viewport{min-height:1080px}.zv4-slide{grid-template-columns:1fr;gap:18px;align-items:start}.zv4-slide__copy{padding:38px 0 10px}.zv4-slide h1{max-width:820px}.zv4-slide__art{min-height:600px;padding-top:0}.zv4-media{height:580px;max-width:620px}.zv4-chip--one{left:14px}.zv4-chip--two{right:14px}
  body.home .act-header .act-container{width:min(calc(100% - 30px),900px)!important}
}
@media(max-width:620px){
  .zv3-hero.zv4-hero-ready{padding:8px 0 58px!important}.zv4-hero__shell{width:calc(100% - 24px)}.zv4-hero__viewport{min-height:930px}.zv4-slide__copy{padding-top:30px}.zv4-slide h1{font-size:50px;line-height:.91}.zv4-slide__lead{margin-top:21px;font-size:12px}.zv4-slide__actions{margin-top:24px}.zv4-slide__trust{gap:12px 18px;margin-top:24px;font-size:9px}.zv4-slide__art{min-height:500px}.zv4-media{height:480px;border-radius:32px}.zv4-media__image{inset:12px;border-radius:24px}.zv4-media[data-fit="contain"] .zv4-media__image{inset:24px}.zv4-media__caption{left:16px;right:16px;bottom:14px}.zv4-chip{max-width:calc(100% - 24px);padding:8px 12px;font-size:7px;letter-spacing:.1em}.zv4-chip--one{left:12px;top:112px}.zv4-chip--two{right:12px;bottom:128px}.zv4-hero__controls{margin-top:8px}
  body.home .act-header .act-container{width:calc(100% - 18px)!important}
}
@media(prefers-reduced-motion:reduce){.zv4-slide,.zv4-media::after,.zv4-media__image img{transition:none!important}}


/* Reserve the final carousel footprint before JS enhancement.
 * This prevents the server-rendered first frame from shifting the page when
 * the carousel progressively enhances, reducing CLS without hiding content.
 */
.zv3-hero[data-zv3-hero]:not(.zv4-hero-ready){min-height:826px}
.zv4-slide__copy{min-height:510px}
@media(max-width:900px){
  .zv3-hero[data-zv3-hero]:not(.zv4-hero-ready){min-height:1120px}
  .zv4-slide__copy{min-height:390px}
}
@media(max-width:620px){
  .zv3-hero[data-zv3-hero]:not(.zv4-hero-ready){min-height:970px}
  .zv4-slide__copy{min-height:360px}
}