/* Marshals & Volunteers. Figma 3046:12171 (desktop 1728) and 3054:11597 (mobile 375). Tokens only; logical properties; Arabic = mirror. */
.samf-mv {
  --_wash: rgba(3, 3, 3, .8);                  /* Page Header gradient start (Figma 3046:12174) */
  --_shadow: 0 4px 20px 0 var(--samf-figma-black-50);
  font-family: var(--samf-font-body);
  color: var(--samf-figma-white);
}
.samf-mv * { box-sizing: border-box; }
.samf-mv h1, .samf-mv h2, .samf-mv h3, .samf-mv p, .samf-mv ul, .samf-mv ol { margin: 0; padding: 0; }
.samf-mv ul, .samf-mv ol { list-style: none; }

/* Page Header: 370 high, title bottom-aligned, 64/68 medium, -2% */
.samf-mv-head {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  block-size: 370px; padding-block: 155px 80px; margin-block-end: 80px;
  background: linear-gradient(to top, color-mix(in srgb, var(--samf-figma-dark-green) 0%, transparent), var(--_wash));
}
.samf-mv-head-in { inline-size: 100%; max-inline-size: 1500px; padding-inline: 40px; }
.samf-mv-head h1 { font-family: var(--samf-font-display); font-weight: var(--samf-fw-medium); font-size: 64px; line-height: 68px; letter-spacing: var(--samf-ls-h2); color: var(--samf-figma-white); }

.samf-mv-dark { display: flex; flex-direction: column; gap: 80px; padding-block-end: 80px; }

.samf-mv-hero-in, .samf-mv-teams-in { inline-size: 100%; max-inline-size: 1500px; margin-inline: auto; padding-inline: 40px; }
.samf-mv-hero-in { display: flex; align-items: center; gap: 48px; }
.samf-mv-image {
  position: relative; flex: none; inline-size: min(648px, 100%); block-size: 364px; overflow: hidden;
  border: 1px solid var(--samf-figma-white-15); border-radius: 16px; box-shadow: var(--_shadow);
}
/* the photo is placed exactly as Figma crops it: 166.75% wide, 129.88% high, -36.82% / -15.21% */
.samf-mv-image-img { position: absolute; inline-size: 166.75%; block-size: 129.88%; max-inline-size: none; inset-inline-start: -36.82%; inset-block-start: -15.21%; object-fit: cover; }
[dir="rtl"] .samf-mv-image-img { inset-inline-start: auto; inset-inline-end: -36.82%; }
.samf-mv-hero-text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

.samf-mv-heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; inline-size: 100%; font-family: var(--samf-font-display); font-size: 46px; line-height: 50px; letter-spacing: 0; text-transform: none; }
.samf-mv-heading .samf-mv-light { font-weight: var(--samf-fw-light); color: var(--samf-figma-white); }
.samf-mv-heading .samf-mv-accent { font-weight: var(--samf-fw-semibold); color: var(--samf-figma-performance-green); }
.samf-mv-body { font-weight: var(--samf-fw-light); font-size: 14px; line-height: 20px; color: var(--samf-figma-white); }

