/* =====================================================================================================
   Holy Bagel: home page motion (SGO, 16/10/2026 v2). Loads after main.css and polish-intro.css. Driven by
   polish-home.js, which tags every revealed element with data-hbm="<kind>" and adds .is-in (+ .is-entering while it
   travels). Scoped to body.home; nothing here touches another page.

   ONE MOTION LANGUAGE: "the window opens"
     The intro opens a window in the bagel onto the page. Every picture on the page arrives the same way: its frame
     opens from a slightly smaller window to its full shape while the photo inside settles from a gentle push-in.
     Text never does that: titles rise, supporting lines follow 80ms later. Cards lift into place under their photo.
     Timing  enter: transform 800ms, opacity 500ms, window 800ms (all --hbm-out, no overshoot)
             stagger: 80ms cards, 70ms tiles, 45ms logos, 55ms questions, capped at 6 steps
             rest: hover 260ms, press 120ms (polish-motion.css)
   States only apply under html.hbm-live (set by the script), so the page is complete without it.
   ===================================================================================================== */

/* Without the motion layer (no JS, reduced motion, or the script failed): main.css must not keep anything hidden. */
html:not(.hbm) body.home [data-hb-reveal] { opacity: 1; transform: none; }

/* ---- Shared entrance mechanics --------------------------------------------------------------------- */
html.hbm-live body.home [data-hbm].is-entering {
	transition-property: opacity, transform, clip-path;
	transition-duration: .5s, .8s, .8s;
	transition-timing-function: var(--hbm-soft), var(--hbm-out), var(--hbm-out);
	transition-delay: var(--hbm-d, 0ms);
}
html.hbm-live body.home [data-hbm].is-entering :is(.hbm-pic, .hbm-pic img, .hbm-sub) {
	transition-property: opacity, transform, clip-path;
	transition-duration: .5s, .8s, .8s;
	transition-timing-function: var(--hbm-soft), var(--hbm-out), var(--hbm-out);
	transition-delay: calc(var(--hbm-d, 0ms) + var(--hbm-sd, 0ms));
}

/* Rise: a plain block (filters, "more" buttons). */
html.hbm-live body.home [data-hbm]:not(.is-in) { opacity: 0; transform: translate3d(0, 22px, 0); }

/* Head: a section header. The title rises first, every following line 80ms after it. */
html.hbm-live body.home [data-hbm="head"]:not(.is-in) { opacity: 1; transform: none; }
html.hbm-live body.home [data-hbm="head"] > * { --hbm-sd: calc(var(--hbm-k, 0) * 80ms); }
html.hbm-live body.home [data-hbm="head"].is-entering > * {
	transition: opacity .5s var(--hbm-soft) var(--hbm-sd), transform .8s var(--hbm-out) var(--hbm-sd);
}
html.hbm-live body.home [data-hbm="head"]:not(.is-in) > * { opacity: 0; transform: translate3d(0, 16px, 0); }
html.hbm-live body.home [data-hbm="head"]:not(.is-in) > :first-child,
html.hbm-live body.home [data-hbm="title"]:not(.is-in) { transform: translate3d(0, .42em, 0); }

/* Card (packages): lifts into place; its photo window opens while it does. */
html.hbm-live body.home [data-hbm="card"]:not(.is-in) { transform: translate3d(0, 40px, 0); }
html.hbm-live body.home .hbm-pic { --hbm-sd: 60ms; }
html.hbm-live body.home [data-hbm]:not(.is-in) .hbm-pic { clip-path: inset(9% 7% 9% 7% round var(--hbm-r, 40px)); }
html.hbm-live body.home [data-hbm].is-entering .hbm-pic { clip-path: inset(0 0 0 0 round var(--hbm-r, 40px)); }
html.hbm-live body.home [data-hbm]:not(.is-in) .hbm-pic img { transform: scale(1.16); }
html.hbm-live body.home .hb-pk-card .hbm-pic { --hbm-r: 40px; }

/* Category: the round photo opens like the hole of a bagel, the card lifts under it. */
html.hbm-live body.home [data-hbm="cat"]:not(.is-in) { transform: translate3d(0, 34px, 0); }
html.hbm-live body.home [data-hbm="cat"]:not(.is-in) .hb-cat__img { clip-path: circle(26% at 50% 50%); }
html.hbm-live body.home [data-hbm="cat"].is-entering .hb-cat__img { clip-path: circle(71% at 50% 50%); }
html.hbm-live body.home [data-hbm="cat"]:not(.is-in) .hb-cat__img img { transform: scale(1.22); }
html.hbm-live body.home [data-hbm="cat"].is-entering :is(.hb-cat__img, .hb-cat__img img) { transition: clip-path .8s var(--hbm-out) calc(var(--hbm-d) + 80ms), transform .8s var(--hbm-out) calc(var(--hbm-d) + 80ms); }

/* Event cards (the whole card is a photo): the window opens, the photo settles, then title, types and button. */
html.hbm-live body.home [data-hbm="event"]:not(.is-in) { opacity: 1; transform: none; }
html.hbm-live body.home [data-hbm="event"]:not(.is-in) .hb-event { clip-path: inset(7% 6% 7% 6% round 40px); }
html.hbm-live body.home [data-hbm="event"].is-entering .hb-event { clip-path: inset(0 0 0 0 round 40px); transition: clip-path .8s var(--hbm-out) var(--hbm-d); }
html.hbm-live body.home .hb-event-wrap .hb-event__img { transition: transform .3s var(--hbm-out), opacity .3s var(--hbm-out); }
html.hbm-live body.home [data-hbm="event"]:not(.is-in) .hb-event__img { transform: scale(1.18); opacity: .6; }
html.hbm-live body.home [data-hbm="event"].is-entering .hb-event__img { transition: transform 1.1s var(--hbm-out) var(--hbm-d), opacity .3s var(--hbm-out); }
html.hbm-live body.home [data-hbm="event"] .hb-event__body > * { transition: opacity .26s var(--hbm-out), transform .26s var(--hbm-out), background-color .26s var(--hbm-out), color .26s var(--hbm-out); }
html.hbm-live body.home [data-hbm="event"].is-entering .hb-event__body > * { transition-duration: .5s, .8s, .26s, .26s; }
html.hbm-live body.home [data-hbm="event"].is-entering .hb-event__title { transition-delay: calc(var(--hbm-d) + .22s); }
html.hbm-live body.home [data-hbm="event"].is-entering .hb-event__tags { transition-delay: calc(var(--hbm-d) + .3s); }
html.hbm-live body.home [data-hbm="event"].is-entering .hb-event__btn { transition-delay: calc(var(--hbm-d) + .38s); }

