/* ==== 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; }

/* `.ltr` belongs on an INLINE element only. Put it on a block and its
   `direction: ltr` also flips that block's `text-align: start` from right to
   left, so the content stops lining up with the column it sits in — which is
   why the footer phone number and the process step numbers drifted away from
   their neighbours. The markup now wraps the number in an inline span instead,
   leaving the block itself in the page's own direction.

   Making the block `inline-block` was the first attempt and is worse: it fixes
   the horizontal drift but puts the element on a line box, which adds leading
   and opens a visible vertical gap against its block siblings.

   These two rules are a safety net in case a `.ltr` class ends up on a block
   again. `right` is physical on purpose: this document is RTL by definition
   (`.atomax { direction: rtl }`), so right IS the column's start edge, and a
   logical `start` would follow the element's own flipped direction. */
.foot__nav a,
.pstep__n { text-align: right !important; }

/* --------------------------------------------------------------------------
   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: 130vh;               /* was 165vh: the client read the long
                                        pinned runway as empty space after
                                        the hero */                 /* runway for the curtain to part — kept
                                        short so the sticky stage never reads
                                        as a frozen page */
  /* The sticky stage is a full viewport tall, so it needs a full viewport of
     scrolling to leave — and for all of that time the screen shows nothing but
     the stage. Pulling the next chapter up into the stage's exit overlaps the
     two, so the page never holds on an empty frame. `.chapter` carries the
     same z-index and comes later in the document, so it paints on top.
     The pull is bounded: the next chapter's own top padding is what overlaps
     first, and its content does not reach the viewport until the threshold
     below has already faded in. */
  margin-block-end: -18vh;
}
.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. */
/* The threshold — the moment you actually pass through the curtain.
   This layer used to be a flat sheet of --paper faded in over the last quarter
   of the runway. It did stop the sticky panel showing a cut edge, but it also
   wiped the screen to blank white and held it there for a full viewport of
   scrolling, which read as the page having ended.

   It is now an image of the passage itself: transparent at the top so the
   footage still reads through the doorway, the PVC strips dissolving as you
   clear them, interior light rising from the floor, and clean paper at the
   foot so it meets the page with no seam. Only `opacity` animates, so this
   stays a compositor-only fade however heavy the surface looks. */
.hero__out {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  /* Paper is listed FIRST, which paints it on TOP of the light. That order
     matters: with the light on top it tinted the stage's very last pixels and
     cut off hard against the page below — the exact seam this layer exists to
     prevent. Under an opaque foot of paper the light can only show through the
     middle, where the paper is still partial, and the bottom lands on the page
     background exactly. */
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--bd-base, #fcfdff) 55%, transparent) 30%,
      color-mix(in srgb, var(--bd-base, #fcfdff) 96%, #fff) 62%,
      var(--bd-base, #fcfdff) 76%),
    radial-gradient(135% 74% at 50% 104%,
      rgba(196, 234, 250, .82) 0%,
      rgba(230, 243, 253, .44) 44%,
      transparent 72%);
}
/* the strips themselves, thinning out as you clear the doorway */
.hero__out::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--strip);
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 80%);
}

.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) {
  /* No sticky exit here, so there is no empty frame to cover — and the pull
     would land the next chapter on the hero's own buttons. */
  .hero { block-size: auto; margin-block-end: 0; }
  .hero__stage { position: static; block-size: 100svh; }
  .hero__leaf { display: none; }
  .hero__scroll i { animation: none; }
}

/* ==========================================================================
   02 · PROBLEM — the "outside" state
   ========================================================================== */
/* Reduced: this chapter is now handed the page by the hero's threshold rather
   than starting cold after a gap, so it does not need a full lid of space. */
.problem { padding-block-start: clamp(1.25rem, 3vw, 2.5rem); }

/* The hero's threshold ends on the ground colour, but the ground is a wash of
   two radial gradients over that colour, so the two never match to the pixel
   and the stage's bottom edge stayed faintly legible as a line. This chapter
   overlaps the hero, so it can carry a band that runs at the ground colour
   across that edge and only then dissolves — the seam is crossed, not aligned.
   Behind the chapter's own content, and inert. */
