@font-face{font-family:"Ploni";src:url("../fonts/ploni-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Ploni";src:url("../fonts/ploni-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ploni";src:url("../fonts/ploni-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Ploni";src:url("../fonts/ploni-700.woff2") format("woff2");font-weight:700;font-display:swap}
/* Ploni Yad: the handwritten Ploni (quotes from the testimonials) */
@font-face{font-family:"Ploni Yad";src:url("../fonts/ploni-yad-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Ploni Yad";src:url("../fonts/ploni-yad-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#0a0a0b;
  --ink:#f4f1ea;
  --ink-dim:rgba(244,241,234,.55);
  --ink-soft:rgba(244,241,234,.82);
  --line:rgba(244,241,234,.22);
  --accent:#d2ad6b;
  --pad:clamp(20px,3.2vw,46px);
  --frame:clamp(14px,2vw,28px);
  --display:"Ploni",system-ui,sans-serif;
  --ui:"Ploni",system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-kerning:none;-webkit-font-smoothing:antialiased;user-select:none;
  overscroll-behavior:none;touch-action:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

/* ===== Stage / canvas ===== */
#stage{position:fixed;inset:0;background:#000;overflow:hidden}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block}
/* cinematic darkening so UI/titles stay readable */
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* 1) black layer at 30% opacity (70% transparent) dims the whole image
     2) soft vignette: edges and corners darken gradually, no blur */
  background-color:rgba(0,0,0,.3);
  background-image:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.6) 100%)}

/* ===== Viewfinder frame ===== */
.uiframe{position:fixed;inset:var(--frame);pointer-events:none;z-index:6}
.corner{position:absolute;width:34px;height:34px;border:1.5px solid var(--line)}
.corner.tl{top:0;left:0;border-right:0;border-bottom:0}
.corner.tr{top:0;right:0;border-left:0;border-bottom:0}
.corner.bl{bottom:0;left:0;border-right:0;border-top:0}
.corner.br{bottom:0;right:0;border-left:0;border-top:0}
.edge{position:absolute;background:var(--line)}
.edge.top{top:0;left:50%;transform:translateX(-50%);width:1px;height:18px}
.edge.bottom{bottom:0;left:50%;transform:translateX(-50%);width:1px;height:18px}

/* ===== Top bar ===== */
.topbar{position:fixed;top:var(--pad);left:var(--pad);right:var(--pad);
  display:flex;align-items:center;justify-content:space-between;z-index:8}
.logo{position:relative;z-index:2;display:block;filter:drop-shadow(0 1px 14px rgba(0,0,0,.45))}
.logo img{display:block;height:clamp(32px,3.3vw,44px);width:auto}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* main menu (desktop: one row with dropdowns) */
.mainnav{display:flex;align-items:center;gap:clamp(18px,2vw,32px)}
.menu{list-style:none;display:flex;align-items:center;gap:clamp(14px,1.5vw,26px)}
.menu > li{position:relative}
.menu-link{position:relative;display:inline-flex;align-items:center;gap:5px;padding:8px 0;
  font-size:clamp(14px,1.02vw,16px);letter-spacing:.02em;white-space:nowrap;
  text-shadow:0 1px 18px rgba(0,0,0,.55);transition:color .3s}
.menu-link::after{content:"";position:absolute;inset-inline:0;bottom:3px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.menu-link:not(:hover)::after{transform-origin:left}
.menu-link:hover::after,.has-sub.open > .menu-link::after{transform:scaleX(1)}
.menu-link.on{color:var(--accent)}
.menu-link .chev,.sub-toggle .chev{font-size:14px;opacity:.75;transition:transform .3s var(--ease-out)}
.menu-split{display:inline-flex;align-items:center;gap:2px}
.sub-toggle:not(.menu-link){display:inline-grid;place-items:center;width:22px;height:30px;border-radius:6px;color:inherit}
.sub-toggle:not(.menu-link):hover{background:rgba(244,241,234,.08)}
.has-sub.open .chev{transform:rotate(180deg)}
.submenu{list-style:none;position:absolute;top:100%;inset-inline-start:-18px;min-width:210px;margin-top:10px;padding:8px;
  background:rgba(10,10,11,.9);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s ease, transform .3s var(--ease-out), visibility 0s linear .3s}
.submenu::before{content:"";position:absolute;inset-inline:0;top:-12px;height:12px}  /* hover bridge */
.submenu a{display:block;padding:10px 14px;border-radius:9px;font-size:15px;white-space:nowrap;transition:background .2s, color .2s}
.submenu li{opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .4s var(--ease-out)}
.has-sub.open .submenu li{opacity:1;transform:none;transition-delay:calc(var(--i) * 35ms + 60ms)}
.submenu a{position:relative}
.submenu a:hover{background:rgba(244,241,234,.08)}
.submenu a{transition:background .35s ease, color .35s ease}
.submenu a.on{color:var(--accent)}
.has-sub.open .submenu{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease, transform .3s var(--ease-out)}
@media (hover:hover) and (min-width:1140px){
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;
    transition:opacity .25s ease, transform .3s var(--ease-out)}
  .has-sub:hover .chev{transform:rotate(180deg)}
  .has-sub:hover .submenu li,.has-sub:focus-within .submenu li{opacity:1;transform:none;transition-delay:calc(var(--i) * 35ms + 60ms)}
  .has-sub:hover > .menu-link::after{transform:scaleX(1)}
}
/* with the webinar item on, a desktop row up to 1400px tightens so everything still fits */
@media (min-width:1140px) and (max-width:1399px){
  .has-hot .mainnav{gap:14px}
  .has-hot .menu{gap:11px}
  .has-hot .menu-hot .menu-link{padding:6px 10px;gap:6px}
  .has-hot .campus{padding:9px 12px}
}
/* the webinar item (chrome.js): only while the admin has it on — it stands out from the rest */
.menu-hot .menu-link{color:var(--accent);gap:8px;padding:7px 14px;border:1px solid rgba(210,173,107,.6);border-radius:999px;
  background:rgba(210,173,107,.1)}
.menu-hot .menu-link::after{display:none}
.menu-hot .menu-link:hover{background:rgba(210,173,107,.2);border-color:var(--accent)}
.hot-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.hot-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:hot-ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes hot-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hot-dot::after{animation:none}}
html.a11y-still .hot-dot::after{animation:none}
.campus{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;
  font-size:clamp(14px,1.02vw,16px);white-space:nowrap;color:var(--ink);
  border:1px solid rgba(210,173,107,.7);background:rgba(10,10,11,.35);transition:border-color .9s ease}
