/* Framed pictures for the Real and Virtual recruitment pages. */
.inner-page .scene-illustration{position:relative;margin:0;min-width:0;overflow:hidden;border:1px solid #d1b67c66;background:#0b2825;box-shadow:5px 6px 0 #00161144}
.inner-page .scene-illustration>img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .55s ease,filter .55s ease;filter:saturate(.94)}
.inner-page .scene-illustration::after{content:'';position:absolute;inset:6px;border:1px solid #e8ca8f42;pointer-events:none}

/* Shared by both recruitment pages. */
#faq .faq-mark { margin-inline-end: .6em; color: var(--ni-gold); font-weight: 700; }
.inner-page:is([data-page=real], [data-page=v]) #flow { padding-block: clamp(36px, 4.5vw, 68px); }
.inner-page:is([data-page=real], [data-page=v]) #flow .section-heading { margin-bottom: 22px; }
.debut-flow {
  --flow-wire: #c7ae74;
  max-width: 1040px;
  margin-inline: auto;
}
.debut-flow ol { list-style: none; margin: 0; padding: 0; }
.flow-trunk {
  display: grid;
  gap: 19px;
  max-width: 640px;
  margin-inline: auto !important;
}
.flow-trunk li, .flow-track li {
  position: relative;
  border: 1px solid var(--ni-line);
  background: #143930;
  padding: 9px 14px;
}
.flow-trunk li {
  display: grid;
  grid-template-columns: minmax(9em, .8fr) 1.7fr;
  align-items: center;
  gap: 4px 14px;
}
.flow-trunk strong { color: var(--ni-cream); }
.flow-trunk span { font-size: 13px; line-height: 1.6; }
.flow-trunk li::after, .flow-track li:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--flow-wire);
  clip-path: polygon(42% 0,58% 0,58% 61%,100% 61%,50% 100%,0 61%,42% 61%);
}
#flow .flow-fork {
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 4px 12px;
  color: var(--ni-gold);
  text-align: center;
  font-size: 14px;
}
.flow-paths {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  padding-top: 26px;
}
.flow-paths::before, .flow-paths::after, .flow-path::before {
  content: '';
  position: absolute;
  background: var(--flow-wire);
}
.flow-paths::before { top: 0; left: 50%; width: 1px; height: 13px; }
.flow-paths::after { top: 12px; left: calc(25% - 5px); right: calc(25% - 5px); height: 1px; }
.flow-path::before { left: 50%; bottom: 100%; width: 1px; height: 15px; }
.flow-path {
  --route-ink: var(--ni-cyan);
  position: relative;
  min-width: 0;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--ni-line);
  border-top: 2px solid var(--route-ink);
  background: #0c2b29;
}
.flow-path + .flow-path { --route-ink: var(--ni-gold); }
#flow .flow-label { font: 700 13px/1.5 Barlow,sans-serif; letter-spacing: .12em; color: var(--route-ink); }
#flow .flow-path h4 { margin: 4px 0 7px; color: var(--ni-cream); font-size: clamp(18px, 2vw, 23px); line-height: 1.5; }
#flow .flow-path p { font-size: 14px; line-height: 1.7; }
#flow .flow-duration { margin: 12px 0; color: var(--ni-cream); }
.flow-duration strong { color: var(--route-ink); font-size: 22px; white-space: nowrap; }
.flow-track { display: grid; gap: 19px; text-align: center; }
.flow-track li { color: var(--ni-cream); font-size: 14px; font-weight: 700; }
.flow-track li:last-child { background: var(--route-ink); color: #102e28; }
#flow .flow-early, #flow .flow-timing-note { margin-top: 12px; font-size: 13px; }
.debut-flow.real-flow {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(18px, 4vw, 60px);
}
.real-flow .flow-trunk { width: 100%; max-width: none; }
.real-flow-intro { border-top: 2px solid var(--chapter-accent); padding-top: 12px; }
.real-flow-intro > p { line-height: 1.8; }
#flow .real-flow-duration { margin-bottom: 8px; color: var(--ni-cream); font-weight: 700; }
.real-flow-duration strong { margin-inline: .2em; font-size: clamp(24px, 3vw, 36px); color: var(--chapter-accent); white-space: nowrap; }
.real-flow-intro a { display: inline-block; margin-top: 10px; }
.real-flow .real-flow-start { background: var(--chapter-accent); }
.real-flow-start :is(strong, span) { color: #102e28; }
.real-flow-start::after { display: none; }
@media (max-width: 840px) {
  .debut-flow.real-flow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .flow-trunk li { grid-template-columns: 1fr; gap: 0; }
  #flow .flow-fork { margin-inline: 0; padding-left: 0; text-align: left; }
  .flow-paths { grid-template-columns: minmax(0, 1fr); padding: 10px 0 0 16px; gap: 12px; }
  .flow-paths::before, .flow-paths::after { display: none; }
  .flow-path::before { top: 21px; bottom: auto; left: -16px; width: 16px; height: 1px; }
  .flow-path::after { content: ''; position: absolute; left: -16px; top: -14px; bottom: -14px; width: 1px; background: var(--flow-wire); }
  .flow-path:last-child::after { height: 36px; bottom: auto; }
}

#topics .topics-invite { margin-top: clamp(20px, 3vw, 36px); }
#topics .topics-invite strong {
  color: var(--ni-cream);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.5;
}
#topics .topics-invite .button { margin-top: 12px; }

.inner-page #styles { padding-block: clamp(30px, 3.5vw, 52px); }
#styles .section-heading { margin-bottom: 16px; }
#styles .section-heading > .eyebrow { margin-bottom: 0; }
#styles .section-heading h2 { margin-block: 8px 0; line-height: 1.35; }
#styles .detail-grid { margin-top: 0; gap: 12px; }
.inner-page #styles .option-card { padding: 15px clamp(15px, 1.6vw, 22px); }
.inner-page #styles .option-card > .eyebrow { margin: 0 0 6px; padding-bottom: 3px; }
#styles .option-card h3 { margin: 0 0 4px; }
#styles .option-card p { margin-block: 0; line-height: 1.75; }
#styles .option-card p + p { margin-top: 4px; }
#styles .option-card .feature-list { margin: 8px 0 0; }
#styles .option-card .feature-list > li { padding-block: 4px; line-height: 1.65; }
#styles .wrap > .note { margin-top: 12px; }
@media (min-width: 1100px) {
  #styles .detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #styles .section-heading br { display: none; }
}

.inner-page #joining { padding-block: clamp(36px, 4vw, 64px); }
#joining .section-heading { margin-bottom: 20px; }
#joining .section-heading .eyebrow { margin-bottom: 0; }
#joining .section-heading h2 { margin: 12px 0 0; font-size: clamp(27px, 3.3vw, 46px); }
.join-styles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.join-styles article {
  padding: clamp(16px, 2vw, 24px);
  background: linear-gradient(140deg, #173e35, #0d2c2b);
  border: 1px solid var(--ni-line);
  border-top: 2px solid var(--chapter-accent);
  box-shadow: 3px 4px 0 #061b1d;
}
.join-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  color: var(--chapter-accent);
  font-size: 11px;
  font-weight: 700;
}
.join-styles article:nth-child(n+3) { border-top-color: var(--ni-gold); }
.join-styles article:nth-child(n+3) .join-tag { color: var(--ni-gold); }
#joining .join-styles h3 {
  margin: 0 0 6px;
  color: var(--ni-cream);
  font-size: 20px;
}
#joining p:not(.eyebrow) { font-size: 14px; line-height: 1.85; }
#joining .join-condition { margin-top: 10px; color: var(--ni-muted); font-size: 13px; }
#joining .join-interview { margin-top: 15px; color: var(--ni-cream); }
@media (max-width: 1099px) {
  .join-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .join-styles { grid-template-columns: minmax(0, 1fr); }
}

