/* =========================================================================
   Sinerg - Design Layer
   A styling layer over the existing Elementor markup. Nothing here changes
   content; it restyles what is already on the page.

      Direction: carry the homepage's design language across the rest of the
   site. Same warm gold (#d4ad78 / #efd5ae), same near-black (#0a0c0f), same
   13px white cards on a warm paper ground, same centred section titles over a
   short gold rule, and dark text on every gold fill.
   ========================================================================= */

:root {
  /* ---- brand, unchanged from the existing Elementor palette ---- */
  --s-gold:        #d4ad78;
  --s-gold-deep:   #a8813f;
  --s-cream:       #E6DFCC;

  /* ---- derived gold scale ---- */
  --s-gold-wash:   #faf7f1;
  --s-gold-tint:   #efd5ae;
  --s-gold-soft:   #e0cba6;
  --s-gold-ink:    #5A4B1F;

  /* ---- warm neutrals, biased toward the gold so the palette reads as one ---- */
  --s-paper:       #FFFFFF;
  --s-paper-2:     #faf8f4;
  --s-paper-3:     #f4f1ea;
  --s-line:        #d9d4cc;
  --s-line-2:      #D6D2C8;

  --s-ink:         #0a0c0f;   /* near-black, warm - matches the logo */
  --s-ink-2:       #12151a;
  --s-body:        #423E3A;
  --s-muted:       #6E6861;
  --s-faint:       #9B948B;

  /* ---- type ---- */
  --s-display: 'Heebo', 'Segoe UI', system-ui, sans-serif;
  --s-body-font: 'Assistant', 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.1rem, 1.1rem + 3.4vw, 3.9rem);
  --fs-h1:      clamp(1.9rem, 1.1rem + 2.8vw, 3.1rem);
  --fs-h2:      clamp(1.55rem, 1.05rem + 1.9vw, 2.6rem);
  --fs-h3:      clamp(1.12rem, 1.02rem + .38vw, 1.35rem);
  --fs-body:    clamp(1rem, .975rem + .12vw, 1.0625rem);
  --fs-small:   .9rem;
  --fs-eyebrow: .74rem;

  /* ---- rhythm ---- */
  --s-section:  clamp(2.6rem, 1.2rem + 3.4vw, 4.6rem);
  --s-radius:   6px;
  --s-radius-lg: 13px;

  /* ---- elevation: tight, warm-tinted, never soft/blurry ---- */
  --s-sh-1: 0 1px 2px rgba(26,24,23,.05), 0 1px 1px rgba(26,24,23,.04);
  --s-sh-2: 0 2px 4px rgba(26,24,23,.06), 0 8px 20px -8px rgba(26,24,23,.12);
  --s-sh-3: 0 4px 8px rgba(26,24,23,.07), 0 18px 40px -14px rgba(26,24,23,.22);

  --s-ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   1. Typographic foundation
   The theme asks for a font family called "MFE" that is not defined anywhere
   on the site, so every heading was falling back to the browser default.
   ========================================================================= */