.campus .ico{font-size:19px;color:var(--accent);transition:color .3s}
.campus:hover{border-color:var(--accent)}

/* quick contact: a call and a WhatsApp chat — in the nav on wide screens, next to the menu button below 1140px */
.contact{display:flex;gap:8px}
.contact.m{display:none}
.ct{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(210,173,107,.55);background:rgba(10,10,11,.35);color:var(--accent);font-size:18px;transition:border-color .9s ease}
.ct::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:color-mix(in srgb, var(--accent) 30%, #0b0c10);
  transform:scale(0);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.ct:hover::before,.ct:focus-visible::before{transform:scale(1)}
.ct:hover{border-color:var(--accent)}
.ico.fill{fill:currentColor;stroke:none}

/* below 1140px: a menu button opens the same nav as a full-screen panel */
.burger{position:relative;z-index:2;display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:12px;background:rgba(10,10,11,.35);font-size:22px}
.burger .i-close,body.menu-open .burger .i-open{display:none}
body.menu-open .burger .i-close{display:block}
@media (max-width:1139px){
  .burger{display:flex}
  body.menu-open .topbar{z-index:26}
  .mainnav{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--pad) + 84px) calc(var(--pad) + 8px) 40px;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;background:rgba(8,8,10,.97);
    opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
    transition:opacity .35s ease, clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s linear .7s}
  body.menu-open .mainnav{opacity:1;visibility:visible;clip-path:inset(0);transition:opacity .35s ease, clip-path .7s cubic-bezier(.76,0,.24,1)}
  body:not(.menu-open) .mainnav .menu > li,body:not(.menu-open) .mainnav .campus{opacity:0;transform:translateY(18px);transition-delay:0s}
  body.menu-open .mainnav .menu > li,body.menu-open .mainnav .campus{transition-delay:calc(var(--i) * 50ms + 220ms)}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu > li{border-bottom:1px solid var(--line)}
  .menu-link{width:100%;justify-content:space-between;padding:16px 0;font-size:20px}
  .menu-link .chev,.sub-toggle .chev{font-size:18px}
  .menu-split{display:flex;width:100%}
  .menu-split .menu-link{flex:1}
  .sub-toggle:not(.menu-link){width:44px;height:44px}
  .submenu{position:static;display:none;min-width:0;margin:0 0 12px;padding:0;background:none;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none}
  .submenu::before{display:none}
  .has-sub.open .submenu{display:block}
  .submenu a{padding:9px 14px;font-size:17px;color:var(--ink-soft)}
  .campus{margin-top:28px;justify-content:center;padding:14px;font-size:18px}
  .menu-hot{border-bottom:0 !important;padding-top:14px}
  .menu-hot .menu-link{justify-content:center;padding:14px;font-size:19px}
  .contact.d{display:none}
  .contact.m{display:flex;position:relative;z-index:2;margin-inline-start:auto;margin-inline-end:10px}
  .ct{width:44px;height:44px;border-radius:12px;font-size:19px}
}

