/* User-supplied Neue Montreal, scoped to team captions. */
@font-face {
  font-family: 'Neue Montreal Team';
  src: url('/assets/neue-montreal-bold.woff2') format('woff2'),
       url('/assets/neue-montreal-bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Typography and alignment refinements; motion remains in art-direction.css. */
/* A pinned composition with a clear band for the name and moving photographs. */
.gateway-stage {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 116px var(--pad) 38px;
  min-height: 700px;
  perspective: 1400px;
}
.gateway-top, .gateway-word, .gateway-bottom { position: static; inset: auto; min-width: 0; }
.gateway-top { gap: 24px; }
.gateway-word {
  font-size: clamp(96px, min(26vw, 28svh), 390px);
  line-height: .98;
  letter-spacing: -.065em;
  justify-self: center;
  transform: translateX(var(--word-x, 0px));
}
.gateway-photos {
  position: relative;
  inset: auto;
  min-height: 0;
  width: 100%;
  perspective: 1400px;
  transform-origin: 50% 50%;
  transition: rotate .45s var(--ease-out), transform .45s var(--ease-out);
}
.gateway-social { left: 20%; top: 10%; width: 33%; height: 78%; }
.gateway-films { left: 58%; top: 5%; width: 27%; height: 82%; }
.gateway-photo { transition: box-shadow .25s ease-out; }
.gateway-photo:hover, .gateway-photo:focus-visible { box-shadow: 0 20px 45px #0003; }
/* Colour responds on entry; the link stays under the pointer at its edges. */
.gateway-photo > img { transition: filter .16s ease-out, scale .45s var(--ease-out); }
.gateway-photo:hover > img, .gateway-photo:focus-visible > img {
  filter: grayscale(0);
  transition-duration: 0s, .45s;
}
.gateway-photo .frame-index { font-size: 9px; }
.photo-link { font-size: clamp(30px, 3.5vw, 62px); line-height: 1.08; }
.gateway-line { right: 9%; top: 28%; width: 110px; height: 110px; }
.gateway-bottom { gap: 32px; align-items: end; }
.gateway-bottom h1 { font-size: clamp(34px, 3.7vw, 58px); line-height: 1.06; }
.gateway-bottom p { font-size: 13px; justify-self: start; }
.gateway-bottom p span { color: #606060; font-size: 10px; }
.scroll-invitation { font-size: 10px; gap: 18px; }
.social-masthead { font-size: 23.5vw; line-height: 1.04; letter-spacing: -.065em; }
.cover-intro h2 { font-size: clamp(38px, 4.1vw, 68px); line-height: 1.06; }
.cover-intro p { font-size: 14px; line-height: 1.75; }
.cover-photo { top: 42%; height: 45%; }
.cover-inset { top: 64%; height: 22%; }
.manifesto-sticky { min-height: 680px; }
.word-reveal .word.is-read { color: var(--ink); }
.pointer-caption { width: 70px; height: 70px; }
@media (max-width: 1100px) {
  .gateway-stage { padding-top: 110px; }
  .gateway-social { left: 13%; width: 37%; }
  .gateway-films { left: 57%; width: 30%; }
  .gateway-bottom { grid-template-columns: 1.1fr 1fr auto; gap: 20px; }
  .gateway-bottom h1 { font-size: 36px; }
  .gateway-bottom p { font-size: 12px; }
  .scroll-invitation { gap: 10px; font-size: 9px; }
}
@media (max-width: 760px) {
  .gateway-stage { padding-top: 104px; gap: 22px; min-height: 700px; }
  .gateway-word { font-size: 25vw; }
  .gateway-top { font-size: 8px; }
  .gateway-social { left: 6%; top: 12%; width: 47%; height: 75%; }
  .gateway-films { left: 54%; top: 7%; width: 41%; height: 76%; }
  .gateway-photo .frame-index { font-size: 6px; left: 8px; top: 8px; padding: 6px; }
  .photo-link { font-size: clamp(27px, 7vw, 40px); left: 12px; right: 12px; }
  .gateway-line { right: 0; top: 48%; width: 70px; height: 70px; }
  .gateway-bottom { grid-template-columns: 1fr 1fr; gap: 14px; }
  .gateway-bottom h1 { font-size: 36px; max-width: 300px; }
  .gateway-bottom p { font-size: 11px; }
  .gateway-bottom p span { display: none; }
  .scroll-invitation { font-size: 8px; justify-self: end; }
  .social-masthead { font-size: 21.5vw; }
  .cover-intro h2 { font-size: 44px; }
  .cover-intro p { font-size: 13px; }
  .cover-photo { top: 550px; height: 295px; }
  .cover-inset { top: 665px; height: 160px; }
}
@media (max-height: 700px) {
  .gateway-stage { height: 700px; }
}
.motion-paused .gateway-photo { translate: none; }
:root{--head: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;--muted: #606060}h1,h2,h3{letter-spacing:-.045em}button,a,summary{touch-action:manipulation}.site-header{gap:24px}.brand,.header-cta,.menu-toggle{flex-shrink:0}.navigation{gap:clamp(18px,2.4vw,34px)}.navigation a,.header-cta{font-size:12px}.eyebrow{line-height:1.6}.button,.text-link{line-height:1.5}.button{gap:24px}.destination h2{font-size:clamp(56px,8vw,136px);line-height:1.04}.destination,.destination-films{grid-template-columns:30px minmax(0,1fr) minmax(0,.85fr) minmax(0,.7fr);gap:28px}.destination p{font-size:13px;line-height:1.75}.service-editorial{padding:clamp(64px,7vw,104px) var(--pad);grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:32px clamp(32px,5vw,80px)}.service-kicker{grid-column:1/-1}.service-side{position:static;padding-top:26px}.service-side h2{font-size:clamp(30px,3.1vw,50px);line-height:1.18;letter-spacing:-.045em;margin:0 0 24px}.service-side h2>span{display:block;color:var(--ink)}.service-side h2>.service-result{color:#646464;margin-top:6px}.service-side p{font-size:14px;line-height:1.75;max-width:34ch}.service-chapters{min-width:0;padding:0}.service-chapter,.service-chapter:nth-child(even){grid-template-columns:42px minmax(0,1fr);gap:20px;padding:26px 0 30px;min-height:0}.service-number{font:400 30px/1.25 var(--head);letter-spacing:-.04em;color:#707070}.service-chapter h3{font-size:clamp(21px,2.1vw,30px);line-height:1.25;margin:0 0 14px;letter-spacing:-.04em}.service-chapter p{font-size:14px;line-height:1.75;max-width:54ch}.service-tick{display:none}.service-outro{font-size:21px;line-height:1.5;padding:24px 0 0 62px}.service-outro span{color:#606060}.word-reveal,.film-statement h2{line-height:1.12}.word-reveal .word{color:#707070}.film-statement .word-reveal .word{color:#aaa}.manifesto-bottom{gap:32px}.manifesto-bottom p,.work-description p,.people-copy>p,.film-statement>p,.director-step p,.film-format p,.conversation-bottom p{font-size:14px;line-height:1.8}.work-heading h2,.work-description h3,.portrait-head h3,.people-copy h2{line-height:1.1}.work-heading h2{margin-left:0}.work-heading>.eyebrow{max-width:200px}.work-description h3{font-size:clamp(32px,3.8vw,62px);margin:20px 0}.work-stat{font-size:clamp(56px,6.4vw,104px);line-height:1.1}.work-description>.stat-caption{font-size:12px}.work-bottom{font-size:10px}.people-word{font-size:12.5vw;line-height:1.15;margin-left:0}.people-grid,.director-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.film-statement>p{margin-left:auto;width:min(100%,440px)}.format-name{font-size:clamp(28px,3.8vw,62px);line-height:1.25;overflow-wrap:anywhere}.film-format:hover summary{padding-left:0}.director-step h2{font-size:clamp(28px,3.2vw,54px);line-height:1.15;overflow-wrap:anywhere}.conversation-link{font-size:clamp(54px,12vw,200px);line-height:1.1;letter-spacing:-.055em}.page-curtain{transition-duration:.25s}.page-curtain.is-entering{animation-duration:.4s}.reveal{transform:translateY(18px);transition:opacity .45s ease,transform .55s var(--ease-out)}.dialog[open],.funnel-content{animation-duration:.25s}.funnel-aside,.funnel-content,.work-description,.people-copy{min-width:0}.funnel-content h2{line-height:1.18}.form-field input,.form-field textarea{font-size:16px}@media (max-width:1000px){.service-editorial{grid-template-columns:minmax(0,1fr);gap:28px}.service-side{padding-top:0}.service-side h2{font-size:40px}.service-chapter h3{font-size:23px}.service-chapter,.service-chapter:nth-child(even){gap:14px;grid-template-columns:34px minmax(0,1fr)}.service-outro{padding-left:48px}.work-heading{flex-wrap:wrap}}@media (max-width:760px){.site-header{gap:14px}.header-cta{margin-right:0;gap:10px;font-size:10px}.brand{width:116px}.destination,.destination-films{grid-template-columns:22px minmax(0,1fr);gap:16px}.destination h2{font-size:clamp(54px,14vw,88px)}.destination p{font-size:14px}.word-reveal,.film-statement h2{font-size:clamp(32px,8.7vw,54px);line-height:1.15}.manifesto-bottom{grid-template-columns:32px minmax(0,1fr);gap:18px}.manifesto-mark{font-size:40px}.work-heading{grid-template-columns:minmax(0,1fr) auto;gap:24px 14px}.work-heading h2{font-size:clamp(29px,7.5vw,43px)}.work-controls{gap:8px}.work-description p{max-width:38ch}.work-bottom{font-size:9px}.service-editorial{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:60px}.service-side{padding-top:0}.service-side h2{font-size:clamp(30px,7.7vw,44px);line-height:1.2;margin-bottom:20px}.service-side p{max-width:42ch}.service-chapter,.service-chapter:nth-child(even){grid-template-columns:30px minmax(0,1fr);gap:16px;padding:24px 0}.service-number{font-size:24px}.service-chapter h3{font-size:clamp(20px,5.4vw,27px);margin-bottom:12px}.service-outro{max-width:none;font-size:19px;padding:24px 0 0 46px}.people-grid,.director-stage{grid-template-columns:minmax(0,1fr)}.people-copy h2{font-size:clamp(40px,11vw,61px)}.people-copy>p{max-width:42ch}.people-word{font-size:12.5vw}.format-name{font-size:clamp(23px,6vw,34px)}.director-step h2{font-size:clamp(26px,7vw,40px)}.director-slides{min-height:285px}.conversation-link{font-size:12.5vw;gap:16px}.conversation-orbit{width:16vw;height:16vw;font-size:9vw}.page-crosslink{flex-wrap:wrap;font-size:11px;gap:12px}.page-crosslink>span:last-child{text-align:left}}@media (max-width:380px){.site-header{gap:10px}.brand{width:100px}.header-cta{padding:10px 8px;font-size:9px;gap:7px}.service-chapter h3{font-size:20px}}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Keep the original text beside the service list as it scrolls. */
.service-side { min-width: 0; align-self: start; }
.service-chapter { scroll-margin-top: 32px; }
.service-chapter:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
@media (min-width: 1001px) {
  .service-side { position: sticky; top: 32px; }
}

/* A distinct image follows each chapter, using the same active index as its text. */
.director-image { position: relative; }
.director-frame { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.director-frame.is-current { opacity: 1; visibility: visible; z-index: 1; }
.director-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.director-frame .frame-index { max-width: calc(100% - 40px); }
.director-step-media { display: none; margin: 0; }
.director-copy { min-width: 0; }
.motion-paused .director-frame { transition: none; }
/* When the scroll scene is disabled, keep every image beside its own copy. */
.motion-paused .director-image { display: none; }
.motion-paused .director-stage { display: block; min-height: 0; }
.motion-paused .director-slides { min-height: 0; }
.motion-paused .director-step { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(24px,5vw,80px); margin-bottom: 60px; }
.motion-paused .director-step-media { display: block; height: min(65svh,540px); min-height: 240px; overflow: hidden; }
.director-step-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-height: 700px) {
  .director-image { display: none; }
  .director-stage { display: block; min-height: 0; }
  .director-slides { min-height: 0; }
  .director-step { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(24px,5vw,80px); margin-bottom: 60px; }
  .director-step-media { display: block; height: 65svh; min-height: 240px; max-height: 540px; overflow: hidden; }
}
@media (max-width: 760px) {
  .motion-paused .director-step { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .director-step { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .director-frame { transition: none; } }


/* Preserve the form shell while questions and progress move between steps. */
.funnel-content { animation: none; }
.funnel-layout { overflow-anchor: none; }
.funnel-question,.funnel-step { display: flow-root; }
.progress-track { height: 3px; }
.progress-track .progress-fill { width: 100%; transform-origin: left center; transition: none; will-change: transform; }
.progress-meta [data-progress-value] { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

/* Client feedback, October 2026: shared left edges and a quieter header. */
body { text-align: left; }
.site-header { justify-content: flex-start; gap: clamp(22px, 3vw, 48px); }
.site-header .navigation { margin-right: auto; }
.site-header .header-cta { margin-left: auto; }
.gateway-top,.cover-kicker { justify-content: flex-start; }
.gateway-top span:last-child,.cover-kicker>span:last-child { max-width: none; text-align: left; }
.work-bottom>span:last-of-type,.page-crosslink>span:last-child { text-align: left; }
.gateway-word { justify-self: start; }
.gateway-bottom { grid-template-columns: minmax(0,1fr) auto; }
.gateway-bottom .scroll-invitation { justify-self: start; }
.manifesto-bottom>.eyebrow { text-align: left; }
.conversation-link { justify-content: flex-start; gap: clamp(24px,7vw,120px); text-align: left; }
.conversation-link:hover>span:first-child { transform: none; }
.conversation-orbit { margin-left: auto; flex: 0 0 auto; }
.conversation-bottom { align-items: flex-start; }
/* Give the Films headline breathing room between letters. */
.cinema-title { letter-spacing: -.015em; }
.cinema-title span:last-child { text-align: left; margin-top: .12em; }
.cinema-location { left: var(--pad); right: auto; top: 190px; text-align: left; }
.cinema-word { left: var(--pad); }
.director-content,.director-copy { text-align: left; }
.director-number { display: block; margin-left: -.035em; font-variant-numeric: lining-nums tabular-nums; }
.director-step h2,.director-step p { margin-left: 0; }
.director-content>.eyebrow,.director-dots { padding-left: 0; }
.progress-meta [data-progress-value] { text-align: left; }
/* The supplied film remains in the moving foreground frame. */
.cinema-frame .cinema-poster,.cinema-frame .cinema-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%; transform: none; filter: grayscale(1) brightness(.48);
}
.cinema-frame:hover .cinema-poster,.cinema-frame:hover .cinema-video { filter: grayscale(1) brightness(.48); }
.cinema-frame .cinema-video { opacity: 0; transition: opacity .5s ease,filter 1s; }
.cinema-frame .cinema-video.has-started { opacity: 1; }
/* All references share the same editorial card. */
.references-sequence { height: 470svh; }
.references-sequence .work-sticky { min-height: 700px; padding-top: 42px; }
.references-sequence .work-track { gap: 28px; }
.references-sequence .work-heading { align-items: flex-start; }
.references-sequence .work-heading h2 { margin: 0 auto 0 0; }
.references-sequence .work-controls { align-self: flex-end; }
.work-controls button:disabled { opacity: .3; cursor: default; }
.reference-card {
  display: flex; flex-direction: column; width: clamp(360px,48vw,680px); min-width: 0;
  background: #222; border-top: 1px solid #666; padding: clamp(25px,3.2vw,48px);
}
.reference-card-top { border-bottom: 1px solid #515151; padding-bottom: 22px; min-height: 142px; }
.reference-card .eyebrow { display: block; color: #aaa; font-size: 9px; letter-spacing: .08em; }
.reference-card h3 { font-size: clamp(27px,2.5vw,42px); line-height: 1.12; margin: 18px 0 0; max-width: 22ch; }
.reference-card-copy { padding-top: 22px; }
.reference-card h4 { font-size: clamp(19px,1.75vw,27px); line-height: 1.3; letter-spacing: -.03em; font-weight: 500; margin: 0 0 14px; }
.reference-card p { color: #bbb; font-size: 14px; line-height: 1.75; margin: 0; max-width: 53ch; }
.reference-card>.text-link { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 24px; color: white; font-size: 12px; }
.reference-card>.text-link:hover { color: #ccc; }
.reference-card:focus-within { outline: 1px solid #ccc; outline-offset: -1px; }
/* Full project copy uses the same facts/story arrangement for every client. */
.reference-page { overflow: clip; }
.reference-hero { padding: 48px var(--pad) 72px; background: #e9e9e9; }
.reference-back { display: inline-block; font-size: 12px; margin-bottom: 64px; border-bottom: 1px solid #999; padding-bottom: 6px; }
.reference-hero>.eyebrow { display: block; color: #606060; margin-bottom: 24px; }
.reference-hero h1 { font-size: clamp(42px,6.5vw,100px); line-height: 1.08; max-width: 19ch; overflow-wrap: anywhere; }
.reference-hero>p { font-size: clamp(20px,2.2vw,32px); line-height: 1.4; max-width: 40ch; margin-top: 28px; letter-spacing: -.025em; }
.reference-story { display: grid; grid-template-columns: minmax(220px,.75fr) minmax(0,1.5fr); gap: clamp(40px,8vw,140px); padding: 80px var(--pad) 100px; align-items: start; }
.reference-facts { position: sticky; top: 32px; }
.reference-facts>div { border-top: 1px solid #bbb; padding: 22px 0; }
.reference-facts h2 { font-size: 13px; letter-spacing: 0; margin-bottom: 14px; }
.reference-facts p,.reference-facts li { font-size: 14px; line-height: 1.8; color: #606060; }
.reference-facts ul { list-style: none; padding: 0; margin: 0; }
.reference-facts .reference-result p { font-size: 21px; line-height: 1.5; color: #151515; letter-spacing: -.025em; }
.reference-body { max-width: 760px; }
.reference-body h2 { font-size: clamp(30px,3.3vw,50px); line-height: 1.15; margin: 0 0 35px; }
.reference-body p { font-size: 16px; line-height: 1.85; margin: 0 0 22px; }
.reference-next { display: grid; grid-template-columns: 1fr auto; gap: 22px; margin: 0 var(--pad); padding: 35px 0; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; }
.reference-next>.eyebrow { grid-column: 1/-1; color: #606060; }
.reference-next>span:nth-child(2) { font-size: clamp(26px,3.3vw,48px); line-height: 1.2; letter-spacing: -.04em; }
.reference-next>.arrow { font-size: 38px; }
/* Four named colleagues, equally legible captions, generous portraits. */
.people-editorial { padding-bottom: 95px; }
.people-word { margin: 0 0 50px; font-size: 12.1vw; }
.team-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,100px); margin-bottom: 50px; align-items: end; }
.team-intro h3 { font-size: clamp(42px,5vw,78px); line-height: 1.08; margin-top: 22px; }
.team-intro p { font-size: 15px; line-height: 1.8; max-width: 52ch; margin: 0 0 16px; }
.team-intro p:last-child { margin-bottom: 0; }
.team-portrait-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 52px 32px; }
.team-person { margin: 0; min-width: 0; }
.team-person-photo { aspect-ratio: 4/5; background: #d4d4d4; }
.team-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.team-person figcaption { padding: 20px 0 0; border-bottom: 1px solid #bcbcbc; padding-bottom: 20px; }
.team-person h3 { font-size: clamp(23px,2.2vw,34px); line-height: 1.2; }
.team-person p { margin-top: 7px; color: #606060; font-size: 14px; line-height: 1.5; }
@media (max-width: 1000px) {
  .site-header { gap: 24px; }
  .reference-card { width: 65vw; }
  .reference-card-top { min-height: 135px; }
  .reference-card h3 { font-size: 30px; }
  .reference-card h4 { font-size: 23px; }
  .reference-story { grid-template-columns: minmax(200px,.7fr) minmax(0,1.3fr); gap: 40px; }
}
@media (max-width: 760px), (max-height: 850px) {
  .references-sequence { height: auto; padding: 52px 0 32px; }
  .references-sequence .work-sticky { position: relative; height: auto; min-height: 0; padding: 0; }
  .references-sequence .work-window { overflow-x: auto; min-height: 0; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); }
  .references-sequence .work-track { height: auto; transform: none!important; gap: 20px; align-items: stretch; }
  .reference-card { height: auto; width: clamp(310px,70vw,680px); min-height: 490px; scroll-snap-align: start; padding: 28px; }
  .reference-card-top { min-height: 135px; }
  .reference-card-copy { padding-bottom: 28px; }
}
.motion-paused .references-sequence { height: auto; }
.motion-paused .references-sequence .work-sticky { min-height: 0; }
.motion-paused .references-sequence .work-track { height: auto; align-items: stretch; }
.motion-paused .reference-card { height: auto; min-height: 490px; }
.motion-paused .reference-card-copy { padding-bottom: 28px; }
@media (max-width: 760px) {
  .site-header { gap: 14px; }
  .site-header .navigation { margin-right: 0; }
  .gateway-bottom { grid-template-columns: 1fr; gap: 18px; }
  .gateway-bottom .scroll-invitation { justify-self: start; }
  .cinema-location { top: 135px; max-width: calc(100% - 44px); font-size: 8px; }
  .cinema-title { font-size: 13vw; }
  .cinema-title span:last-child { margin-top: .25em; }
  .references-sequence .work-heading { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
  .references-sequence .work-heading>.eyebrow { grid-column: 1/-1; max-width: none; margin: 0; }
  .references-sequence .work-heading h2 { font-size: clamp(31px,8vw,45px); }
  .reference-card { width: calc(100vw - 60px); padding: 24px; min-height: 520px; }
  .reference-card h3 { font-size: 28px; }
  .reference-card h4 { font-size: 22px; }
  .reference-card p { font-size: 14px; }
  .references-sequence .work-bottom { flex-wrap: wrap; gap: 12px; }
  .reference-hero { padding: 30px var(--pad) 46px; }
  .reference-back { margin-bottom: 44px; }
  .reference-hero h1 { font-size: clamp(37px,10vw,62px); }
  .reference-story { display: flex; flex-direction: column; padding-block: 46px 55px; gap: 36px; }
  .reference-body { order: -1; }
  .reference-body p { font-size: 15px; }
  .reference-facts { position: static; width: 100%; }
  .reference-next { gap: 16px; }
  .people-editorial { padding-block: 55px 65px; }
  .people-word { margin-bottom: 32px; }
  .team-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 35px; }
  .team-intro h3 { font-size: 46px; }
  .team-portrait-grid { grid-template-columns: 1fr; gap: 36px; }
  .team-person-photo { aspect-ratio: 4/5; max-height: 680px; }
  .team-person h3 { font-size: 27px; }
}
@media (max-width: 380px) {
  .site-header { gap: 10px; }
  .reference-card { padding: 21px; width: calc(100vw - 52px); }
  .reference-card h3 { font-size: 25px; }
}
/* The final card can align to the same left edge as every earlier project. */
.references-sequence { --reference-card-width: clamp(360px,48vw,680px); }
.references-sequence .reference-card { width: var(--reference-card-width); }
.references-sequence .work-track { padding-right: max(var(--pad),calc(100vw - var(--pad) - var(--reference-card-width))); }
.cover-photo img { object-position: 64% 40%; }
.gateway-social img { object-position: 50% 26%; }
.gateway-films img { object-position: 35% 50%; }
@media (max-width: 1000px) { .references-sequence { --reference-card-width: 65vw; } }
@media (max-width: 760px), (max-height: 850px) { .references-sequence { --reference-card-width: clamp(310px,70vw,680px); } }
@media (max-width: 760px) {
  .references-sequence { --reference-card-width: calc(100vw - 60px); }
  .cinema-location { top: 180px; }
}
@media (max-width: 380px) { .references-sequence { --reference-card-width: calc(100vw - 52px); } }

/* Perspective choices: matching portrait frames keep the work in view. */
.gateway-destinations .destination-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
}
.gateway-destinations .destination-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 760px) {
  .gateway-destinations .destination-image {
    width: 85%;
    max-width: 420px;
    margin: 16px 0 24px auto;
  }
}

/* Feedback V2: compact team, consistent video references, permanent monochrome hero. */
.team-portrait-grid { grid-template-columns: repeat(auto-fit,minmax(180px,220px)); gap: 30px 24px; }
.team-person-photo { max-height: none; }
.team-person figcaption { padding: 14px 0; }
.team-person h3 { font-size: 20px; line-height: 1.25; }
.team-person p { font-size: 12px; line-height: 1.5; margin-top: 6px; }
.gateway-films img { object-position: 50% 50%; }
.director-frame,.director-step-media { background: #171717; }
.references-sequence { --reference-card-width: clamp(680px,75vw,1000px); height: 430svh; }
.references-sequence .reference-card {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 28px; padding: 28px; align-items: center; min-height: 0;
}
.reference-preview {
  position: relative; display: block; width: 100%; aspect-ratio: 9/16;
  max-width: min(100%,calc(56.25svh - 220px)); align-self: center;
  background: #111; color: #fff; border: 0; padding: 0; text-align: left; overflow: hidden;
}
.reference-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-play { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: center; padding: 12px; background: #111e; color: #fff; font-size: 12px; line-height: 1.35; }
.reference-play>span { font-size: 24px; line-height: 1; }
.reference-preview:hover .reference-play { background: #fff; color: #111; }
.reference-preview:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.reference-card-content { display: flex; flex-direction: column; min-width: 0; height: 100%; justify-content: center; }
.reference-card .reference-card-top { min-height: 0; padding-bottom: 20px; }
.reference-card h3 { font-size: clamp(27px,2.1vw,36px); line-height: 1.15; overflow-wrap: anywhere; }
.reference-card .reference-card-copy { padding: 20px 0 0; }
.reference-card h4 { font-size: clamp(20px,1.6vw,25px); }
.reference-card-content>.text-link { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding-top: 24px; margin-top: auto; color: #fff; font-size: 12px; }
.reference-card-content>.text-link:hover { color: #ccc; }
.reference-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.45fr); align-items: center; gap: 32px clamp(32px,6vw,96px); }
.reference-hero .reference-back { grid-column: 1/-1; justify-self: start; margin-bottom: 16px; }
.reference-hero-copy { min-width: 0; }
.reference-hero-copy>.eyebrow { display: block; color: #606060; margin-bottom: 24px; }
.reference-hero-copy>p { font-size: clamp(20px,2.2vw,32px); line-height: 1.4; max-width: 40ch; margin-top: 28px; letter-spacing: -.025em; }
.reference-detail-film { margin: 0; width: 100%; max-width: 340px; }
.reference-video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: contain; background: #111; }
.reference-detail-film figcaption { font-size: 11px; color: #606060; line-height: 1.5; margin-top: 12px; }
.reference-video-dialog { padding: 28px var(--pad) 40px; }
.reference-video-dialog h2 { font-size: clamp(22px,3vw,36px); margin-bottom: 24px; }
.reference-video-dialog .reference-video { width: min(100%,calc(56.25svh - 125px)); min-width: 180px; }
.reference-video-dialog>.text-link { display: inline-flex; margin-top: 22px; color: #fff; font-size: 13px; }
@media (max-height: 850px), (max-width: 760px) {
  .references-sequence { height: auto; }
  .reference-preview { max-width: 300px; }
  .references-sequence .reference-card { height: auto; min-height: 0; }
  .reference-card-content>.text-link { margin-top: 24px; }
}
.motion-paused .references-sequence { height: auto; }
.motion-paused .reference-preview { max-width: 300px; }
.motion-paused .references-sequence .reference-card { height: auto; min-height: 0; }
@media (max-width: 1000px) {
  .team-portrait-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 20px; }
  .team-person h3 { font-size: 18px; }
}
@media (max-width: 760px) {
  .team-portrait-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 18px; max-width: 480px; }
  .team-person h3 { font-size: clamp(16px,4vw,20px); }
  .team-person p { font-size: 12px; }
  .references-sequence { --reference-card-width: calc(100vw - 60px); }
  .references-sequence .reference-card { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px 16px; padding: 22px; align-items: start; }
  .reference-preview { grid-column: 1; align-self: start; max-width: none; }
  .reference-play { left: 6px; right: 6px; bottom: 6px; padding: 7px; gap: 5px; font-size: 10px; }
  .reference-play>span { font-size: 19px; }
  .reference-card-content { display: contents; }
  .reference-card .reference-card-top { grid-column: 2; padding: 0 0 16px; }
  .reference-card .eyebrow { font-size: 8px; }
  .reference-card h3 { font-size: clamp(20px,5vw,27px); margin-top: 14px; }
  .reference-card .reference-card-copy { grid-column: 1/-1; padding: 0; }
  .reference-card h4 { font-size: 22px; }
  .reference-card-content>.text-link { grid-column: 1/-1; margin-top: 0; padding-top: 4px; }
  .reference-hero { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .reference-hero .reference-back { margin-bottom: 8px; }
  .reference-detail-film { max-width: 280px; }
  .reference-video-dialog .reference-video { min-width: 0; width: min(100%,360px); }
}

/* Touch visibility and hover rules cannot colourise the Films hero. */
.cinema-frame.hover-media img.cinema-poster,
.cinema-frame.hover-media video.cinema-video { filter: grayscale(1) brightness(.48); }

/* October 19: smaller perspective images with a restrained hover movement. */
.gateway-social img { object-position: 50% 50%; }
.gateway-destinations .destination-image {
  width: 65%;
  justify-self: center;
  transform: rotate(1deg);
  transition: transform .35s var(--ease-out);
}
.gateway-destinations .destination-social .destination-image img { object-position: 45% 50%; }
.gateway-destinations .destination-films .destination-image { transform: rotate(-1deg); }
.gateway-destinations .destination:hover .destination-image,
.gateway-destinations .destination:focus-visible .destination-image { transform: rotate(-.5deg); }
.gateway-destinations .destination-films:hover .destination-image,
.gateway-destinations .destination-films:focus-visible .destination-image { transform: rotate(.5deg); }
/* Announce the new question without drawing a rectangle around its heading. */
.dialog h2#dialog-title[tabindex="-1"]:focus { outline: none; }
/* Five consistent portrait frames, inspired by the supplied team reference. */
.team-portrait-window { width: 100%; max-width: 1180px; padding: 6px 0 16px; }
.team-portrait-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; max-width: none; }
.team-person-photo { aspect-ratio: 3/4; max-height: none; }
.team-person figcaption { padding: 14px 0 0; border: 0; }
.team-person h3 { font-size: clamp(16px,1.45vw,20px); line-height: 1.3; }
.team-person p { font-size: 12px; line-height: 1.5; }
.team-placeholder img { object-fit: contain; object-position: center; }
@media (max-width: 760px) {
  .gateway-destinations .destination-image { width: 55.25%; max-width: 273px; margin: 16px 0 24px; }
  .team-portrait-window {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #aaa #e0e0e0;
    padding-bottom: 20px;
  }
  .team-portrait-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(180px,44vw,240px); gap: 16px; }
  .team-person { scroll-snap-align: start; }
  .team-person h3 { font-size: 18px; }
}
body.motion-paused .gateway-destinations .destination .destination-image { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .gateway-destinations .destination .destination-image,
  .gateway-destinations .destination:is(:hover,:focus-visible) .destination-image { transform: none; transition: none; }
}

/* Large framed portrait strip matching the supplied team-page reference. */
.people-editorial { background: #f5f5f5; }
.team-gallery {
  --team-gap: clamp(13px,1.3vw,22px);
  --team-edge: clamp(18px,2.2vw,40px);
  width: calc(100% + 2 * var(--pad));
  margin-inline: calc(-1 * var(--pad));
  padding-top: 18px;
  background: #f5f5f5;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}
.team-gallery .team-portrait-window {
  width: 100%; max-width: none; padding: 0 0 18px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--team-edge);
  scrollbar-width: thin;
  scrollbar-color: #aaa #e6e6e6;
}
.team-gallery .team-portrait-window::-webkit-scrollbar { height: 3px; }
.team-gallery .team-portrait-window::-webkit-scrollbar-track { background: #e6e6e6; }
.team-gallery .team-portrait-window::-webkit-scrollbar-thumb { background: #aaa; }
.team-gallery .team-portrait-grid {
  display: grid; grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: clamp(280px,22vw,430px);
  width: max-content; max-width: none;
  gap: var(--team-gap); padding-inline: var(--team-edge);
}
.team-gallery .team-person {
  margin: 0; min-width: 0; background: #f5f5f5;
  scroll-snap-align: start;
}
.team-gallery .team-person-photo {
  aspect-ratio: 3/4; max-height: none;
  border: 1px solid #d8d8d8;
  border-radius: 0; background: #ddd;
}
.team-gallery .team-person-photo img {
  filter: grayscale(1); scale: 1; transform: none;
  transition: filter .25s ease;
}
.team-gallery .team-person-photo.hover-media:is(:hover, :focus-within) img {
  filter: grayscale(0);
}
@media (hover: none) {
  .team-gallery .team-person-photo.hover-media.is-in-view img { filter: grayscale(0); }
}
body.motion-paused .team-gallery .team-person-photo img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .team-gallery .team-person-photo img { transition: none; }
}
.team-gallery .team-person figcaption,
.team-gallery .team-person figcaption h3 {
  font-family: 'Neue Montreal Team', Inter, Arial, sans-serif;
  font-weight: 700;
}
.team-gallery .team-person figcaption {
  min-height: 70px; padding: 14px 8px 16px;
  text-align: left; border: 0; background: #f5f5f5;
}
.team-gallery .team-person h3 {
  font-size: 16px; line-height: 1.4; font-weight: 700;
  text-transform: none; letter-spacing: 0; text-align: left;
}
.team-gallery .team-person figcaption p {
  font-family: Inter, Arial, sans-serif;
  font-size: 14px; line-height: 1.45; font-weight: 400;
  margin-top: 3px; text-align: left;
}
.team-gallery-edge { height: 24px; background: #f5f5f5; }
@media (max-width: 760px) {
  .team-gallery { --team-gap: 14px; --team-edge: 18px; padding-top: 14px; }
  .team-gallery .team-portrait-grid { grid-auto-columns: clamp(240px,72vw,360px); }
  .team-gallery .team-person figcaption { min-height: 70px; }
  .team-gallery-edge { height: 20px; }
}