/* Gallery tiles: no lift (the grid stays still), only the window and the photo. */
html.hbm-live body.home [data-hbm="tile"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(8% 8% 8% 8% round 16px); }
html.hbm-live body.home [data-hbm="tile"].is-entering { clip-path: inset(0 0 0 0 round 16px); }
html.hbm-live body.home [data-hbm="tile"]:not(.is-in) img { transform: scale(1.2); }
html.hbm-live body.home [data-hbm="tile"].is-entering img { transition: transform .8s var(--hbm-out) var(--hbm-d); }
html.hbm-live body.home [data-hbm="tile"]:not(.is-in) .hb-gallery__play { opacity: 0; }
html.hbm-live body.home [data-hbm="tile"].is-entering .hb-gallery__play { transition: opacity .5s var(--hbm-soft) calc(var(--hbm-d) + .35s); }

/* Why: the icon turns into place, then the words. */
html.hbm-live body.home [data-hbm="why"]:not(.is-in) { opacity: 1; transform: none; }
html.hbm-live body.home [data-hbm="why"]:not(.is-in) .hb-why__icon { opacity: 0; transform: rotate(-35deg) scale(.7); }
html.hbm-live body.home [data-hbm="why"]:not(.is-in) .hb-why__icon--why-kosher { transform: rotate(-125deg) scale(.7); }
html.hbm-live body.home [data-hbm="why"]:not(.is-in) :is(.hb-why__name, .hb-why__text) { opacity: 0; transform: translate3d(0, 14px, 0); }
html.hbm-live body.home [data-hbm="why"].is-entering .hb-why__icon { transition: opacity .5s var(--hbm-soft) var(--hbm-d), transform .8s var(--hbm-out) var(--hbm-d); }
html.hbm-live body.home [data-hbm="why"].is-entering .hb-why__name { transition: opacity .5s var(--hbm-soft) calc(var(--hbm-d) + 90ms), transform .8s var(--hbm-out) calc(var(--hbm-d) + 90ms); }
html.hbm-live body.home [data-hbm="why"].is-entering .hb-why__text { transition: opacity .5s var(--hbm-soft) calc(var(--hbm-d) + 160ms), transform .8s var(--hbm-out) calc(var(--hbm-d) + 160ms); }

/* Reviews: the card rises; its stars fill in reading order (right to left), as if being given. */
html.hbm-live body.home [data-hbm="review"]:not(.is-in) { transform: translate3d(0, 30px, 0); }
html.hbm-live body.home [data-hbm="review"]:not(.is-in) .hb-review__stars { clip-path: inset(0 0 0 100%); }
html.hbm-live body.home [data-hbm="review"].is-entering .hb-review__stars { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.45, 0, .2, 1) calc(var(--hbm-d) + .3s); }

/* Client logos and questions: short, quiet steps. */
html.hbm-live body.home [data-hbm="logo"]:not(.is-in) { transform: translate3d(0, 14px, 0); }
html.hbm-live body.home [data-hbm="faq"]:not(.is-in) { transform: translate3d(0, 14px, 0); }

/* Instantly shown (it was already above the screen, e.g. a restored scroll position): no travel at all. */
html.hbm-live body.home .hbm-instant, html.hbm-live body.home .hbm-instant * { transition: none !important; }

/* At rest the reveal leaves nothing behind: no clip, no compositing hints. */
html.hbm-live body.home [data-hbm].is-in:not(.is-entering) :is(.hbm-pic, .hb-cat__img, .hb-event, .hb-review__stars) { clip-path: none; }
html.hbm-live body.home [data-hbm="tile"].is-in:not(.is-entering) { clip-path: none; }

/* ---- Scroll-linked depth (polish-home.js sets --hbm-py on these; the 'translate' property keeps hover's
   'transform' free). --------------------------------------------------------------------------------- */
body.home :is(.hb-ready__img, .hb-ready__video) { translate: 0 var(--hbm-py, 0); scale: var(--hbm-ps, 1); }
body.home .hb-gallery__item { translate: 0 var(--hbm-py, 0); }

/* The ready band opens like the intro's window as it comes up (clip-path set by GSAP while it scrolls in). */
body.home .hb-ready { will-change: auto; }

/* Phones: the same language, lighter: shorter travel, smaller windows, a touch quicker. */
@media (max-width: 767px) {
	html.hbm-live body.home [data-hbm].is-entering { transition-duration: .45s, .65s, .65s; }
	html.hbm-live body.home [data-hbm]:not(.is-in) { transform: translate3d(0, 16px, 0); }
	html.hbm-live body.home :is([data-hbm="card"], [data-hbm="cat"], [data-hbm="review"]):not(.is-in) { transform: translate3d(0, 22px, 0); }
	html.hbm-live body.home :is([data-hbm="head"], [data-hbm="event"], [data-hbm="tile"], [data-hbm="why"]):not(.is-in) { transform: none; }
	html.hbm-live body.home [data-hbm]:not(.is-in) .hbm-pic { clip-path: inset(6% 5% 6% 5% round var(--hbm-r, 28px)); }
	html.hbm-live body.home [data-hbm="event"]:not(.is-in) .hb-event { clip-path: inset(5% 4% 5% 4% round 28px); }
	html.hbm-live body.home [data-hbm="event"].is-entering .hb-event { clip-path: inset(0 0 0 0 round 28px); }
	html.hbm-live body.home [data-hbm="tile"]:not(.is-in) { clip-path: inset(6% 6% 6% 6% round 16px); }
}

