/* ===== ZENIT (Pro) · calm, slow, a lot of air ===== */
:root{
  --font-display:'Newsreader',Georgia,serif;
  --font-body:'Jost',system-ui,-apple-system,sans-serif;
  --display-weight:300;
  --bg:#EDE9E2;--fg:#171A1E;--muted:#4C525C;--line:rgba(23,26,30,.15);--surface:#FFFFFF;--fg-surface:#171A1E;--plate:#8f9896;--radius:3px;--p:0;
}
/* the light in the page moves from morning to late afternoon with the scroll depth; the text stays dark */
body{font-size:16px;line-height:1.6;background:linear-gradient(180deg,color-mix(in oklab,#F6F3EC,#CDD3D2 calc(var(--p) * 66%)) 0%,color-mix(in oklab,#EDE9E0,#B4BEC1 calc(var(--p) * 72%)) 100%);color:var(--fg)}
.label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--primary-ink,var(--primary));display:block;margin-bottom:14px}
.display{font-family:var(--font-display);font-weight:200;line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
.btn{min-height:50px;padding:15px 30px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-radius:999px}
.btn-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-deep,var(--primary));border-color:var(--primary-deep,var(--primary))}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-outline-white{border-color:rgba(255,255,255,.75);color:#FBFAF7}
.btn-outline-white:hover{background:#FBFAF7;color:#171A1E}
section.cp-section{padding:92px 0}
.sec-head{margin-bottom:40px;max-width:720px}
.sec-head h2{font-size:clamp(34px,8vw,66px)}
.sec-head .body{color:var(--muted);margin-top:16px;font-size:16.5px;max-width:52ch}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;border-bottom:1px solid transparent;transition:background .4s,color .4s,border-color .4s}
.hdr.is-solid{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);color:var(--fg);border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:16px;height:76px}
.hdr-logo{font-family:var(--font-display);font-weight:300;font-size:24px;letter-spacing:.06em;text-decoration:none;margin-right:auto}
.hdr-logo .cp-logo{max-height:40px;width:auto}
.hdr-nav{display:none;gap:28px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.hdr-nav a{text-decoration:none;opacity:.78}
.hdr-nav a:hover{opacity:1}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr .btn{min-height:42px;padding:12px 20px;font-size:11.5px}
.hdr-burger{position:relative;width:44px;height:44px;background:none;border:0}
.hdr-burger span{position:absolute;left:50%;top:50%;width:22px;height:1px;background:currentColor;transform:translate(-50%,-50%) translateY(var(--y,0));transition:transform .28s,opacity .2s}
.hdr-burger span:nth-child(1){--y:-6px}.hdr-burger span:nth-child(3){--y:6px}
.hdr-burger.is-open span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.hdr-burger.is-open span:nth-child(2){opacity:0}
.hdr-burger.is-open span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
@media (min-width:1001px){.hdr-nav{display:flex}.hdr-burger{display:none}}
.hdr-menu{position:fixed;inset:0;z-index:99;background:var(--bg);color:var(--fg);padding:calc(96px + var(--camp-h,0px)) 24px 30px;display:flex;flex-direction:column;gap:4px}
.hdr-menu a{font-family:var(--font-display);font-weight:300;font-size:36px;text-decoration:none;padding:8px 0}
.hdr-menu small{font-family:var(--font-body);font-size:13px;color:var(--muted);margin-top:auto;display:grid;gap:8px}
body.menu-open .hdr{color:var(--fg)}

/* hero */
.sec-hero{padding:0!important}
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;color:#FBFAF7}
.hero .cp-img{position:absolute;inset:-4%;z-index:-2;animation:zn-drift 38s ease-in-out infinite alternate}
@keyframes zn-drift{to{transform:scale(1.1) translateY(-1.5%)}}
.hero .veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% 62%,rgba(14,20,26,.06),rgba(14,20,26,.62))}
.hero .inner{padding:120px 22px 130px;max-width:940px}
.hero .label{color:#E4EDEB}
.hero h1{font-size:clamp(46px,12vw,104px);margin:4px 0 20px}
.hero p{font-size:17px;opacity:.92;max-width:46ch;margin:0 auto 26px}
.hero .live{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.04em;opacity:1;margin-bottom:26px}
.hero .live i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;animation:zn-pulse 2.4s ease-in-out infinite}
@keyframes zn-pulse{50%{opacity:.35;transform:scale(.8)}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
html.hero-compact .hero{min-height:74svh}

/* signature: full-screen scenes that slowly fade into each other */
.sec-facilities{padding:0!important}
.scenes{position:relative;height:calc(var(--n,3) * 100svh + 20svh)}
.scenes .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.scenes .sc{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.scenes .sc.on{opacity:1}
.scenes .sc .cp-img{position:absolute;inset:0}
.scenes .sc .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 124px;color:#FBFAF7;text-align:center;text-shadow:0 1px 18px rgba(8,12,16,.5);background:linear-gradient(180deg,transparent,rgba(8,12,16,.42) 32%,rgba(8,12,16,.86))}
.scenes .sc .cap .label{color:#E4EDEB;text-shadow:none}
.scenes .sc .cap h3{font-family:var(--font-display);font-weight:200;font-size:clamp(30px,7.5vw,56px);line-height:1.04;margin-bottom:12px}
.scenes .sc .cap p{max-width:42ch;margin:0 auto;font-size:15.5px;opacity:.9}
.scenes .dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.scenes .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.scenes .dots i.on{background:#fff}
@media (min-width:900px){.scenes .sc .cap{padding-bottom:104px}}
/* while editing every scene is simply shown, one under the other */
body.is-editing .scenes{height:auto}
body.is-editing .scenes .stage{position:relative;height:auto;display:grid;gap:12px}
body.is-editing .scenes .sc{position:relative;opacity:1;min-height:60vh}
body.is-editing .scenes .dots{display:none}

/* offer: alternating blocks */
.blocks{display:grid;gap:56px}
.block{position:relative;display:grid;gap:20px;align-items:center}
.block .cp-img{aspect-ratio:4/3;border-radius:var(--radius)}
.block h3{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,6vw,40px);line-height:1.05;margin-bottom:10px}
.block p{color:var(--muted);font-size:15.5px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.block .go{display:inline-block;margin-top:16px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-ink,var(--primary));border-bottom:1px solid currentColor;padding-bottom:3px}
#site .block .cp-page-link{background:none}
#site .block .cp-page-link::after{content:"";position:absolute;inset:0;opacity:1}
#site .blocks.cp-cap{display:grid}
@media (min-width:900px){.block{grid-template-columns:1fr 1fr;gap:48px}.block:nth-child(even) .cp-img{order:2}.blocks{gap:80px}}

/* in numbers */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 20px;padding:56px 0 0;margin-top:48px;border-top:1px solid var(--line)}
.stats b{display:block;font-size:clamp(42px,11vw,72px);line-height:1}
.stats span{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}

/* calendar */
.slots{border-top:1px solid var(--line)}
.slots li{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--line)}
.slots li.is-next::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:2px;background:var(--primary)}
.slots .d{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);grid-column:1}
.slots .t{font-family:var(--font-display);font-weight:300;font-size:27px;grid-column:1;line-height:1.1}
.slots .t em{font-family:var(--font-body);font-style:normal;font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-left:10px;padding:3px 9px;border-radius:999px;background:var(--primary);color:var(--on-primary);vertical-align:4px}
.slots .c{font-size:14.5px;color:var(--muted);grid-column:1}
.slots .v{font-size:12px;color:var(--primary-ink,var(--primary));grid-column:1}
.slots .pick{grid-column:2;grid-row:1/5;min-height:46px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:none;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.slots .pick:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.slots li.is-full .pick{opacity:.4;pointer-events:none}
.sec-trial .note{margin-top:18px;font-size:12.5px;color:var(--muted)}
@media (min-width:760px){.slots li{grid-template-columns:175px 200px 1fr auto auto;gap:18px}.slots .d,.slots .t,.slots .c,.slots .v{grid-column:auto}.slots .pick{grid-column:auto;grid-row:auto}}

/* plans and team react to their own width */
.cq{container-type:inline-size}
.plans{display:grid;gap:16px}
.plan{border:1px solid var(--line);padding:30px 26px;border-radius:var(--radius);background:rgba(255,255,255,.62);display:grid;gap:12px;align-content:start}
.plan.is-hi{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.plan h3{font-family:var(--font-display);font-weight:300;font-size:28px;line-height:1.05}
.plan .price{font-family:var(--font-display);font-weight:200;font-size:46px;line-height:1}
.plan .price small{font-family:var(--font-body);font-size:13.5px;opacity:.65;margin-left:6px}
.plan p{font-size:14.5px;opacity:.85}
.plan .btn{width:100%;margin-top:8px}
.plan.is-hi .btn{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
.plan-note{margin-top:20px;font-size:13px;color:var(--muted);max-width:60ch}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.member{position:relative}
.team .cp-img{aspect-ratio:4/5;border-radius:var(--radius)}
.team h3{font-family:var(--font-display);font-weight:300;font-size:22px;margin-top:14px}
.team p{font-size:13.5px;color:var(--muted)}
#site .member .cp-page-link{background:none}
#site .member .cp-page-link::after{content:"";position:absolute;inset:0;opacity:1}
@container (min-width:640px){.plans{grid-template-columns:repeat(3,1fr);gap:20px}.team{grid-template-columns:repeat(3,1fr);gap:24px}}
@container (min-width:1000px){.team{grid-template-columns:repeat(4,1fr)}}

/* practical */
.prak{display:grid;gap:34px}
.prak .cap{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--primary-ink,var(--primary));display:block;margin-bottom:14px}
.hrs div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-variant-numeric:tabular-nums}
.hrs div span:first-child{color:var(--muted)}
.hrs-status{margin-top:16px;font-size:13px}
.addr{display:grid;gap:10px;font-size:15.5px;justify-items:start}
.addr a{text-underline-offset:3px}
@media (min-width:900px){.prak{grid-template-columns:repeat(3,1fr);gap:44px}}

/* contact */
.contact .cp-form{gap:20px;max-width:560px}
.contact .cp-form label{font-size:11px;letter-spacing:.2em;color:var(--muted)}
.contact .cp-form input,.contact .cp-form select,.contact .cp-form textarea{border-bottom-color:var(--line);min-height:48px}
.contact textarea{min-height:110px;resize:vertical}
.contact .btn{width:auto;justify-self:start}
.row2{display:grid;gap:20px}
@media (min-width:700px){.row2{grid-template-columns:1fr 1fr}}

/* the sub page sits on the same moving light */
#site .cp-sub{background:transparent}

/* footer */
.ftr{padding:62px 0 44px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ftr .wrap{display:grid;gap:26px}
.ftr-logo{font-family:var(--font-display);font-weight:300;font-size:26px;letter-spacing:.04em;color:var(--fg)}
.ftr-addr{margin-top:8px}
.ftr ul{display:grid;gap:4px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--fg)}
.ftr-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);font-size:12px}
@media (min-width:900px){.ftr .wrap{grid-template-columns:2fr 1fr 1fr 1fr}.ftr-bottom{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.hero .cp-img,.hero .live i{animation:none}.scenes .sc{transition:none}}