/* 289: full-width copy of 153 (prefix c-bsd). First the copied rules of 77, then the full-width overrides at the end. */
/* Story band - Figma frame "Container" 1:2159 (1920 x 783.8), page bg #031926 (requested), white diagonal wedges top/bottom.
   Desktop (>=1280px) scales with --u = viewport/1920 so every number below is the Figma px. Below 1280 the layout stacks. */
.c-bsd { --u: calc(min(100vw, 1920px) / 1920); background: #031926; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; color: #fff; overflow-x: clip; isolation: isolate; }
.c-bsd :where(h2, p) { margin: 0; padding: 0; }
.c-bsd img { display: block; max-width: none; }

.c-bsd__section { position: relative; background: #031926; padding: calc(clamp(40px, 11.25vw, 216px) + 36px) 20px calc(clamp(44px, 12.08vw, 232px) + 34px); }

/* white diagonal wedges (SVG, stretched to the width; bottom one is the same shape flipped vertically) */
.c-bsd__wedge { position: absolute; left: 0; width: 100%; height: clamp(40px, 11.25vw, 216px); pointer-events: none; }
.c-bsd__wedge--top { top: -1px; transform: scaleX(-1); }
.c-bsd__wedge--bottom { bottom: -1px; height: clamp(44px, 12.08vw, 232px); transform: scale(-1, -1); }

.c-bsd__row { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.c-bsd__text { width: min(960px, 100%); }
.c-bsd__title { text-align: right; }
.c-bsd__title span { display: block; }
.c-bsd__title-1 { font-size: 30px; font-weight: 300; line-height: 1.3; color: #fff; }
.c-bsd__title-2 { font-size: 32px; font-weight: 900; line-height: 1.3; color: transparent; background-image: linear-gradient(90deg, #fff, #7d7d7d); -webkit-background-clip: text; background-clip: text; }
.c-bsd__body { margin-top: 18px; }
.c-bsd__body p { margin-bottom: 18px; font-size: 18px; font-weight: 400; line-height: 1.65; text-align: right; color: #fff; }
.c-bsd__br { display: none; }
.c-bsd__visual { position: relative; width: min(420px, 90%); }
.c-bsd__portrait { width: 100%; height: auto; }

@media (min-width: 1280px) {
  .c-bsd__section { padding: calc(200 * var(--u)) 0 calc(50 * var(--u)); }
  .c-bsd__wedge { height: calc(216 * var(--u)); }
  .c-bsd__wedge--bottom { height: calc(232 * var(--u)); }

  .c-bsd__row { flex-direction: row; direction: rtl; justify-content: center; align-items: center; gap: calc(20 * var(--u)); }
  .c-bsd__text { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); width: calc(1010 * var(--u)); padding: calc(10 * var(--u)); direction: rtl; }

  .c-bsd__title { display: block; width: 100%; height: calc(33.41 * var(--u) + 20 * var(--u) + 41.2 * var(--u) + 16 * var(--u)); position: relative; text-align: right; }
  .c-bsd__title-1, .c-bsd__title-2 { position: absolute; right: 0; white-space: nowrap; }
  .c-bsd__title-1 { top: calc(-6 * var(--u)); font-size: calc(50 * var(--u)); line-height: calc(42 * var(--u)); }
  .c-bsd__title-2 { top: calc(33.41 * var(--u) + 20 * var(--u) - 5 * var(--u)); font-size: calc(52 * var(--u)); line-height: calc(60 * var(--u)); }

  .c-bsd__body { width: calc(990 * var(--u)); max-width: 100%; margin-top: 0; padding-bottom: calc(140 * var(--u)); }
  .c-bsd__body p { margin-bottom: calc(22 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(34 * var(--u)); white-space: normal; }
  .c-bsd__body p:last-child { margin-bottom: calc(14.39 * var(--u)); }
  .c-bsd__br { display: none; }

  .c-bsd__visual { flex: none; width: calc(800 * var(--u)); height: calc(179.31 * var(--u)); }
  .c-bsd__portrait { position: absolute; top: calc(-385 * var(--u)); left: calc(32 * var(--u)); width: calc(800 * var(--u)); height: calc(795.31 * var(--u)); }
}

/* v2: floating rounded card instead of the diagonal wedges (design-expert 11.4 variation rule).
   Same idea (dark shape that frames the person, head breaks out above it) but a calm rounded container on a white page; the lower body dissolves into the card colour. */
.c-bsd { background: #fff; }
.c-bsd__section { background: #fff; padding: 36px 16px 44px; }
.c-bsd .c-bsd__wedge { display: none; }
.c-bsd__card { position: relative; width: min(1180px, 100%); margin: 0 auto; padding: 48px 20px 0; border-radius: 40px; background: radial-gradient(ellipse 60% 55% at 20% 90%, #0b3d5c 0%, rgba(11, 61, 92, 0) 70%), #031926; box-shadow: 0 30px 70px rgba(3, 25, 38, .28); }
.c-bsd__row { gap: 24px; }
.c-bsd__visual { margin-top: 0; }
.c-bsd__portrait { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, .35) 82%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, .35) 82%, transparent 96%); }
@media (min-width: 1280px) {
  .c-bsd__section { padding: calc(190 * var(--u)) 0 calc(90 * var(--u)); }
  .c-bsd__card { width: calc(1780 * var(--u)); padding: calc(96 * var(--u)) calc(90 * var(--u)) calc(70 * var(--u)); border-radius: calc(100 * var(--u)); }
  .c-bsd__row { justify-content: flex-start; align-items: flex-start; }
  .c-bsd__text { width: calc(860 * var(--u)); padding: 0; }
  .c-bsd__body { padding-bottom: 0; }
  .c-bsd__visual { position: absolute; left: calc(-60 * var(--u)); bottom: 0; width: calc(840 * var(--u)); height: auto; margin: 0; }
  .c-bsd__portrait { position: static; display: block; width: 100%; height: auto; }
}

/* copy 153: the person is much smaller and sits on the card's bottom-left, away from the text; the whole card is one colour so there is no triangle */
.c-bsd__visual { width: min(300px, 68%); }
@media (min-width: 1280px) {
  .c-bsd__visual { left: calc(20 * var(--u)); width: calc(580 * var(--u)); }
}

/* ---- full-width overrides (289): the card takes the whole page width with rounded corners (22.1), white strip above and below, height = content ---- */
.c-bsd { overflow: clip; }
.c-bsd .c-bsd__section { padding: 40px 0 48px; }
.c-bsd .c-bsd__card { width: 100%; padding: 52px 20px 0; border-radius: clamp(28px, 3vw, 48px); }
.c-bsd .c-bsd__title-1 { font-size: clamp(28px, 7vw, 32px); }
.c-bsd .c-bsd__title-2 { font-size: clamp(30px, 7.6vw, 36px); }
.c-bsd .c-bsd__body p { font-size: 18px; }
@media (min-width: 1280px) {
  .c-bsd .c-bsd__section { padding: 72px 0 80px; }
  .c-bsd .c-bsd__card { width: 100%; padding: 88px clamp(48px, 6.5vw, 130px) 76px; border-radius: clamp(36px, 3.2vw, 60px); }
  .c-bsd .c-bsd__row { position: static; justify-content: flex-start; align-items: flex-start; gap: 0; }
  .c-bsd .c-bsd__text { width: 58%; gap: 26px; padding: 0; }
  .c-bsd .c-bsd__title { height: auto; display: block; }
  .c-bsd .c-bsd__title-1, .c-bsd .c-bsd__title-2 { position: static; display: block; white-space: normal; }
  .c-bsd .c-bsd__title-1 { font-size: clamp(38px, 3vw, 58px); line-height: 1.25; }
  .c-bsd .c-bsd__title-2 { font-size: clamp(42px, 3.3vw, 64px); line-height: 1.25; }
  .c-bsd .c-bsd__body { width: 100%; max-width: none; padding-bottom: 0; }
  .c-bsd .c-bsd__body p { margin-bottom: 26px; font-size: clamp(20px, 1.4vw, 26px); line-height: 1.7; }
  .c-bsd .c-bsd__body p:last-child { margin-bottom: 0; }
  .c-bsd .c-bsd__visual { position: absolute; left: clamp(40px, 6.5vw, 150px); bottom: 0; width: clamp(430px, 34vw, 660px); height: auto; margin: 0; }
}