/* =========================================================
   JOIN — product site
   ========================================================= */

:root {
  --gray:   #2a2a2a;
  --gray-2: #3a3a3a;
  --gray-3: #6a6a6a;
  --gray-4: #b4b4b0;
  --gray-5: #e5e5e0;
  --off:    #f4f3ee;       /* warm off-white */
  --paper:  #fafaf7;
  --white:  #ffffff;
  --yellow: #f6f367;
  --yellow-soft: #fbf9c4;
  --black:  #0c0c0c;

  --font-display: "Rubik", "Heebo", system-ui, sans-serif;
  --font-body:    "Heebo", "Rubik", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --w-max: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);

  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--gray);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
p   { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--yellow); color: var(--gray); }


/* ============== reusable bits ============== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary { background: var(--gray); color: var(--white); }
.btn--primary:hover { background: var(--yellow); color: var(--gray); }
.btn--ghost   { background: transparent; color: var(--gray); border-color: rgba(42,42,42,.18); }
.btn--ghost:hover { border-color: var(--gray); }
.btn--block   { width: 100%; justify-content: center; padding: 18px; font-size: 16px; }
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(-3px); }   /* RTL flip */


/* Section heads ---------------------------------------- */

.section-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 0 36px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-3);
}
.section-head__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--gray);
  letter-spacing: 0;
}
.section-head__label {
  color: var(--gray);
  font-weight: 500;
  letter-spacing: .18em;
}
.section-head__rule {
  height: 1px;
  background: linear-gradient(to left, var(--gray-5), transparent);
}
.section-head__tag {
  color: var(--gray-3);
  font-size: 11px;
}
.section-head--inverse { color: rgba(255,255,255,.55); }
.section-head--inverse .section-head__num { color: var(--white); }
.section-head--inverse .section-head__label { color: var(--white); }
.section-head--inverse .section-head__rule { background: linear-gradient(to left, rgba(255,255,255,.18), transparent); }
.section-head--inverse .section-head__tag { color: rgba(255,255,255,.55); }


/* ============== top bar ============== */

/* The header lives directly on top of the yellow hero — no background,
   no border, no blur. It scrolls with the page (not sticky). */
.topbar {
  position: relative;
  z-index: 5;
  background: var(--yellow);
  border: none;
}
.topbar__inner {
  /* Force LTR flex flow so the logo sits on the LEFT and the nav
     continues to its right — independent of the page-level RTL.
     Baseline alignment locks the nav to the bottom of the logo SVG,
     i.e. the "By Nahal Oz" baseline. */
  direction: ltr;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) var(--pad-x) 0;
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
}
.topbar__logo {
  display: inline-block;
  flex: 0 0 auto;
}
.topbar__logo img {
  display: block;
  height: clamp(46px, 4.6vw, 64px);
  width: auto;
}

.topbar__nav {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.8vw, 26px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--gray);
  /* Lift the nav so its text baseline lands on the "z" of "Oz" rather
     than the SVG's image-bottom (which sits at the 'y' descender). */
  transform: translateY(-0.45em);
}
.topbar__nav a {
  position: relative;
  color: var(--gray);
  transition: opacity .2s ease;
}
.topbar__nav a:hover { opacity: .6; }

/* Small round separator between consecutive nav links */
.topbar__nav a + a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
  margin-inline-end: clamp(14px, 1.8vw, 26px);
  vertical-align: 0.28em;        /* lift to sit on letter midline */
}

/* Leading dots — same size and vertical placement as the inter-link dots */
.topbar__leaders {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  transform: translateY(-0.28em);  /* mirror the inter-link vertical-align */
}
.topbar__leaders span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
  display: inline-block;
}


/* ============== HERO ============== */

.hero {
  position: relative;
  background: var(--yellow);
  overflow: hidden;
  padding: clamp(40px, 5vw, 80px) var(--pad-x) clamp(40px, 5vw, 80px);
}

