/* nOps case study, part 2: the letterboxed compliance scene, the credits-roll
   results and responsive rules for the whole page. Tokens live in case-nops.css. */

/* ---------- compliance: a letterboxed film frame with a subtitle ---------- */
.no-scene { position: relative; display: flex; flex-direction: column; padding: clamp(72px, 8vw, 128px) 0 clamp(80px, 8vw, 128px); background: #000; }
.no-scene__copy { order: -1; margin-bottom: clamp(32px, 4vw, 56px); }
.no-scene__bars { position: relative; padding: clamp(28px, 4vw, 56px) 0; background: #000; }
.no-scene__bars::before, .no-scene__bars::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); height: 1px; background: linear-gradient(90deg, transparent, rgb(58 141 255 / 50%), transparent); }
.no-scene__bars::before { top: 0; }
.no-scene__bars::after { bottom: 0; }
.no-scene__frame { max-width: 1254px; margin: 0 auto; overflow: hidden; border-radius: 24px; }
.no-scene__frame img { display: block; width: 100%; height: auto; }
.no-scene__copy { display: grid; justify-items: center; gap: 16px; margin-top: 0; padding-inline: var(--gutter); text-align: center; }
.no-scene__copy .cs-kicker { margin: 0; }
.no-scene__copy .cs-h2 { max-width: 820px; }
.no-scene__sub { max-width: 680px; margin: 0; padding: 0; font-size: 17px; line-height: 1.6; color: #fdf7d8; }

/* ---------- results: end credits ---------- */
.no-credits { background: linear-gradient(180deg, #000, var(--no-mid) 30%, var(--no-navy)); text-align: center; }
.no-credits__head { display: grid; justify-items: center; gap: 16px; }
.no-credits__head .cs-kicker { margin: 0; }
.no-credits__lead { margin: 0; font-size: 17px; color: var(--no-text); }
.no-roll { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: clamp(48px, 5vw, 80px) auto 0; }
.no-roll > div { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; min-height: 200px; padding: clamp(24px, 2.4vw, 32px); border: 1px solid rgb(120 170 255 / 16%); border-radius: 22px; background: linear-gradient(160deg, rgb(40 90 200 / 16%), rgb(10 20 50 / 40%) 60%); text-align: left; transition: border-color .3s, transform .3s; }
.no-roll > div:nth-child(n+4) { grid-column: span 3; }
.no-roll > div:hover { border-color: rgb(80 220 240 / 45%); transform: translateY(-4px); }
.no-roll dt { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--no-cyan); }
.no-roll dd { margin: auto 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; letter-spacing: -.01em; color: #f2f6ff; text-wrap: pretty; }
.no-roll__end { margin: clamp(56px, 6vw, 96px) 0 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: rgb(220 232 255 / 45%); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .no-hero__top { grid-template-columns: 1fr; }
  .no-hero__side { max-width: 720px; }
  .no-curve__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .no-notes li { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 900px) {
  .no-brief__grid { grid-template-columns: 1fr; }
  .no-brief__shot { max-width: 560px; }
  .no-curve__grid { grid-template-columns: 1fr; gap: 32px; }
  .no-chart { top: 72px; z-index: 2; }
  .no-chart__frame { padding: 14px 16px 12px; border-radius: 18px; background: rgb(7 14 34 / 94%); backdrop-filter: blur(10px); }
  .no-chart__title { margin-bottom: 6px; font-size: 11px; }
  .no-chart__axis { font-size: 10.5px; letter-spacing: 0; }
  .no-chart__now { margin-top: 8px; padding-top: 8px; font-size: 17px; }
  .no-notes li { display: none; }
  .no-notes li.is-now { display: block; }
  .no-steps { padding-bottom: 0; }
}
@media (max-width: 720px) {
  .no-hero { padding-top: 116px; }
  .no-hero__meta { gap: 16px 18px; }
  .no-chart__frame { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; }
  .no-chart__title, .no-chart__axis, .no-notes { display: none; }
  .no-chart__now { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.25; }
  .no-chart__now::before { content: 'Now'; display: block; margin-bottom: 4px; font-size: 11px; }
  .no-chapters a { padding: 8px 14px 8px 8px; font-size: 13.5px; }
  .no-step { gap: 20px; }
  .no-step__shot { border-radius: 18px; }
  .no-step__copy { padding-left: 16px; }
  .no-scene__sub { font-size: 15.5px; }
  .no-roll { grid-template-columns: 1fr; gap: 12px; }
  .no-roll > div, .no-roll > div:nth-child(n+4) { grid-column: auto; min-height: 0; }
  .no-roll dd { margin-top: 0; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .no-notes li, .no-chart__pins circle, .no-step__copy { transition: none; }
}

@media (min-width: 721px) and (max-width: 1000px) { .no-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); } .no-roll > div, .no-roll > div:nth-child(n+4) { grid-column: auto; } .no-roll > div:last-child { grid-column: 1 / -1; } }

/* results: tabbed panel */
.no-tabs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-width: 1200px; margin: clamp(48px, 5vw, 80px) auto 0; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(120 170 255 / 18%); background: rgb(8 18 46 / 70%); text-align: left; }
.no-tabs__list { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-right: 1px solid rgb(120 170 255 / 14%); }
.no-tabs__list button { padding: 18px 20px; border: 0; border-radius: 14px; background: none; font: 500 17px/1.3 var(--font, Poppins), sans-serif; color: rgb(220 232 255 / 60%); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.no-tabs__list button:hover { color: #fff; }
.no-tabs__list button:focus-visible { outline: 2px solid var(--no-cyan); outline-offset: -2px; }
.no-tabs__list button[aria-selected="true"] { background: rgb(40 110 255 / 22%); color: #fff; }
.no-tabs__panel { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 380px; padding: clamp(32px, 4vw, 64px); background: radial-gradient(80% 90% at 100% 0%, rgb(30 90 255 / 28%), transparent 70%); }
.no-tabs__k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--no-cyan); }
.no-tabs__d { margin: 0; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.3; letter-spacing: -.02em; color: #f2f6ff; text-wrap: pretty; }
@media (max-width: 1000px) {
  .no-tabs { grid-template-columns: 1fr; }
  .no-tabs__list { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid rgb(120 170 255 / 14%); }
  .no-tabs__list button { padding: 12px 16px; font-size: 15px; }
  .no-tabs__panel { min-height: 220px; }
}

/* 100px between every section (50px each side) */
#main > section:not(.no-hero) { padding-top: 50px !important; padding-bottom: 50px !important; }
#main > section.no-hero { padding-bottom: 50px !important; }
@media (max-width: 720px) { #main > section:not(.no-hero) { padding-top: 32px !important; padding-bottom: 32px !important; } #main > section.no-hero { padding-bottom: 32px !important; } }