/* ===== Centred titles ===== */
#titles{position:fixed;inset:0;z-index:4;pointer-events:none}
.title{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 calc(var(--pad) + 60px);
  opacity:0;visibility:hidden;transition:opacity .6s ease, visibility 0s linear .6s}
.title.active{opacity:1;visibility:visible;transition:opacity .6s ease, visibility 0s}

.kicker{font-size:clamp(12px,1.05vw,14px);letter-spacing:.42em;font-weight:400;
  color:var(--ink-soft);margin-bottom:clamp(10px,1.6vw,20px);opacity:0;
  text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 18px rgba(0,0,0,.75);
  transform:translateY(14px);
  transition:transform .9s var(--ease-out) .05s, letter-spacing 1.4s var(--ease-out) .05s, opacity .8s ease .05s}
.kicker b{font-weight:600;letter-spacing:.2em;color:var(--accent)}

.headline{font-family:var(--display);font-weight:700;
  font-size:clamp(46px,min(6.4vw,12vh),124px);line-height:1.02;letter-spacing:-.01em;
  /* a drop-shadow on the whole headline, not a text-shadow: the line masks below
     (overflow:hidden) would cut a text-shadow at their edges into a visible band */
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
/* each line rises out of its own mask */
.headline .line{display:block;overflow:hidden;padding:.08em .06em .1em;margin:-.08em 0 -.1em}
.headline .line > span{display:block;transform:translateY(108%);text-wrap:balance;
  transition:transform 1.1s var(--ease-out)}
.headline .line:nth-child(2) > span{transition-delay:.09s}

.tag,.lead{font-family:var(--ui);font-weight:300;color:var(--ink-soft);
  font-size:clamp(17px,1.75vw,27px);letter-spacing:.06em;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
  opacity:0;transform:translateY(12px);transition:opacity .8s ease .25s, transform 1s var(--ease-out) .25s}
.tag{margin-top:clamp(14px,1.8vw,24px)}
.tag + .cta{margin-top:clamp(20px,2.4vw,32px)}
.lead{margin-bottom:clamp(2px,.6vw,8px)}

.rule{width:54px;height:1px;background:var(--accent);margin:clamp(20px,2.4vw,30px) 0 0;
  transform:scaleX(0);transition:transform .9s var(--ease-out) .2s}

.hero-logo{display:block;width:clamp(150px,15vw,250px);height:auto;overflow:visible;margin-bottom:clamp(14px,2.2vw,30px);
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.55));
  opacity:0;transform:translateY(16px);transition:opacity .9s ease, transform 1.1s var(--ease-out)}

/* outline logos draw their own lines (pathLength=1 on every shape) */
/* stroke widths are in viewBox units (non-scaling strokes would break the pathLength dashes) */
.hero-logo [pathLength]{stroke-width:1.6}
#loader .llogo [pathLength]{stroke-width:1.1}
.draw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1) var(--d,0ms)}
.title.active .draw [pathLength]{stroke-dashoffset:0}
#loader .draw [pathLength]{animation:draw 1.7s cubic-bezier(.65,0,.35,1) var(--d,0ms) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.cta{pointer-events:auto;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(24px,3vw,40px);padding:14px 28px 15px;border-radius:14px;
  font-family:var(--ui);font-size:clamp(16px,1.25vw,19px);font-weight:400;letter-spacing:.06em;
  color:var(--ink);border:1px solid rgba(210,173,107,.75);background:rgba(10,10,11,.4);
  opacity:0;transform:translateY(12px);
  transition:opacity .8s ease .3s, transform 1s var(--ease-out) .3s, border-color .9s ease}
