@charset "UTF-8";
/* ============================================================================
   BRIDGE — rules that must BEAT design.css or Elementor's per-widget CSS.
   Loaded after design.css. Nothing here uses !important: every rule is aimed at
   the exact specificity of the rule it has to outrank, and says which one.
   (Anything the design system should be able to override lives in reset.css.)
   ========================================================================= */

/* --- 1. real headings get their display line-height back ------------------ */
/* the (0,3,0) baseline in reset.css hands everything `inherit`; a TAG selector
   is (0,3,1) and wins for actual h1..h6 only.                                 */
body.site h1.elementor-heading-title,
body.site h2.elementor-heading-title,
body.site h3.elementor-heading-title,
body.site h4.elementor-heading-title,
body.site h5.elementor-heading-title,
body.site h6.elementor-heading-title { line-height: 1.12; }

/* --- 2. Astra chrome ------------------------------------------------------ */
/* Astra ships `@media (max-width:921px){html{font-size:91.2%}}` (and again at
   544px). The whole design system is rem-based, so that quietly shrinks every
   size, gap and radius by 8.8% on tablet and phone — the mockup is drawn at
   100%. `html` is (0,0,1) and outside body, so `body.site` cannot reach it;
   `html:root` is (0,1,1) and wins on specificity at any source order. This
   sheet is frontend-only, so wp-admin keeps Astra's scaling.                  */
html:root { font-size: 100%; }

/* .ast-container is max-width:1240px + side margins — full-bleed bands never
   reach the viewport edge until this is undone.                               */
body.elementor-page .ast-container,
body.elementor-template-full-width .ast-container,
body.site .ast-container { max-width: none; width: 100%; margin: 0; padding: 0; }
body.site .site-content > .ast-container { display: block; }
body.site #primary, body.site .site-main {
  margin: 0; padding: 0; width: 100%; max-width: none;
}
body.site .ast-separate-container .ast-article-single,
body.site .ast-separate-container .site-main > .ast-row {
  background: transparent; padding: 0; margin: 0; box-shadow: none;
}
body.site .ast-scroll-top-icon, body.site #ast-scroll-top { display: none; }
/* Astra gives ul a 51px inline margin and p a block margin, both at (0,0,1),
   which beats the mockup's `*{margin:0}`                                      */
body.site .e-con ul, body.site .e-con ol { margin: 0; padding: 0; }
body.site .e-con p { margin: 0; }
body.site .elementor-widget-text-editor p + p { margin-block-start: .9em; }

/* --- 3. image + media widgets -------------------------------------------- */
body.site .elementor-widget-image,
body.site .elementor-widget-image .elementor-image,
body.site .elementor-widget-image figure { line-height: 0; margin: 0; }
body.site .elementor-widget-image img { display: block; width: 100%; height: auto; }
/* an image that the design system sizes itself must not be stretched          */
body.site .elementor-widget-image img.work__img,
body.site .elementor-widget-image img.hero__cut,
body.site .elementor-widget-image img.mega__thumb-img { width: auto; }

/* --- 3b. the gallery card's image stage ----------------------------------- */
/* `.work__stage` is `aspect-ratio:4/5` + `overflow:hidden`. In the mockup the
   <img> fills it (`width:100%;height:100%`) and adds no intrinsic height. Live,
   Elementor slips a widget div in between: that div sized itself to the image's
   natural height, and because `overflow:hidden` drops a flex item's automatic
   minimum size to zero, the stage collapsed to 34px instead of 439. 45 of the
   68 cards rendered as slivers — and the clipped images then never entered the
   viewport, so lazy-loading never fired for them either.

   In a COLUMN flex container the cross size is resolved after the main size, so
   `aspect-ratio` on the stage itself cannot produce a height until the image has
   loaded — and it never loaded, because the collapsed stage kept it out of the
   viewport. Carrying the ratio on the child instead breaks the loop: the child
   is a grid item whose width is definite immediately.

   NOTE: no `align-self:stretch` here. The stage is `place-items:center`, and
   stretching the child instead locks its height to the stage's — which is the
   very thing the child is supposed to size. That closed the loop again and the
   child measured 6.8px inside a 34px stage.                                    */