/* The ready band's film takes over from its poster in a soft cross-fade, like the hero's. */
body.home .hb-ready__video { transition: opacity 1.4s cubic-bezier(.45, 0, .55, 1); }
body.home .hb-ready__media.has-video .hb-ready__img { transition: visibility 0s 1.4s; }

/* ---- UI fixes kept from the first pass ------------------------------------------------------------- */
body.home .hb-pk-card__total { white-space: nowrap; }
@media (max-width: 767px) {
	body.home .hb-hero__text br { display: none; }
	body.home .hb-hero__title { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.14; }
	body.home .hb-hero__text { font-size: 17px; line-height: 1.45; }
}

/* ---- Reduced motion, or the site's own "stop animations" switch: nothing moves, everything is there. -- */
@media (prefers-reduced-motion: reduce) {
	body.home [data-hb-reveal], body.home [data-hbm], body.home [data-hbm] * { opacity: 1 !important; transform: none !important; clip-path: none !important; translate: none !important; scale: none !important; transition: none !important; }
}
html.hb-a11y-motion body.home [data-hbm], html.hb-a11y-motion body.home [data-hbm] * { opacity: 1 !important; transform: none !important; clip-path: none !important; translate: none !important; scale: none !important; }

/* Benefits strip on tablets (768-1100px): icon beside text left ~80px for the title, one word per line.
   Icon above the text, centred, as on phones, keeps all four in one row (16/10/2026). */
@media (min-width: 768px) and (max-width: 1100px) {
	.hb-benefits__item { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 4px 12px; text-align: center; }
	.hb-benefits__icon { width: 48px; height: 48px; }
	.hb-benefits__title { font-size: 16px; }
}

/* ---- Packages filter feedback (main.js pkAnimate + dropdown swap) --------------------------------------
   The chosen value rolls in (the old one slides up and out); a quiet line under the heading says how many fit,
   placed in the gap above the grid so it never pushes the cards down. */