.inner-page #production-support {
  padding-block: clamp(32px, 4vw, 60px);
}
#production-support .section-heading { margin-bottom: 20px; }
#production-support .section-heading .eyebrow { margin-bottom: 0; }
#production-support .section-heading h2 {
  margin: 10px 0 0;
  font-size: clamp(25px, 3vw, 43px);
  line-height: 1.4;
}
.production-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 16px clamp(16px, 3vw, 46px);
}
#production-support .production-rules h3 { margin: 0 0 8px; font-size: 20px; }
#production-support .production-rules p,
#production-support .production-terms dd { font-size: 14px; line-height: 1.85; }
.production-rules strong { color: var(--ni-gold); }
#production-support .production-courses {
  margin: 14px 0;
  padding-inline: 14px;
  border: 1px solid var(--ni-line);
  background: #102f2c;
}
.production-courses div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  padding-block: 9px;
}
.production-courses div + div { border-top: 1px solid var(--ni-line); }
#production-support .production-courses :is(dt, dd) { margin: 0; font-size: 13px; }
#production-support .production-courses dd { color: var(--ni-cream); font-weight: 700; }
#production-support .settlement-figure { min-width: 0; margin: 0; padding: clamp(14px, 2vw, 24px); }
#production-support .settlement-figure h3 { margin: 0; font-size: 21px; }
#production-support .settlement-bars { height: clamp(90px, 8vw, 120px); margin: 30px 4px 24px; }
#production-support .settlement-control { margin-top: 10px; padding-top: 9px; }
#production-support .settlement-control label { margin-bottom: 0; }
#production-support .settlement-control input { display: block; height: 32px; margin: 0; }
#production-support .settlement-control output { margin: 2px 0; line-height: 1.55; font-size: 16px; }
#production-support .chart-caption { margin-top: 6px !important; }
#production-support .production-terms {
  display: grid;
  gap: 9px;
  margin: 0;
}
.production-overview .settlement-figure { grid-column: 2; grid-row: 1 / span 2; }
.production-terms div { border-top: 1px solid var(--ni-line); padding-top: 10px; }
#production-support .production-terms dt { margin: 0; color: var(--ni-cream); font-size: 15px; }
#production-support .production-terms dd { margin: 4px 0 0; color: var(--ni-copy); }
@media (max-width: 850px) {
  .production-overview { grid-template-columns: minmax(0, 1fr); }
  .production-overview .settlement-figure { grid-column: auto; grid-row: auto; }
}
.inner-page #debut {padding-block:clamp(38px,4.4vw,68px)}
#debut .section-heading {margin-bottom:clamp(20px,2.2vw,32px)}
#debut .section-heading .eyebrow {margin-bottom:0}
#debut .section-heading h2 {margin:12px 0 0;font-size:clamp(27px,3.3vw,47px);line-height:1.35}
#debut .section-heading h2 span {display:inline-block}
.debut-board {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.debut-card {
  --sign-ink:#9ef2db;display:flex;flex-direction:column;position:relative;min-width:0;
  padding:0 clamp(14px,1.3vw,21px) 12px;border:1px solid #b0c3a952;
  background:linear-gradient(165deg,#15362f,#0b2727 65%);box-shadow:0 3px 0 #03171677;
  scroll-margin-top:calc(var(--night-header-offset,0px) + 84px)
}
.debut-card[data-sign=stepup]{--sign-ink:#f4ce82}
.debut-card[data-sign=vr]{--sign-ink:#c8b7f2}
.debut-card[data-sign=redebut]{--sign-ink:#ffb49f}
.debut-card .debut-sign {
  display:block;height:clamp(78px,7.4vw,109px);width:calc(100% + 2 * clamp(14px,1.3vw,21px));max-width:none;
  margin-inline:calc(-1 * clamp(14px,1.3vw,21px));object-fit:contain;
  background:#081f20;border-bottom:1px solid #adc9ac2e
}
.debut-name {min-width:0;margin-top:13px}
.debut-name span {display:block;color:var(--sign-ink);font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.06em}
#debut .debut-name h3 {font-size:clamp(17px,1.45vw,22px);line-height:1.45;letter-spacing:0;margin:4px 0 0;color:var(--ni-cream);text-wrap:balance}
#debut .debut-intro {font-size:13px;line-height:1.75;color:#dae4d8;margin:9px 0 13px}
#debut .debut-terms {margin:auto 0 0}
.debut-terms div {display:grid;grid-template-columns:max-content 1fr;align-items:baseline;gap:5px;border-top:1px solid #d4e3c12b;padding:7px 0}
#debut .debut-terms :is(dt,dd) {margin:0;line-height:1.5}
#debut .debut-terms dt {font-size:11px;color:#bad0c1}
#debut .debut-terms dd {font-size:13px;font-weight:700;text-align:right;color:var(--ni-cream)}
#debut .debut-footnote {max-width:none;margin:14px 0 0;color:#c8d7cc;font-size:13px;line-height:1.85}
#debut .debut-footnote a {color:#a4efe1;font-weight:700;display:inline-block;text-decoration:underline;text-underline-offset:3px}
#debut .debut-footnote a:focus-visible {outline:2px solid currentColor;outline-offset:3px}
@media(max-width:1099px){
  .debut-board {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .debut-board {grid-template-columns:minmax(0,1fr);gap:10px}
  .debut-card {display:grid;grid-template-columns:clamp(68px,21vw,98px) minmax(0,1fr);align-items:center;gap:0 10px;padding:10px 13px 6px}
  .debut-card .debut-sign {width:100%;height:60px;margin:0;border:0;background:none}
  .debut-name {margin:0}
  #debut .debut-intro {grid-column:1/-1;margin:6px 0 8px}
  #debut .debut-terms {grid-column:1/-1}
  .debut-terms div {padding:5px 0}
}
@media print{
  #debut .debut-card {background:white;border-color:#888;box-shadow:none;break-inside:avoid}
  #debut :is(.debut-name span,.debut-name h3,.debut-intro,.debut-terms dt,.debut-terms dd,.debut-footnote,.debut-footnote a) {color:#111}
}
.inner-page .voice-scene-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,70px);align-items:center;margin-bottom:42px}
.inner-page #voice .voice-illustration{transform:rotate(-1deg);margin:6px}
.inner-page #voice .voice-scene-layout>.prose{padding-left:25px;border-left:1px solid #d2b87b66;min-width:0}
.inner-page #voice .voice-scene-layout>.prose p{font-size:16px;line-height:2.2;color:#e5e8d5}
.opportunity-with-photo {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.opportunity-with-photo .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#beyond-the-screen { scroll-margin-top: calc(var(--night-header-offset, 0px) + 92px); }
.opportunity-with-photo figcaption { padding: 9px 14px 12px; color: var(--ni-copy); font-size: 12px; }
.inner-page .dream-illustrated{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(25px,4vw,50px);align-items:center;padding-top:34px}
.inner-page .dream-illustrated .dream-copy{min-width:0}
.inner-page .dream-illustrated .dream-illustration{margin:5px}
.inner-page .dream-illustrated .dream-copy h4{font-size:22px;line-height:1.6}

/* A few wide crops add rhythm among the numbered suitability posters. */
.inner-page .story-cards .story-illustrated{min-width:0}
.inner-page .story-cards .story-illustration{margin:-5px -5px 24px;box-shadow:4px 5px 0 #00161155}
.inner-page .story-cards .story-illustration>img{aspect-ratio:16/7;object-position:center 36%}
.inner-page .story-cards .story-illustration>img[src$="real-talk.webp"]{object-position:center top}
.inner-page .story-cards .story-illustration>img[src$="virtual.webp"]{object-position:center 28%}
.inner-page :is(.option-card,.story-cards article):is(:hover,:focus-within,.is-touch-active,.is-scroll-active) .scene-illustration>img{transform:scale(1.035);filter:saturate(1.06)}

@media(max-width:850px){
  .opportunity-with-photo { grid-template-columns: minmax(0, 1fr); }
  .opportunity-with-photo .scene-illustration { width: min(100%, 620px); }
  .inner-page .voice-scene-layout{grid-template-columns:1fr;gap:31px}
  .inner-page #voice .voice-illustration{max-width:650px}
  .inner-page #voice .voice-scene-layout>.prose{padding-left:23px}
  .inner-page .dream-illustrated{grid-template-columns:1fr;gap:30px}
  .inner-page .dream-illustrated .dream-illustration{width:min(100% - 10px,620px)}
}
@media(max-width:600px){
  .opportunity-with-photo .opportunity-grid { grid-template-columns: minmax(0, 1fr); }
  .inner-page .scene-illustration::after{inset:5px}
  .inner-page #voice .voice-scene-layout>.prose p{font-size:14px;line-height:2.15}
  .inner-page .voice-scene-layout{margin-bottom:31px}
  .inner-page .dream-illustrated{padding-top:27px;gap:23px}
  .inner-page .dream-illustrated .dream-copy h4{font-size:20px}
  .inner-page .story-cards .story-illustration{margin:-4px -4px 22px}
}
html:is(.motion-paused,.motion-reduced) .inner-page .scene-illustration>img{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.inner-page .scene-illustration>img{transform:none!important;transition:none!important}}
@media print{
  .inner-page .scene-illustration{box-shadow:none;break-inside:avoid}
  .inner-page .scene-illustration>img{transform:none!important;filter:none}
  .inner-page .voice-scene-layout,.inner-page .dream-illustrated{display:block}
  .inner-page .voice-illustration,.inner-page .dream-illustration{max-width:380px;margin-bottom:24px}
}