/* Project 6 — kiosk-to-teller service handoff. Extends the shared Project 4 case-study system. */
.kiosk-case .bb-hero {
  min-height: 690px;
  background:
    linear-gradient(90deg, rgba(3,12,21,.98) 0%, rgba(3,15,27,.94) 44%, rgba(4,20,36,.62) 72%, rgba(4,20,36,.46) 100%),
    url("../images/project6/kiosk-teller-hero-v2-optimized.webp") center right / cover no-repeat;
}
.kiosk-case .bb-hero h1 span { color: #55a3ff; }

/* Explicit backgrounds keep the rhythm stable as sections are added or reordered. */
.kiosk-case #overview,
.kiosk-case #research,
.kiosk-case #solution,
.kiosk-case #teller { background: #fff; color: var(--bb-ink); }
.kiosk-case #challenge,
.kiosk-case #documents { background: var(--bb-navy); color: #fff; }
.kiosk-case #journey,
.kiosk-case #validation { background: var(--bb-paper); color: var(--bb-ink); }
.kiosk-case #impact { background: linear-gradient(135deg, #1976f3 0%, #0868df 100%); color: #fff; }

/* Reset position-based color rules inherited from Project 4. */
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) .bb-section-title,
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) .bb-subtitle,
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) h3,
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) strong { color: var(--bb-ink); }
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) p { color: #52606b; }
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) .bb-kicker,
.kiosk-case :is(#overview, #research, #journey, #solution, #teller, #validation) .bb-decision-label { color: var(--bb-blue-text); }

.kiosk-case #challenge .bb-divider,
.kiosk-case #documents .bb-divider { background: var(--bb-cyan); }
.kiosk-case #challenge .bb-section-title,
.kiosk-case #challenge .bb-card h3,
.kiosk-case #documents .bb-section-title,
.kiosk-case #documents .bb-decision-card h3,
.kiosk-case #documents .bb-decision-row strong { color: #fff; }
.kiosk-case #challenge .bb-intro,
.kiosk-case #challenge .bb-card p,
.kiosk-case #documents .bb-intro,
.kiosk-case #documents .bb-decision-card p { color: #b8c5cf; }
.kiosk-case #challenge .bb-card,
.kiosk-case #documents .bb-decision-card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.2); }
.kiosk-case #challenge .bb-decision-label,
.kiosk-case #documents .bb-decision-label { color: var(--bb-blue-on-dark); }

.kiosk-case .bb-leadership-summary { padding: 24px 28px; border-left: 3px solid var(--bb-blue); background: var(--bb-paper); }
.kiosk-case .bb-leadership-summary p { margin-bottom: 0; }

.persona-card { display: grid; grid-template-columns: 74px 1fr; gap: 22px; height: 100%; padding: 28px; border: 1px solid var(--bb-line); background: #fff; }
.persona-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--bb-blue), #0759b8); font-size: 1rem; font-weight: 800; letter-spacing: .08em; }
.persona-card h3 { margin: 7px 0 16px; color: var(--bb-ink); font-size: 1.16rem; font-weight: 700; }
.persona-card p { font-size: .9rem; line-height: 1.7; }
.persona-card .persona-goal { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--bb-line); }