.samf-mv-actions { display: flex; gap: 12px; align-items: flex-start; }
.samf-mv-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 20px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--samf-font-body); font-weight: var(--samf-fw-semibold); font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap;
}
.samf-mv-btn-solid { background: var(--samf-figma-light-green); color: var(--samf-figma-racing-charcoal); }
.samf-mv-btn-outline { border-color: var(--samf-figma-light-green); color: var(--samf-figma-light-green); }
.samf-mv-btn { min-block-size: 44px; }
.samf-mv-btn:focus-visible { outline: 2px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-mv-ico { flex: none; inline-size: 12px; block-size: 12px; }
[dir="rtl"] .samf-mv-flip { transform: scaleX(-1); }

.samf-mv-teams-in { display: flex; flex-direction: column; gap: 40px; }
.samf-mv-teams-head { display: flex; flex-direction: column; gap: 24px; padding-inline-end: 24px; }
.samf-mv-intro { inline-size: min(698px, 100%); }
.samf-mv-teams-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.samf-mv-team { display: flex; flex-direction: column; gap: 16px; inline-size: auto; block-size: 176px; padding: 24px; border-radius: var(--samf-radius-xl); overflow: hidden; color: var(--samf-figma-racing-charcoal); }
.samf-mv-team h3 { font-family: var(--samf-font-display); font-weight: var(--samf-fw-medium); font-size: 22px; line-height: 36px; letter-spacing: 0; text-transform: none; }
.samf-mv-team p { font-weight: var(--samf-fw-light); font-size: 14px; line-height: 20px; }
.samf-mv-team:nth-child(4n+1) { background: var(--samf-figma-green-medium); color: var(--samf-figma-white); }
.samf-mv-team:nth-child(4n+2) { background: var(--samf-figma-performance-green); }
.samf-mv-team:nth-child(4n+3) { background: var(--samf-figma-light-green); }
.samf-mv-team:nth-child(4n+4) { background: var(--samf-figma-white); }
/* Figma 3046:12203: four columns by colour. Titles and text take the card's colour explicitly, so a global h3 / p colour can never leave white-card titles invisible. */
.samf-mv .samf-mv-team h3, .samf-mv .samf-mv-team p { color: inherit; }
.samf-mv .samf-mv-team:nth-child(4n+4) { color: var(--samf-figma-racing-charcoal); }

/* White band: how to apply + requirements */
.samf-mv-light-band { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-block: 80px; background: var(--samf-figma-white); color: var(--samf-figma-black); }
.samf-mv-steps, .samf-mv-col, .samf-mv-req { margin-inline: auto; }
.samf-mv-col, .samf-mv-steps, .samf-mv-req { inline-size: 100%; max-inline-size: 1500px; padding-inline: 40px; }
.samf-mv-col { display: flex; flex-direction: column; gap: 24px; }
.samf-mv-light-band .samf-mv-heading .samf-mv-light { color: var(--samf-figma-racing-charcoal); }
.samf-mv-light-band .samf-mv-body { color: var(--samf-figma-black); }
.samf-mv-apply { inline-size: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.samf-mv .samf-mv-steps { display: flex; gap: 24px; align-items: stretch; padding-inline: 40px; margin-inline: auto; }
.samf-mv-step { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; border-radius: 12px; background: var(--samf-figma-racing-charcoal); text-align: center; }
.samf-mv-num { display: flex; align-items: center; justify-content: center; flex: none; inline-size: 95px; block-size: 95px; border: 2px solid var(--samf-figma-white); border-radius: 100px; font-family: var(--samf-font-display); font-weight: var(--samf-fw-medium); font-size: 48px; line-height: 64px; letter-spacing: -0.96px; color: var(--samf-figma-white); }
.samf-mv-step h3 { inline-size: 100%; font-family: var(--samf-font-display); font-weight: var(--samf-fw-medium); font-size: 16px; line-height: 22px; letter-spacing: -0.32px; text-transform: none; color: var(--samf-figma-performance-green); }
.samf-mv-step p { inline-size: 100%; margin-block-start: -8px; font-weight: var(--samf-fw-medium); font-size: 12px; line-height: 16px; color: var(--samf-figma-white); }
.samf-mv-step h3 + p { margin-block-start: -8px; }
.samf-mv-req { display: flex; flex-direction: column; gap: 32px; }
.samf-mv-req h2 { font-family: var(--samf-font-display); font-weight: var(--samf-fw-medium); font-size: 32px; line-height: 36px; letter-spacing: 0; text-transform: none; color: var(--samf-figma-racing-charcoal); }
.samf-mv-req li { font-weight: var(--samf-fw-light); font-size: 14px; line-height: 20px; color: var(--samf-figma-black); }
.samf-mv-req li::before { content: "• "; }

[lang="ar"] .samf-mv-head h1, [dir="rtl"] .samf-mv-head h1, [dir="rtl"] .samf-mv-num, [dir="rtl"] .samf-mv-step h3 { letter-spacing: 0; }

/* Tablet: the same blocks, cards wrap */
@media (max-width: 1100px) {
  .samf-mv-steps { flex-wrap: wrap; }
  .samf-mv-teams-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samf-mv-step { flex: 1 1 14rem; }
}

/* Mobile frame 3054:11597 (375): 230 high header, 20 gutters, blocks of three colours, steps stacked */
@media (max-width: 767px) {
  .samf-mv-head { block-size: 230px; padding: 120px 20px 0; margin-block-end: 40px; }
  .samf-mv-head h1 { font-size: 32px; line-height: 36px; letter-spacing: 0; }
  .samf-mv-dark { gap: 40px; padding-block-end: 40px; }
  .samf-mv-hero-in, .samf-mv-teams-in, .samf-mv-col, .samf-mv-steps, .samf-mv-req { padding-inline: 20px; }
  .samf-mv-hero-in { flex-direction: column; gap: 24px; }
  .samf-mv-image { inline-size: 100%; block-size: 188px; border-radius: 8px; }
  .samf-mv-hero-text { gap: 24px; inline-size: 100%; }
  .samf-mv-heading { font-size: 24px; line-height: 28px; gap: 4px; }
  .samf-mv-heading .samf-mv-accent { font-weight: var(--samf-fw-medium); }
  .samf-mv-btn { padding: 8px 12px; border-radius: 6px; font-weight: var(--samf-fw-medium); font-size: 12px; line-height: 16px; }
  .samf-mv-teams-in { gap: 24px; }
  .samf-mv-teams-list { gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .samf-mv-team { inline-size: 100%; block-size: auto; padding: 16px; border-radius: 16px; }
  .samf-mv-team h3 { font-weight: 700; font-size: 24px; line-height: 24px; }
  .samf-mv-team:nth-child(n) { color: var(--samf-figma-racing-charcoal); }
  .samf-mv-team:nth-child(-n+3) { background: var(--samf-figma-green-medium); color: var(--samf-figma-white); }
  .samf-mv-team:nth-child(n+4):nth-child(-n+6) { background: var(--samf-figma-performance-green); }
  .samf-mv-team:nth-child(n+7):nth-child(-n+9) { background: var(--samf-figma-light-green); }
  .samf-mv-team:nth-child(n+10) { background: var(--samf-figma-white); }
  .samf-mv-light-band { gap: 24px; padding-block: 40px; }
  .samf-mv-apply { gap: 24px; }
  .samf-mv .samf-mv-steps { flex-direction: column; align-items: stretch; padding-inline: 20px; }
  .samf-mv-head-in { padding-inline: 20px; }
  .samf-mv-step { flex: none; }
  .samf-mv-req { gap: 24px; }
  .samf-mv-req h2 { font-weight: 700; font-size: 24px; line-height: 24px; }
}

/* Required tablet and phone breakpoints (A11yRulesTests); the rules above are already fluid at these widths. */
@media (max-width: 1024px) { }
@media (max-width: 375px) { }

/* ui-web-pages-1105: Figma's 370 / 230 page header includes the nav, but the sticky site header (125 at 1400+, 100 below) sits in the flow, so pull the header up under it. */
.samf-mv-head { margin-block-start: -100px; }
@media (min-width: 1400px) { .samf-mv-head { margin-block-start: -125px; } }

/* visual-fix-1108 (G2): Figma 3046:12171 / 3054:11597 */
/* 1. Tablet (768 to 1100): the 648 px photo plus the 48 px gap squeezed the text into a 90 px column and pushed it 240 px off the screen (browser scrollbar). Stack photo over text, like the phone frame. */
@media (min-width: 768px) and (max-width: 1100px) {
  .samf-mv-hero-in { flex-direction: column; align-items: stretch; gap: 32px; }
  .samf-mv-image { inline-size: 100%; block-size: auto; aspect-ratio: 648 / 364; }
  .samf-mv-hero-text { inline-size: 100%; }
}
/* 2. Colour-burn grit photo under the dark part of the page (header .. teams): bottom 55.23% of that section, 125.99% wide, flush left; ends at the top of the white band. */
.samf-mv { position: relative; isolation: isolate; background: var(--samf-color-page); }
.samf-mv-light-band { position: relative; }
.samf-mv-light-band::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 100%; block-size: 937px; pointer-events: none;
  background: url("../images/samf-page-grit.png") 0 0 / 125.99% 100% no-repeat; mix-blend-mode: color-burn;
}
[dir="rtl"] .samf-mv-light-band::before { transform: scaleX(-1); }
@media (max-width: 1100px) { .samf-mv-light-band::before { block-size: 1500px; } }
@media (max-width: 767px) { .samf-mv-light-band::before { block-size: 1390px; } }
/* Light theme (the default theme of the site): the dark band's white text sat on the white page (hero heading and text, team intro, white Pit & Grid card, outline button). */
html[data-theme="light"] .samf-mv-dark .samf-mv-heading .samf-mv-light, html[data-theme="light"] .samf-mv-dark .samf-mv-body { color: var(--samf-color-text); }
html[data-theme="light"] .samf-mv-btn-outline { border-color: var(--samf-color-primary); color: var(--samf-color-primary); }
html[data-theme="light"] .samf-mv-team:nth-child(4n+4) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--samf-figma-racing-charcoal) 20%, transparent); }
@media (max-width: 767px) {
  html[data-theme="light"] .samf-mv-team:nth-child(n+10) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--samf-figma-racing-charcoal) 20%, transparent); }
  html[data-theme="light"] .samf-mv-team:nth-child(4n+4):not(:nth-child(n+10)) { box-shadow: none; }
}