/* ==== from tokens.css ==== */
/* ==========================================================================
   ATOMAX — Design tokens
   Single source of truth. Nothing below this file should hardcode a colour,
   a type size, a radius or a z-index.

   Concept: "המעבר" (The Passage)
   The product is transparent. The design language is therefore built on
   translucency, layered light and vertical striation — never on opaque slabs.
   ========================================================================== */

:root {
  /* ---- Ink ------------------------------------------------------------- */
  --ink-900: #06121f;   /* display headlines */
  --ink-700: #16324a;   /* sub-headlines */
  --ink-500: #46637e;   /* body copy */
  --ink-400: #7794ae;   /* muted / captions */
  --ink-300: #a8bed1;   /* hairline text, disabled */

  /* ---- Grounds --------------------------------------------------------- */
  --paper:   #fcfdff;   /* base page */
  --mist:    #eff5fb;   /* pale blue wash */
  --frost:   #e2edf7;   /* card tint */
  --deep:    #072a44;   /* inverted chapters */
  --deep-2:  #0b3a5c;
  --deep-3:  #114b74;

  /* ---- Brand ----------------------------------------------------------- */
  --azure:    #0e7cd4;  /* primary */
  --azure-d:  #0a5fa6;
  --azure-l:  #4aa3e8;
  --cyan:     #37bee9;  /* תכלת */
  --cyan-l:   #7fdcf7;
  --cyan-xl:  #c9eefb;

  /* ---- "Outside" chapter — the problem state --------------------------- */
  --dust:    #c98a4b;
  --dust-d:  #8a5a2b;
  --dust-xl: #f5e7d6;

  /* ---- Semantic -------------------------------------------------------- */
  --line:        rgba(6, 18, 31, .09);
  --line-soft:   rgba(6, 18, 31, .05);
  --line-invert: rgba(255, 255, 255, .14);
  --focus:       var(--cyan);

  /* ---- The signature surface: transparent PVC strips -------------------- */
  /* A repeating gradient that reads as hanging PVC ribbon with specular
     highlights down each leading edge. Reused in the preloader, the hero
     overlay, chapter seams and card hovers. */
  --strip: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0)    0px,
      rgba(255, 255, 255, .34)  2px,
      rgba(255, 255, 255, .07)  9px,
      rgba(150, 205, 238, .11) 44px,
      rgba(255, 255, 255, .02) 54px,
      rgba(255, 255, 255, 0)   56px);

  --strip-dense: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0)    0px,
      rgba(255, 255, 255, .28)  1px,
      rgba(255, 255, 255, .05)  5px,
      rgba(150, 205, 238, .08) 24px,
      rgba(255, 255, 255, 0)   30px);

  /* Frosted PVC pane — used for glass cards */
  --pvc-tint:  linear-gradient(160deg, rgba(255,255,255,.88), rgba(226,237,247,.62));
  --pvc-tint-d: linear-gradient(160deg, rgba(17,75,116,.52), rgba(7,42,68,.72));

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Assistant", "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.75rem, 7.6vw, 7rem);
  --fs-h1:      clamp(2.25rem, 5.6vw, 4.75rem);
  --fs-h2:      clamp(1.9rem, 4.4vw, 3.6rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.9rem);
  --fs-h4:      clamp(1.08rem, 1.5vw, 1.3rem);
  --fs-body-lg: clamp(1.05rem, 1.35vw, 1.28rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.1rem);
  --fs-sm:      .95rem;
  --fs-xs:      .82rem;
  --fs-over:    .7rem;   /* overline / eyebrow */

  --lh-display: .93;
  --lh-tight:   1.08;
  --lh-snug:    1.35;
  --lh-body:    1.78;

  --tr-display: -.035em;  /* tracking */
  --tr-tight:   -.02em;
  --tr-over:    .26em;

  /* ---- Space ----------------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 3.5rem;
  --s-9: 5rem;    --s-10: 7rem;

  --chapter-y:  clamp(5.5rem, 11vw, 10.5rem);
  --gutter:     clamp(1.25rem, 4.5vw, 4.5rem);
  --measure:    68ch;
  --maxw:       1440px;
  --maxw-text:  920px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-xl:   2.25rem;
  --r-lg:   1.5rem;
  --r-md:   1rem;
  --r-sm:   .625rem;
  --r-pill: 999px;

  /* ---- Elevation — diffuse and blue-tinted, never grey ------------------ */
  --sh-hair: 0 1px 2px rgba(6, 18, 31, .04);
  --sh-soft: 0 1px 2px rgba(6, 18, 31, .04), 0 12px 32px -10px rgba(10, 60, 100, .16);
  --sh-lift: 0 2px 4px rgba(6, 18, 31, .05), 0 34px 64px -18px rgba(10, 60, 100, .26);
  --sh-deep: 0 4px 8px rgba(6, 18, 31, .06), 0 60px 110px -30px rgba(7, 42, 68, .40);
  --sh-inset-hi: inset 0 1px 1px rgba(255, 255, 255, .7);
  --sh-inset-hi-d: inset 0 1px 1px rgba(255, 255, 255, .16);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22, .68, 0, 1);      /* primary reveal */
  --ease-soft: cubic-bezier(.32, .72, 0, 1);      /* UI state */
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);    /* symmetrical moves */
  --ease-spring: cubic-bezier(.34, 1.4, .48, 1);  /* pop / magnet */

  --d-fast:  180ms;
  --d-base:  380ms;
  --d-slow:  720ms;
  --d-vslow: 1100ms;

  /* ---- Z-index — systemic layers only ---------------------------------- */
  --z-backdrop:  0;
  --z-content:   1;
  --z-sticky:    20;
  --z-nav:       40;
  --z-overlay:   60;
  --z-preloader: 80;
  --z-grain:     90;
}

/* The page never flips to a dark theme: this is a hygiene / food-industry
   brand where "clean and bright" is the product promise. We still declare
   the scheme explicitly so the host never paints its own ground behind us. */
:root { color-scheme: light; }


/* ==== from base.css ==== */
/* ==========================================================================
   ATOMAX — Reset, document, typography primitives, shared components
   RTL-first: every directional rule uses logical properties.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win over any class that sets `display`. Without this a
   full-screen overlay such as the lightbox stays in the layout while
   "hidden" and intercepts every pointer event on the page. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


.atomax {
  background: var(--paper);
  color: var(--ink-500);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lock scroll while the preloader or the menu owns the screen */
body.atomax-locked { overflow: hidden; }

:where(.atomax) :is(h1, h2, h3, h4) {
  margin: 0;
  color: var(--ink-900);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
:where(.atomax) h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
:where(.atomax) h2 { font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
:where(.atomax) h3 { font-size: var(--fs-h3); }
:where(.atomax) h4 { font-size: var(--fs-h4); font-weight: 700; }

:where(.atomax) p  { margin: 0; text-wrap: pretty; }
:where(.atomax) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.atomax) :is(img, video, svg) { display: block; max-width: 100%; }
:where(.atomax) :is(img, video) { height: auto; }

:where(.atomax) a { color: inherit; text-decoration: none; }
:where(.atomax) button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:where(.atomax) :is(input, textarea, select) { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:where(.atomax) ::selection { background: var(--cyan-xl); color: var(--ink-900); }

/* Latin/numeric islands inside the RTL document -------------------------- */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.chapter {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--chapter-y);
}

/* The nav is fixed, so anchored sections must reserve room for it or native
   scrolling drops their heading underneath the pill. */
:where(section[id], [data-chapter]) { scroll-margin-block-start: 5.5rem; }

/* Chapters overlap deliberately: the page must read as one continuous sheet,
   never as stacked blocks. Sections that carry their own ground pull up into
   the previous one and the seam is dissolved by a gradient, not a border. */
.chapter--bleed { padding-inline: 0; }

/* --------------------------------------------------------------------------
   Eyebrow / overline
   -------------------------------------------------------------------------- */
.over {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: .34rem .78rem;
  border-radius: var(--r-pill);
  background: rgba(14, 124, 212, .07);
  box-shadow: inset 0 0 0 1px rgba(14, 124, 212, .12);
  color: var(--azure-d);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: var(--tr-over);
  line-height: 1;
}
.over::before {
  content: "";
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(55, 190, 233, .22);
}
.over--invert {
  background: rgba(6, 24, 40, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #dff4fd;
}
.over--dust {
  background: rgba(201, 138, 75, .10);
  box-shadow: inset 0 0 0 1px rgba(201, 138, 75, .22);
  color: var(--dust-d);
}
.over--dust::before { background: var(--dust); box-shadow: 0 0 0 3px rgba(201,138,75,.18); }

/* --------------------------------------------------------------------------
   Headline with a tinted accent clause
   -------------------------------------------------------------------------- */
.accent {
  font-style: normal;
  color: var(--azure);
}
.accent--cyan { color: var(--cyan); }

.lede {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  color: var(--ink-500);
}
.lede--invert { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   Buttons — nested "island" architecture
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: .72rem;
  padding-inline: 1.5rem .55rem;   /* logical: start / end */
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft),
              background-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft);
}
.btn:active { transform: scale(.975); }

.btn__ico {
  display: grid;
  place-items: center;
  inline-size: 2.15rem; block-size: 2.15rem;
  border-radius: 50%;
  flex: none;
  transition: transform var(--d-base) var(--ease-spring),
              background-color var(--d-base) var(--ease-soft);
}
.btn__ico svg { inline-size: .95rem; block-size: .95rem; }
/* RTL: forward motion is leftward */
.btn:hover .btn__ico { transform: translate3d(-3px, -1px, 0) scale(1.06); }