/* The stage's own width comes from stretching, and a stretched cross size is
   not "definite" during the main-size pass — so its `aspect-ratio` produced no
   height. An explicit `width:100%` against the card's definite width is, and
   the ratio then resolves before the image has loaded a single byte.           */
body.site .work > .work__stage { width: 100%; flex: 0 0 auto; }

body.site .work__stage > .elementor-widget-image,
body.site .work__stage > .e-con {
  width: 100%; height: 100%; min-height: 0;
}
body.site .work__stage > .elementor-widget-image > .elementor-image,
body.site .work__stage > .elementor-widget-image figure { height: 100%; }
body.site .work__stage > .elementor-widget-image img { height: 100%; }

/* --- 4. button widget: the design system's .btn owns the look ------------- */
/* `_css_classes` puts `btn btn--solid` on the WIDGET WRAPPER, not on the <a>.
   So the wrapper is the button: design.css styles it, and everything Elementor
   nests inside has to become layout-transparent. (Setting display:contents on
   the wrapper instead deletes the button's own box — it measured 0×0.)         */
body.site .elementor-widget-button .elementor-button-wrapper,
body.site .elementor-widget-button a.elementor-button,
body.site .elementor-widget-button button.elementor-button { display: contents; }

/* Elementor claims the full row for anything inside a container through
   `.e-con>.elementor-widget{width:var(--container-widget-width)}` with
   `--container-widget-width:100%` (0,2,0). Right for a stacked column, wrong for
   a button: both hero CTAs stretched to the full 680px column and stacked.
   Restrict the override to buttons — the general 100% still applies elsewhere. */
body.site .elementor-widget.btn,
body.site .e-con.btn,
body.site .btn > .elementor-widget,
body.site .btn > .e-con { width: auto; }
body.site .elementor-widget-button a.elementor-button,
body.site .elementor-widget-button button.elementor-button {
  /* the wrapper carries `.btn` and its radius; this inner box must stay flat
     so the corner is not drawn twice */
  background: none; border-radius: 0; padding: 0; font-size: inherit;
  font-family: inherit; font-weight: inherit; line-height: inherit;
  color: inherit; fill: currentColor; text-align: inherit; box-shadow: none;
}
body.site .elementor-button-content-wrapper { display: contents; }
body.site .elementor-button-text { display: inline; }

/* --- 4b. inline SVG icons inside a <button> ------------------------------- */
/* The design system's reset carries `img, svg, video { max-width: 100% }`. For a
   grid item inside a <button>, Chromium resolves that percentage against an
   indefinite width and lands on 0 — so `max-width:0` clamped every icon away
   while `height` stayed 18px. The burger, the quick-view expander and the
   newsletter arrow all rendered as empty boxes. `min-width` would also work
   (min beats max in the clamping order) but only by fighting the symptom.      */
body.site button svg { max-width: none; }

/* --- 5. Elementor nav-menu -> the mockup's .nav --------------------------- */
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu {
  display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.5rem);
  background: none;
}
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu > li { margin: 0; }
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
  position: relative; padding: .55rem .35rem; font-size: .95rem; font-weight: 500;
  font-family: var(--f-body);
  color: var(--steel-2); display: inline-flex; align-items: center; gap: .35rem;
  transition: color .35s var(--ease); white-space: nowrap; background: none;
}
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item::after {
  content: ""; position: absolute; inset-inline-start: .35rem;
  inset-inline-end: .35rem; inset-block-end: 0; height: 1px; width: auto;
  background: var(--bronze); transform: scaleX(0);
  transform-origin: inline-end; transition: transform .45s var(--ease);
}
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active,
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[aria-expanded="true"] {
  color: var(--steel);
}
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover::after,
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active::after,
body.site .hdr .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[aria-expanded="true"]::after {
  transform: scaleX(1); transform-origin: inline-start;
}
/* the widget also prints a duplicate <nav> for its own mobile dropdown — the
   mockup has its own drawer, so hide it rather than run two menus             */
body.site .hdr .elementor-menu-toggle,
body.site .hdr .elementor-nav-menu--dropdown { display: none; }
@media (max-width: 1080px) { body.site .hdr .elementor-widget-nav-menu { display: none; } }