.cta::before,.campus::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:color-mix(in srgb, var(--accent) 30%, #0b0c10);
  transform:scaleX(0);transform-origin:right;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.cta:hover::before,.campus:hover::before{transform:scaleX(1)}
.cta .arrow{font-size:18px}
/* two buttons side by side (scenes 4 and 5); the second arrives a beat after the first */
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(10px,1.2vw,16px);margin-top:clamp(24px,3vw,40px)}
.ctas .cta{margin-top:0}
.title .ctas .cta + .cta{transition-delay:.42s,.42s,0s}
@media (max-width:560px){ .ctas{flex-direction:column;align-items:center} .ctas .cta{padding:13px 22px 14px} }
.cta:hover{border-color:var(--accent)}

.title.active .kicker{transform:none;letter-spacing:.3em;opacity:1}
.title.active .headline .line > span{transform:none}
.title.active .tag,.title.active .lead,.title.active .cta,.title.active .hero-logo{opacity:1;transform:none}
.title.active .rule{transform:scaleX(1)}
/* scene 8: the colour logo between the kicker and the headline, read as part of it */
.s8-logo{display:block;width:clamp(120px,min(11vw,19vh),190px);height:auto;margin:clamp(4px,.8vw,10px) auto clamp(14px,2vw,26px);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.6));
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .9s ease .12s, transform 1.1s var(--ease-out) .12s}
.title.active .s8-logo{opacity:1;transform:none}

/* ===== Side rail (mirrored to the left for RTL) ===== */
.rail{position:fixed;top:50%;left:var(--pad);transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;z-index:8}
.rail .dot{display:flex;align-items:center;gap:12px;padding:7px 0;color:var(--ink-dim);
  transition:color .35s}
.rail .label{display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .35s, transform .35s}
.rail .num{font-size:11px;letter-spacing:.2em;font-weight:400}
.rail .name{font-family:var(--ui);font-size:12px;letter-spacing:.06em;
  opacity:0;transition:opacity .35s}
.rail .bar{position:relative;width:30px;height:1.5px;background:var(--line);overflow:hidden;
  transition:width .45s var(--ease-out), background .35s}
.rail .bar i{position:absolute;top:0;bottom:0;right:0;width:0;background:var(--accent)}
.rail .dot:hover{color:var(--ink)}
.rail .dot:hover .bar{width:40px;background:rgba(244,241,234,.5)}
.rail .dot:hover .label,.rail .dot:hover .name{opacity:1;transform:none}
.rail .dot.on{color:var(--ink)}
.rail .dot.on .bar{width:52px;background:var(--ink)}
.rail .dot.on .label{opacity:1;transform:none}
.rail .dot.waiting .bar{animation:wait 1s ease-in-out infinite}
@keyframes wait{50%{opacity:.35}}

/* ===== Bottom bar ===== */
.bottombar{position:fixed;bottom:var(--pad);left:var(--pad);right:var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;z-index:8;pointer-events:none}
.counter{display:flex;align-items:baseline;gap:6px;font-weight:600}
.counter .cur{display:inline-grid;overflow:hidden;font-size:clamp(40px,5vw,68px);line-height:.8;letter-spacing:-.03em;padding-top:.06em}
.counter .cur .n{grid-area:1/1;transition:transform .7s var(--ease-out), opacity .5s ease}
.counter .cur .n.in{transform:translateY(100%);opacity:0}
.counter .cur .n.out{transform:translateY(-100%);opacity:0}
.counter .tot{font-size:14px;color:var(--ink-dim);letter-spacing:.1em}
.scrollhint{position:absolute;left:50%;bottom:6px;translate:-50% 0;
  display:flex;flex-direction:column-reverse;align-items:center;gap:10px;font-family:var(--ui);
  font-size:12px;letter-spacing:.3em;text-shadow:0 1px 18px rgba(0,0,0,.5);transition:opacity .6s}
/* centred at the bottom, the mouse above the word; the letter-spacing trails the last letter, so pull it back */
.scrollhint span:first-child{margin-inline-end:-.3em}
.scrollhint .mouse{width:20px;height:32px;border:1.5px solid rgba(255,255,255,.7);
  border-radius:11px;position:relative}
.scrollhint .mouse::after{content:"";position:absolute;top:6px;left:50%;
  transform:translateX(-50%);width:2px;height:6px;background:var(--ink);border-radius:2px;
  animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}
  70%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