.btn--primary {
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--sh-soft), var(--sh-inset-hi-d);
}
.btn--primary .btn__ico { background: rgba(255, 255, 255, .13); }
.btn--primary:hover {
  background: var(--azure-d);
  box-shadow: var(--sh-lift), var(--sh-inset-hi-d);
}
.btn--primary:hover .btn__ico { background: rgba(255, 255, 255, .2); }

.btn--brand {
  background: var(--azure);
  color: #fff;
  box-shadow: 0 1px 2px rgba(6,18,31,.06), 0 18px 40px -12px rgba(14,124,212,.55), var(--sh-inset-hi-d);
}
.btn--brand .btn__ico { background: rgba(255, 255, 255, .17); }
.btn--brand:hover { background: var(--azure-d); }

.btn--ghost {
  background: rgba(255, 255, 255, .62);
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-hair);
  backdrop-filter: blur(10px);
}
.btn--ghost .btn__ico { background: rgba(6, 18, 31, .06); }
.btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(14,124,212,.28), var(--sh-soft); }

.btn--invert {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--line-invert);
  backdrop-filter: blur(10px);
}
.btn--invert .btn__ico { background: rgba(255, 255, 255, .16); }
.btn--invert:hover { background: rgba(255, 255, 255, .18); }

.btn--wa { background: #1faa54; color: #fff; }
.btn--wa .btn__ico { background: rgba(255,255,255,.2); }
.btn--wa:hover { background: #17903f; }

/* Quiet text link with an animated rule */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--azure-d);
  padding-block-end: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 100% 100%;   /* RTL: grows from the right */
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--ease-out);
}
.tlink:hover { background-size: 100% 1.5px; }
.tlink svg { inline-size: .8rem; block-size: .8rem; }

/* --------------------------------------------------------------------------
   Double-bezel surface — the machined-hardware card
   Outer shell holds a hairline + tint; inner core holds the content.
   -------------------------------------------------------------------------- */
.bezel {
  padding: 6px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.bezel__core {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 6px);
  background: #fff;
  box-shadow: var(--sh-soft), var(--sh-inset-hi);
}
.bezel--invert { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-invert); }
.bezel--invert .bezel__core { background: var(--pvc-tint-d); box-shadow: var(--sh-inset-hi-d); }

/* --------------------------------------------------------------------------
   The PVC strip seam — dissolves the join between two chapters
   -------------------------------------------------------------------------- */
.seam {
  position: relative;
  block-size: clamp(90px, 13vw, 190px);
  margin-block-end: calc(var(--chapter-y) * -1);
  pointer-events: none;
  z-index: var(--z-content);
}
.seam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--strip);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent);
  opacity: .6;
}

/* --------------------------------------------------------------------------
   Scroll reveal — the default entry for every block
   Elements are visible by default; the gate class arms the hidden state so
   the page is fully readable if JS never runs.
   -------------------------------------------------------------------------- */
.atomax-anim [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.6rem, 0);
  filter: blur(7px);
  transition:
    opacity var(--d-vslow) var(--ease-out),
    transform var(--d-vslow) var(--ease-out),
    filter var(--d-vslow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.atomax-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .atomax-anim [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Utility ---------------------------------------------------------------- */
.vh {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.nowrap { white-space: nowrap; }

/* Film grain — fixed, never attached to scrolling content */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }


/* ==== from layout.css ==== */
/* ==========================================================================
   ATOMAX — Chrome: preloader, nav, menu, scroll-spy, backdrop, footer, FAB
   ========================================================================== */

.skip {
  position: fixed;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  z-index: calc(var(--z-preloader) + 1);
  padding: .6rem 1rem;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--d-base) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   PRELOADER — two PVC leaves part to reveal the mark
   -------------------------------------------------------------------------- */
/* Gated on scripting: with JS off the curtain would never lift, so the
   element simply does not render. */
.preloader { display: none; }
.atomax-has-js .preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  background: var(--paper);
  overflow: hidden;
}
.preloader__leaf {
  position: absolute;
  inset-block: 0;
  inline-size: 50.5%;
  background:
    var(--strip),
    linear-gradient(180deg, var(--mist), var(--frost));
  will-change: transform;
  transition: transform 1.05s var(--ease-in-out);
}
/* Physical left/right on purpose: these are decorative overlays whose
   transform maths must not flip with the document direction. */
.preloader__leaf--a { left: 0; }
.preloader__leaf--b { right: 0; }

.preloader__mark {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
}
.preloader__mark img {
  inline-size: clamp(180px, 34vw, 320px);
  height: auto;
}
.preloader__bar {
  display: block;
  inline-size: clamp(120px, 22vw, 190px);
  block-size: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--azure));
  transition: inline-size var(--d-base) linear;
}

/* Exit: leaves sweep apart, mark lifts away */
.preloader.is-open .preloader__leaf--a { transform: translate3d(-102%, 0, 0); }
.preloader.is-open .preloader__leaf--b { transform: translate3d(102%, 0, 0); }
.preloader.is-open .preloader__mark { opacity: 0; transform: translate3d(0, -14px, 0); }
.preloader.is-done { opacity: 0; pointer-events: none; transition: opacity .35s linear .5s; }

@media (prefers-reduced-motion: reduce) {
  .preloader, .preloader__leaf, .preloader__mark { transition: none !important; }
}

/* --------------------------------------------------------------------------
   BACKDROP — one continuous ground for the whole page.
   Its colour is driven by scroll progress, so chapters never show a seam.
   -------------------------------------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  pointer-events: none;
}
.backdrop__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 85% -10%, var(--bd-a, #fdf6ee) 0%, transparent 62%),
    radial-gradient(110% 90% at 8% 108%, var(--bd-b, #e9f3fc) 0%, transparent 60%),
    var(--bd-base, #fcfdff);
  transition: background-color .4s linear;
}
.backdrop__strips {
  position: absolute;
  inset: 0;
  background: var(--strip);
  opacity: var(--bd-strip, .16);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

/* --------------------------------------------------------------------------
   NAV — floating glass pill, detached from the top
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: clamp(.75rem, 1.6vw, 1.35rem);
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.5rem);
  inline-size: 100%;
  max-width: calc(var(--maxw) - 2rem);
  padding: .45rem .45rem .45rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(252, 253, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(6, 18, 31, .07), var(--sh-soft);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  transition: background-color var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft),
              transform var(--d-slow) var(--ease-out);
}
/* Over the dark hero the pill inverts */
.nav.is-dark .nav__pill {
  background: rgba(7, 42, 68, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.nav.is-hidden .nav__pill { transform: translate3d(0, calc(-100% - 2rem), 0); }

.nav__logo { flex: none; display: block; }
.nav__logo img {
  inline-size: clamp(88px, 9vw, 116px);
  height: auto;
  transition: filter var(--d-base) var(--ease-soft);
}
.nav.is-dark .nav__logo img { filter: invert(1) brightness(2); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.35rem, 1.3vw, 1.1rem);
  margin-inline-end: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.nav__links a {
  position: relative;
  padding: .45rem .7rem;
  border-radius: var(--r-pill);
  color: var(--ink-700);
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-soft), background-color var(--d-fast) var(--ease-soft);
}
.nav__links a:hover { color: var(--ink-900); background: rgba(6, 18, 31, .05); }
.nav.is-dark .nav__links a { color: rgba(255, 255, 255, .8); }
.nav.is-dark .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.nav__cta { display: flex; align-items: center; gap: .4rem; flex: none; }
.btn--sm { padding-block: .5rem; padding-inline: 1.05rem .4rem; font-size: var(--fs-xs); }
.btn--sm .btn__ico { inline-size: 1.75rem; block-size: 1.75rem; }
.btn--sm .btn__ico svg { inline-size: .78rem; block-size: .78rem; }
.nav.is-dark .btn--primary { background: #fff; color: var(--ink-900); }
.nav.is-dark .btn--primary .btn__ico { background: rgba(6, 18, 31, .09); }
.nav.is-dark .btn--primary:hover { background: var(--cyan-l); }

/* Burger — morphs to an X */
.nav__burger {
  display: none;
  position: relative;
  inline-size: 2.6rem; block-size: 2.6rem;
  border-radius: 50%;
  background: rgba(6, 18, 31, .05);
  flex: none;
}
.nav__burger span {
  position: absolute;
  inset-inline: .75rem;
  block-size: 1.6px;
  border-radius: 2px;
  background: var(--ink-900);
  transition: transform var(--d-base) var(--ease-spring), opacity var(--d-fast) linear;
}
.nav__burger span:nth-child(1) { inset-block-start: 1.05rem; }
.nav__burger span:nth-child(2) { inset-block-start: 1.45rem; }
.nav.is-dark .nav__burger { background: rgba(255, 255, 255, .12); }
.nav.is-dark .nav__burger span { background: #fff; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.2rem) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-.2rem) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { margin-inline-start: auto; }
}
@media (max-width: 560px) {
  .nav__cta .btn--primary { display: none; }
}

/* --------------------------------------------------------------------------
   FULL-SCREEN MENU
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(252, 253, 255, .86);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-soft);
}
.menu.is-open { opacity: 1; }
.menu__inner {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-8);
  padding: 6rem var(--gutter) var(--s-8);
  max-width: var(--maxw);
  margin-inline: auto;
}
.menu__links { display: grid; gap: clamp(.2rem, 1vw, .55rem); }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-size: clamp(1.6rem, 5.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  color: var(--ink-900);
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out),
              color var(--d-fast) linear;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links a:nth-child(1) { transition-delay: 60ms; }
.menu__links a:nth-child(2) { transition-delay: 105ms; }
.menu__links a:nth-child(3) { transition-delay: 150ms; }
.menu__links a:nth-child(4) { transition-delay: 195ms; }
.menu__links a:nth-child(5) { transition-delay: 240ms; }
.menu__links a:nth-child(6) { transition-delay: 285ms; }
.menu__links a:nth-child(7) { transition-delay: 330ms; }
.menu__links a:nth-child(8) { transition-delay: 375ms; }
.menu__links a:hover { color: var(--azure); }
.menu__links em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-300);
  direction: ltr;
}
.menu__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}
.menu__tag { font-weight: 700; color: var(--ink-900); }
.menu__tel {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 500;
  color: var(--azure);
}
.menu__note { flex: 1 1 18rem; font-size: var(--fs-sm); color: var(--ink-400); }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu__links a { transition: none; }
  .menu__links a { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   SCROLL-SPY RAIL
   -------------------------------------------------------------------------- */
.spy {
  position: fixed;
  inset-inline-end: clamp(.6rem, 1.6vw, 1.5rem);
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: grid;
  gap: .55rem;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-soft);
}
.spy.is-on { opacity: 1; }
.spy a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 7px;              /* the dot column is fixed… */
  block-size: 7px;
  margin-inline-start: auto;
}
.spy i {
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: rgba(6, 18, 31, .2);
  transition: transform var(--d-base) var(--ease-spring),
              background-color var(--d-base) var(--ease-soft);
}
.spy span {
  /* …and the label floats out of flow so it can never push the dot */
  position: absolute;
  inset-inline-end: 1.1rem;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-400);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--d-base) var(--ease-soft), transform var(--d-base) var(--ease-soft);
}
.spy a:hover span { opacity: 1; transform: none; }
.spy { align-items: end; }
.spy a.is-active i { background: var(--azure); transform: scale(1.55); }
.spy a.is-active span { opacity: 1; transform: none; color: var(--ink-700); }
/* over dark chapters */
.spy.on-dark i { background: rgba(255, 255, 255, .3); }
.spy.on-dark span { color: rgba(255, 255, 255, .6); }
.spy.on-dark a.is-active i { background: var(--cyan); }
.spy.on-dark a.is-active span { color: #fff; }

@media (max-width: 1080px) { .spy { display: none; } }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot {
  position: relative;
  z-index: var(--z-content);
  background: var(--ink-900);
  color: rgba(255, 255, 255, .62);
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--s-6);
}
.foot__inner {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.foot__brand img { inline-size: clamp(130px, 14vw, 180px); height: auto; }
.foot__brand p {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .45);
}
.foot__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-6) var(--s-5);
}
.foot__nav h4 {
  margin-block-end: var(--s-3);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-over);
  text-transform: none;
}
.foot__nav a {
  display: block;
  padding-block: .3rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .58);
  transition: color var(--d-fast) linear, transform var(--d-fast) var(--ease-soft);
}
.foot__nav a:hover { color: var(--cyan-l); transform: translateX(-3px); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line-invert);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .38);
}
.foot__by { color: rgba(255, 255, 255, .3); }

