/* Last Light: homepage, shared sections, and scroll-driven motion. */
:root { --ink: #253447; --muted: #66707b; --paper: #f5f3ee; --line: #25344729; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
.last-light-page { color: var(--ink); background: var(--paper); }
button, summary { cursor: pointer; }
a { text-underline-offset: 5px; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 18px; background: var(--paper); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.page-shell { width: calc(100% - 176px); max-width: 1320px; margin-inline: auto; }
.section-pad { padding-block: 120px; }
.last-light-page h2 { font: 400 clamp(44px, 4.7vw, 72px)/1.08 var(--display); letter-spacing: -.06em; }
.last-light-page h2 em { font-family: var(--serif); font-size: 1.17em; font-weight: 400; font-style: italic; letter-spacing: -.035em; }
.last-light-page h3 { font: 400 27px/1.25 var(--display); letter-spacing: -.035em; margin: 0; }
.last-light-page p { text-wrap: pretty; }
.section-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 110px; align-items: end; margin-bottom: 65px; }
.section-intro > p { max-width: 400px; line-height: 1.85; color: var(--muted); }
.text-link { display: inline-flex; gap: 30px; align-items: center; font-size: 14px; text-decoration: underline; }
.example-note { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* The selected hero, with an independent scroll-parallax layer under its drift. */
.page-hero { overflow: hidden; }
.page-hero .cinema-scene { min-height: 900px; }
.hero-landscape { position: absolute; z-index: -3; inset: 0; }
.hero-landscape .cinema-photo { z-index: auto; transform-origin: 50% 75%; }
.page-hero .study-nav nav a { padding-block: 12px; font-size: 13px; }
.page-hero .cinema-copy { position: relative; }
.page-hero .learning-title { font-size: clamp(64px, 7vw, 108px); }
.page-hero .cinema-bottom .hero-training { margin-top: 14px; font-size: 13px; }
.page-hero .cinema-cta { margin-top: 27px; }
.page-hero .cinema-discover { flex: 0 0 auto; }

/* The work is introduced as a spare editorial list, not a grid of feature tiles. */
.work-section { background: var(--paper); position: relative; }
.work-list { border-top: 1px solid var(--line); }
.work-list details { border-bottom: 1px solid var(--line); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.work-list summary { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 28px; padding: 28px 0; }
.work-list summary > span:first-child { font: 400 clamp(22px, 2.1vw, 31px)/1.2 var(--display); letter-spacing: -.04em; }
.expand-mark { font-size: 27px; font-weight: 400; line-height: 1; }
details[open] .expand-mark, .questions-list details[open] summary > span { transform: rotate(45deg); }
.work-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding: 10px 65px 40px 0; }
.work-detail > p { font: italic 400 29px/1.45 var(--serif); max-width: 470px; color: #647285; }
.work-detail h3 { font-size: 20px; }
.work-detail div > p { font-size: 15px; color: var(--muted); margin-top: 12px; line-height: 1.8; max-width: 460px; }
.work-detail a { display: inline-block; margin-top: 20px; font-size: 13px; text-decoration: underline; }
.work-section .example-note { margin-top: 22px; }

/* A sticky introduction accompanies a continuous, scroll-linked handoff. */
.handoff-section { background: #e9e9e5; }
.handoff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; }
.sticky-copy { position: sticky; top: 100px; }
.sticky-copy > p { color: var(--muted); line-height: 1.85; margin-top: 28px; max-width: 380px; }
.story-track { width: 160px; height: 2px; background: #25344724; margin-top: 40px; overflow: hidden; }
.story-track span { display: block; width: 100%; height: 100%; background: #8b7264; transform-origin: left; }
.sticky-copy > .example-note { margin-top: 16px; font-size: 12px; }
.story-step { padding-bottom: 100px; }
.story-step:last-child { padding-bottom: 0; }
.story-step h3 { margin-bottom: 16px; }
.story-step .reveal-inner > p { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 450px; }
.request-message { display: flex; gap: 22px; padding: 32px 0; margin-top: 26px; border-block: 1px solid var(--line); }
.request-message > img { flex: none; margin-top: 7px; }
blockquote { margin: 0; font: italic 400 27px/1.4 var(--serif); }
.source-list { margin-top: 30px; border-top: 1px solid var(--line); }
.source-list > div { display: flex; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.source-list img { flex: none; }
.source-list span:last-child { margin-left: auto; }
.brief-paper { margin-top: 32px; padding: 36px; background: #fcfbf6; box-shadow: 0 20px 60px #2434470d; transform-origin: center; }
.brief-title { display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.brief-title h4 { font: 400 24px/1.3 var(--display); letter-spacing: -.04em; margin: 0; }
.brief-title img { flex: none; }
.brief-paper > p { margin-top: 25px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.brief-paper dl { margin: 24px 0 0; font-size: 13px; }
.brief-paper dl > div { border-top: 1px solid var(--line); padding: 15px 0; display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.brief-paper dt { font-weight: 500; }
.brief-paper dd { margin: 0; color: var(--muted); }
.brief-paper > .brief-sources { margin-top: 12px; font-size: 11px; }

.team-section { position: relative; overflow: hidden; background: #17263a; color: #f2f0e7; padding-block: 130px 150px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: center; }
.team-grid h2 { font-size: clamp(44px, 4.4vw, 67px); }
.team-grid .reveal-inner > p { color: #b4bdc9; max-width: 380px; line-height: 1.85; margin-top: 34px; }
.conversation-line { display: grid; grid-template-columns: 65px 1fr; gap: 25px; padding: 26px 0; border-bottom: 1px solid #ffffff21; }
.conversation-line:first-child { padding-top: 0; }
.conversation-line p { font-size: 15px; line-height: 1.8; color: #d4d9df; }
.speaker { font-size: 13px; padding-top: 3px; color: #a6b1bf; }
.nine-reply p { color: #f3f0e7; }
.conversation .example-note { margin-top: 20px; color: #9eabbc; }
.team-horizon { position: absolute; height: 1px; left: 0; right: 0; bottom: 55px; background: linear-gradient(90deg, transparent, #dab9959c 35%, #cbaea5b0 65%, transparent); transform-origin: center; }

.connections-section { padding-bottom: 90px; }
.tool-line { display: grid; grid-template-columns: repeat(6, 1fr); padding-block: 45px; border-block: 1px solid var(--line); }
.tool-line > div { display: flex; gap: 15px; flex-direction: column; align-items: center; font-size: 14px; }
.tool-line > div + div { border-left: 1px solid var(--line); }
.tool-line img { object-fit: contain; }
.connection-bottom { display: flex; justify-content: space-between; gap: 40px; margin-top: 24px; }
.connection-bottom p { max-width: 500px; font-size: 13px; color: var(--muted); }
.connection-bottom a { flex: none; }

.methods-section { background: #e8e1db; }
.methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
.methods-section .sticky-copy { top: 80px; }
.sticky-copy > .training-line { color: var(--ink); font-size: 14px; padding-top: 24px; margin-top: 30px; border-top: 1px solid var(--line); }
.method-steps { position: relative; padding-left: 40px; }
.method-steps::before, .method-steps::after { content: ''; position: absolute; left: 0; top: 5px; bottom: 50px; width: 1px; background: #25344729; }
.method-steps::after { background: #8b6857; transform-origin: top; }
.method-steps article { padding-bottom: 60px; }
.method-steps article h3 { font-size: 30px; }
.method-steps article p { margin-top: 18px; color: #616772; line-height: 1.85; max-width: 430px; }

.questions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
.questions-list { border-top: 1px solid var(--line); }
.questions-list details { border-bottom: 1px solid var(--line); }
.questions-list summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 24px; font-size: 17px; line-height: 1.5; }
.questions-list summary span { font-size: 25px; flex: none; }
.questions-list details p { padding: 0 35px 25px 0; color: var(--muted); font-size: 15px; line-height: 1.85; }

.closing-section { min-height: 710px; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; text-align: center; color: #f5f2e9; background: #182539; }
.closing-landscape { position: absolute; z-index: -2; inset: -100px 0; }
.closing-landscape img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; filter: saturate(.6) brightness(.75); }
.closing-section::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(#111d3333, #111d3366); }
.closing-copy { padding: 90px 24px; }
.closing-copy h2 { font-size: clamp(60px, 7.5vw, 110px); }
.closing-copy > p { margin-top: 35px; color: #d4d8dd; }
.closing-actions { display: flex; justify-content: center; align-items: center; gap: 32px; margin-top: 32px; }
.closing-actions .cinema-cta { margin: 0; }
.page-footer { background: #101c2c; color: #e1e4e6; padding-block: 50px 38px; }
.page-footer .page-shell { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 35px; }
.page-footer nav { display: flex; flex-wrap: wrap; gap: 30px; font-size: 13px; }
.page-footer p { border-top: 1px solid #ffffff20; padding-top: 28px; width: 100%; font-size: 12px; color: #9ba7b8; }
.page-footer p a { text-decoration: underline; }

/* Scroll transforms are progressive enhancement; all content is visible by default. */
[data-motion="on"] [data-reveal] .reveal-inner { transform: translateY(calc((1 - var(--reveal, 1)) * 42px)); }
[data-motion="on"] .hero-landscape { transform: translateY(var(--hero-pan, 0px)); }
[data-motion="on"] .brief-paper { transform: translateY(calc((1 - var(--reveal, 1)) * 55px)) rotate(calc((1 - var(--reveal, 1)) * -3deg)); }
[data-motion="on"] .story-track span { transform: scaleX(var(--story, 1)); }
[data-motion="on"] .method-steps::after { transform: scaleY(var(--story, 1)); }
[data-motion="on"] .team-horizon { transform: scaleX(calc(.3 + var(--reveal, 1) * .7)); }
[data-motion="on"] .tool-line > div { transform: translateY(calc((1 - var(--reveal, 1)) * var(--travel, 35px))); }
.tool-line > div:nth-child(2n) { --travel: 65px; }
[data-motion="on"] .closing-landscape { transform: translateY(var(--landscape-pan, 0px)); }

@media (max-width: 1100px) {
  .page-shell { width: calc(100% - 104px); }
  .section-intro, .handoff-grid, .team-grid, .methods-grid, .questions-grid { gap: 60px; }
  .work-list summary { gap: 20px; }
  .work-detail { gap: 45px; padding-right: 30px; }
  .brief-paper { padding: 26px; }
  .brief-paper dl > div { grid-template-columns: 1fr; gap: 5px; }
  .tool-line > div { font-size: 12px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 20px; }
  .page-shell { width: calc(100% - 48px); }
  .section-pad { padding-block: 76px; }
  .last-light-page h2 { font-size: clamp(39px, 9vw, 58px); }
  .page-hero .cinema-scene { min-height: 844px; }
  .page-hero .cinema-copy { padding-bottom: 58px; }
  .page-hero .learning-title { font-size: clamp(38px, 8vw, 60px); }
  .page-hero .nav-cta { margin-left: auto; }
  .page-hero .cinema-discover { max-width: 250px; }
  .section-intro, .handoff-grid, .team-grid, .methods-grid, .questions-grid { grid-template-columns: 1fr; gap: 35px; }
  .section-intro { margin-bottom: 38px; }
  .section-intro > p { max-width: 500px; font-size: 15px; }
  .work-list summary { grid-template-columns: 1fr 22px; gap: 16px; padding-block: 25px; }
  .work-list summary > span:first-child { font-size: 25px; }
  .work-detail { grid-template-columns: 1fr; gap: 24px; padding: 0 0 30px; }
  .work-detail > p { font-size: 26px; }
  .sticky-copy { position: static; }
  .sticky-copy > p { max-width: 500px; font-size: 15px; }
  .handoff-grid { gap: 60px; }
  .story-step { padding-bottom: 65px; }
  .request-message { gap: 18px; }
  blockquote { font-size: 25px; }
  .source-list > div { font-size: 13px; gap: 15px; }
  .brief-paper { padding: 24px; }
  .brief-title h4 { font-size: 22px; }
  .team-grid { gap: 45px; }
  .team-grid .reveal-inner > p { max-width: 500px; font-size: 15px; }
  .conversation-line { grid-template-columns: 53px 1fr; gap: 17px; }
  .conversation-line p { font-size: 14px; }
  .team-horizon { bottom: 30px; }
  .tool-line { grid-template-columns: repeat(3, 1fr); gap: 35px 0; padding-block: 30px; }
  .tool-line > div:nth-child(4) { border-left: 0; }
  .tool-line img { width: 30px; height: 30px; }
  .connection-bottom { flex-direction: column; gap: 22px; }
  .method-steps { padding-left: 26px; }
  .method-steps article { padding-bottom: 40px; }
  .method-steps article h3 { font-size: 26px; }
  .method-steps article p { font-size: 15px; }
  .methods-grid { gap: 45px; }
  .questions-list summary { font-size: 16px; }
  .closing-section { min-height: 600px; }
  .closing-copy h2 { font-size: clamp(55px, 12vw, 80px); }
  .closing-copy > p { font-size: 15px; max-width: 270px; margin-inline: auto; }
  .closing-actions { flex-direction: column; gap: 26px; }
  .page-footer nav { gap: 18px 24px; }
  .page-footer { padding-bottom: 75px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-motion="off"] { scroll-behavior: auto; }