/* Ofnoa Courier Journey — all rules scoped under .ocj-root. Every colour/size is a CSS variable the Elementor controls override. */
@font-face { font-family: "OCJ Secular"; src: url("../fonts/secular-one-hebrew-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "OCJ Secular"; src: url("../fonts/secular-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "OCJ Rubik"; src: url("../fonts/rubik-hebrew-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "OCJ Rubik"; src: url("../fonts/rubik-hebrew-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "OCJ Rubik"; src: url("../fonts/rubik-hebrew-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "OCJ Rubik"; src: url("../fonts/rubik-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "OCJ Rubik"; src: url("../fonts/rubik-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "OCJ Rubik"; src: url("../fonts/rubik-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

.ocj-root {
  --ocj-ground: #0F1B33;
  --ocj-raised: #162541;
  --ocj-line: #2A3A5C;
  --ocj-ink: #E6EAF0;
  --ocj-muted: #AEB8CB;
  --ocj-red: #E4433A;
  --ocj-red-deep: #C2322A;
  --ocj-road: var(--ocj-muted);
  --ocj-display: "OCJ Secular", "OCJ Rubik", "Rubik", system-ui, sans-serif;
  --ocj-body: "OCJ Rubik", "Rubik", system-ui, sans-serif;
  --ocj-radius: 14px;
  --ocj-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ocj-stage-h: 100vh;
  --ocj-top: 0px;
  --ocj-cols: 2;
  --ocj-col-gap: clamp(2rem, 6vw, 5rem);
  --ocj-row-gap: 0px;
  --ocj-icon: 56px;
  --ocj-steps-cols: 4;
  --ocj-steps-gap: 2rem;
  --ocj-courier: 64px;
  --ocj-stat-cols: 4;
  --ocj-stat-gap: 1.5rem;
  --ocj-contact-gap: clamp(2rem, 5vw, 4.5rem);
  direction: rtl;
  color: var(--ocj-ink);
  font-family: var(--ocj-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100dvh) { .ocj-root { --ocj-stage-h: 100dvh; } }
.ocj-root *, .ocj-root *::before, .ocj-root *::after { box-sizing: border-box; }
.ocj-root h1, .ocj-root h2, .ocj-root h3, .ocj-root h4, .ocj-root p, .ocj-root ul, .ocj-root ol, .ocj-root figure { margin: 0; padding: 0; }
.ocj-root img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.ocj-root a { text-decoration: none; box-shadow: none; }
.ocj-root a:focus-visible, .ocj-root button:focus-visible { outline: 2px solid var(--ocj-red); outline-offset: 3px; }
.ocj-root .ocj-body p, .ocj-root .ocj-lead p { margin: 0 0 0.6em; }
.ocj-root .ocj-body p:last-child, .ocj-root .ocj-lead p:last-child { margin-bottom: 0; }

/* Full-bleed: break out of the theme column (JS sets --ocj-vw without the scrollbar). */
.ocj-bleed { position: relative; width: var(--ocj-vw, 100vw); max-width: none; margin-left: calc(50% - var(--ocj-vw, 100vw) / 2); margin-right: calc(50% - var(--ocj-vw, 100vw) / 2); }
.ocj-wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ================================================================ Journey */
.ocj-journey { position: relative; background: var(--ocj-ground); isolation: isolate; overflow-x: clip; }
.ocj-stage { position: sticky; top: var(--ocj-top); height: var(--ocj-stage-h); overflow: hidden; z-index: 0; background: var(--ocj-ground); }
.ocj-media, .ocj-layer, .ocj-layer picture, .ocj-poster, .ocj-video, .ocj-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.ocj-layer { margin: 0; opacity: 0; will-change: opacity; }
.ocj-poster, .ocj-video { display: block; object-fit: cover; max-width: none !important; height: 100% !important; }
.ocj-video { z-index: 1; }
.ocj-layer.is-painted .ocj-poster { visibility: hidden; }
.ocj-shade { z-index: 2; background: var(--ocj-ground); opacity: 0; pointer-events: none; }

.ocj-progress { position: absolute; inset-inline: 0; top: 0; height: 2px; z-index: 5; background: color-mix(in srgb, var(--ocj-ink) 14%, transparent); pointer-events: none; }
.ocj-progress span { display: block; height: 100%; background: var(--ocj-red); transform: scaleX(0); transform-origin: right center; }

.ocj-route { position: absolute; z-index: 6; bottom: clamp(1rem, 3vw, 2rem); inset-inline: 1rem; display: flex; justify-content: center; gap: 0.25rem; }
.ocj-root .ocj-route button { min-height: 2.75rem; padding: 0.6rem 0.9rem; border: 0; border-radius: 0; background: transparent; color: var(--ocj-muted); font: 500 0.92rem/1 var(--ocj-body); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
.ocj-root .ocj-route button:hover, .ocj-root .ocj-route button:focus { background: transparent; color: var(--ocj-ink); }
.ocj-root .ocj-route button[aria-current="step"] { color: var(--ocj-ink); text-decoration: underline; text-decoration-color: var(--ocj-red); text-decoration-thickness: 0.15em; text-underline-offset: 0.35em; }

.ocj-story { position: relative; z-index: 3; margin-top: calc(-1 * var(--ocj-stage-h)); pointer-events: none; }
.ocj-chapter { position: relative; min-height: calc(var(--ocj-scroll, 2.2) * var(--ocj-stage-h)); }
.ocj-pin { position: sticky; top: var(--ocj-top); display: flex; align-items: center; justify-content: flex-start; min-height: var(--ocj-stage-h); padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); }
.ocj-chapter[data-align="center"] .ocj-pin { justify-content: center; text-align: center; }
.ocj-chapter[data-align="center"] .ocj-actions, .ocj-chapter[data-align="center"] .ocj-tags { justify-content: center; }
.ocj-chapter[data-align="center"] .ocj-title, .ocj-chapter[data-align="center"] .ocj-body { margin-inline: auto; }
.ocj-chapter[data-align="end"] .ocj-pin { justify-content: flex-end; }
.ocj-copy { position: relative; width: min(40rem, 48vw); pointer-events: auto; }
.ocj-copy::before { content: ""; position: absolute; z-index: -1; inset: -3rem -5rem; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ocj-ground) 88%, transparent) 0%, color-mix(in srgb, var(--ocj-ground) 58%, transparent) 52%, transparent 76%); }
.ocj-root .ocj-kicker { margin-bottom: 1rem; color: var(--ocj-red); font: 400 0.95rem/1.2 var(--ocj-display); letter-spacing: 0.08em; }
.ocj-root .ocj-title { max-width: 11ch; color: var(--ocj-ink); font: 400 clamp(2.6rem, 5.6vw, 5.8rem)/1.02 var(--ocj-display); letter-spacing: -0.01em; text-wrap: balance; text-transform: none; }
.ocj-root .ocj-body { max-width: 42ch; margin-top: 1.5rem; color: var(--ocj-muted); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; }
.ocj-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem !important; list-style: none; }
.ocj-root .ocj-tags li { margin: 0; padding: 0.45rem 0.8rem; border: 1px solid color-mix(in srgb, var(--ocj-ink) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--ocj-ground) 55%, transparent); color: var(--ocj-ink); font-size: 0.82rem; list-style: none; }
.ocj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }

