/* ==========================================================================
   Sonic Home (Code) — the Elementor homepage recreated in pure code.
   --------------------------------------------------------------------------
   Prefix .sh-*. FLUID-FIRST like the brand pages: one clamp() type/space
   scale, logical properties only (RTL-native), reduced-motion safe.
   Enqueued by functions.php when the "Sonic Home (Code)" template is active.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.sh {
  --sh-step--1: clamp(0.80rem, 0.76rem + 0.18vw, 0.94rem);
  --sh-step-0:  clamp(1.00rem, 0.94rem + 0.27vw, 1.18rem);
  --sh-step-1:  clamp(1.20rem, 1.08rem + 0.55vw, 1.55rem);
  --sh-step-2:  clamp(1.44rem, 1.22rem + 0.98vw, 2.05rem);
  --sh-step-3:  clamp(1.73rem, 1.37rem + 1.60vw, 2.70rem);
  --sh-step-4:  clamp(2.07rem, 1.50rem + 2.55vw, 3.55rem);

  --sh-space-2xs: clamp(0.50rem, 0.46rem + 0.18vw, 0.63rem);
  --sh-space-xs:  clamp(0.75rem, 0.69rem + 0.27vw, 0.94rem);
  --sh-space-s:   clamp(1.00rem, 0.91rem + 0.36vw, 1.25rem);
  --sh-space-m:   clamp(1.50rem, 1.24rem + 1.16vw, 2.50rem);
  --sh-space-l:   clamp(2.00rem, 1.48rem + 2.32vw, 4.00rem);
  --sh-space-xl:  clamp(3.00rem, 1.96rem + 4.64vw, 7.00rem);

  --sh-bg:      #000;
  --sh-surface: #101013;                    /* cards */
  --sh-border:  rgba(255, 255, 255, 0.09);
  --sh-fg:      #f5f5f7;
  --sh-muted:   rgba(235, 235, 245, 0.62);
  --sh-accent:  #0065ff;                    /* the site-wide CTA blue */
  --sh-pink:    #ff2d78;                    /* the "engineer your future" em */

  --sh-radius:  clamp(14px, 1.8vw, 22px);
  --sh-shell:   1024px;
  --sh-header-shell: 966px;                 /* the Elementor header column */
  --sh-gutter:  clamp(1rem, 0.4rem + 3vw, 4rem);

  background: var(--sh-bg);
  color: var(--sh-fg);
  overflow-x: clip;
  font-size: var(--sh-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.page-template-page-sonic-home { background: #000 !important; }

/* No focus rings for POINTER users (client requirement) — but KEYBOARD
   navigation gets a visible :focus-visible ring (IS 5568 / WCAG 2.4.7).
   Mouse/touch never trigger :focus-visible, so nothing changes for them. */
.sh a:focus, .sh button:focus, .sh input:focus, .sh select:focus { outline: none !important; }
.sh a:focus-visible, .sh button:focus-visible, .sh input:focus-visible,
.sh select:focus-visible, .sh textarea:focus-visible, .sh [tabindex]:focus-visible {
  outline: 2px solid #7ab0ff !important;
  outline-offset: 3px;
}
.sh a, .sh button { -webkit-tap-highlight-color: transparent; }

.sh-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;
}
.sh-skip-link {
  position: absolute;
  inset-inline-start: var(--sh-space-s);
  inset-block-start: var(--sh-space-s);
  z-index: 1000;
  padding: var(--sh-space-2xs) var(--sh-space-s);
  background: var(--sh-fg);
  color: var(--sh-bg);
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.sh-skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   2. SHARED — section shell, headings, buttons, reveals
   -------------------------------------------------------------------------- */
.sh-section {
  width: 100%;
  max-width: calc(var(--sh-shell) + 2 * var(--sh-gutter));
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
  padding-block: var(--sh-space-xl) 0;
}
/* Anchor landings (e.g. the hero "Learn more" -> #sh-crafting) clear the
   floating header pill instead of sliding under it. */
.sh-section { scroll-margin-block-start: 170px; }
@media (max-width: 767px) {
  .sh-section { scroll-margin-block-start: 135px; }
}
.sh-section__head { text-align: center; }
/* Section headings — the ORIGINAL practice: the contrast is COLOR
   (#999999 quiet vs #f1f1f1 bright), NOT weight. One weight (400),
   2rem desktop / 1.5rem mobile like the Elementor page. */
.sh-h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #f1f1f1;
  text-wrap: balance;
}
.sh-h2__quiet { color: #999999; }
.sh-section__sub {
  margin: var(--sh-space-2xs) 0 0;
  color: var(--sh-muted);
  font-size: var(--sh-step-0);
}
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.9em;
  background: var(--sh-accent);
  color: #fff !important;
  font-size: var(--sh-step-0);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.sh-btn:hover { background: #0053d6; transform: translateY(-2px); }

/* Scroll-scrub letter fill (the Valerion "obsession" effect): JS splits
   the text into char spans and interpolates #6e6e6e -> #fff with scroll.
   Word/char spans stay PLAIN INLINE — we only recolor, never transform.
   (inline-block word boxes accumulate subpixel rounding, which re-wrapped
   the Hebrew hero paragraph from 2 lines to 3 after the split; plain
   inline spans keep the layout identical to the raw text.) */
[data-sh-fill] { color: #7d7d7d; }
.sh-fillw { white-space: nowrap; }

/* One-shot reveals. Elements are VISIBLE by default — no load-time fade.
   JS "arms" (hides) only elements still below the fold at boot, then IO
   reveals them on scroll. Keep .is-in AFTER .is-armed (source order!). */
.sh-reveal {
  transition: opacity 0.9s linear, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-reveal.is-armed { opacity: 0; transform: translateY(24px); }
.sh-reveal.is-in { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. HERO — photo strips + centered copy
   -------------------------------------------------------------------------- */
/* Tile sizes lifted from the original Elementor page (post-7506.css):
   desktop 50rem x 20rem, tablet 25rem x 10rem, mobile 15rem x 10rem
   (row B mobile 15rem x 8rem). object-fit cover, sharp corners, 20px gap,
   black edge-fade shadows on both sides. Row A runs "reverse" (to the
   right) and row B to the left — exactly like the original. */
/* One viewport tall on desktop: strips on top, the copy column centered
   in whatever remains — the CTA never gets cut at the fold. */
.sh-hero {
  padding-block-start: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
/* Hero video — contained (side margins + rounded corners), pushed below
   the floating Elementor header pill (bottom ~117px desktop / ~158px
   mobile — the header-clearance rule). */
/* Live-measured clearance: pill bottom 149px @1440 / 117px @390 —
   video top sits ~14px below it on both. */
.sh-hero__media {
  position: relative;
  width: min(100% - 2 * var(--sh-gutter), 1280px);
  margin-inline: auto;
  /* The header pill may overlap the clip's top feather — by design. */
  padding-block-start: 110px;
}
@media (max-width: 767px) {
  .sh-hero__media { padding-block-start: 121px; }
}
/* Ambient-motion pause (WCAG 2.2.2): one discreet toggle on the video
   corner stops the video AND the CSS marquees. */
.sh .sh-motion-toggle {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  z-index: 3;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 28, 32, 0.55) !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.sh .sh-motion-toggle:hover { opacity: 1; }
.sh-motion-toggle svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.sh-motion-toggle .sh-mt-play { display: none; }
.sh-motion-toggle[aria-pressed="true"] .sh-mt-pause { display: none; }
.sh-motion-toggle[aria-pressed="true"] .sh-mt-play { display: block; }
.sh.is-motion-paused .sh-strip__track,
.sh.is-motion-paused .sh-logos__track {
  animation-play-state: paused;
}

/* The clip has a baked-in black FEATHER on all edges — never crop it
   (object-fit:cover sliced the feather into hard lines) and no radius:
   natural aspect, full frame, melts into the page. */
.sh-hero__video {
  display: block;
  width: 100%;
  height: auto;
}
/* Desktop: HEIGHT-driven sizing (width follows the intrinsic ratio) so
   video + title + paragraph + CTA always fit one viewport — full-width
   height:auto blew past the fold. */
@media (min-width: 768px) {
  .sh-hero__video {
    width: auto;
    height: 44svh;
    max-width: 100%;
    margin-inline: auto;
  }
  /* The copy bites into the clip's internal black feather (-6svh) and
     drops the 40vh floor — kills the dead band between video and text
     and keeps the CTA above the fold. (.sh prefix: this MQ sits BEFORE
     the base .sh-hero__copy rule in source — the order trap.) */
  .sh .sh-hero__copy {
    min-height: 0;
    margin-block-start: -6svh;
  }
}

/* The gallery band (the former hero strips), between the cert logos and
   the Human Engine. Full-bleed; the strip CSS below is shared. */
.sh-band {
  margin-block-start: var(--sh-space-xl);
  overflow: hidden;
}

.sh-hero__strips {
  position: relative;
  display: grid;
  row-gap: clamp(12px, 1vw, 20px);
  overflow: hidden;
}
/* Edge fade via MASK on the container (not overlay pseudos): symmetric,
   physical, identical in LTR and RTL — no wrong-side gradients, no
   uncovered slivers. Page bg is pure black, so fading the content out
   looks exactly like the old black overlays. */
.sh-hero__strips {
  --shs-fade: clamp(60px, 9vw, 160px);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--shs-fade),
    #000 calc(100% - var(--shs-fade)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--shs-fade),
    #000 calc(100% - var(--shs-fade)), transparent 100%);
}
.sh-strip { overflow: hidden; }
.sh-strip__track {
  display: flex;
  gap: clamp(12px, 1vw, 20px);
  width: max-content;
  animation: sh-strip-run 90s linear infinite;
}
.sh-strip--a .sh-strip__track { animation-direction: reverse; }
/* FLUID tiles: the original's 800x320 (ratio 5:2) scaled by viewport
   WIDTH (~16.6vw tall on a 1920 screen) but also capped by viewport
   HEIGHT (24svh per row) so two rows + the copy always fit the fold —
   on a MacBook 14 the strips shrink instead of pushing the CTA off. */
.sh-strip__img {
  height: min(clamp(128px, 16.6vw, 320px), 21svh);
  width: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 767px) {
  .sh-strip__img { width: 16rem; height: 11.5rem; }
  .sh-strip--b .sh-strip__img { height: 9rem; }
  .sh-hero__strips { row-gap: 12px; }
  .sh-strip__track { gap: 12px; animation-duration: 48s; }
}
@keyframes sh-strip-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* RTL: the track overflows to the LEFT (inline-end), so -50% slides it
   AWAY from the window and the marquee empties out. Mirror the loop. */
@keyframes sh-strip-run-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
html[dir="rtl"] .sh-strip__track,
html[dir="rtl"] .sh-logos__track {
  animation-name: sh-strip-run-rtl;
}

/* Copy block mirrors the original container: ~50vh centered column with a
   1rem gap (logo, H1, sub, CTA), bottom padding 3rem. */
.sh-hero__copy {
  /* Above the video: .sh-hero__media is position:relative (the pause
     button's anchor), so it PAINTS OVER static content — and the clip's
     baked black feather is opaque, so when the copy rises into it
     (-6svh) the video pixels covered the logo's top. Positioned + z-1
     puts the copy back on top. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex: 1;
  min-height: 40vh;         /* floor for very short viewports */
  text-align: center;
  width: min(640px, 100%);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
  padding-block: var(--sh-space-m) 2rem;
}
.sh-hero__mark {
  width: clamp(92px, 6.8vw, 128px);
  height: auto;
}
/* Original H1: Spline Sans 400, only "Redefining" is 600 (.weight-bold).
   Fluid ramp: ~28.8px on mobile, ~44px on a MacBook 14, 56px cap on
   large desktops (the original's widescreen 3.5rem). */
.sh-hero__title {
  margin: 0;
  font-size: clamp(1.8rem, 0.9rem + 1.9vw, 3.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.sh-hero__title b, .sh-hero__title strong { font-weight: 600; }
.sh-hero__line { display: block; }
/* Desktop: exactly two lines, like the original's manual <br>. The copy
   column (640px minus gutters) is narrower than "cinematic experience"
   at 3.5rem, so without this the second line wraps into a third. */
@media (min-width: 768px) {
  .sh-hero__line { white-space: nowrap; }
}
.sh-hero__sub {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--sh-muted);
  font-size: clamp(1rem, 0.83rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.sh-hero__cta { margin-block-start: var(--sh-space-2xs); }

/* --------------------------------------------------------------------------
   4. CRAFTING — Embla card carousel
   -------------------------------------------------------------------------- */
/* The reusable sonic-slider hosts the five capability cards (same goo
   "birth" nav as the brand pages). The wrap breaks out of the section
   shell to FULL-BLEED so cards peek at both screen edges under black
   side gradients — like the original; --ss-edge centers the active
   3-up group on the shell. */
.sh-crafting__wrap {
  --shc-slide: clamp(250px, 78vw, 320px);   /* card width (>=410px: 320) */
  --shc-gap:   clamp(15px, 2vw, 33px);      /* original: 33px / 15 mobile */
  position: relative;
  /* Content-width on desktop (3 cards + ~75px fade zones = 1176px, like
     the original), full-bleed only on narrow screens. */
  width: min(100vw, 1176px);
  margin-inline-start: calc(50% - min(50vw, 588px));
  margin-block-start: var(--sh-space-l);
}
/* Fade lives on the VIEWPORT (not the wrap) so the side arrows are
   never swallowed by the mask. */
.sh-crafting__wrap { --shc-fade: max(40px, calc(50% - var(--shc-slide) * 1.5 - var(--shc-gap) + 60px)); }
.sh-crafting__wrap .sonic-slider__viewport {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--shc-fade),
    #000 calc(100% - var(--shc-fade)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--shc-fade),
    #000 calc(100% - var(--shc-fade)), transparent 100%);
}
/* Mobile: fade ONLY on the scroll-direction side — the language-start
   side (left in EN, right in HE) stays clean. Still a loop. */
@media (max-width: 767px) {
  .sh-crafting__wrap .sonic-slider__viewport {
    -webkit-mask-image: linear-gradient(90deg,
      #000 0, #000 calc(100% - var(--shc-fade)), transparent 100%);
    mask-image: linear-gradient(90deg,
      #000 0, #000 calc(100% - var(--shc-fade)), transparent 100%);
  }
  html[dir="rtl"] .sh-crafting__wrap .sonic-slider__viewport {
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--shc-fade), #000 100%);
    mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--shc-fade), #000 100%);
  }
}
.sh .sonic-slider--crafting {
  --ss-gap: var(--shc-gap);
  --ss-edge: max(16px, calc(50% - var(--shc-slide) * 1.5 - var(--shc-gap)));
  --ss-radius: var(--sh-radius);
}
/* Text cards, not media slides: natural height (tallest card rules the
   row via flex stretch), surface skin from the .sh design system. */
/* Original card skin: NO border; the top is a touch lighter than the page
   background and melts into it towards the bottom (vertical gradient). */
.sonic-slider--crafting .sonic-slider__slide--card {
  flex: 0 0 var(--shc-slide);
  aspect-ratio: auto;
  height: auto;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.045) 55%,
    rgba(255, 255, 255, 0.012) 100%);
  border: 0;
  padding: clamp(26px, 4vw, 38px);
  padding-block-end: clamp(44px, 7vw, 60px);
}
.sonic-slider--crafting .sonic-slider__nav { margin-block-start: var(--sh-space-s); }
/* Side chevrons (desktop only) — bare thin arrows at the far edges, like
   the original. !important resets vs Elementor's global button styles. */
.sonic-slider__arrow { display: none; }
@media (min-width: 768px) {
  .sh .sonic-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .sh .sonic-slider__arrow:hover { color: #fff !important; }
  .sonic-slider__arrow--prev { inset-inline-start: 4px; }
  .sonic-slider__arrow--next { inset-inline-end: 4px; }
  .sonic-slider__arrow svg { width: 26px; height: 26px; }
  /* Chevrons are physical glyphs — flip for RTL reading order. */
  html[dir="rtl"] .sonic-slider__arrow svg { transform: scaleX(-1); }
}
/* Card-content entrance — re-runs EVERY time a card enters the visible
   group: sonic-slider.js toggles .is-inview per slide (>=80% visible),
   so leaving re-arms the elements and re-entering replays the animation.
   icon: fade-in-down · title: fade-in-right · text: fade-in-up. */
.sonic-slider--crafting .sh-card__icon,
.sonic-slider--crafting .sh-card__title,
.sonic-slider--crafting .sh-card__text {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sonic-slider--crafting .sh-card__icon  { transform: translateY(-16px); }
.sonic-slider--crafting .sh-card__title { transform: translateX(22px); }
.sonic-slider--crafting .sh-card__text  { transform: translateY(18px); }
html[dir="rtl"] .sonic-slider--crafting .sh-card__title { transform: translateX(-22px); }
.sonic-slider--crafting .sonic-slider__slide--card.is-inview .sh-card__icon {
  opacity: 1; transform: none; transition-delay: 0.05s;
}
.sonic-slider--crafting .sonic-slider__slide--card.is-inview .sh-card__title {
  opacity: 1; transform: none; transition-delay: 0.16s;
}
.sonic-slider--crafting .sonic-slider__slide--card.is-inview .sh-card__text {
  opacity: 1; transform: none; transition-delay: 0.27s;
}
@media (prefers-reduced-motion: reduce) {
  .sonic-slider--crafting .sh-card__icon,
  .sonic-slider--crafting .sh-card__title,
  .sonic-slider--crafting .sh-card__text {
    opacity: 1; transform: none; transition: none;
  }
}
.sh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 8vw, 66px);
  height: clamp(56px, 8vw, 66px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sh-fg);
}
.sh-card__icon svg { width: clamp(28px, 3.8vw, 34px); height: clamp(28px, 3.8vw, 34px); }
.sh-card__title {
  margin: clamp(1.8rem, 4vw, 2.4rem) 0 0;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sh-card__text {
  margin: var(--sh-space-s) 0 0;
  color: var(--sh-muted);
  font-size: clamp(0.97rem, 0.9rem + 0.3vw, 1.08rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. CATEGORIES — 3x2 photo cards
   -------------------------------------------------------------------------- */
.sh-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-block-start: var(--sh-space-l);
}
@media (max-width: 767px) {
  .sh-categories__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.sh-cat {
  position: relative;
  display: block;
  aspect-ratio: 1 / 0.86;               /* original desktop: 465x400-ish */
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--sh-radius);
  overflow: hidden;
  background: var(--sh-surface);
  text-decoration: none !important;
  isolation: isolate;
}
@media (max-width: 767px) {
  .sh-cat { aspect-ratio: 1 / 0.8; }    /* mobile: shorter than square */
}
.sh-cat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sh-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.72) 100%);
  z-index: 1;
}
/* Hover: a soft white wash (~7%) fading in slowly — like the original. */
.sh-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.sh-cat:hover::before { opacity: 1; }
.sh-cat__name {
  position: absolute;
  inset-inline-start: var(--sh-space-s);
  inset-block-end: var(--sh-space-s);
  z-index: 2;
  color: #fff;
  /* Original: 1.5rem/400 desktop, 1rem mobile. */
  font-size: clamp(1rem, 0.83rem + 0.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* "Cinema Environment" breaks to two tight lines (single words unaffected). */
  max-width: 7ch;
  line-height: 1.22;
}

/* --------------------------------------------------------------------------
   6. BRANDS — logo marquee + testimonial
   -------------------------------------------------------------------------- */
.sh-logos {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--sh-space-l);
}
.sh-logos {
  --shl-fade: clamp(90px, 24%, 340px);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, rgba(0,0,0,0.35) calc(var(--shl-fade) * 0.35),
    #000 var(--shl-fade), #000 calc(100% - var(--shl-fade)),
    rgba(0,0,0,0.35) calc(100% - var(--shl-fade) * 0.35), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, rgba(0,0,0,0.35) calc(var(--shl-fade) * 0.35),
    #000 var(--shl-fade), #000 calc(100% - var(--shl-fade)),
    rgba(0,0,0,0.35) calc(100% - var(--shl-fade) * 0.35), transparent 100%);
}
.sh-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sh-strip-run 60s linear infinite;
}
.sh-logos__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(12px, 2vw, 28px);
}
.sh-logos__item img {
  height: clamp(54px, 4.8vw, 66px);
  width: auto;
  /* Normalize every mark to PURE white regardless of the source colors. */
  filter: brightness(0) invert(1);
  user-select: none;
  -webkit-user-drag: none;
}

.sh-quote {
  margin: var(--sh-space-xl) auto 0;
  max-width: 62ch;
  text-align: center;
}
.sh-quote__text {
  margin: 0;
  color: var(--sh-muted);
  font-size: var(--sh-step-1);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}
/* The ORIGINAL quote mark: the faint Quete.svg floating above the text
   (like the Elementor overlay on the current homepage) — not a glyph. */
.sh-quote { position: relative; padding-block-start: clamp(56px, 7vw, 84px); }
.sh-quote::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  /* Centered — physical left+translate so RTL and LTR are identical. */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(36px, 4.4vw, 60px);
  aspect-ratio: 1;
  background: url('https://sonictech.co.il/wp-content/uploads/2026/01/Quete.svg') center / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
}
.sh-quote__who {
  margin-block-start: var(--sh-space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sh-quote__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-block-end: 6px;
}
.sh-quote__name { font-weight: 500; color: #fff; }
.sh-quote__org { color: #999999; font-size: var(--sh-step--1); }

/* --------------------------------------------------------------------------
   6.5 MEET OUR BRANDS — full-image brand cards on the sonic-slider
   (same shell as Crafting; NO edge fade per design).
   -------------------------------------------------------------------------- */
.sh-meetbrands__wrap {
  --shb-slide: clamp(260px, 78vw, 320px);
  --shb-gap:   clamp(15px, 2vw, 33px);
  position: relative;
  width: min(100vw, 1176px);
  margin-inline-start: calc(50% - min(50vw, 588px));
  margin-block-start: var(--sh-space-l);
}
.sh .sonic-slider--brands {
  --ss-gap: var(--shb-gap);
  --ss-edge: max(16px, calc(50% - var(--shb-slide) * 1.5 - var(--shb-gap)));
  --ss-radius: var(--sh-radius);
}
/* Equal heights ALWAYS: the card body is absolutely positioned, so the
   min-height is the single height driver (3:4 of the card width) and
   flex-stretch keeps every card identical — no odd short card. */
.sonic-slider--brands .sonic-slider__track { align-items: stretch; }
.sonic-slider--brands .sonic-slider__slide--brand {
  position: relative;
  flex: 0 0 var(--shb-slide);
  aspect-ratio: auto;
  height: auto;
  min-height: calc(var(--shb-slide) * 4 / 3);
  background: var(--sh-surface);
  overflow: hidden;
  isolation: isolate;
}
/* Desktop: the same breathing side fade as Crafting (viewport-level so
   the arrows stay clean). */
@media (min-width: 768px) {
  .sh-meetbrands__wrap {
    --shb-fade: max(40px, calc(50% - var(--shb-slide) * 1.5 - var(--shb-gap) + 60px));
  }
  .sh-meetbrands__wrap .sonic-slider__viewport {
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--shb-fade),
      #000 calc(100% - var(--shb-fade)), transparent 100%);
    mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--shb-fade),
      #000 calc(100% - var(--shb-fade)), transparent 100%);
  }
}
.sh-bcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Soft legibility scrim behind the copy only (inside the card). */
.sh-bcard__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  padding: var(--sh-space-m) var(--sh-space-s) var(--sh-space-s);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.78) 100%);
}
.sh-bcard__name {
  margin: 0;
  color: #fff;
  font-size: var(--sh-step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sh-bcard__desc {
  margin: var(--sh-space-2xs) 0 0;
  color: rgba(245, 245, 247, 0.82);
  font-size: clamp(0.88rem, 0.84rem + 0.2vw, 0.97rem);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sh-bcard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-start: var(--sh-space-s);
}
/* White pill, black text -> the brand scroll page. */
.sh .sh-bcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62em 1.5em !important;
  background: #fff !important;
  color: #0b0b0d !important;
  font-size: var(--sh-step--1);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sh .sh-bcard__btn:hover { opacity: 0.88; transform: translateY(-1px); }
/* Outlined pill (same shape as Learn more, 1px white border, no fill)
   -> the brand's product archive. */
.sh .sh-bcard__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62em 1.5em !important;
  background: transparent !important;
  color: #fff !important;
  font-size: var(--sh-step--1);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sh .sh-bcard__link:hover { background: rgba(255, 255, 255, 0.14) !important; }
/* The whole card is clickable (JS follows data-sh-href). */
.sh-bcard[data-sh-href] { cursor: pointer; }

/* --------------------------------------------------------------------------
   7. NEWEST — statement + cert logos
   -------------------------------------------------------------------------- */
.sh-newest { text-align: center; }
.sh-newest__text {
  margin: var(--sh-space-m) auto 0;
  max-width: 56ch;
  color: var(--sh-muted);
  font-size: var(--sh-step-0);
  line-height: 1.7;
  text-wrap: pretty;
}
.sh-newest__em {
  font-style: normal;               /* same style as the paragraph */
}
.sh-certs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin-block-start: var(--sh-space-l);
}
.sh-certs img { height: clamp(34px, 4.2vw, 58px); width: auto; opacity: 0.9; }

/* --------------------------------------------------------------------------
   8. TEAM — grid + bio dialogs
   -------------------------------------------------------------------------- */
/* The team rides the reusable sonic-slider too (goo nav + drag +
   autoplay), full-bleed with the same breathing side gradients. */
.sh-team__wrap {
  /* Mobile: ~3 members in view (31vw each); desktop: the 4-up 242px. */
  --sht-slide: clamp(104px, 31vw, 242px);
  --sht-gap: clamp(10px, 1.6vw, 18px);
  position: relative;
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-block-start: var(--sh-space-l);
}
.sh-team__wrap {
  --sht-fade: max(24px, calc(50% - var(--sht-slide) * 2 - var(--sht-gap) * 1.5 + 40px));
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--sht-fade),
    #000 calc(100% - var(--sht-fade)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--sht-fade),
    #000 calc(100% - var(--sht-fade)), transparent 100%);
}
.sh .sonic-slider--team {
  --ss-gap: var(--sht-gap);
  /* Centering is Embla-native (data-align="center") — no edge padding. */
  --ss-edge: 0px;
}
.sonic-slider--team .sonic-slider__slide--member {
  flex: 0 0 var(--sht-slide);
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  overflow: visible;
  text-align: center;
  /* Bottom safe zone: the STICKY nav floats in a ~70px band at the
     viewport bottom while the section rides up — this padding keeps the
     + buttons above that band so they are never covered/darkened. */
  padding-block: 4px 76px;
}
.sonic-slider--team .sonic-slider__nav { margin-block-start: var(--sh-space-m); }
/* DESKTOP: no carousel at all — sonic-slider.js bails out (the
   data-desktop-static attr) and the track renders as a static, centered
   4-up row: duplicates hidden, nav gone, no full-bleed, no mask. */
