/* Inner pages (נופשים, אירועים): the homepage language — cream mesh background, top-bar glass,
   Haim titles, hand-script hero, framed photo cards — arranged for a single event page. */

/* ---------- page palette (day mode): background #DAD7CD, text #3A5A40 — from the sage palette the client chose */
:root:not([data-theme="dark"]):has(.pg-kinar) { background: #DAD7CD; }
:root:not([data-theme="dark"]) .pg-kinar { --num: #3A5A40; --ink: #3A5A40; }
:root:not([data-theme="dark"]) .pg-kinar::before { background: radial-gradient(42% 50% at 10% 12%, #E8E6DF 0%, rgba(232, 230, 223, 0) 62%), radial-gradient(36% 44% at 94% 6%, #CFCCBF 0%, rgba(207, 204, 191, 0) 64%), radial-gradient(55% 55% at 72% 88%, #C9C6B8 0%, rgba(201, 198, 184, 0) 70%), radial-gradient(50% 55% at 32% 66%, #E1DED5 0%, rgba(225, 222, 213, 0) 72%), linear-gradient(135deg, #E4E2DA 0%, #DAD7CD 52%, #CFCCC0 100%); }
:root:not([data-theme="dark"]) .pg-kinar .pg-chips span + span { border-color: rgba(58, 90, 64, .2); }
:root:not([data-theme="dark"]) .pg-kinar .pg-faq details, :root:not([data-theme="dark"]) .pg-kinar .pg-rows div { border-color: rgba(58, 90, 64, .16); }

/* ---------- green block (ממשיכות – יחד): sage-palette gradient panels, light text */
.pg-green .glass { background: linear-gradient(150deg, #588157 0%, #3A5A40 55%, #344E41 100%); border-color: rgba(163, 177, 138, .45); box-shadow: inset 0 1px 0 rgba(218, 215, 205, .25), 0 22px 44px -26px rgba(52, 78, 65, .75); }
.pg-green .pg-h, .pg-green .pg-text, .pg-green .pg-text strong { color: #DAD7CD; }
.pg-green .fc { --frame: #DAD7CD; }
/* single green panels: the same gradient on one title only */
#hFaq small, #hPrice small { color: #DAD7CD; opacity: .9; }
#hPrice .pg-incl { color: #fff; }
#hWhy, #hFaq, #hPrice { background: linear-gradient(150deg, #588157 0%, #3A5A40 55%, #344E41 100%); border-color: rgba(163, 177, 138, .45); box-shadow: inset 0 1px 0 rgba(218, 215, 205, .25), 0 22px 44px -26px rgba(52, 78, 65, .75); color: #DAD7CD; }
.pg-green .fc-top { color: #3A5A40; }

/* caption on a framed photo: a dark green scrim rising from the bottom keeps the light text readable on any image */
.fc-cap { position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-content: center; padding: clamp(60px, 6vw, 80px) clamp(22px, 3vw, 44px) clamp(24px, 3vw, 40px); text-align: center; font: 400 clamp(19px, 1.6vw, 24px)/1.6 var(--body); color: #F4F2EC; text-shadow: 0 1px 12px rgba(20, 35, 28, .6); background: radial-gradient(75% 60% at 50% 55%, rgba(36, 56, 46, .72) 0%, rgba(52, 78, 65, .55) 60%, rgba(52, 78, 65, .35) 100%); }
@media (max-width: 760px) { .fc-cap { font-size: 16px; padding: 52px 16px 18px; } }
.fc-cap { text-wrap: balance; }
/* "התוכנית שלנו, החופשה שלך" stays on one line; it shrinks on narrow screens instead */
#hPlan, #hFaq { white-space: nowrap; }
@media (max-width: 760px) { #hFaq { font-size: 8.4vw; padding-inline: 12px; } #hPlan { font-size: 8.4vw; padding-inline: 12px; } #hPlan small { white-space: normal; } }

/* inner pages: the top bar scrolls away with the page instead of staying fixed */
body.pg-kinar .bar { position: absolute; }

/* ---------- hero: the page's clip, a script title, the key facts on a glass bar, one call to action */
.pg-hero { height: min(55svh, 516px); min-height: 480px; align-content: center; gap: 0; padding: 86px 0 0; box-sizing: border-box; }
.pg-hero .hand { font-size: clamp(72px, 9vw, 144px); line-height: .92; }
.pg-hero .hand { font-family: "HandFull", var(--hand); }
.pg-hero .hero-shade { background: radial-gradient(60% 55% at 50% 50%, rgba(10, 20, 40, .25) 0%, rgba(10, 20, 40, 0) 75%), linear-gradient(180deg, rgba(10, 20, 40, .28) 0%, rgba(10, 20, 40, .12) 45%, rgba(10, 20, 40, .5) 100%); }
/* the script title reads on any frame of the clip */
.pg-hero .hand { text-shadow: 0 2px 4px rgba(1, 20, 40, .55), 0 0 26px rgba(1, 20, 40, .5); }
/* the facts bar and the call to action sit just below the video */
.pg-facts { position: relative; z-index: 2; margin: 0; display: grid; justify-items: center; padding: 12px 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .62) 100%); border-top: 1px solid rgba(255, 255, 255, .95); border-bottom: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .5), 0 18px 40px -26px rgba(30, 45, 80, .5); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.pg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; padding: 0; }
.pg-chips span { padding: 4px 20px; font: 400 clamp(23px, 2.04vw, 29px)/1 var(--title); color: var(--num); white-space: nowrap; }
.pg-chips span + span { border-inline-start: 1px solid rgba(8, 47, 123, .16); }
:root[data-theme="dark"] .pg-chips span + span { border-color: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .pg-facts { background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
/* "last places": its own edge-to-edge band in the join-button palette */
.pg-last { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; font: 400 clamp(22px, 1.9vw, 27px)/1 var(--title); color: #6E1F2E; background: linear-gradient(90deg, #FFC2A6 0%, #F7A08E 50%, #EC8282 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.pg-last i { width: 9px; height: 9px; border-radius: 50%; background: #6E1F2E; box-shadow: 0 0 0 0 rgba(110, 31, 46, .55); animation: hot 1.8s ease-out infinite; }
@keyframes hot { 70%, 100% { box-shadow: 0 0 0 9px rgba(110, 31, 46, 0); } }

/* ---------- photos: each one alone, edge to edge, stacked */
/* every photo spans the full width; each one shorter than the one above it: −20%, −10%, −5% (100% → 80% → 72% → 68.4%) */
.pg-full { --h0: clamp(320px, 42vw, 620px); --blend: clamp(56px, 7vw, 110px); display: grid; gap: 0; overflow-x: clip; }
.pg-full img { display: block; width: 100%; height: var(--h0); object-fit: cover; }
.pg-full img:nth-child(2) { height: calc(var(--h0) * .8); }
.pg-full img:nth-child(3) { height: calc(var(--h0) * .72); }
.pg-full img:nth-child(4) { height: calc(var(--h0) * .684); }
/* no divider: each photo slides up over the one before it and dissolves into it through a soft fade */
.pg-full img + img { position: relative; margin-top: calc(var(--blend) * -1); -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) calc(var(--blend) * .5), #000 var(--blend)); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) calc(var(--blend) * .5), #000 var(--blend)); }
/* the last photo also dissolves at its bottom edge into the page, so the page flows on without a hard line */
.pg-full img:last-child { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) calc(var(--blend) * .5), #000 var(--blend), #000 calc(100% - var(--blend)), rgba(0, 0, 0, .55) calc(100% - var(--blend) * .5), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) calc(var(--blend) * .5), #000 var(--blend), #000 calc(100% - var(--blend)), rgba(0, 0, 0, .55) calc(100% - var(--blend) * .5), transparent 100%); }
@media (max-width: 760px) { .pg-full { --h0: 75vw; --blend: 44px; } }

/* full-bleed photo: edge to edge of the page, whole image, top and bottom edges cut by a soft brush stroke */
.pg-bleed { margin: 0 calc(50% - 50vw); width: 100vw; }
.pg-bleed img { display: block; width: 100%; height: auto; -webkit-mask-image: url(../img/brush-top.svg), linear-gradient(#000, #000), url(../img/brush-bottom.svg); -webkit-mask-size: 100% 34px, 100% calc(100% - 60px), 100% 34px; -webkit-mask-position: top, center, bottom; -webkit-mask-repeat: no-repeat; mask-image: url(../img/brush-top.svg), linear-gradient(#000, #000), url(../img/brush-bottom.svg); mask-size: 100% 34px, 100% calc(100% - 60px), 100% 34px; mask-position: top, center, bottom; mask-repeat: no-repeat; }
@media (max-width: 760px) { .pg-bleed img { -webkit-mask-size: 100% 18px, 100% calc(100% - 32px), 100% 18px; mask-size: 100% 18px, 100% calc(100% - 32px), 100% 18px; } }

/* participation note: a single centred card, narrower than the content */
.pg-note.glass { width: min(900px, 100%); margin-inline: auto; box-sizing: border-box; }

.pg-incl { display: inline-block; margin-top: 6px; font-weight: 400; font-family: var(--title); font-size: 1.15em; color: var(--num); opacity: 1; }

.pg-ask { display: flex; justify-content: center; margin-top: 4px; }
.pg-ask .pg-btn svg { width: 26px; height: 26px; }
.pg-ask .pg-btn { color: #DAD7CD; background: linear-gradient(150deg, #588157 0%, #3A5A40 55%, #344E41 100%); border-color: rgba(163, 177, 138, .45); box-shadow: inset 0 1px 0 rgba(218, 215, 205, .25), 0 14px 28px -16px rgba(52, 78, 65, .8); }
.pg-ask .pg-btn:hover { box-shadow: inset 0 1px 0 rgba(218, 215, 205, .3), 0 18px 32px -16px rgba(52, 78, 65, .9); }
.pg-ask .pg-btn.wa-btn svg { fill: #DAD7CD; }

/* a highlight line that must never break: it shrinks with the screen instead */
.pg-text strong.pg-oneline { white-space: nowrap; font-size: min(1.35em, 5.6vw); }

/* coupon code: rounded Latin face (Heebo bold) in a small pill, the strip stays on one line */
.pg-last { white-space: nowrap; font-size: clamp(17px, 1.9vw, 27px); }
.pg-code { display: inline-flex; align-items: center; gap: 6px; }
.pg-code b, .pg-coupon { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 .78em/1.2 var(--ui); letter-spacing: .08em; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); }
.pg-coupon { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); font-size: .95em; }
.pg-last .pg-code::before { content: "|"; margin-inline-end: 6px; opacity: .45; }

/* ---------- sections */
.pg { width: min(1300px, calc(100% - 32px)); margin-inline: auto; padding-block: clamp(36px, 5vw, 72px) 0; display: grid; gap: clamp(14px, 1.6vw, 24px); }
.pg:last-of-type { padding-bottom: clamp(48px, 6vw, 88px); }
.glass { border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--glass-sh); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.pg-h { margin: 0; padding: clamp(14px, 1.4vw, 20px) clamp(18px, 2.4vw, 36px); font: 400 clamp(40px, 4.6vw, 72px)/1 var(--title); color: var(--num); text-align: center; }
.pg-h small { display: block; margin-top: 8px; font: 400 clamp(18px, 1.6vw, 24px)/1.3 var(--body); color: var(--ink); opacity: .78; }
.pg-text { text-align: center; padding: clamp(22px, 2.6vw, 40px) clamp(20px, 3vw, 48px); font: 400 clamp(17px, 1.3vw, 20px)/1.75 var(--body); color: var(--ink); }
.pg-text p { margin: 0 0 .8em; }
.pg-text p:last-child { margin-bottom: 0; }
.pg-text strong { font-weight: 400; font-family: var(--title); font-size: 1.35em; line-height: 1.2; color: var(--num); display: block; margin-bottom: .35em; }

/* text + framed photo side by side; the photo reuses the homepage card frame */
.pg-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: stretch; }
.pg-split .fc { margin: 0; }
.pg-split .fc-in { aspect-ratio: auto; height: 100%; min-height: 360px; }
.pg-split .fc-top { font-size: clamp(24px, 2.2vw, 32px); }

/* program cards: workshops, trips, shows, lectures — four framed photos in a row (2 x 2 on tablets) */
.pg-trio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.pg-trio .fc { margin: 0; }
.pg-trio .fc-in { aspect-ratio: 4 / 5; }
.pg-trio .fc-top { font-size: clamp(22px, 1.9vw, 30px); padding-inline: 20px; }
@media (max-width: 1100px) { .pg-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fc-ph { position: absolute; inset: 0; z-index: -2; background: linear-gradient(150deg, #A3B18A 0%, #588157 60%, #3A5A40 100%); }
@media (max-width: 760px) {
  /* stacked on phones: full width, each card 10% lower than the one above it (100% → 90% → 81% → 72.9% of a square) */
  .pg-trio { grid-template-columns: 1fr; } .pg-trio .fc-in { aspect-ratio: 1; }
  .pg-trio .fc:nth-child(2) .fc-in { aspect-ratio: 1 / .9; } .pg-trio .fc:nth-child(3) .fc-in { aspect-ratio: 1 / .81; } .pg-trio .fc:nth-child(4) .fc-in { aspect-ratio: 1 / .729; }
}

/* workshop chips */
.pg-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pg-tags li { padding: 10px 18px; border-radius: 10px; font: 400 clamp(20px, 1.7vw, 26px)/1 var(--title); color: var(--num); background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 18px -14px rgba(30, 45, 80, .6); }
:root[data-theme="dark"] .pg-tags li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }

/* reasons: glass tiles like the homepage number tiles */
.pg-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.pg-tile { grid-column: span 2; border-radius: 16px; padding: clamp(20px, 2vw, 30px) clamp(18px, 2vw, 28px); text-align: center; }
.pg-tiles { align-items: start; }
/* 3 per row; a short last row is centred, whatever the count (2 left over → both centred, 1 left over → that one centred).
   FAQ uses the same boxes but drops to 2 per row below 1100px, so it only centres from there up. */
@media (min-width: 761px) {
  .pg-tiles:not(.pg-faq-tiles) > .pg-tile:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .pg-tiles:not(.pg-faq-tiles) > .pg-tile:nth-child(3n+2):last-child { grid-column: 4 / span 2; }
  .pg-tiles:not(.pg-faq-tiles) > .pg-tile:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 1101px) {
  .pg-faq-tiles > .pg-tile:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .pg-faq-tiles > .pg-tile:nth-child(3n+2):last-child { grid-column: 4 / span 2; }
  .pg-faq-tiles > .pg-tile:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
/* a long question wraps (balanced) instead of running under the plus button */
.pg-faq-tiles h3 { font-size: clamp(21px, 1.7vw, 26px); text-wrap: balance; }
@media (min-width: 761px) and (max-width: 1100px) { .pg-faq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-faq-tiles .pg-tile:nth-child(n) { grid-column: auto; } .pg-faq-tiles .pg-tile:nth-child(odd):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(12px, 1.6vw, 24px) / 2); box-sizing: border-box; } }
@media (max-width: 760px) { .pg-faq-tiles .pg-tile:nth-child(n) { grid-column: auto; } }
/* reasons open like an accordion: title + "+" closed, the text slides in when opened */
/* the "+" sits at the same spot in every box (inline end, vertically centred on the title), the title stays centred */
.pg-tile summary { position: relative; display: flex; align-items: center; justify-content: flex-start; text-align: start; min-height: 30px; padding-inline: 0 38px; cursor: pointer; list-style: none; }
.pg-tile summary::-webkit-details-marker { display: none; }
.pg-tile[open] summary { margin-bottom: 8px; }
.pg-tog { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(150deg, #588157, #3A5A40); box-shadow: 0 4px 10px -4px rgba(52, 78, 65, .7); transition: transform .45s var(--ease); }
.pg-tog::before, .pg-tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #DAD7CD; }
.pg-tog::after { transform: rotate(90deg); }
.pg-tile[open] .pg-tog { transform: rotate(135deg); }
.pg-tile summary:hover .pg-tog { box-shadow: 0 0 0 5px rgba(88, 129, 87, .18), 0 4px 10px -4px rgba(52, 78, 65, .7); }
.pg-tile p { text-align: start; }
.pg-tile[open] p { animation: tile-in .45s var(--ease); }
@keyframes tile-in { from { opacity: 0; transform: translateY(-6px); } }
.pg-tile h3 { margin: 0; font: 400 clamp(26px, 2.3vw, 36px)/1.05 var(--title); color: var(--num); }
.pg-tile p { margin: 0; font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--body); color: var(--ink); }

/* gallery: framed photos, scroll-snap row */
.pg-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.pg-gal figure { margin: 0; padding: 10px; border-radius: 26px; }
.pg-gal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.pg-gal figcaption { padding: 10px 6px 2px; font: 400 22px/1 var(--title); color: var(--num); text-align: center; }

/* program poster */
.pg-prog { display: block; padding: 10px; border-radius: 26px; }
.pg-prog img { display: block; width: 100%; height: auto; border-radius: 18px; }
.pg-prog figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 6px 4px; text-align: center; font: 400 clamp(18px, 1.5vw, 22px)/1 var(--title); color: var(--num); }
/* "+" that breathes: a small green disc whose plus turns a quarter and a ring pings out, inviting the click */
.pg-plus { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(150deg, #588157, #3A5A40); box-shadow: 0 4px 10px -4px rgba(52, 78, 65, .7); }
.pg-plus::before, .pg-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #DAD7CD; animation: plus-turn 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.pg-plus::after { transform: rotate(90deg); animation-name: plus-turn-v; }
@keyframes plus-turn { 0%, 55% { transform: rotate(0); } 80%, 100% { transform: rotate(180deg); } }
@keyframes plus-turn-v { 0%, 55% { transform: rotate(90deg); } 80%, 100% { transform: rotate(270deg); } }
.pg-plus { animation: plus-ping 2.4s ease-out infinite; }
@keyframes plus-ping { 0%, 50% { box-shadow: 0 4px 10px -4px rgba(52, 78, 65, .7), 0 0 0 0 rgba(88, 129, 87, .5); } 90%, 100% { box-shadow: 0 4px 10px -4px rgba(52, 78, 65, .7), 0 0 0 10px rgba(88, 129, 87, 0); } }
.pg-prog:hover .pg-plus { transform: scale(1.12); transition: transform .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .pg-plus, .pg-plus::before, .pg-plus::after { animation: none; } }

/* prices */
.pg-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
/* price tiles: Apple-style frosted glass (denser fill, strong blur, bright rim) with a green corner tab carrying the room / bus icon */
.pg-price.glass { position: relative; overflow: hidden; background: linear-gradient(155deg, rgba(255, 255, 255, .86) 0%, rgba(250, 249, 245, .74) 50%, rgba(244, 242, 236, .8) 100%); border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 20px 40px -24px rgba(30, 45, 40, .45), 0 2px 6px -2px rgba(30, 45, 40, .12); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.pg-corner { position: absolute; top: 0; left: 0; display: grid; place-items: center; height: 38px; padding: 0 12px; border-radius: 16px 0 14px 0; background: linear-gradient(150deg, #588157, #3A5A40); box-shadow: inset 0 1px 0 rgba(218, 215, 205, .25); }
.pg-corner svg { height: 24px; width: auto; fill: none; stroke: #DAD7CD; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .pg-price.glass { background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); border-color: rgba(255, 255, 255, .14); }
.pg-price { border-radius: 16px; display: grid; justify-items: center; align-content: start; gap: 6px; padding: clamp(20px, 2vw, 30px) 12px; text-align: center; }
.pg-price b { font: 500 clamp(52px, 5vw, 84px)/.95 "Oswald", var(--title); color: var(--num); letter-spacing: -.01em; }
/* shekel sign at the bottom-left corner of the number */
.pg-price b { display: inline-flex; flex-direction: row-reverse; align-items: flex-end; direction: ltr; }
.pg-price b small { font-size: .38em; line-height: 1; margin: 0 4px 0 0; padding-bottom: .12em; font-family: var(--title); font-weight: 400; }
.pg-price span { font: 400 clamp(22px, 1.9vw, 30px)/1.1 var(--title); color: var(--num); }
.pg-price em { font: 400 15px/1.3 var(--body); font-style: normal; color: var(--ink); opacity: .75; }
.pg-notes { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: start; gap: 8px 22px; margin: 0; padding: 16px 20px; list-style: none; font: 400 clamp(16px, 1.25vw, 19px)/1.4 var(--body); color: var(--ink); }
.pg-notes li { display: inline-flex; align-items: center; gap: 8px; }
/* small line icons, each with its own gentle loop: card swipes, ticket gets its check, lock clicks shut */
.ni { flex: none; width: 24px; height: 24px; fill: none; stroke: #588157; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ni-pay .ni-a { animation: ni-pay 2.8s ease-in-out infinite; }
@keyframes ni-pay { 0%, 40% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(6px); opacity: 0; } 61% { transform: translateX(-4px); opacity: 0; } 80%, 100% { transform: translateX(0); opacity: 1; } }
.ni-tic .ni-a { stroke-dasharray: 10; animation: ni-tic 2.8s ease-in-out infinite .4s; }
@keyframes ni-tic { 0%, 15% { stroke-dashoffset: 10; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 10; } }
.ni-lock .ni-a { animation: ni-lock 2.8s cubic-bezier(.5, 0, .3, 1.4) infinite .8s; }
@keyframes ni-lock { 0%, 20% { transform: translateY(-2.5px); } 40%, 85% { transform: translateY(0); } 100% { transform: translateY(-2.5px); } }
@media (prefers-reduced-motion: reduce) { .ni .ni-a { animation: none; stroke-dashoffset: 0; transform: none; } }
/* three equal buttons: sign-up, phone, WhatsApp */
.pg-cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; }
.pg-cta > a { justify-content: center; min-height: 58px; box-sizing: border-box; padding-inline: 16px; white-space: nowrap; }
.pg-cta > .pill { font-size: clamp(20px, 1.7vw, 26px); }
@media (max-width: 760px) { .pg-cta { grid-template-columns: 1fr; } }
.pg-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 10px; font: 400 clamp(20px, 1.7vw, 26px)/1 var(--title); color: var(--num); background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(236, 238, 242, .7)); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 10px 22px -16px rgba(30, 45, 80, .6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pg-btn:hover { box-shadow: 0 14px 26px -14px rgba(30, 45, 80, .6); }
.pg-btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.pg-btn.wa-btn svg { fill: #25D366; }
:root[data-theme="dark"] .pg-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.pg-fine { margin: 0; padding: 16px clamp(18px, 2.4vw, 32px); font: 400 15px/1.6 var(--body); color: var(--ink); opacity: .8; text-align: center; }

/* FAQ */
.pg-faq { padding: 6px clamp(10px, 1.6vw, 22px); }
.pg-faq details { border-bottom: 1px solid rgba(8, 47, 123, .12); }
.pg-faq details:last-child { border-bottom: 0; }
:root[data-theme="dark"] .pg-faq details { border-color: rgba(255, 255, 255, .1); }
.pg-faq summary { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 18px 8px; cursor: pointer; list-style: none; font: 400 clamp(22px, 1.9vw, 28px)/1.15 var(--title); color: var(--num); }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; margin-top: -8px; flex: none; width: 12px; height: 12px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease); }
.pg-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.pg-faq details p { margin: 0; padding: 0 8px 20px; text-align: center; font: 400 clamp(16px, 1.25vw, 19px)/1.7 var(--body); color: var(--ink); }

/* cancellation rows */
.pg-rows { display: grid; gap: 0; padding: 2px clamp(10px, 1.6vw, 22px); }
.pg-rows div { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2px; align-items: baseline; padding: 10px 8px; border-bottom: 1px solid rgba(8, 47, 123, .12); }
.pg-rows div:last-child { border-bottom: 0; }
.pg-rows b { font: 400 clamp(22px, 1.8vw, 28px)/1 var(--title); color: var(--num); font-weight: 400; }
.pg-rows span { font: 400 clamp(16px, 1.25vw, 19px)/1.35 var(--body); color: var(--ink); }

@media (max-width: 760px) {
  .pg-hero { height: 55svh; min-height: 430px; align-content: center; padding: 86px 0 0; }
  .pg-hero .hand { font-size: 78px; }
  .pg-facts { margin-top: 0; padding: 8px 16px; }
  .pg-chips { flex-direction: column; align-items: stretch; text-align: center; width: 100%; }
  .pg-chips span { white-space: normal; padding: 7px 12px; font-size: 22px; }
  .pg-chips span + span { border-inline-start: 0; border-top: 1px solid rgba(8, 47, 123, .14); }
  .pg-split { grid-template-columns: 1fr; }
  .pg-gal { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; }
  .pg-gal figure { scroll-snap-align: start; }
  .pg-split .fc-in { min-height: 0; aspect-ratio: 4 / 3; }
  .pg-tiles { grid-template-columns: 1fr; }
  .pg-tile, .pg-tile:nth-child(4), .pg-tile:nth-child(5) { grid-column: auto; }
  .pg-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-price.glass { padding-top: 48px; } .pg-corner { height: 34px; padding: 0 10px; } .pg-corner svg { height: 20px; }
  .pg-rows div { grid-template-columns: 1fr; }
  .pg-btn { width: 100%; justify-content: center; }
  .pg-notes { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .pg-last i { animation: none; } }

/* phones: content panels use a solid frosted fill instead of a live backdrop blur (the blur repaints on every scroll frame); the top bar and price tiles keep the real glass */
@media (max-width: 760px), (pointer: coarse) {
  .glass:not(.pg-price), .pg-tile, .pg-strip figure { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass:not(.pg-price):not(.pg-green .glass):not(#hWhy):not(#hFaq):not(#hPrice):not(#hSteps):not(#hJoin):not(#leumiForm):not(#guidesForm):not(#hMag):not(#fWhy):not(#hVid) { background: linear-gradient(160deg, rgba(250, 249, 245, .94), rgba(240, 238, 232, .9)); }
  :root[data-theme="dark"] .glass:not(.pg-price):not(.pg-green .glass):not(#hWhy):not(#hFaq):not(#hPrice):not(#hSteps):not(#hJoin):not(#leumiForm):not(#guidesForm):not(#hMag):not(#fWhy):not(#hVid) { background: rgba(28, 36, 54, .92); }
}
/* two tracks side by side; lead form */
.pg-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.pg-duo .fc { margin: 0; }
.pg-duo .fc-in { aspect-ratio: 16 / 10; }
.pg-duo .fc-cap b { display: block; margin-bottom: 4px; font: 400 1.3em/1.2 var(--title); }
.pg-form { display: grid; gap: 16px; width: min(640px, 100%); margin-inline: auto; box-sizing: border-box; padding: clamp(20px, 2.6vw, 34px); border-radius: 20px; }
.pg-form label > span, .pg-form legend { display: block; margin-bottom: 6px; font: 400 clamp(19px, 1.5vw, 22px)/1.1 var(--title); color: var(--num); }
.pg-form input:not([type="radio"]) { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(2, 56, 89, .2); background: rgba(255, 255, 255, .8); font: 400 17px/1.2 var(--ui); color: var(--ink); }
.pg-form input:focus-visible { outline: 2px solid #26658C; outline-offset: 1px; }
.pg-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.pg-choice { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(2, 56, 89, .15); background: rgba(255, 255, 255, .55); cursor: pointer; font: 400 17px/1.2 var(--body); color: var(--ink); }
.pg-choice input { accent-color: #26658C; width: 18px; height: 18px; }
.pg-choice:has(input:checked) { border-color: #26658C; background: rgba(255, 255, 255, .9); }
.pg-form .pill { justify-content: center; width: 100%; border: 0; cursor: pointer; font-size: clamp(22px, 1.9vw, 26px); }
.pg-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pg-form .pill:disabled { opacity: .6; cursor: wait; }
.pg-form-done { margin: 0; text-align: center; font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--body); color: var(--ink); }
.pg-form-done b { display: block; margin-bottom: 4px; font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--title); color: var(--num); }
.pg-form-note { margin: 0; text-align: center; font: 400 14px/1.4 var(--body); color: var(--ink); opacity: .7; }
@media (max-width: 760px) { .pg-duo { grid-template-columns: 1fr; } .pg-duo .fc-in { aspect-ratio: auto; } .pg-duo .fc .fc-in > p.fc-cap { position: relative; inset: auto; aspect-ratio: 6 / 5; padding: 50px 16px 16px; font-size: 15px; line-height: 1.5; } }
#hJoin { white-space: nowrap; }
@media (max-width: 760px) { #hJoin { font-size: 8vw; padding-inline: 10px; } #hJoin small { white-space: normal; } }
#hTracks, #hFamily { white-space: nowrap; }
@media (max-width: 760px) { #hTracks, #hFamily { font-size: 7.6vw; padding-inline: 10px; } #hTracks small, #hFamily small { white-space: normal; } }

/* alarm clock beside "עכשיו זה הזמן שלך": it rings (shakes with sound arcs) every few seconds while the hands turn */
#hNow { display: flex; align-items: center; justify-content: center; gap: .3em; }
.alarm { flex: none; width: .95em; height: .95em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.al-body { transform-origin: 24px 26px; animation: al-shake 3.2s ease-in-out infinite; }
.al-hand { transform-origin: 24px 26px; animation: al-spin 6s linear infinite; }
.al-hand2 { transform-origin: 24px 26px; animation: al-spin 36s linear infinite; }
.al-ring { opacity: 0; animation: al-ring 3.2s ease-out infinite; }
@keyframes al-shake { 0%, 62%, 100% { transform: rotate(0); } 66% { transform: rotate(-12deg); } 70% { transform: rotate(12deg); } 74% { transform: rotate(-10deg); } 78% { transform: rotate(10deg); } 82% { transform: rotate(-6deg); } 86% { transform: rotate(0); } }
@keyframes al-ring { 0%, 62% { opacity: 0; } 68%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes al-spin { to { transform: rotate(360deg); } }
/* "מוכנה להתחיל?": a light sweeps through the words and a round arrow bounces toward the form */
.pg-ready { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px !important; }
.pg-ready span { font: 400 1.6em/1.1 var(--title); background: linear-gradient(90deg, currentColor 0%, currentColor 35%, #fff 50%, currentColor 65%, currentColor 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ready-shine 3s linear infinite; }
.pg-ready-go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .55); animation: ready-bounce 1.6s ease-in-out infinite; }
.pg-ready-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ready-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes ready-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .al-body, .al-hand, .al-hand2, .al-ring, .pg-ready span, .pg-ready-go { animation: none; } .pg-ready span { -webkit-text-fill-color: currentColor; } }

/* hero with three round photos (as on the original National Service page): white-ringed circles under the title, on the video */
.pg-hero.pg-hero-circles { height: auto; min-height: min(78svh, 720px); padding: 96px 0 40px; align-content: center; }
.pg-circles { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 34px); margin-top: clamp(18px, 3vw, 40px); }
.pg-circles img { width: clamp(96px, 12vw, 170px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 16px 34px -14px rgba(1, 20, 45, .6); }
@media (max-width: 760px) { .pg-hero.pg-hero-circles { min-height: 0; padding: 96px 0 30px; } .pg-circles img { border-width: 4px; } }
/* three photo cards in a row under a section */
.pg-trio.pg-trio3 { width: min(1300px, calc(100% - 32px)); margin: clamp(20px, 2.6vw, 36px) auto 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pg-trio.pg-trio3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pg-trio.pg-trio3 { grid-template-columns: 1fr; } .pg-trio.pg-trio3 .fc-in { aspect-ratio: 4 / 4.4 !important; } }
/* three photos side by side, edge to edge, joined by a thin white seam (stacked on phones) */
.pg-strip3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: clamp(28px, 3.6vw, 52px); background: #fff; }
.pg-strip3 img { display: block; width: 100%; height: clamp(260px, 30vw, 460px); object-fit: cover; }
@media (max-width: 760px) { .pg-strip3 { grid-template-columns: 1fr; } .pg-strip3 img { height: 72vw; } }
/* National Service: bigger sign-up band */
.pg-last.pg-last-big { font-size: clamp(30px, 3.04vw, 43px); padding: 14px 16px; }
.pg-last.pg-last-big i { width: 13px; height: 13px; }
@media (max-width: 760px) { .pg-last.pg-last-big { font-size: 7.4vw; } }
/* "מוכנה להתחיל?" arrow: no bounce — a light runs round the circle's outline instead */
.pg-ready-go { position: relative; animation: none; border-color: rgba(255, 255, 255, .35); }
.pg-ready-go .rg-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; }
.pg-ready-go .rg-ring circle { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 24 76; transform: rotate(-90deg); transform-origin: center; animation: rg-run 2.4s linear infinite; }
@keyframes rg-run { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .pg-ready-go .rg-ring circle { animation: none; } }
/* photo strip: the photos meet along a torn line, no gap — each photo after the first reaches 14px over the one before
   and its torn edge (masks from tools/make-torn.js) lies straight on it */
.pg-strip3 { gap: 0; background: none; }
.pg-strip3 img { position: relative; }
.pg-strip3 img + img { width: calc(100% + 14px); max-width: none; margin-inline-start: -14px; -webkit-mask: url(../img/torn-r.svg) right / 14px 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - 13px) 100% no-repeat; mask: url(../img/torn-r.svg) right / 14px 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - 13px) 100% no-repeat; }
@media (max-width: 760px) {
  .pg-strip3 img + img { width: 100%; margin-inline-start: 0; margin-top: -12px; height: calc(72vw + 12px); -webkit-mask: url(../img/torn-top.svg) top / 100% 12px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 11px) no-repeat; mask: url(../img/torn-top.svg) top / 100% 12px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 11px) no-repeat; }
}
/* the strip's top and bottom edges torn too (on phones: the first photo's top and the last photo's bottom) */
.pg-strip3 { -webkit-mask: url(../img/torn-top.svg) top / 100% 12px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 22px) no-repeat, url(../img/torn-bottom.svg) bottom / 100% 12px no-repeat; mask: url(../img/torn-top.svg) top / 100% 12px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 22px) no-repeat, url(../img/torn-bottom.svg) bottom / 100% 12px no-repeat; }
/* tracks cards: a frosted glass veil over the whole photo so the text reads clearly */
.pg-duo .fc-cap { background: linear-gradient(160deg, rgba(52, 78, 65, .55) 0%, rgba(52, 78, 65, .68) 100%); -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 20px rgba(0, 0, 0, .35); }
/* selection process: six numbered steps in glass boxes (a vertical timeline on phones). Behind the circles a script draws
   a serpentine track that wraps half of each circle, alternating sides, and a glowing "snake" runs along it from the first
   circle to the last; each circle lights up as the snake reaches it */
.pg-steps-box { position: relative; margin-top: clamp(18px, 2vw, 28px); }
.st-snake { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st-snake path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-snake .track { stroke: rgba(88, 129, 87, .22); stroke-width: 2; }
.st-snake .s1 { stroke: #A3B18A; stroke-width: 3; opacity: .35; }
.st-snake .s2 { stroke: #588157; stroke-width: 3; opacity: .7; }
.st-snake .s3 { stroke: #3A5A40; stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(163, 177, 138, .9)); }
.pg-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 12px clamp(16px, 2.4vw, 40px) 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.pg-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 28px; text-align: center; }
.pg-steps .st-n { position: relative; display: grid; place-items: center; border-radius: 50%; background: #DAD7CD; color: #3A5A40; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 22px -10px rgba(52, 78, 65, .45); transition: background .35s, color .35s; }
.pg-steps li.on .st-n { background: linear-gradient(145deg, #588157, #3A5A40); color: #fff; animation: st-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes st-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pg-steps b { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 14px; background: linear-gradient(155deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .36) 100%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .3), 0 16px 32px -20px rgba(52, 78, 65, .55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); font: 400 clamp(18px, 1.45vw, 22px)/1.25 var(--title); color: #344E41; text-wrap: balance; transition: border-color .35s, background .35s; }
.pg-steps li.on b { background: linear-gradient(155deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .5) 100%); }
@media (max-width: 760px) {
  .pg-steps { grid-template-columns: 1fr; gap: 22px; padding: 12px 18px 12px 8px; }
  .pg-steps li { grid-template-columns: 44px 1fr; align-items: center; justify-items: stretch; gap: 24px; text-align: right; }
  .pg-steps b { padding: 9px 16px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .pg-steps li.on .st-n { animation: none; } }
/* step boxes: shorter, the text with a line icon at its end (the left) */
.pg-steps li b { justify-content: center; }
.pg-steps .st-i { flex: none; width: 24px; height: 24px; fill: none; stroke: #588157; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .pg-steps li b { justify-content: space-between; } .pg-steps .st-i { width: 26px; height: 26px; } }
@media (min-width: 761px) { .pg-steps li { grid-template-rows: auto 1fr; } }
/* circle size in proportion to the step boxes (kept out of the coloured rule so the phone size wins over the palette layers) */
.pg-steps li .st-n { width: 58px; height: 58px; font: 400 27px/1 var(--title); }
@media (max-width: 760px) { .pg-steps li .st-n { width: 44px; height: 44px; font-size: 21px; } }
/* "תהליך המיונים שלנו" heading: real see-through glass (kept on phones too) */
#hSteps.glass { color: #fff; background: linear-gradient(150deg, #588157 0%, #3A5A40 55%, #344E41 100%); border-color: rgba(163, 177, 138, .45); box-shadow: inset 0 1px 0 rgba(218, 215, 205, .25), 0 22px 44px -26px rgba(52, 78, 65, .75); }
/* "למה דווקא אשכולות?": four glass cards (2 x 2, stacked on phones), each led by one of the animated icons */
.pg-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(18px, 2vw, 28px); }
.why-card { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "icon title" "icon text"; align-content: start; column-gap: 20px; row-gap: 8px; padding: clamp(20px, 2vw, 30px); border-radius: 24px; background: radial-gradient(120% 120% at 90% -10%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 100%); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.pg-why .why-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 40px -26px rgba(52, 78, 65, .5); }
/* the vacation "why join" tiles share the class but keep the 6-track tile grid (3 on top, 2 centred below) */
@media (min-width: 761px) { .pg-tiles.pg-why { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.why-card .ai { grid-area: icon; width: 92px; height: 92px; }
.why-card h3 { grid-area: title; margin: 0; font: 400 clamp(26px, 2.3vw, 34px)/1.15 var(--title); }
.pg-why .why-card h3 { color: #3A5A40; }
.why-card p { grid-area: text; margin: 0; font: 400 clamp(17px, 1.3vw, 19px)/1.65 var(--body); color: var(--ink); }
@media (max-width: 760px) {
  .pg-why { grid-template-columns: 1fr; }
  .why-card { grid-template-columns: 60px 1fr; grid-template-areas: "icon title" "text text"; align-items: center; column-gap: 14px; row-gap: 12px; padding: 18px 18px 20px; }
  .why-card .ai { width: 60px; height: 60px; }
  .why-card h3 { font-size: 25px; }
  .why-card p { font-size: 16px; }
}
/* hero: the page name as a first hand-written line, same font and size as the second */
.pg-hero .hand .hero-kick { display: block; font: inherit; margin-bottom: .1em; }
/* an animated icon sitting inline before a section heading */
.pg-h .ai { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.26em; margin-inline-end: .12em; }
@media (max-width: 760px) { #hWhyUs { white-space: nowrap; font-size: min(38px, 9.4vw); } }
/* National Service: centers button pin — a solid pin with a cut-out dot and a ground ring, so it reads at a glance */
.pg-ask .pg-btn .pin-ic { width: 30px; height: 30px; }
.pg-ask .pg-btn .pin-dot { fill: #3A5A40; }
/* National Service: the divider before the form — a fine torn stroke fading at its ends, the same distance from the button above and the heading below */
body.pg-rose .pg-rule { display: block; width: min(900px, calc(100% - 32px)); height: 5px; margin: clamp(36px, 5vw, 72px) auto 0; padding: 0; border: 0; background: linear-gradient(90deg, rgba(158, 68, 104, 0), rgba(158, 68, 104, .5) 30%, rgba(158, 68, 104, .5) 70%, rgba(158, 68, 104, 0)); -webkit-mask: url(../img/torn-top.svg) top / 100% 3px no-repeat, url(../img/torn-bottom.svg) bottom / 100% 3px no-repeat; mask: url(../img/torn-top.svg) top / 100% 3px no-repeat, url(../img/torn-bottom.svg) bottom / 100% 3px no-repeat; }
/* the form heading in our berry, like "עכשיו זה הזמן שלך" */
#hJoin.glass { color: #fff; background: linear-gradient(150deg, #588157 0%, #3A5A40 55%, #344E41 100%); border-color: rgba(163, 177, 138, .45); box-shadow: inset 0 1px 0 rgba(218, 215, 205, .25), 0 22px 44px -26px rgba(52, 78, 65, .75); }
/* field names live inside the fields */
.pg-form input::placeholder { color: #3A5A40; opacity: .75; font: 400 clamp(19px, 1.5vw, 22px)/1.1 var(--title); }
.pg-form input[type="tel"] { text-align: right; }
@media (max-width: 760px) { #hJoin.glass { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* a full-width photo straight under the sign-up band, its top and bottom edges torn like the photo strip */
.pg-wide { display: block; width: 100%; height: clamp(220px, 40vw, 600px); object-fit: cover; object-position: 50% 45%; }
.pg-wide { -webkit-mask: url(../img/torn-top.svg) top / 100% 12px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 22px) no-repeat, url(../img/torn-bottom.svg) bottom / 100% 12px no-repeat; mask: url(../img/torn-top.svg) top / 100% 12px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 22px) no-repeat, url(../img/torn-bottom.svg) bottom / 100% 12px no-repeat; }
/* National Service form: a deeper rose panel and berry-edged fields, so it stands out on the pale page (the shared form rules are in the blue palette) */
body.pg-rose #leumiForm.glass { background: linear-gradient(160deg, #F7D5DF 0%, #EDBCCA 100%); border-color: rgba(158, 68, 104, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 22px 44px -26px rgba(90, 31, 60, .6); }
body.pg-rose .pg-form input:not([type="radio"]) { background: #fff; border-color: rgba(158, 68, 104, .38); }
body.pg-rose .pg-form input:focus-visible { outline-color: #9E4468; }
body.pg-rose .pg-form input::placeholder { color: #7A2E50; opacity: .8; }
body.pg-rose .pg-form legend { color: #7A2E50; }
body.pg-rose .pg-choice { background: rgba(255, 255, 255, .8); border-color: rgba(158, 68, 104, .32); }
body.pg-rose .pg-choice input { accent-color: #9E4468; }
body.pg-rose .pg-choice:has(input:checked) { border-color: #9E4468; background: #fff; }
/* jeep photo: black and white, fading into colour when it comes into view (script in leumi-main) */
.pg-scratch { position: relative; overflow: hidden; }
.pg-scratch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: filter 2.4s cubic-bezier(.4, 0, .2, 1); }
.pg-scratch img.sc-gray { filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) { .pg-scratch img { transition: none; } }
/* "הרשמה למיונים שלנו": a sign-up clipboard whose three lines tick off one by one, then clear and start again (same stroke language as the alarm clock) */
#hJoin { display: flex; align-items: center; justify-content: center; gap: .3em; }
.clip [class^="cb-l"], .clip [class^="cb-c"] { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cb-draw 4.2s ease-out infinite; }
.clip .cb-c1 { animation-delay: .1s; } .clip .cb-l1 { animation-delay: .35s; }
.clip .cb-c2 { animation-delay: .9s; } .clip .cb-l2 { animation-delay: 1.15s; }
.clip .cb-c3 { animation-delay: 1.7s; } .clip .cb-l3 { animation-delay: 1.95s; }
@keyframes cb-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 12%, 70% { stroke-dashoffset: 0; opacity: 1; } 82%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clip [class^="cb-l"], .clip [class^="cb-c"] { animation: none; stroke-dashoffset: 0; } }
/* divider before the form: our heartbeat line with the map of Israel, the line red and the running pulse white */
.pg-divider { width: min(1300px, calc(100% - 32px)); margin: clamp(36px, 5vw, 72px) auto 0; }
.pg-divider .pg-pulse { margin: 0; }
body.pg-rose .pg-divider .pl-base { stroke: #9E4468; stroke-width: 2px; }
body.pg-rose .pg-divider .pl-run { stroke: #fff; stroke-width: 2.4px; }
body.pg-rose .pg-divider .pl-brush { fill: #9E4468; animation-name: pl-beat-red; }
@keyframes pl-beat-red { 0%, 44%, 62%, 100% { fill: #9E4468; } 50% { fill: #fff; } }
/* the two buttons under the form: one column, same width and type size */
.pg-ask-col { flex-direction: column; align-items: center; gap: 12px; }
.pg-ask-col .pg-btn { justify-content: center; width: min(460px, 100%); box-sizing: border-box; font-size: clamp(22px, 1.9vw, 27px); }
/* why-cards: a greyer, frostier glass */
.pg-why .why-card { background: linear-gradient(155deg, rgba(96, 84, 92, .14) 0%, rgba(96, 84, 92, .26) 100%); border-color: rgba(255, 255, 255, .55); }
#hJoin .clip { width: 1.15em; height: 1.15em; }
/* the centers button: the light rose of the palette with berry text, so it reads apart from the dark WhatsApp button */
body.pg-luna.pg-rose .pg-ask-col .pg-btn.pg-btn-soft { color: #7A2E50; background: linear-gradient(150deg, #FBE4EA 0%, #F3C9D4 100%); border: 1px solid rgba(158, 68, 104, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 28px -18px rgba(90, 31, 60, .55); }
body.pg-luna.pg-rose .pg-ask-col .pg-btn.pg-btn-soft .pin-dot { fill: #F3C9D4; }
/* National Service FAQ: seven questions — 3 + 3 and the last one centred; answers still to come, so an empty answer shows nothing */
#leumiFaq .pg-tile:nth-child(7) { grid-column: 3 / span 2; }
#leumiFaq .pg-tile p:empty { display: none; }
@media (max-width: 1100px) { #leumiFaq .pg-tile:nth-child(7) { grid-column: auto; } }
#leumiFaq h3 { white-space: normal; text-wrap: balance; font-size: clamp(21px, 1.6vw, 25px); line-height: 1.15; }
@media (max-width: 760px) { #leumiFaq h3 { font-size: 22px; } }
/* ---------- tour guides page (body.pg-sand) ---------- */
/* service cards: icon, name, one line, and a button — 3 + 2 on desktop, stacked on phones */
.pg-serve { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(18px, 2vw, 28px); }
.pg-serve .serve-card { grid-column: span 2; grid-template-columns: 1fr; grid-template-areas: "icon" "title" "text" "go"; justify-items: center; text-align: center; row-gap: 10px; }
.pg-serve .serve-card:nth-child(4) { grid-column: 2 / span 2; }
.pg-serve .serve-card:nth-child(5) { grid-column: 4 / span 2; }
.serve-card .ai { width: 84px; height: 84px; }
.serve-card .pg-btn { grid-area: go; margin-top: 6px; justify-content: center; }
@media (max-width: 1100px) { .pg-serve { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-serve .serve-card:nth-child(n) { grid-column: auto; } .pg-serve .serve-card:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .pg-serve { grid-template-columns: 1fr; }
  .pg-serve .serve-card:nth-child(n) { grid-column: auto; grid-template-columns: 60px 1fr; grid-template-areas: "icon title" "icon text" "go go"; justify-items: start; text-align: start; column-gap: 14px; row-gap: 4px; }
  .serve-card .ai { width: 60px; height: 60px; }
  .serve-card .pg-btn { justify-self: stretch; margin-top: 10px; }
}
body.pg-sand .serve-card h3 { color: #6A4421; }
.pg-serve .why-card { background: linear-gradient(155deg, rgba(96, 84, 72, .12) 0%, rgba(96, 84, 72, .24) 100%); border-color: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 40px -26px rgba(78, 50, 24, .5); }
body.pg-sand #hServe { font-size: clamp(30px, 3.4vw, 54px); }
@media (max-width: 760px) { body.pg-sand #hServe { font-size: min(34px, 8vw); } }
/* divider before the form, sand version */
body.pg-sand .pg-divider .pl-base { stroke: #8C5A2B; stroke-width: 2px; }
body.pg-sand .pg-divider .pl-run { stroke: #fff; stroke-width: 2.4px; }
body.pg-sand .pg-divider .pl-brush { fill: #8C5A2B; animation-name: pl-beat-sand; }
@keyframes pl-beat-sand { 0%, 44%, 62%, 100% { fill: #8C5A2B; } 50% { fill: #fff; } }
/* the form, sand version */
body.pg-sand #guidesForm.glass { background: linear-gradient(160deg, #F3E6D3 0%, #E9D2B0 100%); border-color: rgba(140, 90, 43, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 22px 44px -26px rgba(78, 50, 24, .55); }
body.pg-sand .pg-form input:not([type="radio"]) { background: #fff; border-color: rgba(140, 90, 43, .38); }
body.pg-sand .pg-form input:focus-visible { outline-color: #8C5A2B; }
body.pg-sand .pg-form input::placeholder { color: #6A4421; opacity: .8; }
/* tour guides "המספרים שלנו": the homepage cream strip with its slow drifting warm pools, the title as live text */
.g-nums { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(165deg, #FBF6EC 0%, #F5ECDC 45%, #EEE1CB 100%); }
.g-nums::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; background: radial-gradient(38% 42% at 22% 30%, rgba(233, 214, 182, .9) 0%, rgba(233, 214, 182, 0) 70%), radial-gradient(40% 46% at 78% 70%, rgba(222, 196, 158, .7) 0%, rgba(222, 196, 158, 0) 70%), radial-gradient(34% 40% at 70% 20%, rgba(255, 252, 244, .95) 0%, rgba(255, 252, 244, 0) 70%), radial-gradient(36% 40% at 30% 80%, rgba(240, 225, 200, .85) 0%, rgba(240, 225, 200, 0) 70%); animation: glass-flow 14s ease-in-out infinite alternate; }
.g-nums .nums-title, .g-nums .num { background: linear-gradient(160deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .34) 100%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 16px 32px -22px rgba(120, 90, 50, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.g-nums { --nc: #6A4421; --nc-hi: #E9C997; }
body.pg-rose .g-nums { --nc: #7A2E50; --nc-hi: #F7C9D4; }
.g-nums .nums-title { text-align: center; font: 400 clamp(56px, 8vw, 120px)/1 var(--title); color: var(--nc); }
.g-nums .num b, .g-nums .num > span { color: var(--nc); text-shadow: none; }
@media (max-width: 760px) { .g-nums .nums-title { font-size: 19vw; } }
@media (prefers-reduced-motion: reduce) { .g-nums::before { animation: none; } }
/* service buttons: the page's dark brown */
.serve-card .pg-btn { color: #FBF5EB; background: linear-gradient(150deg, #8C5A2B 0%, #6A4421 55%, #4E3218 100%); border: 1px solid rgba(201, 139, 78, .45); box-shadow: inset 0 1px 0 rgba(243, 230, 211, .25), 0 14px 28px -16px rgba(78, 50, 24, .7); }
.serve-card p { font-size: clamp(17px, 1.3vw, 20px); }
@media (max-width: 760px) {
  body.pg-sand .pg-hero .hand { font-size: 11.4vw; }
  body.pg-sand #hServe { font-size: 8vw; white-space: nowrap; padding-inline: 10px; }
  .g-nums .nums-title { font-size: 15vw; white-space: nowrap; }
}
/* tour guides numbers title: our shine — a bright band runs through the letters and a light sweeps over the glass */
.g-nums .nums-title { position: relative; overflow: hidden; }
.g-nums .nums-title span.gt { background: linear-gradient(90deg, var(--nc) 0%, var(--nc) 38%, var(--nc-hi) 50%, var(--nc) 62%, var(--nc) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ready-shine 3.6s linear infinite; }
.g-nums .nums-title::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%); background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); animation: g-sweep 4.5s ease-in-out infinite; }
@keyframes g-sweep { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .g-nums .nums-title span.gt, .g-nums .nums-title::after { animation: none; } .g-nums .nums-title span.gt { -webkit-text-fill-color: var(--nc); } }
/* tour guides photos: half the usual strip height */
body.pg-sand .pg-strip3 img { height: clamp(130px, 15vw, 230px); }
@media (max-width: 760px) { body.pg-sand .pg-strip3 img { height: 36vw; } body.pg-sand .pg-strip3 img + img { height: calc(36vw + 12px); } }
.g-contact { width: min(1300px, calc(100% - 32px)); margin: clamp(36px, 5vw, 72px) auto clamp(48px, 6vw, 88px); }
.g-contact .pg-btn { justify-content: center; width: min(460px, 100%); box-sizing: border-box; font-size: clamp(24px, 2vw, 30px); }
/* National Service numbers: a longer title, kept on one line */
body.pg-rose .g-nums .nums-title { font-size: clamp(44px, 6vw, 96px); white-space: nowrap; }
@media (max-width: 760px) { body.pg-rose .g-nums .nums-title { font-size: 9.6vw; } }
body.pg-rose .g-nums { background: linear-gradient(165deg, #FDF0F3 0%, #FBE4EA 45%, #F5D3DC 100%); }
body.pg-rose .g-nums::before { background: radial-gradient(38% 42% at 22% 30%, rgba(240, 184, 198, .75) 0%, rgba(240, 184, 198, 0) 70%), radial-gradient(40% 46% at 78% 70%, rgba(212, 124, 150, .4) 0%, rgba(212, 124, 150, 0) 70%), radial-gradient(34% 40% at 70% 20%, rgba(255, 250, 251, .95) 0%, rgba(255, 250, 251, 0) 70%), radial-gradient(36% 40% at 30% 80%, rgba(247, 213, 223, .85) 0%, rgba(247, 213, 223, 0) 70%); }
body.pg-rose .g-nums .nums-title, body.pg-rose .g-nums .num { box-shadow: inset 0 1px 0 #fff, 0 16px 32px -22px rgba(90, 31, 60, .4); }
/* National Service numbers title: room for the tall letters, and a size that always fits the line */
body.pg-rose .g-nums .nums-title { font-size: clamp(36px, 4.6vw, 76px); line-height: 1.2; padding-block: .14em .1em; }
@media (max-width: 760px) { body.pg-rose .g-nums .nums-title { font-size: 8vw; padding-inline: 10px; } }
/* tour guides: numbers and photos almost touching */
body.pg-sand .g-nums { padding-bottom: 10px; }
body.pg-sand .g-nums + .pg-strip3 { margin-top: 0; }
/* tour guides services: one glass row each — icon, name, an arrow pointing left */
.pg-serve-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); width: min(980px, 100%); margin: clamp(18px, 2vw, 28px) auto 0; }
.pg-serve-rows .serve-row:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - clamp(6px, .7vw, 10px)); justify-self: center; }
.serve-row { display: flex; align-items: center; gap: 16px; padding: 12px 20px 12px 18px; border-radius: 18px; color: #6A4421; text-decoration: none; background: linear-gradient(155deg, rgba(96, 84, 72, .1) 0%, rgba(96, 84, 72, .22) 100%); border: 1px solid rgba(255, 255, 255, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 36px -26px rgba(78, 50, 24, .55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.serve-row .ai { flex: none; width: 58px; height: 58px; }
.serve-row h3 { flex: 1; margin: 0; font: 400 clamp(24px, 2vw, 32px)/1.1 var(--title); color: inherit; }
.sr-go { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.serve-row:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 22px 40px -24px rgba(78, 50, 24, .6); }
.serve-row:hover .sr-go { transform: rotate(90deg); }
@media (max-width: 760px) {
  .pg-serve-rows { grid-template-columns: 1fr; }
  .pg-serve-rows .serve-row:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .serve-row { padding: 10px 16px 10px 14px; gap: 12px; }
  .serve-row .ai { width: 48px; height: 48px; }
  .serve-row h3 { font-size: 23px; }
}
/* tour guides services as an accordion: the row opens in place, the plus turns to a cross */
details.serve-row { display: block; padding: 0; }
details.serve-row > summary { display: flex; align-items: center; gap: 16px; padding: 12px 20px 12px 18px; cursor: pointer; list-style: none; }
details.serve-row > summary::-webkit-details-marker { display: none; }
details.serve-row[open] .sr-go { transform: rotate(45deg); }
details.serve-row:hover { transform: none; }
.pg-serve-rows { align-items: start; }
.sr-body { padding: 4px 22px 20px; color: #4E3218; font: 400 clamp(16px, 1.15vw, 18px)/1.65 var(--body); }
.sr-body p { margin: 0 0 10px; }
.sr-body ul { margin: 0 0 12px; padding-inline-start: 20px; }
.sr-body li { margin-bottom: 4px; }
.sr-body a { color: #8C5A2B; }
.sr-body .sr-reg { display: flex; justify-content: center; width: 100%; margin-top: 6px; cursor: pointer; font-size: clamp(22px, 1.8vw, 26px); color: #FBF5EB; background: linear-gradient(150deg, #8C5A2B 0%, #6A4421 55%, #4E3218 100%); border: 1px solid rgba(201, 139, 78, .45); }
@media (max-width: 760px) { details.serve-row > summary { padding: 10px 16px 10px 14px; gap: 12px; } .sr-body { padding: 2px 16px 16px; } }
/* registration window: a frosted sand sheet over a dimmed page */
.reg-dlg { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 22px; background: transparent; overflow: auto; }
.reg-dlg::backdrop { background: rgba(40, 26, 12, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.reg-dlg[open] { animation: reg-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes reg-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.reg-form { position: relative; width: 100%; margin: 0; background: linear-gradient(160deg, #FBF5EB 0%, #F3E6D3 100%); border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(40, 26, 12, .5); }
.reg-form h2 { margin: 0 32px 0 0; font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--title); color: #6A4421; }
.reg-price { margin: -6px 0 0; font: 400 20px/1.2 var(--title); color: #8C5A2B; }
.reg-x { position: absolute; top: 8px; left: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(140, 90, 43, .12); color: #6A4421; font: 400 26px/1 var(--ui); cursor: pointer; }
.reg-form select { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(140, 90, 43, .38); background: #fff; font: 400 clamp(19px, 1.5vw, 22px)/1.1 var(--title); color: #6A4421; }
.reg-files { display: grid; gap: 8px; }
.reg-files label > span { margin-bottom: 4px; font-size: 18px; color: #6A4421; }
.reg-files input[type="file"] { padding: 8px 10px; font: 400 14px/1.2 var(--ui); background: rgba(255, 255, 255, .8); }
[hidden] { display: none !important; }
.sr-body ol { margin: 0 0 12px; padding-inline-start: 22px; }
/* registration window: details, then the dates as selectable cards */
.reg-info { color: #4E3218; font: 400 16px/1.6 var(--body); }
.reg-info p { margin: 0 0 8px; } .reg-info ul, .reg-info ol { margin: 0 0 8px; padding-inline-start: 20px; } .reg-info li { margin-bottom: 4px; }
.reg-opts { display: grid; gap: 8px; }
.reg-opts legend { margin-bottom: 6px; font: 400 clamp(19px, 1.5vw, 22px)/1.1 var(--title); color: #6A4421; }
.reg-opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(140, 90, 43, .3); background: rgba(255, 255, 255, .75); cursor: pointer; transition: border-color .25s, background .25s; }
.reg-opt input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: #8C5A2B; }
.reg-opt > span { display: grid; gap: 2px; color: #4E3218; }
.reg-opt b { font: 400 21px/1.15 var(--title); color: #6A4421; }
.reg-opt i { font: 400 18px/1.2 var(--title); font-style: normal; color: #8C5A2B; }
.reg-opt small { font: 400 15px/1.45 var(--body); }
.reg-opt em { font: 400 20px/1.2 var(--title); font-style: normal; color: #6A4421; }
.reg-opt:has(input:checked) { border-color: #8C5A2B; background: #fff; box-shadow: 0 0 0 2px rgba(140, 90, 43, .18); }
.reg-form > *, .reg-opts { min-width: 0; }
.reg-opt > span { flex: 1; min-width: 0; }
.reg-opt b, .reg-opt i { display: block; }
.reg-opt small, .reg-opt em { display: block; }
.reg-opt em { margin-top: 4px; }
.reg-x:focus-visible { outline: 2px solid #8C5A2B; outline-offset: 2px; }
/* the fold button under an open row: a round glass button with an up arrow */
.sr-fold { display: grid; place-items: center; width: 44px; height: 44px; margin: 14px auto 0; padding: 0; border-radius: 50%; border: 1px solid rgba(140, 90, 43, .35); background: rgba(255, 255, 255, .7); color: #6A4421; cursor: pointer; box-shadow: 0 8px 18px -12px rgba(78, 50, 24, .5); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sr-fold svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sr-fold:hover { transform: translateY(-3px); }
/* file fields: the native picker hidden behind a round plus; once a file is chosen its name shows and the plus turns to a tick colour */
.reg-files .up { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(140, 90, 43, .45); background: rgba(255, 255, 255, .75); cursor: pointer; }
.reg-files .up > span { flex: 1; margin: 0; font: 400 18px/1.2 var(--title); color: #6A4421; }
.reg-files .up input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.up-plus { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, #8C5A2B, #6A4421); color: #fff; box-shadow: 0 6px 14px -8px rgba(78, 50, 24, .6); }
.up-plus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.up-name { display: none; font: 400 13px/1.3 var(--ui); font-style: normal; color: #4E3218; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-files .up.has { border-style: solid; border-color: #8C5A2B; background: #fff; }
.reg-files .up.has .up-name { display: block; }
.reg-files .up.has .up-plus { background: linear-gradient(150deg, #5E8C4A, #3F6B32); }
.reg-files .up:has(input:focus-visible) { outline: 2px solid #8C5A2B; outline-offset: 2px; }
/* form fields with a line icon at their start */
.fld { position: relative; display: block; }
.fld-i { position: absolute; inset-inline-start: 14px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; fill: none; stroke: #8C5A2B; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pg-form .fld input:not([type="radio"]) { padding-right: 46px; }
.pg-form input[name="tz"] { text-align: right; }
/* ---------- contact page (body.pg-contact) ---------- */
.c-hero .hero-v { object-position: 40% 50%; }
.c-hero { -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 11px) no-repeat, url(../img/torn-bottom.svg) bottom / 100% 12px no-repeat; mask: linear-gradient(#000, #000) top / 100% calc(100% - 11px) no-repeat, url(../img/torn-bottom.svg) bottom / 100% 12px no-repeat; }
.c-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.c-card { display: grid; justify-items: center; align-content: start; gap: 8px; padding: clamp(22px, 2vw, 30px) 16px; border-radius: 22px; text-align: center; text-decoration: none; color: #023859; background: radial-gradient(120% 120% at 90% -10%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 100%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 40px -26px rgba(1, 28, 64, .5); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.c-card:hover { transform: translateY(-4px); }
.c-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(150deg, #26658C 0%, #023859 100%); color: #fff; box-shadow: 0 10px 22px -12px rgba(1, 28, 64, .7); }
.c-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-wa .c-ic { background: linear-gradient(150deg, #2BD06C 0%, #1EA352 100%); }
.c-wa .c-ic svg { fill: #fff; stroke: none; }
.c-card .pin-ic { fill: #fff; stroke: none; } .c-card .pin-ic .pin-dot { fill: #023859; } .c-card .pin-ic ellipse { stroke: #fff; }
.c-card b { font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--title); }
.c-val { font: 400 clamp(17px, 1.3vw, 19px)/1.4 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.c-quote { width: min(900px, calc(100% - 32px)); margin: clamp(28px, 4vw, 52px) auto clamp(48px, 6vw, 88px); text-align: center; }
.c-quote blockquote { margin: 0; font: 400 clamp(30px, 3.4vw, 50px)/1.25 var(--hand); color: #023859; }
.c-quote figcaption { margin-top: 12px; font: 400 clamp(20px, 1.6vw, 24px)/1 var(--title); color: #26658C; }
.c-quote figcaption::before { content: "— "; }
body.pg-contact .pg-divider .pl-base { stroke: #26658C; stroke-width: 2px; }
body.pg-contact .pg-divider .pl-run { stroke: #fff; stroke-width: 2.4px; }
body.pg-contact .pg-divider .pl-brush { fill: #26658C; animation-name: pl-beat-blue; }
@keyframes pl-beat-blue { 0%, 44%, 62%, 100% { fill: #26658C; } 50% { fill: #fff; } }
@media (max-width: 1000px) { .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .c-grid { grid-template-columns: 1fr; gap: 12px; }
  .c-card { grid-template-columns: 52px 1fr; grid-template-areas: "ic t" "ic v"; justify-items: start; text-align: start; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .c-ic { grid-area: ic; width: 52px; height: 52px; } .c-ic svg { width: 26px; height: 26px; }
  .c-card b { grid-area: t; font-size: 24px; } .c-val { grid-area: v; font-size: 16px; }
  body.pg-contact .pg-hero .hand { font-size: 12vw; }
}
/* ---------- videos page ---------- */
.v-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin-top: clamp(18px, 2vw, 28px); }
.v-card { padding: 12px; border-radius: 24px; background: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 100%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 40px -26px rgba(1, 28, 64, .5); }
.v-play, .v-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #011C40; cursor: pointer; }
.v-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.v-play:hover img { transform: scale(1.04); }
.v-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: v-pulse 2.4s ease-out infinite; }
.v-btn svg { width: 32px; height: 32px; fill: #fff; margin-inline-start: 4px; }
@keyframes v-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
.v-card :is(h2, h3) { margin: 14px 6px 6px; font: 400 clamp(22px, 1.8vw, 28px)/1.2 var(--title); color: #023859; }
/* ---------- newsletter page ---------- */
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: clamp(18px, 3vw, 48px); margin-top: clamp(18px, 2vw, 28px); }
.m-card { display: grid; justify-items: center; gap: 6px; text-align: center; }
.m-cover { display: block; width: 100%; aspect-ratio: 900 / 1273; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 50px -28px rgba(1, 28, 64, .6), 0 2px 6px rgba(1, 28, 64, .12); transform: rotate(-1.2deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.m-card:nth-child(2n) .m-cover { transform: rotate(1.2deg); }
.m-cover:hover, .m-card:nth-child(2n) .m-cover:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 40px 60px -30px rgba(1, 28, 64, .7); }
.m-cover img { width: 100%; height: 100%; object-fit: cover; }
.m-card :is(h2, h3) { margin: 16px 0 0; font: 400 clamp(28px, 2.4vw, 36px)/1 var(--title); color: #023859; }
.m-card p { margin: 0; font: 400 18px/1.3 var(--body); color: var(--ink); }
.m-acts { display: flex; gap: 10px; margin-top: 10px; }
.m-acts .pg-btn { padding: 10px 22px; }
body.pg-mag .m-acts .pg-btn.pg-btn-soft { color: #023859; background: linear-gradient(150deg, #EEF7F9 0%, #C9E4EB 100%); border: 1px solid rgba(38, 101, 140, .35); }
.pg-mag .c-hero .hero-v { object-position: 50% 62%; }
.c-end { margin-bottom: clamp(48px, 6vw, 88px); }
@media (max-width: 760px) {
  .v-grid { grid-template-columns: 1fr; }
  .m-grid { grid-template-columns: minmax(0, 300px); }
  body.pg-videos #hVid { font-size: 7.4vw; }
}
/* videos and newsletter heroes: their photos carry text of their own, so they sit blurred and darker behind the heading */
.pg-videos .c-hero .hero-v, .pg-mag .c-hero .hero-v { filter: blur(10px) brightness(.72) saturate(1.1); transform: scale(1.08); }
body.pg-mag .m-acts .pg-btn:not(.pg-btn-soft) { color: #fff; background: linear-gradient(150deg, #26658C 0%, #023859 100%); border: 1px solid rgba(84, 172, 191, .45); }
@media (max-width: 760px) { body.pg-videos #hVid { font-size: 5.9vw; white-space: nowrap; padding-inline: 10px; } }
@media (max-width: 760px) { body.pg-mag #hMag { font-size: 7.6vw; white-space: nowrap; padding-inline: 10px; } }
/* contact rows: icon, name, a left arrow — the whole row is the link; each icon in its own colour */
.c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(980px, 100%); margin-inline: auto; }
.c-card { display: flex; align-items: center; justify-items: initial; gap: 16px; padding: 14px 20px 14px 18px; text-align: start; }
.c-card b { flex: 1; }
.c-go { flex: none; width: 30px; height: 30px; fill: none; stroke: #023859; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.c-card:hover .c-go { transform: translateX(-6px); }
.c-tel .c-ic { background: linear-gradient(150deg, #4A8FD8 0%, #2563B0 100%); }
.c-mail .c-ic { background: linear-gradient(150deg, #F2A33A 0%, #D9792A 100%); }
.c-map .c-ic { background: linear-gradient(150deg, #E8606B 0%, #C23A4A 100%); }
.c-map .pin-ic .pin-dot { fill: #C23A4A; }
.c-quote blockquote, .c-quote figcaption { font-family: "HandFull", var(--hand); }
.c-quote figcaption { font-size: clamp(26px, 2.4vw, 36px); }
.c-quote figcaption::before { content: none; }
@media (max-width: 1000px) { .c-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .c-card { display: flex; padding: 12px 16px 12px 14px; gap: 14px; } .c-card b { font-size: 24px; } }
/* contact quote: right under the photo, in a blue glass box */
.c-quote { box-sizing: border-box; width: min(1000px, calc(100% - 32px)); margin: clamp(22px, 3vw, 40px) auto 0; padding: clamp(18px, 2.4vw, 32px) clamp(16px, 3vw, 44px); border-radius: 22px; background: linear-gradient(150deg, rgba(38, 101, 140, .88) 0%, rgba(2, 56, 89, .9) 100%); border: 1px solid rgba(167, 235, 242, .45); box-shadow: inset 0 1px 0 rgba(167, 235, 242, .35), 0 24px 46px -26px rgba(1, 28, 64, .75); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.c-quote blockquote { color: #fff; }
.c-quote figcaption { color: #A7EBF2; }
@media (max-width: 760px) { .c-quote blockquote { font-size: 7vw; } }
/* contact: the page heading leaves the photo for a blue glass box right under it; the quote goes back below the rows, plain */
.c-head { box-sizing: border-box; width: min(1000px, calc(100% - 32px)); margin: clamp(22px, 3vw, 40px) auto 0; padding: clamp(16px, 2.2vw, 28px) 16px; border-radius: 22px; text-align: center; font: 400 clamp(52px, 6vw, 92px)/1 "HandFull", var(--hand); color: #fff; background: linear-gradient(150deg, rgba(38, 101, 140, .88) 0%, rgba(2, 56, 89, .9) 100%); border: 1px solid rgba(167, 235, 242, .45); box-shadow: inset 0 1px 0 rgba(167, 235, 242, .35), 0 24px 46px -26px rgba(1, 28, 64, .75); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.c-head span { display: block; margin-top: .12em; }
.c-hero.pg-hero { height: min(46svh, 440px); min-height: 280px; padding: 0; }
.c-quote.c-quote-low { margin: clamp(32px, 4vw, 56px) auto 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-quote-low blockquote { color: #023859; font: 400 clamp(34px, 3.6vw, 54px)/1.3 "HandFull", var(--hand); }
.c-quote-low figcaption { color: #26658C; font: 400 clamp(26px, 2.4vw, 36px)/1 "HandFull", var(--hand); }
@media (max-width: 760px) { .c-head { font-size: 13vw; } .c-hero.pg-hero { height: 38svh; min-height: 240px; } .c-quote-low blockquote { font-size: 8.2vw; } }
/* contact heading on one line */
.c-head { white-space: nowrap; font-size: clamp(40px, 4.6vw, 72px); }
.c-head span { display: inline; margin: 0 0 0 0; }
.c-head span::before { content: " "; }
@media (max-width: 760px) { .c-head { font-size: 8.4vw; padding-inline: 10px; } }
/* videos hero: the EshkolotTube image, whole and sharp, at its own proportions */
.pg-videos .c-hero.pg-hero { height: auto; min-height: 0; aspect-ratio: 1672 / 941; padding: 0; }
.pg-videos .c-hero .hero-v { inset: 0; height: 100%; filter: none; transform: none; object-position: 50% 50%; }
.pg-videos .c-hero .hero-shade { display: none; }
@media (max-width: 760px) { .pg-videos .c-hero.pg-hero { aspect-ratio: 4 / 3.4; } .pg-videos .c-hero .hero-v { object-position: 50% 60%; } }
/* EshkolotTube logo, drawn live over a clean desert photo. The red box is exactly the height of the word;
   every few seconds "Tube" flips out letter by letter, the box squashes and springs into a play button with a ripple, then flips back */
.pg-videos .c-hero .hero-v { object-position: 50% 45%; }
.et-logo { position: absolute; left: 50%; top: 54%; translate: -50% -50%; z-index: 1; display: flex; align-items: center; gap: .2em; margin: 0; font-size: clamp(52px, 8.6vw, 150px); line-height: 1; white-space: nowrap; filter: drop-shadow(0 6px 18px rgba(60, 30, 10, .25)); }
.et-word { font: 900 1em/1 "Heebo", sans-serif; letter-spacing: -.035em; color: #111; }
.et-box { position: relative; display: grid; place-items: center; height: .76em; padding: 0 .16em; border-radius: .17em; background: linear-gradient(180deg, #E8322F 0%, #D21C1D 100%); box-shadow: inset 0 -.03em 0 rgba(0, 0, 0, .18); transform-origin: 50% 60%; animation: et-box 6s cubic-bezier(.5, 0, .2, 1) infinite; }
.et-tube { grid-area: 1 / 1; display: flex; font: 500 .66em/1 "Oswald", sans-serif; color: #fff; letter-spacing: -.01em; }
.et-tube i { font-style: normal; display: inline-block; animation: et-letter 6s cubic-bezier(.6, 0, .2, 1) infinite; }
.et-tube i:nth-child(2) { animation-delay: .06s; } .et-tube i:nth-child(3) { animation-delay: .12s; } .et-tube i:nth-child(4) { animation-delay: .18s; }
.et-play { grid-area: 1 / 1; width: .5em; height: .5em; fill: #fff; opacity: 0; animation: et-play 6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.et-ring { position: absolute; inset: 0; border-radius: inherit; border: .04em solid rgba(232, 50, 47, .9); opacity: 0; pointer-events: none; animation: et-ring 6s ease-out infinite; }
@keyframes et-letter { 0%, 34% { transform: translateY(0) rotateX(0); opacity: 1; } 42%, 84% { transform: translateY(-70%) rotateX(90deg); opacity: 0; } 92%, 100% { transform: translateY(0) rotateX(0); opacity: 1; } }
@keyframes et-box { 0%, 38% { transform: scale(1); } 42% { transform: scale(.9, 1.1); } 47% { transform: scale(1.06, .95); } 52%, 82% { transform: scale(1); } 86% { transform: scale(.94, 1.06); } 91%, 100% { transform: scale(1); } }
@keyframes et-play { 0%, 40% { opacity: 0; transform: scale(0) rotate(-120deg); } 50% { opacity: 1; transform: scale(1.15) rotate(0); } 56%, 82% { opacity: 1; transform: scale(1) rotate(0); } 88%, 100% { opacity: 0; transform: scale(0) rotate(120deg); } }
@keyframes et-ring { 0%, 47% { opacity: 0; transform: scale(1); } 49% { opacity: .9; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(1.45, 1.7); } }
@media (max-width: 760px) { .et-logo { font-size: 15vw; top: 56%; } }
@media (prefers-reduced-motion: reduce) { .et-box, .et-tube i, .et-play, .et-ring { animation: none; } }
/* newsletter: the flag photo whole and sharp; the heading on blue glass with the map of Israel after "הארץ" */
.pg-mag .c-hero .hero-v { filter: none; transform: none; object-position: 50% 55%; }
.pg-mag .c-hero .hero-shade { display: none; }
#hMag.glass, #hVid.glass { color: #fff; background: linear-gradient(150deg, rgba(38, 101, 140, .9) 0%, rgba(2, 56, 89, .92) 100%); border-color: rgba(167, 235, 242, .45); box-shadow: inset 0 1px 0 rgba(167, 235, 242, .35), 0 24px 46px -26px rgba(1, 28, 64, .75); }
#hMag .m-isr { display: inline-block; width: auto; height: 1em; margin-inline-start: .22em; vertical-align: -.12em; fill: #A7EBF2; }
#hMag .m-isr * { fill: #A7EBF2; }
/* newsletter: issue name and date on one line; read / download with line icons */
.m-card :is(h2, h3) { white-space: nowrap; font-size: clamp(22px, 2vw, 30px); }
.m-acts .pg-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .m-card :is(h2, h3) { font-size: 7vw; } }
/* ---------- guesthouses page ---------- */
body.pg-houses .g-nums { --nc: #023859; --nc-hi: #A7EBF2; }
body.pg-houses .g-nums .nums-title { font-size: clamp(40px, 5.4vw, 86px); white-space: nowrap; line-height: 1.2; padding-block: .12em .08em; }
@media (max-width: 760px) { body.pg-houses .g-nums .nums-title { font-size: 9.4vw; } }
.h-list { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.h-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: 26px; background: radial-gradient(120% 120% at 90% -10%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 100%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 46px -28px rgba(1, 28, 64, .5); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.h-card:nth-child(2n) .h-gal { order: 2; }
.h-gal { position: relative; min-height: 340px; background: #0B1A2E; }
.h-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.h-track::-webkit-scrollbar { display: none; }
.h-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.h-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .25); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background .25s; }
.h-nav:hover { background: rgba(255, 255, 255, .42); }
.h-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.h-prev { right: 12px; } .h-next { left: 12px; }
.h-dots { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; gap: 7px; padding: 6px 10px; border-radius: 99px; background: rgba(1, 28, 64, .35); }
.h-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: width .3s, background .3s; }
.h-dots i.on { width: 22px; border-radius: 4px; background: #fff; }
.h-gal.one .h-nav, .h-gal.one .h-dots { display: none; }
.h-body { padding: clamp(22px, 2.6vw, 38px); }
.h-body h3 { margin: 0 0 12px; font: 400 clamp(30px, 2.8vw, 42px)/1.05 var(--title); color: #023859; }
.h-body h3 span { display: block; margin-top: 4px; font-size: .62em; color: #26658C; }
.h-body p { margin: 0 0 10px; font: 400 clamp(16px, 1.2vw, 18px)/1.65 var(--body); color: var(--ink); }
.h-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.h-acts .pg-btn { padding: 10px 20px; }
body.pg-houses .h-acts .pg-btn:not(.pg-btn-soft) { color: #fff; background: linear-gradient(150deg, #26658C 0%, #023859 100%); border: 1px solid rgba(84, 172, 191, .45); }
body.pg-houses .h-acts .pg-btn-soft { color: #023859; background: linear-gradient(150deg, #EEF7F9 0%, #C9E4EB 100%); border: 1px solid rgba(38, 101, 140, .35); }
.c-end-top { margin-bottom: 0; }
@media (max-width: 860px) {
  .h-card { grid-template-columns: 1fr; }
  .h-card:nth-child(2n) .h-gal { order: 0; }
  /* 4:3 from the width itself: Safari on iPhone gave a stretched grid item with aspect-ratio (and only absolute children) no height */
  .h-gal { min-height: 0; height: 0; padding-bottom: 75%; align-self: start; }
  .h-body { padding: 18px 18px 22px; }
}
/* ---------- centers page: filter panel ---------- */
.c-filter { display: grid; gap: 12px; padding: clamp(16px, 2vw, 26px); border-radius: 22px; }
.c-search { position: relative; display: block; }
.c-search svg { position: absolute; inset-inline-start: 16px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; fill: none; stroke: #26658C; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.c-search input { width: 100%; box-sizing: border-box; padding: 14px 50px 14px 16px; border-radius: 14px; border: 1px solid rgba(38, 101, 140, .3); background: #fff; font: 400 clamp(19px, 1.5vw, 22px)/1.1 var(--title); color: #023859; }
.c-search input::placeholder { color: #26658C; opacity: .7; }
.c-search input:focus-visible { outline: 2px solid #26658C; outline-offset: 1px; }
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c-chip { padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(38, 101, 140, .3); background: rgba(255, 255, 255, .7); color: #023859; font: 400 clamp(18px, 1.4vw, 21px)/1 var(--title); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.c-chip:hover { border-color: #26658C; }
.c-chip.on { color: #fff; background: linear-gradient(150deg, #26658C 0%, #023859 100%); border-color: transparent; }
.c-count { margin: 0; font: 400 16px/1 var(--body); color: #26658C; }
.c-none { margin: 20px 0 0; text-align: center; font: 400 22px/1.3 var(--title); color: #023859; }
.c-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px !important; }
.c-tags span { padding: 4px 10px; border-radius: 99px; background: rgba(38, 101, 140, .12); color: #023859; font: 400 15px/1.2 var(--title); }
.c-tagline { font: 400 clamp(20px, 1.6vw, 24px)/1.25 var(--title) !important; color: #26658C !important; }
.c-credit { font-size: 12px !important; opacity: .6; margin-top: -4px; }
.c-center[hidden] { display: none; }
@media (max-width: 760px) { .c-chips { gap: 6px; } .c-chip { min-height: 44px; padding: 8px 13px; font-size: 18px; } }
.c-chip:disabled { opacity: .4; cursor: default; }
/* ---------- review fixes (Oct 2026) ---------- */
/* heroes with a two-line script title (centers, guesthouses, festivals): the inner-page hero height and top room, so the title clears the top bar */
@media (min-width: 761px) { .c-hero.pg-hero:has(.hand) { height: min(55svh, 516px); min-height: 480px; padding-top: 86px; } }
/* videos hero: a calmer height on wide screens, the photo still covers */
@media (min-width: 761px) { .pg-videos .c-hero.pg-hero { aspect-ratio: auto; height: min(62svh, 600px); } }
/* the pulse divider sits halfway: the section above it gives up its bottom padding */
.pg.pg:has(+ .pg-divider) { padding-bottom: 0; }
/* the urgency strip is a link to the sign-up, same look */
a.pg-last { text-decoration: none; min-height: 44px; box-sizing: border-box; cursor: pointer; }
a.pg-last:hover { filter: brightness(1.04); }
/* registration closed: the strip stops pulsing, and the sign-up button stays in place as a quiet, unclickable label */
.pg-last.pg-closed i { animation: none; }
.pg-cta > .pg-shut { display: flex; align-items: center; justify-content: center; min-height: 58px; box-sizing: border-box; cursor: default; color: #4E6B80; background: rgba(255, 255, 255, .55); box-shadow: none; }
/* FAQ / reasons tiles: the whole tile opens it (the summary reaches over the tile padding; once open, not over the answer) */
.pg-tile { position: relative; }
.pg-tile summary::before { content: ""; position: absolute; inset: calc(-1 * clamp(20px, 2vw, 30px)) calc(-1 * clamp(18px, 2vw, 28px)); }
.pg-tile[open] summary::before { bottom: 0; }
/* newsletter / videos: the updates pill closes the page */
.pg-join { margin-top: clamp(28px, 4vw, 52px); }
/* phones: no live blur on the repeated cards (it repaints on every scroll frame); the price tiles keep their glass */
@media (max-width: 760px) {
  .h-card, .h-nav, details.serve-row, .why-card, .f-tour { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .h-nav { background: rgba(1, 28, 64, .45); }
}
/* nofesh-kinar (sage page): the footer in the page's own greens, not the LUNA blue */
:root:not([data-theme="dark"]) body.pg-kinar:not(.pg-luna) .foot { background: linear-gradient(165deg, #344E41 0%, #3A5A40 38%, #588157 78%, #A3B18A 100%); }
:root:not([data-theme="dark"]) body.pg-kinar:not(.pg-luna) .foot::before { background: radial-gradient(38% 42% at 22% 30%, rgba(163, 177, 138, .55) 0%, rgba(163, 177, 138, 0) 70%), radial-gradient(40% 46% at 78% 70%, rgba(52, 78, 65, .45) 0%, rgba(52, 78, 65, 0) 70%), radial-gradient(34% 40% at 70% 20%, rgba(218, 215, 205, .35) 0%, rgba(218, 215, 205, 0) 70%), radial-gradient(36% 40% at 28% 82%, rgba(88, 129, 87, .5) 0%, rgba(88, 129, 87, 0) 70%); }
:root:not([data-theme="dark"]) body.pg-kinar:not(.pg-luna) :is(.foot-addr, .foot .foot-links, .foot .voos-credit) { background: linear-gradient(160deg, rgba(52, 78, 65, .72) 0%, rgba(58, 90, 64, .62) 100%); }
/* nofesh-kinar green panels: a deeper green under the text, and the text in white */
body.pg-kinar:not(.pg-luna) .pg-green .pg-text.glass { background: linear-gradient(150deg, rgb(78, 116, 77) 0%, rgb(58, 90, 64) 55%, rgb(52, 78, 65) 100%); }
body.pg-kinar:not(.pg-luna) .pg-green .pg-text :is(p, small) { color: #fff; }
/* night: glass cards and their text on the newer pages */
:root[data-theme="dark"] body :is(.h-card, .v-card, .c-card, .pg-steps b, .why-card, details.serve-row) { background: linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)) !important; border-color: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 46px -28px rgba(0, 0, 0, .7) !important; }
:root[data-theme="dark"] body :is(.h-body h3, .h-body p, .m-card h2, .m-card h3, .v-card h2, .v-card h3, .c-card b, .c-quote blockquote, .c-none, .why-card h3, .why-card p, .serve-row summary h3, .pg-steps b span, .sr-body, .sr-body p, .sr-body li, .sr-body b, .sr-body strong, .m-card p) { color: #E8ECF5 !important; }
:root[data-theme="dark"] body :is(.h-body h3 span, .c-tagline, .c-count, .c-quote figcaption, .c-val) { color: #A7EBF2 !important; }
:root[data-theme="dark"] body .pg-steps b { color: #E8ECF5 !important; }
:root[data-theme="dark"] body .c-tags span { background: rgba(167, 235, 242, .14); color: #E3F2F5; }
:root[data-theme="dark"] body .serve-row { color: #E9C997; }
:root[data-theme="dark"] body.pg-sand .serve-row summary h3 { color: #E9C997 !important; }
:root[data-theme="dark"] body.pg-rose .why-card h3 { color: #F7C9D4 !important; }
:root[data-theme="dark"] body .sr-body a { color: #E9C997; }
:root[data-theme="dark"] body .c-go { stroke: #A7EBF2; }
/* night: the numbers strip on inner pages turns to the night glass */
:root[data-theme="dark"] .g-nums { background: linear-gradient(180deg, #1B2234, #151B2A); --nc: #A7EBF2; --nc-hi: #fff; }
:root[data-theme="dark"] body.pg-sand .g-nums { --nc: #E9C997; }
:root[data-theme="dark"] body.pg-rose .g-nums { --nc: #F7C9D4; }
:root[data-theme="dark"] .g-nums::before { opacity: .12; }
:root[data-theme="dark"] .g-nums :is(.nums-title, .num) { background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 16px 32px -22px rgba(0, 0, 0, .6); }
/* night: the sign-up forms stay light panels, so their text stays dark */
:root[data-theme="dark"] body :is(#leumiForm, #guidesForm, #regForm) { --ink: #023859; --num: #023859; color-scheme: light; }
:root[data-theme="dark"] body.pg-rose #leumiForm { --ink: #5A1F3C; --num: #5A1F3C; }
:root[data-theme="dark"] body.pg-sand :is(#guidesForm, #regForm) { --ink: #4E3218; --num: #4E3218; }
:root[data-theme="dark"] body :is(#leumiForm, #guidesForm, #regForm) :focus-visible { outline-color: var(--ink) !important; }

/* ---------- "why join" boxes: an icon on the right of each title, and a plus that invites a tap ---------- */
.pg-why .pg-tile summary { gap: 14px; }
.pg-ti { flex: none; display: grid; place-items: center; width: clamp(44px, 3.6vw, 54px); height: clamp(44px, 3.6vw, 54px); border-radius: 15px; color: var(--num); background: linear-gradient(150deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(20, 40, 30, .55); }
.pg-ti svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg-ti .ti-a { stroke-dasharray: 40; animation: ti-draw 3.2s ease-in-out infinite; }
@keyframes ti-draw { 0%, 12% { stroke-dashoffset: 40; } 45%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }
/* closed boxes: the plus breathes and sends out a ring, one box after another; it rests once the box is open */
.pg-why .pg-tile:not([open]) .pg-tog { animation: tog-call 2.8s ease-in-out infinite; }
.pg-why .pg-tile:nth-child(2):not([open]) .pg-tog { animation-delay: .35s; }
.pg-why .pg-tile:nth-child(3):not([open]) .pg-tog { animation-delay: .7s; }
.pg-why .pg-tile:nth-child(4):not([open]) .pg-tog { animation-delay: 1.05s; }
.pg-why .pg-tile:nth-child(5):not([open]) .pg-tog { animation-delay: 1.4s; }
@keyframes tog-call {
  0%, 55%, 100% { scale: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--num) 40%, transparent), 0 4px 10px -4px rgba(20, 40, 30, .6); }
  18% { scale: 1.18; }
  32% { scale: .96; }
  45% { scale: 1.04; box-shadow: 0 0 0 10px color-mix(in srgb, var(--num) 0%, transparent), 0 4px 10px -4px rgba(20, 40, 30, .6); }
}
@media (prefers-reduced-motion: reduce) { .pg-why .pg-tile .pg-tog, .pg-ti .ti-a { animation: none; } .pg-ti .ti-a { stroke-dashoffset: 0; } }
/* "ניתן לשלם בתשלומים…" row: centred */
@media (min-width: 761px) { .pg-notes { justify-content: center; text-align: center; } }
/* guides: one list on every screen, like on phones – all four options in order, an open one never pushes the others aside */
.pg-serve-rows { grid-template-columns: minmax(0, 1fr); width: min(860px, 100%); }
.pg-serve-rows .serve-row:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
.c-hero .hero-v.hero-jeep { object-position: 50% 22%; }   /* centers: the jeep photo, girls in view */
/* contact: the quote sits closer to the buttons; its quotation marks get room and a clearer face */
@media (min-width: 761px) { .c-quote.c-quote-low { margin-top: clamp(10px, 1.4vw, 20px); } }
.c-quote-low blockquote .q { display: inline-block; font: 300 1.05em/1 "Heebo", sans-serif; color: #26658C; vertical-align: .05em; }
.c-quote-low blockquote .q:first-child { margin-inline-end: .28em; }
.c-quote-low blockquote .q:last-child { margin-inline-start: .28em; }
@media (min-width: 761px) { body.pg-contact section.pg:has(.c-grid) { padding-bottom: clamp(8px, 1vw, 14px); margin-bottom: 0; } }

/* the "why join" icons and the inviting plus: desktop only, as asked – phones keep the boxes as they were */
@media (max-width: 760px) { .pg-ti { display: none; } .pg-why .pg-tile:not([open]) .pg-tog { animation: none; } .pg-why .pg-tile summary { gap: 0; } }

/* sherut-leumi lead form: soft clay card, round icon bubbles, a 3D girl leaning on its top edge */
.lf-stage { --gw: clamp(190px, 19.6vw, 273px); --sink: calc(var(--gw) * .08); position: relative; width: min(600px, 100%); margin-inline: auto; padding-top: calc(var(--gw) * 1.226 - var(--sink)); }
/* her forearms rest on the card's top rim: a soft contact shadow on the card right under them, offset away from the key light (upper left) */
.lf-stage:has(.lf-girl)::after { content: ""; position: absolute; z-index: 1; top: calc(var(--gw) * 1.226 - var(--sink) * .35); left: 50%; width: calc(var(--gw) * .9); height: calc(var(--sink) * 1.6); translate: -46% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 31, 60, .32), rgba(90, 31, 60, .12) 60%, rgba(90, 31, 60, 0)); filter: blur(5px); pointer-events: none; }
.lf-girl { position: absolute; z-index: 2; top: 0; left: 50%; translate: -46% 0; width: var(--gw); height: auto; pointer-events: none; filter: drop-shadow(3px 3px 2px rgba(90, 31, 60, .22)) drop-shadow(10px 12px 16px rgba(90, 31, 60, .16)); }
.lf-stage:not(:has(.lf-girl)) { padding-top: 0; }
.pg-form.lf { position: relative; z-index: 1; gap: 14px; width: 100%; padding: calc(var(--sink) + 34px) clamp(20px, 3.2vw, 40px) clamp(26px, 3vw, 38px); border-radius: 36px; border: 0; background: linear-gradient(170deg, #FFFCFD 0%, #FBF1F4 100%); box-shadow: 0 34px 60px -30px rgba(122, 46, 80, .5), 0 12px 24px -14px rgba(122, 46, 80, .28), inset 0 3px 0 #fff, inset 0 -8px 16px rgba(158, 68, 104, .09); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lf-stage:not(:has(.lf-girl)) .pg-form.lf { padding-top: clamp(26px, 3vw, 38px); }
.lf .lf-fld { position: relative; display: block; }
.lf .lf-ic { position: absolute; z-index: 1; inset-inline-start: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(150deg, #D993AE 0%, #B25A7E 100%); box-shadow: 0 8px 14px -6px rgba(122, 46, 80, .55), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 6px rgba(90, 31, 60, .22); }
.lf .lf-ic svg { width: 26px; height: 26px; fill: #FFF6F8; }
.lf .lf-ic .lf-cut { fill: none; stroke: #B25A7E; stroke-width: 1.8; stroke-linecap: round; }
body.pg-rose .pg-form.lf input:not([type="radio"]) { height: 56px; padding: 0 72px 0 22px; border-radius: 999px; border: 0; background: #FAF0F3; box-shadow: inset 0 3px 7px rgba(122, 46, 80, .12), inset 0 -2px 0 #fff, 0 1px 0 #fff; font: 400 18px/1.2 var(--ui); color: #5A1F3C; transition: box-shadow .2s var(--ease), background .2s var(--ease); }
body.pg-rose .pg-form.lf input:not([type="radio"]):focus-visible { outline: 0; background: #fff; box-shadow: inset 0 3px 7px rgba(122, 46, 80, .1), 0 0 0 3px rgba(178, 90, 126, .35); }
body.pg-rose .pg-form.lf input::placeholder { color: #8E4A69; opacity: .85; }
.lf fieldset { gap: 10px; margin-top: 6px; }
body.pg-rose .lf legend { width: 100%; margin-bottom: 4px; padding-inline-start: 6px; text-align: start; color: #7A2E50; }
body.pg-rose .lf .pg-choice { gap: 12px; padding: 12px 18px; border-radius: 999px; border: 0; background: linear-gradient(170deg, #FFFFFF 0%, #FBF1F4 100%); box-shadow: 0 6px 12px -8px rgba(122, 46, 80, .45), inset 0 2px 0 #fff, inset 0 -3px 5px rgba(158, 68, 104, .08); color: #5A1F3C; transition: box-shadow .2s var(--ease), background .2s var(--ease); }
body.pg-rose .lf .pg-choice input { appearance: none; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border-radius: 50%; background: #F4E2E8; box-shadow: inset 0 2px 4px rgba(122, 46, 80, .2); cursor: pointer; }
body.pg-rose .lf .pg-choice input::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(150deg, #D993AE, #B25A7E); box-shadow: 0 1px 2px rgba(90, 31, 60, .4); scale: 0; transition: scale .2s var(--ease); }
body.pg-rose .lf .pg-choice input:checked::after { scale: 1; }
body.pg-rose .lf .pg-choice input:focus-visible { outline: 2px solid #B25A7E; outline-offset: 2px; }
body.pg-rose .lf .pg-choice:has(input:checked) { background: #fff; box-shadow: 0 0 0 2px #C77799, 0 8px 14px -8px rgba(122, 46, 80, .5), inset 0 2px 0 #fff; }
.lf .pill { margin-top: 8px; min-height: 62px; border-radius: 999px; color: #FFF6F8; background: linear-gradient(170deg, #CF85A3 0%, #A84C72 100%); box-shadow: 0 16px 26px -14px rgba(122, 46, 80, .7), inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -5px 8px rgba(90, 31, 60, .25); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lf .pill:hover { background: linear-gradient(170deg, #D690AD 0%, #B0557B 100%); box-shadow: 0 20px 30px -14px rgba(122, 46, 80, .75), inset 0 3px 0 rgba(255, 255, 255, .4), inset 0 -5px 8px rgba(90, 31, 60, .25); }
.lf .pill:active { translate: 0 2px; box-shadow: 0 8px 16px -10px rgba(122, 46, 80, .7), inset 0 3px 6px rgba(90, 31, 60, .3); }
.lf .pill > span { text-shadow: 0 1px 0 rgba(90, 31, 60, .3); }
.lf .pill .tap { display: none; }
/* send button: a paper plane, and a bright line that keeps running around the pill's rim */
.lf .pill { gap: 12px; }
.lf .lf-send { position: relative; z-index: 1; flex: none; width: 26px; height: 26px; fill: #FFF6F8; filter: drop-shadow(0 1px 0 rgba(90, 31, 60, .3)); transition: translate .3s var(--ease); }
.lf .lf-send .lf-send-cut { fill: none; stroke: #B0557B; stroke-width: 1.6; stroke-linecap: round; }
.lf .pill:hover .lf-send { translate: -4px -2px; }
.lf .pill-ring rect { rx: 11px; }
.lf .pr-head { stroke: #FFF3F7; stroke-width: 2.5px; stroke-dasharray: 18 82; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(255, 214, 228, .9)); }
@media (prefers-reduced-motion: reduce) { .lf .pill-ring { display: none; } }
.lf .pg-form-done b { color: #7A2E50; }
@media (max-width: 600px) {
  .lf-stage { --gw: min(190px, 52vw); }
  .lf .lf-ic { width: 50px; height: 50px; }
  body.pg-rose .pg-form.lf input:not([type="radio"]) { height: 50px; padding-inline-start: 64px; }
}

/* programme image that opens full size: a magnifier badge sits on it and breathes, and the picture leans in on hover */
.pg-prog-zoom { cursor: zoom-in; }
.pg-prog-pic { position: relative; display: block; overflow: hidden; border-radius: 18px; }
.pg-prog-zoom .pg-prog-pic img { border-radius: 0; transition: transform .5s var(--ease), filter .5s var(--ease); }
.pg-prog-zoom:hover .pg-prog-pic img { transform: scale(1.03); filter: brightness(.88); }
.pg-zoom { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; border-radius: 999px; font: 400 clamp(20px, 1.8vw, 26px)/1 var(--title); color: #fff; background: rgba(1, 28, 64, .72); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 14px 30px -12px rgba(1, 28, 64, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; pointer-events: none; animation: zoom-ping 2.6s ease-out infinite; transition: scale .35s var(--ease), background .35s var(--ease); }
.pg-zoom svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.pg-prog-zoom:hover .pg-zoom { scale: 1.08; background: rgba(1, 28, 64, .85); animation: none; }
@keyframes zoom-ping { 0%, 45% { box-shadow: 0 14px 30px -12px rgba(1, 28, 64, .8), 0 0 0 0 rgba(255, 255, 255, .55); } 90%, 100% { box-shadow: 0 14px 30px -12px rgba(1, 28, 64, .8), 0 0 0 16px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .pg-zoom { animation: none; } }
@media (max-width: 600px) { .pg-zoom { padding: 9px 16px 9px 13px; font-size: 19px; } .pg-zoom svg { width: 21px; height: 21px; } }

/* the programme opened: across the whole width of the screen on a deep blue, scrolling down when taller than the screen,
   and a button back to the page that stays at the top */
.pg-lb { position: fixed; inset: 0; z-index: 1000; overflow: auto; overscroll-behavior: contain; background: #01122a; animation: lb-in .3s var(--ease); }
.pg-lb-pic { min-height: 100%; display: flex; align-items: center; }
.pg-lb-pic img { display: block; width: 100%; height: auto; }
.pg-lb-back { position: fixed; top: max(14px, env(safe-area-inset-top)); inset-inline-start: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px 12px 16px; border-radius: 12px; font: 400 clamp(19px, 1.6vw, 23px)/1 var(--title); color: #fff; background: rgba(1, 28, 64, .82); border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: background .25s var(--ease); }
.pg-lb-back:hover { background: rgba(1, 28, 64, .95); }
.pg-lb-back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pg-lb-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.lb-open, html.lb-open body { overflow: hidden; }
@keyframes lb-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg-lb { animation: none; } }
/* a phone held upright: the (wide) programme turns on its side and fills the whole screen – turn the phone to read it */
@media (max-width: 760px) and (orientation: portrait) {
  .pg-lb { overflow: hidden; }
  .pg-lb-pic { height: 100%; justify-content: center; }
  .pg-lb-pic img { flex: none; width: 100dvh; height: 100vw; max-width: none; object-fit: contain; rotate: 90deg; }
}

/* legal pages (accessibility + privacy + site terms, terms, refund): plain readable text on a glass sheet */
.pg-legal { width: min(900px, 100%); margin-inline: auto; box-sizing: border-box; padding: clamp(22px, 3vw, 44px); border-radius: 20px; font: 400 17px/1.75 var(--body); color: var(--ink); }
.pg-legal h2 { margin: 1.6em 0 .4em; font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--title); color: var(--num); }
.pg-legal .lg-title { margin-top: 0; font-size: clamp(28px, 2.8vw, 38px); }
.pg-legal .lg-part { margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid rgba(2, 56, 89, .15); font-size: clamp(26px, 2.5vw, 34px); }
.pg-legal p { margin: 0 0 .9em; }
.pg-legal ul { margin: 0 0 .9em; padding-inline-start: 1.3em; }
.pg-legal li { margin-bottom: .3em; }
.pg-legal a { color: var(--num); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { #refundForm input::placeholder { font-size: 14px; } }

/* festival "what's on" strip, phones: the English tours line drops its "(additional charge)" note */
.f-kinds .k-extra { font: inherit; }
@media (max-width: 760px) { .f-kinds .k-english .k-extra { display: none; } }