.ocj-root .ocj-btn-primary { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.5rem; border-radius: var(--ocj-radius); background: var(--ocj-red); color: var(--ocj-ink); font-weight: 700; font-size: 1.05rem; box-shadow: 0 10px 30px -12px var(--ocj-red); transition: background 0.2s, color 0.2s; }
.ocj-btn-primary .ocj-arrow { transition: transform 0.35s var(--ocj-ease); }
.ocj-root .ocj-btn-primary:hover { background: var(--ocj-red-deep); color: var(--ocj-ink); }
.ocj-btn-primary:hover .ocj-arrow { transform: translateX(-6px); }
.ocj-btn-primary:active { transform: translateY(1px); }
.ocj-root .ocj-btn-secondary { padding-block: 0.3rem; color: var(--ocj-ink); font-weight: 500; background: linear-gradient(90deg, var(--ocj-muted) 50%, transparent 50%) bottom / 10px 1.5px repeat-x; }
.ocj-root .ocj-btn-secondary:hover { color: var(--ocj-red); }

/* ================================================================ Sections */
.ocj-section { position: relative; background: var(--ocj-ground); padding-block: clamp(4rem, 9vw, 7rem); }
.ocj-root .ocj-section-title { max-width: 18ch; color: var(--ocj-ink); font: 400 clamp(2.2rem, 4.4vw, 3.8rem)/1.05 var(--ocj-display); text-transform: none; letter-spacing: 0; }
.ocj-root .ocj-lead { max-width: 52ch; margin-top: 1.1rem; color: var(--ocj-muted); font-size: 1.1rem; line-height: 1.65; }
.ocj-root [style*="text-align: center"] { margin-inline: auto; }

