/* Rubik — self-hosted variable font, one file per script covering 400–900.
   Redzone is Latin-only, so Hebrew headings had been falling back to Segoe UI. */
@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-hebrew.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #05070a;
  --panel: #101721;
  --ink: #f7f4ef;
  --muted: #b8bec5;
  --quiet: #7e8791;
  --red: #ff0025;
  --red-dark: #750006;
  --line: rgba(255,255,255,.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Montserrat, Arial, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  margin: 0;
  color: #fff;
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.005em;
  text-transform: none;
}
.page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,0,37,.16), transparent 25%),
    linear-gradient(180deg, #05070a 0%, #070b10 100%);
}
.wrap {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 22px;
  z-index: 20;
  width: min(1160px, calc(100% - 48px));
  min-height: 88px;
  margin: 22px auto 0;
  padding: 18px 24px;
  border-radius: 18px;
  background: rgba(45,45,45,.88);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.nav img { width: 210px; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.btn {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.12);
}
.btn-red {
  background: linear-gradient(170deg, var(--red) 0%, var(--red-dark) 96%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(255,0,37,.18);
}
.btn-ghost {
  background: rgba(255,255,255,.045);
  color: #fff;
  border-color: rgba(255,255,255,.16);
}
.eyebrow {
  color: var(--red);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ---------- CASE STUDY: hero ---------- */

.case-hero { padding: 64px 0 34px; }
[dir="rtl"] .case-hero h1 { letter-spacing: -.015em; line-height: 1.02; }
[dir="rtl"] .case-chapter h2 { letter-spacing: -.01em; line-height: 1.1; }
.case-hero h1 {
  max-width: 900px;
  font-size: clamp(32px, 4.4vw, 61px);
  line-height: 1.04;
}
.case-hero .case-lead {
  margin: 20px 0 0;
  color: #d7dce1;
  font-size: 19px;
  line-height: 1.55;
  max-width: 660px;
}
.case-hero .case-lead b { color: #fff; font-weight: 800; }
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.case-facts span {
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  color: #d7dce1;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- CASE STUDY: section headings ---------- */

.case-section { padding: 46px 0 0; }
.case-section > h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  margin-bottom: 10px;
}
.case-section > .case-sub {
  color: var(--muted);
  font-size: 16px;
  max-width: 680px;
  margin: 0 0 28px;
}

/* ---------- CASE STUDY: variation wall ---------- */

.variation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.variation-card {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.variation-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,0,37,.45);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,0,37,.25);
}
.variation-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #080b10;
  overflow: hidden;
  isolation: isolate;
}
.variation-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: transform .35s ease, opacity .35s ease;
}
.variation-card:hover .variation-frame img { transform: scale(1.04); opacity: 1; }
.variation-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5,7,10,.5), transparent 58%);
  pointer-events: none;
}
.variation-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  background: linear-gradient(170deg, var(--red), var(--red-dark));
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transition: transform .2s ease;
}
.variation-card:hover .variation-play { transform: translate(-50%, -50%) scale(1.08); }
.variation-tag {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(5,7,10,.72);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.variation-meta { padding: 16px 18px 18px; }
.variation-meta h3 {
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  text-transform: none;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 6px; font-weight: 800;}
.variation-meta p {
  margin: 0;
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- CASE STUDY: constants vs variables ---------- */

.case-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.case-panel {
  padding: 26px 28px 28px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.case-panel h3 {
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .14em;
  margin-bottom: 16px; font-weight: 800;}
.case-panel.is-constant h3 { color: var(--quiet); }
.case-panel.is-variable h3 { color: var(--red); }
.case-panel ul { margin: 0; padding: 0; list-style: none; }
.case-panel li {
  position: relative;
  padding: 9px 0 9px 22px;
  color: #d7dce1;
  font-size: 15px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.case-panel li:first-child { border-top: 0; }
.case-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.case-panel.is-constant li::before { background: rgba(255,255,255,.22); }
.case-panel.is-variable li::before { background: var(--red); }

/* ---------- CASE STUDY: tally ---------- */

.case-tally {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.tally-item {
  padding: 24px 22px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,0,37,.1), transparent 46%),
    rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.tally-item strong {
  display: block;
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  /* The oblique face overhangs its box, so the label needs extra clearance. */
  margin-bottom: 14px; font-weight: 900; letter-spacing: -.005em;}
.tally-item span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
  display: block;
}

/* ---------- CASE STUDY: CTA ---------- */

.case-cta {
  width: min(1160px, calc(100% - 48px));
  margin: 70px auto 90px;
  padding: 54px;
  text-align: center;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,0,37,.14), transparent 38%),
    rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
}
.case-cta h2 {
  font-size: clamp(33px, 4.4vw, 59px);
  line-height: 1.04;
  margin-bottom: 18px;
}
.case-cta p {
  max-width: 680px;
  margin: 0 auto 26px;
  color: #d7dce1;
  font-size: 18px;
}

/* ---------- modal ---------- */

.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.reel-modal[hidden] { display: none; }
.reel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,7,10,.92);
  backdrop-filter: blur(16px);
  animation: reelFadeIn .28s ease backwards;
}
.reel-modal-panel {
  position: relative;
  z-index: 2;
  max-width: 92vw;
  animation: reelCutOpen .6s cubic-bezier(.25,.9,.2,1) .2s backwards;
}
@keyframes reelCutOpen {
  0%   { clip-path: polygon(0 48%, 100% 45%, 100% 54%, 0 57%); transform: scale(.97); }
  100% { clip-path: polygon(0 -40%, 100% -40%, 100% 140%, 0 140%); transform: scale(1); }
}
.reel-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.reel-modal-head strong {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}
.reel-modal-head span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.reel-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.reel-modal-close:hover {
  background: var(--red);
  border-color: var(--red);
  transform: rotate(90deg);
}
.reel-modal-frame {
  position: relative;
  width: min(90vw, calc(76vh * var(--arn, 1.7778)));
  aspect-ratio: var(--arcss, 16 / 9);
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 70px rgba(255,0,37,.14);
}
.reel-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@keyframes reelFadeIn { from { opacity: 0; } to { opacity: 1; } }
.reel-modal.closing .reel-modal-panel { animation: reelOut .2s ease forwards; }
.reel-modal.closing .reel-modal-backdrop { animation: reelFadeOut .2s ease forwards; }
@keyframes reelOut { to { opacity: 0; transform: scale(.96); } }
@keyframes reelFadeOut { to { opacity: 0; } }