@media (max-width: 760px) {
  .foot__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wafab {
  position: fixed;
  inset-block-end: clamp(1rem, 2.5vw, 1.75rem);
  inset-inline-start: clamp(1rem, 2.5vw, 1.75rem);
  z-index: var(--z-nav);
  display: grid;
  place-items: center;
  inline-size: 3.4rem; block-size: 3.4rem;
  border-radius: 50%;
  background: #1faa54;
  color: #fff;
  box-shadow: 0 8px 26px -6px rgba(31, 170, 84, .6), inset 0 1px 1px rgba(255,255,255,.28);
  transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-soft);
}
.wafab svg { inline-size: 1.7rem; block-size: 1.7rem; }
.wafab:hover { transform: scale(1.07); box-shadow: 0 12px 34px -6px rgba(31, 170, 84, .72); }
.wafab:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 18, 31, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-soft);
}
.lb.is-open { opacity: 1; }
.lb img {
  max-inline-size: 100%;
  max-block-size: 86vh;
  width: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-deep);
  transform: scale(.96);
  transition: transform var(--d-slow) var(--ease-out);
}
.lb.is-open img { transform: none; }
.lb__close {
  position: absolute;
  inset-block-start: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  inline-size: 2.9rem; block-size: 2.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background-color var(--d-fast) linear, transform var(--d-base) var(--ease-spring);
}
.lb__close svg { inline-size: 1.15rem; block-size: 1.15rem; }
.lb__close:hover { background: rgba(255, 255, 255, .22); transform: rotate(90deg); }


/* ==== from sections.css ==== */
/* ==========================================================================
   ATOMAX — Chapters
   Each block below is one chapter of the scroll journey. Chapters that carry
   their own ground pull into the previous one and dissolve the seam with a
   gradient, never a rule.
   ========================================================================== */

/* ==========================================================================
   01 · HERO — "המעבר"
   ========================================================================== */
.hero {
  position: relative;
  z-index: var(--z-content);
  block-size: 165vh;                 /* runway for the curtain to part — kept
                                        short so the sticky stage never reads
                                        as a frozen page */
}
.hero__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  overflow: hidden;
  display: grid;
  place-items: end center;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  will-change: transform;
}
.hero__veil {
  position: absolute;
  inset: 0;
  /* The clip runs through bright interiors, so the scrim cannot be tuned to
     one frame: it has to guarantee legibility for the brightest one. Light
     through the upper third where the footage reads, then a firm ramp across
     the lower two thirds, which is exactly where the copy sits. */
  background:
    linear-gradient(180deg,
      rgba(4, 22, 38, .58) 0%,
      rgba(4, 22, 38, .16) 24%,
      rgba(4, 22, 38, .52) 58%,
      rgba(4, 22, 38, .88) 100%),
    linear-gradient(to left, rgba(4, 22, 38, .52), transparent 68%);
}

/* The two PVC leaves that part on scroll */
.hero__curtain { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__leaf {
  position: absolute;
  inset-block: -2%;
  inline-size: 51%;
  /* No backdrop-filter here on purpose: these are viewport-sized and they
     translate on every scroll frame, which made the blur the most expensive
     paint on the page. The layered gradients read as frosted PVC on their own. */
  background:
    var(--strip),
    linear-gradient(180deg, rgba(219, 236, 248, .58), rgba(166, 204, 229, .46));
  will-change: transform;
  transform: translateZ(0);
}
/* Physical left/right: the parting transform is direction-independent. */
.hero__leaf--r { right: 0; box-shadow: -14px 0 40px -12px rgba(4, 22, 38, .35); }
.hero__leaf--l { left: 0;  box-shadow:  14px 0 40px -12px rgba(4, 22, 38, .35); }

/* Contrast scrim for the copy. It sits ABOVE the curtain leaves, so the
   headline stays legible both while the curtain is closed (light frosted PVC)
   and once it has parted onto a bright interior. Measured worst case behind
   the lede is ~5:1. */
.hero__stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 78%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(3, 19, 33, .94) 0%,
    rgba(3, 19, 33, .80) 30%,
    rgba(3, 19, 33, .46) 60%,
    rgba(3, 19, 33, .14) 82%,
    transparent 100%);
}

/* Wash that fades the whole stage to paper over the last phase of the
   hero's runway, so the sticky stage never shows a cut edge when it ends. */
.hero__out {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 3;
  inline-size: 100%;
  padding-block-end: clamp(4.5rem, 11vh, 8rem);
  display: grid;
  justify-items: start;
  gap: var(--s-4);
}
.hero__title {
  font-size: var(--fs-display);
  color: #fff;
  margin-block: var(--s-2) var(--s-1);
}
.hero__title .line { display: block; }
.hero__title .accent--cyan { color: var(--cyan); }
.hero__sub { max-width: 34ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-3); }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid rgba(255, 255, 255, .16);
  inline-size: 100%;
}
.hero__badges li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
.hero__badges svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--cyan); flex: none; }

.hero__scroll {
  position: absolute;
  inset-block-end: var(--s-5);
  inset-inline-end: var(--gutter);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}
.hero__scroll i {
  inline-size: 1px;
  block-size: 2.4rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
  animation: scrollHint 2.1s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .3; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}
@media (max-width: 760px) { .hero__scroll { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero { block-size: auto; }
  .hero__stage { position: static; block-size: 100svh; }
  .hero__leaf { display: none; }
  .hero__scroll i { animation: none; }
}

/* ==========================================================================
   02 · PROBLEM — the "outside" state
   ========================================================================== */
.problem { padding-block-start: clamp(4rem, 9vw, 7rem); }
.problem__head { max-width: var(--maxw-text); display: grid; gap: var(--s-4); margin-block-end: clamp(2.5rem, 6vw, 4.5rem); }
.problem__head .over { justify-self: start; }

.problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 27vw, 340px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.pcard {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-block-end: clamp(4.5rem, 7vw, 6rem);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(245,231,214,.42));
  box-shadow: inset 0 0 0 1px rgba(201, 138, 75, .16), var(--sh-soft);
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px rgba(201, 138, 75, .3), var(--sh-lift);
}
.pcard__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--dust-d);
  opacity: .7;
  margin-block-end: var(--s-4);
}
.pcard h3 { margin-block-end: var(--s-3); color: var(--ink-900); }
.pcard p { font-size: var(--fs-sm); }

/* Ambient visualisations, purely decorative */
.pcard__viz { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 5.5rem; pointer-events: none; }