.problem::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: -1;
  block-size: 46vh;
  background: linear-gradient(180deg,
    var(--bd-base, #fcfdff) 0%,
    var(--bd-base, #fcfdff) 40%,
    transparent 100%);
  pointer-events: none;
}
.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 — product catalogue
   Rebuilt from a text-stacked article card into a catalogue tile. The old
   card stacked six text blocks under the photo (title, pull-quote, paragraph,
   bullet list, rule, fine print, link), which is the anatomy of a blog post,
   not of a product. Here the photo carries the tile, the body is a name and
   one line, and everything else moves into a quick-view panel.

   The panel OVERLAYS the photo rather than expanding in flow: an in-flow
   expansion would re-flow the whole grid row and shove every sibling tile
   down, which reads as a bug. Overlaying keeps the grid perfectly still and
   animates on transform/opacity only. It sits over the photo and not over the
   whole tile so the body stays visible and its own toggle also closes it.
   ========================================================================== */
.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); }

/* Uniform tiles, deliberately. The grid is filterable, and mixed tile sizes
   tear open holes the moment a filter leaves three items on a six-slot row. */
.sol__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(15rem, 21vw, 18.5rem), 1fr));
  gap: clamp(.85rem, 1.4vw, 1.5rem);
  align-items: stretch;
}

.scard {
  --bezel: 8px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--bezel);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-soft);
  transition: transform var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft),
              opacity var(--d-base) var(--ease-soft);
}
.scard:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(14,124,212,.22), var(--sh-lift); }

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

/* The photo and its quick-view share one positioned frame. The panel cannot
   live inside .scard__media because that is an anchor, and interactive
   content inside an anchor is invalid. */
.scard__frame {
  position: relative;
  border-radius: calc(var(--r-lg) - var(--bezel));
  overflow: hidden;
  background: var(--frost);
}
.scard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.scard__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.05s 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: .5; }
/* a short scrim so the chip stays legible over any photo */
.scard__media::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 38%;
  background: linear-gradient(to top, rgba(6,18,31,.34), rgba(6,18,31,0));
  opacity: .9;
  pointer-events: none;
  z-index: 1;
}

.scard__chip {
  position: absolute;
  z-index: 2;
  inset-block-end: .62rem;
  inset-inline-start: .62rem;
  padding: .28rem .66rem;
  border-radius: var(--r-pill);
  background: rgba(252, 253, 255, .93);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 8px -3px rgba(6, 18, 31, .4);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-700);
}
.scard__chip--cold { background: rgba(55, 190, 233, .95); color: #04222f; }
.scard__chip--pro  { background: var(--ink-900); color: #fff; }

/* Flex, not grid: the action row is pinned to the tile floor with
   margin-block-start:auto, which an align-content grid would ignore. */
.scard__body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: clamp(.85rem, 1.3vw, 1.1rem) clamp(.5rem, .7vw, .7rem) clamp(.45rem, .7vw, .6rem);
}
.scard__body h3 {
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  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;
}
/* Clamped to two lines so every tile in a row ends at the same height —
   the discipline that makes a grid read as a catalogue. */
.scard__sol {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-500);
}

.scard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-block-start: auto;
  padding-block-start: .55rem;
  border-block-start: 1px solid var(--line-soft);
}
.scard__more {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .3rem 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-400);
  transition: color var(--d-fast) var(--ease-soft);
}
.scard__more:hover { color: var(--ink-900); }
.scard__more svg {
  inline-size: .8rem;
  block-size: .8rem;
  transition: transform var(--d-base) var(--ease-spring);
}
.scard.is-open .scard__more svg { transform: rotate(180deg); }
.scard .tlink { font-size: var(--fs-xs); }

/* ---- quick-view ---------------------------------------------------------
   visibility (not display) so it animates, and so it leaves the a11y tree
   and stops catching clicks while closed. */
/* Desktop: the panel is pinned over the photo. It matches the photo box by
   carrying the same aspect-ratio rather than by being inside it — it has to
   be a direct child of the tile so it can drop into normal flow on a phone. */
