@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/NotoSerifHebrew-hebrew-400-700.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/NotoSerifHebrew-latin-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Assistant-hebrew-400-700.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Assistant-latin-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--linen:#F4F0E8;--stone:#E6E0D3;--ink:#16221E;--pine:#1D4A3E;--pine-d:#143329;--sage:#B3C3A8;--sage-d:#6F8767;--line:#cfc8b8;--r:22px;--ease:cubic-bezier(.77,0,.175,1);--out:cubic-bezier(.23,1,.32,1);--vt-dur:.78s;--ox:50%;--oy:50%}
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 1.125rem/1.75 'Assistant',system-ui,sans-serif;color:var(--ink);background:var(--linen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .13 0 0 0 0 .11 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
h1,h2,h3{font-family:'Noto Serif Hebrew',serif;font-weight:600;line-height:1.2;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem)}h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}h3{font-size:1.4rem}
p{max-width:62ch;text-wrap:pretty}
a{color:inherit}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:1rem;top:-4rem;background:var(--pine);color:#fff;padding:.7rem 1rem;border-radius:10px;z-index:100}
.skip:focus{top:1rem}
.demo{background:var(--ink);color:var(--linen);text-align:center;font-size:1rem;padding:.4rem 1rem;line-height:1.4}
.demo b{font-weight:700;color:var(--sage)}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
header.top{position:sticky;top:0;z-index:50;background:var(--linen);border-bottom:1px solid var(--line);view-transition-name:hdr}
.bar{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;font-family:'Noto Serif Hebrew',serif;font-weight:700;font-size:1.3rem;line-height:1.1}
.brand small{display:block;font:400 1rem 'Assistant';color:#44524c;margin-top:.15rem}
.brand svg{flex:none}
nav.main{margin-inline-start:auto}
nav.main ul{display:flex;gap:.3rem;align-items:center}
nav.main a{display:block;padding:.6rem .95rem;text-decoration:none;border-radius:999px;font-weight:600;min-height:44px;line-height:1.75}
nav.main a:hover{background:var(--stone)}
nav.main a[aria-current=page]{background:var(--pine);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--pine);color:#fff;border:2px solid var(--pine);padding:.8rem 1.5rem;border-radius:999px;font:700 1.0625rem/1.4 'Assistant';text-decoration:none;cursor:pointer;min-height:48px;transition:background .25s,color .25s,transform .25s var(--out)}
.btn:hover{background:var(--pine-d);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--pine)}
.btn.ghost:hover{background:var(--pine);color:#fff}
.menu-btn{display:none;margin-inline-start:auto;background:none;border:2px solid var(--pine);border-radius:12px;width:48px;height:48px;cursor:pointer;color:var(--pine)}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative;margin:auto;transition:transform .3s var(--out),background .2s}
.menu-btn span:before,.menu-btn span:after{content:"";position:absolute;inset-inline-start:0}
.menu-btn span:before{top:-7px}.menu-btn span:after{top:7px}
.menu-btn[aria-expanded=true] span{background:transparent}
.menu-btn[aria-expanded=true] span:before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
 .menu-btn{display:block}
 .bar>.btn{display:none}
 nav.main{position:absolute;inset-inline:0;top:100%;background:var(--linen);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.2rem;display:none;margin:0}
 nav.main.open{display:block;animation:drop .35s var(--out)}
 nav.main ul{flex-direction:column;align-items:stretch}
 nav.main a{padding:.8rem 1rem;border-radius:14px}
}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
main{flex:1}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.eyebrow{display:inline-block;font-weight:700;color:var(--pine);border-bottom:2px solid var(--sage);padding-bottom:.1rem;margin-bottom:1.1rem;font-size:1.0625rem}
/* hero */
.hero{padding-top:clamp(2.5rem,6vw,5rem)}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1 em{font-style:normal;color:var(--pine);background:linear-gradient(transparent 62%,var(--sage) 62% 92%,transparent 92%)}
.hero p.lead{font-size:1.3rem;margin:1.5rem 0 2rem;color:#2c3a35}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap}
.arch{position:relative;aspect-ratio:5/6;background:var(--sage);border-radius:999px 999px 26px 26px;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 10px var(--linen),0 0 0 12px var(--sage-d)}
.arch svg{width:92%;height:auto}
.arch .tag{position:absolute;inset-inline:1.2rem;bottom:1.2rem;background:var(--linen);border-radius:16px;padding:.8rem 1rem;font-size:1rem;line-height:1.45}
.arch .tag b{display:block;font-size:1.05rem;color:var(--pine)}
.draw path.l{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) .5s forwards}
.draw path.l2{animation-delay:.9s}.draw path.l3{animation-delay:1.9s;animation-duration:1.8s}
.draw circle{opacity:0;animation:pop .6s var(--out) 3.4s forwards;transform-box:fill-box;transform-origin:center}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}.arch{max-width:420px;margin-inline:auto;width:100%}}
/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.5rem}
.card{display:flex;flex-direction:column;background:#fbf9f4;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem;text-decoration:none;min-height:260px;transition:transform .45s var(--out),background .3s,border-color .3s}
.card:hover{transform:translateY(-6px) rotate(-.4deg);background:#fff;border-color:var(--pine)}
.card .ico{width:54px;height:54px;border-radius:16px;background:var(--stone);display:grid;place-items:center;margin-bottom:1.2rem;color:var(--pine)}
.card h3{margin-bottom:.6rem}
.card p{font-size:1.0625rem;color:#34423c}
.card .more{margin-top:auto;padding-top:1rem;font-weight:700;color:var(--pine)}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.card{min-height:0}}
.band{background:var(--pine);color:var(--linen)}
.band .eyebrow{color:var(--sage);border-color:var(--sage-d)}
.band a{color:var(--linen)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.6rem;counter-reset:s}
.steps li{position:relative;padding-top:4.2rem}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;top:0;inset-inline-start:0;font:600 3.6rem/1 'Noto Serif Hebrew',serif;color:var(--sage)}
.steps li:after{content:"";position:absolute;top:1.8rem;inset-inline-start:3.4rem;inset-inline-end:-1rem;height:2px;background:var(--sage-d);transform-origin:right;transform:scaleX(0);transition:transform 1.2s var(--ease) .3s}
.steps.in li:after{transform:none}
.steps li:last-child:after{display:none}
.steps h3{margin-bottom:.5rem}
.steps p{color:#d9e2d6;font-size:1.0625rem}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:2rem}.steps li:after{display:none}}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
figure.q{background:var(--stone);border-radius:var(--r);padding:1.7rem;display:flex;flex-direction:column;gap:1rem}
figure.q blockquote{font:500 1.2rem/1.65 'Noto Serif Hebrew',serif}
figure.q figcaption{margin-top:auto;font-size:1rem;color:#3a4944}
figure.q figcaption b{color:var(--ink)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.cta-end{text-align:center}
.cta-end p{margin:1rem auto 2rem}
/* page head */
.phead{padding:clamp(3rem,7vw,5.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.phead p{font-size:1.25rem;margin-top:1.2rem;color:#2c3a35}
/* areas */
.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin:2rem 0 1.4rem}
.chip{border:2px solid var(--pine);background:transparent;color:var(--pine);border-radius:999px;padding:.45rem 1.1rem;font:700 1.0625rem 'Assistant';cursor:pointer;min-height:44px;transition:background .25s,color .25s}
.chip:hover{background:var(--stone)}
.chip[aria-pressed=true]{background:var(--pine);color:#fff}
.acc{display:grid;gap:.8rem}
.acc details{background:#fbf9f4;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .3s,background .3s}
.acc details[open]{border-color:var(--pine);background:#fff}
.acc details[hidden]{display:none}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;min-height:72px}
.acc summary::-webkit-details-marker{display:none}
.acc summary h2{font-size:1.35rem;flex:1}
.acc summary small{display:block;font:400 1rem 'Assistant';color:#44524c;margin-top:.2rem}
.acc .plus{width:40px;height:40px;border-radius:50%;border:2px solid var(--pine);position:relative;flex:none;transition:transform .45s var(--out),background .3s}
.acc .plus:before,.acc .plus:after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:2px;background:var(--pine);transition:background .3s}
.acc .plus:after{transform:rotate(90deg)}
.acc details[open] .plus{transform:rotate(135deg);background:var(--pine)}
.acc details[open] .plus:before,.acc details[open] .plus:after{background:#fff}
.acc .body{padding:0 1.5rem 1.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.acc .body h3{font:700 1.0625rem 'Assistant';color:var(--pine);margin-bottom:.35rem}
.acc .body p{font-size:1.0625rem}
@media(max-width:800px){.acc .body{grid-template-columns:1fr;gap:1rem}}
.note{margin-top:2rem;padding:1.2rem 1.4rem;border-inline-start:4px solid var(--sage-d);background:var(--stone);border-radius:0 14px 14px 0;font-size:1.0625rem}
/* process timeline */
.tl{position:relative;display:grid;gap:3rem;padding-inline-start:4.2rem;margin-top:2rem}
.tl:before{content:"";position:absolute;inset-inline-start:1.3rem;top:.5rem;bottom:.5rem;width:3px;background:var(--line)}
.tl .prog{position:absolute;inset-inline-start:1.3rem;top:.5rem;width:3px;background:var(--pine);height:0;max-height:calc(100% - 1rem);transition:height .15s linear}
.tl li{position:relative}
.tl li .n{position:absolute;inset-inline-start:-4.2rem;top:0;width:44px;height:44px;border-radius:50%;background:var(--linen);border:3px solid var(--line);display:grid;place-items:center;font:700 1.15rem 'Noto Serif Hebrew';transition:background .4s,border-color .4s,color .4s}
.tl li.on .n{background:var(--pine);border-color:var(--pine);color:#fff}
.tl h2{margin-bottom:.4rem;font-size:1.4rem}
.tl .meta{display:inline-block;font-weight:700;color:var(--pine);font-size:1.0625rem;margin-bottom:.4rem}
.faq{display:grid;gap:.7rem;max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq summary{cursor:pointer;font:600 1.2rem 'Noto Serif Hebrew';list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 1.8rem 'Assistant';color:var(--pine);transition:transform .35s var(--out)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{padding-top:.5rem}
/* about */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.person{background:#fbf9f4;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.mono{width:84px;height:84px;border-radius:50% 50% 14px 14px;background:var(--sage);display:grid;place-items:center;font:600 2rem 'Noto Serif Hebrew';color:var(--pine-d);margin-bottom:1.1rem}
.person:nth-child(2) .mono{background:var(--stone)}
.person:nth-child(3) .mono{background:var(--pine);color:var(--linen)}
.person h3{font-size:1.3rem}
.person .role{color:#44524c;font-size:1.0625rem;margin-bottom:.6rem}
@media(max-width:900px){.team{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.2rem}
.values h3{margin-bottom:.5rem;border-top:3px solid var(--sage);padding-top:1rem}
@media(max-width:800px){.values{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.pull{font:500 clamp(1.5rem,3vw,2.2rem)/1.5 'Noto Serif Hebrew',serif;color:var(--pine)}
/* booking */
.book>*{min-width:0}
.book{display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;align-items:start}
@media(max-width:900px){.book{grid-template-columns:minmax(0,1fr)}}
form fieldset{min-width:0;border:0;padding:0;margin:0 0 2rem}
legend{font:600 1.3rem 'Noto Serif Hebrew';margin-bottom:.9rem;padding:0}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;align-items:center;gap:.7rem;border:2px solid var(--line);background:#fbf9f4;border-radius:16px;padding:.8rem 1rem;min-height:56px;cursor:pointer;font-weight:600;transition:border-color .25s,background .25s}
.opt span:before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--sage-d);transition:background .25s,box-shadow .25s}
.opt:hover span{border-color:var(--sage-d)}
.opt input:checked+span{border-color:var(--pine);background:#fff}
.opt input:checked+span:before{background:var(--pine);box-shadow:inset 0 0 0 3px #fff}
.opt input:focus-visible+span{outline:3px solid var(--pine);outline-offset:3px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.days{display:flex;gap:.6rem;overflow-x:auto;padding:.3rem .2rem .8rem;scroll-snap-type:x proximity}
.day{flex:none;scroll-snap-align:start;min-width:84px;border:2px solid var(--line);background:#fbf9f4;border-radius:16px;padding:.6rem .5rem;text-align:center;cursor:pointer;font:600 1rem/1.3 'Assistant';min-height:72px;transition:border-color .25s,background .25s,color .25s}
.day b{display:block;font:700 1.5rem/1.2 'Noto Serif Hebrew'}
.day[aria-pressed=true]{background:var(--pine);border-color:var(--pine);color:#fff}
.times{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.time{border:2px solid var(--pine);background:transparent;color:var(--pine);border-radius:999px;padding:.4rem 1.1rem;font:700 1.0625rem 'Assistant';cursor:pointer;min-height:44px}
.time[aria-pressed=true]{background:var(--pine);color:#fff}
.time:disabled{border-color:var(--line);color:#5d6a64;text-decoration:line-through;cursor:not-allowed}
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label{font-weight:700}
.field input,.field textarea{font:400 1.125rem 'Assistant';padding:.8rem 1rem;border:2px solid var(--line);border-radius:14px;background:#fffdf9;color:var(--ink);min-height:52px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--pine);outline-offset:1px;border-color:var(--pine)}
.field [aria-invalid=true]{border-color:#8f2d1f}
.err{color:#8f2d1f;font-weight:600;min-height:1.4em;font-size:1rem}
.check{display:flex;gap:.8rem;align-items:flex-start;margin:1rem 0 1.4rem}
.check input{width:24px;height:24px;margin-top:.25rem;accent-color:var(--pine);flex:none}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.fieldrow{grid-template-columns:1fr}}
.aside{background:var(--pine);color:var(--linen);border-radius:var(--r);padding:1.8rem;position:sticky;top:100px}
.aside h2{font-size:1.5rem;margin-bottom:1rem}
.aside li{padding:.55rem 0;border-bottom:1px solid #36685b;font-size:1.0625rem}
.aside li:last-child{border:0}
.aside dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;margin-top:1rem}
.aside dt{color:var(--sage)}
.aside dd{margin:0;font-weight:600}
.done{display:none;background:#fff;border:2px solid var(--pine);border-radius:var(--r);padding:2rem}
.done.show{display:block;animation:rise .6s var(--out)}
.done h2{margin-bottom:.8rem}
.done dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:1.2rem 0}
.done dt{font-weight:700;color:var(--pine)}
.done dd{margin:0}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
/* footer */
footer.foot{background:var(--ink);color:#d8d3c6;padding:3rem 0 2rem;margin-top:auto}
footer.foot .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
footer.foot h2{font:700 1.1rem 'Assistant';color:var(--sage);margin-bottom:.6rem}
footer.foot a{color:#f0ece2}
footer.foot li{padding:.15rem 0}
footer.foot .small{margin-top:2rem;padding-top:1.2rem;border-top:1px solid #34413c;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:1rem}
footer.foot .credit a{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:4px;font-weight:700}
footer.foot .credit a:hover{text-decoration-color:#fff}
@media(max-width:800px){footer.foot .fgrid{grid-template-columns:1fr}}
/* reveal */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--out),transform .9s var(--out);transition-delay:calc(var(--i,0)*90ms)}
.js [data-r].in{opacity:1;transform:none}
/* page transitions */
::view-transition-group(hdr){animation-duration:0s}
::view-transition-old(hdr){display:none}
::view-transition-group(vt-hero){z-index:60;animation-duration:.7s;animation-timing-function:var(--ease)}
::view-transition-old(vt-hero){animation:.25s ease-in both fadeout}
::view-transition-new(vt-hero){animation:.4s ease-out .2s both fadein}
@keyframes fadeout{to{opacity:0}}@keyframes fadein{from{opacity:0}}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--vt-dur);animation-timing-function:var(--ease);mix-blend-mode:normal}
/* areas: a folder pulled out from the side */
:root:active-view-transition-type(vt-areas):active-view-transition-type(vt-fwd)::view-transition-new(root){z-index:3;animation-name:folder-in;filter:drop-shadow(-24px 0 28px #16221e55)}
:root:active-view-transition-type(vt-areas):active-view-transition-type(vt-fwd)::view-transition-old(root){animation-name:recede-r}
:root:active-view-transition-type(vt-areas):active-view-transition-type(vt-back)::view-transition-old(root){z-index:3;animation-name:folder-out;filter:drop-shadow(-24px 0 28px #16221e55)}
:root:active-view-transition-type(vt-areas):active-view-transition-type(vt-back)::view-transition-new(root){animation-name:come-l}
@keyframes folder-in{from{clip-path:inset(0 100% 0 0 round 0 40px 40px 0);transform:translateX(-12%)}to{clip-path:inset(0 0 0 0 round 0);transform:none}}
@keyframes recede-r{to{transform:translateX(7%) scale(.97);opacity:.5}}
@keyframes folder-out{to{clip-path:inset(0 100% 0 0 round 0 40px 40px 0);transform:translateX(-12%)}}
@keyframes come-l{from{transform:translateX(7%) scale(.97);opacity:.5}}
/* process: a scroll unrolled from the top */
:root:active-view-transition-type(vt-process):active-view-transition-type(vt-fwd)::view-transition-new(root){z-index:3;animation-name:unroll;filter:drop-shadow(0 24px 28px #16221e55)}
:root:active-view-transition-type(vt-process):active-view-transition-type(vt-fwd)::view-transition-old(root){animation-name:lift}
:root:active-view-transition-type(vt-process):active-view-transition-type(vt-back)::view-transition-old(root){z-index:3;animation-name:roll-up;filter:drop-shadow(0 24px 28px #16221e55)}
:root:active-view-transition-type(vt-process):active-view-transition-type(vt-back)::view-transition-new(root){animation-name:settle}
@keyframes unroll{from{clip-path:inset(0 0 100% 0 round 0 0 60px 60px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes lift{to{transform:translateY(3%);opacity:.4}}
@keyframes roll-up{to{clip-path:inset(0 0 100% 0 round 0 0 60px 60px)}}
@keyframes settle{from{transform:translateY(3%);opacity:.4}}
/* about: an iris opening from what was tapped */
:root:active-view-transition-type(vt-about):active-view-transition-type(vt-fwd)::view-transition-new(root){z-index:3;animation-name:iris-in}
:root:active-view-transition-type(vt-about):active-view-transition-type(vt-fwd)::view-transition-old(root){animation-name:dim}
:root:active-view-transition-type(vt-about):active-view-transition-type(vt-back)::view-transition-old(root){z-index:3;animation-name:iris-out}
:root:active-view-transition-type(vt-about):active-view-transition-type(vt-back)::view-transition-new(root){animation-name:undim}
@keyframes iris-in{from{clip-path:circle(0 at var(--ox) var(--oy))}to{clip-path:circle(150% at var(--ox) var(--oy))}}
@keyframes iris-out{to{clip-path:circle(0 at var(--ox) var(--oy))}}
@keyframes dim{to{opacity:.3;transform:scale(.98)}}@keyframes undim{from{opacity:.3;transform:scale(.98)}}
/* booking: a card rising from the bottom */
:root:active-view-transition-type(vt-booking):active-view-transition-type(vt-fwd)::view-transition-new(root){z-index:3;animation-name:card-up;filter:drop-shadow(0 -20px 30px #16221e55)}
:root:active-view-transition-type(vt-booking):active-view-transition-type(vt-fwd)::view-transition-old(root){animation-name:shrink}
:root:active-view-transition-type(vt-booking):active-view-transition-type(vt-back)::view-transition-old(root){z-index:3;animation-name:card-down;filter:drop-shadow(0 -20px 30px #16221e55)}
:root:active-view-transition-type(vt-booking):active-view-transition-type(vt-back)::view-transition-new(root){animation-name:grow}
@keyframes card-up{from{transform:translateY(100%);clip-path:inset(0 round 48px 48px 0 0)}to{transform:none;clip-path:inset(0 round 0)}}
@keyframes shrink{to{transform:scale(.94);opacity:.5}}
@keyframes card-down{to{transform:translateY(100%);clip-path:inset(0 round 48px 48px 0 0)}}
@keyframes grow{from{transform:scale(.94);opacity:.5}}
/* home from somewhere unnamed: fade */
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 .js [data-r]{opacity:1;transform:none}
 .draw path.l{stroke-dashoffset:0}.draw circle{opacity:1}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

.tlwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:start}
.tlwrap>*{min-width:0}
.bring{position:sticky;top:110px;background:var(--stone);border-radius:var(--r);padding:1.8rem}
.bring h2{font-size:1.5rem;margin-bottom:.6rem}
.bring li{padding:.7rem 0;border-top:1px solid var(--line);font-size:1.0625rem}
.bring ul{margin-top:1rem}
@media(max-width:900px){.tlwrap{grid-template-columns:1fr}.bring{position:static}}