.hero__inner {
  position: relative;
  max-width: var(--w-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  min-height: clamp(520px, 76vh, 820px);
}

/* Text side (visually LEFT in RTL) */
.hero__text {
  align-self: center;
  display: flex;
  justify-content: center;
}
.hero__copy {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.7;
  color: var(--gray);
  letter-spacing: -0.005em;
  max-width: 26ch;
  text-align: right;
}
.hero__inline-mark {
  display: inline-block;
  height: 0.95em;
  width: auto;
  vertical-align: -0.08em;
  margin-inline-end: 0.22em;
}

/* Brand side (visually RIGHT in RTL): big curl SVG with embedded photo */
.hero__brand {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: clamp(420px, 46vw, 720px);
  aspect-ratio: 1 / 1;
  margin-inline-start: auto;
}
.hero__brand-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.hero__brand-photo {
  /* Large circular photo sitting behind the curl — the SVG renders on
     top (later in source order) and wraps over the photo's edges.
     Sized to roughly match the red guide circle in the reference. */
  position: absolute;
  top: 13%;
  left: 12%;
  width: 75%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.hero__brand-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.44);
  transform-origin: 50% 52%;
}


/* ============== GALLERY ============== */

.gallery {
  position: relative;
  background-color: #2a2a2a;                              /* matches SVG fill — extends dark below the curve */
  background-image:
    url("assets/gallery-background.svg"),                 /* topmost: the curved shape, natural aspect */
    linear-gradient(var(--yellow), var(--yellow));        /* yellow shows only through the SVG's top dip */
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 100% auto, 100% 28%;
  overflow: hidden;
  padding: clamp(110px, 13vw, 200px) clamp(20px, 2.4vw, 40px) clamp(72px, 9vw, 130px);
}
.gallery__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(40px, 5vw, 72px);
}

/* Hero composition — single image of both modes, natural curved edges
   from the photo are preserved (no extra frame). */
.gallery__figure {
  margin: 0;
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
}
.gallery__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* Editorial block sits below the photo as one cohesive composition:
   eyebrow + heading at top, then a single thin rule, then the two
   modes laid out in a tight 2-column grid. Centered, narrower than the
   photo, so the text reads as an editorial caption to the image. */
.gallery__editorial {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.gallery__heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  padding-bottom: clamp(30px, 3.4vw, 52px);
}
.gallery__heading-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.gallery__heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,.94);
  max-width: 28ch;
}

/* Two modes, side by side. LTR container so emergency lands on the
   visual left (dark photo half), routine on the right (light half).
   Each item flows RTL inside, right-aligned, so Hebrew reads naturally
   and lines stack with consistent left-edge ragged margins. */
.gallery__captions {
  direction: ltr;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  margin-top: clamp(32px, 3.8vw, 56px);
}
.gleg__item {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  direction: rtl;
  text-align: right;
}
.gleg__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.003em;
  color: rgba(255,255,255,.7);
  max-width: 38ch;
}
.gleg__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 23px);
  letter-spacing: -0.01em;
  color: var(--white);
  margin-inline-end: .35em;
}
.gleg__lead::after {
  content: " -";
  font-weight: 300;
  color: rgba(255,255,255,.5);
}
.gleg__item--em .gleg__lead { color: var(--yellow); }


/* ============== DUALITY ============== */

.duality {
  background: var(--gray);
  color: var(--white);
  padding: 90px var(--pad-x) 110px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
.duality::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(246,243,103,.18), transparent 55%);
  pointer-events: none;
}
.duality .section-head,
.duality__heading,
.duality__split {
  max-width: var(--w-max);
  margin: 0 auto;
}

.duality__heading {
  padding-block: 12px 56px;
}
.duality__heading h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5.5vw, 84px);
  line-height: .98;
  letter-spacing: -0.03em;
  max-width: 18ch;
  color: var(--white);
}
.duality__heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--yellow);
  display: inline-block;
}

.duality__split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.dual {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 28px;
  border-radius: var(--radius-lg);
}
.dual--light {
  background: var(--off);
  color: var(--gray);
}
.dual--dark {
  background: #1a1a1a;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.06);
}
.dual__label {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.dual__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}
.dual__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .6;
}
.dual__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.dual__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.dual--dark .dual__media::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 75%, rgba(246,243,103,.22), transparent 70%);
  pointer-events: none;
}
.dual__copy p {
  font-size: 17px;
  line-height: 1.65;
  opacity: .85;
  max-width: 36ch;
}

.dual__divider {
  position: relative;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16) 30%, rgba(255,255,255,.16) 70%, transparent);
  margin-inline: clamp(10px, 2vw, 28px);
}
.dual__divider-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 6px rgba(246,243,103,.18);
}


/* ============== FEATURES (five capabilities, one screen) ============== */