body[data-stage="9"] .scrollhint{opacity:0}

/* ===== Shutter + flash ===== */
#shutter{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
#flash{position:fixed;inset:0;z-index:5;pointer-events:none;background:#fff;opacity:0}
#flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.22}100%{opacity:0}}

/* ===== Loader ===== */
#loader{position:fixed;inset:0;z-index:30;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .8s ease}
#loader.hide{opacity:0;pointer-events:none}
#loader .llogo{height:44px;width:auto;opacity:.92}
#loader .lbar{width:min(260px,52vw);height:1.5px;background:var(--line);overflow:hidden}
#loader .lbar i{display:block;height:100%;width:0%;background:var(--accent);transition:width .25s}
#loader .lpct{font-size:11px;letter-spacing:.3em;color:var(--ink-dim)}

@media (max-width:680px){
  .scrollhint span:first-child{display:none}
  .rail{left:calc(var(--frame) + 6px)}
  .rail .dot{padding:6px 0}
  .rail .bar{width:18px}
  .rail .dot.on .bar{width:30px}
  .rail .label{display:none}
  .title{padding:0 calc(var(--frame) + 40px)}
  .headline{font-size:clamp(30px,9.4vw,54px)}
  .tag,.lead{font-size:17px}
}

/* touch screens: a swipe cue instead of the mouse */
@media (pointer:coarse){
  .scrollhint .mouse{width:1.5px;height:34px;border:0;border-radius:0;background:rgba(255,255,255,.3)}
  .scrollhint .mouse::after{top:auto;bottom:0;width:3px;height:10px;animation:swipe 1.8s ease-in-out infinite}
  @keyframes swipe{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-24px)}}
}

@media (prefers-reduced-motion:reduce){
  .headline .line > span,.kicker,.tag,.lead,.cta,.hero-logo,.s8-logo,.rule{transition-duration:.01s !important}
  .scrollhint .mouse::after{animation:none}
}

/* ===== Entrance (body.pre is removed when the loader fades) ===== */
.logo,.menu > li,.campus,.contact,.burger,.bottombar,.corner,.edge{
  transition:opacity .8s ease calc(var(--i, 0) * 55ms + 200ms), transform 1s var(--ease-out) calc(var(--i, 0) * 55ms + 200ms), color .4s, border-color .9s ease}
body.pre .logo,body.pre .burger,body.pre .contact{opacity:0;transform:translateY(-10px)}
body.pre .menu > li,body.pre .campus{opacity:0;transform:translateY(-10px)}
body.pre .bottombar{opacity:0;transform:translateY(12px)}
body.pre .corner{opacity:0;transform:scale(.4)}
body.pre .edge{opacity:0}
.corner.tl{transform-origin:top left}.corner.tr{transform-origin:top right}
.corner.bl{transform-origin:bottom left}.corner.br{transform-origin:bottom right}
.rail .dot{transition:color .35s, opacity .6s ease calc(var(--i, 0) * 45ms + 350ms), transform .8s var(--ease-out) calc(var(--i, 0) * 45ms + 350ms)}
body.pre .rail .dot{opacity:0;transform:translateX(-14px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s !important;animation-duration:.01s !important;transition-delay:0s !important}
}

/* ===== Scene 7: lines from the testimonials, in frosted glass floating around the headline ===== */
.proof{position:absolute;inset:0;list-style:none;pointer-events:none}
.proof li{position:absolute;width:clamp(170px,15vw,236px);opacity:0;transform:translateY(26px) scale(.94);
  transition:opacity .9s ease calc(.5s + var(--k, 0) * .15s), transform 1.3s var(--ease-out) calc(.5s + var(--k, 0) * .15s)}
.title.active .proof li{opacity:1;transform:none}
.proof .p1{top:21%;right:calc(var(--pad) + 40px)}
.proof .p2{top:25%;left:calc(var(--pad) + 120px)}
.proof .p3{bottom:21%;right:calc(var(--pad) + 130px)}
.proof .p4{bottom:25%;left:calc(var(--pad) + 160px)}
.proof .p5{top:43%;right:calc(var(--pad) + 64px)}   /* clear of the accessibility button on the edge */
.proof figure{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:15px 18px 14px;border-radius:18px;text-align:start;
  border:1px solid rgba(255,255,255,.16);background:linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 60%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 44px rgba(0,0,0,.35);
  animation:proof-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate}