@media (min-width: 768px) {
  .sh-team__wrap {
    width: 100%;
    margin-inline-start: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sonic-slider--team.is-static .sonic-slider__viewport { padding-inline-start: 0; }
  .sonic-slider--team.is-static .sonic-slider__track { justify-content: center; }
  .sonic-slider--team.is-static .sonic-slider__slide--member:nth-child(n + 5) { display: none; }
  .sonic-slider--team.is-static .sonic-slider__nav { display: none; }
  .sonic-slider--team.is-static .sonic-slider__slide--member { padding-block-end: 8px; }
}
/* Mobile = the original "focus center" effect: ONE member centered at
   full opacity, the neighbors peeking from the screen edges dimmed.
   The active slide is centered by --ss-edge = 50vw - slide/2; the
   center-to-center distance (one slide, no gap) puts each neighbor's
   photo half-cut at the edge — like the original. */
@media (max-width: 767px) {
  .sh-team__wrap { --sht-slide: 50vw; --sht-gap: 0px; }
  /* .sh-prefixed so these beat the base rules regardless of source order. */
  .sh .sh-member__img { width: 72px; }
  .sh .sh-member__name { font-size: 1.05rem; }
  .sh .sh-member__role { font-size: 0.78rem; }
  .sh { --sh-more-size: 30px; }
  .sh .sh-member__more svg { width: 14px; height: 14px; }
  .sh .sonic-slider--team .sonic-slider__slide--member {
    opacity: 0.45;
    transition: opacity 0.35s ease;
  }
  .sh .sonic-slider--team .sonic-slider__slide--member.is-current { opacity: 1; }
}
.sh-member__img {
  width: min(100%, 120px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  margin-inline: auto;
  display: block;
  cursor: pointer;            /* the photo opens the bio dialog too */
}
.sh-member__name {
  margin: var(--sh-space-s) 0 0;
  /* Explicit white — Elementor heading globals otherwise repaint the h3. */
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 500;
  color: #fff;
}
.sh-member__role {
  margin: 4px 0 0;
  color: var(--sh-muted);
  font-size: var(--sh-step--1);
  line-height: 1.45;
}
.sh .sh-member__more {
  margin-block-start: var(--sh-space-s);
  /* Size via var — the mobile MQ overrides the var, immune to the
     !important-vs-source-order fight. */
  width: var(--sh-more-size, 34px) !important;
  height: var(--sh-more-size, 34px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0065ff !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.sh .sh-member__more:hover { background: #1a74ff !important; transform: scale(1.08); }
.sh-member__more svg { width: 16px; height: 16px; display: block; stroke: #fff; }

/* Bio dialog — fixed scrim + centered panel (replaces the off-canvas). */
.sh-bio {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sh-space-s);
  background: rgba(0, 0, 0, 0.55);
  /* Constant blur + animated opacity (transitioning backdrop-filter
     itself snaps in Safari/Chrome — the hamburger-search lesson). */
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0;
  /* Apple-style: slow, gradual fade-in of the blurred scrim. */
  transition: opacity 0.65s cubic-bezier(0.32, 0.72, 0, 1);
}
.sh-bio.is-open { opacity: 1; }
/* CRITICAL: display:flex above beats the [hidden] UA style — without this
   the four closed dialogs sit as invisible fixed overlays that swallow
   every pointer event on the page (incl. the site header). */
.sh-bio[hidden] { display: none !important; }
.sh-bio__panel {
  position: relative;
  width: min(92vw, 560px);
  max-height: 84vh;
  overflow-y: auto;
  background: #121216;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  padding: var(--sh-space-l) var(--sh-space-m) var(--sh-space-m);
  transform: translateY(14px);
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
.sh-bio.is-open .sh-bio__panel { transform: translateY(0); }
/* !important resets on the two round buttons — Elementor's global button
   styles otherwise paint them pink with padding that hides the icon. */
.sh .sh-bio__close {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 14px;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  color: var(--sh-fg) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.sh .sh-bio__close:hover { background: rgba(255, 255, 255, 0.16) !important; }
.sh-bio__close svg { width: 16px; height: 16px; display: block; stroke: currentColor; }
.sh-bio__img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}
.sh-bio__name { margin: var(--sh-space-s) 0 0; font-size: var(--sh-step-2); font-weight: 500; }
.sh-bio__role { margin: 2px 0 0; color: var(--sh-muted); font-size: var(--sh-step--1); }
.sh-bio__text {
  margin: var(--sh-space-s) 0 0;
  color: rgba(235, 235, 245, 0.75);
  font-size: var(--sh-step--1);
  line-height: 1.65;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   9. CONTACT — form + direct ways
   -------------------------------------------------------------------------- */
/* The faint paper-plane art from the original: an ::before overlay at
   opacity 0.25 — top center 25% wide on desktop, top right 45% on mobile. */
.sh-contact {
  position: relative;
  padding-block-end: var(--sh-space-xl);
}
.sh-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('https://sonictech.co.il/wp-content/uploads/2026/01/Airplane-icon.svg') top center / 25% auto no-repeat;
  opacity: 0.25;
  pointer-events: none;
}
@media (max-width: 767px) {
  .sh-contact::before { background-position: top right; background-size: 45% auto; }
}

/* Two-step form — one shared column width for form / OR / details. */
.sh-contact .sh-form,
.sh-contact__or,
.sh-contact .sh-ways {
  width: min(100%, 520px);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .sh-contact .sh-form,
  .sh-contact__or,
  .sh-contact .sh-ways { width: min(100%, 68vw); }
}
.sh-form { display: block; margin-block-start: var(--sh-space-l); }
.sh-form__step { display: grid; gap: 16px; }
.sh-form__step[hidden] { display: none; }
.sh-form__step.is-active { animation: sh-step-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sh-step-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
.sh-form__field {
  width: 100%;
  padding: 0.85em 1.1em;
  background: #262626;                       /* original field colors */
  border: 1px solid #5f5f5f;
  border-radius: 8px;
  color: #a8a8a8;
  font-size: var(--sh-step-0);
  font-family: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sh-form__field::placeholder { color: #a8a8a8; }
/* RTL: browsers force LTR on tel inputs — the "טלפון" placeholder stuck
   to the left. Keep the field RTL so the placeholder sits right. */
html[dir="rtl"] .sh-form__field[type="tel"] { direction: rtl; text-align: start; }
.sh-form__field:focus { border-color: #8a8a8a; color: #e6e6e6; }
.sh-form__label { color: var(--sh-muted); font-size: var(--sh-step-0); }
.sh-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
}
html[dir="rtl"] .sh-form__select { background-position: left 1.1em center; }
.sh-form__textarea { resize: vertical; min-height: 132px; }
.sh-form__hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }
.sh-form__next { width: 100%; }
.sh-form__btnrow {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  margin-block-start: 4px;
}
/* Previous — the dark pill (explicit resets vs Elementor button globals). */
.sh .sh-form__prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.2em !important;
  background: #2c2c31 !important;
  color: var(--sh-fg) !important;
  font-size: var(--sh-step-0);
  font-weight: 500;
  line-height: 1;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.sh .sh-form__prev:hover { background: #3a3a40 !important; }
.sh-form__msg { margin: 10px 0 0; min-height: 1.4em; text-align: center; color: var(--sh-muted); font-size: var(--sh-step--1); }
.sh-form__msg.is-ok { color: #35c46f; }
.sh-form__msg.is-err { color: #ff5f6b; }

/* OR — small caps between two dark hairlines. */
.sh-contact__or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block: var(--sh-space-l);
  color: #343438;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
}
.sh-contact__or::before,
.sh-contact__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #1a1a1a;
}

/* Direct-contact rows — original FA icons, hairline dividers, small type. */
.sh-ways { list-style: none; margin: 0; padding: 0; }
.sh-ways li { border-block-end: 1px solid rgba(255, 255, 255, 0.14); }
.sh-ways li:last-child { border-block-end: 0; }
.sh-ways a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  color: var(--sh-fg) !important;
  text-decoration: none !important;
  font-size: clamp(0.88rem, 0.84rem + 0.2vw, 1rem);
  line-height: 1.5;
  transition: color 0.2s ease;
}
.sh-ways a:hover { color: var(--sh-muted) !important; }
.sh-ways svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   10. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sh *, .sh *::before, .sh *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  .sh-reveal { opacity: 1; transform: none; }
}