.features {
  background: var(--gray);
  color: var(--off);
  position: relative;
  overflow: hidden;
  max-height: 100vh;
  /* Bleed slightly into the JOIN section below so the parallax photo's
     top edge never reveals a seam during scroll. Sits above .alwayson
     via z-index. */
  margin-bottom: -60px;
  z-index: 2;
}
.features__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--pad-x);
  min-height: 100svh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  justify-content: center;
  box-sizing: border-box;
}

.features__head {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  padding-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.features__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.features__eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--yellow);
  border-radius: 50%;
}
.features__head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.features__head h2 span {
  display: block;
  color: rgba(255,255,255,.45);
}

/* ----- five-up capability grid ----- */
.cap-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
.cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.cap__circle {
  width: clamp(92px, 8.4vw, 124px);
  height: clamp(92px, 8.4vw, 124px);
  background: var(--yellow);
  color: var(--gray);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: transform .35s ease;
}
.cap:hover .cap__circle { transform: translateY(-4px); }
.cap__icon {
  width: 44%;
  height: 44%;
  display: block;
}
.cap__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--white);
  margin-top: calc(clamp(22px, 2vw, 30px) + 15px);
}
.cap__desc {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
  max-width: 26ch;
  margin-top: clamp(10px, 1vw, 14px);
}


/* ============== TECH / DASHBOARD ============== */

.tech {
  background: var(--black);
  color: var(--white);
  padding: 96px var(--pad-x) 110px;
  /* Negative top margin lifts this section over the JOIN section's
     bottom edge to cover the parallax seam. z-index keeps it above. */
  margin-top: -60px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.tech::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(246,243,103,.10), transparent 60%);
}
.tech .section-head,
.tech__grid { max-width: var(--w-max); margin: 0 auto; position: relative; }

.tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  padding-top: 24px;
}
.tech__copy { padding-inline-end: clamp(36px, 5vw, 80px); }
.tech__copy h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.tech__lede {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.66);
  max-width: 38ch;
}
.tech__list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 17px;
  color: rgba(255,255,255,.82);
}
.tech__list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tech__list-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

/* Dashboard mock */
.tech__panel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tech__panel-img {
  display: block;
  width: 100%;
  height: auto;
}

.panel__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.panel__logo {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 8px;
}
.panel__logo img { width: 100%; height: auto; }
.panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.panel__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.panel__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow), #c8c533);
  display: inline-block;
}
.panel__usermeta { display: grid; line-height: 1.1; font-size: 12px; }
.panel__usermeta .muted { color: rgba(255,255,255,.45); font-size: 10.5px; }

.panel__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel__card {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel__card--wide { grid-column: 1 / -1; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card__title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.card__chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--yellow);
  padding: 4px 10px;
  border: 1px solid rgba(246,243,103,.35);
  border-radius: 999px;
}
.card__chip--ok { color: #88e08c; border-color: rgba(136,224,140,.35); }

.card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.card__row-k { font-family: var(--font-display); font-weight: 500; font-size: 13px; }
.muted { color: rgba(255,255,255,.45); }

.toggle {
  width: 44px; height: 24px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  position: relative;
  transition: background .25s ease;
}
.toggle span {
  position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .25s ease;
}
.toggle.on { background: var(--yellow); }
.toggle.on span { background: var(--gray); transform: translateX(-20px); }

.card__timer {
  font-family: var(--font-mono);
  font-weight: 500;
  background: rgba(246,243,103,.12);
  color: var(--yellow);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  letter-spacing: .04em;
}

.card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card__metrics > div {
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metric {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.metric small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); margin-inline-start: 4px; }
.metric__spark { width: 100%; height: 24px; opacity: .85; }

.devices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.devices li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  font-size: 12.5px;
}
.dev__name { font-family: var(--font-display); font-weight: 500; }
.dev__ip   { font-family: var(--font-mono); color: rgba(255,255,255,.4); font-size: 11px; }
.dev__time { color: rgba(255,255,255,.4); font-size: 11px; }


/* ============== ALWAYS ON (full-bleed, layered) ============== */

/* Layering, bottom → top:
   1. .alwayson           — section, white background (forms the LEFT white area)
   2. .alwayson__photo    — full-height image, pinned to the RIGHT half
   3. .alwayson__graphic  — provided JOIN SVG, centered on the 50% axis,
                            its built-in white panel butts up against the
                            section's white, extending the white area across
                            the photo's left edge
   4. .alwayson__panel    — text only, lives strictly inside the left half */