.scard__detail {
  position: absolute;
  z-index: 3;
  inset-inline: var(--bezel);
  inset-block-start: var(--bezel);
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--r-lg) - var(--bezel));
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(.95rem, 1.5vw, 1.25rem);
  background: #fcfdff;
  box-shadow: inset 0 0 0 1px rgba(14, 124, 212, .16);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-slow) var(--ease-spring),
              visibility 0s linear var(--d-base);
}
.scard.is-open .scard__detail {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 260ms var(--ease-out),
              transform 520ms var(--ease-spring),
              visibility 0s;
}
/* The customer's own words. Was an italic rule-on-the-side pull-quote, which
   is the single most blog-like element on the old card; now a quiet tinted
   block that reads as a spec, not as an article aside. */
.scard__need {
  padding: .6rem .72rem;
  border-radius: var(--r-sm);
  background: var(--mist);
  font-size: var(--fs-xs);
  line-height: 1.55;
  font-style: normal;
  color: var(--ink-700);
}
.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__detail .scard__pros li { font-size: var(--fs-xs); }
.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);
}
/* Deliberately NOT pushed to the panel floor with an auto margin: the
   content is shorter than the photo it covers, so an auto margin opened a
   void in the middle of the panel. Stacked from the top, the leftover space
   reads as breathing room instead. */
.scard__detail .scard__fit { padding-block-start: .65rem; }
.scard__detail .tlink { margin-block-start: .1rem; font-size: var(--fs-xs); }
.scard__fit span {
  display: block;
  margin-block-end: .2rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-300);
}

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

/* On a finger, both tile controls sat at ~26px tall. Coarse pointers get a
   44px target; a mouse keeps the tighter, quieter row. */
@media (pointer: coarse) {
  .scard__more,
  .scard__actions .tlink { min-block-size: 44px; }
}

/* One column on a phone, where a 4:5 photo is already most of the screen.
   Overlaying the panel there left a tall void under three short lines, so the
   panel drops into normal flow and opens like an accordion instead. Nothing
   sits beside the tile to be shoved sideways, and pushing the tiles below is
   exactly what an accordion is expected to do.
   `display` rather than `visibility`, because a statically-positioned panel
   with `visibility:hidden` would still reserve its full height. */
@media (max-width: 599px) {
  .scard__detail {
    position: static;
    aspect-ratio: auto;
    display: none;
    margin-block-start: .55rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .scard.is-open .scard__detail {
    display: flex;
    animation: scard-open 420ms var(--ease-out) both;
  }
}
@keyframes scard-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scard, .scard__media img, .scard__detail, .scard__more svg { transition-duration: .01ms !important; }
  .scard:hover { transform: none; }
  .scard:hover .scard__media img { transform: none; }
}

/* ==========================================================================
   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;
}
/* The handle spans the whole stage and is moved with a transform, so the
   percentage translates against the stage's own width. It used to be a 2px
   element positioned with `left: var(--cut)`, and `left` is a layout property:
   every pointer move reflowed the stage, which is what made the drag feel like
   it was catching. `transform` is compositor-only and never touches layout.
   The element itself is inert; only the knob takes the pointer. */
.cmp__handle {
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: 100%;
  transform: translate3d(var(--cut, 50%), 0, 0);
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}
/* the visible seam */
.cmp__handle::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -1px;
  inline-size: 2px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 22px rgba(4, 22, 38, .45);
}
.cmp__handle i {
  position: absolute;
  inset-block-start: 50%;
  left: 0;
  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);
  /* Grabbing the knob means dragging it — the browser must not decide
     part-way through that this was a vertical page pan and cancel it. */
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}
.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__wrap.is-dragging .cmp__handle i { transform: translate(-50%, -50%) scale(1.14); }
/* No easing on the knob while it is being dragged: a transition here makes the
   knob trail the finger, which reads as lag. */
.cmp__wrap.is-dragging .cmp__handle i { transition: none; }
.cmp__handle:focus-visible { outline: none; }
.cmp__handle:focus-visible i { box-shadow: var(--sh-lift), 0 0 0 3px var(--cyan); }