.pcard__viz--bugs span {
  position: absolute;
  inline-size: 4px; block-size: 4px;
  border-radius: 50%;
  background: var(--dust-d);
  opacity: .5;
  animation: bugDrift 7s linear infinite;
}
.pcard__viz--bugs span:nth-child(1) { inset-block-end: 1.2rem; inset-inline-start: 12%; animation-delay: 0s; }
.pcard__viz--bugs span:nth-child(2) { inset-block-end: 2.6rem; inset-inline-start: 31%; animation-delay: -1.4s; }
.pcard__viz--bugs span:nth-child(3) { inset-block-end: .8rem;  inset-inline-start: 52%; animation-delay: -2.9s; }
.pcard__viz--bugs span:nth-child(4) { inset-block-end: 3.1rem; inset-inline-start: 70%; animation-delay: -4.1s; }
.pcard__viz--bugs span:nth-child(5) { inset-block-end: 1.9rem; inset-inline-start: 88%; animation-delay: -5.6s; }
@keyframes bugDrift {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0; }
  15%  { opacity: .55; }
  50%  { transform: translate3d(-14px,-12px,0) scale(1.25); }
  85%  { opacity: .45; }
  100% { transform: translate3d(-30px,4px,0) scale(1); opacity: 0; }
}

.pcard__viz--heat i {
  position: absolute;
  inset-block-end: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: linear-gradient(to top, transparent, var(--dust));
  opacity: .45;
  animation: heatRise 3.4s var(--ease-in-out) infinite;
}
.pcard__viz--heat i:nth-child(1) { inset-inline-start: 22%; block-size: 3.2rem; animation-delay: 0s; }
.pcard__viz--heat i:nth-child(2) { inset-inline-start: 50%; block-size: 4.4rem; animation-delay: -1.1s; }
.pcard__viz--heat i:nth-child(3) { inset-inline-start: 76%; block-size: 2.6rem; animation-delay: -2.2s; }
@keyframes heatRise {
  0%, 100% { transform: translateY(8px) scaleY(.7); opacity: .18; }
  50%      { transform: translateY(-6px) scaleY(1); opacity: .6; }
}

.pcard__viz--dust span {
  position: absolute;
  inline-size: 3px; block-size: 3px;
  border-radius: 50%;
  background: var(--dust);
  animation: dustFall 6s linear infinite;
}
.pcard__viz--dust span:nth-child(1) { inset-inline-start: 10%; animation-delay: 0s; }
.pcard__viz--dust span:nth-child(2) { inset-inline-start: 26%; animation-delay: -1s; }
.pcard__viz--dust span:nth-child(3) { inset-inline-start: 43%; animation-delay: -2s; }
.pcard__viz--dust span:nth-child(4) { inset-inline-start: 60%; animation-delay: -3s; }
.pcard__viz--dust span:nth-child(5) { inset-inline-start: 77%; animation-delay: -4s; }
.pcard__viz--dust span:nth-child(6) { inset-inline-start: 92%; animation-delay: -5s; }
@keyframes dustFall {
  0%   { transform: translate3d(0, -1rem, 0); opacity: 0; }
  20%  { opacity: .5; }
  100% { transform: translate3d(-10px, 5.5rem, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard__viz * { animation: none !important; opacity: .3; }
}

/* ==========================================================================
   03 · PASSAGE — full-bleed transition
   ========================================================================== */
.passage {
  position: relative;
  z-index: var(--z-content);
  --edge: clamp(10px, 1.1vw, 16px);
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.50)  calc(var(--edge) * .45),
      rgba(0,0,0,.93)  calc(var(--edge) * .78),
      #000             var(--edge),
      #000             calc(100% - var(--edge)),
      rgba(0,0,0,.93)  calc(100% - var(--edge) * .78),
      rgba(0,0,0,.50)  calc(100% - var(--edge) * .45),
      rgba(0,0,0,0)    100%);
  mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.50)  calc(var(--edge) * .45),
      rgba(0,0,0,.93)  calc(var(--edge) * .78),
      #000             var(--edge),
      #000             calc(100% - var(--edge)),
      rgba(0,0,0,.93)  calc(100% - var(--edge) * .78),
      rgba(0,0,0,.50)  calc(100% - var(--edge) * .45),
      rgba(0,0,0,0)    100%);
  block-size: clamp(340px, 62vh, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-block: clamp(1rem, 3vw, 3rem);
}
.passage__media { position: absolute; inset: 0; }
.passage__media video { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The scrim is now flat — its job is only text contrast. Blending the band
   into the page is the mask's job, over the same short distance as every
   other seam. The old version ramped from page-white to dark across 26% of
   the band, which is what made it read as a long grey wash. */
.passage__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 42, 68, .58), rgba(7, 42, 68, .72));
}
.passage__copy { position: relative; z-index: 1; text-align: center; }
.passage__line {
  font-size: clamp(1.5rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--tr-display);
  color: #fff;
  text-wrap: balance;
}
.passage__line em { font-style: normal; color: var(--cyan-l); }

/* ==========================================================================
   04 · SOLUTIONS
   ========================================================================== */
.sol__head { display: grid; gap: var(--s-4); max-width: var(--maxw-text); margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.sol__head .over { justify-self: start; }

.sol__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-block-start: var(--s-3);
}
.sol__filters button {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-500);
  transition: background-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft),
              transform var(--d-base) var(--ease-spring);
}
.sol__filters button:hover { color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(14,124,212,.3); }
.sol__filters button[aria-selected="true"] {
  background: var(--ink-900);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--ink-900), 0 8px 20px -8px rgba(6,18,31,.5);
}
.sol__filters button:active { transform: scale(.96); }

.sol__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 29vw, 380px), 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  align-items: start;
}

.scard {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-soft);
  transition: transform var(--d-slow) var(--ease-out),
              box-shadow var(--d-slow) var(--ease-out),
              opacity var(--d-base) var(--ease-soft);
}
.scard:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(14,124,212,.2), var(--sh-lift); }

/* filtered out */
.scard.is-off { display: none; }

.scard--wide { grid-column: span 2; }
@media (max-width: 980px) { .scard--wide { grid-column: span 1; } }

.scard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--frost);
}
.scard--wide .scard__media { aspect-ratio: 16 / 9; }
.scard__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.scard:hover .scard__media img { transform: scale(1.055); }
/* a ghost of the product's own material, laid over its photo */
.scard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--strip-dense);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-out);
  pointer-events: none;
}
.scard:hover .scard__media::after { opacity: .85; }

.scard__chip {
  position: absolute;
  inset-block-start: .8rem;
  inset-inline-start: .8rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(252, 253, 255, .9);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(8px);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-700);
}
.scard__chip--cold { background: rgba(55, 190, 233, .92); color: #04222f; }
.scard__chip--pro  { background: var(--ink-900); color: #fff; }

.scard__body { padding: clamp(1.25rem, 2.1vw, 1.9rem); display: grid; gap: var(--s-3); }
.scard__body h3 { color: var(--ink-900); }
.scard__spec {
  display: inline-block;
  margin-inline-start: .4rem;
  padding: .12rem .5rem;
  border-radius: var(--r-pill);
  background: var(--mist);
  font-size: .68rem;
  font-weight: 700;
  color: var(--azure-d);
  vertical-align: middle;
}
.scard__need {
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--cyan);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-700);
}
.scard__sol { font-size: var(--fs-sm); }
.scard__pros { display: grid; gap: .4rem; }
.scard__pros li {
  position: relative;
  padding-inline-start: 1.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.scard__pros li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: .5rem; block-size: .5rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(55, 190, 233, .18);
}
.scard__fit {
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
.scard__fit span {
  display: block;
  margin-block-end: .2rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-300);
}
.scard .tlink { justify-self: start; margin-block-start: .2rem; }

.sol__empty { margin-block-start: var(--s-6); color: var(--ink-400); }

/* ==========================================================================
   05 · INDUSTRIES — inverted chapter with a hover viewer
   ========================================================================== */
.ind {
  position: relative;
  z-index: var(--z-content);
  background: var(--deep);
  color: rgba(255, 255, 255, .7);
  /* Full bleed, no radius: the tonal shift is dissolved by the gradients
     below rather than announced by a card edge. */
  overflow: hidden;
}
/* dissolve both seams instead of cutting them */
.ind {
  /* A short, EASED edge instead of a long linear ramp.
     A 115px linear fade turns a dark panel against white into a wide muddy
     band — the giveaway of a 2016 section transition. Keeping the distance
     tiny and easing the alpha reads as a clean edge with a hair of softness:
     the cut disappears without announcing a gradient. */
  --edge: clamp(10px, 1.1vw, 16px);
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.50)  calc(var(--edge) * .45),
      rgba(0,0,0,.93)  calc(var(--edge) * .78),
      #000             var(--edge),
      #000             calc(100% - var(--edge)),
      rgba(0,0,0,.93)  calc(100% - var(--edge) * .78),
      rgba(0,0,0,.50)  calc(100% - var(--edge) * .45),
      rgba(0,0,0,0)    100%);
  mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.50)  calc(var(--edge) * .45),
      rgba(0,0,0,.93)  calc(var(--edge) * .78),
      #000             var(--edge),
      #000             calc(100% - var(--edge)),
      rgba(0,0,0,.93)  calc(100% - var(--edge) * .78),
      rgba(0,0,0,.50)  calc(100% - var(--edge) * .45),
      rgba(0,0,0,0)    100%);
}

.ind > .shell { position: relative; z-index: 3; }
.ind__head { display: grid; gap: var(--s-4); margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.ind__head .over { justify-self: start; }
.ind__head h2 { color: #fff; }

.ind__list { position: relative; z-index: 3; }
.irow {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
  border-block-end: 1px solid var(--line-invert);
  cursor: default;
  transition: padding-inline-start var(--d-slow) var(--ease-out);
}
.irow:first-child { border-block-start: 1px solid var(--line-invert); }
.irow__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .3);
  grid-row: span 2;
}
.irow h3 {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  transition: color var(--d-base) var(--ease-soft);
}
.irow p {
  grid-column: 2;
  margin-block-start: .3rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .5);
  max-width: 54ch;
}
@media (hover: hover) {
  .irow:hover { padding-inline-start: var(--s-5); }
  .irow:hover h3 { color: var(--cyan-l); }
}