.alwayson {
  position: relative;
  /* z-index below .features and .tech so they overlap this section's
     top/bottom edges and hide the parallax seam during scroll. */
  z-index: 1;
  direction: ltr;                 /* force LTR layout flow so the panel
                                     (width:50%) sits on the LEFT side,
                                     not the right (RTL would flip it) */
  width: 100%;
  background: var(--paper);       /* the rest of the section sits on the
                                     page's paper colour — only the
                                     explicit white layer below is white */
  min-height: clamp(620px, 92vh, 960px);
  /* NO overflow clipping here — section, SVG, and text must stay fully
     visible. Only the photo wrap (the moving overflow image layer) is
     clipped. */
}

/* Explicit white background layer behind the text.
   Sits below everything else (z-index 0) and is exactly 1/3 of the
   viewport wide, anchored to the left edge. The JOIN SVG and the
   photo sit on top of this and remain at their original positions. */
.alwayson::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;              /* top:0; bottom:0; left:0 */
  width: 33.33vw;
  background: var(--white);
  z-index: 0;
  pointer-events: none;
}

/* 2. Photo — anchored to the RIGHT edge and ~2/3 viewport wide so it
      continues left beneath the JOIN SVG. Z-index 1 keeps it strictly
      below the SVG (z-index 2) — letters/panel of the SVG read on top
      of the photo, no fading. */
.alwayson__photo-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 66.67vw;               /* 2/3 of the viewport — image dominates */
  height: 100%;
  background: #0c0f14;
  z-index: 1;
  /* The ONE place that clips: the moving image's parallax buffer
     overflow is hidden by the wrap's own bounds. Section, SVG, text
     are not clipped. The wrap stays a full 2/3 wide so the photo
     reads as the dominant 67 % layout area. */
  overflow: hidden;
}
.alwayson__photo {
  /* image is intentionally slightly taller than its wrap so vertical
     parallax translation never reveals an edge — this is overflow
     padding, NOT a zoom; the wrap clips it back to the section bounds */
  position: absolute;
  inset: -100px 0;                /* 100px buffer top + bottom (≥ ±75px drift) */
  width: 100%;
  height: calc(100% + 200px);
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}

/* 3. Provided JOIN SVG overlay — UNTOUCHED.
   The SVG's built-in white panel ends at x=749.49 of its 929.49-wide
   viewBox (≈ 80.64% from the left). We shift the SVG so that meeting
   line lands exactly on the 50% viewport axis — letterforms cross to
   the right onto the photo, white panel extends to the left into the
   section's white background. */
.alwayson__graphic {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;        /* native SVG aspect ratio preserved */
  z-index: 2;
  pointer-events: none;
  user-select: none;
  --parallax-y: 0px;
  /* horizontal alignment is locked at -80.638% to keep the SVG's meeting
     line on the 50% axis; only the Y component is driven by parallax */
  transform: translate3d(-80.638%, var(--parallax-y), 0);
  will-change: transform;
}

/* Respect users who prefer reduced motion — disable the parallax */
@media (prefers-reduced-motion: reduce) {
  .alwayson__photo,
  .alwayson__graphic { --parallax-y: 0px !important; }
}

/* 4. Text panel — confined to the LEFT half, clear of the SVG */
.alwayson__panel {
  position: relative;
  z-index: 3;
  width: 50%;                       /* never crosses the 50% axis */
  min-height: inherit;
  direction: rtl;                   /* Hebrew text flow within the panel */
  display: flex;
  align-items: center;
  /* Right padding (RTL → padding-inline-start) clears the SVG's white
     panel, which extends LEFT from the 50% axis by
        0.8064 × SVG_width = 0.8064 × 0.491 × section_height ≈ 39.6% of height.
     We add a small breathing buffer on top. */
  padding-block: clamp(60px, 8vw, 120px);
  padding-inline-start: clamp(280px, 42vh, 440px);
  padding-inline-end:   clamp(40px, 7vw, 140px);
}

.alwayson__text {
  text-align: right;
  max-width: 42ch;
  margin-inline-start: -100px;
}
.alwayson__text > * + * {
  margin-top: clamp(22px, 2.4vw, 36px);
}

.alwayson__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.alwayson__body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-2);
  margin: 0;
}
.alwayson__inline-mark {
  display: inline-block;
  height: .85em;
  width: auto;
  vertical-align: -0.06em;
  margin: 0 .15em;
}

.alwayson__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--gray);
}