body,
body .elementor-widget-text-editor,
body .elementor-widget-theme-post-content {
  font-family: var(--s-body-font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--s-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .elementor-heading-title,
body .elementor-image-box-title,
body .elementor-slide-heading,
body .e-n-accordion-item-title-text {
  font-family: var(--s-display);
  color: var(--s-ink);
  /* Hebrew is set at normal tracking; the negative value here was a Latin
     display habit that closed the counters of every heading on the site. */
  letter-spacing: normal;
  line-height: 1.25;
  text-wrap: balance;
}

body h1, body .elementor-widget-heading h1.elementor-heading-title { font-size: var(--fs-h1); font-weight: 800; }
body h2, body .elementor-widget-heading h2.elementor-heading-title { font-size: var(--fs-h2); font-weight: 800; }
body h3, body .elementor-widget-heading h3.elementor-heading-title { font-size: var(--fs-h3); font-weight: 700; }

body p { margin-block: 0 1.05em; }
body strong, body b { font-weight: 700; color: var(--s-ink); }

/* Latin product names inside Hebrew copy shouldn't jump in size. */
body :is(h1,h2,h3,.elementor-heading-title) { font-synthesis: none; }

/* =========================================================================
   2. Section rhythm
   Elementor sections carried arbitrary padding; this gives the page one beat.
   ========================================================================= */

body .elementor-element.e-con.e-parent {
  padding-block: var(--s-section);
}

/* The header and footer shells carry the homepage's own spacing, and the hero
   sets its own, so none of them take the section rhythm. */
body header .e-con,
body header .e-con-inner,
body footer .e-con,
body footer .e-con-inner,
body .elementor-location-header .e-con,
body .elementor-location-footer .e-con,
body .e-con:has(> .sr-shell),
body .e-con:has(.sr-shell),
body .e-con:has(> .sr-page),
body .e-con:has(.sr-page),
body .e-con:has(.sr-page) .e-con-inner,
body .elementor-element.e-con.e-parent:has(> .elementor-widget-slides) {
  padding-block: 0 !important;
}

/* The rebuilt page bodies own their own edges, so the widget wrapper that
   holds them must not add a strip of page background above the hero. */
body .e-con:has(.sr-page) .elementor-widget-html,
body .e-con:has(.sr-page) .elementor-widget-container {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

/* Warm the muddy mid-grey band the theme used behind the FAQ. */
body .elementor-element.e-con.e-parent[style*="background-color:#b"],
body .elementor-element.e-con.e-parent[style*="background-color:#B"] {
  background-color: var(--s-paper-2) !important;
}

/* =========================================================================
   3. Section headings - eyebrow rule + title
   ========================================================================= */

body .elementor-widget-heading .elementor-heading-title {
  position: relative;
}

/* A hairline gold rule under standalone section titles. */
body .e-con > .elementor-widget-heading > .elementor-heading-title::after,
body .e-con > .e-con-inner > .elementor-widget-heading > .elementor-heading-title::after,
body .e-con > .elementor-widget-heading > .elementor-widget-container > .elementor-heading-title::after {
  content: "";
  display: block;
    width: 44px;
  height: 2px;
  margin-block-start: .85rem;
  margin-inline: auto;
  background: var(--s-gold);
}
body .elementor-widget-heading.elementor-widget__width-initial .elementor-heading-title::after,
body .s-card .elementor-heading-title::after,
body header .elementor-heading-title::after,
body footer .elementor-heading-title::after { display: none !important; }

/* =========================================================================
   4. Buttons
   One button system: solid gold primary, dark on hover, with an arrow that
   travels. Everything that was a black or mismatched button inherits it.
   ========================================================================= */

body .elementor-button,
body .elementor-button-link,
body button[type="submit"],
body input[type="submit"] {
  font-family: var(--s-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
    border-radius: var(--s-radius) !important;
  border: 1px solid var(--s-gold-tint) !important;
  background-color: var(--s-gold-tint) !important;
  color: #12100d !important;
  padding: .82em 1.9em !important;
  transition: background-color .3s var(--s-ease), border-color .3s var(--s-ease),
              color .3s var(--s-ease), transform .3s var(--s-ease), box-shadow .3s var(--s-ease);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
body .elementor-button:hover,
body .elementor-button:focus-visible,
body button[type="submit"]:hover,
body input[type="submit"]:hover {
    background-color: var(--s-gold) !important;
  border-color: var(--s-gold) !important;
  color: #12100d !important;
  transform: translateY(-2px);
  box-shadow: var(--s-sh-2);
}
body .elementor-button:active { transform: translateY(0); }

/* Several labels carry a literal ">" character. JS swaps it for an element
   so the arrow can travel on hover - and points it correctly for RTL. */
body .elementor-button .elementor-button-text { position: relative; }
body .elementor-button .s-arrow {
  display: inline-block;
  transition: transform .3s var(--s-ease);
  transform: translateX(0);
}
body .elementor-button:hover .s-arrow { transform: translateX(-5px); }

/* Focus is a visible ring, never a removed outline. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body .elementor-button:focus-visible {
  outline: 2px solid var(--s-gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================================
   5. Header
   Slimmer, white, hairline rule. Gains a shadow and shrinks once scrolled.
   ========================================================================= */

body header .elementor-element.e-con.e-parent,
body .elementor-element-2fd64f24 {
  /* No backdrop-filter here: it creates a containing block for fixed
     descendants, which traps the mobile menu panel inside the header. The bar
     is opaque anyway, so the blur bought nothing. */
  background-color: #000 !important;
  border-bottom: 1px solid #16181c;
  transition: box-shadow .35s var(--s-ease), padding .35s var(--s-ease), background-color .35s var(--s-ease);
  padding-block: 1.1rem !important;
}
body.s-scrolled header .elementor-element.e-con.e-parent,
body.s-scrolled .elementor-element-2fd64f24 {
  padding-block: .6rem !important;
    box-shadow: 0 1px 0 #23262b, 0 10px 30px -14px rgba(0,0,0,.7);
  background-color: #000 !important;
}

body header .elementor-widget-image img,
body .elementor-element-2fd64f24 .elementor-widget-image img {
  /* the supplied logo is dark artwork, so it is inverted for the dark bar */
  filter: grayscale(1) brightness(0) invert(1);
  transition: max-width .35s var(--s-ease), transform .35s var(--s-ease);
}
body.s-scrolled header .elementor-widget-image img { transform: scale(.9); }

/* --- navigation --- */
body .elementor-nav-menu .elementor-item {
  font-family: var(--s-display);
  font-weight: 700;
  font-size: .95rem;
  color: #f2efe9 !important;
  letter-spacing: 0;
  position: relative;
  padding-inline: .9rem !important;
  transition: color .25s var(--s-ease);
}
body .elementor-nav-menu > li > a.elementor-item::after {
  content: "";
  position: absolute;
  inset-inline-end: .9rem;
  bottom: .35rem;
  width: 0;
  height: 2px;
  background: var(--s-gold);
  transition: width .3s var(--s-ease);
}
body .elementor-nav-menu > li > a.elementor-item:hover::after,
body .elementor-nav-menu > li > a.elementor-item.elementor-item-active::after {
  width: calc(100% - 1.8rem);
}
body .elementor-nav-menu > li > a.elementor-item:hover { color: var(--s-gold-tint) !important; }

/* dropdown */
body .elementor-nav-menu--dropdown {
  border: 1px solid #2b2f34;
  border-radius: 9px;
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
  overflow: hidden;
  background: #101317 !important;
}
body .elementor-nav-menu--dropdown a.elementor-sub-item {
  font-family: var(--s-body-font);
  font-size: .92rem;
  font-weight: 600;
  color: #dcd8d1 !important;
  padding: .62rem 1.1rem !important;
  border-bottom: 1px solid #232629;
  transition: background-color .2s var(--s-ease), color .2s var(--s-ease);
}
body .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
  background: rgba(212,173,120,.13) !important;
  color: var(--s-gold-tint) !important;
}

/* =========================================================================
   6. Hero slides
   Bigger, calmer type; a scrim so copy stays legible over any photograph;
   and - the important one - the mobile layout no longer collides with the
   logo, which it did at every width below 768px.
   ========================================================================= */

/* .swiper-slide-inner must stay absolutely positioned - that is what lifts the
   copy on top of the photograph. Forcing it to relative drops it into normal
   flow below the image, where the slide's overflow clips it away entirely. */
body .elementor-widget-slides .swiper-slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(12,11,10,.62) 0%, rgba(12,11,10,.34) 46%, rgba(12,11,10,.04) 80%);
  pointer-events: none;
}
body .elementor-widget-slides .swiper-slide-contents {
  position: relative;
  z-index: 2;
}

body .elementor-slide-heading {
  font-family: var(--s-display) !important;
  font-weight: 900 !important;
  font-size: var(--fs-display) !important;
  line-height: 1.14 !important;
  letter-spacing: normal;
  color: #fff !important;
  margin-bottom: .55rem !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
body .elementor-slide-description {
  font-family: var(--s-body-font) !important;
  font-size: clamp(1rem, .95rem + .5vw, 1.2rem) !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.9) !important;
  max-width: 46ch;
  margin-inline-start: 0;
  margin-block-end: 0 !important;
  padding-block-start: .9rem;
  border-block-start: 2px solid var(--s-gold);
  display: block;
}

/* Stack heading, rule, copy and call to action in one column. */
body .elementor-widget-slides .swiper-slide-contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body .elementor-slide-button {
  margin-top: 1.6rem !important;
  font-size: 1rem !important;
  border-width: 1px !important;
}

/* arrows + dots */
body .elementor-widget-slides .elementor-swiper-button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  transition: background-color .25s var(--s-ease), border-color .25s var(--s-ease), transform .25s var(--s-ease);
}
body .elementor-widget-slides .elementor-swiper-button:hover {
  background: var(--s-gold);
  border-color: var(--s-gold);
  transform: scale(1.06);
}
body .elementor-widget-slides .swiper-pagination-bullet {
  border-radius: 2px !important;
  width: 22px !important; height: 3px !important;
  background: rgba(255,255,255,.45) !important;
  opacity: 1 !important;
  transition: background-color .3s var(--s-ease), width .3s var(--s-ease);
}
body .elementor-widget-slides .swiper-pagination-bullet-active {
  background: var(--s-gold) !important;
  width: 40px !important;
}

/* =========================================================================
   7. Product cards

   The cards are not image-box widgets. Each one is a container holding a
   title-only image-box plus a separate image widget, so the card treatment
   belongs on the container. JS tags them; the classes below do the rest.
   ========================================================================= */

body .e-con.s-card {
  background: var(--s-paper) !important;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-lg);
  padding: 1.5rem 1.4rem 1.7rem !important;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  overflow: hidden;
  position: relative;
  transition: transform .35s var(--s-ease), box-shadow .35s var(--s-ease), border-color .35s var(--s-ease);
}
body .e-con.s-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--s-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--s-ease);
}
body .e-con.s-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s-sh-3);
  border-color: var(--s-gold-soft);
}
body .e-con.s-card:hover::before { transform: scaleX(1); }

