/* Work page, after the password: the case studies.
   Built from the site's existing pieces (DESIGN-NOTES): rounded picture tiles with the caption underneath for the overview,
   then one chapter per case on a flat surface, so the change of color is the divider. No hairlines anywhere.
   No grey text. Nothing fixed or sticky (iPhone bars). One headline scale. */

/* Intro: the same hero box as every other page. Measured against Philosophy and Services: headline 250px from the top
   at 1440 wide and 168px on a phone, 64px (32px on phones) under the hero, then a full chapter gap. No eyebrow above the headline. */
.work-page .work-content { padding-top: clamp(5rem, 11vw, 10rem); }
.work-page .work-content__intro { padding-bottom: clamp(2rem, 5vw, 4rem); }
.work-page .work-content .work-content__intro h1 { font-size: clamp(3.4rem, 6vw, 6rem); line-height: .88; letter-spacing: -.025em; }
.work-page .work-content__intro > p:last-child { max-width: 38rem; margin: 1.6rem 0 0; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 720px) { .work-page .work-content { padding-top: 5rem; } .work-page .work-content .work-content__intro h1 { font-size: clamp(3.4rem, 15vw, 6rem); letter-spacing: -.035em; } }

/* Overview: one rounded picture tile per case, caption underneath (same pattern as the step tiles and the team row) */
.case-tiles { padding-block: var(--chapter-y, clamp(5rem, 11vw, 9rem)); }
.case-tiles ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .9rem; }
.case-tiles a { display: block; color: var(--ink); text-decoration: none; }
.case-tile__img { margin: 0 0 .8rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.1rem; background: #e8e3d4; }
.case-tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.case-tiles a:hover img, .case-tiles a:focus-visible img { transform: scale(1.04); }
.case-tile__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: baseline; }
.case-tile__n { font: 700 .85rem/1 "DM Sans", sans-serif; letter-spacing: .12em; color: var(--orange-text, #b8360f); }
.case-tile__name { font: 700 clamp(1.5rem, 6.4vw, 1.9rem)/.95 "Barlow Condensed", sans-serif; letter-spacing: -.02em; text-transform: uppercase; transition: color .2s ease; }
.case-tile__p { display: none; }
.case-tiles a:hover .case-tile__name, .case-tiles a:focus-visible .case-tile__name { color: var(--orange-text, #b8360f); }
.case-tiles a:focus-visible { outline: 2px solid var(--orange); outline-offset: .3rem; border-radius: 1.1rem; }

/* The overview tiles resolve from a barely soft first frame, once. The class stays on
   after IntersectionObserver fires, so scrolling farther—or back up—never blurs them again. */
.case-tiles.is-focus-ready li {
  filter: blur(1.8px);
  opacity: .94;
  transition: filter .52s cubic-bezier(.22, .8, .3, 1), opacity .42s ease;
  transition-delay: var(--tile-delay, 0ms);
  will-change: filter, opacity;
}
.case-tiles.is-focus-ready li.is-sharp { filter: none; opacity: 1; will-change: auto; }
@media (min-width: 721px) {
  .case-tiles ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 1.6vw, 1.5rem); }
  .case-tile__name { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
  .case-tile__p { display: block; grid-column: 2; margin-top: .35rem; font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; }
}
@media (min-width: 1200px) { .case-tiles ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .case-tiles.is-focus-ready li { filter: none; opacity: 1; transition: none; }
}

/* One chapter per case. Black and sand take turns, so no line is needed between them. */
.case { padding-block: var(--chapter-y, clamp(5rem, 11vw, 9rem)); scroll-margin-top: 0; }
.case--ink { background: var(--ink); color: var(--cream); --accent: var(--orange); --figure: #1b1b19; }
.case--sand { background: #e8e3d4; color: var(--ink); --accent: var(--ink); --figure: #d9d4c5; }

/* Name: the chapter headline size used across the site (8vw, 15vw on phones) */
.work-page .cases .case__n { margin: 0 0 1.25rem; font: 700 .85rem/1.2 "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: inherit; }
.work-page .cases .case__n span { margin-left: .9rem; }
.work-page .cases .case__name { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(3.4rem, 8vw, 8.5rem); line-height: .86; letter-spacing: -.025em; color: var(--accent); text-wrap: balance; }
@media (max-width: 720px) { .work-page .cases .case__name { font-size: min(15vw, 5rem); letter-spacing: -.035em; overflow-wrap: normal; } }
/* When, where, what: one quiet line under the name, same slash style as the rest of the site */
.work-page .cases .case__meta { margin: 1.4rem 0 0; font: 700 .85rem/1.5 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.work-page .cases .case__meta span { margin-inline: .5em; }

/* Problem on the left, the work and the result on the right (the Philosophy split) */
.case__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: clamp(2.5rem, 6vw, 5rem); }
.work-page .cases .case__kicker { margin: 0 0 .9rem; font: 700 .85rem/1.2 "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: inherit; }
.case__problem p { margin: 0; max-width: 34rem; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: clamp(1.35rem, 5.6vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; }
.case__story p { margin: 0 0 1em; max-width: 34rem; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.3; letter-spacing: -.01em; }
.work-page .cases .case__story .case__kicker:not(:first-child) { margin-top: 2rem; }
/* The four moves: an orange number, then the move's name. Same order on every case; Sustain only where it happened. */
.work-page .cases .case__kicker span { margin-right: .8em; color: var(--step, var(--orange)); }
.work-page .case--sand { --step: var(--orange-text, #b8360f); }
.case__story .case__result { margin-bottom: 0; font-weight: 700; }
@media (min-width: 900px) {
  .case__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .case__problem p { font-size: clamp(1.6rem, 2.1vw, 2rem); }
}

/* Numbers: big, with the label underneath. Space does the separating. */
.case__stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(1.25rem, 4vw, 4rem); margin: clamp(3rem, 7vw, 6rem) 0 0; }
.case__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .7rem; min-width: 0; }
.case__stat dd { margin: 0; font: 700 clamp(3rem, 13vw, 4rem)/.85 "Barlow Condensed", sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: var(--orange); }
.case__stat dt { font: 700 .85rem/1.3 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.case__stats--1 { grid-template-columns: minmax(0, 1fr); }
.case__stat dt { max-width: 17rem; }
.case__story .case__stats--inline { margin-top: 2.75rem; max-width: 34rem; gap: 1.5rem; }
.case__story .case__stats--inline .case__stat dd { font-size: clamp(3rem, 12vw, 4rem); }
@media (min-width: 900px) {
  .case__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case__stats--1, .case__stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
  .case__stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case__stat dd { font-size: clamp(3.5rem, 6vw, 6rem); }
  .case__story .case__stats--inline { gap: clamp(1.5rem, 3vw, 3rem); }
  .case__story .case__stats--inline .case__stat dd { font-size: clamp(3.5rem, 4.25vw, 4.75rem); }
}

/* Pictures. Desktop: one large rounded frame and five small ones. Phones: one row you swipe, like the team row. */
.case__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1vw, 1rem); margin-top: clamp(3rem, 7vw, 6rem); }
.case__gallery figure { margin: 0; min-width: 0; overflow: hidden; border-radius: 1.1rem; background: var(--figure); aspect-ratio: 16 / 9; }
.case__gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case__gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.case__gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case__gallery--4 figure:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }
@media (max-width: 720px) {
  .case__gallery, .case__gallery--4 { display: flex; gap: .75rem; margin-inline: calc(50% - 50vw); padding-inline: calc((100vw - var(--shell)) / 2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100vw - var(--shell)) / 2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .case__gallery::-webkit-scrollbar { display: none; }
  .case__gallery figure, .case__gallery figure:first-child, .case__gallery--4 figure:first-child { flex: 0 0 84%; aspect-ratio: 16 / 9; scroll-snap-align: start; }
  .case__gallery figure.case__film { order: -1; } /* films first in the swipe row */
}

/* Films: the picture is the poster, one tap plays the film in place. Without JavaScript the link opens the film on Vimeo. */
.case__film { position: relative; }
.case__play { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--cream); font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.case__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 13, 12, .78), rgba(13, 13, 12, 0) 55%); transition: opacity .3s ease; }
.case__play img { transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.case__play:hover img, .case__play:focus-visible img { transform: scale(1.03); }
.case__play-btn { position: absolute; z-index: 1; top: 50%; left: 50%; width: clamp(3.4rem, 6vw, 5.5rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); transform: translate(-50%, -50%); transition: background-color .2s ease, transform .25s ease; }
.case__play-btn svg { width: 46%; height: 46%; fill: currentColor; transform: translateX(6%); }
.case__play:hover .case__play-btn, .case__play:focus-visible .case__play-btn { background: var(--orange); transform: translate(-50%, -50%) scale(1.06); }
.case__play-label { position: absolute; z-index: 1; left: clamp(.9rem, 1.6vw, 1.5rem); right: clamp(.9rem, 1.6vw, 1.5rem); bottom: clamp(.8rem, 1.4vw, 1.3rem); font: 700 .85rem/1.3 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.case__play-label span { margin-left: .6em; }
.case__play:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; border-radius: 1.1rem; }
.case__film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* The player has no buttons of its own. This clear layer sits over it and is the only control: tap to pause, tap to play.
   It also keeps taps and right-clicks from reaching the player. While a film waits to start, the play button turns orange. */
.case__film.is-waiting .case__play-btn { background: var(--orange); }
.case__film.is-playing .case__play, .case__film.is-paused .case__play { visibility: hidden; }
.case__toggle { position: absolute; inset: 0; z-index: 2; display: none; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--cream); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.case__film.is-playing .case__toggle, .case__film.is-paused .case__toggle { display: block; }
.case__film.is-playing .case__toggle .case__play-btn { opacity: 0; }
.case__toggle:hover .case__play-btn, .case__toggle:focus-visible .case__play-btn { background: var(--orange); }
.case__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; border-radius: 1.1rem; }
/* Small film tiles: smaller button, shorter label */
.case__gallery figure.case__film:not(:first-child) .case__play-btn { width: clamp(2.6rem, 3.6vw, 3.4rem); }
.case__gallery--4 figure.case__film .case__play-btn { width: clamp(3rem, 4.6vw, 4.4rem); }

/* Back to the overview: same link treatment as "See our services" on Philosophy */
.work-page .case__back { display: inline-flex; align-items: center; gap: .6rem; margin-top: clamp(2rem, 4vw, 3rem); padding-block: .5rem; color: inherit; font-weight: 700; font-size: 1rem; text-decoration: underline; text-underline-offset: .22em; }
.work-page .case--ink .case__back:hover, .work-page .case--ink .case__back:focus-visible { color: var(--orange); }
.work-page .case--sand .case__back:hover, .work-page .case--sand .case__back:focus-visible { color: var(--orange-text, #b8360f); }
.work-page .case__back-glyph { transform: rotate(-90deg); }

/* Scroll motion, the same three effects the other pages use (motion.js and scroll-words.js, loaded by work-cases.js once the work is unlocked):
   1. each chapter rises as an inset card with rounded top corners and widens to full width;
   2. the Diagnose statement brightens word by word;
   3. the name, the story, the numbers and the pictures come into focus.
   The card is a clipped backdrop, so nothing is re-laid-out while it moves. The colour underneath is the chapter before it. */
/* Only the top of the chapter shows the colour underneath; lower down it is its own colour all the way through, so no seam can show where two chapters meet. */
.cases .case[data-rise] { position: relative; background: linear-gradient(to bottom, var(--under) min(100vh, 50%), var(--surface) min(100vh, 50%)); }
.cases .case[data-rise]::before { content: ""; position: absolute; inset: 0; background: var(--surface); clip-path: inset(0 calc((1 - var(--rise, 1)) * 5vw) 0 round calc((1 - var(--rise, 1)) * 1.8rem) calc((1 - var(--rise, 1)) * 1.8rem) 0 0); }
.cases .case[data-rise] > .shell { position: relative; transform: scale(calc(1 - (1 - var(--rise, 1)) * .04)); transform-origin: 50% 0; }
.case--ink { --surface: var(--ink); --under: #e8e3d4; }
.case--sand { --surface: #e8e3d4; --under: var(--ink); }
.cases .case:first-child { --under: var(--cream); }
.case__problem .is-word-reveal .w, .case__problem .is-word-reveal .c { color: inherit; }
@media (prefers-reduced-motion: reduce) { .cases .case[data-rise]::before { clip-path: none; } .cases .case[data-rise] > .shell { transform: none; } }


/* The docked pill, as on the other pages. It only shows once the work is unlocked.
   Fifteen chapters is more dots than the other pages have, so on phones the dots sit closer together to leave room for the name. */
body.work-page:not(.work-is-unlocked) .chapter-pill { display: none; }
@media (max-width: 520px) { .work-page .chapter-dot { padding-inline: .14rem; } .work-page .chapter-dot.is-active { padding-inline: .35rem; } }
/* Small phones: fifteen dots leave little room, so the dots sit a touch closer and the name a touch smaller. The longest names (Harley-Davidson, Porsche Cayenne) then show in full. */
@media (max-width: 380px) { .work-page .chapter-dot { padding-inline: .1rem; font-size: .76rem; } }
.work-page .case__back { margin-bottom: 0; }

/* Contact headline: one line before the work is unlocked, another once it has been seen. Only one is ever shown or read out. */
.work-page .contact-h--open { display: none; }
body.work-page.work-is-unlocked .contact-h--locked { display: none; }
body.work-page.work-is-unlocked .contact-h--open { display: inline; }