/* ============== CONTACT (minimal) ============== */

.contact {
  background: var(--paper);
  color: var(--gray);
  position: relative;
  max-height: 100vh;
  overflow: hidden;
}
.contact__inner {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(28px, 3vw, 48px) var(--pad-x) clamp(28px, 3vw, 48px);
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  justify-content: center;
  box-sizing: border-box;
}

/* main layout */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  min-height: 0;
}

/* ----- RIGHT (RTL start): copy ----- */
.contact__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  padding-top: 0;
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: .96;
  letter-spacing: -0.035em;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .14em .18em;
  margin: 0;
}
.contact__title-line2 {
  flex-basis: 100%;
}
.contact__mark {
  display: inline-block;
  height: .82em;
  width: auto;
  vertical-align: -0.05em;
  margin: 0 .06em;
}
.contact__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray-2);
  max-width: 40ch;
  margin: 0;
}

.contact__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 12px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--gray);
}
.contact__channels li { line-height: 1.4; }
.contact__channels a {
  color: var(--gray);
  transition: color .2s ease;
  border-bottom: 1px solid transparent;
}
.contact__channels a:hover {
  color: var(--black);
  border-bottom-color: var(--gray-4);
}

/* ----- LEFT (RTL end): form ----- */
.cform {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  padding-top: 0;
}

.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
}
.cfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfield--full { grid-column: 1 / -1; }
.cfield label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--gray-3);
}
.cfield input,
.cfield textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gray-5);
  padding: 6px 0 8px;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--gray);
  outline: none;
  transition: border-color .25s ease, color .25s ease;
  width: 100%;
}
.cfield input::placeholder,
.cfield textarea::placeholder {
  color: var(--gray-4);
  font-weight: 400;
}
.cfield input:focus,
.cfield textarea:focus {
  border-bottom-color: var(--gray);
  color: var(--black);
}
.cfield textarea { resize: vertical; min-height: 56px; max-height: 90px; line-height: 1.5; }

.cform__actions {
  margin-top: clamp(8px, 1vw, 14px);
  display: flex;
  justify-content: flex-start;
}
.cform__submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: var(--gray);
  color: var(--white);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  transition: background .25s ease, transform .25s ease;
}
.cform__submit:hover { background: var(--black); }
.cform__submit:hover .cform__submit-arrow { transform: translateX(-4px); }
.cform__submit-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: -0.01em;
  color: var(--white);
}
.cform__submit-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--white);
  transition: transform .25s ease;
}
.cform__submit-arrow svg { display: block; width: 18px; height: 18px; }


/* ============== FOOTER ============== */