/* The photograph leads; the label follows. */
body .e-con.s-card .s-card__media {
  order: -1;
  /* Several cards pull the product image up with a negative margin so it
     overhangs the card. Inside a bordered card that just clips the picture
     away, so the offset is neutralised and every image sits in its card. */
  margin-top: 0 !important;
  margin-bottom: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 172px;
}
body .e-con.s-card .s-card__media img {
  max-height: 186px;
  width: auto;
  margin-inline: auto;
  display: block;
  mix-blend-mode: multiply;
  transition: transform .5s var(--s-ease);
}
body .e-con.s-card:hover .s-card__media img { transform: scale(1.06); }
/* Elementor adds its own 1.1 scale on the image widget; one effect is enough. */
body .e-con.s-card .elementor-widget-image.e-transform:hover { transform: none !important; }

/* The title block is a plain text slot inside the card, not a box of its own. */
body .e-con.s-card .elementor-image-box-wrapper,
body .e-con.s-card .elementor-image-box-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}
body .e-con.s-card .elementor-image-box-title {
  font-family: var(--s-display) !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--s-ink) !important;
  margin: 0 0 .18rem !important;
  transition: color .3s var(--s-ease);
}
body .e-con.s-card:hover .elementor-image-box-title { color: var(--s-gold-deep) !important; }
body .e-con.s-card .elementor-image-box-description {
  font-family: var(--s-body-font) !important;
  font-size: .95rem !important;
  color: var(--s-muted) !important;
  line-height: 1.55;
  margin: 0 !important;
}

