.project-page{overflow-x:hidden}.project-page .navigation{position:relative;top:auto!important;left:auto;right:auto;transform:none!important;margin:36px 2.0833% 0}.project-page nav a{width:fit-content;letter-spacing:-.3px}.project-page nav a:hover,.project-page nav a[aria-current]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}.case-study{margin:100px 2.0833% 0}.project-topline{display:flex;justify-content:space-between;font-size:15px;color:#555;margin-bottom:65px}.project-topline a:hover,.case-footer>a:hover{text-decoration:underline;text-underline-offset:5px}.case-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:45px;align-items:start}.case-intro h1{font-family:"Franklin Demi",Arial,sans-serif;font-weight:600;letter-spacing:-1.5px;font-size:clamp(40px,5vw,72px);line-height:1.05;margin:0}.case-intro p{font-size:24px;line-height:1.35;max-width:520px;margin:0}figure{margin:0}.lead-image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#d8d8d8}figcaption{font-size:14px;color:#555;margin-top:12px}.overview{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:75px 0 95px}.case-study h2{font-family:"Franklin Demi",Arial,sans-serif;font-size:22px;font-weight:600;line-height:1.2;margin:0 0 22px}.overview-copy p,.image-and-copy p{font-size:22px;line-height:1.5;max-width:590px;margin:0}.project-facts{margin:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.project-facts dt{font-size:15px;color:#555;margin-bottom:12px}.project-facts dd{margin:0;font-size:18px}.section-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:25px}.section-title h2{margin:0}.section-title span{font-size:15px;color:#555}.film-frame{aspect-ratio:16/9;background:#181818;border-top:7px solid var(--project-colour);position:relative;color:#eee;display:grid;place-items:center}.film-frame video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}#video-placeholder{display:flex;flex-direction:column;gap:12px;text-align:center;font-size:22px}#video-placeholder span:last-child{color:#aaa;font-size:15px}.image-and-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;padding:95px 0;align-items:center}.image-and-copy img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.case-footer{border-top:1px solid #bcbcbc;padding:35px 0 45px;display:flex;justify-content:space-between;gap:30px;font-size:16px}.case-footer>a:last-child{display:flex;flex-direction:column;gap:10px;min-width:25%}.case-footer strong{font-family:"Franklin Demi",Arial,sans-serif;font-size:30px;font-weight:600}.case-footer span{font-size:14px;color:#555}@media(max-width:750px){.project-page .navigation{margin:28px 6% 0;gap:24px}.project-page nav a{font-size:18px}.case-study{margin:70px 6% 0}.project-topline{margin-bottom:40px}.case-intro,.overview,.image-and-copy{grid-template-columns:1fr;gap:30px}.case-intro p{font-size:21px}.case-intro h1{font-size:44px}.overview{padding:45px 0 60px}.overview-copy p,.image-and-copy p{font-size:20px}.project-facts{gap:16px}.project-facts dd{font-size:16px}.image-and-copy{padding:60px 0}.lead-image img{aspect-ratio:4/3}.case-footer{padding-bottom:30px}.case-footer strong{font-size:26px}}
/* Fine editorial grid from the InDesign portfolio. */
.project-page{position:relative}.project-page::before{content:'';position:absolute;z-index:0;pointer-events:none;top:0;bottom:0;left:2.0833%;right:2.0833%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0,rgba(0,0,0,.055) 1px,transparent 1px,transparent calc(100% / 12));border-right:1px solid rgba(0,0,0,.055)}.project-page .navigation,.case-study{position:relative;z-index:1}.case-study p{white-space:pre-line}.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;padding:0 0 80px}.gallery-item img{width:100%;height:auto;display:block;border-radius:2px}.gallery-item.wide{grid-column:1/-1}.gallery-item figcaption{font-size:14px}.logo-image img{object-fit:contain;padding:10%;background:#fafafa}.copy-only{grid-template-columns:1fr;max-width:65%;padding-top:0}.project-page nav a{font-size:inherit}.project-page .navigation{font-size:22px;line-height:1.15}@media(max-width:750px){.project-page .navigation{font-size:19px}.project-page nav{font-size:18px}.project-gallery{grid-template-columns:1fr;gap:28px;padding-bottom:50px}.gallery-item.wide{grid-column:auto}.copy-only{max-width:100%}.project-page::before{left:6%;right:6%;background-size:auto;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 1px,transparent 1px,transparent 25%)}}

/* Project text follows the same scale as the opening screen. */
.project-page .navigation{font-size:var(--type-navigation)}.case-intro h1,.case-intro p,.case-study h2,.overview-copy p,.image-and-copy p,.case-footer strong,#video-placeholder{font-size:var(--type-page);line-height:1.45}.case-intro h1{letter-spacing:-.3px}.case-intro p{max-width:520px}.case-footer strong{letter-spacing:-.3px}.project-facts dd{font-size:1rem}figcaption,.gallery-item figcaption,.case-footer span{font-size:var(--type-label)}@media(max-width:750px){.project-page nav{font-size:1.125rem}}

/* Original ten-column grid: 158.6px columns, 29px gutters on a 1920px page. */
.project-page::before{left:0;right:0;border:0;background-image:linear-gradient(90deg,transparent calc(1.901042% - .5px),#eee calc(1.901042% - .5px),#eee calc(1.901042% + .5px),transparent calc(1.901042% + .5px)),linear-gradient(90deg,transparent calc(10.161458% - .5px),#eee calc(10.161458% - .5px),#eee calc(10.161458% + .5px),transparent calc(10.161458% + .5px)),linear-gradient(90deg,transparent calc(11.671875% - .5px),#eee calc(11.671875% - .5px),#eee calc(11.671875% + .5px),transparent calc(11.671875% + .5px)),linear-gradient(90deg,transparent calc(19.932292% - .5px),#eee calc(19.932292% - .5px),#eee calc(19.932292% + .5px),transparent calc(19.932292% + .5px)),linear-gradient(90deg,transparent calc(21.442708% - .5px),#eee calc(21.442708% - .5px),#eee calc(21.442708% + .5px),transparent calc(21.442708% + .5px)),linear-gradient(90deg,transparent calc(29.703125% - .5px),#eee calc(29.703125% - .5px),#eee calc(29.703125% + .5px),transparent calc(29.703125% + .5px)),linear-gradient(90deg,transparent calc(31.213542% - .5px),#eee calc(31.213542% - .5px),#eee calc(31.213542% + .5px),transparent calc(31.213542% + .5px)),linear-gradient(90deg,transparent calc(39.473958% - .5px),#eee calc(39.473958% - .5px),#eee calc(39.473958% + .5px),transparent calc(39.473958% + .5px)),linear-gradient(90deg,transparent calc(40.984375% - .5px),#eee calc(40.984375% - .5px),#eee calc(40.984375% + .5px),transparent calc(40.984375% + .5px)),linear-gradient(90deg,transparent calc(49.244792% - .5px),#eee calc(49.244792% - .5px),#eee calc(49.244792% + .5px),transparent calc(49.244792% + .5px)),linear-gradient(90deg,transparent calc(50.755208% - .5px),#eee calc(50.755208% - .5px),#eee calc(50.755208% + .5px),transparent calc(50.755208% + .5px)),linear-gradient(90deg,transparent calc(59.015625% - .5px),#eee calc(59.015625% - .5px),#eee calc(59.015625% + .5px),transparent calc(59.015625% + .5px)),linear-gradient(90deg,transparent calc(60.526042% - .5px),#eee calc(60.526042% - .5px),#eee calc(60.526042% + .5px),transparent calc(60.526042% + .5px)),linear-gradient(90deg,transparent calc(68.786458% - .5px),#eee calc(68.786458% - .5px),#eee calc(68.786458% + .5px),transparent calc(68.786458% + .5px)),linear-gradient(90deg,transparent calc(70.296875% - .5px),#eee calc(70.296875% - .5px),#eee calc(70.296875% + .5px),transparent calc(70.296875% + .5px)),linear-gradient(90deg,transparent calc(78.557292% - .5px),#eee calc(78.557292% - .5px),#eee calc(78.557292% + .5px),transparent calc(78.557292% + .5px)),linear-gradient(90deg,transparent calc(80.067708% - .5px),#eee calc(80.067708% - .5px),#eee calc(80.067708% + .5px),transparent calc(80.067708% + .5px)),linear-gradient(90deg,transparent calc(88.328125% - .5px),#eee calc(88.328125% - .5px),#eee calc(88.328125% + .5px),transparent calc(88.328125% + .5px)),linear-gradient(90deg,transparent calc(89.838542% - .5px),#eee calc(89.838542% - .5px),#eee calc(89.838542% + .5px),transparent calc(89.838542% + .5px)),linear-gradient(90deg,transparent calc(98.098958% - .5px),#eee calc(98.098958% - .5px),#eee calc(98.098958% + .5px),transparent calc(98.098958% + .5px));background-size:100% 100%;background-repeat:no-repeat}.project-page .navigation{margin-left:1.901042%;margin-right:1.901042%}.case-study{margin-left:1.901042%;margin-right:1.901042%}
@media(max-width:750px){.project-page .navigation,.case-study{margin-left:6%;margin-right:6%}.project-page::before{left:6%;right:6%;background-image:linear-gradient(90deg,#eee 0 1px,transparent 1px calc(50% - 7px),#eee calc(50% - 7px) calc(50% - 6px),transparent calc(50% - 6px) calc(50% + 6px),#eee calc(50% + 6px) calc(50% + 7px),transparent calc(50% + 7px) calc(100% - 1px),#eee calc(100% - 1px));background-size:100% 100%}}
/* Metadata shares the source document's ten-column geometry. */
@media(min-width:751px){
  .overview{grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1.510417vw}
  .overview-copy{grid-column:1 / span 4}
  .project-facts{grid-column:5 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:1.510417vw;align-content:start}
  .project-facts>div{grid-column:span 2;min-width:0}
}
@media(max-width:750px){
  .project-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:24px}
}
@media(min-width:751px){
  .case-intro{grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1.510417vw}
  .case-intro>h1{grid-column:1 / span 4}
  .case-intro>p{grid-column:5 / -1;max-width:520px}
}

/* Draw guides with the same CSS tracks used by navigation, not percentage gradients. */
.project-page::before{content:none}.page-grid{position:absolute;inset:0 1.901042%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:1.510417vw;pointer-events:none;z-index:0}.page-grid>span{box-shadow:inset 1px 0 #eee,inset -1px 0 #eee}@media(max-width:750px){.page-grid{left:6%;right:6%;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.page-grid>span:nth-child(n+3){display:none}}

.page-grid{grid-template-columns:repeat(12,minmax(0,1fr))}@media(min-width:751px){.overview,.case-intro{grid-template-columns:repeat(12,minmax(0,1fr))}.overview-copy,.case-intro>h1{grid-column:1 / span 6}.project-facts,.case-intro>p{grid-column:7 / -1}}@media(max-width:750px){.page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Large project headlines, with quieter information around them. */
.case-intro h1{font-size:clamp(48px,5.8vw,88px);line-height:1;letter-spacing:-.045em;overflow-wrap:break-word}.case-intro p,.overview-copy p,.image-and-copy p{font-size:16px;line-height:1.45}.case-study h2{font-size:16px;line-height:1.3}.project-facts dt,.project-topline,.section-title span{font-size:13px}.project-facts dd{font-size:15px}.case-footer strong{font-size:24px;line-height:1.15}.project-page nav{font-size:16px}@media(max-width:750px){.case-intro h1{font-size:clamp(40px,9vw,60px)}.project-page nav{font-size:15px}.case-intro p,.overview-copy p,.image-and-copy p{font-size:16px}}

.project-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 1.510417vw;margin-top:40px}.project-films figure{min-width:0}.project-films video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#181818}.project-films figcaption{font-size:13px;margin-top:10px}@media(max-width:750px){.project-films{grid-template-columns:1fr;gap:28px;margin-top:28px}}

/* Fluid film compositions, using the same twelve tracks as Fun. */
.motion-section.has-films{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.510417vw;row-gap:24px;padding:8px 0 40px}.has-films .section-title{grid-column:1 / -1;margin-bottom:10px}.has-films .film-frame{grid-column:1 / span 8;border:0;overflow:visible;align-self:start}.has-films .film-frame video{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/9;background:#181818}.lead-film-caption{position:absolute;top:0;left:calc(100% + 1.510417vw);width:calc(50% - .7552085vw);font-size:13px;margin:0;line-height:1.35;color:#555}.has-films .project-films{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:64px 1.510417vw;margin-top:54px;align-items:start}.film-tile-2{grid-column:8 / span 5}.film-tile-3{grid-column:1 / span 6}.film-tile-4{grid-column:9 / span 4;margin-top:70px}.film-tile-5{grid-column:3 / span 7}.film-tile-6{grid-column:8 / span 5}.has-films .project-films video{height:auto}.has-films .project-films figcaption{margin-top:10px}
@media(max-width:750px){.motion-section.has-films{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.has-films .film-frame{grid-column:1 / -1}.lead-film-caption{position:static;width:auto;margin-top:10px}.has-films .project-films{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px;margin-top:16px}.has-films .film-tile{grid-column:1 / -1;margin-top:0}.has-films .film-tile-4{grid-column:2}.has-films .film-tile-6{grid-column:1}}

/* Opening information spans the page; media occupies the right nine columns. */
@media(min-width:751px){
 .case-study{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.510417vw}
 .case-study> *{grid-column:1 / -1;min-width:0}
 .case-study>.lead-image,.case-study>.motion-section,.case-study>.image-and-copy,.case-study>.project-gallery{grid-column:4 / -1}
 .case-study>.lead-image{margin-top:16px}
 .image-and-copy{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:1.510417vw}
 .image-and-copy>figure{grid-column:1 / span 6}.image-and-copy>div{grid-column:7 / -1}
 .image-and-copy.copy-only{max-width:none}.image-and-copy.copy-only>div{grid-column:1 / span 6}
 .motion-section.has-films,.has-films .project-films{grid-template-columns:repeat(9,minmax(0,1fr))}
 .has-films .film-frame{grid-column:1 / -1}
 .lead-film-caption{position:static;width:auto;margin-top:10px}
 .film-tile-2{grid-column:5 / span 5}.film-tile-3{grid-column:1 / span 5}.film-tile-4{grid-column:7 / span 3}.film-tile-5{grid-column:2 / span 7}.film-tile-6{grid-column:5 / span 5}
 .project-gallery{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:1.510417vw;row-gap:48px}
 .project-gallery .gallery-item:not(.wide){grid-column:span 4}.project-gallery .gallery-item:not(.wide):nth-child(even){grid-column:span 5}
 .project-gallery .gallery-item.wide{grid-column:1 / -1}
}

@media(min-width:751px){.has-films .film-frame{display:block;aspect-ratio:auto!important;background:transparent;color:inherit}}

/* A full-width hero followed by one coherent editorial composition. */
.case-study>.lead-image{grid-column:1 / -1;margin-top:0}.lead-image img{aspect-ratio:16/9}.project-editorial{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.510417vw;padding:64px 0 72px}.project-notes{grid-column:1 / span 3;display:flex;flex-direction:column;gap:36px;align-self:start;padding-right:16px}.project-media{grid-column:4 / -1;min-width:0}.project-notes h2{font-size:13px;line-height:1.3;color:#666;font-family:"Franklin Book",Arial,sans-serif;font-weight:400;margin-bottom:12px}.project-notes p{font-size:16px;line-height:1.5;margin:0}.project-notes .project-facts{display:grid;grid-template-columns:1fr;gap:18px}.project-notes .project-facts>div{grid-column:auto}.project-notes .project-facts dt{margin-bottom:5px}.project-notes .project-facts dd{font-size:14px}.project-media .motion-section{display:block;padding:0;margin-bottom:40px}.project-media .section-title{margin:0 0 16px}.project-media .section-title h2,.project-media .section-title span{font-size:13px;font-weight:400;color:#666}.project-media .film-frame{display:block;aspect-ratio:auto!important;background:transparent;border:0}.project-media .film-frame video{position:static;width:100%;height:auto;aspect-ratio:16/9;display:block;background:#111}.project-media .lead-film-caption{position:static;width:auto;font-size:12px;margin-top:8px}.project-media .project-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 1.510417vw;margin-top:32px}.project-media .film-tile{grid-column:auto;margin:0}.project-media .film-tile:last-child{grid-column:1 / -1}.project-media .project-films figcaption,.project-media figcaption{font-size:12px;margin-top:8px}.project-media .project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 1.510417vw;padding:0}.project-media .project-gallery .gallery-item{grid-column:auto}.project-media .project-gallery .gallery-item.wide{grid-column:1 / -1}.editorial-detail{margin-bottom:32px}.editorial-detail img{display:block;width:100%;height:auto}.case-footer{grid-column:1 / -1}
@media(max-width:750px){.project-editorial{grid-template-columns:1fr;gap:40px;padding:40px 0 48px}.project-notes,.project-media{grid-column:1;}.project-notes{padding:0;gap:24px}.project-notes .project-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.project-media .project-films,.project-media .project-gallery{grid-template-columns:1fr;gap:24px}.project-media .film-tile,.project-media .film-tile:last-child,.project-media .project-gallery .gallery-item{grid-column:1}.lead-image img{aspect-ratio:4/3}}

/* Bottom-aligned media reel: vertical scroll moves a pinned horizontal track. */
.project-editorial{padding:24px 0 64px}.project-editorial .project-notes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.510417vw;padding:0}.project-notes>.overview-copy{grid-column:1 / span 4}.project-notes>.project-facts{grid-column:6 / span 2}.project-notes>div:last-child{grid-column:9 / span 4}.project-reel{grid-column:1 / -1;position:relative;min-width:0}.reel-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:32px;overflow:hidden}.reel-hint{font-size:13px;color:#666;margin:0 0 16px}.reel-viewport{overflow:hidden;min-width:0}.reel-track{display:flex;align-items:flex-end;gap:1.510417vw;width:max-content;will-change:transform}.reel-item{--media-ratio:1.6;flex:none;width:calc(min(62svh,620px) * var(--media-ratio));margin:0}.reel-item img,.reel-item video{display:block;width:100%;height:min(62svh,620px);object-fit:contain;background:#f7f7f7}.reel-item video{background:#111}.reel-item figcaption{font-size:12px;line-height:1.4;margin-top:10px}.case-footer{margin-top:48px}
@media(max-width:750px),(prefers-reduced-motion:reduce){.project-reel{height:auto!important}.reel-sticky{position:relative;height:auto;padding-bottom:24px}.reel-viewport{overflow-x:auto;scroll-snap-type:x proximity}.reel-track{transform:none!important;will-change:auto;gap:18px}.reel-item{width:min(80vw,800px);scroll-snap-align:start}.reel-item img,.reel-item video{height:50svh}.project-editorial .project-notes{display:flex;gap:28px}.reel-hint{margin-top:30px}}

/* Lift the media reel within the pinned viewport. */
.reel-sticky{padding-bottom:clamp(145px,27svh,275px)}
@media(max-width:750px),(prefers-reduced-motion:reduce){.reel-sticky{padding-bottom:40px}}

/* Compact end-of-project navigation stays visible after the reel. */
.case-footer{position:relative;z-index:2;margin-top:16px;padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #dedede;font-size:13px;min-height:80px}.case-footer>a:last-child{min-width:0;display:inline-flex;flex-direction:row;align-items:center;gap:8px}.case-footer strong{font-family:"Franklin Book",Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.2;letter-spacing:0}.case-footer span{font-size:13px}.case-footer .copyright{margin:0;color:#666;font-size:12px}.case-footer #next-project{margin-left:auto;display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-width:0}.case-footer #next-project::after{content:'→';font-size:18px}@media(max-width:750px){.case-footer{flex-wrap:wrap;gap:16px;padding:18px 0 22px}.case-footer .copyright{order:3;width:100%}.case-footer strong{font-size:15px}}

/* Keep project navigation with the media throughout the pinned scroll. */
.reel-sticky .case-footer{flex-shrink:0;margin-top:22px;min-height:0;padding:16px 0 0}.reel-sticky{padding-bottom:clamp(90px,20svh,205px)}
@media(max-width:750px),(prefers-reduced-motion:reduce){.reel-sticky{padding-bottom:40px}.reel-sticky .case-footer{margin-top:24px;padding-top:16px}}

.reel-sticky .case-footer{margin-top:10px;padding:8px 0 0;gap:16px;min-height:0}.reel-sticky .case-footer,.reel-sticky .case-footer span{font-size:12px}.reel-sticky .case-footer strong{font-size:14px}.reel-sticky .case-footer .copyright{font-size:11px}.reel-sticky{padding-bottom:clamp(28px,5svh,54px)}@media(max-width:750px),(prefers-reduced-motion:reduce){.reel-sticky{padding-bottom:20px}.reel-sticky .case-footer{margin-top:10px;padding-top:8px;gap:10px}}

/* Preserve the raised media position independently of the compact footer. */
.reel-sticky{justify-content:flex-start;padding-top:clamp(30px,8svh,90px);padding-bottom:0}.reel-sticky .case-footer{margin-top:10px;padding:8px 0 0;min-height:0;gap:16px}
@media(max-width:750px),(prefers-reduced-motion:reduce){.reel-sticky{padding-top:0;padding-bottom:20px}}

/* Persistent project navigation aligned to the page guides. */
.project-page .navigation{position:sticky;top:0!important;z-index:30;margin-top:0;padding:24px 0 18px;background:var(--background);box-shadow:0 0 0 32px var(--background)}.project-page .case-study{margin-top:70px}@media(max-width:750px){.project-page .navigation{padding:20px 0 16px;box-shadow:0 0 0 24px #fff}.project-page .case-study{margin-top:48px}}

.project-page .header-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.510417vw;pointer-events:none;z-index:0}.header-grid>span{box-shadow:inset 1px 0 #eee,inset -1px 0 #eee}.project-page .navigation>.name,.project-page .navigation>nav{position:relative;z-index:1}@media(max-width:750px){.project-page .header-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.header-grid>span:nth-child(n+3){display:none}}

.project-page .navigation{box-shadow:none}@media(max-width:750px){.project-page .navigation{box-shadow:none}}



@media(min-width:751px){.case-intro>h1{grid-column:1 / span 5}.case-intro>p{grid-column:6 / -1}.project-editorial .project-notes>.project-facts{grid-column:6 / span 2;grid-row:auto}}

/* Media hangs from one top edge, with a deliberate rhythm of sizes. */
.reel-track{align-items:flex-start;min-height:calc(min(62svh,620px) + 30px)}.reel-item{--media-scale:1;width:calc(min(62svh,620px) * var(--media-scale) * var(--media-ratio))}.reel-item img,.reel-item video{height:calc(min(62svh,620px) * var(--media-scale))}@media(max-width:750px),(prefers-reduced-motion:reduce){.reel-track{min-height:calc(50svh + 30px)}.reel-item{width:calc(min(80vw,800px) * var(--media-scale))}.reel-item img,.reel-item video{height:calc(50svh * var(--media-scale))}}

/* Every resting media edge shares the page's twelve-column geometry. */
@media(min-width:751px){.reel-item{width:var(--grid-width,calc(min(62svh,620px) * var(--media-scale) * var(--media-ratio)))}.reel-item img,.reel-item video{height:var(--grid-height,calc(min(62svh,620px) * var(--media-scale)))}}

.reel-item{cursor:zoom-in}.reel-item:focus-visible{outline:2px solid #080808;outline-offset:5px}.viewer-open{overflow:hidden}.media-viewer{width:96vw;height:94svh;max-width:none;max-height:none;margin:auto;padding:48px 24px 24px;border:0;background:#fff;border-radius:4px;overflow:hidden}.media-viewer::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}.viewer-close{position:absolute;right:24px;top:16px;font-size:14px;z-index:1}.viewer-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.viewer-content img,.viewer-content video{display:block;width:100%;height:100%;object-fit:contain}.viewer-content video{background:#111}@media(max-width:750px){.media-viewer{width:96vw;height:90svh;padding:48px 12px 16px}.viewer-close{right:16px}}

@media(min-width:751px) and (prefers-reduced-motion:no-preference){.reel-sticky{padding-top:12px;padding-bottom:16px}.project-editorial{padding-bottom:28px}.reel-sticky .case-footer{margin-top:12px;padding-top:10px}.reel-viewport{flex-shrink:0}}

/* On phones the frame follows the media instead of letterboxing it. */
@media(max-width:750px){.reel-item img,.reel-item video,.reel-item iframe{width:100%;height:auto;aspect-ratio:var(--media-ratio,1.7777778);object-fit:contain;background:transparent}.reel-track{min-height:0}.project-page .header-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.header-grid>span:nth-child(-n+4){display:block}.header-grid>span:nth-child(n+5){display:none}}

/* Mobile case studies flow vertically across the full grid width. */
@media(max-width:750px){.project-reel{height:auto!important}.reel-sticky{position:static;height:auto!important;overflow:visible;padding:0 0 20px}.reel-viewport{width:100%;height:auto;overflow:visible}.reel-track{display:flex;flex-direction:column;gap:32px;width:100%;min-height:0;transform:none!important}.reel-item{flex:none;width:100%!important;max-width:100%;margin:0}.reel-item img,.reel-item video,.reel-item iframe{display:block;width:100%;height:auto;aspect-ratio:var(--media-ratio,1.7777778);object-fit:contain}.reel-hint{display:none}.reel-sticky .case-footer{margin-top:32px}}

/* Lead with credits, followed by the overview and project context. */
@media(min-width:751px){.project-editorial .project-notes>.project-facts{grid-column:1 / span 2;grid-row:1}.project-editorial .project-notes>.overview-copy{grid-column:4 / span 4;grid-row:1}}
.project-facts dd ul{margin:0;padding-left:1.1em;list-style:disc}.project-facts dd li+li{margin-top:6px}

/* Consistent breathing room between project information and the media reel. */
.project-page .project-editorial{padding-bottom:120px}

/* Pointer/touch focus should not leave a persistent frame around media. */
.reel-item:focus-visible,.reel-viewport:focus-visible{outline:1px solid #146bb3;outline-offset:3px}.reel-item.pointer-focus:focus,.reel-viewport.pointer-focus:focus{outline:none}

.case-intro.title-only>h1{grid-column:1 / -1}.case-intro.title-only>p{display:none}

.project-website{display:block;width:fit-content;font-size:13px;line-height:1.3;color:#666;margin-top:24px}.project-website:hover{text-decoration:underline;text-underline-offset:4px}.project-website:focus-visible{outline:2px solid #146bb3;outline-offset:4px}

.project-website:hover{text-decoration:none}

/* Keep project guides consistent with the four-column mobile navigation. */
@media(max-width:750px){
 .project-page .page-grid,.project-page .header-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}
 .project-page .page-grid>span:nth-child(-n+4),.project-page .header-grid>span:nth-child(-n+4){display:block}
 .project-page .page-grid>span:nth-child(n+5),.project-page .header-grid>span:nth-child(n+5){display:none}
}
.reel-item video,.reel-item iframe,.viewer-content video{background:transparent}

/* Expanded media sits inside the same blue anchor-point frame as the home canvas. */
.media-viewer{background:var(--background);padding:54px 44px 40px;overflow:visible}
.viewer-content{position:relative}.viewer-frame{position:relative;border:1px solid #146bb3;flex:none;max-width:100%;max-height:100%}
.viewer-frame>img,.viewer-frame>video,.viewer-frame>iframe{display:block;width:100%;height:100%;object-fit:contain;border:0;background:transparent}
.viewer-frame .frame-handle{z-index:3;pointer-events:none;width:7px;height:7px}
.viewer-direction{position:absolute;top:0;bottom:0;width:36px;z-index:4;font-size:28px;color:#146bb3;opacity:0;transition:opacity .15s}
.viewer-direction:hover,.viewer-direction:focus-visible{opacity:1}.viewer-prev{left:-38px;cursor:w-resize}.viewer-next{right:-38px;cursor:e-resize}
@media(max-width:750px){.media-viewer{padding:54px 28px 32px}.viewer-direction{width:24px;opacity:1;font-size:22px}.viewer-prev{left:-25px}.viewer-next{right:-25px}}

.viewer-prev{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M29%2016H3%20M13%206L3%2016L13%2026%22%20fill%3D%22none%22%20stroke%3D%22%23146bb3%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 16 16,pointer}

.viewer-next{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%2016H29%20M19%206L29%2016L19%2026%22%20fill%3D%22none%22%20stroke%3D%22%23146bb3%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 16 16,pointer}

/* Floating frame over the dimmed page, with cursor-only navigation. */
.media-viewer{background:transparent;box-shadow:none;border-radius:0}
.media-viewer::backdrop{background:rgba(0,0,0,.72);backdrop-filter:none}
.viewer-close{color:#fff}.viewer-direction,.viewer-direction:hover,.viewer-direction:focus-visible{opacity:1;color:transparent;font-size:0;background:transparent;box-shadow:none}
.viewer-direction{width:12%;}.viewer-prev{left:0}.viewer-next{right:0}
@media(max-width:750px){.viewer-direction{width:24px}.viewer-prev{left:-25px}.viewer-next{right:-25px}}
.viewer-prev{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23080808%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M21%2016H11%20M15%2012L11%2016L15%2020%22%20fill%3D%22none%22%20stroke%3D%22%23080808%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 16 16,pointer}
.viewer-next{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23080808%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M11%2016H21%20M17%2012L21%2016L17%2020%22%20fill%3D%22none%22%20stroke%3D%22%23080808%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 16 16,pointer}

.viewer-caption{position:absolute;left:-1px;bottom:calc(100% + 16px);width:max-content;max-width:calc(96vw - 88px);padding:7px 11px;background:#fff;color:#080808;border:1px solid #146bb3;font-size:13px;line-height:1.3;white-space:nowrap}
.viewer-caption .frame-handle{background:#fff}
@media(max-width:750px){.viewer-caption{font-size:11px;max-width:calc(96vw - 56px);padding:6px 8px}.viewer-caption-text{display:block;max-width:100%;overflow-x:auto;scrollbar-width:none}}

/* Larger side targets and a close control attached to the media frame. */
.viewer-caption{bottom:100%}
.viewer-direction{width:32%}
.viewer-close{top:-1px;right:-1px;transform:translate(50%,-50%);width:26px;height:26px;display:grid;place-items:center;line-height:1;font-size:22px;color:#146bb3;background:#fff;border:1px solid #146bb3;z-index:6}
.viewer-close:hover{background:#e9f1ff}
@media(max-width:750px){.viewer-direction{width:18%}.viewer-close{width:28px;height:28px}}

.viewer-close{top:auto;bottom:100%;right:-1px;transform:none;width:33px;height:33px}
@media(max-width:750px){.viewer-close{width:28px;height:28px}}

.viewer-close{color:#080808}.viewer-close .frame-handle{background:#fff;pointer-events:none}