/* Floating video that follows the pointer across the list */
.ind__viewer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 4;
  inline-size: clamp(190px, 17vw, 270px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.9);
  transition: opacity var(--d-base) var(--ease-soft), transform var(--d-base) var(--ease-out);
  box-shadow: var(--sh-deep);
  will-change: transform;
}
.ind__viewer.is-on { opacity: 1; transform: translate3d(var(--vx, 0), var(--vy, 0), 0) scale(1); }
.ind__viewer video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--d-base) linear;
}
.ind__viewer video.is-live { opacity: 1; }
@media (max-width: 1080px), (hover: none) { .ind__viewer { display: none; } }

/* ==========================================================================
   06 · WHY ATOMAX
   ========================================================================== */
.why__head { display: grid; gap: var(--s-4); max-width: var(--maxw-text); margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.why__head .over { justify-self: start; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(215px, 21vw, 290px), 1fr));
  gap: clamp(.85rem, 1.5vw, 1.35rem);
}
.wcard { transition: transform var(--d-slow) var(--ease-out); }
.wcard:hover { transform: translateY(-5px); }
.wcard .bezel__core { padding: clamp(1.35rem, 2.2vw, 1.9rem); block-size: 100%; }
.wcard__ico {
  display: grid;
  place-items: center;
  inline-size: 3rem; block-size: 3rem;
  margin-block-end: var(--s-4);
  border-radius: var(--r-md);
  background: var(--mist);
  color: var(--azure);
  box-shadow: inset 0 0 0 1px rgba(14, 124, 212, .12);
  transition: background-color var(--d-base) var(--ease-soft), color var(--d-base) var(--ease-soft);
}
.wcard__ico svg { inline-size: 1.5rem; block-size: 1.5rem; }
.wcard:hover .wcard__ico { background: var(--azure); color: #fff; }
.wcard h3 { margin-block-end: var(--s-2); font-size: var(--fs-h4); }
.wcard p { font-size: var(--fs-sm); }

/* Raw-material strip */
.mats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 17vw, 230px), 1fr));
  gap: 1px;
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mats li {
  display: grid;
  gap: .2rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: linear-gradient(170deg, #fff, var(--mist));
}
.mats strong { color: var(--ink-900); font-size: var(--fs-body); font-weight: 700; }
.mats span { font-size: var(--fs-xs); color: var(--ink-400); }

/* ==========================================================================
   07 · BEFORE / AFTER
   ========================================================================== */
.cmp__head { display: grid; gap: var(--s-4); max-width: var(--maxw-text); margin-block-end: clamp(2rem, 4vw, 3rem); }
.cmp__head .over { justify-self: start; }

.cmp__stage .bezel__core { padding: 0; }
.cmp__wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  background: var(--frost);
}
@media (max-width: 700px) { .cmp__wrap { aspect-ratio: 4 / 5; } }

.cmp__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.cmp__clip {
  position: absolute;
  inset: 0;
  /* RTL: "before" occupies the right-hand side, revealed leftward */
  clip-path: inset(0 0 0 var(--cut, 50%));
  will-change: clip-path;
}
.cmp__handle {
  position: absolute;
  inset-block: 0;
  left: var(--cut, 50%);        /* physical: pairs with clip-path, which is physical */
  inline-size: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 22px rgba(4, 22, 38, .45);
  z-index: 2;
  will-change: left;
}
.cmp__handle i {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 3rem; block-size: 3rem;
  border-radius: 50%;
  background: rgba(252, 253, 255, .95);
  box-shadow: var(--sh-lift), inset 0 0 0 1px var(--line);
  transition: transform var(--d-base) var(--ease-spring);
}
.cmp__handle i::before, .cmp__handle i::after {
  content: "";
  position: absolute;
  top: 50%;
  inline-size: .42rem; block-size: .42rem;
  border-left: 1.8px solid var(--ink-700);
  border-bottom: 1.8px solid var(--ink-700);
}
/* physical left/right — these chevrons point outward, not with the text */
.cmp__handle i::before { left: .78rem;  transform: translateY(-50%) rotate(45deg); }
.cmp__handle i::after  { right: .78rem; transform: translateY(-50%) rotate(-135deg); }
.cmp__wrap:hover .cmp__handle i { transform: translate(-50%, -50%) scale(1.08); }
.cmp__handle:focus-visible { outline: none; }
.cmp__handle:focus-visible i { box-shadow: var(--sh-lift), 0 0 0 3px var(--cyan); }

.cmp__tag {
  position: absolute;
  inset-block-end: 1rem;
  z-index: 1;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(6, 18, 31, .62);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
/* Physical sides: clip-path is physical, so the "before" layer is always
   revealed on the RIGHT of the handle and the "after" stays on the LEFT —
   regardless of document direction. The labels must follow the pixels. */
.cmp__tag--before { right: 1rem; }
.cmp__tag--after  { left: 1rem; }

/* ==========================================================================
   08 · WORKS
   ========================================================================== */
.works__head { display: grid; gap: var(--s-4); max-width: var(--maxw-text); margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.works__head .over { justify-self: start; }

.works__marquee {
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 1.75rem);
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
}
.works__track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  inline-size: max-content;
  will-change: transform;
}
.works__track span {
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  color: var(--ink-300);
  white-space: nowrap;
}
.works__track i { color: var(--cyan); font-style: normal; }

.works__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 19vw, 260px), 1fr));
  gap: clamp(.5rem, 1vw, .9rem);
}
.wtile {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--frost);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.wtile img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--d-slow) var(--ease-out);
}
.wtile span {
  position: absolute;
  inset-block-end: .55rem;
  inset-inline-start: .55rem;
  padding: .28rem .65rem;
  border-radius: var(--r-pill);
  background: rgba(6, 18, 31, .6);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-base) var(--ease-soft), transform var(--d-base) var(--ease-out);
}
.wtile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(14,124,212,.25), var(--sh-lift); }
.wtile:hover img { transform: scale(1.07); }
.wtile:hover span, .wtile:focus-visible span { opacity: 1; transform: none; }

/* ==========================================================================
   09 · PROCESS — inverted
   ========================================================================== */
.proc {
  position: relative;
  z-index: var(--z-content);
  background: linear-gradient(170deg, var(--deep-2), var(--deep));
  color: rgba(255, 255, 255, .68);
  overflow: hidden;
}
/* same dissolve treatment as the industries chapter */
.proc .proc__tex {
  position: absolute;
  inset: 0;
  background: var(--strip);
  opacity: .14;
  pointer-events: none;
}
.proc {
  /* A short, EASED edge instead of a long linear ramp.
     A 115px linear fade turns a dark panel against white into a wide muddy
     band — the giveaway of a 2016 section transition. Keeping the distance
     tiny and easing the alpha reads as a clean edge with a hair of softness:
     the cut disappears without announcing a gradient. */
  --edge: clamp(10px, 1.1vw, 16px);
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.50)  calc(var(--edge) * .45),
      rgba(0,0,0,.93)  calc(var(--edge) * .78),
      #000             var(--edge),
      #000             calc(100% - var(--edge)),
      rgba(0,0,0,.93)  calc(100% - var(--edge) * .78),
      rgba(0,0,0,.50)  calc(100% - var(--edge) * .45),
      rgba(0,0,0,0)    100%);
  mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.50)  calc(var(--edge) * .45),
      rgba(0,0,0,.93)  calc(var(--edge) * .78),
      #000             var(--edge),
      #000             calc(100% - var(--edge)),
      rgba(0,0,0,.93)  calc(100% - var(--edge) * .78),
      rgba(0,0,0,.50)  calc(100% - var(--edge) * .45),
      rgba(0,0,0,0)    100%);
}
.proc > .shell { position: relative; z-index: 3; }
.proc__head { display: grid; gap: var(--s-4); margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.proc__head .over { justify-self: start; }
.proc__head h2 { color: #fff; }

.proc__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 24vw, 320px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.pstep { position: relative; padding-block-start: var(--s-5); border-block-start: 1px solid var(--line-invert); }
.pstep__n {
  display: block;
  margin-block-end: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--cyan);
}
.pstep h3 { color: #fff; margin-block-end: var(--s-2); font-size: var(--fs-h4); }
.pstep p { font-size: var(--fs-sm); color: rgba(255, 255, 255, .58); }

.proc__media { margin-block-start: clamp(2rem, 4vw, 3.5rem); }
.proc__media .bezel__core { aspect-ratio: 21 / 9; }
.proc__media video { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 700px) { .proc__media .bezel__core { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   10 · DIY
   ========================================================================== */
.diy__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .diy__inner { grid-template-columns: 1fr; } }
.diy__copy { display: grid; gap: var(--s-4); justify-items: start; }
.diy__media .bezel__core { aspect-ratio: 4 / 3; }
.diy__media video { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ==========================================================================
   11 · FAQ
   ========================================================================== */
.faq__inner {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .faq__inner { grid-template-columns: 1fr; } }
.faq__head { display: grid; gap: var(--s-4); position: sticky; inset-block-start: 7rem; }
.faq__head .over { justify-self: start; }
@media (max-width: 900px) { .faq__head { position: static; } }

.faq__list { display: grid; }
.fitem { border-block-end: 1px solid var(--line); }
.fitem:first-child { border-block-start: 1px solid var(--line); }
.fitem__q {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  text-align: start;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink-900);
  transition: color var(--d-fast) linear;
}
.fitem__q:hover { color: var(--azure); }
.fitem__q i {
  position: relative;
  flex: none;
  inline-size: 1.6rem; block-size: 1.6rem;
  border-radius: 50%;
  background: var(--mist);
  transition: background-color var(--d-base) var(--ease-soft), transform var(--d-base) var(--ease-spring);
}
.fitem__q i::before, .fitem__q i::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: .65rem; block-size: 1.6px;
  border-radius: 2px;
  background: var(--azure);
  transform: translate(-50%, -50%);
  transition: transform var(--d-base) var(--ease-spring), opacity var(--d-fast) linear;
}
.fitem__q i::after { transform: translate(-50%, -50%) rotate(90deg); }
.fitem__q[aria-expanded="true"] i { background: var(--azure); transform: rotate(180deg); }
.fitem__q[aria-expanded="true"] i::before { background: #fff; }
.fitem__q[aria-expanded="true"] i::after { opacity: 0; }

.fitem__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--ease-out);
}
.fitem__a > p {
  overflow: hidden;
  font-size: var(--fs-sm);
  max-width: 62ch;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-soft), padding var(--d-slow) var(--ease-out);
}
.fitem.is-open .fitem__a { grid-template-rows: 1fr; }
.fitem.is-open .fitem__a > p { opacity: 1; padding-block-end: clamp(1rem, 2vw, 1.5rem); }

