/* The work page is self-contained: shared identity, without the homepage's layout overrides. */
.work-page {
  --work-gutter: clamp(1.25rem, 3.2vw, 3.5rem);
  --work-space: clamp(3.5rem, 6vw, 6rem);
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.work-page .work-shell {
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: var(--work-gutter);
}

.work-page main :is(div, figure, article, aside),
.work-page .footer-main > * {
  min-width: 0;
}

.work-page :is(h1, h2, h3, p, figure) { margin: 0; }
.work-page :is(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; }
.work-page :is(p, li) { font-size: 1.0625rem; line-height: 1.6; }
.work-page :is(button, a) { touch-action: manipulation; }
.work-page img { max-width: 100%; }
.work-page :is(section[id], article[id]) { scroll-margin-top: 7rem; }

.work-page .site-header { position: sticky; top: 0; z-index: 50; }
.work-page .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; }
.work-page .desktop-nav { justify-content: center; gap: clamp(1rem, 1.8vw, 2rem); }
.work-page .desktop-nav a { white-space: nowrap; }
.work-page .brand img { flex-shrink: 0; }
.work-page .support-link { padding-inline: 1rem; white-space: nowrap; }
.work-page .language-switch [data-language-button] { min-height: 2.75rem; }
.work-page .mobile-menu:not(.is-open) { visibility: hidden; }
.work-page .mobile-menu { max-height: calc(100svh - 5.9rem); overflow-y: auto; overscroll-behavior: contain; }