/* Several comparisons in one section. */
.cmp__stack { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 901px) {
  .cmp__stack--2 { grid-template-columns: 1fr 1fr; }
}
.cmp__item { display: grid; gap: var(--s-3); }
.cmp__caption {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
  max-width: 54ch;
  justify-self: center;
}

.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);
}
/* `> *`, not `> p`: a closed row measures zero only while the grid holds a
   single child, and the editor's rich-text field emits its own paragraphs.
   The widget therefore hands this one wrapper element and puts the answer
   inside it, so any number of paragraphs collapse together. */
.fitem__a > * {
  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 > * { opacity: 1; padding-block-end: clamp(1rem, 2vw, 1.5rem); }
/* Paragraphs written inside that wrapper still need air between them. */
.fitem__a-in > p + p { margin-block-start: .8em; }

/* ==========================================================================
   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) {
  /* Shorter runway here, so the sticky exit is shorter and the overlap has to
     come down with it — otherwise the next chapter's heading reaches the
     screen while the footage is still playing. */
  .hero { block-size: 135vh; margin-block-end: -9vh; }
  .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; }
}

/* Reduced motion, narrow screen. The width breakpoint above sets the hero's
   runway and comes later in the file than the reduced-motion block, so it was
   winning and leaving a static stage inside a 135vh box — a quarter-screen of
   nothing, with no threshold running to cover it. Stated last, both together. */
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .hero { block-size: auto; margin-block-end: 0; }
}

/* ==== 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); }
/* The card used to carry a whole-card click target on this pseudo-element.
   It cannot any more: the catalogue tile has its own controls (the photo
   link, the quick-view toggle, the product link), and a transparent sheet
   over the tile swallowed every one of them. The photo is the large click
   target now, so nothing is lost. */

/* --------------------------------------------------------------------------
   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 — nothing to override any more. The catalogue tile stretches
   per row and pins its own action bar by default, so the four rules that used
   to live here are redundant. One of them had also turned harmful: the tile's
   link is now a flex item in the action row, where `margin-block-start: auto`
   drops it to the bottom of the row and breaks it away from the toggle.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   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, .scard__more, .btn),
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .scard__more, .btn):hover,
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .scard__more, .btn):focus,
.atomax :is(.wtile, .fitem__q, .nav__burger, .lb__close, .sol__filters button, .scard__more, .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 */
/* --------------------------------------------------------------------------
   PARAGRAPH BOXES
   The site's reset is `:where(.atomax) p { margin: 0 }` — zero specificity, so
   a theme's own `p { margin: 0 0 1.5em }`, which nearly every theme and every
   Elementor kit ships, beats it and quietly adds space under every paragraph
   on the page.

   In most sections that only loosens the rhythm. In the FAQ it breaks the
   accordion outright: a closed answer collapses with `grid-template-rows: 0fr`,
   which measures zero only if the row's single child contributes no box of its
   own. A margin, a padding, or a min-height on that <p> all survive the
   collapse, so every closed question carried a band of empty space under it.
   Measured: `p{margin}` +23px, `li{padding}` +32px, `p{min-height}` +16px —
   and a real theme sets several at once.

   Nothing in the site relies on a margin on a <p>, and no Elementor control
   sets one (the FAQ's answer controls are typography and colour only), so
   these can be stated outright.
   -------------------------------------------------------------------------- */
.atomax p { margin: 0 !important; }

/* The closed answer, pinned to exactly zero. */
.atomax .fitem { padding: 0 !important; margin: 0 !important; }
.atomax .fitem__a > * {
  margin: 0 !important;
  padding: 0 !important;
  min-block-size: 0 !important;
  overflow: hidden !important;
}
/* …and the open one gets its breathing room back. */
.atomax .fitem.is-open .fitem__a > * {
  padding-block-end: clamp(1rem, 2vw, 1.5rem) !important;
}
/* Paragraphs the editor wrote inside the answer keep their spacing; only the
   wrapper itself is pinned flat. */
.atomax .fitem__a-in > p + p { margin-block-start: .8em !important; }

/* The catalogue tile's quick-view toggle. It is a <button>, which is exactly
   where theme colour has leaked in before: a bare `button:hover { color: … }`
   sits at (0,1,1) and outranks `.scard__more:hover` at (0,1,0). No Elementor
   control drives this control's colour, so !important costs nothing here. */