/* ==========================================================================
   12 · CTA / CONTACT
   ========================================================================== */
.cta {
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  background: linear-gradient(200deg, var(--deep-3) 0%, var(--deep) 58%, #04202f 100%);
  color: rgba(255, 255, 255, .72);
}
/* Only the top edge dissolves — the bottom runs straight into the footer. */
.cta {
  /* Top edge only — the bottom runs straight into the footer. Same short,
     eased treatment as the other dark panels. */
  --edge: clamp(10px, 1.1vw, 16px);
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)   0,
      rgba(0,0,0,.50) calc(var(--edge) * .45),
      rgba(0,0,0,.93) calc(var(--edge) * .78),
      #000            var(--edge),
      #000            100%);
  mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0)   0,
      rgba(0,0,0,.50) calc(var(--edge) * .45),
      rgba(0,0,0,.93) calc(var(--edge) * .78),
      #000            var(--edge),
      #000            100%);
}
.cta__strips {
  position: absolute;
  inset: 0;
  background: var(--strip);
  opacity: .2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(90% 70% at 70% 0%, #000, transparent 72%);
  mask-image: radial-gradient(90% 70% at 70% 0%, #000, transparent 72%);
}
.cta__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .cta__inner { grid-template-columns: 1fr; } }

.cta__copy { display: grid; gap: var(--s-4); justify-items: start; }
.cta__copy h2 { color: #fff; }

.cta__ways { display: grid; gap: .6rem; inline-size: 100%; margin-block-start: var(--s-3); }
.cta__ways a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: .9rem 1.1rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line-invert);
  transition: background-color var(--d-base) var(--ease-soft), transform var(--d-base) var(--ease-soft);
}
.cta__ways a:hover { background: rgba(255, 255, 255, .12); transform: translateX(-4px); }
.cta__ways-ico {
  display: grid;
  place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: 50%;
  background: rgba(55, 190, 233, .16);
  color: var(--cyan-l);
  flex: none;
}
.cta__ways-ico svg { inline-size: 1.15rem; block-size: 1.15rem; }
.cta__ways em { display: block; font-style: normal; font-size: var(--fs-xs); color: rgba(255,255,255,.5); }
.cta__ways b { display: block; color: #fff; font-size: var(--fs-body); font-weight: 700; }

/* ---- Form ---------------------------------------------------------------- */
.cta__form .bezel__core { padding: clamp(1.35rem, 2.6vw, 2.25rem); }
.form { display: grid; gap: var(--s-4); }
.form__title {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: #fff;
  letter-spacing: var(--tr-tight);
}

.field { position: relative; }
.field input, .field textarea, .field select {
  inline-size: 100%;
  padding: 1.35rem .95rem .6rem;
  border: 0;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--line-invert);
  color: #fff;
  font-size: var(--fs-sm);
  transition: background-color var(--d-base) var(--ease-soft), box-shadow var(--d-base) var(--ease-soft);
}
.field textarea { resize: vertical; min-block-size: 5.5rem; padding-block-start: 1.5rem; }
.field select { appearance: none; padding-block: 1.3rem .65rem; cursor: pointer; }
.field select option { background: var(--deep); color: #fff; }
.field label {
  position: absolute;
  inset-block-start: .95rem;
  inset-inline-start: 1rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .5);
  pointer-events: none;
  transform-origin: right top;   /* RTL */
  transition: transform var(--d-base) var(--ease-out), color var(--d-base) linear;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select + label {
  transform: translateY(-.62rem) scale(.78);
  color: var(--cyan-l);
}
/* the select always shows its label raised (it has no placeholder state) */
.field select + label { transform: translateY(-.62rem) scale(.78); }

.field.is-bad input, .field.is-bad textarea { box-shadow: inset 0 0 0 1px #ff5c5c; }

.form__submit { justify-self: start; margin-block-start: var(--s-2); }
.form__note { font-size: var(--fs-xs); color: rgba(255, 255, 255, .42); }
.form__status { font-size: var(--fs-sm); font-weight: 600; min-block-size: 1.2em; }
.form__status.is-ok  { color: var(--cyan-l); }
.form__status.is-bad { color: #ff7d7d; }

.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* ==========================================================================
   Mobile discipline — a separate layout, not a squeezed desktop
   ========================================================================== */
@media (max-width: 760px) {
  .hero { block-size: 135vh; }
  .hero__copy { padding-block-end: clamp(3rem, 9vh, 5rem); }
  .hero__badges { gap: .4rem 1.1rem; }
  .hero__badges li { font-size: var(--fs-xs); }
  .sol__grid { grid-template-columns: 1fr; }
  .works__grid { grid-template-columns: repeat(2, 1fr); }
  .problem__grid { grid-template-columns: 1fr; }
  .ind, .proc { border-radius: clamp(1rem, 4vw, 1.5rem); }
  .irow { grid-template-columns: 1fr; }
  .irow__idx { grid-row: auto; margin-block-end: .2rem; }
  .irow p { grid-column: 1; }
}


/* ==== from pages.css ==== */
/* ==========================================================================
   ATOMAX — inner pages
   Loaded only by the generated pages. index.html does not need it.
   Everything here reuses the tokens and the component vocabulary already
   established on the homepage; nothing redefines a colour or a curve.
   ========================================================================== */

/* The homepage rhythm is cinematic — each chapter is meant to arrive on its
   own screen. Inner pages carry dense reference content instead, so they run
   on a tighter scale. Set once here rather than per-section. */
.atomax-page { --chapter-y: clamp(3.25rem, 6.5vw, 5.75rem); }

/* A chapter that directly follows the text hero would otherwise stack the
   hero's bottom padding on top of its own. */
.atomax-page .lede-hero + .chapter,
.atomax-page .phero + .chapter { padding-block-start: 0; }

/* Inner pages open on a light ground with no cinematic hero, so the first
   block has to clear the floating nav on its own. */
.atomax-page .lede-hero,
.atomax-page .phero {
  position: relative;
  z-index: var(--z-content);
  padding-block: clamp(6.5rem, 11vw, 9rem) clamp(2rem, 4.5vw, 3.25rem);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.crumb { margin-block-end: var(--s-5); }
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
.crumb li { display: flex; align-items: center; gap: .55rem; }
/* Physical borders: a chevron's direction is geometry, not text flow. In RTL
   the trail reads right-to-left, so the separator points left. */
.crumb li + li::before {
  content: "";
  inline-size: .34rem; block-size: .34rem;
  border-left: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
}
.crumb a { transition: color var(--d-fast) linear; }
.crumb a:hover { color: var(--azure); }
.crumb [aria-current] { color: var(--ink-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   Text-only hero (hubs: solutions, projects, faq, about, contact, diy)
   -------------------------------------------------------------------------- */
.lede-hero .shell { display: grid; justify-items: start; gap: var(--s-4); max-width: var(--maxw); }
.lede-hero .crumb { justify-self: start; }
.lede-hero h1 { font-size: var(--fs-h1); }
.lede-hero .lede { max-width: 58ch; }

/* --------------------------------------------------------------------------
   Product hero — copy beside a framed still
   -------------------------------------------------------------------------- */
.phero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: center;
}
.phero__copy { display: grid; justify-items: start; gap: var(--s-4); }
/* The crumb lives above the two-column block so it stays first in the
   reading order even when the media is promoted on narrow screens. */
.phero > .shell:first-child .crumb { margin-block-end: var(--s-4); }
.phero__copy h1 { font-size: var(--fs-h1); }
.phero__need {
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--cyan);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--ink-700);
  max-width: 48ch;
}
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }
.phero__media .bezel__core { aspect-ratio: 4 / 3; }
.phero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .phero__inner { grid-template-columns: 1fr; }
  .phero__media { order: -1; }
}

/* --------------------------------------------------------------------------
   "What problem it solves"
   -------------------------------------------------------------------------- */
.psolve .over, .pbenefit .over, .pspecs .over, .pgal .over { justify-self: start; }
.psolve h2, .pbenefit h2, .pspecs h2, .pgal h2 { margin-block: var(--s-3) clamp(1.5rem, 3vw, 2.25rem); }

.psolve__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(230px, 26vw, 330px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.pnote {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, #fff, var(--mist));
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-soft);
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.pnote:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(14,124,212,.22), var(--sh-lift); }
.pnote h3 { margin-block-end: var(--s-2); font-size: var(--fs-h4); color: var(--ink-900); }
.pnote p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Benefits — copy beside a still
   -------------------------------------------------------------------------- */
.pbenefit__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .pbenefit__inner { grid-template-columns: 1fr; } }
.pbenefit__copy { display: grid; justify-items: start; }
.pbenefit__list { gap: .6rem; margin-block-end: var(--s-5); }
.pbenefit__list li { font-size: var(--fs-body); }
.pbenefit__media .bezel__core { aspect-ratio: 4 / 3; }
.pbenefit__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.pfit, .pcare {
  inline-size: 100%;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--r-lg);
  background: rgba(14, 124, 212, .05);
  box-shadow: inset 0 0 0 1px rgba(14, 124, 212, .12);
}
.pcare { margin-block-start: var(--s-3); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pfit h3, .pcare h3 {
  margin-block-end: .35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-over);
  color: var(--azure-d);
}
.pcare h3 { color: var(--ink-400); }
.pfit p, .pcare p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Cross-sell
   -------------------------------------------------------------------------- */