.proof p{font-family:"Ploni Yad",var(--ui);font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1.1;color:var(--accent)}
.proof figure > span{font-size:12px;letter-spacing:.1em;color:var(--ink-soft)}
@keyframes proof-float{from{transform:translateY(-5px) rotate(calc(var(--rot, 0deg) * -1))}to{transform:translateY(5px) rotate(var(--rot, 0deg))}}
@media (max-width:760px){
  .proof .p1,.proof .p2,.proof .p4{display:none}
  .proof .p5{top:14%;left:auto;right:calc(var(--frame) + 24px);margin:0}
  .proof li{width:auto;max-width:62vw}
  .proof .p1{top:14%;right:calc(var(--frame) + 24px)}
  .proof .p3{bottom:15%;right:auto;left:calc(var(--frame) + 24px)}
  .proof p{font-size:22px}
}
@media (prefers-reduced-motion:reduce){ .proof figure{animation:none} }

/* ===== Lead form (js/form.js): a frosted card; step 1 the details, step 2 "a little more", then thanks ===== */
.leadform{pointer-events:auto;position:relative;width:min(560px,100%);padding:clamp(20px,2.2vw,30px);border-radius:24px;text-align:start;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.03) 60%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.35)}
.lead-step{display:flex;flex-direction:column;gap:14px;transition:opacity .26s ease, transform .4s var(--ease-out)}
.leadform.swap .lead-step{opacity:0;transform:translateY(8px)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* floating labels */
.lf{position:relative}
.lf input,.lf select{width:100%;height:54px;padding:20px 14px 6px;border-radius:12px;font:inherit;font-size:16px;color:var(--ink);
  border:1px solid var(--line);background:rgba(10,10,11,.4);outline:none;transition:border-color .3s ease, background-color .3s ease;
  -webkit-appearance:none;appearance:none}
.lf input[dir="ltr"]{text-align:right}
.lf input:focus,.lf select:focus{border-color:var(--accent);background:rgba(10,10,11,.55)}
.lf label{position:absolute;inset-inline-start:15px;top:17px;font-size:15px;color:var(--ink-dim);pointer-events:none;
  transform-origin:right top;transition:transform .25s var(--ease-out), color .25s ease}
.lf input:focus + label,.lf input:not(:placeholder-shown) + label,.lf-select label{transform:translateY(-10px) scale(.78);color:var(--accent)}
.lf input[aria-invalid="true"]{border-color:#e39a85}
.lf-err{min-height:0;margin-top:4px;font-size:12.5px;color:#e39a85}
.lf-err:empty{display:none}
/* spam trap: off-screen, out of the tab order, hidden from screen readers */
/* the honeypot: not rendered — browsers don't autofill what isn't there (js/form.js) */
.lead-hp{display:none}
.lead-consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.lead-consent input{position:absolute;opacity:0;width:1px;height:1px}
.lead-consent .box{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1px solid var(--line);
  color:transparent;font-size:14px;transition:background-color .25s ease, border-color .25s ease, color .25s ease}
.lead-consent input:checked + .box{background:var(--accent);border-color:var(--accent);color:#14110b}
.lead-consent input:focus-visible + .box{outline:1px solid var(--accent);outline-offset:3px}
.leadform .cta.lead-send{margin-top:2px;opacity:1;transform:none;align-self:stretch;justify-content:center;border-color:var(--accent)}
.leadform .cta.lead-send::before{transform:scaleX(1)}
.leadform .cta.lead-send.busy{opacity:.6;pointer-events:none}
.lead-note{font-size:12.5px;color:var(--ink-dim);text-align:center}
.lead-msg:empty{display:none}
.lead-msg{font-size:14px;color:#e39a85;text-align:center}
.lead-title{font-size:clamp(19px,1.5vw,23px);font-weight:600;line-height:1.3}
.lead-sub{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:-6px}
/* step 2: answers as pills */
.lp{border:0;padding:0;margin:0;min-width:0}
.lp legend{margin-bottom:8px;font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}
.lp-opts{display:flex;flex-wrap:wrap;gap:7px}
.lp label{cursor:pointer}
.lp input{position:absolute;opacity:0;width:1px;height:1px}
.lp span{display:inline-block;padding:7px 13px 8px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--ink-soft);
  background:rgba(10,10,11,.35);transition:border-color .25s ease, background-color .25s ease, color .25s ease}
.lp label:hover span{border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
.lp input:checked + span{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb, var(--accent) 26%, #0b0c10)}
.lp input:focus-visible + span{outline:1px solid var(--accent);outline-offset:2px}
.lead-actions{display:flex;align-items:center;gap:16px}
.lead-actions .cta.lead-send{flex:1}
.lead-skip{padding:12px 6px;font-size:15px;color:var(--ink-dim);text-decoration:underline;text-underline-offset:4px}
.lead-skip:hover{color:var(--ink)}
.lead-done{align-items:center;text-align:center;padding:14px 0 8px;outline:none}
.lead-tick{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#14110b;font-size:26px}
@media (max-width:560px){
  .lead-grid{grid-template-columns:1fr;gap:10px}
  .lf input,.lf select{height:50px}
}

/* ===== Home, the last scene: a word on one side, the form on the other ===== */
.title.contact-scene{flex-direction:row;align-items:center;justify-content:center;gap:clamp(30px,5vw,90px);text-align:start}
.contact-scene .cs-text{display:flex;flex-direction:column;align-items:flex-start;max-width:440px}
.contact-scene .headline{font-size:clamp(40px,min(5vw,10vh),96px)}
.contact-scene .leadform{opacity:0;transform:translateY(16px);transition:opacity .9s ease .35s, transform 1.1s var(--ease-out) .35s}
.title.active .leadform{opacity:1;transform:none}
body[data-stage="8"] #stage::after{background-color:rgba(0,0,0,.55)}
body[data-stage="9"] #stage::after{background-color:rgba(0,0,0,.72)}
#stage::after{transition:background-color 1s ease}
@media (max-width:900px){
  .title.contact-scene{flex-direction:column;gap:18px;text-align:center;padding-top:calc(var(--pad) + 70px);padding-bottom:calc(var(--pad) + 40px);justify-content:center}
  .contact-scene .cs-text{align-items:center}
  .contact-scene .headline{font-size:clamp(32px,9vw,52px)}
  .contact-scene .tag{display:none}
  .contact-scene .leadform{max-height:calc(100dvh - var(--pad) * 2 - 190px);overflow-y:auto;overscroll-behavior:contain}
}

/* ===== Footer (js/chrome.js): contact, legal pages, social — the end of every page, the home page's last scene ===== */
.sitefoot{position:relative;z-index:4;color:var(--ink)}
.sf-inner{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:clamp(22px,3vw,44px);align-items:start;max-width:1100px;margin:0 auto}
.sf-logo{display:inline-block}
.sf-logo img{display:block;height:clamp(34px,3vw,42px);width:auto}
.sf-col h2{margin-bottom:12px;font-size:12px;font-weight:400;letter-spacing:.24em;color:var(--accent)}
.sf-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sf-col a{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:var(--ink-soft);transition:color .3s ease}
.sf-col a:hover{color:var(--ink)}
.sf-col a .ico{font-size:16px;color:var(--accent)}
.sf-col a[aria-current="page"]{color:var(--accent)}
/* "הגדרות עוגיות" opens the consent (js/consent.js) — a button that reads like the links beside it */
.sf-col .sf-ck{padding:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink-soft);cursor:pointer;transition:color .3s ease}
.sf-col .sf-ck:hover{color:var(--ink)}
.sf-col .sf-ck:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.sf-col .sf-social{flex-direction:row;gap:10px}
.sf-col .sf-social .ct{display:grid;place-items:center;gap:0;width:40px;height:40px}
.sf-legal{max-width:1100px;margin:clamp(24px,3vw,36px) auto 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-dim);text-align:center}
@media (max-width:900px){
  .sf-inner{grid-template-columns:1fr 1fr;text-align:start}
  .sf-logo{grid-column:1 / -1}
}
@media (max-width:520px){
  .sf-inner{grid-template-columns:1fr}
}
/* home: the footer is the last scene, in a frosted panel */
.title.footer-scene{padding-top:calc(var(--pad) + 80px);padding-bottom:calc(var(--pad) + 70px)}
.footer-scene .headline{font-size:clamp(34px,min(4.4vw,9vh),84px);margin-bottom:clamp(18px,2.4vw,32px)}
.footer-scene .sitefoot{pointer-events:auto;width:min(1040px,100%);padding:clamp(22px,3vw,40px);border-radius:24px;text-align:start;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 60%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.35);
  opacity:0;transform:translateY(16px);transition:opacity .9s ease .2s, transform 1.1s var(--ease-out) .2s}
.title.footer-scene.active .sitefoot{opacity:1;transform:none}
@media (max-width:900px){ .footer-scene .sitefoot{max-height:calc(100dvh - var(--pad) * 2 - 150px);overflow-y:auto;overscroll-behavior:contain} }

/* ===== Skip link ===== */
.skip-link{position:fixed;top:-80px;right:16px;z-index:60;padding:10px 18px;border-radius:10px;background:var(--accent);color:#14110b;font-weight:600;transition:top .2s ease}
.skip-link:focus{top:16px}
main:focus{outline:none}

/* ===== Accessibility menu (js/a11y.js) ===== */
.a11y-btn{position:fixed;right:var(--frame);top:50%;translate:0 -50%;z-index:24;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(210,173,107,.55);background:rgba(10,10,11,.6);color:var(--accent);font-size:22px;transition:border-color .3s ease, background-color .3s ease}
.a11y-btn:hover,.a11y-btn[aria-expanded="true"]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 22%, #0b0c10)}
.a11y-panel{position:fixed;right:calc(var(--frame) + 56px);top:50%;translate:0 -50%;z-index:40;width:min(340px, calc(100vw - var(--frame) * 2 - 64px));
  padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(12,12,14,.97);color:#f4f1ea;
  box-shadow:0 24px 70px rgba(0,0,0,.55);font-family:var(--ui);text-align:start}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.a11y-head h2{font-size:18px;font-weight:600}
.a11y-close{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:18px;color:#f4f1ea}
.a11y-close:hover{background:rgba(255,255,255,.08)}
.a11y-size{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.a11y-size span{flex:1;font-size:14px}
.a11y-size button{width:38px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.2);font-size:15px;font-weight:600;color:#f4f1ea}
.a11y-size button:disabled{opacity:.35;cursor:default}
.a11y-size output{min-width:5.5em;text-align:center;font-size:13px;color:#d2ad6b}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  font-size:13.5px;line-height:1.3;color:#f4f1ea;text-align:center;transition:border-color .25s ease, background-color .25s ease}
.a11y-opt .ico{font-size:22px;color:#d2ad6b}
.a11y-opt:hover{border-color:rgba(210,173,107,.6)}
.a11y-opt[aria-pressed="true"]{border-color:#d2ad6b;background:rgba(210,173,107,.2)}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:14px}
.a11y-reset{color:#f4f1ea;text-decoration:underline;text-underline-offset:4px}
.a11y-foot a{color:#d2ad6b;text-decoration:underline;text-underline-offset:4px}
@media (max-width:680px){
  .a11y-btn{width:40px;height:40px;font-size:20px}
  .a11y-panel{right:var(--frame);left:var(--frame);top:auto;bottom:var(--frame);translate:none;width:auto}
}

/* the choices (classes on <html>) */
html[data-a11y-text="1"] :is(#content, .sitefoot, .title > *){zoom:1.15}
html[data-a11y-text="2"] :is(#content, .sitefoot, .title > *){zoom:1.3}
html.a11y-contrast body{--bg:#000 !important;--ink:#fff !important;--ink-soft:#fff !important;--ink-dim:#ececec !important;
  --line:rgba(255,255,255,.75) !important;--accent:#ffd84d !important;--glass:#000 !important;--tint:#000 !important;background:#000 !important}
html.a11y-contrast #bloom{display:none}
html.a11y-contrast #stage::after{background-color:rgba(0,0,0,.85) !important}
html.a11y-contrast :is(.rc-glass, .leadform, .plan, .card, .fact, .b-check, .b-callout, .b-table, .tl-card, .tl-chip, .cal-s, .proof figure, .sitefoot, .next-card){
  background:#000 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;border-color:#fff !important}
html.a11y-gray{filter:grayscale(1)}
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px;outline:1px dashed rgba(255,216,77,.8);outline-offset:2px}
html.a11y-font body, html.a11y-font body *:not(svg, svg *){font-family:Arial, "Helvetica Neue", Helvetica, sans-serif !important}
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
html.a11y-cursor, html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5 19 10l-6.3 2.1L10.4 19z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 7 4, auto !important}
html.a11y-focus :focus{outline:3px solid #ffd84d !important;outline-offset:3px !important}