/* Cards in a row share a height. */
body .e-con:has(> .s-card) { align-items: stretch; }

/* Standalone image-box widgets elsewhere keep a quiet default. */
body .elementor-widget-image-box:not(.s-card__body) .elementor-image-box-title {
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important;
}

/* =========================================================================
   8. Accordion (FAQ)
   Was a hard black 2px box with square corners. Now a quiet list with
   hairline dividers and a rotating indicator.
   ========================================================================= */

/* The widget itself carried a hard 3px near-black square box. Remove it and
   let the inner list be the card. */
body .elementor-widget-n-accordion,
body .elementor-widget-n-accordion > .elementor-widget-container {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

body .elementor-widget-n-accordion .e-n-accordion {
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius-lg);
  overflow: hidden;
  background: var(--s-paper);
  box-shadow: var(--s-sh-1);
}
body .e-n-accordion-item {
  border: 0 !important;
  border-bottom: 1px solid var(--s-line) !important;
  background: transparent !important;
}
body .e-n-accordion-item:last-child { border-bottom: 0 !important; }

body .e-n-accordion-item-title {
  padding: 1.15rem 1.4rem !important;
  background: transparent !important;
  border: 0 !important;
  transition: background-color .25s var(--s-ease), color .25s var(--s-ease);
  gap: 1rem;
}
body .e-n-accordion-item-title:hover { background: var(--s-gold-wash) !important; }
body .e-n-accordion-item[open] > .e-n-accordion-item-title { background: var(--s-gold-wash) !important; }