body.home .hb-pk-filter .hb-dd__value { position: relative; display: inline-block; overflow: clip; overflow-clip-margin: 2px; vertical-align: middle; }
body.home .hb-pk-filter .hb-dd__new { display: inline-block; }
body.home .hb-pk-filter .hb-dd__old { position: absolute; inset: 0; white-space: nowrap; text-align: start; pointer-events: none; }
body.home .hb-packages__subhead .hb-pk-count { position: absolute; inset-inline: 0; top: calc(100% + 3px); font-size: 15px; font-weight: 500; line-height: 18px; color: rgba(53, 43, 36, .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { body.home .hb-packages__subhead .hb-pk-count { top: calc(100% + 1px); font-size: 13.5px; line-height: 16px; padding-inline: 16px; } }

/* Lightbox (home gallery): the backdrop fades in and out with the picture, and the picture fades in once loaded. */
body.home .hb-lightbox[open]::backdrop { animation: hbh-fade .3s var(--hbm-soft) both; }
body.home .hb-lightbox.is-closing::backdrop { animation: hbh-fadeout .2s linear forwards; }
@keyframes hbh-fadeout { to { opacity: 0; } }
body.home .hb-lightbox__close { transition: transform .12s var(--hbm-out), background-color .2s var(--hbm-out); }
body.home .hb-lightbox__close:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { body.home .hb-lightbox__close:hover { background-color: #fff; transform: rotate(90deg); } }
/* The ready band's pause button: a small give when pressed, and the symbol eases between pause and play. */
body.home .hb-ready__pause { transition: background-color .2s var(--hbm-out), transform .12s var(--hbm-out); }
body.home .hb-ready__pause:active { transform: scale(.9); }
body.home .hb-ready__pause::before { transition: border-width .22s var(--hbm-out), width .22s var(--hbm-out), height .22s var(--hbm-out), margin .22s var(--hbm-out); }
@media (prefers-reduced-motion: reduce) { body.home .hb-lightbox[open]::backdrop { animation: none; } body.home :is(.hb-ready__pause, .hb-lightbox__close) { transition: none; } }
/* FAQ rows on touch: our own press tint instead of the browser's blue tap flash. */
body.home .hb-faq__item summary { -webkit-tap-highlight-color: transparent; }
body.home .hb-faq__item summary:active { background-color: color-mix(in srgb, var(--hb-cream) 80%, var(--hb-ink-warm)); transition: background-color .12s var(--hbm-out); }

/* FX-3 (16/10/2026): on phones the headline was still masking in at 1.5 s (each line .9 s, 110 ms apart). It now
   settles inside .8 s of the entrance starting: shorter lines, tighter stagger; text and buttons follow at once. */
@media (max-width: 767px) {
	body.home .hb-hero__line > span { animation-duration: .5s; animation-delay: calc(var(--hbi-base) + var(--l, 0) * 60ms); }
	body.home .hb-hero__text { animation-duration: .45s !important; animation-delay: calc(var(--hbi-base) + .12s) !important; }
	body.home .hb-hero__actions > :nth-child(1) { animation-duration: .45s !important; animation-delay: calc(var(--hbi-base) + .18s) !important; }
	body.home .hb-hero__actions > :nth-child(2) { animation-duration: .45s !important; animation-delay: calc(var(--hbi-base) + .22s) !important; }
}


/* =====================================================================================================
   Package BG (SGO, 16/10/2026): trust tiles cut into the hero, one vertical rhythm, the three ways to order, the
   hero's third path + promise, scroll depth on the hero, neutral check bullets, the FAQ help card.
   ===================================================================================================== */

/* ---- Trust tiles: an outer frame in the page colour, as thick as the lines between the tiles, so the block reads
   as cut into the hero (owner 16/10). Phone 2x2 and desktop 1x4 share the same construction. ------------------- */
.hb-benefits { --hb-rule: 3px; --hb-tile-r: 28px; }
.hb-benefits__list { gap: var(--hb-rule); padding: var(--hb-rule); background: var(--hb-cream); border-radius: var(--hb-tile-r); overflow: hidden; }
.hb-benefits__item { padding: 22px 18px; background: var(--hb-rose); border-radius: 2px; }
.hb-benefits__item + .hb-benefits__item { border-inline-start: 0; }
@media (min-width: 768px) {
	.hb-benefits__item:first-child { border-start-start-radius: calc(var(--hb-tile-r) - var(--hb-rule)); border-end-start-radius: calc(var(--hb-tile-r) - var(--hb-rule)); }
	.hb-benefits__item:last-child { border-start-end-radius: calc(var(--hb-tile-r) - var(--hb-rule)); border-end-end-radius: calc(var(--hb-tile-r) - var(--hb-rule)); }
}
@media (min-width: 768px) and (max-width: 1100px) { .hb-benefits__item { padding: 18px 12px; } }
@media (max-width: 767px) {
	.hb-benefits { --hb-rule: 2px; --hb-tile-r: 22px; }
	.hb-benefits__item { padding: 18px 8px; }
	.hb-benefits__item:nth-child(1) { border-start-start-radius: calc(var(--hb-tile-r) - var(--hb-rule)); }
	.hb-benefits__item:nth-child(2) { border-start-end-radius: calc(var(--hb-tile-r) - var(--hb-rule)); }
	.hb-benefits__item:nth-child(3) { border-end-start-radius: calc(var(--hb-tile-r) - var(--hb-rule)); }
	.hb-benefits__item:nth-child(4) { border-end-end-radius: calc(var(--hb-tile-r) - var(--hb-rule)); }
}

/* ---- One vertical rhythm on home (tokens from polish-static.css: --hb-sec-y 44/64/72, --hb-title-gap 20/28/28).
   Every section: padding above = padding below. Every section head (title + its one line) sits --hb-title-gap above
   its content; inside a head the line is 10-12px under the title; a "more" button sits --hb-more-gap under its grid. */
body.home { --hb-more-gap: 28px; --hb-head-gap: 10px; }
@media (min-width: 768px) { body.home { --hb-more-gap: 40px; --hb-head-gap: 12px; } }
body.home :is(.hb-ways, .hb-packages, .hb-cats, .hb-catering, .hb-why, .hb-gallery, .hb-faq) { padding-top: var(--hb-sec-y, 64px); padding-bottom: var(--hb-sec-y, 64px); }
body.home :is(.hb-ways__head, .hb-packages__head, .hb-cats__head, .hb-catering__head, .hb-clients > header) > * + * { margin-top: var(--hb-head-gap); }
body.home :is(.hb-ways__head, .hb-packages__head, .hb-cats__head, .hb-catering__head, .hb-clients > header) { margin-bottom: var(--hb-title-gap, 28px); }
body.home :is(.hb-why__title, .hb-reviews__title, .hb-gallery__title, .hb-faq__title) { margin-bottom: var(--hb-title-gap, 28px); }
body.home :is(.hb-pk-filter, .hb-catering__grid, .hb-why__list, .hb-clients__logos, .hb-reviews__grid, .hb-gallery__grid, .hb-faq__list, .hb-ways__list) { margin-top: 0; }
/* The round category photos stand 35px (phone 32px) above their cards: the grid starts that much lower. */
body.home .hb-cats__grid { margin-top: calc(var(--hb-title-gap, 28px) + 35px); }
@media (max-width: 767px) { body.home .hb-cats__grid { margin-top: calc(var(--hb-title-gap, 20px) + 32px); } }
body.home :is(.hb-packages__more, .hb-cats__more, .hb-catering__more, .hb-gallery__more, .hb-faq__more) { margin-top: var(--hb-more-gap); }
/* Packages: guests + event filter, then the cards' own small head ("חבילות מוכנות ומשתלמות" + how many fit), which
   sits one title-gap above the cards and a section-step under the filter (was ~120px above, 8px below). */
body.home .hb-packages__subhead { margin-top: calc(var(--hb-sec-y, 64px) * .66); margin-bottom: var(--hb-title-gap, 28px); }
body.home .hb-packages__subhead .hb-pk-count { position: static; display: block; margin-top: 6px; padding-inline: 0; }
body.home .hb-pk-grid { margin-top: 0; }
@media (max-width: 767px) { body.home .hb-packages__subhead { margin-inline: 16px; } }

/* ---- The three ways to order (v3, package HM round 2, 16/10/2026) ------------------------------------------------
   The designer's line, taken from her category cubes and her framed panels: one rounded panel inset from the page
   edge by the same gutter and gap as hers (--hb-gutter, 15px desktop / 28px phone, --hb-radius-lg), on the light
   surface (#f9f4f0) so it alternates with the cream page above and below. Inside, three equal rose cubes, each with
   a round photo that rises above its top edge like her category photos, a taupe glyph kicker, a bold centred title,
   a short muted line and one button (the sage primary on "build it yourself", her outline pill on the other two).
   A tap anywhere on a cube follows its link (polish-home.js); the button stays the one keyboard target. */
/* 17/10/2026: the cards are the site's one ways-to-order component (template-parts/order-ways.php), on the home panel and
   at the end of every regular page, so their sizes live on the list, not on the home section. */
.hb-ways__list { --hbw-disc: clamp(150px, 13.2vw, 190px); --hbw-rise: 36px; }
body.home .hb-ways { --hbw-bagel: clamp(150px, 13.2vw, 190px);
	position: relative; max-width: none; margin: 15px var(--hb-gutter) 0; padding-inline: clamp(16px, 2.4vw, 34px);
	background: var(--hb-filter-bg, #f9f4f0); border-radius: var(--hb-radius-lg, 40px); color: var(--hb-ink-warm); text-align: center; }
body.home .hb-ways { padding-bottom: calc(var(--hb-sec-y, 64px) + var(--hbw-bagel) * .32); }
.hb-ways__head { text-align: center; }
.hb-ways__title { margin: 0; font-weight: 700; font-size: clamp(32px, 4.167vw, 60px); line-height: 1.1667; text-wrap: balance; }
.hb-ways__text { max-width: 720px; margin-inline: auto; font-size: clamp(17px, 1.528vw, 22px); line-height: 1.4; color: rgba(53, 43, 36, .8); }
.hb-ways__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; max-width: 1320px; margin: calc(var(--hbw-rise) + 4px) auto 0; padding: 0; list-style: none; }
.hb-way { --hbm-r: 50%; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; color: var(--hb-ink-warm);
	padding: calc(var(--hbw-disc) - var(--hbw-rise) + 22px) clamp(18px, 2vw, 30px) 32px; border-radius: var(--hb-radius-lg, 40px); background: var(--hb-rose, #e5cec7);
	cursor: pointer; transition: transform var(--hbm-t-hover, 260ms) var(--hbm-out); }
.hb-way__pic { position: absolute; top: calc(var(--hbw-rise) * -1); left: 50%; width: var(--hbw-disc); height: var(--hbw-disc); margin-left: calc(var(--hbw-disc) / -2); overflow: hidden; border-radius: 50%; background: var(--hb-sand, #e9dcd2); }
.hb-way__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--hbm-out); }
.hb-way__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; color: rgba(53, 43, 36, .74); }
.hb-way__glyph { flex: none; width: 22px; height: 22px; object-fit: contain; }
.hb-way__title { margin: 10px 0 0; font-weight: 700; font-size: clamp(22px, 2.08vw, 30px); line-height: 1.2; text-wrap: balance; }
.hb-way__text { max-width: 30em; margin: 10px 0 22px; font-size: 17px; line-height: 1.45; color: rgba(53, 43, 36, .76); text-wrap: balance; }
.hb-way__go.hb-btn { margin-top: auto; min-height: 48px; padding-inline: 26px 22px; font-size: 17px; }
.hb-way__go.hb-btn--outline { border-color: var(--hb-ink-warm); color: var(--hb-ink-warm); background: transparent; }
.hb-way__go.hb-btn--outline .hb-btn__arrow { filter: brightness(0) saturate(100%) invert(17%) sepia(10%) saturate(1400%) hue-rotate(340deg); }
.hb-way__go .hb-btn__arrow { transition: translate var(--hbm-t-hover, 260ms) var(--hbm-out); }
/* Her small info row: one quiet line on a cream strip, her taupe mark before each thing you can still change. */
.hb-ways__promise { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; width: fit-content; max-width: 100%; margin: var(--hb-title-gap, 28px) auto 0;
	padding: 10px 24px; border-radius: 999px; background: var(--hb-cream, #eae0d9); font-size: 16px; line-height: 1.4; color: var(--hb-ink-warm); }
.hb-ways__promise > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hb-ways__promise > span::before { content: ""; flex: none; width: 12px; height: 12px; background: #b6a19c; -webkit-mask: url("../img/ticker-dot.svg") center / contain no-repeat; mask: url("../img/ticker-dot.svg") center / contain no-repeat; }
.hb-ways__promise em { font-style: normal; color: rgba(53, 43, 36, .74); }
@media (hover: hover) and (pointer: fine) {
	.hb-way:hover { transform: translate3d(0, -6px, 0); }
	.hb-way:hover .hb-way__img { transform: scale(1.06) rotate(-2deg); }
	.hb-way:hover .hb-way__go.hb-btn--outline { background: var(--hb-ink-warm); color: #fff; }
	.hb-way:hover .hb-way__go.hb-btn--outline .hb-btn__arrow { filter: none; }
	.hb-way:hover .hb-btn__arrow { translate: -4px 0; }
}
.hb-way:focus-within { transform: translate3d(0, -6px, 0); }
.hb-way__go:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 4px; border-radius: 999px; }
.hb-way.is-chosen { transform: scale(.985); transition-duration: var(--hb-t-press, 90ms); }

/* The bagel on the panel's lower edge: half on the panel, half over the gap into the packages, where the designer had
   hers. It rolls in once as the panel's end arrives (rotation = distance rolled) and then turns a little with the
   scroll; polish-home.js writes --hbw-x / --hbw-r. Without motion it simply rests there. */
.hb-ways__bagel { position: absolute; z-index: 2; left: 50%; bottom: 0; width: var(--hbw-bagel); aspect-ratio: 1; margin-left: calc(var(--hbw-bagel) / -2); translate: var(--hbw-x, 0px) 50%; pointer-events: none; }
.hb-ways__bagel-shadow { position: absolute; inset: 64% 9% -9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(53, 43, 36, .3), rgba(53, 43, 36, .12) 60%, rgba(53, 43, 36, 0)); }
.hb-ways__bagel-spin { position: absolute; inset: 0; rotate: var(--hbw-r, -8deg); }
.hb-ways__bagel-spin img { display: block; width: 100%; height: 100%; }
body.home .hb-ways + .hb-packages { --hbw-bagel: clamp(150px, 13.2vw, 190px); padding-top: calc(var(--hb-sec-y, 64px) + var(--hbw-bagel) * .5); }

@media (min-width: 768px) and (max-width: 1023px) {
	.hb-ways__list { --hbw-disc: 140px; --hbw-rise: 30px; }
	.hb-way { padding-inline: 16px; }
	.hb-way__text { font-size: 16px; }
	.hb-way__go.hb-btn { padding-inline: 18px 16px; font-size: 16px; }
}
@media (max-width: 767px) {
	.hb-ways__list { --hbw-disc: 112px; --hbw-rise: 30px; }
	body.home .hb-ways { --hbw-bagel: 120px; margin-top: 28px; padding-inline: 12px; }
	body.home .hb-ways + .hb-packages { --hbw-bagel: 120px; }
	/* Phones: the cube turns sideways (her round photo at the start, the words beside it, the button across the
	   bottom) so the three ways fit in about one and a half screens instead of three. */
	.hb-ways__list { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 520px; margin-top: 0; }
	.hb-way { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 14px; align-items: start; height: auto; padding: 16px 16px 16px; border-radius: 26px; text-align: start; }
	.hb-way__pic { position: relative; top: auto; left: auto; grid-column: 1; grid-row: 1 / span 3; width: 96px; height: 96px; margin: 0; }
	.hb-way__kicker { grid-column: 2; font-size: 14px; }
	.hb-way__glyph { width: 18px; height: 18px; }
	.hb-way__title { grid-column: 2; margin-top: 4px; font-size: 21px; }
	.hb-way__text { grid-column: 2; margin: 4px 0 0; font-size: 15px; line-height: 1.4; text-wrap: pretty; }
	.hb-way__go.hb-btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 14px; font-size: 16px; padding-inline: 20px; }
	.hb-ways__promise { gap: 4px 14px; padding: 10px 16px; border-radius: 22px; font-size: 15px; }
	.hb-ways__promise em { flex-basis: 100%; text-align: center; }
}

/* ---- Hero: the third path and the promise, one quiet line under the buttons ----------------------------------- */
.hb-hero__paths { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; margin: 22px 0 0; font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.hb-hero__paths > * { display: inline-flex; align-items: center; gap: 7px; }
.hb-hero__quote { min-height: 44px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .5); transition: text-decoration-color var(--hbm-t-hover, 260ms) var(--hbm-out); }
.hb-hero__quote:hover, .hb-hero__quote:focus-visible { text-decoration-color: #fff; color: #fff; }
.hb-hero__quote:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.hb-hero__paths .hb-i { flex: none; }
@media (max-width: 767px) {
	.hb-hero__paths { flex-direction: column; gap: 0; margin-top: 12px; font-size: 14.5px; }
	.hb-hero__promise { color: rgba(255, 255, 255, .88); }
}

/* ---- Hero: scroll depth. As the page leaves the hero, the photo stays behind (slower than the page, a hair
   larger) and the words lift and soften ahead of it. polish-home.js writes the four variables; 'translate' and
   'scale' keep the entrance's own 'transform' free. -------------------------------------------------------------- */
body.home .hb-hero__media { translate: 0 var(--hbh-py, 0px); scale: var(--hbh-ps, 1); }
body.home .hb-hero__content { translate: 0 var(--hbh-cy, 0px); opacity: var(--hbh-co, 1); }

/* ---- Package cards: a neutral check, never the X-shaped logo mark (it reads as "remove"). Every page. ----------- */
.hb-pk-card__items li::before {
	width: 16px; height: 16px; transform: none; background: var(--hb-o-sage, #657b63);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- FAQ: the sandwich-cut art became a help card (who to ask when the answer is not here) ----------------------- */
body.home .hb-faq__inner { grid-template-columns: minmax(0, 863px) minmax(260px, 380px); align-items: start; }
.hb-faq__help { display: grid; justify-items: start; gap: 10px; padding: 28px; border-radius: 28px; background: var(--hb-white); text-align: start; }
@media (min-width: 1024px) { body.home .hb-faq__help { margin-top: calc(var(--hb-title-gap, 28px) + clamp(38px, 4.9vw, 70px)); } }
.hb-faq__help-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--hb-o-sage-d, #5a6f58); box-shadow: inset 0 0 0 2px var(--hb-o-sage, #657b63); background: rgba(101, 123, 99, .08); }
.hb-faq__help-title { margin: 4px 0 0; font-weight: 700; font-size: 24px; line-height: 1.25; }
.hb-faq__help-text { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(53, 43, 36, .8); }
.hb-faq__help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 6px; }
body.home .hb-faq__help .hb-btn { min-height: 48px; font-size: 17px; }
.hb-faq__help-tel { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 700; color: var(--hb-ink-warm); text-decoration: none; }
.hb-faq__help-tel:hover, .hb-faq__help-tel:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) {
	body.home .hb-faq__inner { grid-template-columns: minmax(0, 1fr); gap: var(--hb-title-gap, 20px); }
	.hb-faq__help { padding: 20px; border-radius: 22px; }
	.hb-faq__help-title { font-size: 21px; }
	.hb-faq__help-text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.hb-way, .hb-way__img { transition: none !important; }
	body.home :is(.hb-hero__media, .hb-hero__content) { translate: none !important; scale: none !important; opacity: 1 !important; }
}
html.hb-a11y-motion :is(.hb-way, .hb-way__img) { transition: none !important; }
html.hb-a11y-motion body.home :is(.hb-hero__media, .hb-hero__content) { translate: none !important; scale: none !important; opacity: 1 !important; }

/* Trust panel: the clients block opens on the same section step as every other section. */
body.home .hb-clients { padding-top: var(--hb-sec-y, 64px); padding-bottom: var(--hb-sec-y, 64px); }
/* Reviews share the clients' sage band (below a hairline): the same step above their title and below their button. */
body.home .hb-reviews { padding-top: var(--hb-sec-y, 64px); padding-bottom: var(--hb-sec-y, 64px); }

/* Focus on the dark hero photo: the site's ink ring disappears there, so the hero's own controls ring in white
   (package BG, 16/10/2026: measured 2px rgb(53,43,36) on the hero buttons, i.e. invisible). */
body.home .hb-hero :is(a, button):focus-visible { outline-color: #fff !important; }

/* ---- The help card's bagel (package HM round 2): the same bagel as the opening and the order panel, perched on the
   card's corner as a friendly "we're here" next to the question nobody answered. It settles in once with the card
   (a short quarter turn) and then stays still. Decorative; reduced motion: no turn. */
body.home .hb-faq__help { position: relative; }
.hb-faq__bagel { position: absolute; z-index: 1; top: -34px; inset-inline-end: -14px; width: 96px; aspect-ratio: 1; pointer-events: none; rotate: 14deg; }
.hb-faq__bagel img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 12px rgba(53, 43, 36, .22)); }
html.hbm-live body.home .hb-faq__help:not(.is-in) .hb-faq__bagel { opacity: 0; rotate: -70deg; translate: 14px 10px; }
html.hbm-live body.home .hb-faq__help.is-entering .hb-faq__bagel { transition: opacity .45s var(--hbm-soft, ease) .18s, rotate .9s var(--hbm-out, ease) .18s, translate .9s var(--hbm-out, ease) .18s; }
@media (max-width: 767px) { .hb-faq__bagel { top: -28px; inset-inline-end: -6px; width: 78px; } }
@media (prefers-reduced-motion: reduce) { html.hbm-live body.home .hb-faq__help .hb-faq__bagel { opacity: 1; rotate: 14deg; translate: none; transition: none; } }
html.hb-a11y-motion body.home .hb-faq__help .hb-faq__bagel { opacity: 1 !important; rotate: 14deg !important; translate: none !important; transition: none !important; }

/* ---- BG2 (16/10/2026): the seam bagel as the brand signature ------------------------------------------------------
   The designer's taupe glyph line becomes a ring around the bagel: a fine circle, a little wider than the bagel, that
   draws itself once (--hbm-t-ring, --hbm-out) the moment the roll ends, then stays still while the bagel alone turns
   with the scroll. The ring is the "held, done" mark of polish-story; here it says "this is the way in". The contact
   shadow sits tight under the crust, so the bagel reads as resting on the panel's edge, not floating over the gap.
   Without motion (prefers-reduced-motion, the site's own switch, no IntersectionObserver) the ring is simply drawn. */
.hb-ways__ring { position: absolute; inset: -11%; width: 122%; height: 122%; overflow: visible; pointer-events: none; transform: rotate(-90deg) scaleX(-1); }
.hb-ways__ring circle { fill: none; stroke: var(--hb-taupe, #b8a39b); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: .9; }
.hb-ways__bagel.is-landed .hb-ways__ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--hbm-t-ring, 700ms) * 1.6) var(--hbm-out, ease) 80ms; }
.hb-ways__bagel .hb-ways__ring circle { stroke-width: 1.5px; }
.hb-ways__bagel-shadow { inset: 72% 14% -3%; background: radial-gradient(closest-side, rgba(53, 43, 36, .26), rgba(53, 43, 36, .08) 65%, rgba(53, 43, 36, 0)); }
.hb-ways__bagel-spin img { filter: drop-shadow(0 6px 8px rgba(53, 43, 36, .16)); }
@media (prefers-reduced-motion: reduce) { .hb-ways__ring circle { stroke-dashoffset: 0 !important; transition: none !important; } }
html.hb-a11y-motion .hb-ways__ring circle { stroke-dashoffset: 0 !important; transition: none !important; }

/* HM3 (16/10/2026): the three ways are equal choices, so they read as one family. Cubes sit on the designer's cream
   (#eae0d9), one step darker than the panel (#f9f4f0) so the edges stay legible, and every cube carries the same sage
   pill as her package cards (white on #657b63 = 4.7:1, hover #5b6e59 = 5.7:1). */
.hb-way { background: var(--hb-cream, #eae0d9); }
.hb-way__go.hb-btn { min-height: 48px; }
@media (max-width: 767px) { .hb-ways__list { grid-auto-rows: 1fr; } }   /* HM3: three equal cubes on phones too */

/* QAV-1 (16/10/2026): home "חבילות מוכנות ומשתלמות" cards = the same compact card as /packages/ (16:10 photo, one-row facts strip,
   3 items + "ועוד N", price and CTA on one row, bottom padding = top padding). Behaviour: polish-home.js (hbHomePk). */
body.home .hb-packages .hb-pk-card__note { display: none; }
body.home .hb-packages .hb-pk-card__items li[hidden] { display: none !important; }
body.home .hb-packages .hb-pk-card:not([data-hbhpk]) .hb-pk-card__items li:nth-child(n+4) { display: none; }
body.home .hb-packages .hb-pk-card__media { aspect-ratio: 16 / 10; margin: 12px 12px 0; border-radius: 28px; }
body.home .hb-packages .hb-pk-card__body { padding: 12px 18px 0; }
body.home .hb-packages .hb-pk-card__title { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
body.home .hb-packages .hb-pk-card__chips.hb-pkc__facts { position: static; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 0; background: none; border-radius: 0; font-size: 13.5px; line-height: 1.2; color: #4a403a; white-space: nowrap; }
body.home .hb-packages .hb-pk-card:not([data-hbhpk]) .hb-pk-card__chips { visibility: hidden; }
body.home .hb-packages .hb-pk-card__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; }
body.home .hb-packages .hb-pk-card__items li { font-size: 14.5px; line-height: 1.35; }
body.home .hb-packages .hb-pk-card__items li.hb-pkc__more::before { display: none; }
body.home .hb-packages .hb-pk-card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 18px; margin-top: 8px; }
body.home .hb-packages .hb-pk-card__price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
body.home .hb-packages .hb-pk-card__from, body.home .hb-packages .hb-pk-card__amount { line-height: 1.15; }
body.home .hb-packages .hb-pk-card__total { line-height: 1.3; }
body.home .hb-packages .hb-pk-card__cta.hb-btn { width: auto; min-width: 0; white-space: nowrap; padding-inline: 16px; }
@media (max-width: 767px) { body.home .hb-packages .hb-pk-grid { grid-auto-columns: 90%; } }
body.home .hb-packages .hb-pk-card__amount { white-space: nowrap; }
body.home .hb-packages .hb-pk-card__total { white-space: nowrap; font-size: 13px; }
@media (max-width: 479px) { body.home .hb-packages .hb-pk-card__cta.hb-btn { padding-inline: 12px; font-size: 15px; } body.home .hb-packages .hb-pk-card__cta .hb-btn__arrow { display: none; } }
/* QAV-1: the reviews rail keeps 6px of bottom padding for card shadows; cancel it so the panel is 44px above and 44px below on phones. */
@media (max-width: 767px) { body.home .hb-reviews__grid { margin-bottom: -6px; } }

/* ---- The same cards closing a regular page (17/10/2026, owner: identical to the home section) ----------------------
   template-parts/catering/paths.php prints the shared list inside the page's closing panel (.hb-faqp__cta on /gallery/,
   /packages/, /faq/, the catering pages). Only the room around the list changes: a little more air above for the round
   photos that rise out of the cubes, two cubes centred when the page skips its own way. main.css styles every <p> in
   that panel (18px, centred, max 760px), so the card's own text is restated here at the panel's specificity. */
.hb-ways__list--panel { margin-top: calc(var(--hbw-rise) + 30px); }
.hb-ways__list--panel:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.hb-faqp__cta .hb-ways__list--panel .hb-way__text { max-width: 30em; margin: 10px 0 22px; font-size: 17px; line-height: 1.45; }
@media (min-width: 768px) and (max-width: 1023px) { .hb-faqp__cta .hb-ways__list--panel .hb-way__text { font-size: 16px; } }
@media (max-width: 767px) {
	.hb-ways__list--panel, .hb-ways__list--panel:not(:has(> li:nth-child(3))) { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-top: 22px; }
	.hb-faqp__cta .hb-ways__list--panel .hb-way__text { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
}

/* "ועוד N" is a real toggle (owner 17/10/2026) */
.hb-pkc__morebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #8a5600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hb-pkc__morebtn::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out; }
.hb-pkc__morebtn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.hb-pkc__morebtn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
/* Owner 17/10: the photo discs rise above the cards, so the list keeps that rise plus air under the subtitle
   (the home's shared "margin-top:0" for section lists had removed it and the discs touched the text). */
@media (min-width: 768px) { body.home .hb-ways__list:not(.hb-ways__list--panel) { margin-top: calc(var(--hbw-rise) + 28px); } }

/* Colour trial, home page only (owner, 25/10/2026): no brown or beige behind the page, a light footer.
   The panels and cubes keep their own colours. Once approved, drop the body.home scope to use it site-wide.
   The page colour also painted a full-width section (.hb-catering), the gap between clients and reviews
   (.hb-trust__line) and the intro loader, so they turn white with it. */
html body.home { background-color: #fff; }
html body.home .hb-catering { background: #fff; }
html body.home .hb-trust__line { background: #fff; }
html.hb-loading body.home .hb-loader { background: #fff; }

/* Footer: #ecdfd9, all its text in the headings' brown (owner, 25/10/2026); the gold and WhatsApp icons keep their colour. */
html body.home .hb-footer { background: #ecdfd9; color: #352b24; }
html body.home .hb-footer a:hover { color: #352b24; }
html body.home :is(.hb-footer__brand p, .hb-footer__col ul, .hb-footer__bottom, .hb-footer__credit) { color: #352b24; }
html body.home .hb-footer__note { opacity: 1; }
html body.home :is(.hb-footer__head, .hb-footer__contact li a, .hb-footer__contact strong, .hb-footer__credit a, .hb-footer__lang [aria-current]) { color: #352b24; }
html body.home .hb-footer__bottom { border-top-color: rgba(53, 43, 36, .14); }
html body.home .hb-footer__sep { background: rgba(53, 43, 36, .25); }
html body.home .hb-footer__lang img { filter: brightness(0); opacity: .7; }
/* The kashrut badge is drawn light; on light backgrounds the site darkens it (as in the stuck header). */
html body.home .hb-footer__badge { filter: brightness(0); opacity: .78; }
/* "איך תרצו להזמין?": the three cubes turn white; the panel around them keeps its colour (owner, 25/10/2026). */
html body.home .hb-ways .hb-way { background: #fff; }
/* The benefits strip under the hero ("כשרות בד״ץ מהדרין רובין"…): the tiles in #ecdfd9; the frame and the hairlines
   between them (the list's own colour behind 3px padding and gaps) turn white, so the tiles stay apart. */
html body.home .hb-benefits__list { background: #fff; }
html body.home .hb-benefits__item { background: #ecdfd9; }
/* "בין לקוחותינו" and the reviews: one panel, beige instead of green. */
html body.home .hb-trust { background: #eae0d9; }
/* "מהאירועים שלנו" (owner, 25/10/2026): the trust panel's diagonal bottom (a mask) used to show the beige page;
   on the white page it left a white wedge. The gallery, with its bagel pattern, now starts 120px higher, under the
   panel (which sits above it), so the pattern runs up into the wedge. The extra padding keeps the content in place. */
html body.home .hb-trust { position: relative; z-index: 1; }
html body.home .hb-gallery { margin-top: -120px; padding-top: calc(var(--hb-sec-y, 72px) + 120px); }
/* Trust panel: less air under the reviews carousel (owner, 26/10/2026). The panel's diagonal bottom (a mask) rises
   about 66px on the right, so the cards keep ~90px above the panel's lowest edge. */
html body.home .hb-trust .hb-reviews { padding-bottom: 48px; }

/* FAQ "more" (26/10/2026, owner): the rest of the questions wait hidden in the list and come in 8 at a time (main.js). */
.hb-faq .hb-faq__item[hidden] { display: none; }
.hb-faq__more .hb-btn svg { flex: none; margin-inline-start: 10px; }

/* Packages (26/10/2026, owner): no filter on the home page. The line above "לכל החבילות והדילים" sends anyone who wants
   something else to the packages page. */
.hb-packages__more-text { max-width: 1100px; margin: 0 auto 20px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.45; }
/* The line above the cards is now the section's lead (it was a heading under the filter): close to the title, one line on desktop. */
html body.home .hb-packages__subhead { max-width: 980px; margin: 16px auto var(--hb-title-gap, 28px); font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; line-height: 1.45; }
@media (max-width: 767px) { html body.home .hb-packages__subhead { margin-inline: 16px; } }

/* Clients and reviews (26/10/2026, owner: brighter, not pale): the cubes are white (logo cards, review cards, the slider's
   arrows); the trust panel keeps #eae0d9. Home only, like the rest of the colour trial; the arrows keep their dark hover. */
html body.home .hb-clients__track li { background: #fff; }
html body.home .hb-reviews .ti-widget[data-pid][data-layout-id] .ti-review-item > .ti-inner { background: #fff !important; }
html body.home .hb-reviews .ti-widget[data-pid][data-layout-id] .ti-controls :is(.ti-next, .ti-prev):not(:hover) { background: #fff !important; outline-color: #fff !important; }

/* The home packages are a link target now (/#packages, 26/10/2026): land below the fixed header. */
#packages { scroll-margin-top: 120px; }