.work-hero { background: #f0ede5; }
.work-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.75rem, 4.5vw, 4.75rem); }
.work-hero-copy h1 { max-width: 12ch; font-size: clamp(3.25rem, 5.7vw, 6.1rem); font-weight: 700; line-height: 1.015; letter-spacing: -.052em; }
.work-hero-copy h1 span { display: block; }
.work-hero-copy h1 span:last-child { color: var(--blue); }
.work-hero-copy > p { max-width: 39ch; margin-top: 1.8rem; color: #40506a; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.5; }
.work-hero-copy .work-text-link { margin-top: 1.75rem; }
.work-text-link { display: inline-flex; gap: 1.1rem; align-items: center; min-height: 2.75rem; padding-block: .4rem; border-bottom: 1px solid currentColor; font-size: 1rem; font-weight: 650; line-height: 1.4; }
.work-page :is(.work-text-link, .work-button, .work-directory) svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.work-photo-frame { overflow: hidden; aspect-ratio: 5 / 4; background: #cad3dc; border-top: .5rem solid var(--yellow); }
.work-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 23%; filter: saturate(.85) contrast(1.04); }
.work-hero-photo figcaption { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding-top: .75rem; font-size: .875rem; line-height: 1.4; }
.work-hero-photo figcaption span:first-child { max-width: 34ch; }
.work-hero-photo figcaption span:last-child { color: var(--blue); font-weight: 700; }

.work-directory { background: var(--navy); color: var(--white); }
.work-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-directory a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.6rem 1.5rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.work-directory a:first-child { padding-left: 0; }
.work-directory a:last-child { padding-right: 0; }
.work-directory a + a { border-left: 1px solid #ffffff35; }
.work-directory .work-index { color: var(--yellow); font-size: .875rem; font-variant-numeric: tabular-nums; }
.work-directory a:focus-visible { outline-offset: -5px; }

.work-priorities { display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); gap: clamp(3rem, 7vw, 7rem); padding-block: var(--work-space); }
.work-page h2 { font-size: clamp(2.5rem, 3.6vw, 3.85rem); font-weight: 660; line-height: 1.07; letter-spacing: -.043em; }
.work-priorities-intro > h2 { max-width: 13ch; }
.work-priorities-intro > p { max-width: 35ch; margin-top: 1.5rem; color: #40506a; }
.work-stage-note { margin-top: 2.25rem; padding: 1.6rem; background: #f0ede5; border-left: .25rem solid var(--yellow); }
.work-stage-note h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.35; letter-spacing: -.015em; }
.work-stage-note p { margin-top: .75rem; color: #40506a; font-size: 1rem; }
.work-stage-note .work-text-link { margin-top: .85rem; font-size: .9375rem; }
.work-programme { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.5rem; padding-block: 2rem; border-top: 1px solid #b9c5d3; }
.work-programme:first-child { padding-top: 1.5rem; border-top: .25rem solid var(--blue); }
.work-programme:last-child { border-bottom: 1px solid #b9c5d3; }
.work-programme-number { color: var(--blue); font-size: 1.625rem; font-weight: 650; line-height: 1.3; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.work-programme h3 { font-size: clamp(1.625rem, 2.3vw, 2.5rem); font-weight: 650; line-height: 1.15; letter-spacing: -.032em; }
.work-programme p { margin-top: 1rem; color: #40506a; }
.work-programme ul { display: grid; gap: .6rem; margin: 1.2rem 0 0; padding-left: 1.1rem; }
.work-programme li { padding-left: .2rem; font-size: 1rem; line-height: 1.45; }
.work-programme li::marker { color: #a66f00; }

.work-milestone { background: #edf1f7; }
.work-milestone-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; padding-block: clamp(2.75rem, 4vw, 4rem); }
.work-milestone-photo img { display: block; width: 100%; height: auto; aspect-ratio: 922 / 427; object-fit: contain; filter: saturate(.85) contrast(1.025); }
.work-milestone-photo figcaption { margin-top: .75rem; color: #40506a; font-size: .875rem; line-height: 1.4; }
.work-milestone-copy h2 { max-width: 14ch; }
.work-milestone-copy p { margin-top: 1.5rem; color: #40506a; }
.work-milestone-copy .work-text-link { margin-top: 1.1rem; }

.work-invitation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: var(--work-space); }
.work-invitation h2 { max-width: 15ch; }
.work-invitation p { max-width: 43ch; color: #40506a; }
.work-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 2rem; max-width: 100%; min-height: 3.75rem; margin-top: 1.4rem; padding: 1rem 1.5rem; background: var(--yellow); color: var(--navy); font-size: 1rem; font-weight: 680; line-height: 1.4; }
.work-page .footer-brand img { flex-shrink: 0; }
.work-page .footer-nav { grid-template-columns: repeat(2, minmax(0, auto)); }
.work-page .footer-nav a { display: flex; align-items: center; min-height: 2rem; }
.work-page .back-to-top { visibility: hidden; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }
.work-page .back-to-top.is-visible { visibility: visible; }

html[lang="fr"] .work-hero-copy h1 { font-size: clamp(3rem, 5vw, 5.35rem); max-width: 14ch; letter-spacing: -.042em; }
html[lang="fr"] .work-programme h3 { font-size: clamp(1.625rem, 2.1vw, 2.25rem); }

@media (hover: hover) and (pointer: fine) {
  .work-directory a { transition: background-color 180ms ease; }
  .work-directory a:hover { background-color: #ffffff12; }
  .work-text-link:hover { color: var(--blue); }
  .work-button { transition: background-color 180ms ease, color 180ms ease; }
  .work-button:hover { background: var(--navy); color: white; }
}

@media (min-width: 1101px) and (max-width: 1250px) {
  .work-page .header-actions > .support-link { display: none; }
}

@media (max-width: 1100px) {
  .work-page .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 960px) {
  .work-hero-grid { gap: 2rem; }
  .work-hero-copy h1 { font-size: clamp(3rem, 5.7vw, 4rem); }
  .work-photo-frame { aspect-ratio: 1; }
  .work-priorities { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; }
  .work-programme { grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; }
  .work-page .footer-inner.footer-main { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
  .work-page .footer-place { grid-column: 1 / -1; display: flex; gap: 2rem; }
}

@media (max-width: 760px) {
  .work-page { --work-space: 3.5rem; }
  .work-page .site-header { position: relative; }
  .work-page :is(section[id], article[id]) { scroll-margin-top: 1.5rem; }
  .work-page .mobile-menu { max-height: calc(100svh - 5.2rem); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .work-page .mobile-menu a { font-size: 1.625rem; min-height: 3.75rem; overflow-wrap: anywhere; }
  .work-page .language-switch [data-language-button] { min-width: 2.75rem; min-height: 2.75rem; }
  .work-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; padding-block: 2.75rem 2rem; }
  .work-hero-copy h1, html[lang="fr"] .work-hero-copy h1 { max-width: 15ch; font-size: clamp(2.75rem, 10.8vw, 4.5rem); line-height: 1.04; }
  .work-hero-copy > p { margin-top: 1.25rem; font-size: 1.125rem; }
  .work-hero-copy .work-text-link { margin-top: 1.1rem; }
  .work-photo-frame { aspect-ratio: 5 / 4; }
  .work-photo-frame img { object-position: 50% 23%; }
  .work-directory-grid { grid-template-columns: 1fr; }
  .work-directory a { padding: 1rem 0; min-height: 4rem; font-size: 1rem; }
  .work-directory a + a { border-left: 0; border-top: 1px solid #ffffff35; }
  .work-priorities { grid-template-columns: 1fr; gap: 2.5rem; }
  .work-page h2 { font-size: clamp(2.125rem, 8.6vw, 3rem); }
  .work-priorities-intro > h2 { max-width: 18ch; }
  .work-priorities-intro > p { max-width: 46ch; margin-top: 1.1rem; }
  .work-stage-note { margin-top: 1.5rem; padding: 1.25rem; }
  .work-programme { grid-template-columns: 2rem minmax(0, 1fr); padding-block: 1.75rem; }
  .work-programme h3, html[lang="fr"] .work-programme h3 { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .work-programme-number { font-size: 1.375rem; }
  .work-programme p { font-size: 1rem; }
  .work-milestone-grid { grid-template-columns: 1fr; gap: 1.75rem; padding-block: 2.5rem; }
  .work-milestone-copy h2 { max-width: 18ch; }
  .work-milestone-copy p { margin-top: 1rem; }
  .work-invitation { grid-template-columns: 1fr; gap: 1.25rem; }
  .work-invitation h2 { max-width: 19ch; }
  .work-button { width: 100%; }
  .work-page .footer-inner.footer-main { grid-template-columns: 1fr; }
  .work-page .footer-place { display: grid; gap: .6rem; }
  .work-page .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; }
  .work-page .footer-nav a { min-height: 2.75rem; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .work-programme { grid-template-columns: 1fr; gap: .65rem; }
  .work-page .work-hero-copy h1 { font-size: 2.65rem; }
  .work-page .header-actions { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .work-page *, .work-page *::before, .work-page *::after { animation: none !important; transition: none !important; }
}