/* Services */
.ocj-services { padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 6rem); }
.ocj-ledger { display: grid; grid-template-columns: repeat(var(--ocj-cols), minmax(0, 1fr)); column-gap: var(--ocj-col-gap); row-gap: var(--ocj-row-gap); margin-top: 3.5rem !important; list-style: none; }
.ocj-root .ocj-ledger-item { display: flex; gap: 1.25rem; align-items: flex-start; margin: 0; padding-block: 1.6rem; border-top: 1px solid var(--ocj-line); list-style: none; transition: transform 0.35s var(--ocj-ease), background 0.25s, border-color 0.25s; }
.ocj-ledger-link { display: flex; gap: inherit; align-items: inherit; flex: 1; color: inherit; }
.ocj-ledger-icon { width: var(--ocj-icon); height: var(--ocj-icon); flex: none; object-fit: contain; transition: transform 0.4s var(--ocj-ease); }
.ocj-ledger-icon--font { display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--ocj-icon) * 0.7); color: var(--ocj-red); fill: var(--ocj-red); }
.ocj-ledger-icon--font svg { width: 1em; height: 1em; }
.ocj-icon-hover-tilt .ocj-ledger-item:hover .ocj-ledger-icon, .ocj-root--shortcode .ocj-ledger-item:hover .ocj-ledger-icon { transform: translateY(-4px) rotate(-4deg); }
.ocj-icon-hover-grow .ocj-ledger-item:hover .ocj-ledger-icon { transform: scale(1.12); }
.ocj-root .ocj-ledger-text h3 { color: var(--ocj-ink); font: 700 1.2rem/1.3 var(--ocj-body); text-transform: none; }
.ocj-root .ocj-ledger-text p { margin-top: 0.4rem; color: var(--ocj-muted); line-height: 1.6; }
.ocj-services-cards .ocj-ledger { row-gap: var(--ocj-row-gap, 1.25rem); }
.ocj-services-cards .ocj-root { --ocj-row-gap: 1.25rem; --ocj-col-gap: 1.25rem; }
.ocj-services-cards .ocj-ledger-item { padding: 1.5rem; border: 1px solid var(--ocj-line); border-radius: var(--ocj-radius); background: var(--ocj-raised); }
.ocj-services-plain .ocj-ledger-item { border-top: 0; }

/* Process */
.ocj-process { background: var(--ocj-raised); overflow: hidden; }
.ocj-road { position: relative; margin-top: 4rem; padding-top: calc(var(--ocj-courier) + 1rem); }
.ocj-road::before { content: ""; position: absolute; inset-inline: 0; top: calc(var(--ocj-courier) + 0.1rem); height: 2px; opacity: 0.5; background: repeating-linear-gradient(90deg, var(--ocj-road) 0 14px, transparent 14px 26px); }
.ocj-road-no .ocj-road::before, .ocj-road-no .ocj-courier { display: none; }
.ocj-road-no .ocj-road { padding-top: 0; }
.ocj-courier { position: absolute; top: 0; inset-inline-start: 0; width: var(--ocj-courier); }
.ocj-stops { display: grid; grid-template-columns: repeat(var(--ocj-steps-cols), minmax(0, 1fr)); gap: var(--ocj-steps-gap); list-style: none; }
.ocj-root .ocj-stops li { margin: 0; list-style: none; transition: transform 0.35s var(--ocj-ease), background 0.25s; }
.ocj-dot { display: block; width: 14px; height: 14px; margin: -0.95rem 0 1.3rem; border-radius: 50%; background: var(--ocj-red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ocj-red) 25%, transparent); }
.ocj-root .ocj-stops h3 { color: var(--ocj-ink); font: 400 1.5rem/1.2 var(--ocj-display); text-transform: none; }
.ocj-root .ocj-stops p { margin-top: 0.5rem; color: var(--ocj-muted); line-height: 1.6; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ocj-courier { animation: ocj-ride linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
    @keyframes ocj-ride { from { transform: translateX(0); } to { transform: translateX(calc(-1 * (min(1180px, 100vw - 2.5rem) - var(--ocj-courier)))); } }
  }
}

/* Stack */
.ocj-stack { padding-block: 2.2rem; border-block: 1px solid var(--ocj-line); }
.ocj-root .ocj-stack-line { color: var(--ocj-muted); font-size: clamp(0.95rem, 1.6vw, 1.15rem); line-height: 2; text-align: center; letter-spacing: 0.02em; }
.ocj-stack-line i { padding-inline: 0.5rem; color: var(--ocj-red); font-style: normal; }

