.agency-page { overflow-x: clip; }
.atelier-header { position: fixed; z-index: 30; inset: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 92px; padding: 0 40px; background: rgb(255 255 255 / 94%); }
.atelier-home { display: grid; justify-items: start; gap: 3px; width: max-content; font-size: 10px; line-height: 1.2; text-transform: uppercase; }
.atelier-home span { justify-self: center; font-size: 22px; line-height: .8; }
.atelier-wordmark { justify-self: center; font: 300 24px/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.atelier-wordmark img, .legal-wordmark img { display: block; width: 145px; height: 25px; }
.legal-wordmark { justify-self: center; }
.atelier-menu-toggle { justify-self: end; display: grid; grid-template-columns: auto; justify-items: end; gap: 5px; border: 0; padding: 10px 0 10px 14px; background: transparent; cursor: pointer; font-size: 10px; text-transform: uppercase; }
.atelier-menu-toggle i { display: block; width: 36px; height: 1px; background: currentColor; }
.atelier-menu { position: fixed; z-index: 29; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; background: white; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.atelier-menu.is-open { opacity: 1; visibility: visible; }
.atelier-menu a { font: 300 clamp(42px, 6vw, 76px)/1.2 var(--display); }
.atelier-menu a:hover { color: var(--accent); }
.atelier-cover { position: relative; display: grid; grid-template-columns: 43.7% 1fr; min-height: 100svh; background: white url("../images/logo-background-r.png") right center / auto 100% no-repeat; }
.atelier-cover > img { width: 100%; height: 100svh; min-height: 640px; object-fit: cover; object-position: center 47%; }
.atelier-cover-copy { align-self: center; max-width: 680px; padding: 145px clamp(52px, 8.4vw, 122px) 70px; }
.atelier-cover-copy h1 { margin: 0 0 20px; font: 300 clamp(58px, 6.34vw, 92px)/1.2 var(--display); }
.atelier-cover-copy p { max-width: 542px; margin: 0; color: #6e6d6d; font: 400 clamp(18px, 1.46vw, 21px)/1.53 var(--display); }
.atelier-story { position: relative; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr); gap: clamp(42px, 7vw, 100px); min-height: 100svh; padding: 190px 4.2vw 130px; }
.atelier-story-mark { min-height: 100%; background: url("../images/logo-background-l.png") left center / auto 100% no-repeat; }
.atelier-story-copy { max-width: 710px; }
.atelier-story-copy p { margin: 0 0 34px; color: #77736f; font: 400 clamp(19px, 1.46vw, 21px)/1.55 var(--display); }
.atelier-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; padding: 50px 4.2vw 70px; }
.atelier-gallery img { width: 100%; height: min(65vh, 590px); object-fit: cover; }
.atelier-gallery .gallery-wide { grid-column: span 2; }
.atelier-back { display: flex; justify-content: center; gap: 12px; padding: 60px 20px 80px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.atelier-contact { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 70px 20px 28px; background: #292a27; color: white; }
.atelier-contact .atelier-contact-cta { font: 300 clamp(34px, 5vw, 62px)/1.2 var(--display); }
.atelier-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; border-top: 1px solid #555650; padding-top: 18px; color: #b8b7b0; font-size: 10px; }
.atelier-footer-links a { color: inherit; transition: color .2s; }
.atelier-footer-links a:hover { color: white; }
.atelier-contact span, .atelier-back span { color: var(--accent); }
.legal-content { width: min(860px, 100%); margin: 0 auto; padding: 150px 48px 90px; }
.legal-content > h1 { margin: 16px 0 50px; font: 300 clamp(48px, 6vw, 76px)/1.05 var(--display); }
.legal-content section { margin: 0 0 34px; }
.legal-content h2 { margin: 0 0 12px; font: 400 27px/1.2 var(--display); }
.legal-content p { margin: 0 0 12px; color: #6e6d6d; font: 400 17px/1.6 var(--display); }
.legal-content p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { display: inline-flex; gap: 12px; padding-top: 20px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 760px) {
  .atelier-header { height: 68px; padding: 0 22px; }
  .atelier-home { font-size: 9px; }
  .atelier-wordmark img, .legal-wordmark img { width: 118px; height: auto; }
  .atelier-menu-toggle { font-size: 9px; }
  .atelier-menu-toggle i { width: 29px; }
  .atelier-header .language-switch { top: 56px; right: 22px; }
  .atelier-cover { grid-template-columns: 1fr; padding-top: 68px; background-size: auto 42%; background-position: right bottom; }
  .atelier-cover > img { height: 112vw; min-height: 0; max-height: 520px; }
  .atelier-cover-copy { max-width: none; padding: 38px 24px 75px; }
  .atelier-cover-copy h1 { font-size: clamp(48px, 13vw, 68px); }
  .atelier-cover-copy p { font-size: 19px; }
  .atelier-story { grid-template-columns: 1fr; gap: 20px; padding: 80px 24px 55px; }
  .atelier-story-mark { min-height: 190px; background-size: auto 100%; }
  .atelier-story-copy p { margin-bottom: 26px; font-size: 19px; }
  .atelier-gallery { grid-template-columns: 1fr; gap: 18px; padding: 18px 24px 45px; }
  .atelier-gallery img, .atelier-gallery .gallery-wide { grid-column: auto; height: auto; aspect-ratio: 1.08 / 1; }
  .atelier-back { padding: 46px 20px 60px; }
  .atelier-contact { padding: 55px 20px 22px; }
  .atelier-footer-links { gap: 12px; font-size: 9px; }
  .legal-content { padding: 112px 24px 65px; }
  .legal-content > h1 { margin-bottom: 34px; font-size: clamp(44px, 12vw, 60px); }
  .legal-content h2 { font-size: 24px; }
  .legal-content p { font-size: 16px; }
}

@media (min-width: 761px) {
  .agency-page main { width: 100vw; }
  .atelier-header { width: calc(100vw - 10px); height: 123px; padding: 0 4.2vw; }
  .atelier-cover { width: calc(100vw - 10px); grid-template-columns: 43.7vw minmax(0, 1fr); background-image: url("../images/logo-background-l.png"); background-position: 100% 50%; background-size: contain; }
  .atelier-cover > img { width: 100%; }
  .atelier-cover-copy { width: 100%; max-width: none; padding: 0 5.3vw 0 9vw; }
  .atelier-cover-copy h1 { width: max-content; }
  .atelier-story { width: calc(100vw - 10px); grid-template-columns: minmax(0, .419fr) minmax(0, 1fr); gap: 7vw; min-height: 0; padding: 155.7px 14vw 166.5px 8.66vw; }
  .atelier-story-mark { min-height: 0; }
  .atelier-story-copy { max-width: none; }
  .atelier-story-copy p { margin-bottom: 32.65px; font-weight: 300; line-height: 1.56; }
  .atelier-story-copy p:first-child { margin-top: 75px; }
  .atelier-story-copy p:last-child { margin-bottom: 0; }
  .atelier-interstitial { width: calc(100vw - 10px); height: 792px; background: url("../images/atelier-interstitial.jpg") 50% 100% / cover no-repeat; }
  .atelier-gallery { width: calc(100vw - 10px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 65px 60px; padding: 32px 60px 157px; }
  .atelier-gallery img { height: min(100svh, 590px); margin: 0; }
  .atelier-back { width: 259px; height: 41.33px; align-items: center; margin: 0 auto; padding: 0; }
  .atelier-contact { width: calc(100vw - 10px); min-height: 396px; }
}

@media (max-width: 760px) {
  .atelier-interstitial { height: 55svh; background: url("../images/atelier-interstitial.jpg") center / cover no-repeat; }
}