.xsell__title { margin-block-end: clamp(1.25rem, 3vw, 2rem); font-size: var(--fs-h3); }
.xsell__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 24vw, 320px), 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.xcard {
  display: grid;
  block-size: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-soft);
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.xcard:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(14,124,212,.25), var(--sh-lift); }
.xcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--frost); }
.xcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.xcard:hover .xcard__media img { transform: scale(1.06); }
.xcard__body { display: grid; gap: .25rem; padding: clamp(.9rem, 1.6vw, 1.25rem); }
.xcard__body strong { color: var(--ink-900); font-size: var(--fs-h4); font-weight: 700; }
.xcard__body em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-400); }

/* --------------------------------------------------------------------------
   Product card title becomes a link on the hub page
   -------------------------------------------------------------------------- */
.scard__link { transition: color var(--d-fast) linear; }
.scard__link:hover { color: var(--azure); }
/* Make the whole card clickable without nesting interactive elements */
.scard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.scard .tlink, .scard .scard__media { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Grouped FAQ
   -------------------------------------------------------------------------- */
.faqpage { display: grid; gap: clamp(2rem, 4vw, 3.5rem); max-width: var(--maxw-text); }
.faqgroup__title {
  margin-block-end: var(--s-4);
  font-size: var(--fs-h3);
  color: var(--ink-900);
}
.faqpage .faq__list { display: grid; }

/* --------------------------------------------------------------------------
   Filterable works grid
   -------------------------------------------------------------------------- */
.works__grid--filterable > li.is-off { display: none; }
.works .sol__filters { margin-block-end: clamp(1.25rem, 3vw, 2rem); }

/* --------------------------------------------------------------------------
   Page backdrop — inner pages are short, so the wash stays in its cool range
   instead of running the whole "outside → inside" arc.
   -------------------------------------------------------------------------- */
.backdrop--page .backdrop__wash {
  background:
    radial-gradient(120% 70% at 88% -8%, #eaf4fd 0%, transparent 60%),
    radial-gradient(100% 80% at 5% 104%, #eef6fd 0%, transparent 58%),
    var(--paper);
}
.backdrop--page .backdrop__strips { opacity: .12; }

/* --------------------------------------------------------------------------
   Current page marker in the nav
   -------------------------------------------------------------------------- */
.nav__links a[aria-current] { color: var(--ink-900); background: rgba(6, 18, 31, .06); }
.nav.is-dark .nav__links a[aria-current] { color: #fff; background: rgba(255, 255, 255, .14); }

@media (max-width: 760px) {
  .psolve__grid { grid-template-columns: 1fr; }
  .xsell__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Solutions hub: seven cards of unequal copy length read as ragged when each
   one sizes to its own content. Stretch them per row and pin the link to the
   bottom so the grid keeps a baseline.
   -------------------------------------------------------------------------- */
.atomax-page .sol__grid { align-items: stretch; }
.atomax-page .scard { grid-template-rows: auto 1fr; }
.atomax-page .scard__body { align-content: start; }
.atomax-page .scard__body .tlink { margin-block-start: auto; padding-block-start: var(--s-2); }


/* ==========================================================================
   WORDPRESS / ELEMENTOR ADAPTATION
   Everything above is the tested static stylesheet. Everything below exists
   only because the markup now sits inside Elementor's own wrappers.
   ========================================================================== */

/* The widget root re-establishes the document basics that used to live on
   <body>, without touching anything else on the site. */
.atomax {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
  text-align: start;
}
.atomax *, .atomax *::before, .atomax *::after { box-sizing: border-box; }
.atomax img { max-width: 100%; }

/* Elementor wraps every widget. Those wrappers must not add width limits,
   padding or overflow clipping, or full-bleed sections and sticky stages
   break. This is the single most common cause of "it looked right in the
   static build and wrong in Elementor". */
.elementor-widget-atomax-header,
.elementor-widget-atomax-footer,
.elementor-widget-atomax-hero,
.elementor-widget-atomax-passage,
.elementor-widget-atomax-industries,
.elementor-widget-atomax-process,
.elementor-widget-atomax-cta-form,
.elementor-widget-atomax-marquee { width: 100%; }

/* Sections that bleed past their column. Elementor columns are padded, so a
   full-bleed band has to break out of the container explicitly.

   NOTE two things that are easy to get wrong here:
   1. Symmetric LOGICAL margins with NO explicit width. `margin-left: 50%` plus
      `width: 100vw` looks equivalent but is not: in RTL the left margin is the
      END margin, so an over-constrained box silently drops it and the band
      lands half a screen off to the side. Equal margins on both sides leave
      the box centred either way, and `width: auto` is never over-constrained.
   2. NO overflow on this element. `position: sticky` stops working inside any
      ancestor with overflow hidden/clip, and the hero stage is sticky. */
.atomax-bleed {
  position: relative;
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* Elementor's own wrappers clip by default in some themes, which breaks the
   sticky hero stage in exactly the same way. Force them open. */
.elementor-widget-atomax-hero,
.elementor-widget-atomax-hero .elementor-widget-container,
.elementor-widget-atomax-header,
.elementor-widget-atomax-header .elementor-widget-container,
.elementor-widget-atomax-passage,
.elementor-widget-atomax-passage .elementor-widget-container { overflow: visible !important; }

/* The hero runway is a control, so it has to come from a custom property. */
.atomax .hero { block-size: var(--ax-hero-runway, 165vh); }
@media (max-width: 760px) {
  .atomax .hero { block-size: var(--ax-hero-runway, 135vh); }
}
@media (prefers-reduced-motion: reduce) {
  .atomax .hero { block-size: auto; }
}

/* Images always cover their frame. Declared once here so that a replacement
   image of any aspect ratio fills the box instead of stretching — and the
   per-widget "fit & position" controls simply override this. */
.atomax .scard__media img,
.atomax .phero__media img,
.atomax .pbenefit__media img,
.atomax .xcard__media img,
.atomax .wtile img,
.atomax .cmp__img,
.atomax .split__media img,
.atomax .bezel__core > img,
.atomax .bezel__core > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Every image frame keeps its own aspect ratio so swapping a picture never
   changes the page layout. */
.atomax .bezel__core { position: relative; overflow: hidden; }

/* Optional CTA row that any section widget can switch on. */
.atomax .ax-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

/* The portal host holds the fixed chrome. It must keep the .atomax scope for
   the resets, but contribute no box of its own. */
.atomax-portal {
  background: none;
  display: contents;
}

/* ==========================================================================
   EDITOR PREVIEW
   Pinned / sticky / 100vh stages are flattened so the client can actually see
   and edit them in the Elementor canvas. Two selectors: Elementor's own body
   class, and the class the PHP stamps on the section.
   ========================================================================== */
body.elementor-editor-preview .hero,
.atomax-editor-preview .hero { block-size: auto !important; }

body.elementor-editor-preview .hero__stage,
.atomax-editor-preview .hero__stage {
  position: static !important;
  block-size: auto !important;
  min-block-size: 70vh;
}
body.elementor-editor-preview .hero__leaf,
.atomax-editor-preview .hero__leaf { display: none !important; }
body.elementor-editor-preview .hero__out,
.atomax-editor-preview .hero__out { display: none !important; }

body.elementor-editor-preview .preloader,
.atomax-editor-preview .preloader { display: none !important; }

body.elementor-editor-preview .nav,
.atomax-editor-preview .nav { position: static !important; }
body.elementor-editor-preview .spy,
.atomax-editor-preview .spy,
body.elementor-editor-preview .backdrop,
.atomax-editor-preview .backdrop,
body.elementor-editor-preview .wafab,
.atomax-editor-preview .wafab { display: none !important; }

body.elementor-editor-preview .faq__head { position: static !important; }

/* Reveal states never apply in the editor — content must be visible to edit. */
body.elementor-editor-preview [data-reveal],
.atomax-editor-preview [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   HOVER COLOURS — locked to the brand blues.
   There is deliberately no pink/magenta anywhere in this file. Themes and
   Elementor globals sometimes inject their own link hover colour, so the
   brand hover is stated explicitly rather than inherited.
   ========================================================================== */
/* A zero-specificity fallback for links that carry no component class, so a
   theme's own `a:hover` cannot bleed through. Every component rule below and
   in the section stylesheet outranks it. */
:where(.atomax) a:hover { color: var(--azure); }

/* Explicit hovers for each interactive component, stated rather than
   inherited. Note the dark-nav case is included — a blanket `.atomax
   .nav__links a:hover` would have beaten `.nav.is-dark …` on specificity and
   turned the hover dark-on-dark over the hero. */
.atomax .btn--primary:hover { background: var(--azure-d); color: #fff; }
.atomax .btn--brand:hover   { background: var(--azure-d); color: #fff; }
.atomax .btn--ghost:hover   { background: #fff; color: var(--ink-900); }
.atomax .btn--invert:hover  { background: rgba(255, 255, 255, .18); color: #fff; }
.atomax .foot__nav a:hover  { color: var(--cyan-l); }
.atomax .nav__links a:hover { color: var(--ink-900); }
.atomax .nav.is-dark .nav__links a:hover { color: #fff; }
.atomax .wafab:hover        { background: #17903f; color: #fff; }
.atomax .tlink:hover        { color: var(--azure); }
.atomax .crumb a:hover      { color: var(--azure); }

/* ==========================================================================
   THEME-PROOFING
   Several controls here are real <button> elements — the gallery tile, the FAQ
   question, the burger, the lightbox close and the form submit. A theme that
   styles `button:hover` sits at (0,1,1) and therefore outranks a component
   class at (0,1,0). That is how a crimson theme hover ended up painting the
   gallery tiles and the FAQ rows on the live site.

   So every one of them states its own appearance for every state. The handful
   of properties a theme typically injects are marked, because the result must
   not depend on which theme happens to be installed — and nothing here is
   driven by an Elementor control, so no client setting is being overridden.
   ========================================================================== */
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .btn),
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .btn):hover,
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .btn):focus,
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .btn):active {
  border: 0 !important;
  outline: 0 !important;
  background-image: none !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   THE BUTTON SYSTEM
   Themes that declare `button { display:block; padding:…; border-radius:… }`
   with !important collapse the pill into a stacked box — measured: 87×85 with
   a 4px radius instead of 118×57 with a pill. So the structural properties are
   forced here.

   Everything a client might want to change is read from a custom property
   instead of being written directly, so an Elementor control can override it
   by setting that one variable — no specificity war with the !important, and
   no control silently doing nothing. The per-variant defaults are wrapped in
   :where() (zero specificity) so a control always outranks them.
   -------------------------------------------------------------------------- */
.atomax .btn {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: auto !important;
  min-inline-size: 0 !important;
  block-size: auto !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  gap: var(--ax-btn-gap, var(--s-3)) !important;
  border-radius: var(--ax-btn-radius, var(--r-pill)) !important;
  padding-block: var(--ax-btn-pad-y, .72rem) !important;
  padding-inline: var(--ax-btn-pad-s, 1.5rem) var(--ax-btn-pad-e, .55rem) !important;
  background-color: var(--ax-btn-bg) !important;
  color: var(--ax-btn-fg) !important;
}
.atomax .btn:hover {
  background-color: var(--ax-btn-bg-h, var(--ax-btn-bg)) !important;
  color: var(--ax-btn-fg-h, var(--ax-btn-fg)) !important;
}
.atomax .btn:active {
  background-color: var(--ax-btn-bg-a, var(--ax-btn-bg-h, var(--ax-btn-bg))) !important;
  color: var(--ax-btn-fg-a, var(--ax-btn-fg-h, var(--ax-btn-fg))) !important;
}
.atomax .btn__ico {
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  inline-size: var(--ax-btn-ico, 2.15rem) !important;
  block-size: var(--ax-btn-ico, 2.15rem) !important;
  border-radius: 50% !important;
  background-color: var(--ax-btn-ico-bg) !important;
  color: var(--ax-btn-ico-fg, currentColor) !important;
}
.atomax .btn:hover .btn__ico {
  background-color: var(--ax-btn-ico-bg-h, var(--ax-btn-ico-bg)) !important;
}
.atomax .btn__ico svg {
  inline-size: var(--ax-btn-ico-svg, .95rem) !important;
  block-size: var(--ax-btn-ico-svg, .95rem) !important;
}
/* the small variant in the nav pill */
.atomax :where(.btn--sm) {
  --ax-btn-pad-y: .5rem;
  --ax-btn-pad-s: 1.05rem;
  --ax-btn-pad-e: .4rem;
  --ax-btn-ico: 1.75rem;
  --ax-btn-ico-svg: .78rem;
}

/* per-variant defaults — :where() keeps them at zero specificity */
.atomax :where(.btn--brand) {
  --ax-btn-bg: var(--azure);   --ax-btn-fg: #fff;
  --ax-btn-bg-h: var(--azure-d);
  --ax-btn-ico-bg: rgba(255, 255, 255, .17);
  --ax-btn-ico-bg-h: rgba(255, 255, 255, .26);
}
.atomax :where(.btn--primary) {
  --ax-btn-bg: var(--ink-900);  --ax-btn-fg: #fff;
  --ax-btn-bg-h: var(--azure-d);
  --ax-btn-ico-bg: rgba(255, 255, 255, .13);
  --ax-btn-ico-bg-h: rgba(255, 255, 255, .22);
}
.atomax :where(.btn--ghost) {
  --ax-btn-bg: rgba(255, 255, 255, .62); --ax-btn-fg: var(--ink-900);
  --ax-btn-bg-h: #fff;
  --ax-btn-ico-bg: rgba(6, 18, 31, .06);
  --ax-btn-ico-bg-h: rgba(6, 18, 31, .10);
}
.atomax :where(.btn--invert) {
  --ax-btn-bg: rgba(255, 255, 255, .1);  --ax-btn-fg: #fff;
  --ax-btn-bg-h: rgba(255, 255, 255, .18);
  --ax-btn-ico-bg: rgba(255, 255, 255, .16);
  --ax-btn-ico-bg-h: rgba(255, 255, 255, .24);
}
.atomax :where(.btn--wa) {
  --ax-btn-bg: #1faa54; --ax-btn-fg: #fff;
  --ax-btn-bg-h: #17903f;
  --ax-btn-ico-bg: rgba(255, 255, 255, .2);
}
.atomax :where(.nav.is-dark .btn--primary) {
  --ax-btn-bg: #fff; --ax-btn-fg: var(--ink-900);
  --ax-btn-bg-h: var(--cyan-l); --ax-btn-fg-h: var(--ink-900);
  --ax-btn-ico-bg: rgba(6, 18, 31, .09);
}

/* gallery tile — the tint behind an image while it loads */
.atomax .wtile,
.atomax .wtile:hover,
.atomax .wtile:focus,
.atomax .wtile:active { background-color: var(--frost) !important; }

/* FAQ question — never carries a background of its own */
.atomax .fitem__q,
.atomax .fitem__q:hover,
.atomax .fitem__q:focus,
.atomax .fitem__q:active { background-color: transparent !important; }
.atomax .fitem__q { color: var(--ink-900); }
.atomax .fitem__q:hover { color: var(--azure); }

/* burger */
.atomax .nav__burger,
.atomax .nav__burger:hover,
.atomax .nav__burger:focus { background-color: rgba(6, 18, 31, .05) !important; }
.atomax .nav.is-dark .nav__burger,
.atomax .nav.is-dark .nav__burger:hover { background-color: rgba(255, 255, 255, .12) !important; }

/* lightbox close */
.atomax .lb__close,
.atomax .lb__close:focus,
.atomax .lb__close:active { background-color: rgba(255, 255, 255, .12) !important; }
.atomax .lb__close:hover  { background-color: rgba(255, 255, 255, .22) !important; }

/* filter pills */
.atomax .sol__filters button,
.atomax .sol__filters button:hover,
.atomax .sol__filters button:focus,
.atomax .sol__filters button:active { background-color: rgba(255, 255, 255, .7) !important; }
.atomax .sol__filters button:hover { color: var(--ink-900); }
.atomax .sol__filters button[aria-selected="true"],
.atomax .sol__filters button[aria-selected="true"]:hover,
.atomax .sol__filters button[aria-selected="true"]:focus { background-color: var(--ink-900) !important; color: #fff; }

/* link components a theme's own `a:hover` would otherwise recolour */
.atomax .scard__link:hover,
.atomax .irow h3 a:hover     { color: var(--azure); }
.atomax .menu__links a:hover { color: var(--azure); }
.atomax .cta__ways a:hover   { color: inherit; }
.atomax .xcard:hover         { color: inherit; }

/* ==========================================================================
   MOBILE — no clipped text, no clipped images, nothing unreachable.
   ========================================================================== */
@media (max-width: 767px) {
  .atomax .shell { padding-inline: max(16px, var(--gutter)); }

  /* Long Hebrew headlines must wrap, never overflow their box. */
  .atomax h1, .atomax h2, .atomax h3, .atomax h4,
  .atomax .hero__title, .atomax .passage__line {
    overflow-wrap: anywhere;
    hyphens: none;
  }

  /* Anything that was two columns collapses to one. */
  .atomax .phero__inner,
  .atomax .pbenefit__inner,
  .atomax .diy__inner,
  .atomax .faq__inner,
  .atomax .cta__inner,
  .atomax .split__inner { grid-template-columns: 1fr !important; }

  /* The floating WhatsApp button must never sit on top of a CTA. */
  .atomax .cta__inner { padding-block-end: 4.5rem; }

  /* Tap targets stay at least 44px. */
  .atomax .btn { min-block-size: 44px; }
  .atomax .sol__filters button { min-block-size: 40px; }

  /* Horizontal scrollers are the only things allowed to exceed the viewport. */
  .atomax .works__marquee { max-inline-size: 100vw; }
}

/* Safety net: no widget may ever push the page sideways. */
.atomax { max-inline-size: 100%; overflow-wrap: break-word; }