/* ---------- footer ---------- */

.footer-band {
  position: relative;
  margin-top: 100px;
  background: #0c1824;
  padding: 74px 0 70px;
}
.footer-band::before,
.footer-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.footer-band::before {
  top: -54px;
  height: 55px;
  background: #0c1824;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.footer-band::after {
  top: -54px;
  height: 70px;
  background: #04070b;
  clip-path: polygon(0 86%, 10% 77%, 20% 72%, 30% 62%, 40% 57%, 50% 46%, 60% 41%, 70% 31%, 80% 26%, 90% 16%, 100% 9%, 100% 19%, 90% 28%, 80% 34%, 70% 43%, 60% 49%, 50% 58%, 40% 65%, 30% 74%, 20% 80%, 10% 89%, 0 94%);
}
.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}
.footer-inner > a img { width: min(340px, 70vw); display: block; }
.footer-nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: #dfe5ea;
}
.footer-nav a:hover { color: var(--red); }
.footer-line {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.1);
  margin-top: 10px;
}
.footer-base {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--quiet);
  font-size: 13px;
}
.footer-base a { color: #d8dde2; }
.footer-base a:hover { color: var(--red); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.footer-base .footer-social a:hover,
    .footer-base .footer-social a:focus-visible {
      /* A glow around the ring, not a red fill: the icon draws in currentColor,
         so a red fill under the general footer link hover (color: red) made
         the icon vanish. */
      color: #fff;
      background: rgba(255,0,37,.14);
      border-color: rgba(255,0,37,.75);
      box-shadow: 0 0 0 3px rgba(255,0,37,.16), 0 0 22px rgba(255,0,37,.55);
    }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .variation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .case-split { grid-template-columns: 1fr; }
  .nav { position: relative; top: 0; flex-direction: column; align-items: flex-start; }
  .nav-links { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .variation-grid { grid-template-columns: 1fr; }
  .case-tally { grid-template-columns: 1fr; }
  .wrap, .nav, .case-cta { width: min(100% - 28px, 1160px); }
  .nav img { width: 185px; }
  .case-cta { padding: 34px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .variation-card { transition: none; }
  .variation-card:hover { transform: none; }
  .reel-modal-panel, .reel-modal-backdrop { animation: none; }
}

/* ==========================================================================
   DATA CASE STUDIES (added 2026-09-02)
   Components for case pages that carry client performance data.
   Written with logical properties so the same sheet serves the LTR English
   pages and the RTL Hebrew ones.
   ========================================================================== */

/* Numeric runs must stay LTR inside an RTL page, or "-12%" renders as "12%-". */
.num { direction: ltr; unicode-bidi: isolate; }

/* An RTL page inverts SVG text-anchor, pushing end-anchored labels into the
   bars. Hebrew strings inside still render RTL through normal bidi. */
.case-chart svg { display: block; max-width: 100%; height: auto; direction: ltr; }

/* ---------- headline number strip ---------- */

.case-strip {
  display: flex;
  flex-wrap: wrap;
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.045);
}
.case-strip > div {
  position: relative;
  flex: 1 1 160px;
  padding: 20px 20px 18px;
  border-inline-start: 1px solid var(--line);
  transition: background .2s ease;
}
.case-strip > div::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.case-strip > div:hover { background: rgba(255,255,255,.03); }
.case-strip > div:hover::before { transform: scaleX(1); }
.case-strip > div:first-child { border-inline-start: 0; }
.case-strip b {
  display: block;
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: 10px; font-weight: 900;}
.case-strip span { color: var(--quiet); font-size: 12.5px; }

/* ---------- one-line control proof ---------- */

.proofline {
  margin: 20px 0 0;
  color: #d7dce1;
  font-size: 15.5px;
  border-inline-start: 2px solid rgba(255,0,37,.75);
  padding: 6px 16px;
  background: linear-gradient(to var(--pl-dir, left), rgba(255,0,37,.06), transparent 62%);
  border-radius: 0 10px 10px 0;
}
[dir="rtl"] .proofline { --pl-dir: left; }
[dir="ltr"] .proofline { --pl-dir: right; border-radius: 10px 0 0 10px; }
.proofline b { color: #fff; }

/* ---------- chart shell ---------- */

.case-chart {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px 14px;
}
.case-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.case-chart-title { font-size: 14.5px; font-weight: 700; color: #fff; }
.case-chart-note { color: var(--quiet); font-size: 11.5px; }
.case-chart .tick { fill: var(--quiet); font-size: 10px; }
.case-chart .dlabel { fill: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.case-chart .tick { font-variant-numeric: tabular-nums; }
.case-chart .after-band { fill: rgba(255,0,37,.055); }
.case-chart .axis { stroke: rgba(255,255,255,.07); stroke-width: 1; }

/* ---------- creative rails ---------- */

.rail-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.rail-head strong { font-size: 13.5px; color: #fff; }
.rail-head span { color: var(--quiet); font-size: 12px; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 14px;
  /* Centred while the row fits — a rail of six anchored to one edge reads as a
     cut-off scroller. Falls back to a scroller once it cannot fit. */
  justify-content: center;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
@media (max-width: 1050px) {
  .rail { justify-content: start; grid-auto-columns: 128px; }
}
.rail .cre {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0e13;
  position: relative;
}
.rail .cre .ph {
  aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, #141a23, #0a0d12);
  display: grid;
  place-items: center;
  color: #39414c;
  font-size: 10px;
}
.rail .cre img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.rail .cre .cap { padding: 9px 10px; font-size: 12px; line-height: 1.35; color: #d7dce1; }
.rail .cre .win {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  background: var(--red);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
}

/* ---------- method accordion ---------- */

details.case-more {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
details.case-more summary {
  padding: 15px 20px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}
details.case-more summary::-webkit-details-marker { display: none; }
details.case-more summary::after { content: " ▾"; color: var(--red); }
details.case-more[open] summary::after { content: " ▴"; }
details.case-more .body { padding: 0 20px 20px; color: #d7dce1; font-size: 14px; }

table.case-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
table.case-tbl th, table.case-tbl td {
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  text-align: start;
}
table.case-tbl th {
  color: var(--quiet);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
table.case-tbl td { color: #d7dce1; }
table.case-tbl tr.hi td { color: #fff; font-weight: 700; }

@media (max-width: 560px) {
  .case-strip > div { flex-basis: 50%; }
}

/* RTL pages run on Rubik: Montserrat and Redzone are both Latin-only. */
[dir="rtl"] body { font-family: "Rubik", "Segoe UI", Arial, sans-serif; }
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.025em;
}
[dir="rtl"] .case-strip b,
[dir="rtl"] .cut-side .figure,
[dir="rtl"] .tally-item strong {
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.03em;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .tc,
[dir="rtl"] .btn { font-weight: 800; }
[dir="rtl"] .case-chapter > .ghost { font-family: "Rubik", Arial, sans-serif; font-weight: 900; }

/* ==========================================================================
   EDITORIAL TREATMENT — the "cut" motif
   Extends the katana-slash idea already used by the reel modal (reelSlash) into
   the page structure: a diagonal red cut splits before from after. Distinctive,
   and it carries meaning rather than decoration.
   ========================================================================== */

.cut-hero {
  position: relative;
  margin-top: 30px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
  isolation: isolate;
  --cut-angle: 96deg;   /* RTL: "after" sits left, "before" right */
}
[dir="ltr"] .cut-hero { --cut-angle: 84deg; }

/* The cut is the boundary between the two halves, not a line drawn on top of
   them: one hard-stop gradient paints both fields and the seam where they meet,
   so the edge is exact at every height instead of a rotated bar that only
   crosses the middle. */
.cut-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(var(--cut-angle),
    rgba(255,0,37,.13) 0%,
    rgba(255,0,37,.035) 26%,
    rgba(255,0,37,.018) 44%,
    rgba(255,45,75,.5)  48.55%,
    #ff3352            48.98%,
    #ff3352            49.22%,
    rgba(255,45,75,.5)  49.65%,
    rgba(255,255,255,.012) 54%,
    rgba(255,255,255,.03)  100%);
}

.cut-side {
  position: relative;
  z-index: 1;
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
/* keep type clear of the diagonal: the seam runs along each side's inner edge */
.cut-side.is-before { padding-inline-end: 62px; }
.cut-side.is-after  { padding-inline-start: 62px; }

.cut-side .lbl {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 14px;
}
.cut-side.is-before .lbl { color: var(--quiet); }
.cut-side.is-after  .lbl { color: #ff5c78; }

.cut-side .figure {
  font-size: clamp(46px, 7vw, 86px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.cut-side.is-before .figure { color: #7f868f; }
.cut-side.is-after .figure { text-shadow: 0 0 42px rgba(255,0,37,.45); }

.cut-side .under {
  color: #c8ced5;
  font-size: 14px;
  margin-top: 14px;
  line-height: 1.5;
}
.cut-side .under b { color: #fff; font-variant-numeric: tabular-nums; }

/* oversized ghost numeral behind a section heading */
.case-chapter { position: relative; padding: 52px 0 0; }
.case-chapter > .ghost {
  position: absolute;
  inset-inline-end: 4px;
  top: 10px;
  font-size: clamp(76px, 10vw, 132px);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.055);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.case-chapter > * { position: relative; z-index: 1; }
.case-chapter > .ghost { z-index: 0; }

/* timecode-style eyebrow */
.tc {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 12px;
}


/* film-edge rule between chapters */
.sprocket {
  height: 10px;
  margin: 44px 0 0;
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 8px, transparent 8px 22px);
  opacity: .5;
}

@media (max-width: 720px) {
  .cut-hero { grid-template-columns: 1fr; min-height: 0; --cut-angle: 186deg; }
  .cut-side { padding: 30px 26px; }
  .cut-side.is-before { padding-inline-end: 26px; padding-block-end: 44px; }
  .cut-side.is-after  { padding-inline-start: 26px; padding-block-start: 44px; }
}

/* ---------- record-day callout ----------
   Monthly resolution proves the lift held, but it hides the standout days.
   This puts the record back on the page as a new ceiling rather than one
   lucky spike, which is the harder claim to dismiss. */
.peak-note {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255,0,37,.28);
  background: linear-gradient(120deg, rgba(255,0,37,.10), rgba(255,255,255,.03) 58%);
}
.peak-note .peak-fig {
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(255,0,37,.4);
}
.peak-note .peak-body { flex: 1 1 320px; color: #d7dce1; font-size: 14.5px; line-height: 1.55; }
.peak-note .peak-body b { color: #fff; }
.peak-note .peak-body .k {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ff5c78;
  margin-bottom: 6px;
}

/* ---------- compact before/after comparison ----------
   Replaces the full-bleed cut hero. Two large figures side by side read as
   "these are about the same" when the delta is small, and hide the metric that
   actually moved in small print. A row per metric, with the direction and the
   delta stated, is both smaller and clearer. */

/* A real table. The previous version aligned headers with hardcoded span
   widths while the rows used a flex cluster — two different measuring systems,
   so the columns never quite lined up. A table guarantees the alignment by
   definition, and gives screen readers a proper row/column relationship.
   The arrow column is gone: with explicit "before" and "after" headers it was
   restating what the headers already say. */

.cut-compare {
  max-width: 560px;
  width: 100%;
  margin: 24px auto 0;
  border-collapse: collapse;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  text-align: start;
}

.cc-title {
  caption-side: top;
  padding: 16px 20px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
}
.cc-title strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 5px;
}
.cc-title span { color: var(--quiet); font-size: 12.5px; }
.cc-title span b { color: #ff5c78; font-weight: 800; }

.cut-compare thead th {
  padding: 11px 16px;
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--quiet);
  /* Centred so a long header sits over the middle of the short value beneath
     it. End-aligned, "לפני · יוני" ran past "1,114 ₪" and stopped reading as
     its label. */
  text-align: center;
  white-space: nowrap;
}
.cut-compare thead th.is-after { color: #ff5c78; }

.cut-compare tbody th,
.cut-compare tbody td {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cut-compare tbody tr:first-child th,
.cut-compare tbody tr:first-child td { border-top: 0; }

.cut-compare tbody th {
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  color: #d7dce1;
  border-inline-start: 2px solid transparent;
}
.cc-before, .cc-after { text-align: center; font-weight: 800; line-height: 1.1; }
.cc-before { color: #8a9199; font-size: 17px; }
.cc-after  { color: #fff;    font-size: 19px; }

.cc-delta {
  display: inline-block;
  min-width: 58px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: #c8ced5;
  white-space: nowrap;
}
.cut-compare td:last-child { text-align: center; }

/* Key row marked three ways so it survives the grayscale test. */
.cut-compare tbody tr.is-key th,
.cut-compare tbody tr.is-key td { background: rgba(255,0,37,.05); }
.cut-compare tbody tr.is-key th { border-inline-start-color: var(--red); }
.cut-compare tbody tr.is-key .cc-after { font-size: 23px; }
.cut-compare tbody tr.is-key .cc-delta {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

@media (max-width: 560px) {
  .cut-compare thead th,
  .cut-compare tbody th,
  .cut-compare tbody td { padding: 12px 10px; }
  .cc-before { font-size: 15px; }
  .cc-after  { font-size: 17px; }
  .cut-compare tbody tr.is-key .cc-after { font-size: 19px; }
  .cc-term {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 3px 9px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: #cfd5dc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  direction: ltr;
  line-height: 1.6;
}
/* Term chip sits on the right, Hebrew label to its left — Hebrew readers hit
   the label in reading order and the acronym reads as an aside. */
.cc-metric {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cut-compare tbody tr.is-key .cc-term {
  background: linear-gradient(180deg, rgba(255,0,37,.28), rgba(255,0,37,.14));
  border-color: rgba(255,0,37,.45);
  color: #fff;
}
}

/* a single supporting fact under the table */
.cc-foot {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.16);
  color: #d7dce1;
  font-size: 13.5px;
}
.cc-foot b { color: #fff; }

@media (max-width: 620px) {
  .cc-row { grid-template-columns: 1fr 1fr 20px 1fr; row-gap: 4px; padding: 12px 14px; }
  .cc-label { grid-column: 1 / -1; font-size: 13px; }
  .cc-delta { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* ---------- scroll reveal ----------
   Motion that amplifies the data rather than decorating around it: bars grow
   from the baseline as the chart enters view, comparison rows arrive in
   sequence so the eye is walked down the deltas. transform/opacity only —
   never width, height or position — and position shifts drop entirely under
   reduced motion, keeping the opacity change that aids comprehension. */

.cut-compare tbody tr.reveal,
.case-chart .case-daily rect.reveal { will-change: transform, opacity; }

.cut-compare tbody tr.reveal { opacity: 0; }
.cut-compare tbody tr.reveal.is-in {
  opacity: 1;
  transition: opacity .34s cubic-bezier(.2,.7,.2,1);
}

.case-daily rect.reveal {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
}
.case-daily rect.reveal.is-in {
  transform: none;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .cut-compare tbody tr.reveal.is-in { transition: opacity .2s linear; }
  .case-daily rect.reveal { transform: none; }
  .case-daily rect.reveal.is-in { transition: none; }
}

/* ---------- centred case layout ----------
   Hero, chapter headings and the comparison table sit on the page's centre
   axis. Long-form prose inside the method accordion stays start-aligned:
   centring multi-line body text forces the eye to hunt for each new line
   start, which is exactly the text a sceptical reader actually reads. */

.case-hero { text-align: center; }
.case-hero .tc { justify-content: center; }
.case-hero h1 { margin-inline: auto; }
.case-hero .case-lead { margin-inline: auto; }

.case-chapter > h2,
.case-chapter > .case-sub { text-align: center; }
.case-chapter > .case-sub { margin-inline: auto; }
.case-chapter > .tc { justify-content: center; display: flex; }


.proofline {
  max-width: 720px;
  margin-inline: auto;
  text-align: start;
}

.case-chart { margin-inline: auto; }
.case-chart .case-chart-head { justify-content: space-between; }

.rail-head { justify-content: center; }

/* the accordion keeps its reading alignment */
details.case-more .body { text-align: start; }
details.case-more summary { text-align: center; }

/* Industry shorthand beside the Hebrew label. A media buyer scans for CPA,
   CPL, CTR and L2S — the acronym is the term they actually work in, and the
   Hebrew stays for anyone who doesn't. */
.cc-term {
  display: inline-block;
  margin-inline-start: 7px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--quiet);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  direction: ltr;
  vertical-align: 1px;
}

/* Chapter headings that carry the argument, not just label the section. */
.case-chapter > h2.is-lead-h {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: none;
  margin-inline: auto;
  text-wrap: balance;
}
/* One line on a desktop measure; allowed to wrap once the viewport can no
   longer hold it rather than shrinking the type indefinitely. */
@media (min-width: 900px) {
  .case-chapter > h2.is-lead-h { white-space: nowrap; }
}

/* ---------- client pull-quote ----------
   For a case study whose figures come from the client's own published post
   rather than from a report we hold. The quote is the evidence, so it is set
   as evidence: attributed, visually distinct from our own prose, and never
   restyled to read like a testimonial blurb. */
.case-quote {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 26px 30px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-inline-start: 3px solid rgba(255,0,37,.65);
  text-align: start;
}
.case-quote p {
  margin: 0;
  color: #d7dce1;
  font-size: 15.5px;
  line-height: 1.7;
}
.case-quote p + p { margin-top: 12px; }
.case-quote b { color: #fff; }
.case-quote cite {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: var(--quiet);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
}

/* ---------- why a creative exists ----------
   The rail shows what was made. This says why one of them was made, and it is
   the strongest argument on the page for AI inside the workflow, so it sits
   beside the cut rather than in the method accordion. */
.rail-note {
  max-width: 620px;
  margin: 16px auto 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-inline-start: 2px solid rgba(255,0,37,.55);
  text-align: start;
}
.rail-note .k {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ff5c78;
  margin-bottom: 7px;
}
.rail-note p { margin: 0; color: #c8ced5; font-size: 13.5px; line-height: 1.6; }
.rail-note b { color: #fff; }

/* Hebrew takes no positive tracking - the same correction the homepage needed. */
[dir="rtl"] .rail-note .k,
[dir="rtl"] .index-note .k,
[dir="rtl"] .peak-note .peak-body .k { letter-spacing: 0; }

/* ---------- index explainer ----------
   Sits above the table, because a reader meeting "100 → 227" without warning
   assumes it is a count. Stating the rule first turns withheld data from
   something that looks evasive into something that reads as disciplined. */
.index-note {
  max-width: 560px;
  margin: 26px auto 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-inline-start: 2px solid rgba(255,0,37,.55);
  text-align: start;
}
.index-note .k {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ff5c78;
  margin-bottom: 8px;
}
.index-note p {
  margin: 0;
  color: #c8ced5;
  font-size: 13.5px;
  line-height: 1.6;
}
.index-note p + p { margin-top: 9px; }
.index-note b { color: #fff; }
.index-note .eg {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(0,0,0,.28);
  border: 1px dashed rgba(255,255,255,.14);
  color: #d7dce1;
  font-size: 13px;
}
.index-note .eg b { color: #fff; font-variant-numeric: tabular-nums; }

/* Latin case pages keep the Redzone display face; the chapter styles above are
   script-agnostic, so only the eyebrow needs its Latin tracking restored. */
[dir="ltr"] .tc { letter-spacing: .18em; }

/* ---------- playable creative cards ---------- */
.rail .cre .frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #080b10;
  overflow: hidden;
  isolation: isolate;
}
/* The rail frame was locked to 9:16. Square and wide cuts exist too, and a
   frame that lies about its ratio crops the poster and opens the player at the
   wrong shape - the same bug the portfolio grid had. */
.rail .cre .frame[data-ratio="1:1"] { aspect-ratio: 1 / 1; }
.rail .cre .frame[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.rail .cre .frame[data-ratio="16:9"] { aspect-ratio: 16 / 9; }

/* A second rail stacked under the first. */
.rail + .rail-head { margin-top: 26px; }

.rail .cre .frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: transform .35s ease, opacity .35s ease;
}
.rail .cre:hover .frame img { transform: scale(1.05); opacity: 1; }
.rail .cre .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5,7,10,.5), transparent 55%);
  pointer-events: none;
}
.rail .cre .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  background: linear-gradient(170deg, var(--red), var(--red-dark));
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  transition: transform .2s ease;
}
.rail .cre:hover .play { transform: translate(-50%, -50%) scale(1.12); }
.rail .cre { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.rail .cre:hover { transform: translateY(-4px); border-color: rgba(255,0,37,.45); }

/* ---------- Comparison table on phones ----------
   Four columns with 16px cell padding and no-wrap metric labels needed 382px;
   a phone gives the table about 330. Cells tighten, the trade-name chip stacks
   above its label, and the numbers step down a size. */
@media (max-width: 520px) {
  .cut-compare thead th { padding: 10px 5px; letter-spacing: .04em; }
  .cut-compare tbody th,
  .cut-compare tbody td { padding: 11px 5px; }
  .cut-compare tbody th { font-size: 12.5px; white-space: normal; }
  .cc-metric { flex-direction: column; align-items: center; gap: 4px; }
  .cc-term { margin-inline-start: 0; }
  .cc-before { font-size: 14px; }
  .cc-after { font-size: 15px; }
  .cut-compare tbody tr.is-key .cc-after { font-size: 17px; }
  .cc-delta { min-width: 0; padding: 4px 7px; font-size: 11.5px; }
  .cc-title { padding: 14px 12px 12px; }
}