/* Contact */
.ocj-contact { padding-block: clamp(5rem, 10vw, 8rem); }
.ocj-contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--ocj-contact-gap); align-items: center; }
.ocj-contact-grid--solo { grid-template-columns: 1fr; }
.ocj-root .ocj-wa { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1.1rem; align-items: center; margin-top: 2.2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--ocj-line); border-radius: var(--ocj-radius); background: var(--ocj-raised); color: var(--ocj-ink); transition: transform 0.35s var(--ocj-ease), border-color 0.25s, background 0.25s; }
.ocj-wa img { grid-row: span 2; width: 64px; }
.ocj-wa-label { font: 400 1.6rem/1.2 var(--ocj-display); }
.ocj-wa-sub { grid-column: 2; color: var(--ocj-muted); font-size: 0.95rem; }
.ocj-wa .ocj-arrow { grid-row: 1 / span 2; grid-column: 3; width: 28px; height: 28px; color: var(--ocj-red); }
.ocj-root .ocj-wa:hover { transform: translateY(-3px); border-color: var(--ocj-red); color: var(--ocj-ink); }
.ocj-lines { margin-top: 1.8rem !important; list-style: none; }
.ocj-root .ocj-lines li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-block: 0.9rem; border-bottom: 1px solid var(--ocj-line); list-style: none; }
.ocj-lines span { color: var(--ocj-muted); }
.ocj-root .ocj-lines a, .ocj-root .ocj-lines b { color: var(--ocj-ink); font-weight: 500; transition: color 0.2s; }
.ocj-root .ocj-lines a:hover { color: var(--ocj-red); }
.ocj-visual { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--ocj-radius); }
.ocj-visual img { display: block; width: 100%; height: 100% !important; object-fit: cover; }

/* Chart */
.ocj-chart-section .ocj-chart { margin-top: 2rem; }
.ocj-chart { margin: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--ocj-line); border-radius: var(--ocj-radius); background: var(--ocj-raised); }
.ocj-chart-title { margin-bottom: 1rem; color: var(--ocj-ink); font: 700 1.15rem/1.3 var(--ocj-body); }
.ocj-chart-box { position: relative; height: 380px; width: 100%; }
.ocj-chart-box canvas { display: block; }
.ocj-chart-note { margin-top: 0.8rem !important; color: var(--ocj-muted); font-size: 0.85rem; }

/* Stats */
.ocj-stats { display: grid; grid-template-columns: repeat(var(--ocj-stat-cols), minmax(0, 1fr)); gap: var(--ocj-stat-gap); margin-top: 2rem !important; list-style: none; }
.ocj-stats:first-child { margin-top: 0 !important; }
.ocj-root .ocj-stat { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 1.25rem 0; list-style: none; transition: transform 0.35s var(--ocj-ease), background 0.25s; }
.ocj-stat-div-yes .ocj-stat { border-top: 2px solid var(--ocj-red); }
.ocj-root--shortcode .ocj-stat { border-top: 2px solid var(--ocj-red); }
.ocj-stat-num { display: block; color: var(--ocj-ink); font: 400 clamp(2.6rem, 5vw, 4.2rem)/1 var(--ocj-display); font-variant-numeric: tabular-nums; }
.ocj-stat-affix { color: var(--ocj-red); font-size: 0.6em; }
.ocj-stat-label { color: var(--ocj-ink); font-weight: 700; font-size: 1.05rem; }
.ocj-stat-text { color: var(--ocj-muted); font-size: 0.95rem; line-height: 1.55; }

/* ================================================================ Responsive defaults (Elementor responsive controls override these) */
@media (max-width: 1024px) {
  .ocj-root--shortcode { --ocj-steps-cols: 2; --ocj-stat-cols: 2; }
}
@media (max-width: 767px) {
  .ocj-pin { align-items: flex-end; padding: 6.5rem 1.25rem calc(5rem + env(safe-area-inset-bottom)); }
  .ocj-copy { width: min(100%, 36rem); }
  .ocj-copy::before { inset: -3rem -2rem; background: linear-gradient(to top, var(--ocj-ground) 0%, color-mix(in srgb, var(--ocj-ground) 82%, transparent) 58%, transparent 100%); }
  .ocj-root .ocj-title { max-width: 14ch; font-size: clamp(2.3rem, 11vw, 4.5rem); }
  .ocj-route { justify-content: flex-start; overflow-x: auto; }
  .ocj-root .ocj-route button { flex: 0 0 auto; }
  .ocj-root--shortcode { --ocj-cols: 1; --ocj-steps-cols: 1; }
  .ocj-road { padding-top: 0; }
  .ocj-road::before, .ocj-courier { display: none; }
  .ocj-dot { margin: 0 0 1rem; }
  .ocj-contact-grid { grid-template-columns: 1fr; }
  .ocj-actions { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ocj-chapter { min-height: var(--ocj-stage-h) !important; }
  .ocj-btn-primary .ocj-arrow, .ocj-ledger-icon, .ocj-wa, .ocj-ledger-item, .ocj-stat, .ocj-stops li { transition: none; }
}