/* --- 6. header rows ------------------------------------------------------- */
/* containers are width:auto from reset.css; the bar and its groups are the
   exception — they must fill and lay out horizontally.                        */
body.site .hdr > .wrap { width: min(100% - (var(--gut) * 2), var(--max)); }
body.site .hdr .hdr__bar { width: 100%; }

/* --- 7. form widget ------------------------------------------------------- */
/* Elementor emits post-<id>.css for fields at (0,5,0): colours are set in the
   widget's own settings, this only undoes the column_gap geometry.            */
/* the mockup's `.form{display:grid;gap:1.15rem}` and `.field{gap:.45rem}` can't
   reach the Pro widget's own row markup — without this the consent line and the
   submit button sat flush against each other                                   */
body.site .elementor-form .elementor-form-fields-wrapper {
  margin: 0; gap: 1.15rem; row-gap: 1.15rem; column-gap: 1.15rem;
}
body.site .elementor-form .elementor-field-group { padding: 0; row-gap: .45rem; }
/* Elementor sizes a half-width field as a flat `width:50%`, which assumes its
   own negative-margin gutter. With a real `gap` the pair no longer fits on one
   line and every field stacked — subtract the gap from the basis instead.      */
body.site .elementor-form .elementor-field-group.elementor-col-50 {
  width: calc(50% - .575rem); flex-basis: calc(50% - .575rem);
  max-width: calc(50% - .575rem);
}
body.site .newsletter .elementor-form-fields-wrapper { gap: 0; }

/* A select is wrapped in `.elementor-field.elementor-select-wrapper` holding the
   <select> plus a caret div. Both the wrapper and the <select> carry field
   classes, so the frame was drawn twice and the inner box came out 32px short
   of the field beside it. Draw the frame once, on the wrapper, and float the
   caret over it.                                                              */
/* the wrapper also carries `.elementor-field`, so it picked up the field padding
   as well — 32px of it, which is exactly how much narrower the select came out */
/* `.elementor-field.elementor-select-wrapper` rather than the wrapper class
   alone: the field padding rule above has identical specificity and comes
   later in this file, so a tie would keep the 32px that squeezed the select.  */
body.site .elementor-form .elementor-field.elementor-select-wrapper {
  position: relative; display: block; padding: 0;
}
body.site .elementor-form .elementor-field.elementor-select-wrapper select {
  width: 100%; background: none; border: 0; border-radius: 0;
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 1rem;
}
/* Elementor's caret is an icon-font <i> that would not centre reliably; the
   design system already ships its own chevron for selects, so use that and drop
   Elementor's element entirely. */
body.site .elementor-form .select-caret-down-wrapper { display: none; }
body.site .elementor-form .elementor-field.elementor-select-wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B08D57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.05rem center;
  padding-inline-start: 2.6rem;
}
body.site .elementor-form .elementor-field-group > label {
  font-family: var(--f-spec); font-size: var(--t-spec); letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-3); margin-block-end: .5rem;
}
body.site .elementor-form .elementor-field,
body.site .elementor-form .elementor-field-textual {
  font-family: var(--f-body); font-size: 1rem; padding: .85rem 1rem;
  border-radius: var(--r); min-height: 3rem;
}
body.site .elementor-form .elementor-button {
  font-family: var(--f-spec); letter-spacing: .12em; padding: 1rem 2rem;
}

/* the acceptance checkbox: the mockup's `.consent input` rules can't reach the
   Pro widget's own markup, so it rendered as a raw browser checkbox           */
body.site .elementor-field-type-acceptance .elementor-field-option {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .84rem; color: var(--steel-3); line-height: 1.55;
}
body.site .elementor-field-type-acceptance input[type="checkbox"] {
  width: 17px; height: 17px; flex: none; margin-block-start: 3px;
  accent-color: var(--bronze);
  /* the 3rem min-height that gives text inputs their size also applies to
     `.elementor-field`, and a checkbox is one — it stretched to 48px tall */
  min-height: 0; padding: 0; border: 0; background: none;
}
body.site .elementor-field-type-acceptance label { margin: 0; font-weight: 400; }