.footer {
  background: var(--gray);
  color: var(--white);
  padding: 72px var(--pad-x) 36px;
  margin-top: 40px;
}
.footer__main {
  max-width: var(--w-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer__brand {
  display: inline-flex;
  flex: 0 0 auto;
}
.footer__brand img { width: 140px; display: block; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
}
.footer__nav a {
  color: rgba(255,255,255,.85);
  font-size: 15px;
  letter-spacing: .01em;
  transition: color .15s ease;
}
.footer__nav a:hover { color: var(--yellow); }

.footer__base {
  max-width: var(--w-max);
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
}

.footer__partner {
  max-width: var(--w-max);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: center;
}
.footer__partner-logo {
  height: 72px;
  width: auto;
  filter: grayscale(1) invert(1);
  opacity: .35;
  transition: opacity .25s ease;
}
.footer__partner-logo:hover {
  opacity: .55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .cap-grid { gap: clamp(14px, 1.8vw, 24px); }
  .cap__desc { font-size: 12.5px; }
  .contact__layout { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); }
  .tech__grid { grid-template-columns: 1fr; }
  .panel__body { grid-template-columns: 1fr; }
  .topbar__nav { display: none; }
  .topbar__inner { grid-template-columns: auto 1fr; }
}

@media (max-width: 860px) {
  .hero {
    padding: clamp(28px, 6vw, 56px) var(--pad-x) clamp(40px, 8vw, 64px);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(20px, 5vw, 36px);
  }
  .topbar__logo img { height: clamp(32px, 8vw, 46px); }
  .hero__brand {
    max-width: min(380px, 72vw);
    margin: 0 auto;
  }
  .hero__text { justify-content: center; }
  .hero__copy {
    max-width: 32ch;
    text-align: center;
    font-size: clamp(16px, 4.2vw, 19px);
  }
  .hero__inline-mark { height: 0.85em; }

  .gallery {
    padding: clamp(80px, 22vw, 140px) clamp(20px, 4vw, 32px) clamp(56px, 12vw, 96px);
  }
  .gallery__inner { gap: clamp(32px, 9vw, 56px); }

  .gallery__heading {
    gap: clamp(8px, 2.4vw, 14px);
    padding-bottom: clamp(22px, 7vw, 36px);
  }
  .gallery__heading h2 {
    font-size: clamp(17px, 4.6vw, 22px);
  }

  .gallery__captions {
    grid-template-columns: 1fr;
    gap: clamp(28px, 8vw, 40px);
    margin-top: clamp(24px, 7vw, 36px);
  }
  .gleg__lead { font-size: clamp(16px, 4.6vw, 20px); }
  .gleg__desc { font-size: clamp(13.5px, 3.8vw, 15.5px); line-height: 1.65; max-width: none; }

  .duality__split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dual__divider { display: none; }
  .features { max-height: none; margin-bottom: 0; }
  .features__inner {
    min-height: 0;
    max-height: none;
    padding: clamp(56px, 10vw, 80px) var(--pad-x);
    gap: clamp(32px, 6vw, 48px);
    justify-content: flex-start;
  }
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 5vw, 40px) clamp(18px, 4vw, 28px);
  }
  .cap__circle { width: clamp(88px, 22vw, 120px); height: clamp(88px, 22vw, 120px); }
  .cap__desc { max-width: 28ch; }

  .duality { padding: clamp(48px, 10vw, 72px) var(--pad-x) clamp(56px, 12vw, 80px); }
  .tech { padding: clamp(48px, 10vw, 72px) var(--pad-x) clamp(56px, 12vw, 80px); margin-top: 0; }
  .tech__copy h2 { font-size: clamp(28px, 7.5vw, 42px); }

  .contact { max-height: none; overflow: visible; }
  .contact__inner {
    padding: 56px var(--pad-x) 64px;
    gap: 32px;
    min-height: 0;
    max-height: none;
  }
  .contact__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact__title { font-size: clamp(32px, 8.5vw, 52px); }
  .cform__row { grid-template-columns: 1fr; gap: 22px; }

  .footer { padding: 48px var(--pad-x) 28px; }
  .footer__main { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer__brand img { width: 100px; }
  .footer__nav { gap: 20px; flex-wrap: wrap; }
  .footer__base { flex-direction: column; gap: 8px; }

  .topbar__status { display: none; }
  .alwayson {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .alwayson::before { width: 100%; }
  .alwayson__photo-wrap {
    position: relative;
    width: 100%;
    height: 50vh;
    order: 2;
  }
  .alwayson__panel {
    width: 100%;
    padding: clamp(48px, 10vw, 72px) var(--pad-x) clamp(48px, 10vw, 72px);
    order: 1;
  }
  .alwayson__text { max-width: 100%; margin-inline-start: 0; }
  .alwayson__graphic {
    display: none;
  }
}

@media (max-width: 520px) {
  .hero__brand { max-width: 92vw; }
  .hero__copy { font-size: clamp(15px, 4vw, 17px); }

  .features__head h2 { font-size: clamp(28px, 8.5vw, 42px); }
  .cap-grid { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 36px); }
  .cap__circle { width: clamp(88px, 24vw, 110px); height: clamp(88px, 24vw, 110px); }
  .cap__title { font-size: clamp(17px, 4.6vw, 20px); }
  .cap__desc { font-size: clamp(13px, 3.6vw, 14px); max-width: 32ch; }

  .duality__heading h2 { font-size: clamp(28px, 8.5vw, 42px); }

  .tech__copy h2 { font-size: clamp(24px, 7vw, 34px); }
  .tech__lede { font-size: 15px; }
  .tech__list { font-size: 15px; }

  .contact__title { font-size: clamp(28px, 8vw, 42px); }
  .contact__lede { font-size: 15px; }
  .cform__submit { padding: 14px 24px; gap: 12px; }
  .cform__submit-label { font-size: 15px; }

  .footer__brand img { width: 80px; }
  .footer__nav { gap: 16px 20px; font-size: 14px; }
  .topbar__logo img { height: clamp(28px, 7.5vw, 36px); }
  .alwayson__body p { font-size: clamp(14.5px, 4vw, 16px); }
  .alwayson__photo-wrap { height: 40vh; }
}