/* Protary — site stylesheet. Generated from the design prototype by build/tools/pack-assets.py; edit wp-adapt.css for WP glue. */
/* ===== Tokens (future Elementor Global Kit) ===== */
:root {
--green: #0D6B3B; /* green-deep: surfaces, rails, links */
--green-ink: #0A5530; /* pressed/hover of green */
--leaf: #4EA54C; /* green-leaf: hover lines only */
--gold: #FCBC38; /* one accent per screen, dark text only */
--gold-hover: #F3AE1E;
--charcoal: #333333; /* footer */
--ink: #1F1F1F; /* body text */
--ink-2: #4A4A4A; /* secondary text (7.9:1 on paper) */
--ink-3: #5E5E5E; /* inactive category words (5.7:1 on paper) */
--paper: #F6F3EC; /* page base, warm white */
--white: #FFFFFF; /* tile fields */
--line: #D8D1C2; /* hairlines on paper */
--plaque: #2B2B2B; /* photo plaques: white Assistant 800 on charcoal */
--on-green: #FFFFFF;
--on-green-2: #E3EFE7; /* secondary text on green (5.6:1) */
--on-dark: #E6E6E6; /* text on charcoal (9.5:1) */
--field-line: #857F73; /* form field border, 4:1 on white */
--error: #B42318; /* error text, 6.1:1 on white */
--font-display: 'Assistant', 'Heebo', sans-serif;
--font-text: 'Heebo', sans-serif;
--fs-h1: 72px;
--fs-h2: 56px;
--fs-word: 44px; /* category words */
--fs-plaque: 54px; /* ≥1440; 44 at 1280–1439, 36 at 768–1279, 28 mobile */
--fs-gold: 42px;
--fs-h3: 28px;
--fs-body: 20px;
--fs-ui: 18px;
--fs-small: 17px;
--fs-num: 144px; /* the one big number of the about tile */
--fs-plaque-sm: 34px; /* captions on about photos */
--fs-phone: 40px;
--hdr-h: 88px;
--tabs-h: 78px; /* sticky category row (44px words + padding + hairline) */
--rail-air: 52px; /* air above every subcategory rail */
--pgap: 6px; /* mosaic gap */
--wrap: 1680px;
--pad-x: 64px;
--section-y: 136px;
--radius: 3px;
--ease: cubic-bezier(.2, .7, .2, 1);
}
/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: 1.68;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; letter-spacing: normal; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ico:where(:not(.spsc *)) { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.skip-link {
position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100;
background: var(--green); color: var(--white); padding: 12px 20px; font-weight: 500; font-size: var(--fs-ui);
text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; outline-color: var(--gold); }
/* ===== Buttons & links ===== */
.btn:where(:not(.spsc *)) {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 50px; padding: 0 22px; border-radius: var(--radius);
font-family: var(--font-text); font-size: var(--fs-ui); font-weight: 500; line-height: 1.2;
text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s;
}
.btn:where(:not(.spsc *)) .ico:where(:not(.spsc *)) { font-size: 20px; }
.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--green-ink); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--block { width: 100%; }
.text-link {
display: inline-flex; align-items: center; gap: 10px;
color: var(--green); font-weight: 500; font-size: var(--fs-ui); line-height: 1.4;
text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}
.text-link .ico:where(:not(.spsc *)) { font-size: 22px; }
.text-link:hover { color: var(--green-ink); text-decoration-thickness: 3px; text-decoration-color: var(--leaf); }
/* ===== Header ===== */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--paper);
transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr {
height: var(--hdr-h); display: flex; align-items: center; gap: 28px;
padding-inline: var(--pad-x); max-width: var(--wrap); margin-inline: auto;
}
.hdr-brand { display: block; flex: none; margin-inline-start: -8px; }
.hdr-brand img { height: 60px; width: auto; }
.hdr-since {
flex: none; margin-inline-start: -12px; padding-inline-start: 16px; border-inline-start: 1px solid var(--line);
font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); line-height: 1.3;
}
.hdr-nav { margin-inline-start: 12px; }
.hdr-nav ul { display: flex; gap: 28px; }
.hdr-nav a { position: relative; font-size: var(--fs-ui); font-weight: 500; text-decoration: none; padding-block: 8px; white-space: nowrap; }
@media (max-width: 1599px) {
.hdr { gap: 20px; }
.hdr-nav { margin-inline-start: 4px; }
.hdr-nav ul { gap: 22px; }
.hdr-brand img { height: 52px; }
.hdr-phone bdi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hdr-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--leaf); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.hdr-nav a:hover::after { transform: scaleX(1); }
.hdr-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 500; text-decoration: none; white-space: nowrap; }
.hdr-phone .ico:where(:not(.spsc *)) { font-size: 19px; color: var(--green); }
.hdr-phone:hover bdi { text-decoration: underline; text-underline-offset: 5px; }
.hdr-lang { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); white-space: nowrap; color: var(--ink-2); }
.hdr-lang a { text-decoration: none; color: var(--ink-2); }
.hdr-lang a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hdr-lang a:hover { color: var(--ink); }
.icon-btn {
width: 46px; height: 46px; display: inline-grid; place-items: center; flex: none;
border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--green); transition: border-color .2s;
}
.icon-btn .ico:where(:not(.spsc *)) { font-size: 24px; }
.icon-btn:hover { border-color: var(--green); }
.burger { display: none; }
.burger-lines, .burger-lines::before, .burger-lines::after { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s; }
.burger-lines { position: relative; }
.burger-lines::before, .burger-lines::after { content: ""; position: absolute; inset-inline-start: 0; }
.burger-lines::before { top: -7px; }
.burger-lines::after { top: 7px; }
.burger[aria-expanded="true"] .burger-lines { background: transparent; }
.burger[aria-expanded="true"] .burger-lines::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines::after { transform: translateY(-7px) rotate(-45deg); }
.mnav { position: fixed; inset: var(--hdr-h) 0 0 0; background: var(--paper); overflow-y: auto; padding: 8px 16px 32px; border-top: 1px solid var(--line); }
.mnav[hidden] { display: none; }
.mnav li a {
display: block; padding: 16px 0; border-bottom: 1px solid var(--line);
font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.2; text-decoration: none;
}
.mnav-foot { display: grid; gap: 22px; padding-top: 28px; justify-items: start; }
.mnav-foot .hdr-phone { display: inline-flex; font-size: 22px; }
.mnav-foot .btn--block { justify-self: stretch; }
.mnav-foot .hdr-lang { font-size: var(--fs-ui); }
/* ===== Hero mosaic ===== */
.mosaic {
display: grid; gap: var(--pgap);
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: 1.2fr 1fr;
height: clamp(560px, min(calc(100svh - var(--hdr-h)), 62vw), 1000px);
}
.tile { position: relative; overflow: hidden; min-width: 0; text-decoration: none; }
.tile--lead {
grid-column: 1 / span 5; grid-row: 1;
background: var(--green); color: var(--on-green);
display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
padding: clamp(28px, 3.6vw, 64px);
/* text edge lines up with the logo and the content column below */
padding-inline-start: max(var(--pad-x), calc((100vw - var(--wrap)) / 2 + var(--pad-x)));
}
.tile--lead h1 { font-size: var(--fs-h1); line-height: 1.06; }
.tile--lead p { font-size: var(--fs-body); line-height: 1.6; color: var(--on-green-2); max-width: 30em; text-wrap: pretty; }
.tile--alcohol { grid-column: 6 / span 7; grid-row: 1; }
.tile--bakery { grid-column: 1 / span 4; grid-row: 2; }
.tile--grocery { grid-column: 5 / span 3; grid-row: 2; }
.tile--sweets { grid-column: 8 / span 3; grid-row: 2; }
.tile--gold { grid-column: 11 / span 2; grid-row: 2; }
.ph {
position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
transition: transform 1.1s var(--ease);
}
.tile--alcohol .ph { background-position: 50% 30%; }
.tile--bakery .ph { background-position: 46% 30%; }
.tile--grocery .ph { background-position: 44% 30%; }
.tile--sweets .ph { background-position: 36% 40%; }
.tile--photo:hover .ph { transform: scale(1.035); }
.plaque {
position: absolute; bottom: 0; inset-inline-start: 0;
display: inline-flex; align-items: center;
background: var(--plaque); color: var(--white);
font-family: var(--font-display); font-weight: 800; font-size: var(--fs-plaque); line-height: 1;
padding: 7px 20px 13px;
box-shadow: inset 0 -4px 0 var(--plaque);
transition: box-shadow .25s;
}
.tile--photo:hover .plaque { box-shadow: inset 0 -4px 0 var(--leaf); }
.tile--photo:focus-visible { outline: none; }
.tile--photo:focus-visible::after {
content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 7px var(--green);
}
.tile--gold {
background: var(--gold); color: var(--ink);
display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
padding: clamp(20px, 2vw, 32px);
transition: background-color .2s;
}
/* one bottom-start lockup: icon → title → value line */
.tile--gold > .ico:where(:not(.spsc *)) { font-size: 34px; margin-bottom: 14px; transition: transform .25s var(--ease); }
.tile--gold:hover { background: var(--gold-hover); }
.tile--gold:hover > .ico:where(:not(.spsc *)) { transform: translateY(4px); }
.gold-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-gold); line-height: 1.04; }
.gold-sub { font-size: var(--fs-small); font-weight: 500; margin-top: 12px; line-height: 1.4; padding-top: 12px; border-top: 2px solid var(--ink); }
.tile--gold:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--ink); }
/* load-in: photos settle, content stays visible without JS */
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.tile--photo .ph { animation: settle 1.4s var(--ease) both; }
/* ===== Shelf (category → subcategory → brands) ===== */
.shelf { padding-block: var(--section-y) calc(var(--section-y) - 16px); }
.shelf-head { display: grid; gap: 14px; max-width: 760px; }
.shelf-head h2 { font-size: var(--fs-h2); line-height: 1.08; }
.shelf-head p { color: var(--ink-2); }
.tabs-row {
margin-top: 56px; border-bottom: 1px solid var(--line);
background: var(--paper);
position: sticky; top: var(--hdr-h); z-index: 5; /* stays within .shelf: the words to switch category are always at hand */
}
/* Tabs get 12px inline padding (pulled back by the negative margin) so the focus ring is drawn INSIDE the scroll box and never clipped. */
.tabs:where(:not(.spsc *)) { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; }
.tabs:where(:not(.spsc *))::-webkit-scrollbar { display: none; }
.tab:where(:not(.spsc *)) {
position: relative; flex: none;
font-family: var(--font-display); font-weight: 800; font-size: var(--fs-word); line-height: 1.1;
color: var(--ink-3); padding: 8px 12px 20px; transition: color .2s;
}
.tab:where(:not(.spsc *))::after {
content: ""; position: absolute; inset-inline: 12px; bottom: 0; height: 3px;
background: var(--leaf); transform: scaleX(0); transition: transform .25s var(--ease);
}
.tab:where(:not(.spsc *)):hover { color: var(--ink); }
.tab:where(:not(.spsc *)):hover::after { transform: scaleX(1); }
.tab:where(:not(.spsc *))[aria-selected="true"] { color: var(--ink); }
.tab:where(:not(.spsc *))[aria-selected="true"]::after { background: var(--gold); transform: scaleX(1); }
.tab:where(:not(.spsc *)):focus-visible { outline-offset: -3px; }
.panels { margin-top: 48px; }
.panel:where(:not(.spsc *))[hidden] { display: none; }
.panel:where(:not(.spsc *)):focus-visible { outline-offset: 8px; }
.panel-grid { display: grid; grid-template-columns: minmax(260px, 25%) minmax(0, 1fr); gap: 48px; align-items: start; }
.panel-aside { position: sticky; top: calc(var(--hdr-h) + var(--tabs-h) + 28px); display: grid; gap: 18px; justify-items: start; }
.shelf-photo { margin: 0 0 4px; width: 100%; aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--line); }
.shelf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.warn { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); line-height: 1.5; max-width: 22em; }
/* Subcategory "rails" on ONE shared column grid: every tile of the panel sits on the same columns (6px gutters, the hero's
mosaic grammar), so tile edges line up from rail to rail. --cols comes from the width of .groups-box (container query);
a rail spans min(its tile count, --cols) columns and wraps inside its own span. Each rail takes two grid rows
(label row + tiles row, rows as subgrid), so the rules of rails that share a row sit on one line even when a label wraps.
grid-auto-flow:dense lets a short rail fill the end of a row; the DOM (and screen-reader) order stays the client's term order. */
.groups-box { container: groups / inline-size; }
.groups {
--cols: 2;
display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
column-gap: var(--pgap); row-gap: 0; grid-auto-flow: row dense;
margin-top: calc(var(--rail-air) * -1);
}
@container groups (min-width: 440px) { .groups { --cols: 3; } }
@container groups (min-width: 620px) { .groups { --cols: 4; } }
@container groups (min-width: 840px) { .groups { --cols: 5; } }
@container groups (min-width: 1080px) { .groups { --cols: 6; } }
.sub:where(:not(.spsc *)) {
--n: 1;
grid-column: span min(var(--n), var(--cols)); grid-row: span 2;
display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; min-width: 0;
}
.sub-label {
grid-column: 1 / -1; align-self: end;
font-size: var(--fs-h3); line-height: 1.15; color: var(--green); text-wrap: balance;
padding-top: var(--rail-air); padding-bottom: 10px; margin-bottom: var(--pgap); border-bottom: 3px solid var(--green);
}
.sub-sep { color: var(--ink-3); }
.sub-brands { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: var(--pgap); align-content: start; }
.brand {
container-type: inline-size;
aspect-ratio: 1; background: var(--white); min-width: 0;
display: flex; flex-direction: column; align-items: center;
padding: 9% 7% 8%; /* % of the tile width */
position: relative;
}
.brand::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--leaf); transform: scaleX(0); transition: transform .3s var(--ease); }
.brand:hover::after { transform: scaleX(1); }
/* two fixed zones in every tile: mark zone (logo or wordmark, optically a touch above centre) + label row of one fixed height */
.brand-mark { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; padding-bottom: 4cqi; }
/* --w = width of the logo ![]()
in cqi of the tile content box (tile minus 7% side padding), generated per logo:
ink width = sqrt(2900 x ink aspect) x weight factor (0.86-1.13: dense badges smaller, thin line marks larger), capped at
86 cqi wide / 52 cqi tall, then x (PNG width / ink width) because the client PNGs carry a white margin. Logos therefore span
~34-84% of the tile width instead of one fixed 55-60%: equal visual mass, a deliberate deviation from brief 9.1.4. */
.brand--logo .brand-mark img { width: calc(var(--w, 60) * 1cqi); height: auto; max-height: 100%; object-fit: contain; transition: transform .35s var(--ease); }
.brand--logo:hover img { transform: scale(1.04); }
.brand-name {
flex: none; height: calc(var(--fs-ui) * 1.3 + 15px); width: 100%;
font-size: var(--fs-ui); font-weight: 500; line-height: 1.3; text-align: center; color: var(--ink-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-name::before { content: ""; display: block; width: 32px; height: 3px; margin: 0 auto 12px; background: var(--green); }
/* typographic tile = a real wordmark: ONE size band for Latin and Hebrew (22-28px; 20-24px only for single words over 9 letters), two-word names break onto two lines
instead of shrinking; ink-2 so its optical weight sits near the average logo. */
.wordmark {
display: grid; justify-items: center;
font-family: var(--font-display); font-weight: 800; color: var(--ink-2);
font-size: clamp(22px, 15cqi, 28px); line-height: 1.08; text-align: center;
white-space: nowrap;
}
.wordmark--long { font-size: clamp(20px, 12cqi, 24px); } /* one-word names over 9 letters (Grangestone, שוקולאטייה) cannot break */
/* panel reveal when switching category */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel:where(:not(.spsc *)).is-entering .shelf-photo, .panel:where(:not(.spsc *)).is-entering .sub-label, .panel:where(:not(.spsc *)).is-entering .brand {
animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms);
}
/* ===== Catalogs band ===== */
.catalogs { background: var(--green); color: var(--white); padding-block: 112px 120px; }
.catalogs-head { display: grid; gap: 12px; max-width: 760px; }
.catalogs-head h2 { font-size: var(--fs-h2); line-height: 1.08; }
.catalogs-head p { color: var(--on-green-2); }
.covers { margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.cover-link { display: flex; flex-direction: column; text-decoration: none; color: var(--white); height: 100%; }
.cover-link:focus-visible { outline-color: var(--white); outline-offset: 6px; }
/* A cover is designed as a cover: paper field, small Protary logo, the category word set large, one detail crop at the foot. */
.cover-link { container-type: inline-size; } /* cqi below = the cover's width */
.cover-art {
position: relative; aspect-ratio: 3 / 4; background: var(--paper); color: var(--ink);
display: flex; flex-direction: column; align-items: flex-start; overflow: hidden;
padding: 9cqi 9cqi 0; transition: transform .35s var(--ease);
}
.cover-logo { width: 52cqi; height: auto; }
.cover-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 17cqi, 44px); line-height: 1.04; margin-top: 10cqi; }
.cover-photo { margin-top: auto; margin-inline: -9cqi; width: calc(100% + 18cqi); max-width: none; height: 46%; object-fit: cover; flex: none; }
.cover-art--full { background: var(--white); padding-bottom: 9cqi; }
.cover-art--full .cover-word { color: var(--green); }
.cover-fact { margin-top: auto; width: 100%; padding-top: 3cqi; border-top: 3px solid var(--green); display: grid; }
.cover-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 28cqi, 72px); line-height: 1; color: var(--green); }
.cover-meta { font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--ink); }
.cover-link:hover .cover-art { transform: translateY(-6px); }
.cover-title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.15; margin-top: 22px; }
.cover-dl {
display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
font-size: var(--fs-ui); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}
.cover-dl .ico:where(:not(.spsc *)) { font-size: 20px; }
.cover-link:hover .cover-dl { text-decoration-thickness: 3px; }
.cover .btn:where(:not(.spsc *)) { margin-top: 14px; align-self: flex-start; }
.cover-link:hover .btn--gold { background: var(--gold-hover); }
/* ===== About «מאז 1990»: second mosaic ===== */
.about { padding-bottom: calc(var(--section-y) * 1.2); } /* ≥160px of cream before the green catalogs band */
/* Mirror of the hero: the hero's green tile is on the start (right) side, here it is on the end (left) side, so the two
mosaics rhyme as a zigzag instead of repeating. min-height, not height: the lead tile grows when the text needs it. */
.about-mosaic {
display: grid; gap: var(--pgap);
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: 1.2fr 1fr;
min-height: clamp(700px, 56vw, 960px);
}
.about-lead {
grid-column: 8 / span 5; grid-row: 1 / span 2;
background: var(--green); color: var(--on-green);
display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
padding: clamp(36px, 4vw, 72px) clamp(28px, 3.6vw, 64px);
/* text block ends on the content column edge (left in RTL), like the hero lead starts on it */
padding-inline-end: max(var(--pad-x), calc((100vw - var(--wrap)) / 2 + var(--pad-x)));
}
.about-lead h2 { font-size: var(--fs-h2); line-height: 1.08; max-width: 10.5em; text-wrap: balance; }
.about-lead > p:not([class]) { color: var(--on-green-2); max-width: 32em; text-wrap: pretty; }
.about-links { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.text-link--light { color: var(--white); }
.text-link--light:hover { color: var(--white); text-decoration-color: var(--white); }
.about-lead :focus-visible { outline-color: var(--white); }
.about-fact { margin-top: auto; width: 100%; display: grid; gap: 12px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .35); }
.about-num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-num); line-height: .92; color: var(--gold); }
.about-num-label { font-size: var(--fs-body); font-weight: 500; line-height: 1.45; color: var(--white); max-width: 21em; text-wrap: balance; }
.about-photo { position: relative; margin: 0; overflow: hidden; min-width: 0; background: var(--plaque); }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-photo--hall { grid-column: 1 / span 7; grid-row: 1; }
.about-photo--fleet { grid-column: 1 / span 7; grid-row: 2; }
.about-photo--hall img { object-position: 30% 40%; } /* numbered racks and the depth of the aisle lead; the driver stays off-centre */
.about-photo--fleet img { object-position: 40% 62%; } /* the branded truck and the row of cabs */
.plaque--sm { font-size: var(--fs-plaque-sm); padding: 6px 16px 10px; box-shadow: none; }
/* ===== Contact ===== */
.contact { padding-block: var(--section-y); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
.contact-info { position: sticky; top: calc(var(--hdr-h) + 32px); } /* same device as the shelf aside: the details stay beside the long form */
.contact-info h2 { font-size: var(--fs-h2); line-height: 1.08; }
.contact-intro { margin-top: 14px; color: var(--ink-2); max-width: 30em; }
.contact-list { margin: 44px 0 0; border-top: 3px solid var(--green); }
.contact-list > div {
display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
padding-block: 16px; border-bottom: 1px solid var(--line);
}
.contact-list dt { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.contact-list dd { margin: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.contact-list .is-phone dd a { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-phone); line-height: 1.1; color: var(--green); text-decoration: none; }
.contact-list .is-phone dd a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--leaf); }
.plain-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.plain-link:hover { text-decoration-color: var(--green); }
.contact-list .text-link { font-size: var(--fs-ui); }
.contact-social { gap: 6px 28px; }
.lead-panel { background: var(--white); padding: clamp(28px, 3.4vw, 56px); }
.lead-form { display: grid; gap: 28px; }
.form-head { display: grid; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.form-title { font-size: var(--fs-h3); line-height: 1.15; }
.form-req { font-size: var(--fs-small); color: var(--ink-2); }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 24px; }
.field label, .field legend { font-size: var(--fs-ui); font-weight: 500; line-height: 1.35; color: var(--ink); padding: 0; }
.req { color: var(--error); font-weight: 700; }
.field input:not([type="radio"]), .field textarea {
width: 100%; min-height: 56px; padding: 12px 16px; margin: 0;
font: inherit; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink);
background: var(--white); border: 1.5px solid var(--field-line); border-radius: var(--radius);
transition: border-color .15s;
}
.field input[dir="ltr"] { text-align: right; }
.field textarea { min-height: 136px; resize: vertical; }
.field input:not([type="radio"]):hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:not([type="radio"]):focus-visible, .field textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 0; border-color: var(--green); }
.field[data-invalid] input { border-color: var(--error); border-width: 2px; }
.field-error { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); font-weight: 500; line-height: 1.45; color: var(--error); }
.field-error::before { content: "!"; flex: none; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center; background: var(--error); color: var(--white); font-size: 15px; font-weight: 700; line-height: 1; border-radius: var(--radius); }
.field-error:empty { display: none; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 30px; margin-top: 4px; }
.radio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-ui); cursor: pointer; }
.radio input {
appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 22px; height: 22px;
border: 2px solid var(--field-line); border-radius: 50%; display: grid; place-items: center; background: var(--white);
}
.radio input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform .15s var(--ease); }
.radio input:checked { border-color: var(--green); }
.radio input:checked::before { transform: scale(1); }
.radio input:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.radio:hover input { border-color: var(--green); }
.form-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; padding-top: 4px; }
.form-privacy { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.form-privacy a { color: var(--green); font-weight: 500; text-underline-offset: 5px; }
.btn--submit { min-height: 56px; padding-inline: 34px; }
.btn--submit .ico:where(:not(.spsc *)) { font-size: 20px; }
.form-status { font-size: var(--fs-small); font-weight: 500; color: var(--error); }
.form-status:empty { display: none; }
.form-done { display: grid; gap: 14px; align-content: start; justify-items: start; min-height: 420px; padding-top: 32px; border-top: 3px solid var(--green); }
.form-done-mark { width: 56px; height: 56px; display: grid; place-items: center; background: var(--green); color: var(--white); border-radius: var(--radius); margin-bottom: 8px; }
.form-done-mark .ico:where(:not(.spsc *)) { font-size: 30px; }
.form-done p { max-width: 30em; }
.form-done[hidden] { display: none; }
.lead-form[hidden] { display: none; }
.form-done a { color: var(--green); font-weight: 500; }
.form-done:focus-visible { outline-offset: 8px; }
/* ===== Footer ===== */
.site-footer { background: var(--charcoal); color: var(--white); border-bottom: 12px solid var(--green); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; padding-block: 96px 72px; }
.foot-logo { display: inline-block; background: var(--paper); padding: 14px 20px 14px 18px; border-radius: var(--radius); }
.foot-logo img { height: 50px; width: auto; }
.foot-tagline { margin-top: 22px; font-size: var(--fs-ui); color: var(--on-dark); }
.foot-social { display: flex; gap: 12px; margin-top: 26px; }
.icon-btn--dark { color: var(--white); border-color: #6E6E6E; }
.icon-btn--dark:hover { border-color: var(--white); }
.foot-h { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--gold); margin-bottom: 18px; }
.foot-col ul { display: grid; gap: 10px; }
.foot-col li { font-size: var(--fs-ui); line-height: 1.5; color: var(--on-dark); }
.foot-col a { color: var(--on-dark); text-decoration: none; }
.foot-col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 5px; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 48px; padding-block: 28px 34px; border-top: 1px solid #555; }
.foot-warn { font-size: var(--fs-ui); font-weight: 500; }
.foot-warn strong { font-weight: 700; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-small); color: var(--on-dark); }
.foot-legal a { color: var(--on-dark); text-underline-offset: 5px; }
.foot-legal a:hover { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--gold); }
.lead-since { display: none; }
.hdr-cta-ico { display: none; }
/* ===== ≥1600: roomier tiles ===== */
@media (min-width: 1600px) {
:root { --pad-x: 120px; }
}
/* 1280–1439: phone collapses to an icon button so the full menu still fits */
@media (max-width: 1439px) {
:root { --pad-x: 40px; --fs-plaque: 44px; }
.hdr-tools > .hdr-phone { width: 46px; height: 46px; justify-content: center; border: 1.5px solid var(--line); border-radius: var(--radius); }
.hdr-tools > .hdr-phone:hover { border-color: var(--green); }
.hdr-tools > .hdr-phone bdi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1800px) { :root { --pad-x: 64px; } }
/* ===== Laptop ≤1279: burger ===== */
@media (max-width: 1279px) {
.hdr-nav, .hdr-phone, .hdr-tools > .hdr-lang { display: none; }
.burger { display: inline-grid; }
.hdr { gap: 24px; }
:root { --fs-plaque: 36px; --fs-gold: 36px; }
.plaque { padding: 6px 16px 10px; }
}
/* ===== Tablet ≤1099 ===== */
@media (max-width: 1099px) {
:root { --fs-h1: 60px; --fs-h2: 48px; --fs-word: 40px; --pad-x: 40px; --section-y: 104px; }
.tile--lead { grid-column: 1 / span 6; }
.tile--alcohol { grid-column: 7 / span 6; }
.tile--bakery { grid-column: 1 / span 3; }
.tile--grocery { grid-column: 4 / span 3; }
.tile--sweets { grid-column: 7 / span 3; }
.tile--gold { grid-column: 10 / span 3; }
.covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ===== Mobile ≤767 ===== */
@media (max-width: 767px) {
:root {
--hdr-h: 68px; --fs-h1: 46px; --fs-h2: 36px; --fs-word: 30px; --fs-plaque: 28px; --fs-gold: 26px; --fs-h3: 24px;
--fs-body: 18px; --pad-x: 16px; --section-y: 80px; --tabs-h: 58px; --rail-air: 34px;
}
.hdr { padding-inline: 16px; gap: 12px; }
.hdr-brand img { height: 38px; }
.hdr-since, .hdr-cta { display: none; }
.hdr-tools { gap: 8px; }
.icon-btn { width: 44px; height: 44px; }
.mosaic { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
.tile--lead, .tile--alcohol { grid-column: 1 / -1; grid-row: auto; }
.tile--lead { padding: 36px var(--pad-x) 32px; gap: 16px; }
.tile--alcohol { aspect-ratio: 4 / 3; }
.tile--bakery, .tile--grocery, .tile--sweets, .tile--gold { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
.tile--alcohol .ph { background-position: 52% 40%; }
.plaque { padding: 5px 12px 9px; }
.tile--gold { padding: 16px; }
.tile--gold > .ico:where(:not(.spsc *)) { font-size: 28px; margin-bottom: 8px; }
.gold-sub { margin-top: 8px; padding-top: 8px; }
.hdr-cta-ico { display: inline-grid; }
.lead-since { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--on-green-2); }
.tabs-row { position: sticky; top: var(--hdr-h); z-index: 5; margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); margin-top: 36px; }
.tabs:where(:not(.spsc *)) { gap: 30px; }
.tab:where(:not(.spsc *)) { padding: 10px 0 14px; }
.panels { margin-top: 24px; }
.panel-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.panel-aside { position: static; }
.shelf-photo { aspect-ratio: 16 / 10; }
.tabs:where(:not(.spsc *)) { mask-image: linear-gradient(to right, transparent 0, #000 56px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px); }
.tabs:where(:not(.spsc *)).at-end { mask-image: none; -webkit-mask-image: none; }
.catalogs { padding-block: 80px 88px; }
.covers {
display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x);
margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); padding-bottom: 8px; margin-top: 40px;
scrollbar-width: none;
}
.covers::-webkit-scrollbar { display: none; }
.cover { flex: 0 0 62%; scroll-snap-align: start; }
.cover-title { font-size: 24px; }
}
/* ===== Full-page sections: responsive ===== */
@media (min-width: 1600px) { :root { --fs-num: 168px; } }
@media (max-width: 1439px) { :root { --fs-num: 128px; --fs-plaque-sm: 30px; } }
@media (max-width: 1279px) {
.about-mosaic { min-height: clamp(720px, 64vw, 800px); }
.about-lead { grid-column: 7 / span 6; gap: 22px; }
.about-photo--hall, .about-photo--fleet { grid-column: 1 / span 6; }
.foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 40px; }
}
@media (max-width: 1099px) {
:root { --fs-num: 112px; --fs-phone: 36px; }
.about-mosaic { min-height: 0; grid-template-rows: minmax(380px, auto) minmax(320px, auto); }
.contact-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.contact-info { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 48px; align-items: start; }
.contact-info h2, .contact-intro { grid-column: 1; }
.contact-list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 767px) {
:root { --fs-num: 92px; --fs-plaque-sm: 22px; --fs-phone: 34px; }
.about-mosaic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
.about-lead { grid-column: 1 / -1; grid-row: auto; padding: 40px var(--pad-x) 36px; gap: 20px; }
.about-photo--hall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
.about-photo--fleet { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
.about-photo--fleet img { object-position: 30% 62%; }
.about-links { gap: 14px 28px; }
.plaque--sm { padding: 4px 12px 8px; }
.contact-info { display: block; }
.contact-list { margin-top: 32px; }
.contact-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 14px; }
.lead-panel { margin-inline: calc(var(--pad-x) * -1); padding: 32px var(--pad-x) 36px; }
.field-row { grid-template-columns: minmax(0, 1fr); }
.form-foot { grid-template-columns: minmax(0, 1fr); }
.btn--submit { width: 100%; }
.foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; padding-block: 64px 48px; }
.foot-brand, .foot-top > .foot-col:last-child { grid-column: 1 / -1; }
.foot-bottom { padding-block: 24px 28px; }
}
/* ===== Phone ≤600: every subcategory is one horizontal rail (scroll-snap, ~2.3 tiles visible, the peek says "more").
The rail bleeds to the screen edges; tiles keep the 2-up size. Elementor: Loop Carousel per subcategory on mobile,
or this CSS on the Loop Grid container. Chrome/Edge make a scroller without focusable children keyboard-focusable. ===== */
@media (max-width: 600px) {
.groups { display: block; margin-top: 0; }
.sub:where(:not(.spsc *)) { display: block; }
.sub:where(:not(.spsc *)) + .sub:where(:not(.spsc *)) { margin-top: 30px; }
.sub-label { padding-top: 0; }
.sub-brands {
display: grid; grid-auto-flow: column; grid-auto-columns: 44%; grid-template-columns: none;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x);
}
.sub-brands::-webkit-scrollbar { display: none; }
.brand { scroll-snap-align: start; }
}
/* ===== Motion preferences ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ABOUT video: muted background loop (pausable, WCAG 2.2.2) + full film with sound in a modal dialog */
.about-video { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.about-video__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-video__ctrl { position: absolute; inset-block-start: 24px; inset-inline-start: 24px; display: flex; gap: 8px; }
.vbtn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 3px; background: #fff; color: var(--ink); font: 500 18px/1 var(--font-text); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.28); transition: background .2s, transform .2s; }
.vbtn .ico:where(:not(.spsc *)) { width: 22px; height: 22px; color: var(--green); }
.vbtn:hover { background: #F4F1EA; }
.vbtn:active { transform: translateY(1px); }
.vbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.vbtn__meta { color: #555; font-weight: 400; padding-inline-start: 12px; border-inline-start: 1px solid #ddd; }
.vbtn--icon { width: 52px; padding: 0; justify-content: center; }
.vbtn--icon .ico-play, .vbtn--icon[aria-pressed="true"] .ico-pause { display: none; }
.vbtn--icon[aria-pressed="true"] .ico-play { display: block; }
.film { width: min(1200px, 94vw); padding: 0; border: 0; background: #000; overflow: visible; }
.film::backdrop { background: rgba(10, 20, 14, .86); }
.film__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film__close { position: absolute; inset-block-start: -56px; inset-inline-end: 0; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer; }
.film__close .ico:where(:not(.spsc *)) { width: 22px; height: 22px; }
.film__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1279px) { .about-video { grid-column: 1 / span 6; } }
@media (max-width: 767px) {
.about-video { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
.about-video__ctrl { inset-block-start: 14px; inset-inline-start: 14px; }
.vbtn { min-height: 48px; padding: 0 16px; font-size: 17px; }
.vbtn--icon { width: 48px; padding: 0; }
.film__close { inset-block-start: -54px; }
}
/* HERO lead tile with the client's film as a living background under a brand-green veil (text stays AA on any frame) */
.tile--lead-video { position: relative; overflow: hidden; isolation: isolate; }
.tile--lead-video > :not(.lead-video):not(.lead-veil):not(.lead-pause) { position: relative; z-index: 2; }
.tile--lead-video p { color: #fff; }
.lead-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(.35) brightness(.55); }
.lead-veil { position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to left, rgba(13,107,59,.5) 0%, rgba(13,107,59,.5) 55%, rgba(13,107,59,.3) 100%); }
.lead-pause { position: absolute; z-index: 3; inset-block-end: 20px; inset-inline-end: 20px; width: 44px; height: 44px; display: grid; place-items: center;
border: 1px solid rgba(255,255,255,.45); border-radius: 3px; background: rgba(0,0,0,.18); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.lead-pause:hover { background: rgba(0,0,0,.32); border-color: #fff; }
.lead-pause:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lead-pause .ico:where(:not(.spsc *)) { width: 20px; height: 20px; }
.lead-pause .ico-play, .lead-pause[aria-pressed="true"] .ico-pause { display: none; }
.lead-pause[aria-pressed="true"] .ico-play { display: block; }
@media (max-width: 767px) { .lead-veil { background: rgba(13,107,59,.5); } .lead-pause { inset-block-end: 14px; inset-inline-end: 14px; } }
/* SHELF HEAD 2026-10-05: running logo wall (decorative duplicate of the brands below, pausable) + photo card tabs that collapse to words when stuck */
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.shelf-head__text { display: grid; gap: 14px; max-width: 760px; }
.mq-toggle { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink-2); font: 500 var(--fs-small)/1 var(--font-text); cursor: pointer; transition: border-color .2s, color .2s; }
.mq-toggle:hover { border-color: var(--green); color: var(--ink); }
.mq-toggle .ico:where(:not(.spsc *)) { width: 18px; height: 18px; color: var(--green); }
.mq-toggle .ico-play, .mq-toggle[aria-pressed="true"] .ico-pause { display: none; }
.mq-toggle[aria-pressed="true"] .ico-play { display: block; }
.marquee { margin-top: 48px; display: grid; gap: 6px; overflow: hidden; direction: ltr;
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.mq-row { overflow: hidden; }
.mq-track { display: flex; gap: 6px; width: max-content; animation: mq 90s linear infinite; }
.mq-row--b .mq-track { animation-direction: reverse; animation-duration: 110s; }
.marquee:hover .mq-track, .marquee.is-paused .mq-track { animation-play-state: paused; }
.mq-item { container-type: inline-size; flex: none; width: 168px; height: 104px; display: grid; place-items: center; background: var(--white); }
.mq-item img { width: calc(var(--w, 60) * .78cqi); height: auto; max-height: 72%; object-fit: contain; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }
.tabs-sentinel { display: block; height: 1px; }
.tabs-row { margin-top: 40px; border-bottom: 0; }
.tabs:where(:not(.spsc *)) { gap: 6px; margin-inline: 0; }
.tab:where(:not(.spsc *)) { flex: 1 1 0; display: flex; align-items: center; gap: 18px; min-width: 240px; padding: 12px; background: var(--white); color: var(--ink-3);
border-bottom: 4px solid transparent; transition: background .25s var(--ease), color .25s, border-color .25s; text-align: start; }
.tab:where(:not(.spsc *))::after { display: none; }
.tab-ph { flex: none; width: 104px; height: 104px; background-size: cover; background-position: center; filter: grayscale(.6); transition: filter .3s, width .25s var(--ease), height .25s var(--ease); }
.tab-txt { display: grid; gap: 4px; }
.tab-word { font-size: var(--fs-word); line-height: 1.05; }
.tab-count { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-small); color: var(--ink-2); }
.tab:where(:not(.spsc *)):hover { color: var(--ink); border-bottom-color: var(--leaf); }
.tab:where(:not(.spsc *)):hover .tab-ph { filter: none; }
.tab:where(:not(.spsc *))[aria-selected="true"] { background: var(--green); color: #fff; border-bottom-color: var(--gold); }
.tab:where(:not(.spsc *))[aria-selected="true"] .tab-ph { filter: none; }
.tab:where(:not(.spsc *))[aria-selected="true"] .tab-count { color: var(--on-green-2); }
.tab:where(:not(.spsc *)):focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.tabs-row.is-stuck { box-shadow: 0 1px 0 var(--line); }
.tabs-row.is-stuck .tab:where(:not(.spsc *)) { padding-block: 8px; }
.tabs-row.is-stuck .tab-ph { width: 48px; height: 48px; }
.tabs-row.is-stuck .tab-word { font-size: 30px; }
.tabs-row.is-stuck .tab-count { display: none; }
@media (max-width: 1099px) { .tab:where(:not(.spsc *)) { min-width: 220px; } .tab-ph { width: 80px; height: 80px; } }
@media (max-width: 767px) {
.shelf-head { flex-direction: column; align-items: flex-start; }
.marquee { margin-top: 32px; }
.mq-item { width: 128px; height: 80px; }
.tab:where(:not(.spsc *)) { min-width: 196px; flex: none; gap: 12px; padding: 8px; }
.tab-ph { width: 64px; height: 64px; }
.tab-word { font-size: 30px; }
.tabs-row.is-stuck .tab-ph { width: 36px; height: 36px; }
.tabs-row.is-stuck .tab-word { font-size: 24px; }
}
/* 2026-10-05: tabs without thumbnails (photos already sit next to the shelf) — typographic cards */
.tab:where(:not(.spsc *)) { padding: 22px 28px 20px; min-height: 0; }
.tab-txt { gap: 6px; }
.tabs-row.is-stuck .tab:where(:not(.spsc *)) { padding: 10px 20px; }
@media (max-width: 767px) { .tab:where(:not(.spsc *)) { padding: 14px 18px; min-width: 150px; } .tabs-row.is-stuck .tab:where(:not(.spsc *)) { padding: 8px 14px; } }
/* 2026-10-05: brand strip moved directly under the hero mosaic; shelf follows with full section spacing */
.brand-strip { padding-top: var(--pgap); }
.brand-strip .marquee { margin-top: 0; }
.brand-strip__ctrl { display: flex; justify-content: flex-end; padding-top: 14px; }
.shelf { padding-top: calc(var(--section-y) + 8px); }
.shelf-head { display: grid; }
/* 2026-10-05 SHELF AS AN INDEX: one row per subcategory (label column + its tiles), hairlines between rows — unambiguous grouping */
.sub-count { display: block; margin-top: 6px; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-small); color: var(--ink-2); }
.sub-sep { margin-inline: 4px; }
@media (min-width: 601px) {
.groups { display: block; margin-top: 0; }
.sub:where(:not(.spsc *)) { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; align-items: start;
padding-block: 28px; border-top: 1px solid var(--line); }
.sub:where(:not(.spsc *)):first-child { border-top: 0; padding-top: 0; }
.sub-label { grid-column: 1; grid-row: 1; align-self: start; padding: 4px 0 0; margin: 0; border: 0;
font-size: var(--fs-h3); line-height: 1.15; text-wrap: balance; }
.sub-label .sub-name { display: block; }
.sub-label .sub-sep { display: none; }
.sub-brands { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--pgap); }
}
@media (min-width: 601px) and (max-width: 1099px) {
.sub:where(:not(.spsc *)) { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.sub-label { grid-row: auto; }
.sub-brands { grid-column: 1; grid-row: auto; }
}
@media (max-width: 600px) { .sub-label { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; } }
/* ABOUT v2 2026-10-05: lead + film poster (row 1), one number + values + house brand (row 2) */
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pgap); }
.ab-lead { grid-column: 7 / span 6; grid-row: 1; background: var(--green); color: var(--white);
padding: clamp(40px, 4.4vw, 72px) var(--pad-x) clamp(40px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.ab-lead h2 { font-size: var(--fs-h2); line-height: 1.08; max-width: 11em; text-wrap: balance; }
.ab-lead > p:not([class]) { color: var(--white); max-width: 32em; text-wrap: pretty; }
.ab-lead :focus-visible { outline-color: var(--white); }
.ab-film { grid-column: 1 / span 6; grid-row: 1; position: relative; min-height: 460px; padding: 0; border: 0; background: var(--plaque); cursor: pointer; overflow: hidden; }
.ab-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ab-film::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); transition: background .3s; }
.ab-film:hover img { transform: scale(1.03); }
.ab-film:hover::after { background: rgba(0,0,0,.08); }
.ab-film:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.ab-film__play { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%);
width: 104px; height: 104px; border-radius: 50%; background: var(--white); color: var(--green); display: grid; place-items: center;
box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .3s var(--ease); }
.ab-film__play svg { width: 44px; height: 44px; margin-inline-end: -6px; }
.ab-film:hover .ab-film__play { transform: translate(50%, -50%) scale(1.06); }
.ab-film__cap { z-index: 1; }
.ab-film__dur { margin-inline-start: 14px; padding-inline-start: 14px; border-inline-start: 2px solid rgba(255,255,255,.5); font-family: var(--font-text); font-weight: 500; }
.ab-num { grid-column: 9 / span 4; grid-row: 2; background: var(--green); padding: 40px clamp(28px, 3vw, 48px); display: grid; align-content: end; gap: 10px; min-height: 300px; }
.ab-num__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(88px, 8.6vw, 136px); line-height: .9; color: var(--gold); }
.ab-num__pre { display: block; font-size: clamp(32px, 3vw, 44px); line-height: 1; margin-bottom: 6px; }
.ab-num__t { color: var(--white); font-weight: 500; font-size: var(--fs-body); line-height: 1.45; max-width: 18em; }
.ab-values { grid-column: 5 / span 4; grid-row: 2; background: #EDE8DD; padding: 40px clamp(28px, 3vw, 48px); display: grid; align-content: center; gap: 22px; }
.ab-values h3 { font-size: 30px; line-height: 1.15; color: var(--green); text-wrap: balance; }
.ab-values ul { display: grid; gap: 0; }
.ab-values li { padding: 14px 0; border-top: 1px solid #D3CBBB; font-size: var(--fs-body); color: var(--ink); display: flex; align-items: center; gap: 14px; }
.ab-values li::before { content: ""; flex: none; width: 18px; height: 3px; background: var(--green); }
.ab-house { grid-column: 1 / span 4; grid-row: 2; background: var(--white); padding: 40px clamp(28px, 3vw, 48px); display: grid; align-content: center; justify-items: start; gap: 14px; }
.ab-house img { width: min(240px, 70%); height: auto; margin-bottom: 8px; }
.ab-house h3 { font-size: 28px; line-height: 1.2; color: var(--ink); }
.ab-house p { color: var(--ink-2); max-width: 24em; }
@media (max-width: 1279px) { .ab-lead { grid-column: 6 / span 7; } .ab-film { grid-column: 1 / span 5; } }
@media (max-width: 1099px) {
.ab-lead { grid-column: 1 / -1; grid-row: auto; }
.ab-film { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
.ab-num { grid-column: 9 / span 4; grid-row: auto; }
.ab-values { grid-column: 5 / span 4; grid-row: auto; }
.ab-house { grid-column: 1 / span 4; grid-row: auto; }
}
@media (max-width: 899px) {
.ab-num, .ab-values, .ab-house { grid-column: 1 / -1; min-height: 0; }
.ab-lead { padding: 40px var(--pad-x) 36px; }
.ab-film__play { width: 80px; height: 80px; }
.ab-film__play svg { width: 34px; height: 34px; }
}
/* 2026-10-05 film tile = muted loop of the 0:27–0:39 cut (different from the hero loop) + full-tile open button + separate pause (WCAG 2.2.2) */
.ab-film { cursor: default; }
.ab-film__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ab-film__open { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: rgba(0,0,0,.16); cursor: pointer; transition: background .3s; }
.ab-film__open:hover { background: rgba(0,0,0,.06); }
.ab-film:hover .ab-film__loop { transform: scale(1.03); }
.ab-film__open:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.ab-film__open:hover .ab-film__play { transform: translate(50%, -50%) scale(1.06); }
.ab-film__pause { position: absolute; z-index: 2; inset-block-end: 18px; inset-inline-end: 18px; width: 44px; height: 44px; display: grid; place-items: center;
border: 1px solid rgba(255,255,255,.55); border-radius: 3px; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; }
.ab-film__pause:hover { background: rgba(0,0,0,.55); }
.ab-film__pause:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ab-film__pause .ico:where(:not(.spsc *)) { width: 20px; height: 20px; }
.ab-film__pause .ico-play, .ab-film__pause[aria-pressed="true"] .ico-pause { display: none; }
.ab-film__pause[aria-pressed="true"] .ico-play { display: block; }
/* CATALOGS v2 2026-10-05: featured full catalog (big booklet) + 2x2 category cards; booklets = paper cover, spine shadow, slight turn */
.cat-layout { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.cat-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 3vw, 56px);
padding: clamp(32px, 3vw, 48px); background: var(--green-ink); color: #fff; text-decoration: none; }
.cat-feature__txt { display: grid; gap: 14px; justify-items: start; }
.cat-feature__kicker { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-small); color: var(--gold); }
.cat-feature__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 2.6vw, 42px); line-height: 1.1; text-wrap: balance; }
.cat-feature__meta { color: var(--on-green-2); font-size: var(--fs-small); }
.cat-feature .btn:where(:not(.spsc *)) { margin-top: 10px; }
.cat-feature:hover .bk { transform: perspective(1200px) rotateY(-6deg) translateY(-6px); }
.cat-feature:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cat-card { height: 100%; display: flex; align-items: center; gap: 24px; padding: 22px 24px; background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; transition: background .25s, border-color .25s; }
.cat-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); }
.cat-card:hover .bk { transform: perspective(900px) rotateY(-8deg) translateY(-4px); }
.cat-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cat-card__txt { display: grid; gap: 6px; justify-items: start; }
.cat-card__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.15; }
.cat-card__meta { color: var(--on-green-2); font-size: var(--fs-small); }
.cat-card__dl { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--fs-small);
text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cat-card__dl .ico:where(:not(.spsc *)) { width: 18px; height: 18px; }
/* booklet */
.bk { flex: none; display: block; width: 210px; transform: perspective(1200px) rotateY(-12deg); transform-origin: right center;
transition: transform .45s var(--ease); filter: drop-shadow(-14px 18px 18px rgba(0,0,0,.35)); }
.bk--sm { width: 112px; }
.bk-cover { position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4; background: var(--paper); overflow: hidden; container-type: inline-size; }
.bk-cover::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 7%; z-index: 2;
background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0) 85%); }
.bk-logo { width: 54cqi; margin: 9cqi 9cqi 0; margin-inline-start: auto; }
.bk-word { margin: 6cqi 9cqi 0; font-family: var(--font-display); font-weight: 800; font-size: 15cqi; line-height: 1.02; color: var(--ink); }
.bk-photo { margin-top: auto; width: 100%; height: 48%; object-fit: cover; }
.bk-cover--full .bk-word { color: var(--green); font-size: 14cqi; }
.bk-grid { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 50%; flex: none; }
.bk-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
@media (max-width: 1279px) {
.cat-layout { grid-template-columns: minmax(0, 1fr); }
.cat-feature { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 767px) {
.cat-layout { margin-top: 36px; gap: 16px; }
.cat-feature { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 32px 20px; }
.cat-feature__txt { justify-items: center; }
.bk--full { width: 180px; }
.cat-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cat-card { padding: 16px; gap: 18px; }
.bk--sm { width: 84px; }
.cat-card__title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .bk { transition: none; } }
/* CATALOGS v3 2026-10-05: real-catalog covers (full-bleed photo / brand green), gentler turn, crafted buttons */
.bk { transform: perspective(1400px) rotateY(-7deg); filter: drop-shadow(-10px 16px 16px rgba(0,0,0,.38)); }
.cat-feature:hover .bk { transform: perspective(1400px) rotateY(-2deg) translateY(-6px); }
.cat-card:hover .bk { transform: perspective(1000px) rotateY(-2deg) translateY(-4px); }
.bk--sm { width: 124px; }
.bk--full { width: 230px; }
.bk-cover--photo { background: #222; }
.bk-cover--photo .bk-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-cover--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%); }
.bk-badge { position: absolute; z-index: 3; inset-block-start: 7cqi; inset-inline-end: 7cqi; background: #fff; padding: 3cqi 4cqi; border-radius: 2px; }
.bk-badge img { display: block; width: 40cqi; height: auto; }
.bk-foot { position: absolute; z-index: 3; inset-inline: 8cqi; inset-block-end: 8cqi; display: grid; gap: 2cqi; }
.bk-cover--photo .bk-word { margin: 0; color: #fff; font-size: 17cqi; line-height: 1; }
.bk-ed { color: rgba(255,255,255,.85); font-family: var(--font-text); font-weight: 500; font-size: 7.5cqi; padding-top: 3cqi; border-top: 2px solid var(--gold); }
.bk-cover--brand { background: var(--green); padding: 10cqi 9cqi 0; }
.bk-cover--brand::after { content: ""; position: absolute; inset-inline: 9cqi; inset-block-start: 31cqi; height: 2px; background: var(--gold); opacity: .9; }
.bk-logo-rev { width: 62cqi; margin-inline-start: auto; display: block; }
.bk-cover--brand .bk-word { margin: 14cqi 0 0; color: var(--gold); font-size: 17cqi; line-height: .98; }
.bk-sub { margin-top: 4cqi; color: #fff; font-family: var(--font-text); font-weight: 500; font-size: 7cqi; }
.bk-strip { margin: auto -9cqi 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 26%; padding-top: 2px; }
.bk-strip img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
/* buttons */
.cat-cta { min-height: 58px; padding-inline: 24px 18px; gap: 12px; font-size: 18px; box-shadow: 0 8px 22px rgba(0,0,0,.22); transition: background .2s, transform .2s, box-shadow .2s; }
.cat-feature:hover .cat-cta { background: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.cat-cta__fmt { margin-inline-start: 4px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(0,0,0,.25); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.cat-card__btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
border: 1.5px solid rgba(255,255,255,.7); border-radius: 3px; color: #fff; font-weight: 500; font-size: var(--fs-small);
transition: background .2s, color .2s, border-color .2s; }
.cat-card__btn .ico:where(:not(.spsc *)) { width: 18px; height: 18px; }
.cat-card:hover .cat-card__btn { background: #fff; color: var(--green); border-color: #fff; }
@media (max-width: 767px) { .bk--sm { width: 96px; } .bk--full { width: 190px; } }
/* CATALOGS v3b: feature = full-width banner, categories = 4 cards in one row; brand cover padding in % (cqi on the container itself resolves to the viewport) */
.bk-cover--brand { padding: 10% 9% 0; }
.bk-cover--brand::after { display: none; }
.cat-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cat-feature { grid-template-columns: auto minmax(0, 1fr); justify-content: start; padding: clamp(32px, 3.4vw, 56px) clamp(32px, 5vw, 88px); gap: clamp(36px, 5vw, 88px); }
.cat-feature__title { font-size: clamp(36px, 3.4vw, 52px); }
.cat-feature__meta { font-size: var(--fs-body); }
.bk--full { width: 250px; }
.cat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cat-card { flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 32px 20px 28px; }
.cat-card__txt { justify-items: center; }
.bk--sm { width: 150px; }
@media (max-width: 1099px) { .cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
.cat-feature { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; gap: 28px; }
.bk--full { width: 190px; }
.cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-card { padding: 20px 10px; gap: 14px; }
.bk--sm { width: 104px; }
.cat-card__title { font-size: 22px; }
.cat-card__btn { padding: 0 14px; }
}
/* booklet page stack: paper edges peek out on the open side (left; Hebrew binding is right) */
.bk-cover { box-shadow: -3px 3px 0 #F4F1EA, -6px 6px 0 #E2DCCF, -9px 9px 0 #CFC7B6; }
.bk { filter: drop-shadow(-12px 18px 18px rgba(0,0,0,.32)); }
/* CATALOGS digital 2026-10-05: flat file previews instead of printed booklets */
.bk, .cat-feature:hover .bk, .cat-card:hover .bk { transform: none; filter: none; }
.bk { transition: transform .3s var(--ease); }
.bk-cover { box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18) !important; border-radius: 10px; overflow: hidden; }
.bk-cover::before { display: none; }
.cat-feature:hover .bk, .cat-card:hover .bk { transform: translateY(-6px); }
.bk-pdf { position: absolute; z-index: 4; inset-block-start: 7%; inset-inline-start: 7%; padding: 3px 8px; border-radius: 4px;
background: #D93025; color: #fff; font: 700 15px/1.2 var(--font-text); }
.bk-hover { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; background: rgba(10,85,48,.55); opacity: 0; transition: opacity .25s; }
.bk-hover svg { width: 30px; height: 30px; color: #fff; padding: 14px; border: 2px solid #fff; border-radius: 50%; background: rgba(255,255,255,.15); }
.cat-feature:hover .bk-hover, .cat-card:hover .bk-hover, .cat-feature:focus-visible .bk-hover, .cat-card:focus-visible .bk-hover { opacity: 1; }
.bk-badge { border-radius: 4px; }
.bk-cover--brand { border: 1px solid rgba(255,255,255,.18); }
@media (prefers-reduced-motion: reduce) { .cat-feature:hover .bk, .cat-card:hover .bk { transform: none; } }
/* CONTACT v2 2026-10-05: green action panel + white form (mosaic, 6px gap) + full-width map */
.contact { padding-block: var(--section-y) 0; }
.ct-grid { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pgap); }
.ct-info { background: var(--green); color: #fff; padding: clamp(36px, 3.6vw, 60px); display: flex; flex-direction: column; gap: 14px; }
.ct-info h2 { font-size: var(--fs-h2); line-height: 1.05; }
.ct-intro { color: #fff; margin-bottom: 18px; max-width: 28em; }
.ct-act { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
a.ct-act:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
a.ct-act:focus-visible, .ct-nav a:focus-visible, .ct-social a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ct-act > .ico:where(:not(.spsc *)) { width: 26px; height: 26px; flex: none; color: var(--gold); }
.ct-act > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ct-act > .ico:where(:not(.spsc *)):last-child { width: 20px; height: 20px; color: #fff; opacity: .7; }
.ct-act__k { font-size: var(--fs-small); color: var(--on-green-2); }
.ct-act__v { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.ct-act--phone .ct-act__v { font-size: 38px; }
.ct-act--addr { flex-wrap: wrap; }
.ct-nav { display: flex; gap: 8px; }
.ct-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 3px; color: #fff; font-weight: 500; font-size: 16px; text-decoration: none; }
.ct-nav a:hover { background: #fff; color: var(--green); }
.ct-small { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 12px; font-size: var(--fs-small); color: var(--on-green-2); }
.ct-small div { display: flex; gap: 8px; }
.ct-small dd { color: #fff; }
.ct-social { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; }
.ct-social a { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.55); border-radius: 3px; color: #fff; }
.ct-social a:hover { background: #fff; color: var(--green); }
.ct-social .ico:where(:not(.spsc *)) { width: 22px; height: 22px; }
.ct-grid .lead-panel { background: var(--white); padding: clamp(36px, 3.6vw, 60px); position: static; }
.ct-grid .form-head { border-bottom: 0; padding-bottom: 0; }
.ct-grid .radios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ct-grid .radio { position: relative; }
.ct-grid .radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-grid .radio span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 6px 10px; border: 1.5px solid var(--field-line);
border-radius: 3px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.ct-grid .radio span::before { display: none; }
.ct-grid .radio input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.ct-grid .radio input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.ct-grid .radio:hover span { border-color: var(--green); }
.ct-grid .form-foot { display: block; margin-top: 8px; }
.ct-grid .form-privacy { font-size: 15px; color: var(--ink-2); max-width: none; }
.btn--block { width: 100%; justify-content: center; min-height: 60px; margin-top: 20px; font-size: 19px; }
.ct-map { margin-top: var(--pgap); height: 380px; background: #E8E3D7; }
.ct-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4); }
@media (max-width: 1099px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
.ct-grid { padding-inline: 0; }
.ct-info, .ct-grid .lead-panel { padding: 36px 20px; }
.ct-grid .radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-act--phone .ct-act__v { font-size: 30px; }
.ct-act__v { font-size: 20px; }
.ct-map { height: 300px; }
}
/* contact v2 fixes */
.ct-grid .lead-form .radios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ct-act--addr .ct-nav { flex-basis: 100%; padding-inline-start: 44px; }
@media (max-width: 767px) { .ct-grid .lead-form .radios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-grid .radio { display: block; margin: 0; }
.ct-grid .radio span { width: 100%; }
.ct-act > .ct-nav { display: flex; flex: 0 0 100%; gap: 8px; padding-inline-start: 44px; }
.ct-grid > * { min-width: 0; }
@media (max-width: 767px) { .ct-grid .lead-panel { margin-inline: 0; } }
/* FOOTER v2 2026-10-05: brand signature + reversed logo on charcoal + icon contacts + framed alcohol warning + back to top */
.foot-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-block: 88px 56px; border-bottom: 1px solid #4A4A4A; }
.foot-slogan { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 96px); line-height: 1; color: var(--gold); }
.foot-cta { flex: none; min-height: 56px; }
.foot-top { padding-block: 64px 56px; }
.foot-logo { background: none; padding: 0; }
.foot-logo img { height: 60px; }
.foot-tagline { max-width: 26em; line-height: 1.6; }
.foot-col a:hover { color: var(--gold); text-decoration: underline; }
.foot-contact li { display: flex; align-items: center; gap: 12px; }
.foot-contact .ico:where(:not(.spsc *)) { width: 20px; height: 20px; flex: none; color: var(--gold); }
.foot-warn { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1.5px solid var(--gold); border-radius: 3px; font-size: var(--fs-ui); color: #fff; }
.foot-warn .ico:where(:not(.spsc *)) { width: 26px; height: 26px; flex: none; color: var(--gold); }
.foot-bottom { border-top: 0; padding-block: 26px 32px; }
.foot-top-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid #666; border-radius: 3px; color: var(--on-dark); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.foot-top-btn .ico:where(:not(.spsc *)) { width: 18px; height: 18px; }
.foot-top-btn:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 767px) {
.foot-sign { flex-direction: column; align-items: flex-start; padding-block: 56px 40px; }
.foot-top { padding-block: 44px 36px; }
.foot-warn { padding: 14px 16px; font-size: 17px; }
}
/* HEADER v2 2026-10-05: green utility bar (scrolls away) + clean sticky bar (logo · nav with scrollspy · CTA), frosted on scroll; green mobile sheet */
.topbar { background: var(--green); color: #fff; font-size: 16px; }
.topbar__in { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar__claim { color: #fff; }
.topbar__tools { display: flex; align-items: center; gap: 18px; }
.topbar__tools a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.topbar__tools a:hover { color: var(--gold); }
.topbar__tools .ico:where(:not(.spsc *)) { width: 17px; height: 17px; color: var(--gold); }
.topbar__soc { width: 32px; height: 32px; justify-content: center; }
.topbar__soc .ico:where(:not(.spsc *)) { color: #fff; width: 18px; height: 18px; }
.topbar__sep { width: 1px; height: 18px; background: rgba(255,255,255,.35); }
.topbar__lang { display: flex; gap: 4px; }
.topbar__lang a { padding: 4px 8px; border-radius: 3px; }
.topbar__lang a[aria-current] { background: #fff; color: var(--green); font-weight: 500; }
.topbar a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.site-header { background: rgba(246,243,236,.96); }
.site-header.is-scrolled { background: rgba(246,243,236,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line), 0 10px 24px rgba(0,0,0,.06); }
.hdr-brand img { height: 64px; transition: height .25s var(--ease); }
.site-header.is-scrolled .hdr-brand img { height: 52px; }
.hdr-nav { margin-inline-start: auto; }
.hdr-nav ul { gap: 36px; }
.hdr-nav a { font-size: 19px; color: var(--ink); }
.hdr-nav a[aria-current="true"] { color: var(--green); }
.hdr-nav a[aria-current="true"]::after { transform: scaleX(1); background: var(--gold); }
.hdr-tools { margin-inline-start: 36px; }
@media (min-width: 1100px) { .hdr-tools > .hdr-phone, .hdr-tools > .hdr-lang { display: none; } }
.hdr-cta { min-height: 50px; padding-inline: 22px; }
@media (max-width: 1099px) { .topbar { display: none; } .hdr-nav { margin-inline-start: 0; } }
.mnav { background: var(--green); color: #fff; border-top: 0; padding: 16px 24px 40px; }
.mnav li a { color: #fff; border-bottom-color: rgba(255,255,255,.2); }
.mnav li a:hover { color: var(--gold); }
.mnav-foot .hdr-phone { color: #fff; }
.mnav-foot .hdr-phone .ico:where(:not(.spsc *)) { color: var(--gold); }
.mnav-foot .hdr-lang, .mnav-foot .hdr-lang a { color: #fff; }
.mnav-foot .hdr-lang a[aria-current] { text-decoration-color: var(--gold); }
.mnav :focus-visible { outline-color: var(--gold); }
/* CATALOGS compact 2026-10-05 */
.catalogs { padding-block: 88px 96px; }
.cat-layout { margin-top: 36px; gap: 16px; }
.cat-feature { padding: 28px clamp(28px, 4vw, 64px); gap: clamp(28px, 4vw, 56px); }
.bk--full { width: 150px; }
.cat-feature__title { font-size: clamp(30px, 2.6vw, 40px); }
.cat-feature__txt { gap: 10px; }
.cat-feature .btn:where(:not(.spsc *)) { margin-top: 4px; }
.cat-list { gap: 16px; }
.cat-card { flex-direction: row; align-items: center; text-align: start; gap: 18px; padding: 16px 18px; }
.cat-card__txt { justify-items: start; gap: 4px; }
.cat-card__title { font-size: 22px; }
.cat-card__btn { margin-top: 6px; min-height: 40px; padding: 0 14px; }
.bk--sm { width: 84px; }
.bk-cover--photo .bk-pdf, .bk--sm .bk-pdf { font-size: 11px; padding: 2px 5px; }
@media (max-width: 1279px) { .cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
.catalogs { padding-block: 64px 72px; }
.cat-feature { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; padding: 20px 16px; gap: 18px; }
.cat-feature__txt { justify-items: start; }
.bk--full { width: 104px; }
.cat-list { grid-template-columns: minmax(0, 1fr); }
.bk--sm { width: 72px; }
}
@media (max-width: 1279px) { .hdr-brand img, .site-header.is-scrolled .hdr-brand img { height: 52px; } }
@media (max-width: 767px) { .hdr-brand img, .site-header.is-scrolled .hdr-brand img { height: 38px; } }
@media (max-width: 767px) {
.cat-feature { grid-template-columns: minmax(0, 1fr); }
.cat-feature__txt { min-width: 0; }
.cat-feature .cat-cta { width: 100%; justify-content: center; }
.bk--full { width: 120px; }
}
.mnav-foot .hdr-phone bdi { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* nav moved to the right, next to the logo (2026-10-05) */
@media (min-width: 1100px) {
.hdr-nav { margin-inline-start: 56px; }
.hdr-tools { margin-inline-start: auto; }
}
/* ABOUT mobile polish 2026-10-05: shorter, horizontal number strip, compact values and house brand, cleaner video tile */
@media (max-width: 767px) {
.ab-lead { padding: 32px 20px 28px; gap: 16px; }
.ab-lead h2 { font-size: 34px; }
.ab-film { aspect-ratio: 16 / 10; }
.ab-film__cap { font-size: 18px; padding: 8px 12px; }
.ab-film__pause { inset-block-end: 12px; inset-inline-end: 12px; width: 40px; height: 40px; }
.ab-film__play { width: 72px; height: 72px; }
.ab-num { min-height: 0; padding: 22px 20px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; }
.ab-num__n { font-size: 64px; line-height: .95; }
.ab-num__pre { font-size: 22px; margin-bottom: 2px; }
.ab-num__t { font-size: 17px; }
.ab-values { padding: 26px 20px; gap: 12px; }
.ab-values h3 { font-size: 24px; }
.ab-values li { padding: 10px 0; font-size: 17px; }
.ab-house { padding: 22px 20px; grid-template-columns: 108px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; justify-items: stretch; }
.ab-house img { grid-row: span 2; width: 108px; margin: 0; }
.ab-house h3 { font-size: 20px; }
.ab-house p { font-size: 16px; }
}
/* SHELF MOBILE 2026-10-05: 4 tabs in one row, no category photo, label+count on one line, 3-column grid (every brand visible) */
@media (max-width: 600px) {
.tabs-row { margin-top: 24px; }
.tabs:where(:not(.spsc *)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; }
.tab:where(:not(.spsc *)) { min-width: 0; flex: none; justify-content: center; padding: 12px 4px; }
.tab-txt { justify-items: center; text-align: center; }
.tab-word, .tabs-row.is-stuck .tab-word { font-size: 19px; }
.tab-count { display: none; }
.tabs-row.is-stuck .tab:where(:not(.spsc *)) { padding: 10px 4px; }
.panels { margin-top: 18px; }
.panel-grid { gap: 8px; }
.shelf-photo { display: none; }
.panel-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-bottom: 6px; }
.panel-aside .warn { font-size: 15px; margin: 0; }
.sub:where(:not(.spsc *)) + .sub:where(:not(.spsc *)) { margin-top: 0; }
.sub:where(:not(.spsc *)) { padding-block: 18px; border-top: 1px solid var(--line); }
.sub:where(:not(.spsc *)):first-child { border-top: 0; padding-top: 8px; }
.sub-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; font-size: 22px; }
.sub-label .sub-name { display: inline; }
.sub-label .sub-sep { display: inline; }
.sub-count { display: inline; margin: 0; font-size: 15px; }
.sub-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
overflow: visible; margin-inline: 0; padding-inline: 0; gap: 6px; scroll-snap-type: none; }
.brand { padding: 10% 6% 8%; }
.brand-name { font-size: 15px; line-height: 1.25; }
.brand-name::before { width: 20px; height: 2px; margin-bottom: 7px; }
}
/* CATALOGS MOBILE 2026-10-05: full catalog = preview + text in a row, gold button below; categories = compact rows with a square download button */
@media (max-width: 767px) {
.catalogs-head p { font-size: 17px; }
.cat-layout { margin-top: 24px; gap: 10px; }
.cat-feature { grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 16px; padding: 18px 16px; text-align: start; justify-items: stretch; }
.bk--full { width: 96px; }
.cat-feature__txt { display: contents; }
.cat-feature__kicker { display: none; }
.cat-feature__title { grid-column: 2; grid-row: 1; font-size: 24px; align-self: center; }
.cat-feature__meta { display: none; }
.cat-feature .cat-cta { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; min-height: 52px; }
.cat-list { gap: 8px; }
.cat-card { position: relative; padding: 10px 12px; gap: 14px; }
.bk--sm { width: 56px; }
.bk--sm .bk-pdf, .bk--sm .bk-badge, .bk--sm .bk-foot { display: none; }
.bk--sm .bk-cover--photo::after { display: none; }
.cat-card__txt { flex: 1; gap: 2px; }
.cat-card__title { font-size: 20px; }
.cat-card__meta { font-size: 15px; }
.cat-card__btn { margin: 0; width: 48px; height: 48px; min-height: 0; padding: 0; justify-content: center; flex: none; }
.cat-card__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat-card__btn .ico:where(:not(.spsc *)) { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
.cat-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; }
.cat-card .bk--sm { grid-column: 1; grid-row: 1 / span 2; }
.cat-card__txt { display: contents; }
.cat-card__title { grid-column: 2; grid-row: 1; align-self: end; }
.cat-card__meta { grid-column: 2; grid-row: 2; align-self: start; }
.cat-card__btn { grid-column: 3; grid-row: 1 / span 2; }
}
/* CONTACT MOBILE 2026-10-05: tighter action rows, nav inline, compact small info, shorter form */
@media (max-width: 767px) {
.contact { padding-top: 64px; }
.ct-info { padding: 32px 16px 24px; gap: 10px; }
.ct-info h2 { font-size: 36px; }
.ct-intro { margin-bottom: 8px; font-size: 17px; }
.ct-act { padding: 12px 14px; gap: 14px; }
.ct-act > .ico:where(:not(.spsc *)):last-child { display: none; }
.ct-act > .ico:where(:not(.spsc *)) { width: 22px; height: 22px; }
.ct-act--phone .ct-act__v { font-size: 28px; }
.ct-act__v { font-size: 19px; }
.ct-act__k { font-size: 15px; }
.ct-act > .ct-nav { padding-inline-start: 36px; }
.ct-nav a { min-height: 40px; font-size: 15px; padding: 0 12px; }
.ct-small { margin-top: 6px; gap: 4px 18px; font-size: 15px; }
.ct-social { margin-top: 6px; padding-top: 8px; }
.ct-social a { width: 44px; height: 44px; }
.ct-grid .lead-panel { padding: 28px 16px 32px; }
.ct-grid .form-head { margin-bottom: 4px; }
.ct-grid .lead-form .field { margin-top: 14px; }
.ct-grid .lead-form textarea { min-height: 96px; height: 96px; }
.ct-grid .lead-form .radios { gap: 6px; }
.ct-grid .radio span { min-height: 46px; }
.btn--block { margin-top: 14px; min-height: 54px; }
.ct-map { height: 240px; }
}
@media (max-width: 767px) {
.ct-grid .lead-form { gap: 18px; }
.ct-grid .lead-form .field-row { gap: 18px; }
.ct-grid .lead-form .field { margin-top: 0; gap: 6px; }
.ct-grid .form-head { padding-bottom: 0; }
.ct-info .ct-social { margin-top: 2px; }
}
/* FOOTER MOBILE 2026-10-05: smaller slogan, full-width CTA, logo + socials in one row, nav/catalogs 2 columns, contacts 2 columns, legal + back-to-top compact */
@media (max-width: 767px) {
.foot-sign { padding-block: 44px 28px; gap: 18px; }
.foot-slogan { font-size: 38px; }
.foot-cta { width: 100%; justify-content: center; }
.foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; padding-block: 32px 28px; }
.foot-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; }
.foot-logo img { height: 44px; }
.foot-tagline { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 16px; }
.foot-social { margin: 0; grid-column: 2; grid-row: 1; }
.foot-social .icon-btn { width: 42px; height: 42px; }
.foot-h { font-size: 21px; margin-bottom: 10px; }
.foot-col ul { gap: 6px; }
.foot-col li { font-size: 16px; }
.foot-top > .foot-col:last-child { grid-column: 1 / -1; }
.foot-contact { grid-template-columns: minmax(0, 1fr); }
.foot-contact .ico:where(:not(.spsc *)) { width: 17px; height: 17px; }
.foot-warn { font-size: 16px; padding: 12px 14px; gap: 10px; }
.foot-warn .ico:where(:not(.spsc *)) { width: 22px; height: 22px; }
.foot-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 18px 22px; }
.foot-legal { gap: 4px 18px; font-size: 15px; }
.foot-top-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
.foot-top-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* MOBILE HEADER 2026-10-05: green top line, bigger logo, call + catalog + filled burger; richer green sheet */
.hdr-call { display: none; }
@media (max-width: 1099px) {
.site-header { border-top: 4px solid var(--green); }
.hdr-call { display: inline-grid; }
.burger { background: var(--green); border-color: var(--green); }
.burger .burger-lines, .burger .burger-lines::before, .burger .burger-lines::after { background: #fff; }
.burger[aria-expanded="true"] .burger-lines { background: transparent; }
.mnav { padding: 8px 20px 28px; display: flex; flex-direction: column; }
.mnav li a { display: flex; align-items: center; justify-content: space-between; font-size: 28px; padding: 14px 0; color: #fff; }
.mnav li a .ico:where(:not(.spsc *)) { width: 22px; height: 22px; color: var(--gold); }
.mnav-foot { padding-top: 22px; gap: 16px; justify-items: stretch; }
.mnav-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mnav-quick a { display: grid; gap: 2px; padding: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.mnav-quick .ico:where(:not(.spsc *)) { width: 22px; height: 22px; color: var(--gold); margin-bottom: 6px; }
.mnav-quick span { font-size: 15px; color: var(--on-green-2); }
.mnav-quick bdi { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.mnav-row { display: flex; align-items: center; justify-content: space-between; }
.mnav-lang a { color: #fff; text-decoration: none; padding: 6px 12px; font-size: 16px; }
.mnav-soc { display: flex; gap: 8px; }
.mnav-soc a { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.55); border-radius: 3px; color: #fff; }
.mnav-soc .ico:where(:not(.spsc *)) { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
.hdr-brand img, .site-header.is-scrolled .hdr-brand img { height: 38px; }
.hdr { gap: 8px; }
.hdr-tools { gap: 6px; }
}
@media (max-width: 380px) { .hdr-brand img, .site-header.is-scrolled .hdr-brand img { height: 32px; } .hdr-tools .icon-btn { width: 42px; height: 42px; } }
/* MOSAIC MOBILE 2026-10-05: taller lead, even 2x2 categories, gold full-catalog bar */
@media (max-width: 767px) {
.tile--lead { min-height: 340px; justify-content: flex-end; padding: 32px 20px 28px; }
.tile--lead h1 { font-size: 50px; line-height: 1.02; }
.tile--alcohol { grid-column: auto; aspect-ratio: 1; }
.tile--alcohol .ph { background-position: 58% 45%; }
.tile--gold { grid-column: 1 / -1; aspect-ratio: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
column-gap: 14px; align-items: center; padding: 16px 20px; }
.tile--gold > .ico:where(:not(.spsc *)) { grid-row: 1 / span 2; font-size: 30px; margin: 0; width: 30px; height: 30px; }
.gold-title { font-size: 26px; }
.gold-sub { margin-top: 2px; padding-top: 0; border-top: 0; }
.tile--gold:hover > .ico:where(:not(.spsc *)) { transform: translateY(2px); }
.plaque { font-size: 24px; }
}
/* BRAND STRIP MOBILE 2026-10-05: smaller tiles (~4 per row), icon-only pause button floating at the strip edge */
.brand-strip { position: relative; }
@media (max-width: 767px) {
.brand-strip .marquee { gap: 4px; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.brand-strip .mq-track { gap: 4px; }
.brand-strip .mq-item { width: 96px; height: 60px; }
.brand-strip__ctrl { position: absolute; inset-block-start: 50%; inset-inline-end: 8px; transform: translateY(-50%); padding: 0; width: auto; z-index: 2; }
.brand-strip .mq-toggle { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; background: var(--white);
border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.brand-strip .mq-toggle__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 2026-10-05: hero mosaic always fits the first screen on desktop (viewport − topbar 44 − header) */
:root { --topbar-h: 44px; }
.topbar__in { height: var(--topbar-h); min-height: 0; }
@media (min-width: 1100px) {
.mosaic { height: clamp(480px, min(calc(100svh - var(--hdr-h) - var(--topbar-h)), 62vw), 1000px); }
}
/* MOSAIC HOVER v2 2026-10-05: one light veil over the whole tile + a gentle zoom (no moving parts) */
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(13,107,59,.22); opacity: 0; transition: opacity .45s var(--ease); }
.tile--photo .plaque { z-index: 2; }
.tile--photo .ph { transition: transform 1.2s var(--ease); }
.tile--gold::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.tile--gold { position: relative; }
@media (hover: hover) {
.tile--photo:hover::before, .tile--photo:focus-visible::before { opacity: 1; }
.tile--photo:hover .ph { transform: scale(1.04); }
.tile--photo:hover .plaque { box-shadow: inset 0 -4px 0 var(--plaque); }
.tile--gold:hover::after { opacity: 1; }
.tile--gold:hover { background: var(--gold); }
.tile--gold:hover > .ico:where(:not(.spsc *)) { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tile--photo .ph { transition: none; } .tile--photo:hover .ph { transform: none; } }
/* HOVER DRIFT 2026-10-05: while hovered, the photo slowly drifts (Ken Burns), each tile in its own direction */
@keyframes drift-a { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.12) translate(-2.5%, -1.5%); } }
@keyframes drift-b { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.12) translate(2.5%, -2%); } }
@keyframes drift-c { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.12) translate(-2%, 2%); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.tile--alcohol:hover .ph { animation: drift-a 9s ease-out forwards; }
.tile--bakery:hover .ph { animation: drift-b 9s ease-out forwards; }
.tile--grocery:hover .ph { animation: drift-c 9s ease-out forwards; }
.tile--sweets:hover .ph { animation: drift-a 9s ease-out forwards; }
}
/* LIVE PHOTO 2026-10-05: AI cinemagraph (Veo image-to-video from the same still) fades in over the photo while hovered */
.tile-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; z-index: 0; }
.tile--sweets .tile-live { object-position: 36% 40%; }
.tile--photo.is-live .tile-live { opacity: 1; }
.tile--photo.is-live .ph { animation: none !important; }
/* 2026-10-05: hover = live photo only (no green veil, no zoom/drift) */
.tile--photo::before { display: none !important; }
.tile--photo:hover .ph, .tile--photo:focus-visible .ph { transform: none !important; animation: none !important; filter: none !important; }
.tile--gold::after { display: none; }
.tile--alcohol .tile-live { object-position: 50% 30%; }
.tile--bakery .tile-live { object-position: 46% 30%; }
.tile--grocery .tile-live { object-position: 44% 30%; }
/* 2026-10-05 FINAL HOVER: photos only; light green veil over the whole tile (no zoom) + plaque turns brand green with a gold base line */
.tile--photo::before { display: block !important; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: rgba(13,107,59,.24); opacity: 0; transition: opacity .45s var(--ease); }
.tile--photo .plaque { z-index: 2; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.tile--photo .ph, .tile--photo:hover .ph { transform: none !important; animation: none !important; filter: none !important; }
@media (hover: hover) {
.tile--photo:hover::before, .tile--photo:focus-visible::before { opacity: 1; }
.tile--photo:hover .plaque, .tile--photo:focus-visible .plaque { background: var(--green); box-shadow: inset 0 -4px 0 var(--gold); }
}
/* SHELF BACKGROUND 2026-10-05: brand orbit rings + floating line icons of the range, very faint, fading out before the brand grid */
.shelf { position: relative; isolation: isolate; }
.shelf > .wrap { position: relative; z-index: 1; }
.shelf-bg { position: absolute; inset: 0 0 auto 0; height: 560px; overflow: hidden; z-index: 0; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.sbg-orbit { position: absolute; inset-inline: -4%; top: 40px; width: 108%; height: 420px; fill: none; }
.sbg-orbit ellipse:first-child { stroke: rgba(13,107,59,.16); stroke-width: 2; }
.sbg-orbit ellipse:last-child { stroke: rgba(252,188,56,.38); stroke-width: 1.5; stroke-dasharray: 2 10; }
.sbg-ico { position: absolute; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--r));
animation: sbg-float 9s ease-in-out infinite; }
.sbg-ico--g { stroke: rgba(13,107,59,.22); }
.sbg-ico--y { stroke: rgba(196,140,20,.38); }
@keyframes sbg-float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-10px) rotate(calc(var(--r) + 6deg)); } }
@media (prefers-reduced-motion: reduce) { .sbg-ico { animation: none; } }
@media (max-width: 767px) { .shelf-bg { height: 380px; } .sbg-ico { transform: scale(.7) rotate(var(--r)); } .sbg-ico:nth-child(n+8) { display: none; } }
.sbg-orbit ellipse:first-child { stroke: rgba(13,107,59,.12); }
.shelf-bg { height: 470px; }
/* 2026-10-25 hero: gold tile removed, sweets takes its place */
.tile--sweets { grid-column: 8 / span 5; }
@media (max-width: 1279px) { .tile--sweets { grid-column: 7 / span 6; } }
@media (max-width: 1099px) { .tile--sweets { grid-column: auto; } }
/* INNER PAGES 2026-10-25 */
.pg-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pgap); }
.pg-hero__txt { grid-column: 1 / span 6; grid-row: 1; background: var(--green); color: #fff; padding: clamp(40px, 5vw, 88px) var(--pad-x); display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 360px; }
.pg-hero__txt h1 { font-size: var(--fs-h1); line-height: 1.05; }
.pg-hero__txt p { color: #fff; font-size: var(--fs-body); max-width: 34em; }
.pg-hero__ph { grid-column: 7 / span 6; grid-row: 1; position: relative; min-height: 360px; background: var(--plaque) center / cover no-repeat; }
.crumbs { font-size: var(--fs-small); color: var(--on-green-2); }
.crumbs a { color: #fff; }
.pg-sec { padding-block: var(--section-y); }
.pg-sec + .pg-sec { padding-top: 0; }
.pg-h2 { font-size: var(--fs-h2); line-height: 1.08; margin-bottom: 18px; }
.prose { max-width: 46em; display: grid; gap: 18px; }
.prose p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink); }
.about-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pgap); }
.fact { background: var(--white); padding: 28px 24px; display: grid; gap: 6px; }
.fact b { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; color: var(--green); }
.fact span { color: var(--ink-2); font-size: var(--fs-small); }
.fact--gold { background: var(--green); } .fact--gold b { color: var(--gold); } .fact--gold span { color: #fff; }
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pgap); margin-top: 56px; }
.photo-row figure { margin: 0; aspect-ratio: 16 / 9; background: var(--plaque) center / cover no-repeat; }
.house { display: flex; align-items: center; gap: 28px; margin-top: 40px; padding: 28px; background: var(--white); max-width: 46em; }
.house img { width: 150px; height: auto; flex: none; }
.house p { font-size: var(--fs-body); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.member { background: var(--white); padding: 32px 28px; display: grid; gap: 12px; align-content: start; border-top: 4px solid var(--green); }
.member img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid var(--gold); }
.member h3 { font-size: 28px; line-height: 1.15; }
.member .role { color: var(--green); font-weight: 500; font-size: var(--fs-small); }
.member p { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.clients-head { max-width: 62em; display: grid; gap: 16px; }
.clients-head p { font-size: var(--fs-body); line-height: 1.75; }
.clients-grid { direction: ltr; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--pgap); margin-top: 48px; }
.client { direction: rtl; background: var(--white); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; padding: 10% 8% 9%; container-type: inline-size; transition: box-shadow .25s; }
.client:hover { box-shadow: inset 0 -3px 0 var(--leaf); }
.client .cl-mark { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.client img { max-width: 78%; max-height: 72%; width: auto; height: auto; object-fit: contain; }
.client .cl-name { font-size: 15px; font-weight: 500; color: var(--ink-2); text-align: center; line-height: 1.25; }
.client .cl-name::before { content: ""; display: block; width: 26px; height: 3px; margin: 0 auto 10px; background: var(--green); }
@media (max-width: 1279px) { .clients-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1099px) {
.pg-hero__txt, .pg-hero__ph { grid-column: 1 / -1; grid-row: auto; }
.pg-hero__ph { min-height: 260px; }
.about-split { grid-template-columns: minmax(0, 1fr); }
.team { grid-template-columns: minmax(0, 1fr); }
.clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.pg-hero__txt { padding: 36px 20px; min-height: 0; }
.pg-hero__txt h1 { font-size: 44px; }
.pg-sec { padding-block: 56px; }
.photo-row { grid-template-columns: 1fr; margin-top: 32px; }
.house { flex-direction: column; align-items: flex-start; padding: 20px; }
.clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 28px; }
.client .cl-name { font-size: 15px; }
}
/* ===== WordPress / Elementor glue (hand-written; appended to the prototype stylesheet) ===== */
/* Containers that only carry a block: no inherited padding / gaps, full width. */
.e-con.sp-shell, .e-con.sp-shell > .e-con-inner { padding: 0 !important; gap: 0 !important; max-width: none !important; }
.elementor-widget[class*="elementor-widget-protary_"] { width: 100%; max-width: 100%; margin: 0 !important; }
.elementor-widget[class*="elementor-widget-protary_"] > .elementor-widget-container { width: 100%; }
/* Sticky header: the Theme Builder location sticks; the green topbar scrolls away above it. */
.elementor-location-header { position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 50; }
.admin-bar .elementor-location-header { top: calc(32px - var(--topbar-h)); }
@media (max-width: 1099px) {
.elementor-location-header { top: 0; }
.admin-bar .elementor-location-header { top: 0; }
}
.elementor-location-header .site-header { position: relative; top: auto; }
/* The scrolled header's frosted background needs the sticky wrapper to stay transparent. */
.elementor-location-header, .elementor-location-footer { background: transparent; }
/* Crumbs on a paper background (clients page). */
.crumbs--dark { color: var(--ink-2); }
.crumbs--dark a { color: var(--green); }
/* ===== Lead form: Elementor Pro Form inside .lead-panel (form template) ===== */
.lead-panel .elementor-widget-heading.form-title .elementor-heading-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.15; color: var(--ink); }
.lead-panel .form-req, .lead-panel .form-req p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.lead-panel .elementor-widget-form { margin-top: 24px; }
.lead-panel .elementor-form .elementor-field-group > .elementor-field-label {
font-family: var(--font-text); font-size: var(--fs-ui); font-weight: 500; line-height: 1.35; color: var(--ink); padding-bottom: 8px;
}
.lead-panel .elementor-form .elementor-mark-required .elementor-field-label::after { color: var(--error); }
.lead-panel .elementor-form .elementor-field-group .elementor-field-textual {
width: 100%; min-height: 56px; padding: 12px 16px; margin: 0;
font-family: var(--font-text); font-size: var(--fs-ui); line-height: 1.5; color: var(--ink);
background: var(--white); border: 1.5px solid var(--field-line); border-radius: var(--radius); transition: border-color .15s;
}
.lead-panel .elementor-form textarea.elementor-field-textual { min-height: 136px; resize: vertical; }
.lead-panel .elementor-form input[type="tel"], .lead-panel .elementor-form input[type="email"] { direction: ltr; text-align: right; }
.lead-panel .elementor-form .elementor-field-textual:hover { border-color: var(--ink-2); }
.lead-panel .elementor-form .elementor-field-textual:focus-visible { outline: 3px solid var(--green); outline-offset: 0; border-color: var(--green); }
.lead-panel .elementor-form .elementor-field-textual[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.lead-panel .elementor-form .elementor-message,
.lead-panel .elementor-form .elementor-error .elementor-message { font-size: var(--fs-small); font-weight: 500; }
.lead-panel .elementor-form .elementor-message.elementor-message-danger, .lead-panel .elementor-form .elementor-error .elementor-message { color: var(--error); }
.lead-panel .elementor-form .elementor-message.elementor-message-success { color: var(--green); font-size: var(--fs-ui); }
/* Department = radio field shown as four rectangular segments. */
.lead-panel .elementor-field-type-radio .elementor-field-subgroup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.lead-panel .elementor-field-type-radio .elementor-field-option { position: relative; margin: 0 !important; padding: 0 !important; }
.lead-panel .elementor-field-type-radio .elementor-field-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lead-panel .elementor-field-type-radio .elementor-field-option label {
display: flex; align-items: center; justify-content: center; text-align: center; width: 100%;
min-height: 52px; padding: 6px 10px; margin: 0; border: 1.5px solid var(--field-line); border-radius: var(--radius);
font-family: var(--font-text); font-size: var(--fs-ui); line-height: 1.25; color: var(--ink); background: var(--white); cursor: pointer;
}
.lead-panel .elementor-field-type-radio .elementor-field-option:hover label { border-color: var(--green); }
.lead-panel .elementor-field-type-radio .elementor-field-option input:checked + label { background: var(--green); border-color: var(--green); color: #fff; }
.lead-panel .elementor-field-type-radio .elementor-field-option input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 767px) {
.lead-panel .elementor-field-type-radio .elementor-field-subgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-panel .elementor-form .elementor-field-group.elementor-col-50 { width: 100%; }
.lead-panel .elementor-form textarea.elementor-field-textual { min-height: 96px; }
}
/* Privacy note (HTML field) and the gold submit. */
.lead-panel .elementor-field-type-html .form-privacy { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lead-panel .elementor-field-type-html .form-privacy a { color: var(--green); font-weight: 500; text-underline-offset: 5px; }
.lead-panel .elementor-form .elementor-field-type-submit .elementor-button {
width: 100%; min-height: 56px; padding: 0 34px; border-radius: var(--radius);
background: var(--gold); color: var(--ink); fill: var(--ink);
font-family: var(--font-text); font-size: var(--fs-ui); font-weight: 500; line-height: 1.2; transition: background-color .2s;
}
.lead-panel .elementor-form .elementor-field-type-submit .elementor-button:hover { background: var(--gold-hover); color: var(--ink); }
.lead-panel .elementor-form .elementor-field-type-submit .elementor-button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* Small screens: the gold word on the green full-catalogue cover is below 4.5:1 at that size. */
@media (max-width: 767px) { .bk-cover--brand .bk-word { color: #fff; } }
/* ===== Text pages (accessibility statement, privacy policy): native Heading + Text Editor in .sp-legal ===== */
.e-con.sp-legal { --content-width: 860px; padding: clamp(56px, 7vw, 112px) var(--pad-x) var(--section-y) !important; }
.sp-legal .elementor-heading-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1.1; color: var(--ink); margin-bottom: 8px; }
.sp-legal .crumbs { font-size: var(--fs-small); color: var(--ink-2); }
.sp-legal .crumbs a { color: var(--green); }
.sp-legal .elementor-widget-text-editor { color: var(--ink); font-size: var(--fs-body); line-height: 1.7; }
.sp-legal .elementor-widget-text-editor h2 { font-size: var(--fs-h3); line-height: 1.2; color: var(--green); margin: 44px 0 12px; padding-top: 18px; border-top: 3px solid var(--green); }
.sp-legal .elementor-widget-text-editor p { margin: 0 0 14px; }
.sp-legal .elementor-widget-text-editor ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sp-legal .elementor-widget-text-editor li { position: relative; padding-inline-start: 26px; }
.sp-legal .elementor-widget-text-editor li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 14px; height: 3px; background: var(--green); }
.sp-legal .elementor-widget-text-editor a { color: var(--green); font-weight: 500; text-underline-offset: 4px; }
/* ===== English site (LTR): mirror what the RTL prototype draws with physical directions ===== */
html:not([dir="rtl"]) .text-link .ico:where(:not(.spsc *)), html:not([dir="rtl"]) .ct-act > .ico:where(:not(.spsc *)):last-child, html:not([dir="rtl"]) .mnav li a .ico:where(:not(.spsc *)) { transform: scaleX(-1); }
html:not([dir="rtl"]) .hdr-nav a::after { transform-origin: left; }
html:not([dir="rtl"]) .ab-film__play { transform: translate(-50%, -50%); }
html:not([dir="rtl"]) .ab-film:hover .ab-film__play, html:not([dir="rtl"]) .ab-film__open:hover .ab-film__play { transform: translate(-50%, -50%) scale(1.06); }
html:not([dir="rtl"]) .ab-film__play svg { margin-inline-end: 0; margin-inline-start: 6px; }
html:not([dir="rtl"]) .bk { transform: perspective(1400px) rotateY(7deg); transform-origin: left center; filter: drop-shadow(10px 16px 16px rgba(0,0,0,.38)); }
html:not([dir="rtl"]) .cat-feature:hover .bk { transform: perspective(1400px) rotateY(2deg) translateY(-6px); }
html:not([dir="rtl"]) .cat-card:hover .bk { transform: perspective(1000px) rotateY(2deg) translateY(-4px); }
/* Current page in the menu: the same gold underline the home page's scrollspy draws for its sections. */
.hdr-nav a[aria-current="page"] { color: var(--green); }
.hdr-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); }
.mnav li a[aria-current="page"] { color: var(--gold); }
.mnav li a[aria-current="page"] span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
/* Clients (Hebrew): the grid reads left to right in the client's numbering, but an incomplete last row
sits on the right and leaves the gap on the left. The first logo of the last row is pushed to its column. */
@media (min-width: 1280px) { html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(1) { grid-column-start: 8; } html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(2) { grid-column-start: 7; } html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(3) { grid-column-start: 6; } html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(4) { grid-column-start: 5; } html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(5) { grid-column-start: 4; } html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(6) { grid-column-start: 3; } html[dir="rtl"] .clients-grid > .client:nth-child(8n+1):nth-last-child(7) { grid-column-start: 2; } }
@media (min-width: 1100px) and (max-width: 1279px) { html[dir="rtl"] .clients-grid > .client:nth-child(6n+1):nth-last-child(1) { grid-column-start: 6; } html[dir="rtl"] .clients-grid > .client:nth-child(6n+1):nth-last-child(2) { grid-column-start: 5; } html[dir="rtl"] .clients-grid > .client:nth-child(6n+1):nth-last-child(3) { grid-column-start: 4; } html[dir="rtl"] .clients-grid > .client:nth-child(6n+1):nth-last-child(4) { grid-column-start: 3; } html[dir="rtl"] .clients-grid > .client:nth-child(6n+1):nth-last-child(5) { grid-column-start: 2; } }
@media (min-width: 768px) and (max-width: 1099px) { html[dir="rtl"] .clients-grid > .client:nth-child(4n+1):nth-last-child(1) { grid-column-start: 4; } html[dir="rtl"] .clients-grid > .client:nth-child(4n+1):nth-last-child(2) { grid-column-start: 3; } html[dir="rtl"] .clients-grid > .client:nth-child(4n+1):nth-last-child(3) { grid-column-start: 2; } }
@media (max-width: 767px) { html[dir="rtl"] .clients-grid > .client:nth-child(3n+1):nth-last-child(1) { grid-column-start: 3; } html[dir="rtl"] .clients-grid > .client:nth-child(3n+1):nth-last-child(2) { grid-column-start: 2; } }
/* Radio / checkbox groups of the form are a