.script-card { height: 100%; padding: 30px; border: 1px solid var(--bb-line); border-top: 4px solid #7b8790; background: #fff; }
.script-card.future { border-top-color: var(--bb-blue); }
.script-card h3 { margin: 10px 0 22px; color: var(--bb-ink); font-size: 1.18rem; font-weight: 700; }
.script-list { margin: 0; padding: 0; list-style: none; counter-reset: script; }
.script-list li { position: relative; margin-bottom: 16px; padding: 0 0 16px 34px; border-bottom: 1px solid #e4e9ed; color: #52606b; font-size: .91rem; line-height: 1.68; counter-increment: script; }
.script-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.script-list li::before { content: counter(script); position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #7b8790; font-size: .69rem; font-weight: 800; }
.future .script-list li::before { background: var(--bb-blue); }

.handoff-map { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid #d4dce2; background: #fff; }
.handoff-map div { position: relative; min-height: 130px; padding: 24px 20px; border-right: 1px solid #d4dce2; }
.handoff-map div:last-child { border-right: 0; }
.handoff-map div:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 49px; right: -11px; color: var(--bb-blue); background: #fff; font-size: 1.1rem; font-weight: 800; }
.handoff-map span { display: block; margin-bottom: 13px; color: var(--bb-blue); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.handoff-map strong, .handoff-map small { display: block; }
.handoff-map strong { color: var(--bb-ink); font-size: 1rem; }
.handoff-map small { margin-top: 7px; color: #65717b; font-size: .77rem; }

.screen-grid { display: grid; gap: 24px; }
.screen-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.screen-card { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d6dde2; background: #fff; box-shadow: 0 12px 30px rgba(16,25,36,.06); }
.screen-open { display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid #d6dde2; background: #eef3f6; cursor: zoom-in; }
.screen-open:focus-visible { outline: 3px solid #2b82ff; outline-offset: -3px; }
.screen-card .screen-open { aspect-ratio: 16 / 9; }
.screen-card .screen-open img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .28s ease; }
.screen-card:hover .screen-open img { transform: scale(1.015); }
.screen-card.phone-card .screen-open img { padding: 12px; }
.screen-card figcaption { flex: 1; padding: 20px 22px 22px; }
.screen-card figcaption span { display: block; margin-bottom: 8px; color: var(--bb-blue); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.screen-card figcaption strong { display: block; color: var(--bb-ink); font-size: 1rem; }
.screen-card figcaption p { margin: 9px 0 0; color: #5d6973; font-size: .84rem; line-height: 1.62; }

#documents .screen-card { border-color: rgba(255,255,255,.18); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
#documents .screen-card figcaption { background: #fff; }
#documents .screen-card figcaption strong { color: var(--bb-ink); }
#documents .screen-card figcaption p { color: #5d6973; }
#documents .screen-card figcaption span { color: var(--bb-blue-text); }

.feature-screen { margin: 0; overflow: hidden; border: 1px solid #d6dde2; background: #fff; box-shadow: 0 18px 42px rgba(16,25,36,.08); }
.feature-screen .screen-open { aspect-ratio: 16 / 8; }
.feature-screen .screen-open img { display: block; width: 100%; height: 100%; object-fit: contain; }
.feature-screen figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 24px; }
.feature-screen figcaption strong { color: var(--bb-ink); font-size: 1rem; }
.feature-screen figcaption span { color: #65717b; font-size: .84rem; }

.outcome-card { height: 100%; padding: 26px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.outcome-card strong { display: block; margin-bottom: 12px; color: #fff; font-size: 1.02rem; }
.outcome-card p { margin: 0; color: #e0efff !important; font-size: .9rem; line-height: 1.7; }
.kiosk-case #impact .bb-divider { background: #fff; }
.kiosk-case #impact .bb-kicker,
.kiosk-case #impact .bb-section-title,
.kiosk-case #impact .bb-subtitle { color: #fff; }
.kiosk-case #impact .bb-intro,
.kiosk-case #impact .bb-result-summary p { color: #e0efff; }
.kiosk-case #impact .bb-result-summary { border-color: rgba(255,255,255,.42); background: rgba(4,46,105,.24); }

.screen-lightbox { position: fixed; z-index: 9999; inset: 0; display: none; align-items: center; justify-content: center; padding: 52px 28px 28px; background: rgba(2,10,17,.94); }
.screen-lightbox.open { display: flex; }
.screen-lightbox img { max-width: 95vw; max-height: 88vh; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.lightbox-close { position: fixed; top: 14px; right: 22px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox-close:focus-visible { outline: 3px solid #55a3ff; }
body.lightbox-active { overflow: hidden; }

@media (max-width: 991.98px) {
  .kiosk-case .bb-hero { min-height: 620px; background-position: 58% center; }
  .handoff-map { grid-template-columns: repeat(2, 1fr); }
  .handoff-map div { border-bottom: 1px solid #d4dce2; }
  .handoff-map div:nth-child(2n) { border-right: 0; }
  .handoff-map div::after { display: none; }
  .screen-grid.three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .kiosk-case { padding-top: 72px; }
  .kiosk-case .bb-hero { min-height: 670px; background-position: 47% center; }
  .kiosk-case .bb-hero::after { content: ""; position: absolute; inset: 0; background: rgba(2,11,19,.2); pointer-events: none; }
  .kiosk-case .bb-hero-inner { z-index: 1; }
  .screen-grid.two-up,
  .screen-grid.three-up { grid-template-columns: 1fr; }
  .handoff-map { grid-template-columns: 1fr; }
  .handoff-map div { min-height: 0; border-right: 0; }
  .persona-card { grid-template-columns: 1fr; }
  .feature-screen figcaption { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-card .screen-open img { transition: none; }
}

/* Revision 2: explicit surface colors override inherited positional rules. */
.bb-case.kiosk-case .bb-section { padding: 108px 0; }
.bb-case.kiosk-case .bb-section p { color: #343434 !important; font-size: 1rem !important; line-height: 1.7 !important; }
.bb-case.kiosk-case :is(#challenge,#documents) p { color: #c4ced6 !important; }
.bb-case.kiosk-case #documents .screen-card p { color: #343434 !important; }
.bb-case.kiosk-case #solution :is(h2,h3,strong) { color: #101924; }
.bb-case.kiosk-case #solution :is(.bb-kicker,.bb-decision-label,.bb-decision-row strong) { color: #0b63ce; }
.bb-case.kiosk-case #solution .bb-divider { background: #1976f3; }
.bb-case.kiosk-case #solution :is(.bb-decision-card,.screen-card) { background: #fff; }
.bb-case.kiosk-case #impact { background: #f4f6f7; color: #101924; }
.bb-case.kiosk-case #impact :is(.bb-section-title,.bb-subtitle,h3,strong) { color: #101924; }
.bb-case.kiosk-case #impact .bb-kicker { color: #0b63ce; }
.bb-case.kiosk-case #impact .bb-divider { background: #1976f3; }
.bb-case.kiosk-case #impact :is(.outcome-card,.bb-result-summary) { background: #fff; border-color: #d6dde2; }
.bb-case.kiosk-case #impact .bb-result-summary { border-left-color: #0b63ce; margin-top: 24px !important; }
.bb-case.kiosk-case .bb-card,.bb-case.kiosk-case .bb-decision-card { margin-bottom: 0; min-height: 0; }
.bb-case.kiosk-case .bb-decision-card h3 { min-height: 0; }
.bb-case.kiosk-case .bb-finding { margin: 0; }
.bb-case.kiosk-case #teller .feature-screen { max-width: 660px; margin-left: auto; margin-right: auto; }
.bb-case.kiosk-case #teller .feature-screen .screen-open { aspect-ratio: auto; height: 280px; }
.bb-case.kiosk-case #teller .feature-screen figcaption { display: block; }
.bb-case.kiosk-case #teller .feature-screen figcaption span { display: block; margin-top: 8px; }
.bb-case.kiosk-case #teller .screen-grid { max-width: 900px; margin-left: auto; margin-right: auto; }
.bb-case.kiosk-case #teller .screen-card .screen-open { aspect-ratio: auto; height: 210px; }
.bb-case.kiosk-case .persona-card { display: block; padding: 0; overflow: hidden; }
.bb-case.kiosk-case .persona-card > .screen-open { height: 220px; }
.bb-case.kiosk-case .persona-card > .screen-open img { width: 100%; height: 100%; object-fit: contain; }
.bb-case.kiosk-case .persona-card > div { padding: 24px; }
.bb-case.kiosk-case .story-image { aspect-ratio: 3 / 2; margin-bottom: 24px; background: #fff; }
.bb-case.kiosk-case .story-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bb-case.kiosk-case .signature-moment { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 24px; align-items: center; padding: 24px; margin: 24px 0; border: 1px solid #d6dde2; border-left: 4px solid #1976f3; background: #fff; }
.bb-case.kiosk-case .signature-moment figure { margin: 0; }
.bb-case.kiosk-case .signature-moment img { display: block; height: 140px; width: 100%; object-fit: contain; }
.bb-case.kiosk-case .signature-moment figcaption { padding: 10px 12px; font-size: .75rem; color: #343434; }
.bb-case.kiosk-case .signature-moment p { margin-bottom: 0; }
.service-table { overflow-x: auto; margin-top: 24px; }
.service-table table { width: 100%; border-collapse: collapse; background: white; }
.service-table caption { caption-side: top; color: #101924; font-weight: 700; }
.service-table th,.service-table td { padding: 18px; border: 1px solid #d6dde2; vertical-align: top; font-size: .9rem; line-height: 1.6; color: #343434; }
.service-table thead { background: #edf3f8; }
.kiosk-case .users-section { margin-top: 48px; scroll-margin-top: 150px; }
.bb-case.kiosk-case .persona-card.goal-card > .screen-open { height: 165px; }
.kiosk-case .goal-card h4 { color: #101924; font-size: 1rem; font-weight: 700; margin-top: 20px; }
.kiosk-case .goal-list { padding-left: 22px; margin-bottom: 0; color: #343434; line-height: 1.7; }
.kiosk-case .goal-list li + li { margin-top: 8px; }
.kiosk-case .bb-section-tabs .container { overflow-x: auto; flex-wrap: nowrap; }
@media(max-width:991.98px){ .bb-case.kiosk-case .bb-section { padding: 78px 0; } }
@media(max-width:767.98px){
 .bb-case.kiosk-case .bb-section { padding: 62px 0; }
 .bb-case.kiosk-case .signature-moment { grid-template-columns: 1fr; padding: 22px; }
 .bb-case.kiosk-case .signature-moment figure { width: 100%; max-width: 280px; }
 .bb-case.kiosk-case .script-card { padding: 22px; }
 .bb-case.kiosk-case .bb-hero { min-height: auto; padding: 50px 0; }
 .bb-case.kiosk-case #teller .feature-screen .screen-open { height: 230px; }
 .service-table table { min-width: 600px; }
}

/* Match Projects 4/5 section rhythm at every breakpoint. */
.bb-case.kiosk-case { padding-top: var(--header-space, 80px); }
.bb-case.kiosk-case > .bb-section { padding: 108px 0; margin: 0; }
.bb-case.kiosk-case > .bb-section > .container { padding-top: 0; padding-bottom: 0; }
.bb-case.kiosk-case > .bb-section > .container > :first-child { margin-top: 0; }
.bb-case.kiosk-case > .bb-section > .container > :last-child { margin-bottom: 0; }
.bb-case.kiosk-case .bb-hero {
 min-height: 690px; padding: 0;
 background: linear-gradient(90deg, rgba(3,12,21,.97) 0%, rgba(3,15,27,.91) 42%, rgba(4,20,36,.76) 72%, rgba(4,20,36,.62) 100%), url('../images/project6/kiosk-teller-hero-v2-optimized.webp') center right / cover no-repeat;
}
.bb-case.kiosk-case .bb-hero::after { content: none; }
@media (max-width: 991.98px) {
 .bb-case.kiosk-case > .bb-section { padding: 78px 0; }
 .bb-case.kiosk-case .bb-hero { min-height: auto; }
 .bb-case.kiosk-case .bb-hero-inner { padding-top: 32px; padding-bottom: 40px; }
}
@media (max-width: 767.98px) {
 .bb-case.kiosk-case > .bb-section { padding: 62px 0; }
 .bb-case.kiosk-case .bb-hero { background: linear-gradient(rgba(3,12,21,.94), rgba(4,20,36,.86)), url('../images/project6/kiosk-teller-hero-v2-optimized.webp') center / cover no-repeat; }
}