/* A film-led portfolio, using the typography and generous frames of video services. */
body[data-portfolio-page="video"] { --portfolio-scroll-offset: 106px; }
.vf-hero { min-height: clamp(740px,94svh,1000px); align-items: center; }
.vf-hero .pf-hero-content { padding-block: 174px 162px; }
.vf-hero h1 { font-size: clamp(96px,10vw,154px); line-height: .86; }
.vf-hero .pf-hero-description { margin-block: 28px; font-size: 15px; line-height: 1.8; }
.vf-intro { display: block; padding-block: 76px 68px; scroll-margin-top: 26px; }
.vf-intro h2 { margin: 0; color: var(--a360-navy); font: 400 clamp(62px,6.5vw,96px)/.96 var(--a360-serif); letter-spacing: -.035em; }
.vf-intro h2 em { color: #a07a3d; }
/* Collection navigation follows the reading position without moving the page. */
.vf-rail { position: sticky; top: 0; z-index: 20; border-block: 1px solid #d7cfc0; background: #fbfaf6f5; backdrop-filter: blur(16px); box-shadow: 0 7px 20px #07182705; }
.vf-rail-inner { display: flex; gap: 26px; align-items: center; min-height: 86px; }
.vf-current { flex: 0 0 122px; }
.vf-current > span { display: block; margin-bottom: 5px; color: #8b8576; font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.vf-current > strong { position: relative; display: grid; align-items: center; height: 2.1em; overflow: hidden; color: var(--a360-navy); font: 500 23px/1.05 var(--a360-serif); }
.vf-current-word { grid-area: 1 / 1; }
.vf-index-links { position: relative; isolation: isolate; flex: 1; flex-direction: row; min-width: 0; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 8px; }
.vf-index-links::-webkit-scrollbar { display: none; }
.vf-index-links a { position: relative; z-index: 1; flex: none; min-height: 43px; padding: 11px 13px; border: 1px solid transparent; border-radius: 2px; white-space: nowrap; }
.vf-index-links a strong { font-size: 10px; font-weight: 600; }
.vf-index-links a.is-active { background: var(--a360-navy); border-color: var(--a360-navy); color: #fff; }
.vf-index-links a.is-active strong { font-weight: 600; }
.vf-index-indicator { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 2px; background: var(--a360-navy); pointer-events: none; transition: transform .72s cubic-bezier(.22,.61,.36,1),width .72s cubic-bezier(.22,.61,.36,1),height .3s ease; }
.vf-index-indicator.is-measuring { transition: none; }
.vf-index-links.vf-nav-ready a.is-active { background: transparent; border-color: transparent; color: #fff; }
.vf-index-links.vf-nav-ready a:not(.is-active):hover { background: #07182708; }
/* One generous film frame plus a browsable selection of related work. */
.vf-collection { padding-block: clamp(60px,6vw,95px) clamp(68px,7vw,108px); scroll-margin-top: var(--portfolio-scroll-offset); background: #fbfaf6; }
.vf-collection--stone { background: #f0ece3; }
.vf-section-heading { display: grid; grid-template-columns: 1.55fr 1fr; gap: 55px; align-items: end; margin-bottom: 37px; }
.vf-section-heading h2 { margin: 0; color: var(--a360-navy); font: 400 clamp(48px,5.2vw,76px)/.97 var(--a360-serif); letter-spacing: -.035em; }
.vf-section-heading h2 em { font-weight: 400; color: #9b773e; }
.vf-section-intro { max-width: 330px; justify-self: end; padding-bottom: 4px; }
.vf-collection-gallery { display: grid; grid-template-columns: minmax(0,2.25fr) minmax(270px,1fr); gap: 30px; align-items: start; }
.vf-film { display: block; min-width: 0; color: var(--a360-navy); }
.vf-film-media { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: var(--a360-navy); }
.a360-homepage .vf-film-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vf-film:is(:hover,:focus-visible) .vf-film-media > img { transform: scale(1.025); }
.vf-film--feature .vf-film-media { box-shadow: 0 16px 35px #12273712; }
.vf-film--feature .vf-film-media::after { position: absolute; inset: 65% 0 0; z-index: 1; content: ''; background: linear-gradient(0deg,#0619278c,transparent); pointer-events: none; }
.vf-preview-host { position: absolute; inset: 0; z-index: 1; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity .16s ease; }
.vf-preview-host :is(video,iframe) { display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; pointer-events: none; }
.vf-film.is-preview-playing .vf-preview-host { opacity: 1; }
.vf-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; border: 1px solid #ffffffe0; color: white; background: #0b22368c; backdrop-filter: blur(5px); transform: translate(-50%,-50%); transition: background .25s,box-shadow .25s; }
.vf-play svg { width: 23px; height: 23px; margin-left: 2px; fill: currentColor; }
.vf-film:is(:hover,:focus-visible) .vf-play { background: #0b2236bf; box-shadow: 0 0 0 8px #ffffff14; }
.vf-duration { position: absolute; z-index: 2; right: 13px; bottom: 12px; padding: 3px 6px; color: white; background: #061927a3; font-size: 9px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
.vf-watch-label { position: absolute; z-index: 2; bottom: 18px; left: 21px; color: white; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.vf-film-copy { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 21px; }
.vf-film-copy small { display: block; margin-bottom: 7px; color: #9a7a43; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vf-film-copy strong { display: block; color: var(--a360-navy); font: 400 clamp(30px,3vw,43px)/1.05 var(--a360-serif); letter-spacing: -.02em; }
.vf-supporting { min-width: 0; }
.vf-supporting-head { display: flex; align-items: center; justify-content: space-between; min-height: 29px; margin-bottom: 11px; }
.vf-supporting-head > span { color: #85704b; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vf-film-track { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid #d9d1c1; }
.vf-film--queue { display: grid; grid-template-columns: minmax(0,.62fr) minmax(0,1fr); align-items: center; gap: 17px; padding-bottom: 12px; border-bottom: 1px solid #d9d1c1; }
.vf-film--queue:last-child { padding-bottom: 0; border-bottom: 0; }
.vf-film--queue .vf-film-copy { padding: 0; }
.vf-film--queue .vf-film-copy strong { font-size: clamp(23px,2vw,29px); line-height: 1.05; }
.vf-film--queue .vf-play { width: 28px; height: 28px; border-color: #ffffffab; }
.vf-film--queue .vf-play svg { width: 12px; height: 12px; }
.vf-film--queue .vf-duration { right: 5px; bottom: 5px; padding: 3px 4px; font-size: 8px; }
.vf-business-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.vf-business-grid .vf-film { display: block; padding: 0; border: 0; }
.vf-business-grid .vf-film-media { box-shadow: none; }
.vf-business-grid .vf-film-copy { padding-top: 19px; }
.vf-business-grid .vf-film-copy strong { font-size: 32px; }
.vf-business-grid .vf-play { width: 49px; height: 49px; }
.vf-business-grid .vf-play svg { width: 19px; height: 19px; }
.vf-business-grid .vf-duration { right: 12px; bottom: 12px; font-size: 9px; }
.vf-handoff { display: grid; grid-template-columns: 1.4fr 1fr; gap: 70px; align-items: center; padding-block: 94px; }
.vf-handoff h2 { margin: 0; color: var(--a360-navy); font: 400 clamp(48px,5vw,76px)/.98 var(--a360-serif); letter-spacing: -.03em; }
.vf-handoff h2 em { color: #9b773e; }
.vf-handoff > div:last-child { max-width: 420px; justify-self: end; }
.vf-handoff p:not(.pf-kicker) { margin: 0 0 25px; color: #676f72; font-size: 13px; line-height: 1.9; }
/* Keep the desktop collection label above the aligned video and queue edge. */
@media (min-width: 1001px) {
  .vf-supporting { position: relative; }
  .vf-supporting-head { position: absolute; left: 0; right: 0; bottom: 100%; min-height: 0; margin-bottom: 14px; }
}
@media (max-width: 1100px) {
  .vf-rail-inner { gap: 15px; }
  .vf-current { flex-basis: 106px; }
  .vf-index-links a { padding-inline: 11px; }
  .vf-collection-gallery { gap: 22px; grid-template-columns: minmax(0,1.85fr) minmax(250px,1fr); }
  .vf-film--queue { gap: 12px; }
}
@media (max-width: 1000px) {
  .vf-collection-gallery { display: block; }
  .vf-film--feature .vf-film-copy { padding-top: 20px; }
  .vf-supporting { margin-top: 32px; }
  .vf-supporting-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; gap: 20px; }
  .vf-supporting-head > span { color: #887044; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .vf-film-track { flex-direction: row; gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c8baa0 transparent; }
  .vf-film--queue { display: block; flex: 0 0 31%; padding: 0 0 8px; border: 0; scroll-snap-align: start; }
  .vf-film--queue .vf-film-copy { padding-top: 13px; }
  .vf-film--queue .vf-film-copy strong { font-size: 27px; }
  .vf-film--queue .vf-play { width: 39px; height: 39px; }
  .vf-film--queue .vf-play svg { width: 16px; height: 16px; }
  .vf-section-heading { gap: 35px; grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 900px) {
  body[data-portfolio-page="video"] { --portfolio-scroll-offset: 124px; }
  .vf-rail-inner { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding-block: 12px 9px; min-height: 0; }
  .vf-current { margin: 0; }
  .vf-current > span { font-size: 7px; margin-bottom: 2px; }
  .vf-current > strong { height: 1.3em; font: 800 12px/1.3 var(--a360-sans); }
  .vf-index-links { grid-column: 1/-1; gap: 6px; margin-inline: calc(-1 * clamp(24px,4vw,64px)); padding: 2px clamp(24px,4vw,64px); scroll-padding-inline: 24px; }
  .vf-index-links a { min-height: 36px; padding: 9px 13px; border-color: #d7cfc0; }
  .vf-index-links a strong { font-size: 10px; }
  .vf-intro { gap: 35px; padding-block: 55px; }
  .vf-intro h2 { font-size: 67px; }
  .vf-section-heading h2 { font-size: 57px; }
}
@media (max-width: 700px) {
  .vf-hero { min-height: max(710px,94svh); }
  .vf-hero .pf-hero-content { padding-block: 140px 137px; }
  .vf-hero h1 { font-size: clamp(88px,21vw,120px); }
  .vf-hero .pf-hero-description { margin-block: 24px; font-size: 13px; }
  .vf-intro { grid-template-columns: 1fr; gap: 21px; padding-block: 35px 41px; }
  .vf-intro h2 { font-size: 64px; }
  .vf-intro .pf-kicker { font-size: 8px; margin-bottom: 13px; }
  .vf-collection { padding-block: 48px 55px; }
  .vf-section-heading { grid-template-columns: 1fr; gap: 19px; margin-bottom: 26px; }
  .vf-section-heading h2 { font-size: clamp(43px,11.7vw,63px); }
  .vf-section-intro { max-width: 450px; justify-self: start; padding: 0; }
  .vf-film-copy { padding-top: 17px; gap: 12px; }
  .vf-film-copy strong { font-size: 32px; }
  .vf-film-copy small { font-size: 7px; }
  .vf-play { width: 52px; height: 52px; }
  .vf-play svg { width: 20px; height: 20px; }
  .vf-watch-label { bottom: 14px; left: 14px; font-size: 7px; }
  .vf-duration { font-size: 8px; bottom: 11px; right: 11px; }
  .vf-supporting { margin-top: 29px; }
  .vf-supporting-head { margin-bottom: 13px; }
  .vf-supporting-head > span { font-size: 8px; }
  .vf-film-track { gap: 13px; margin-right: -22px; padding-right: 22px; }
  .vf-film--queue { flex-basis: 79%; }
  .vf-film--queue .vf-film-copy strong { font-size: 28px; }
  .vf-film--queue .vf-duration { right: 9px; bottom: 9px; }
  .vf-business-grid { grid-template-columns: 1fr; gap: 29px; }
  .vf-business-grid .vf-film-copy { padding-top: 15px; }
  .vf-business-grid .vf-film-copy strong { font-size: 32px; }
  .vf-handoff { grid-template-columns: 1fr; gap: 24px; padding-block: 58px; }
  .vf-handoff h2 { font-size: clamp(43px,11.5vw,62px); }
  .vf-handoff > div:last-child { justify-self: start; max-width: 100%; width: 100%; }
  .vf-handoff p:not(.pf-kicker) { font-size: 12px; margin-bottom: 14px; }
}
@media (max-width: 600px) {
  .vf-index-links { margin-inline: -22px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-preview-host,.vf-play,.vf-index-indicator { transition: none; }
}

/* The queue is a film picker on desktop; every thumbnail also opens the film directly. */
.vf-screening { min-width: 0; }
.vf-screening .vf-film-copy { min-height: 94px; padding-block: 20px 14px; }
.vf-screening .vf-film-copy strong { font-size: clamp(30px,2.8vw,42px); }
.vf-screening .vf-film-copy > span:first-child { min-width: 0; }
.vf-screening-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 53px; border-top: 1px solid #d9d1c1; }
.vf-screening-note { color: #797467; font-size: 9px; }
.vf-screening-controls { display: flex; align-items: center; gap: 12px; }
.vf-screening-controls button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #c8bcaa; border-radius: 3px; background: transparent; color: var(--a360-navy); transition: background .2s; }
.vf-screening-controls button:hover { background: #e6dcc8; }
.vf-screening-controls button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.vf-screening-controls button:first-child svg { transform: rotate(180deg); }
.vf-screening-controls > span { min-width: 40px; color: var(--a360-navy); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-screening-controls > span > span { color: #8c8577; font-weight: 400; }
.vf-queue-item { position: relative; display: grid; grid-template-columns: 86px minmax(0,1fr) 16px; align-items: center; gap: 12px; min-width: 0; padding: 11px 10px; border-radius: 3px; color: var(--a360-navy); transition: background .22s,color .22s; }
.vf-queue-item:hover { background: #e8e2d5; }
.vf-queue-item.is-selected { background: var(--a360-navy); color: white; }
.vf-queue-thumb { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--a360-navy); }
.a360-homepage .vf-queue-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-queue-thumb > span { position: absolute; inset: 0; display: grid; place-items: center; color: white; background: #07182724; }
.vf-queue-thumb svg { width: 14px; height: 14px; fill: currentColor; filter: drop-shadow(0 1px 3px #071827); }
.vf-queue-copy { display: block; min-width: 0; }
.vf-queue-copy small { display: flex; gap: 10px; margin-bottom: 6px; color: #857451; font-size: 8px; letter-spacing: .04em; }
.vf-queue-copy small > span:first-child { opacity: .75; }
.vf-queue-copy strong { display: block; font: 400 clamp(20px,1.9vw,26px)/1.08 var(--a360-serif); }
.vf-queue-item.is-selected .vf-queue-copy small { color: #e5c78a; }
.vf-queue-play svg { width: 12px; height: 12px; fill: currentColor; }
.vf-queue-play { opacity: 0; transition: opacity .2s; }
.vf-queue-item:is(:hover,:focus-visible,.is-selected) .vf-queue-play { opacity: 1; }
.vf-index-links a { gap: 7px; }
.vf-reading-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #c6a363; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.vf-handoff-actions { display: flex; flex-wrap: wrap; gap: 11px; }
/* Content is visible by default; JS opts offscreen elements into one-time reveals. */
[data-film-reveal].vf-reveal-waiting { opacity: 0; transform: translateY(26px); }
[data-film-reveal].vf-reveal-ready { transition: opacity .7s ease var(--film-reveal-delay,0ms),transform .85s cubic-bezier(.18,.65,.25,1) var(--film-reveal-delay,0ms); }
.vf-film.is-changing .vf-film-media > img { animation: vf-film-change .45s ease both; }
@keyframes vf-film-change { from { opacity: .35; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1200px) and (min-width: 1001px) {
  .vf-queue-item { grid-template-columns: 72px minmax(0,1fr) 12px; gap: 10px; padding: 9px 8px; }
  .vf-queue-copy strong { font-size: 21px; }
  .vf-index-links a { padding-inline: 9px; }
}
@media (max-width: 1000px) {
  .vf-supporting { margin-top: 25px; }
  .vf-film-track { border: 0; }
  .vf-queue-item { display: block; flex: 0 0 31%; padding: 0 0 12px; border-radius: 0; scroll-snap-align: start; }
  .vf-queue-item.is-selected { color: var(--a360-navy); background: transparent; }
  .vf-queue-thumb { aspect-ratio: 16/9; }
  .vf-queue-thumb > span { background: #07182719; }
  .vf-queue-thumb svg { width: 22px; height: 22px; }
  .vf-queue-copy { padding: 13px 0 0; }
  .vf-queue-copy small { font-size: 9px; margin-bottom: 7px; }
  .vf-queue-copy strong { font-size: 27px; }
  .vf-queue-item.is-selected .vf-queue-copy small { color: #857451; }
  .vf-queue-play { display: none; }
  .vf-screening-note { font-size: 9px; }
  .vf-screening-controls button { width: 38px; height: 38px; }
}
@media (max-width: 700px) {
  .vf-screening .vf-film-copy { min-height: 93px; gap: 12px; }
  .vf-screening .vf-film-copy strong { font-size: 31px; }
  .vf-screening-controls { gap: 10px; }
  .vf-screening-controls button { width: 38px; height: 38px; }
  .vf-queue-item { flex-basis: 79%; }
  .vf-queue-copy strong { font-size: 29px; }
  .vf-handoff-actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-film-reveal].vf-reveal-waiting { opacity: 1; transform: none; }
  .vf-film.is-changing .vf-film-media > img { animation: none; }
}

.vf-screening-controls { visibility: hidden; }
.vf-gallery-ready .vf-screening-controls { visibility: visible; }
.vf-screening .vf-film-copy { height: 118px; min-height: 118px; }

.vf-swipe-cue { display: none; }
@media (max-width: 1000px) {
  .vf-supporting-head .vf-swipe-cue { display: block; color: #817a6d; font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .vf-screening-controls button { width: 44px; height: 44px; }
  .vf-queue-item.is-selected .vf-queue-thumb::after { position: absolute; inset: 0; content: ''; border: 3px solid #c6a363; pointer-events: none; }
}

/* Full films stay in the spotlight with Vimeo’s native playback controls. */
.vf-screening { position: relative; }
.vf-inline-player { position: absolute; inset: 0 0 auto; z-index: 5; width: 100%; aspect-ratio: 16 / 9; background: var(--a360-navy); }
.vf-inline-player[hidden],.vf-inline-player [hidden] { display: none !important; }
.vf-inline-host { position: absolute; inset: 0; }
.vf-inline-host iframe { display: block; width: 100%; height: 100%; border: 0; }
.vf-inline-fallback:focus-visible { outline: 2px solid #e7c784; outline-offset: 3px; }
.vf-inline-feedback { position: absolute; inset: 50% 14px auto; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(-50%); pointer-events: none; }
.vf-inline-status { max-width: 380px; margin: 0; padding: 10px 14px; background: #071827e6; color: #fff; font: 500 12px/1.5 var(--a360-sans); text-align: center; }
.a360-homepage .vf-inline-fallback { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; color: var(--a360-navy); background: var(--a360-gold); font: 700 11px/1.5 var(--a360-sans); pointer-events: auto; }
@media (max-width: 700px) {
  .vf-inline-status { font-size: 10px; padding: 7px 10px; }
}