/* The atelier and the first project share one continuous, scroll-driven stage. */
.experience { position: relative; }
.experience-sticky { position: relative; }
.experience .hero { min-height: min(760px, 85svh); padding-block: 60px 40px; }
.hero-project { display: none; }
.experience-rail { display: none; }
.experience .atelier { position: relative; }
.scene-project-picker { display: flex; gap: 0; margin: 13px 28px 0 40px; border-block: 1px solid #cbd1c4; }
.scene-project-picker button { flex: 1; text-align: left; padding: 12px 10px; background: transparent; font-size: 10px; color: #65705f; }
.scene-project-picker button + button { border-left: 1px solid #cbd1c4; }
.scene-project-picker button span { font-size: 8px; margin-right: 8px; opacity: .7; }
.scene-project-picker button[aria-pressed="true"] { color: #234d40; background: #e4e9dc; }
.scene-project-picker button:hover { background: #e8ebe1; }
.experience .atelier-tools { margin-top: 4px; }
.case-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; padding: 29px 0; border-top: 1px solid #c5d0bc; }
.case-notes > div > span { font-size: 8px; letter-spacing: 1.1px; color: #627257; }
.case-notes h4 { font-size: 14px; font-weight: 550; letter-spacing: -.3px; margin: 11px 0 8px; }
.case-notes p { color: #5d6756; font-size: 11px; line-height: 1.9; max-width: 280px; }
.oweschen-note { display: flex; gap: 45px; justify-content: space-between; margin-top: 30px; padding-top: 24px; border-top: 1px solid #cdcdbf; align-items: flex-start; }
.oweschen-note .eyebrow { max-width: 245px; font-size: 8px; }
.oweschen-note p { max-width: 400px; color: #606756; font-size: 11px; line-height: 1.9; }
.working-method { display: grid; grid-template-columns: 1fr 2fr; gap: 45px; padding-top: 55px; }
.working-method > .eyebrow { font-size: 8px; padding-top: 20px; }
.working-method details { border-bottom: 1px solid #c6cebf; }
.working-method summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding-block: 17px; font-size: 15px; }
.working-method summary::-webkit-details-marker { display: none; }
.working-method summary > span:first-child { font-size: 9px; color: #6a765e; }
.working-method summary > span:last-child { margin-left: auto; font-size: 20px; }
.working-method details[open] summary > span:last-child { transform: rotate(45deg); }
.working-method details p { font-size: 12px; color: #5b6657; max-width: 460px; padding: 0 35px 20px; }
.project { scroll-margin-top: 30px; }
.project-copy > p { font-size: 13px; }
.case-notes p { font-size: 12px; }
.tags li { font-size: 9px; }
.services p { font-size: 13px; }
@media(min-width:680px) and (prefers-reduced-motion:no-preference) {
  .experience.is-cinematic { height: 220svh; }
  .is-cinematic .experience-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--paper); }
  .is-cinematic .hero { min-height: 0; height: 100svh; padding-top: 20px; padding-bottom: 100px; }
  .is-cinematic .hero-copy { opacity: var(--intro-opacity,1); transform: translateY(var(--intro-y,0px)); pointer-events: var(--intro-pointer,auto); }
  .is-cinematic .hero-project { display: block; position: absolute; left: 0; top: 50%; width: 43%; z-index: 2; transform: translateY(calc(-58% + var(--project-y,30px))); opacity: var(--project-opacity,0); pointer-events: var(--project-pointer,none); }
  .hero-project .eyebrow { margin-bottom: 30px; font-size: 8px; }
  .hero-project h2 { font-size: clamp(42px,4.5vw,65px); line-height: 1.12; letter-spacing: -2.7px; }
  .hero-project h2 em { color: var(--green); }
  .hero-project > p:not(.eyebrow) { max-width: 320px; font-size: 13px; color: var(--muted); margin-top: 25px; }
  .is-cinematic .atelier { width: 100%; max-width: none; z-index: 1; }
  .is-cinematic .atelier-stage { height: min(65svh,670px); aspect-ratio: auto; }
  .is-cinematic .atelier-tools,.is-cinematic .scene-project-picker,.is-cinematic .atelier figcaption { opacity: var(--intro-opacity,1); }
  .is-cinematic .experience-rail { display: flex; align-items: center; gap: 25px; position: absolute; bottom: 30px; left: 5.5%; width: 89%; border-top: 1px solid #ccd1c6; padding-top: 20px; }
  .rail-label { font-size: 8px; letter-spacing: 1.4px; }
  .rail-track { flex: 1; height: 1px; background: #d2d7ca; overflow: hidden; }
  .rail-track > span { display: block; height: 1px; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(var(--journey,0)); }
  .experience-rail button { background: transparent; color: #7b8375; font-size: 9px; padding: 5px 0; white-space: nowrap; }
  .experience-rail button[aria-pressed="true"] { color: #234e41; }
  .experience-rail button > span { margin-left: 8px; }
  .is-cinematic .atelier-project-link { opacity: var(--intro-opacity,1); }
}
@media(min-width:1450px) { .experience .hero h1 { font-size: 91px; } }
@media(max-width:899px) {
  .experience .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 35px; padding-bottom: 30px; }
  .experience .hero-copy { max-width: 100%; }
  .experience .hero h1 { font-size: clamp(48px,8.8vw,68px); }
  .experience .hero-description { font-size: 12px; }
  .experience .hero .eyebrow { margin-bottom: 23px; }
  .experience .atelier { margin-top: 10px; width: 112%; margin-inline: -6%; max-width: 690px; }
  .experience .atelier-stage { width: 100%; margin: 0; }
  .scene-project-picker { margin-inline: 8%; }
  .case-notes { grid-template-columns: 1fr; gap: 22px; }
  .case-notes p { max-width: none; }
  .case-notes > div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4px 20px; }
  .case-notes h4 { grid-column: 1; margin-top: 5px; }
  .case-notes p { grid-column: 2; grid-row: 1 / span 2; }
  .working-method { grid-template-columns: 1fr; gap: 15px; padding-top: 35px; }
  .oweschen-note { gap: 25px; }
}
@media(max-width:480px) {
  .project-copy > p { font-size: 12px; }
  .tags li { font-size: 8px; }
  .experience .hero h1 { font-size: clamp(45px,14vw,55px); }
  .experience .hero-description { margin-top: 20px; }
  .experience .hero .round-link { margin-top: 19px; }
  .experience .atelier { margin-top: 0; }
  .scene-project-picker button { font-size: 9px; padding: 11px 8px; }
  .scene-project-picker button span { font-size: 7px; }
  .case-notes > div { grid-template-columns: 1fr; }
  .case-notes p { grid-column: 1; grid-row: auto; font-size: 11px; }
  .case-notes h4 { margin-bottom: 1px; }
  .oweschen-note { flex-direction: column; gap: 14px; }
  .working-method details p { font-size: 11px; padding-left: 30px; }
}
@media(min-width:680px) and (max-width:899px) and (prefers-reduced-motion:no-preference) {
  .experience.is-cinematic .hero { grid-template-columns: .95fr 1.05fr; padding-block: 20px 100px; }
  .experience.is-cinematic .hero h1 { font-size: clamp(39px,5.8vw,52px); letter-spacing: -2.5px; }
  .experience.is-cinematic .hero h1 em { letter-spacing: -2px; }
  .experience.is-cinematic .hero .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .experience.is-cinematic .hero-description { font-size: 11px; }
  .experience.is-cinematic .atelier { width: 112%; margin: 0; }
  .experience.is-cinematic .atelier-stage { width: 110%; margin-left: -5%; height: auto; aspect-ratio: 1.15; }
  .experience.is-cinematic .atelier-tools { gap: 5px; margin-left: 10px; margin-right: 0; flex-wrap: wrap; }
  .experience.is-cinematic .atelier-tools button { font-size: 8px; padding: 6px 7px; }
  .experience.is-cinematic .scene-project-picker { margin-inline: 10px 0; }
  .experience.is-cinematic .scene-project-picker button { font-size: 8px; }
  .experience.is-cinematic .atelier figcaption { margin-inline: 10px 0; font-size: 7px; }
  .experience.is-cinematic .hero-project h2 { font-size: 35px; letter-spacing: -1.5px; }
  .experience.is-cinematic .hero-project > p:not(.eyebrow) { font-size: 11px; max-width: 250px; }
  .experience.is-cinematic .hero-project .eyebrow { font-size: 6px; margin-bottom: 20px; }
  .rail-label { display: none; }
  .experience.is-cinematic .experience-rail { gap: 15px; }
}