.atomax .scard__more,
.atomax .scard__more:focus,
.atomax .scard__more:active { color: var(--ink-400) !important; background-color: transparent !important; }
.atomax .scard__more:hover { color: var(--ink-900) !important; background-color: transparent !important; }

.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; }

/* Column alignment, at a weight a theme cannot reach.
   `.foot__nav a` on its own ties with a theme rule of the same shape, and a
   tie is decided by source order — which the theme wins, because it is
   enqueued after this file. The `.atomax` prefix settles it.
   `right` is physical on purpose: this document is RTL by definition, so
   right IS the column's start edge, while a logical `start` would follow the
   element's own (possibly flipped) direction. */
.atomax .foot__nav a,
.atomax .pstep__n { text-align: right !important; }

/* RESTING link colour.
   The base reset is `:where(.atomax) a { color: inherit }` — zero specificity,
   so component classes can win. That also means ANY theme rule that paints
   links beats it and repaints every link that carries no colour of its own.
   That is how crimson landed on the product-card titles.

   Simply restating each link at `.atomax .x` does not hold: a theme's
   `.elementor-widget-container a` or `.elementor-kit-7 a` is the same weight,
   and a tie goes to whoever is enqueued last — the theme. So the links are
   split by who owns their colour:

   (a) colour belongs to the CONTAINER  ->  `inherit !important`.
       `!important` is safe here precisely because the value is `inherit`: it
       pins the link to its parent and nothing else, and the parent is what
       the Elementor typography controls target. The control keeps working,
       the theme cannot get in.
   (b) link carries its OWN colour and has NO Elementor colour control
       ->  the real value, `!important`.
   (c) link carries its own colour and DOES have a colour control
       (`.nav__links a`, `.foot__nav a`)  ->  no `!important`, or the control
       would be locked out. An ancestor class lifts these to (0,3,0), above
       any plausible theme rule but below Elementor's own (0,4,0) output. */

/* (a) container-owned. Kept to two classes on purpose: a third would
   outrank the `:hover` rules below, which sit at (0,2,1). */
.atomax .scard__link,
.atomax .scard__media,
.atomax .nav__logo,
.atomax .spy a,
.atomax .cta__ways a,
.atomax .irow h3 a,
.atomax .xcard,
.atomax .crumb a          { color: inherit !important; }

/* (b) self-coloured, no control */
.atomax .menu__links a    { color: var(--ink-900) !important; }
.atomax .tlink            { color: var(--azure-d) !important; }
.atomax .menu__tel        { color: var(--azure) !important; }
.atomax .skip,
.atomax .wafab            { color: #fff !important; }

/* (c) self-coloured, control-backed — specificity only, never !important */
.atomax .nav .nav__links a            { color: var(--ink-700); }
.atomax .nav.is-dark .nav__links a    { color: rgba(255, 255, 255, .8); }
.atomax .foot .foot__nav a            { color: rgba(255, 255, 255, .58); }
/* Lifting the resting colour to (0,3,0) also lifted it above these plain
   `:hover` rules at (0,1,1), which silently killed the hover. They are
   restated at (0,3,1) — still under Elementor's own (0,4,1) hover control. */
.atomax .nav .nav__links a:hover         { color: var(--ink-900); }
.atomax .nav.is-dark .nav__links a:hover { color: #fff; }
.atomax .foot .foot__nav a:hover         { color: var(--cyan-l); }

/* HOVER, same split.
   The resting rules above are `!important`, so a plain hover rule can no
   longer outrank them — these have to be `!important` too or the link would
   simply not change colour. That is safe for exactly these components: none
   of them carries an Elementor hover-colour control (only the header and
   footer nav links do, and those are protected by specificity instead, not
   by `!important`). Azure matches the static site. */
.atomax .scard__link:hover,
.atomax .irow h3 a:hover,
.atomax .crumb a:hover,
.atomax .menu__links a:hover { color: var(--azure) !important; }
.atomax .cta__ways a:hover   { color: inherit !important; }
.atomax .xcard:hover         { color: inherit !important; }

/* ==========================================================================
   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; }