/* Actual project work, framed by the September VISIONTONE identity. */
[hidden]{display:none!important}
.motion-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:25px 25px 19px;isolation:isolate}
.motion-hero-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:600;letter-spacing:.11em}
.motion-signal{width:31px;height:31px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-size:23px;line-height:1}
.motion-hero-type{font-size:clamp(36px,4.1vw,66px);line-height:.98;font-weight:800;letter-spacing:-.065em;margin:28px 0 25px}
.motion-hero-type>span{color:var(--yellow)}
.motion-hero .project-media{aspect-ratio:16/9;background:var(--paper);margin-inline:-9px}
.motion-hero figcaption{font-size:9px;line-height:1.65;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px}
.motion-hero figcaption a{display:flex;align-items:center;gap:8px;text-decoration:underline;color:var(--paper);flex-shrink:0;min-height:44px}
.motion-hero figcaption svg{width:13px;height:13px}
.hero .hero-visual{padding:0}
.hero:has(.motion-hero){align-items:center}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:62px 34px;align-items:start}
.project-card{min-width:0}
.project-card-link{display:block;color:var(--ink);text-decoration:none}
.project-media{position:relative;overflow:hidden;aspect-ratio:1.4;background:#e5e4dd;width:100%;isolation:isolate}
.project-media img,.project-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.project-media.website{padding:16px;background:#dedfd8}
.project-media.website:before{content:'';display:block;height:15px;background:var(--paper);border-bottom:1px solid #d3d4cf}
.project-media.website img{height:calc(100% - 15px);object-fit:cover;object-position:top;box-shadow:0 10px 25px #161b2012}
.project-media-video{background:var(--ink)}
.project-media-video video{object-fit:contain}
.project-card .project-media-video:after{content:'SILENT PREVIEW';position:absolute;bottom:13px;left:13px;font-size:8px;letter-spacing:.1em;font-weight:600;background:var(--paper);color:var(--ink);padding:7px 9px;pointer-events:none}
.project-card-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;font-weight:600;letter-spacing:.045em;margin:18px 0 10px;color:var(--muted)}
.project-card-title{display:flex;align-items:center;justify-content:space-between;gap:20px}
.project-card-title h3{font-size:30px;line-height:1.16;letter-spacing:-.04em;font-weight:600;margin:0}
.project-card-title svg{flex-shrink:0}
.project-card-link>p{font-size:14px;line-height:1.7;max-width:430px;margin:13px 0 0;color:var(--muted)}
.work-section-end{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:55px;padding-top:28px;border-top:1px solid #cdd0cb}
.work-section-end p{font-size:14px;color:var(--muted);margin:0}
.work-section-end .button{flex-shrink:0}
.website-band{background:#e5e7df;border-top:1px solid #d6d9d1;border-bottom:1px solid #d6d9d1}
.website-band-inner{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding-block:75px}
.website-band h2{font-size:57px}
.website-band p:not(.eyebrow){font-size:16px;line-height:1.75;max-width:370px;margin:23px 0}
.website-index a{display:grid;grid-template-columns:1fr 20px;gap:8px 20px;color:var(--ink);text-decoration:none;padding:25px 0;border-top:1px solid #bec4ba}
.website-index a:last-child{border-bottom:1px solid #bec4ba}
.website-index a>span:first-child{font-size:22px;letter-spacing:-.035em;font-weight:600}
.website-index .website-domain{grid-row:2;grid-column:1;font-size:11px;color:var(--muted)}
.website-index svg{grid-column:2;grid-row:1/3;align-self:center}
.work-intro{position:relative;padding-bottom:58px;display:grid;grid-template-columns:1.1fr 1fr;column-gap:60px}
.work-intro>.eyebrow,.work-intro>h1,.work-intro>.deck,.work-intro>.work-intro-note{grid-column:1}
.work-intro-film{grid-column:2;grid-row:1/5;align-self:center;background:var(--ink);padding:15px 15px 10px;min-width:0}
.work-intro-film .project-media{aspect-ratio:16/9}
.work-intro-film>span{display:block;color:var(--paper);font-size:8px;letter-spacing:.08em;padding:14px 3px 3px}
.work-intro>h1{font-size:clamp(65px,7vw,100px)}
.work-intro .deck{max-width:680px}
.work-intro-note{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:9px;letter-spacing:.06em;font-weight:600;color:var(--muted)}
.index-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;flex-shrink:0}
.portfolio-section{padding-bottom:100px}
.work-toolbar{border-top:1px solid #cdd0cb;padding-block:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;scroll-margin-top:25px}
.work-filters{display:none;flex-wrap:wrap;gap:8px}
.js .work-filters{display:flex}
.work-filters button{font:600 12px/1.5 Manrope,Arial,sans-serif;border:1px solid #cdd0cb;border-radius:0;background:transparent;color:var(--ink);padding:11px 14px;min-height:44px;cursor:pointer;display:flex;gap:14px;align-items:center}
.work-filters button>span{font-size:9px;font-weight:400}
.work-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.work-toolbar>p{font-size:11px;color:var(--muted);white-space:nowrap;margin:0}
.motion-footnote{font-size:11px;color:var(--muted);border-top:1px solid #cdd0cb;padding-top:22px;margin-top:55px}
.case-back{font-size:11px;min-height:44px;display:inline-flex;align-items:center;margin-bottom:28px;color:var(--muted);text-decoration:none}
.case-intro{padding-top:35px;padding-bottom:45px}
.case-intro h1{max-width:1100px;font-size:clamp(54px,7.3vw,104px)}
.case-title-dot{color:var(--blue)}
.case-intro .deck{max-width:740px}
.case-hero{margin-block:0}
.case-hero>.project-media{aspect-ratio:1.65}
.case-hero>.project-media-video{aspect-ratio:auto;height:min(72vw,650px)}
.case-hero>.project-media.website{padding:28px 28px 0;background:#dfe2da;aspect-ratio:1.54}
.case-hero>.project-media.website:before{height:23px}
.case-hero>.project-media.website img{height:calc(100% - 23px)}
.case-hero figcaption{display:flex;justify-content:space-between;gap:25px;font-size:10px;color:var(--muted);padding-block:17px;border-bottom:1px solid #cdd0cb}
.website-case{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.mobile-capture{width:min(280px,80%);justify-self:center;background:var(--ink);padding:9px;box-shadow:20px 24px 0 #e6e7df}
.mobile-capture img{display:block;width:100%;height:auto}
.website-case-copy h2{font-size:55px}
.website-case-copy>p:not(.eyebrow){font-size:16px;line-height:1.85;margin-top:25px;margin-bottom:28px;max-width:480px}
.website-case-copy .button{font-size:12px}
.website-case-domain{display:block;font-size:10px;color:var(--muted);margin-top:18px}
.case-context{font-size:12px!important;color:var(--muted);line-height:1.85;max-width:680px}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;padding-block:0 75px}
.case-gallery figure{margin:0}
.case-gallery .project-media{background:#ece9df;aspect-ratio:1.4}
.case-gallery .project-media img{object-fit:contain;padding:25px}
.case-gallery .project-media.portrait{background:var(--ink);aspect-ratio:auto;height:508px}
.case-gallery .project-media.portrait img{width:auto;height:100%;max-width:100%;padding:0;margin:auto}
.case-gallery figcaption{font-size:10px;line-height:1.75;color:var(--muted);padding-top:13px}
.case-gallery>.case-context{grid-column:1/-1;margin-top:5px}
.related-heading{display:grid;grid-template-columns:1fr auto;gap:18px 30px;align-items:end;margin-bottom:38px}
.related-heading .eyebrow{grid-column:1/-1;margin:0}
.related-heading h2{font-size:48px}
.related-heading .text-link{font-size:12px}
.related-work{border-top:1px solid #cdd0cb}
.motion-control{display:none;position:fixed;right:20px;bottom:20px;z-index:30;align-items:center;gap:10px;font:600 11px/1.5 Manrope,Arial,sans-serif;min-height:44px;padding:12px 16px;border:1px solid var(--paper);background:var(--ink);color:var(--paper);box-shadow:0 3px 16px #161b2019;cursor:pointer}
.js .motion-control{display:inline-flex}
.motion-control-icon{display:flex;gap:3px;width:11px}
.motion-control-icon:before,.motion-control-icon:after{content:'';height:12px;width:3px;background:currentColor}
.motion-control[aria-pressed=true] .motion-control-icon:after{display:none}
.motion-control[aria-pressed=true] .motion-control-icon:before{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;background:transparent}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-paused [data-motion]{animation:none!important;opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:no-preference){
  [data-motion=project].motion-play{animation:project-register 850ms var(--motion-ease) both}
  .project-card-link .project-media img{transition:transform 700ms var(--motion-ease)}
  .project-card-link svg,.website-index svg{transition:transform 300ms var(--motion-ease)}
  .project-card-link:hover .project-media img{transform:scale(1.025)}
  .project-card-link:hover svg,.website-index a:hover svg{transform:translate(3px,-3px)}
  .motion-hero.motion-play:after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);transform-origin:left;animation:line-register 1400ms var(--motion-ease) both}
}
@keyframes project-register{from{transform:translateY(24px);opacity:.3}to{transform:translateY(0);opacity:1}}
@media(min-width:1000px){.home-projects .project-card:nth-child(even){margin-top:85px}.home-projects{row-gap:15px}}
@media(max-width:1100px){.motion-hero{padding:20px}.motion-hero-type{font-size:43px;margin-block:25px}.motion-hero figcaption{display:block}.motion-hero figcaption a{min-height:35px}.website-band-inner{gap:55px}.website-case{gap:60px}.website-case-copy h2{font-size:45px}.project-card-title h3{font-size:26px}.project-grid{gap:50px 25px}}
@media(max-width:700px){
  .motion-hero{padding:24px 20px 12px;max-width:580px}.motion-hero-type{font-size:clamp(46px,12vw,75px);margin-block:25px}.motion-hero figcaption{display:flex;font-size:8px;gap:10px}.motion-hero figcaption a{font-size:8px;gap:5px}.motion-hero figcaption svg{width:12px}
  .project-grid{grid-template-columns:1fr;gap:38px}.project-card-title h3{font-size:27px}.project-card-meta{font-size:9px;margin-top:15px}.project-card-link>p{font-size:14px;margin-top:10px}.project-media.website{padding:12px}.work-section-end{display:block;margin-top:35px}.work-section-end .button{margin-top:24px}.work-section-end p{font-size:13px}
  .website-band-inner{grid-template-columns:1fr;gap:35px;padding-block:55px}.website-band h2{font-size:43px}.website-band p:not(.eyebrow){font-size:15px}.website-index a{padding-block:21px}.website-index a>span:first-child{font-size:22px}
  .work-intro{padding-bottom:35px;display:block}.work-intro>h1{font-size:clamp(52px,12vw,72px)}.work-intro-film{margin-top:32px;padding:12px 12px 10px}.work-intro-note{font-size:8px;margin-top:26px}.work-toolbar{display:block;padding-top:18px;padding-bottom:25px}.work-toolbar>p{margin-top:15px}.work-filters{gap:7px}.work-filters button{font-size:10px;padding:10px 12px;gap:10px}.portfolio-section{padding-bottom:55px}.motion-footnote{font-size:10px;margin-top:35px}
  .case-intro{padding-top:18px}.case-back{margin-bottom:20px}.case-intro h1{font-size:clamp(47px,12vw,72px);overflow-wrap:break-word}.case-intro .deck{font-size:17px}.case-hero>.project-media.website{padding:12px 12px 0;aspect-ratio:1.44}.case-hero>.project-media.website:before{height:16px}.case-hero>.project-media.website img{height:calc(100% - 16px)}.case-hero>.project-media-video{height:auto;aspect-ratio:1}.case-hero>.project-media-video.wide{aspect-ratio:1.6}.case-hero figcaption{font-size:9px;gap:20px;line-height:1.6}.case-hero figcaption>span:last-child{flex-shrink:0}
  .website-case{grid-template-columns:1fr;gap:45px}.mobile-capture{width:235px;order:2;margin-top:0}.website-case-copy{order:1}.website-case-copy h2{font-size:43px}.website-case-copy>p:not(.eyebrow){font-size:15px}.case-gallery{grid-template-columns:1fr;padding-bottom:55px}.case-gallery .project-media.portrait{height:440px}.case-gallery>.case-context{grid-column:auto}.related-heading{display:block}.related-heading h2{font-size:37px;margin-top:20px}.related-heading .text-link{margin-top:20px}.motion-control{right:12px;bottom:12px;font-size:10px;padding:10px 13px}.site-footer .footer-bottom{padding-bottom:55px}
}
@media(max-width:700px){
  .motion-control{right:8px;bottom:8px;width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center}
  .motion-control [data-motion-label]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
}
@media(prefers-reduced-motion:reduce){.motion-control{display:none!important}.project-card-link .project-media img{transform:none!important}}