body .e-n-accordion-item-title-text {
  font-family: var(--s-display) !important;
  font-weight: 700 !important;
  font-size: 1.03rem !important;
  color: var(--s-ink) !important;
  line-height: 1.45;
}
body .e-n-accordion-item[open] .e-n-accordion-item-title-text { color: var(--s-gold-deep) !important; }

body .e-n-accordion-item-title-icon,
body .e-n-accordion-item-title-icon > span {
  transition: transform .35s var(--s-ease), color .25s var(--s-ease);
  color: var(--s-gold) !important;
}
body .e-n-accordion-item-title-icon svg,
body .e-n-accordion-item-title-icon svg * {
  fill: var(--s-gold) !important;
  stroke: var(--s-gold) !important;
  width: 20px; height: 20px;
}
body .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
body .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg * {
  fill: var(--s-gold-deep) !important;
  stroke: var(--s-gold-deep) !important;
}
body .e-n-accordion-item[open] .e-n-accordion-item-title-icon { transform: rotate(180deg); }

body .e-n-accordion-item > .elementor-element,
body .e-n-accordion-item .e-con {
  padding: 0 1.4rem 1.4rem !important;
}
body .e-n-accordion-item p { color: var(--s-body); font-size: 1rem; }

/* =========================================================================
   9. Forms
   ========================================================================= */

body .elementor-field-group .elementor-field,
body .elementor-field-textual {
  font-family: var(--s-body-font) !important;
  font-size: 1rem !important;
  border: 1px solid var(--s-line-2) !important;
  border-radius: var(--s-radius) !important;
  background: var(--s-paper) !important;
  color: var(--s-ink) !important;
  padding: .85em 1.05em !important;
  min-height: 52px;
  box-shadow: none !important;
  transition: border-color .25s var(--s-ease), box-shadow .25s var(--s-ease);
}
body .elementor-field-textual:focus {
  border-color: var(--s-gold) !important;
  box-shadow: 0 0 0 3px rgba(157,149,126,.22) !important;
  outline: none;
}
body .elementor-field-textual::placeholder { color: var(--s-faint) !important; opacity: 1; }
/* The contact form lays four fields out in one row. Below the desktop width
   that row is wider than the viewport and drags the whole page sideways, so
   the fields stack instead. */