/* --- 7b. newsletter: one inline row, the way the mockup draws it ---------- */
/* The mockup's newsletter is a single bordered row (input + arrow button); the
   real Pro form widget stacks label, field and button and made the footer 49px
   taller on every page. Same markup contract, same look — but it submits.      */
body.site .newsletter .elementor-form-fields-wrapper {
  display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0;
}
body.site .newsletter .elementor-field-group { flex: 1 1 auto; min-width: 0; margin: 0; }
body.site .newsletter .elementor-field-group > label { display: none; }
body.site .newsletter .elementor-field-group.e-form__buttons { flex: 0 0 auto; }
body.site .newsletter .elementor-field,
body.site .newsletter .elementor-field-textual {
  background: none; border: 0; padding: .85rem 1rem; font-size: .9rem;
  min-height: 0; height: 100%; border-radius: 0;   /* inside .newsletter's own frame */
}
body.site .newsletter .elementor-button {
  border: 0; background: var(--bronze); color: var(--void);
  padding: 0 1.15rem; font-weight: 700; height: 100%;
  /* sits flush in the corner of .newsletter, so it repeats only that side */
  border-radius: 0;
  border-start-end-radius: var(--r); border-end-end-radius: var(--r);
  letter-spacing: 0;
}

/* --- 8. admin bar offset -------------------------------------------------- */
body.site.admin-bar .hdr { inset-block-start: 32px; }
@media (max-width: 782px) { body.site.admin-bar .hdr { inset-block-start: 46px; } }

/* --- 9. plain WordPress documents (accessibility, privacy) ---------------- */
/* These two pages are ordinary post content, not Elementor. bridge.css strips
   .ast-container down to nothing for the built pages, which leaves a document
   page with no column at all — the text ran the full 1440px and the <h1> sat
   under the fixed header. Give that content the design system's own measure. */
body.site:not(.elementor-page) .site-content .entry-content,
body.site:not(.elementor-page) .site-content .entry-header {
  width: min(100% - (var(--gut) * 2), 78ch);
  margin-inline: auto;
}
body.site:not(.elementor-page) .site-content {
  display: block;
  padding-block: clamp(8rem, 13vw, 11rem) clamp(4rem, 8vw, 7rem);
}
body.site:not(.elementor-page) .entry-title {
  font-family: var(--f-display); font-size: var(--t-h1); line-height: 1.12;
  color: var(--steel); margin: 0 0 1.6rem;
}
body.site:not(.elementor-page) .entry-content h2 {
  font-family: var(--f-display); font-size: var(--t-h3); color: var(--steel);
  line-height: 1.2; margin: 2.6rem 0 .9rem;
}
body.site:not(.elementor-page) .entry-content p { margin: 0 0 1.1rem; }
body.site:not(.elementor-page) .entry-content ul {
  margin: 0 0 1.4rem; padding-inline-start: 1.2rem; list-style: none;
}
body.site:not(.elementor-page) .entry-content li {
  position: relative; margin-block-end: .6rem; padding-inline-start: 1rem;
}
body.site:not(.elementor-page) .entry-content li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  width: 5px; height: 5px; background: var(--bronze); border-radius: 50%;
}
body.site:not(.elementor-page) .entry-content a {
  color: var(--bronze-hi); text-decoration: underline;
  text-underline-offset: .22em;
}
body.site:not(.elementor-page) .entry-content strong { color: var(--steel); }


/* 24.09.2026 — series tiles. The image widget carries .serie__bg on its wrapper
   AND the design rule reaches the <img> inside, so opacity .22 applied twice
   (0.22 x 0.22 = 5%) and the six collection tiles read as empty. The wrapper
   keeps the effect; the image itself stays fully opaque. */
body.site .serie .serie__bg.elementor-widget img,
body.site .serie:hover .serie__bg.elementor-widget img {
  opacity: 1; filter: none; transform: none; padding: 0;
}
/* the tile title is an Elementor heading: the h3 tag default from reset.css
   outranked `.serie h3` (17px instead of the mockup's 26px) */
body.site .serie h3.elementor-heading-title { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }

/* 04.10.2026 — Michael: "renders all the time". The gallery's empty-state is an
   Elementor text widget, and the widget's own display rule beats the [hidden]
   attribute site.js toggles, so "no works match this filter" sat under the grid. */
body.site .empty-state.elementor-widget[hidden] { display: none; }
/* mega menu: series name and blurb ran together ("אופנועיםמכונות מרוץ") — the
   .mega__nm wrapper became a row container; stack them like the mockup */
body.site .mega__nm.e-con.e-con { --flex-direction: column; flex-direction: column; --gap: 3px; gap: 3px; }
body.site .mega__nm b, body.site .mega__nm > span { display: block; }


/* --- generated: design-system max-widths re-emitted above
   Elementor's (0,4,0) `.e-con>.elementor-widget{max-width:100%}` --- */
body.site .e-con > .elementor-widget.hero__copy,
body.site .e-con > .e-con.hero__copy,
body.site .e-con > .e-con-inner > .elementor-widget.hero__copy{max-width:none}
body.site .e-con > .elementor-widget.hero__piece,
body.site .e-con > .e-con.hero__piece,
body.site .e-con > .e-con-inner > .elementor-widget.hero__piece{max-width:660px}
body.site .e-con > .elementor-widget.hero__sub,
body.site .e-con > .e-con.hero__sub,
body.site .e-con > .e-con-inner > .elementor-widget.hero__sub{max-width:46ch}
body.site .e-con > .elementor-widget.lead,
body.site .e-con > .e-con.lead,
body.site .e-con > .e-con-inner > .elementor-widget.lead{max-width:var(--max-txt)}


/* --- generated: design-system bottom margins re-emitted above
   Elementor's (0,3,0) widget-margin reset --- */
body.site .elementor-widget.ccell__ico.ccell__ico,
body.site .e-con.ccell__ico.ccell__ico{margin-block-end:.35rem}
body.site .elementor-widget.crumbs.crumbs,
body.site .e-con.crumbs.crumbs{margin-block-end:1.5rem}
body.site .elementor-widget.filters.filters,
body.site .e-con.filters.filters{margin-block-end:clamp(2rem, 4vw, 3.4rem)}
body.site .elementor-widget.hero__sub.hero__sub,
body.site .e-con.hero__sub.hero__sub{margin-block-end:2.2rem}
body.site .elementor-widget.trust__n.trust__n,
body.site .e-con.trust__n.trust__n{margin-block-end:.45rem}
body.site .elementor-widget.usp__head.usp__head,
body.site .e-con.usp__head.usp__head{margin-block-end:clamp(2.4rem, 5vw, 4.2rem)}
body.site .mega__col > .elementor-widget.eyebrow.eyebrow,
body.site .mega__col > .e-con.eyebrow.eyebrow{margin-block-end:1.1rem}


/* --- generated: image box rules pushed onto the real <img>,
   since Elementor puts the design-system class on the wrapper --- */
body.site .work__img img{width: 100%; height: 100%; object-fit: contain; object-position: center 58%;
  transform: translateZ(30px) scale(1);
  transition: transform .75s var(--ease), filter .75s var(--ease);
  filter: drop-shadow(0 26px 26px rgba(0,0,0,.6));}
body.site .work__img--boxed img{width: 100%; height: 100%; object-fit: cover; max-height: none;
  filter: grayscale(.15) contrast(1.04);}
body.site .serie__bg img{/* `inset:0` alone does not size a replaced element: for an <img> with
     `height:auto` the browser keeps the intrinsic height and ignores `bottom`,
     so these ran 790px tall inside a 300px tile — cropped and off-centre, with
     `object-fit:contain` never getting a box to fit into. Explicit 100%/100%
     hands it one, and `object-position` then centres every tile alike.        */
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; object-fit: contain; object-position: center; padding: 12%;
  opacity: .22; filter: grayscale(1);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);}
body.site .vid__panel video img{display: block; width: 100%; height: auto; max-height: 78vh;
  background: #000; aspect-ratio: 16 / 9; object-fit: contain;}
body.site .expo video img{display: block; width: 100%; aspect-ratio: 464 / 832; object-fit: cover;
  background: var(--plinth); border: 1px solid var(--hair); border-radius: var(--r);}