@media (max-width: 1024px) {
  body .elementor-form-fields-wrapper {
    flex-wrap: wrap !important;
    row-gap: .75rem;
    /* Elementor offsets this row with negative side margins to create the
       field gutter; that is what makes it wider than its own container. */
    margin-inline: 0 !important;
  }
  body .elementor-form-fields-wrapper > .elementor-field-group {
    padding-inline: 0 !important;
  }
  body .elementor-form-fields-wrapper > .elementor-field-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

body .elementor-field-group > label { font-family: var(--s-display); font-weight: 600; font-size: .9rem; color: var(--s-ink); }

/* =========================================================================
   10. Anchor sections
   The contact band was flat olive with a black submit button. It becomes the
   page's single deep-charcoal moment, with the gold doing the work.
   ========================================================================= */

body .e-con.e-parent.s-anchor,
body .e-con.e-parent.elementor-element-5ebcf5f2 {
  background: var(--s-ink) !important;
  background-image:
    radial-gradient(120% 90% at 85% 0%, rgba(157,149,126,.16) 0%, transparent 58%),
    linear-gradient(var(--s-ink), var(--s-ink)) !important;
  position: relative;
}
body .e-con.e-parent.s-anchor::before,
body .e-con.e-parent.elementor-element-5ebcf5f2::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: linear-gradient(to left, var(--s-gold), transparent);
}
body .s-anchor :is(h1,h2,h3,.elementor-heading-title),
body .elementor-element-5ebcf5f2 :is(h1,h2,h3,.elementor-heading-title),
body .s-anchor .elementor-heading-title,
body .elementor-element-5ebcf5f2 .elementor-heading-title { color: #fff !important; }
body .s-anchor p, body .elementor-element-5ebcf5f2 p,
body .s-anchor .elementor-widget-text-editor,
body .elementor-element-5ebcf5f2 .elementor-widget-text-editor { color: rgba(255,255,255,.78) !important; }
body .elementor-element-5ebcf5f2 .elementor-heading-title::after { margin-inline: 0; }

/* =========================================================================
   11. Client logo strip - greyscale at rest, colour on hover
   ========================================================================= */

body .elementor-widget-image-carousel .swiper-slide-image {
  filter: grayscale(1);
  opacity: .55;
  transition: filter .35s var(--s-ease), opacity .35s var(--s-ease), transform .35s var(--s-ease);
}
body .elementor-widget-image-carousel .swiper-slide:hover .swiper-slide-image {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* =========================================================================
   12. Icon lists (spec sheets)
   ========================================================================= */

body .elementor-widget-icon-list .elementor-icon-list-item {
  padding-block: .42rem;
  border-bottom: 1px solid var(--s-line);
  transition: background-color .2s var(--s-ease);
}
body .elementor-widget-icon-list .elementor-icon-list-item:last-child { border-bottom: 0; }
body .elementor-widget-icon-list .elementor-icon-list-icon svg,
body .elementor-widget-icon-list .elementor-icon-list-icon i { color: var(--s-gold) !important; fill: var(--s-gold) !important; }
body .elementor-widget-icon-list .elementor-icon-list-text {
  font-family: var(--s-body-font);
  font-size: .97rem;
  color: var(--s-body);
}

/* =========================================================================
   13. Footer
   ========================================================================= */

/* The contact band lives inside <footer>, so it has to be excluded here or
   the footer tone overrides the dark anchor treatment below. */
body footer .elementor-element.e-con.e-parent:not(.s-anchor):not(.elementor-element-5ebcf5f2),
body .elementor-element-2d41cc65:not(.s-anchor) {
  background: #0a0c0f !important;
  border-top: 1px solid #1c1f23;
}
/* Only the logo is inverted, and only once JS has swapped it for the version
   that actually has an alpha channel - inverting the opaque asset turns the
   whole rectangle white. */
body footer .elementor-widget-image img.s-invert { filter: grayscale(1) brightness(0) invert(1); }
body footer :is(p, .elementor-widget-text-editor, .elementor-icon-list-text) { color: #c2c2c2 !important; }
body footer .elementor-widget-text-editor,
body footer .elementor-widget-text-editor * { color: #bdb9b2 !important; }
body footer .elementor-widget-text-editor a { color: var(--s-gold-tint) !important; }
body footer .elementor-heading-title { color: var(--s-gold) !important; }
body footer .elementor-heading-title { font-size: .95rem !important; font-weight: 700 !important; letter-spacing: .02em; color: var(--s-gold) !important; }
body footer .elementor-heading-title::after { display: none !important; }
body footer .elementor-icon-list-item a {
  font-family: var(--s-body-font);
  font-size: .92rem;
  color: #bdb9b2 !important;
  transition: color .22s var(--s-ease);
}
body footer .elementor-icon-list-item a:hover { color: var(--s-gold-tint) !important; }
body footer .elementor-widget-icon-list .elementor-icon-list-item { border-bottom: 0; padding-block: .28rem; }

body .elementor-social-icon {
  background: transparent !important;
  border: 1px solid #3a3e43 !important;
  color: #cfcbc4 !important;
  transition: background-color .25s var(--s-ease), border-color .25s var(--s-ease), color .25s var(--s-ease), transform .25s var(--s-ease);
}
body .elementor-social-icon:hover {
  background: var(--s-gold) !important;
  border-color: var(--s-gold) !important;
  color: #12100d !important;
  transform: translateY(-2px);
}
body .elementor-social-icon svg { fill: currentColor !important; }

/* =========================================================================
   14. Scroll reveal - set by JS, so no-JS visitors always see content
   ========================================================================= */

body.s-anim [data-s-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--s-ease), transform .7s var(--s-ease);
  transition-delay: var(--s-delay, 0ms);
  will-change: opacity, transform;
}
body.s-anim [data-s-reveal].s-in { opacity: 1; transform: none; }

/* =========================================================================
   15. Responsive
   ========================================================================= */

@media (max-width: 1024px) {
  body .elementor-nav-menu--dropdown { margin-top: .5rem; }
}

/* Between the desktop layout and Elementor's mobile burger there is a band
   where the seven-item horizontal menu is wider than the viewport and drags
   the page sideways. Elementor also scales its nav typography up at these
   breakpoints, so the menu is scaled back down to fit on one line instead. */
@media (max-width: 1100px) {
  body header .e-con-inner,
  body .elementor-element-2fd64f24 > .e-con-inner {
    flex-wrap: nowrap;
    gap: .5rem;
  }
  body .elementor-nav-menu--main {
    flex-wrap: nowrap !important;
    justify-content: flex-end;
  }
  body .elementor-nav-menu--main .elementor-item {
    font-size: .82rem !important;
    padding-inline: .42rem !important;
    padding-block: .4rem !important;
    white-space: nowrap;
  }
  body .elementor-nav-menu > li > a.elementor-item::after { inset-inline-end: .42rem; }
  body .elementor-nav-menu > li > a.elementor-item:hover::after,
  body .elementor-nav-menu > li > a.elementor-item.elementor-item-active::after {
    width: calc(100% - .84rem);
  }
  body header .elementor-widget-image img { max-width: 132px; }
}

@media (max-width: 880px) {
  body .elementor-nav-menu--main .elementor-item {
    font-size: .75rem !important;
    padding-inline: .3rem !important;
  }
  body header .elementor-widget-image img { max-width: 112px; }
}

/* On RTL pages a stray 54px of phantom width was making the document wider
   than the viewport, which right-anchors <body> and pushes the last column of
   content off-screen where it cannot even be scrolled to. Clipping the axis
   keeps the document at viewport width. `clip` rather than `hidden` because it
   creates no scroll container and so leaves sticky positioning intact. */
@media (max-width: 1024px) {
  html { overflow-x: clip !important; }
}

/* Elementor containers default to flex-wrap:nowrap, so any row whose children
   do not shrink pushes content past the viewport. Below the desktop width the
   rows are allowed to wrap, and icon-box rows stack outright. */
@media (max-width: 1024px) {
  body .e-con,
  body .e-con-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 880px) {
  body .elementor-widget-icon-box {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* The mobile hero used to run under the sticky logo. Give it room and
     rebalance the type so it holds on a 390px screen. */
  /* Sit the copy at the foot of the slide so it clears the sticky logo.
     align-items is the cross-axis here - the wrapper is a row-direction flex. */
  body .elementor-widget-slides .swiper-slide-inner {
    padding: 2.2rem 1.25rem 2.4rem !important;
    align-items: flex-end !important;
  }
  body .elementor-widget-slides .swiper-slide-contents { max-width: 100% !important; }
  body .elementor-slide-heading { font-size: clamp(1.6rem, 6.4vw, 2.1rem) !important; }
  body .elementor-slide-description { font-size: .98rem !important; max-width: 100%; }
  body .elementor-widget-slides .swiper-slide-bg::after {
    background: linear-gradient(to top, rgba(12,11,10,.82) 0%, rgba(12,11,10,.5) 48%, rgba(12,11,10,.28) 100%);
  }

  body .elementor-widget-image-box .elementor-image-box-wrapper { padding: 1.25rem 1.1rem 1.4rem; }
  body .elementor-widget-image-box .elementor-image-box-img { min-height: 132px; }
  body .elementor-widget-image-box .elementor-image-box-img img { max-height: 150px; }

  body .e-n-accordion-item-title { padding: 1rem 1.05rem !important; }
  body .e-n-accordion-item > .elementor-element,
  body .e-n-accordion-item .e-con { padding: 0 1.05rem 1.15rem !important; }

  body .elementor-button { width: auto; }
}

/* Wide content must never push the page sideways. */
body img, body video, body iframe { max-width: 100%; }
body table { display: block; overflow-x: auto; }

/* =========================================================================
   16. Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body.s-anim [data-s-reveal] { opacity: 1 !important; transform: none !important; }
}


/* =========================================================================
   17. Third-party launchers
   The accessibility widget ships a fixed blue gradient. WhatsApp keeps its
   own green - that colour is the affordance, so it stays.
   ========================================================================= */

body .asw-menu-btn {
  background-image: linear-gradient(140deg, var(--s-gold) 0%, var(--s-gold-deep) 100%) !important;
  background-color: var(--s-gold) !important;
  border-color: var(--s-gold-deep) !important;
  outline-color: var(--s-gold-deep) !important;
  box-shadow: var(--s-sh-2) !important;
  transition: transform .25s var(--s-ease), box-shadow .25s var(--s-ease);
}
body .asw-widget .asw-menu-btn { border-color: var(--s-gold-deep) !important; }
body .asw-menu-btn:hover { transform: scale(1.06); box-shadow: var(--s-sh-3) !important; }

/* An empty leftover container must not inherit the section rhythm - and a
   zero-height flex child still consumes its parent's `gap`, so it is removed
   from the flow rather than merely flattened. */
body .e-con.s-empty {
  display: none !important;
}

/* Elementor nests its own padding inside the section padding, which doubles
   the space above every band. The section owns the vertical rhythm. */
body .e-con.e-parent > .e-con-inner {
  padding-block: 0 !important;
}

/* =========================================================================
   18. Screen-reader-only text
   The theme hides the "skip to content" link by pushing it outside the
   viewport, which on an RTL page lands 54px past the right edge and gives the
   whole document a horizontal scrollbar. Clip it in place instead - visually
   hidden, still announced, and still revealed on keyboard focus.
   ========================================================================= */

body .screen-reader-text,
body .elementor-screen-only,
body .skip-link.screen-reader-text {
  /* fixed, not absolute: a fixed element is out of flow entirely and can
     never contribute to the document's scroll width. */
  position: fixed !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keyboard users must still be able to reach and see the skip link. */
body .screen-reader-text:focus,
body .skip-link.screen-reader-text:focus {
  position: fixed !important;
  z-index: 100000;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: .9rem 1.4rem !important;
  clip: auto !important;
  clip-path: none !important;
  background: var(--s-ink) !important;
  color: #fff !important;
  font-family: var(--s-display);
  font-weight: 700;
  font-size: 1rem !important;
  text-decoration: none;
  border-radius: 0 0 var(--s-radius) var(--s-radius) !important;
}


/* =========================================================================
   19. Site ground
   The homepage bands alternate warm paper and near-black. Inner pages get the
   same ground so they do not read as a different template.
   ========================================================================= */

body:not(.home) { background: var(--s-paper-2); }

/* Cards on inner pages pick up the homepage's card: white, 13px, hairline. */
body .e-con.s-card,
body .elementor-widget-image-box .elementor-image-box-wrapper {
  border-radius: var(--s-radius-lg);
  border-color: var(--s-line);
}