/* Mirror customisation — shape and interaction.

   The original design system rounds almost everything by .2rem or .4rem,
   which at its vw-based root size lands at 2–4px: effectively square. These
   rules lift that to a real radius scale, turn the menu's diamond bullet into
   an arrow, and paint every hover in the brand blue. */

:root {
	/* the site's arrow, once, for rules that need it by name */
	--fcg-expand: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%209V3h6M21%209V3h-6M3%2015v6h6M21%2015v6h-6%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	--fcg-sound: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%209.2h3.1L11.8%205v14l-4.7-4.2H4z%27%20fill%3D%27%23000%27%2F%3E%3Cpath%20d%3D%27M15.2%209.4a3.8%203.8%200%200%201%200%205.2M17.9%207a7.4%207.4%200%200%201%200%2010%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	--fcg-sound-off: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%209.2h3.1L11.8%205v14l-4.7-4.2H4z%27%20fill%3D%27%23000%27%2F%3E%3Cpath%20d%3D%27M15.4%209.6l5.2%205.2M20.6%209.6l-5.2%205.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	--fcg-pause: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%277.2%27%20y%3D%275%27%20width%3D%273.4%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%23000%27%2F%3E%3Crect%20x%3D%2713.4%27%20y%3D%275%27%20width%3D%273.4%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
	--fcg-play: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M8.5%205.6v12.8L19%2012z'/%3E%3C/svg%3E");
	--fcg-close: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5.5%205.5L18.5%2018.5M18.5%205.5L5.5%2018.5%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	--fcg-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	--r-btn: 999rem; /* pills */
	--r-box: 1.6rem; /* panels, cards, text blocks */
	--r-media: 1.2rem; /* images and video */
	--hover-blue: #001eff;
	/* the design's purple and green accents both become the brand blue, same
	   shade as the logo — they drive the block fills and the accent dots */
	--c-purple: #001eff;
	--c-green: #001eff;
}

/* ---------- buttons: full pills ---------- */

.btn,
.glass-btn .glass-btn-bg,
.showreel .showreel-toggle,
.showreel .showreel-toggle-text,
#contact .form-section .form-input,
.newsletter-form .form-input,
.newsletter-form button,
.toast .toast-inner {
	border-radius: var(--r-btn);
}

/* ---------- panels, cards and text blocks ---------- */

#home .exp .exp-subtitle,
#home .exp .exp-text-wrapper,
#services .info .info-content,
#work .work-filter-bg,
#work .work-switcher-bg,
#work .work-grid .project-text,
#work .work-cta .work-cta-inner,
.work .work-grid .work-col.work-col-project .work-text,
#about .team .team-member-socials .team-member-socials-bg,
.showreel .showreel-video-wrapper,
.contact .contact-link-bg,
.newsletter-modal .newsletter-header,
.footer .f-bg,
.footer .f-bg .border-inner,
.footer .f-inner,
.pre-footer .pre-footer-inner,
#about .team .team-images-wrapper .team-images,
#home .about .about-images {
	border-radius: var(--r-box);
}

/* Block buttons are a square container with a full-size colour layer behind
   the label. The fill must take the container's radius, never a pill — at
   block size a pill radius turns the fill into a stadium floating inside its
   own box. */
.btn-block,
.btn-block .btn-block-inner,
.work .work-grid .work-col .work-inner,
.work .work-grid .work-col .work-link {
	border-radius: var(--r-box);
	overflow: hidden;
}
.btn-block:before,
.btn .btn-bg,
.glass-btn .glass-btn-bg {
	border-radius: inherit;
}

/* the services tiles carried no radius at all — the squarest blocks on the
   page, and the ones the brief called out */
.services .service,
#home .services .service,
#services .services .service {
	border-radius: var(--r-box);
	overflow: hidden;
}

/* ---------- media ---------- */

/* !important because the design system reaches these through longer
   selectors (.pre-footer .media-wrapper, #work .work-grid .media-wrapper …)
   that would otherwise keep their near-square .4rem */
.media-wrapper,
#about .team .team-intro-image,
#work .work-grid .project-media,
#work .work-list .project-media,
#contact .hero-media-inner {
	border-radius: var(--r-media) !important;
	overflow: hidden;
}
/* the picture itself has to follow the frame it sits in */
.media-wrapper .media-inner,
.media-wrapper .media {
	border-radius: inherit;
}

/* ---------- menu: the diamond bullet becomes an arrow ---------- */

/* Sized just under the 8.4rem menu type — the glyph fills about two thirds of
   its mask box, so the box runs larger than the visual arrow. The label has to
   slide further than the original 4rem to make room for it. */
.menu .m-links .m-link-bullet {
	width: 7rem;
	height: 7rem;
	border-radius: 0;
	background: var(--c-white);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* it still grows in on hover, but an arrow must not arrive rotated 45° */
.menu .m-links .m-link:hover .m-link-bullet {
	transform: rotate(0) scale(1) translateY(-50%);
}
.menu .m-links .m-link:hover .m-link-inner {
	transform: translate(8.4rem);
}

@media (max-width: 1099px) {
	/* the menu type drops to 5.4rem here, so the arrow follows it down */
	.menu .m-links .m-link-bullet {
		width: 4.6rem;
		height: 4.6rem;
	}
	.menu .m-links .m-link:hover .m-link-inner {
		transform: translate(5.6rem);
	}
}

/* ---------- hover: everything interactive goes blue ---------- */

/* the site colours its links from deeply nested rules (.nav .n-links .n-link
   and friends) and transitions them, so these need !important to land */
/* Links go blue on hover; buttons keep their own colours — they already have
   a pill, a fill and a diamond doing the work. */
a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):not(.fcg-work-card):hover,
a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):not(.fcg-work-card):hover span,
a:not(.n-logo):not(.btn):not(.btn-block-link):not(.fcg-cta):not(.fcg-svc-cta):not(.fcg-work-card):hover p,
.m-link:hover,
.m-link:hover .m-link-inner,
.n-link:hover,
.contact-link:hover,
.faq-toggle:hover,
.work-filter:hover {
	color: var(--hover-blue) !important;
}
/* icon glyphs too — but never the logo, whose own colours are the point */
a:not(.n-logo):not(.btn):not(.fcg-cta):not(.fcg-svc-cta):hover > svg path {
	fill: var(--hover-blue);
}
.menu .m-links .m-link:hover .m-link-bullet {
	background: var(--hover-blue);
}

/* ---------- hero: a black screen in place of the first reel ---------- */

#home .hero .hero-bg,
#home .hero .hero-bg .media-inner {
	background: #000;
}
/* it runs edge to edge, so the radius the media rule gives every frame cut its
   corners and let the page's cream show through at the top of the screen */
#home .hero,
#home .hero .hero-bg,
#home .hero .hero-bg .media-inner,
#home .hero .hero-bg .media {
	border-radius: 0 !important;
}
#home .hero {
	background: #000;
}

/* ---------- home "exp" section: Less Noise / More Motion ---------- */

/* The site's own Title component splits and blur-reveals whatever text is in
   the heading, so the new wording keeps the section's motion. The width caps
   the line so it breaks after "Noise" instead of needing markup for it. */
#home .exp .exp-content {
	position: relative;
}
/* The two lines sit at opposite edges of the viewport, not of the content
   column — hence the full-bleed width. The split component writes text-align
   inline on each .line, so those have to be overridden. */
#home .exp .exp-title {
	width: 100%;
	max-width: none;
	/* type matched to the source site: 9.7vw, 1.5 line-height, -0.021em
	   tracking, ~3vw of breathing room at each edge */
	padding: 0 2.6vw;
	font-size: 9.7vw;
	line-height: 1.5;
	letter-spacing: -0.021em;
	box-sizing: border-box;
	align-self: stretch;
}
/* Each line is its own block: the split component reverts the DOM once its
   reveal finishes, so alignment cannot hang off the .line divs it creates,
   and inline spans would let the two phrases run together on one line. */
#home .exp .exp-l1,
#home .exp .exp-l2 {
	display: block;
	width: 100%;
	/* the split component adds its own leading; keeping it explicit here also
	   controls how far apart the two lines sit */
	line-height: 1.12;
	/* characters start a full character-width and -height out of place, so the
	   line has to clip them — without this they hang visibly outside it. The
	   padding buys room for ascenders and descenders, and the matching
	   negative margin keeps the layout where it was. */
	overflow: hidden;
	padding: 0.12em 0;
	margin-top: -0.12em;
	margin-bottom: -0.12em;
}
/* one line hard against each edge of the screen */
#home .exp .exp-l1 {
	text-align: left;
}
#home .exp .exp-l2 {
	text-align: right;
	margin-top: 0.16em;
}

/* The source site shows these headings plainly — no blur reveal. The mirror's
   own reveal is scrubbed against a scroll range that no longer matches this
   rebuilt section, which is why the words were stuck blurred and invisible. */
#home .exp .exp-title,
#home .exp .exp-title .line,
#home .exp .exp-title .word {
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	visibility: visible !important;
}

/* Character reveal, ported from the Frame site: chars arrive from ±100% x and
   100% y at zero opacity, staggered, scrubbed against the section's scroll.
   exp-chars.js does the split and sets each character's range. */
@supports (animation-timeline: view()) {
	/* The source ties this to the heading itself — ScrollTrigger start
	   "top 80%", end "bottom 70%" — not to the whole section, which is why
	   running it over the section's scroll felt far too slow. */
	#home .exp .exp-title {
		view-timeline-name: --charTitle;
		view-timeline-axis: block;
	}
	#home .exp .exp-title .exp-ch {
		display: inline-block;
		/* Eased, not linear. Driven by scroll the character used to travel at
		   one constant speed and stop dead on its last pixel; easing out lets it
		   arrive and settle, which is most of what makes the line feel smooth
		   rather than mechanical. This is the curve the rest of the site uses. */
		animation: expCharRight cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-timeline: --charTitle;
		will-change: transform, opacity;
	}
	@keyframes expCharRight {
		from {
			transform: translate(100%, 100%);
			opacity: 0;
		}
		to {
			transform: translate(0, 0);
			opacity: 1;
		}
	}
	@keyframes expCharLeft {
		from {
			transform: translate(-100%, 100%);
			opacity: 0;
		}
		to {
			transform: translate(0, 0);
			opacity: 1;
		}
	}
}
#home .exp .exp-subtitle,
#home .exp .exp-text-wrapper {
	align-self: flex-start;
}

/* the blue rule runs in from off-canvas and leaves the same way */


/* the source layout is just type on black — the showreel block and the image
   strip that framed the old copy are dropped */
/* the image strip stays out; the reel block comes back, now sitting under the
   description as its own frame */
#home .exp .exp-images {
	display: none !important;
}
#home .exp .exp-btn-block-wrapper {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	display: block !important;
	width: min(72vw, 1180px, calc(58vh * 16 / 9));
	margin: 6vh auto 0;
	aspect-ratio: 16 / 9;
	height: auto !important;
}
/* Only the outer frame is ours. The block is a flex box whose inner is
   absolutely positioned to fill it, with the pill as the one flex child that
   the cursor drives — forcing the inner to relative made it a second flex
   item, so it shrank by the pill's width and the pill lost its centre. */
#home .exp .exp-btn-block-wrapper .btn-block {
	width: 100% !important;
	height: 100% !important;
}
#home .exp .exp-subtitle {
	display: none !important;
}
#home .exp .exp-text-wrapper {
	background: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	/* the site sets its own narrower width on this block, so the measure has to
	   be forced, not just capped */
	width: min(52vw, 780px) !important;
	max-width: none !important;
	/* the design pads this block 4rem on each side; zeroing only the left, as
	   this rule used to, pushed the centred line half that far off centre */
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0;
	margin-right: 0;
}

/* the blurb stays put directly under the heading instead of drifting off to
   the side the way the original layout placed it */
/* the wrapper is a full-viewport box that centres its content, which left a
   ~430px gap under the black section above — pin it near the top instead */
/* The wrapper was an absolutely positioned 100vh box, so on tall/wide screens
   the heading (9.7vw) plus the 16:9 reel outgrew it and the reel was cut off.
   In normal flow the section simply grows to fit its content. */
#home .exp .exp-content-wrapper {
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	padding-top: 9vh !important;
	padding-bottom: 6vh !important;
	margin-top: 0 !important;
}
/* The content was parallaxed ~1600px down the section, which is what read as
   a huge gap under the black block above. Pinning it and trimming the
   section's dead height puts the heading right at the top and leaves the
   scroll to the line. */
#home .exp .exp-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
	transform: none !important;
	/* the column was pinned to the left half of the screen, which pulled the
	   blurb and the reel off-centre — run it the full width instead */
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
#home .exp {
	padding-bottom: 16vh !important;
}
#home .exp .exp-text-wrapper {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	transform: none !important;
	margin: 5vh auto 0;
	text-align: center;
}
#home .exp .exp-text {
	text-align: center;
	/* set full black: the section's body copy is a muted grey by default */
	color: #000 !important;
	font-size: clamp(26px, 2.5vw, 44px);
	line-height: 1.3;
}

/* The section already parallaxes as a whole (.exp-content carries a
   transform); the heading had a second one of its own that slid it ~380px
   down, which pushed it past the blurb. Dropping just that keeps the pair
   together — the reveal lives on the .line elements and is untouched. */
#home .exp .exp-title {
	transform: none !important;
}

/* The whole heading stays black. The site accents the last word with an
   inline gradient clipped to the text and a transparent text-fill, so setting
   colour alone does nothing — the fill and the gradient have to go too. */
#home .exp .exp-title,
#home .exp .exp-title * {
	color: #0e0e0e !important;
}
/* The accent word is painted with an inline gradient clipped to the text and
   a transparent fill, both set with priority — CSS colour cannot reach it.
   A brightness filter renders whatever is there as black instead. */
#home .exp .exp-title .word {
	filter: brightness(0) !important;
}

/* ---------- buttons: outlined pill + arrow disc ---------- */

/* The label sits in its own outlined pill and the arrow in a separate circle
   beside it, both drawn in the current text colour so they invert correctly on
   dark and light sections. The site's own filled plate is dropped. */
.btn {
	background: transparent !important;
	border-radius: 0 !important;
	height: auto !important;
	padding: 0 !important;
	/* the pill and the disc sit against each other, as in the reference */
	gap: 0;
	overflow: visible !important;
	align-items: center;
}
.btn .btn-bg {
	display: none !important;
}
.btn .btn-text {
	transform: none !important;
	/* the design spaced the label away from the dot track; the disc sits right
	   against the pill now */
	margin-right: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.8rem 1.8rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	white-space: nowrap;
}
/* the diamond track becomes the circle that carries the arrow */
.btn .btn-dot {
	position: relative !important;
	transform: none !important;
	left: auto !important;
	top: auto !important;
	order: 1;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid currentColor;
	border-radius: 50%;
}
.btn .btn-dot-inner {
	position: absolute;
	inset: 30%;
	width: auto !important;
	height: auto !important;
	border-radius: 0;
	transform: none !important;
	background: currentColor !important;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%280%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%280%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* the project card button keeps a frosted plate under it: an outline alone is
   unreadable over photography */
.btn.btn-view .btn-text,
.btn.btn-view .btn-dot {
	position: relative;
	z-index: 1;
}
.btn.btn-view .btn-bg {
	display: block !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14) !important;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	inset: -0.4rem -0.6rem !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
}

/* ---------- showreel overlay controls ---------- */

/* Close is a glass button whose rounded layer sat inside a square box, and the
   player's own controls come from Plyr with a 4px radius. */
.glass-btn,
.showreel .showreel-close,
.showreel .showreel-toggle {
	border-radius: var(--r-btn);
	overflow: hidden;
}
.plyr {
	--plyr-control-radius: 999px;
	--plyr-menu-radius: 14px;
	--plyr-tooltip-radius: 999px;
}
.plyr__control,
.plyr__controls,
.plyr__tooltip,
.plyr__menu__container {
	border-radius: 999px;
}
.plyr__menu__container {
	border-radius: 14px;
}

/* ---------- project "View" button ---------- */

/* The solid purple plate goes; the button reads as frosted glass over the
   artwork instead, on the same pill as every other button. */
.btn.btn-view,
.work .btn.btn-view {
	border-radius: var(--r-btn);
	overflow: hidden;
}
.btn.btn-view .btn-bg {
	background: rgba(255, 255, 255, 0.14) !important;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* ---------- pre-footer ---------- */

/* the photograph above the footer goes, and with it the section's height */
.pre-footer {
	display: none !important;
}

/* ---------- project "View" button: circle, arrow, label ---------- */

/* The reference reads as a black disc with a white arrow followed by the
   label, riding the cursor over the card on a frosted plate. */
.btn.btn-view {
	height: auto;
	padding: 0.55rem 1.9rem 0.55rem 0.55rem;
	gap: 1rem;
	align-items: center;
}
.btn.btn-view .btn-text,
.btn.btn-view .btn-dot {
	/* the frosted plate carries z-index 0 and a backdrop-filter, which pulled
	   the disc behind it and blurred it — both sit above it now */
	position: relative;
	z-index: 1;
}
.btn.btn-view .btn-text {
	transform: none !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.3rem;
	color: var(--c-white) !important;
}
/* the diamond track becomes the disc that carries the arrow */
.btn.btn-view .btn-dot {
	position: relative !important;
	transform: none !important;
	width: 3.8rem;
	height: 3.8rem;
	left: auto !important;
	top: auto !important;
	order: -1;
	flex: 0 0 auto;
}
.btn.btn-view .btn-dot-inner {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50%;
	background: #000 !important;
	transform: none !important;
}
.btn.btn-view .btn-dot-inner::after {
	content: "";
	position: absolute;
	inset: 24%;
	/* drawn as an image rather than a mask: the mask left the arrow unpainted
	   here, so the disc showed up empty */
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Hover: the pill fills, the label knocks out of it, and the disc swaps to the
   leading edge with a straight arrow. The two variants invert against each
   other so the filled state stays legible on light and dark sections alike. */
.btn .btn-text,
.btn .btn-dot,
.btn .btn-dot-inner {
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.btn:hover .btn-text,
.btn-block:hover .btn .btn-text {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-black) !important;
}
.btn .btn-text,
.btn .btn-dot {
	transition: transform 0.42s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
		background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
/* the disc crosses to the leading edge: order is not animatable, so both
   halves translate past each other using the widths buttons.js publishes */
.btn:hover .btn-text,
.btn-block:hover .btn .btn-text {
	transform: translateX(var(--disc-w, 3.5rem)) !important;
}
.btn:hover .btn-dot,
.btn-block:hover .btn .btn-dot {
	transform: translateX(calc(-1 * var(--pill-w, 12rem))) !important;
	background: var(--c-white);
	border-color: var(--c-white);
}
.btn:hover .btn-dot-inner,
.btn-block:hover .btn .btn-dot-inner {
	background: var(--c-black) !important;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* the grey variant sits on the cream sections too, so it fills the same way —
   with the cream fill it would have vanished into the background */
.btn.btn-light:hover .btn-text,
.btn.btn-grey:hover .btn-text,
.btn-block:hover .btn.btn-light .btn-text,
.btn-block:hover .btn.btn-grey .btn-text {
	background: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-white) !important;
}
.btn.btn-light:hover .btn-dot,
.btn.btn-grey:hover .btn-dot,
.btn-block:hover .btn.btn-light .btn-dot,
.btn-block:hover .btn.btn-grey .btn-dot {
	background: var(--c-black);
	border-color: var(--c-black);
}
.btn.btn-light:hover .btn-dot-inner,
.btn.btn-grey:hover .btn-dot-inner,
.btn-block:hover .btn.btn-light .btn-dot-inner,
.btn-block:hover .btn.btn-grey .btn-dot-inner {
	background: var(--c-white) !important;
}

/* ---------- about: one-line heading with the same character reveal ---------- */

/* The design pulls this section up over the one above it with a negative top
   margin (GSAP copies it onto the pin spacer it wraps the content in). That was
   sized for the original work grid; against the rebuilt one it swallows the
   projects, so the section starts where it actually falls, with a little air
   above it. The inline margin GSAP writes is what has to be beaten here. */
#home .about > .pin-spacer,
#home .about .about-inner {
	margin-top: 0 !important;
}
/* More air above this one than the What we do section leaves. That section
   arrives under a heading; this one arrives directly under the last row of
   project cards, and the captions hanging below those cards were all but
   touching the About heading at the shared setting. */
#home .about {
	padding-top: 16vh;
}

/* The section was held against the viewport and its content slid through it.
   It now sits still where it falls under the projects: the pin's translate and
   the spacer's reserved run are dropped, so the block scrolls away with the
   page while the photographs keep changing over one another. GSAP writes those
   two as inline styles, hence the !important. */
#home .about {
	height: auto !important;
	/* the design reserved 250vh here as the pinned run; what is left is the
	   air between this section and the heading under it */
	padding-bottom: 18vh !important;
}
#home .about > .pin-spacer {
	height: auto !important;
	padding: 0 !important;
	max-height: none !important;
}
/* the heading takes the top row on its own; the picture and the copy share the
   row under it */
#home .about .about-inner {
	flex-wrap: wrap;
	align-items: flex-start;
	height: auto !important;
}
#home .about .about-left {
	flex: 0 0 100%;
	max-width: 100%;
}
#home .about .about-inner,
/* the photo roll was slid through the pinned section on its own transform;
   it now stays where it sits and only the picture on top changes */
#home .about .about-content {
	/* only the pin's translate goes — the box itself still has to be the
	   containing block for the photographs stacked inside it */
	transform: none !important;
}

/* The heading carries its own effect now (custom/about-word.*); the section's
   blur-in and the character cascade that used to run here are both gone. What
   is left is the reveal state the site parks it in — hidden and blurred behind
   a trigger that no longer fires. */
#home .about .about-title,
#home .about .about-title .line,
#home .about .about-title .word {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}
#home .about .about-title {
	text-align: left;
	position: relative;
	z-index: 2;
	/* the section's own title: one line across the top, flush left */
	font-size: 10vw;
	line-height: 1.02;
	letter-spacing: -0.02em;
	white-space: nowrap;
	width: max-content;
	max-width: none;
	/* and the same gap under the heading that What we do leaves */
	margin: 0 0 7vh;
	padding-left: 0;
}

/* ---------- the page's own black showed through under the last section ------ */
/* The page element is black for the hero, which paints its own; everything
   below it is cream, and the strip left between the last section and the
   footer was reading as a black band. */
.page-scroll {
	background: var(--c-white, #fbfbf4);
}

/* Under the heading: the copy on the left, the photographs beside it on the
   right, the button under the copy. The three are siblings in the markup, so a
   grid places them rather than a nested row — which is what lets the writing and
   the pictures swap sides without the markup being touched. Both columns come
   out the same width, so the frame is a project card's width on either side. */
#home .about .about-right {
	flex: 0 0 100%;
	max-width: 100%;
	margin-left: 0;
	margin-top: 0;
}
#home .about .about-content {
	display: grid;
	/* the same column the projects above are laid on, so the picture starts and
	   ends exactly where the project card above it does */
	grid-template-columns: calc((100% - 2.4rem) / 2) 1fr;
	column-gap: 2.4rem;
	row-gap: 3vh;
	align-items: start;
}
#home .about .about-images {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 100%;
	/* and the same frame proportion */
	aspect-ratio: 16 / 10;
	height: auto;
}
/* the copy runs as three short paragraphs down the height of the picture */
#home .about .fcg-about-copy {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	/* the three paragraphs spread down the height of the picture beside them */
	justify-content: space-between;
	align-self: stretch;
	gap: 1.4em;
	min-height: 0;
	max-width: 48ch;
}
#home .about .about-text {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	max-width: 48ch;
}
#home .about .fcg-about-copy .about-text {
	grid-column: auto;
	grid-row: auto;
	max-width: none;
}
#home .about .about-content > .btn {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
}

/* ==========================================================================
   Case pages — the project layout the clients' own presentation decks set:
   the frame shown whole rather than cropped to the viewport, the lead beside
   the title, and the sections the site's shared components have no shape for. These live here rather than in a page-only sheet because the router
   swaps the page without touching <head>: a stylesheet linked from one page
   alone never arrives when the visitor comes through the site.
   ========================================================================== */

/* --- the hero shows the frame whole --------------------------------------
   The design draws the hero picture at the full viewport and clips it to its
   top half, so half the frame is never seen. Here the frame is the artwork
   itself, edge to edge, at its own ratio. */
.fcg-case .hero {
	min-height: 0 !important;
	background: var(--c-whiter);
}
.fcg-case .hero .hero-image {
	position: relative !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	clip-path: none !important;
	background: #0a0a0a;
}
.fcg-case .hero .hero-image .media-wrapper {
	position: absolute;
	inset: 0;
	height: 100% !important;
	aspect-ratio: auto !important;
}
.fcg-case .hero .hero-image .media-inner,
.fcg-case .hero .hero-image .media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fcg-case .hero .hero-inner {
	padding-top: 6rem !important;
	padding-bottom: 9rem !important;
	min-height: 0 !important;
	align-items: flex-start;
}
.fcg-case .hero .hero-left {
	margin-bottom: 0 !important;
}
/* the lead paragraph sits where the design put its metas */
.fcg-case .hero .hero-right {
	padding-bottom: 0 !important;
	display: block !important;
}
.fcg-case .hero .fcg-lead {
	margin: 0;
	font-size: 3.4rem;
	line-height: 1.24;
	letter-spacing: -0.01em;
}

/* --- the device screens --------------------------------------------------- */
.fcg-case .fcg-screens {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: 4rem;
	align-items: start;
	padding: 10rem 2rem 6rem;
}
.fcg-case .fcg-screens-label {
	margin: 0 0 4rem;
	font-size: 1.6rem;
	line-height: 1.4;
}
.fcg-case .fcg-screens-text {
	margin: 0;
	max-width: 42rem;
	font-size: 3.2rem;
	line-height: 1.24;
}
.fcg-case .fcg-device {
	width: 100%;
	max-width: 44rem;
	margin-left: auto;
	background: #2a2a2a;
	border-radius: 2.8rem;
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	box-sizing: border-box;
}
/* the frame's own box decides the ratio — the picture's width/height
   attributes would otherwise set the height and the stack would run away */
.fcg-case .fcg-device .fcg-frame {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 1.4rem;
	overflow: hidden;
}
.fcg-case .fcg-device .fcg-frame img,
.fcg-case .fcg-device .fcg-frame video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- the loose 3D elements ------------------------------------------------ */
.fcg-case .fcg-elements {
	padding: 4rem 2rem 12rem;
}
.fcg-case .fcg-elements-label {
	margin: 0 0 6rem;
	font-size: 1.6rem;
	line-height: 1.4;
}
.fcg-case .fcg-elements-row {
	display: grid;
	align-items: center;
	justify-items: center;
	gap: 4rem 6rem;
}
.fcg-case .fcg-elements-row.is-badges {
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 9rem;
}
.fcg-case .fcg-elements-row.is-type {
	grid-template-columns: repeat(3, 1fr);
}
.fcg-case .fcg-elements-row img {
	display: block;
	width: 100%;
	max-width: 26rem;
	height: auto;
}
.fcg-case .fcg-elements-row.is-type img {
	max-width: 34rem;
}

@media (max-width: 1099px) {
	.fcg-case .hero .hero-image {
		aspect-ratio: 4 / 3;
	}
	.fcg-case .hero .fcg-lead {
		font-size: 2.6rem;
	}
	.fcg-case .fcg-screens {
		grid-template-columns: 1fr;
		gap: 5rem;
	}
	.fcg-case .fcg-device {
		margin-left: 0;
		max-width: 100%;
	}
	.fcg-case .fcg-elements-row.is-badges {
		grid-template-columns: repeat(2, 1fr);
	}
	.fcg-case .fcg-elements-row.is-type {
		grid-template-columns: 1fr;
	}
}

/* the carousel's neighbours scale down from their top edge, so every card
   shares one top line and the corners of the band stay filled */
.fcg-case .carousel .carousel-item .carousel-item-inner {
	transform-origin: 50% 0;
}

/* the campaign frame under the brief runs edge to edge with square corners,
   the way the design has it — the padded blocks keep their radius */
.fcg-case .image-full:not(.padding) .media-wrapper,
.fcg-case .image-full:not(.padding) .media-inner,
.fcg-case .image-full:not(.padding) .media {
	border-radius: 0 !important;
}

/* --- the finished film ---------------------------------------------------
   Locked to its own ratio so the whole frame reads, and it opens full size in
   a new tab — the play mark comes up under the pointer, as the showreel's does. */
.fcg-case .fcg-final {
	position: relative;
	background: #000;
}
.fcg-case .fcg-final .media-wrapper {
	/* the design gives every full-width block the viewport's height and crops to
	   it; the film keeps its own ratio so none of the frame is lost */
	height: auto !important;
	aspect-ratio: 16 / 9;
	background: #000;
}
.fcg-case .fcg-final .media-wrapper,
.fcg-case .fcg-final .media-inner {
	/* the design also scales its media on scroll, which would crop it again */
	transform: none !important;
}
.fcg-case .fcg-final .media-inner {
	position: absolute;
	inset: 0;
	background: #000;
}
.fcg-case .fcg-final .media {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
}
.fcg-case .fcg-final-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	text-decoration: none;
}

/* --- this project reads on white ----------------------------------------- */
.fcg-case .page-scroll,
.fcg-case .page-bg,
.fcg-case .hero,
.fcg-case .brief,
.fcg-case .text,
.fcg-case .carousel,
.fcg-case .fcg-screens,
.fcg-case .fcg-elements {
	background: #fff;
}

/* the device carries the two clips, and carries them large */
.fcg-case .fcg-device {
	max-width: 82rem;
	border-radius: 4rem;
	padding: 2rem;
	gap: 2rem;
}
.fcg-case .fcg-device .fcg-frame {
	border-radius: 2rem;
}

/* the design greys the second title line with opacity; the rule below forces
   opacity to 1 to stop the reveal, so the tone is restored as a colour */
.fcg-case .hero-title {
	color: rgba(2, 2, 2, 0.5);
}

/* --- the copy on this page is set, not animated ---------------------------
   The design splits every heading and paragraph and blurs it in as the
   section arrives. Here the words read plainly from the first frame. The
   media keeps its own motion — only the type is held still. */
.fcg-case .hero-client,
.fcg-case .hero-title,
.fcg-case .fcg-lead,
.fcg-case .brief-title,
.fcg-case .brief-content-title,
.fcg-case .brief-content-text,
.fcg-case .text-title,
.fcg-case .text-text,
.fcg-case .text-text p,
.fcg-case .fcg-screens-label,
.fcg-case .fcg-screens-text,
.fcg-case .fcg-elements-label,
.fcg-case .hero-client .line,
.fcg-case .hero-title .line,
.fcg-case .brief-title .line,
.fcg-case .text-title .line,
.fcg-case .text-title .word,
.fcg-case .brief-title .word,
.fcg-case .hero-client .word,
.fcg-case .hero-title .word,
.fcg-case .text-text .line,
.fcg-case .text-text .word,
.fcg-case .brief-content-text .line,
.fcg-case .brief-content-text .word {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	clip-path: none !important;
	will-change: auto !important;
}

/* --- one scale for the whole project ------------------------------------
   The page was carrying four sizes where it needed three: the section labels
   down the left came in two, and the copy on the right in three. Here every
   label is one size, and the copy is either large or small — nothing between. */

/* the labels down the left: The Brief, 3D Elements Selection, The Bag,
   Video Screens, 3D Elements */
.fcg-case .brief-title,
.fcg-case .text-title,
.fcg-case .fcg-screens-label,
.fcg-case .fcg-elements-label {
	font-size: 1.8rem !important;
	line-height: 1.2 !important;
	letter-spacing: 0;
}

/* the large copy: the lead beside the title, the section paragraphs, and the
   line beside the device */
.fcg-case .fcg-lead,
.fcg-case .text-text,
.fcg-case .text-text p,
.fcg-case .fcg-screens-text {
	font-size: 3.2rem !important;
	line-height: 1.26 !important;
}

/* the small copy: the brief's own headings and their paragraphs */
.fcg-case .brief-content-title,
.fcg-case .brief-content-text {
	font-size: 1.5rem !important;
	line-height: 1.4 !important;
}

@media (max-width: 1099px) {
	.fcg-case .fcg-lead,
	.fcg-case .text-text,
	.fcg-case .text-text p,
	.fcg-case .fcg-screens-text {
		font-size: 2.6rem !important;
	}
}

/* --- MechaBuild ----------------------------------------------------------
   Its hero is a wide black band rather than a frame, and the deck numbers its
   sections and sets two columns of copy under some of them. */
.fcg-mecha .hero .hero-image {
	aspect-ratio: 5769 / 2373;
	background: #000;
}

/* a numbered section label, set like the labels down the left of the others */
.fcg-case .fcg-section-label {
	margin: 0 0 4rem;
	font-size: 1.8rem;
	line-height: 1.2;
}

/* two columns of copy, both at the large size */
.fcg-case .fcg-two-col {
	padding: 6rem 2rem 2rem;
}
.fcg-case .fcg-two-col-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
}
.fcg-case .fcg-two-col-inner p {
	margin: 0;
	font-size: 3.2rem;
	line-height: 1.26;
}

/* a plate: one piece of artwork centred on the page at its own proportion,
   for the square and upright pieces that would be cropped by a full-width row */
.fcg-case .fcg-plate {
	padding: 4rem 2rem 6rem;
	display: flex;
	justify-content: center;
}
.fcg-case .fcg-plate-inner {
	width: 100%;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #000;
}
.fcg-case .fcg-plate.is-square .fcg-plate-inner {
	max-width: 68rem;
	aspect-ratio: 1;
}
.fcg-case .fcg-plate.is-tall .fcg-plate-inner {
	max-width: 52rem;
	aspect-ratio: 799 / 882;
	background: transparent;
}
.fcg-case .fcg-plate-inner > img,
.fcg-case .fcg-plate-inner > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* the copy on this page is set, not animated, as it is on the other case */
.fcg-case .fcg-section-label,
.fcg-case .fcg-two-col-inner p {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	will-change: auto !important;
}

@media (max-width: 1099px) {
	.fcg-mecha .hero .hero-image {
		aspect-ratio: 16 / 10;
	}
	.fcg-case .fcg-two-col-inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.fcg-case .fcg-two-col-inner p {
		font-size: 2.6rem;
	}
}

/* the marks set out as a row of tiles, each one building itself on its grid.
   The row divides by however many tiles are in it, so a third can drop in
   without touching the rule. */
.fcg-case .fcg-tiles {
	padding: 2rem 2rem 6rem;
}
.fcg-case .fcg-tiles-inner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 2rem;
}
.fcg-case .fcg-tile {
	display: block;
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #000;
}
.fcg-case .fcg-tile video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1099px) {
	.fcg-case .fcg-tiles-inner {
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}
}

/* a clip that keeps its own frame: the design scales media on scroll, which
   would crop a piece that is meant to be read rather than filled */
.fcg-case .fcg-still .media-wrapper {
	height: auto !important;
	background: #000;
}
.fcg-case .fcg-still .media-wrapper,
.fcg-case .fcg-still .media-inner {
	transform: none !important;
}
.fcg-case .fcg-still .media-inner {
	position: absolute;
	inset: 0;
}
.fcg-case .fcg-still .media {
	width: 100%;
	height: 100%;
	/* the word is small and centred in its frame, so a shorter box takes the
	   crop out of the black rather than out of the type */
	object-fit: cover;
}

/* --- the Work page title -------------------------------------------------
   Set exactly as About us is on the home page: one line, flush left, 10vw,
   sitting directly above the projects. The design gives its wrapper a full
   viewport of height and animates the title through it; here the wrapper is
   only as tall as the line and the type is static from the first frame. */
#work .work-archive .work-title-wrapper {
	display: block;
	width: 100%;
	max-width: none;
	/* the design parks it in its own absolute layer behind the grid, so the
	   projects ride up over the words on the way down; here it sits in the
	   flow and the page simply scrolls past it */
	position: relative !important;
	z-index: 2;
	height: auto !important;
	min-height: 0 !important;
	text-align: left;
	padding: 12vh 2rem 0;
	box-sizing: border-box;
	margin-left: 0 !important;
}
#work .work-archive .work-title,
#work .work-archive .work-title .work-title-text {
	/* the design sets it white for a dark hero; this page is cream, so it read
	   as nothing at all */
	color: var(--c-black, #020202);
	display: block;
	width: max-content;
	max-width: none;
	text-align: left !important;
	font-size: 10vw;
	line-height: 1.02;
	letter-spacing: -0.02em;
	white-space: nowrap;
	margin: 0 0 5vh;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
#work .work-archive .work-title .work-title-text {
	margin: 0;
}
/* the design splits and blurs it in, and pins it while the grid passes; here
   it reads from the first frame and stays where it is put */
#work .work-archive .work-title,
#work .work-archive .work-title .work-title-text,
#work .work-archive .work-title .line,
#work .work-archive .work-title .word,
#work .work-archive .work-title span {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	will-change: auto !important;
}

/* --- the colour palette --------------------------------------------------
   One bar across the full width of the screen, the three colours butted
   together in the deck's proportions — the blue carries the most of it. No
   outline and no shadow: the white reads because black and blue hold it on
   either side, which is also why the panels meet rather than sit apart.

   The stack of cards used to lift under the pointer; a bar has no gap to lift
   out of, so the panel takes more of the bar instead and the others give way.
   The bounce is in the easing rather than a keyframe — cubic-bezier's 1.56
   control point overshoots and settles — so a panel caught mid-move springs
   back from where it is instead of jumping. */
.fcg-case .fcg-swatches {
	/* it runs edge to edge, so it wants room above it rather than beside it */
	padding: 16rem 0 8rem;
}
.fcg-case .fcg-swatches-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	padding: 0 2rem 5rem;
}
.fcg-case .fcg-swatches-text {
	margin: 0;
	font-size: 3.2rem;
	line-height: 1.26;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

.fcg-case .fcg-swatch-bar {
	display: flex;
	width: 100%;
	height: 52vh;
	min-height: 30rem;
	/* square at both ends: the bar meets the edges of the screen */
	border-radius: 0;
	overflow: hidden;
}
.fcg-case .fcg-swatch {
	position: relative;
	display: block;
	height: 100%;
	padding: 2.4rem;
	box-sizing: border-box;
	cursor: pointer;
	outline: none;
	transition: flex-grow 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
		transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: flex-grow;
}
/* the deck's proportions: black, then white a little narrower, then the blue
   taking nearly half the bar to itself */
.fcg-case .fcg-swatch.is-black {
	flex: 1.00 1 0;
	background: #000;
	color: #fff;
}
.fcg-case .fcg-swatch.is-white {
	flex: 0.86 1 0;
	background: #fff;
	color: #000;
}
.fcg-case .fcg-swatch.is-blue {
	flex: 1.66 1 0;
	background: #0000ff;
	color: #fff;
}
/* the one under the pointer takes a little more of the bar and springs into it */
.fcg-case .fcg-swatch:hover,
.fcg-case .fcg-swatch:focus-visible {
	flex-grow: 2.1;
}
.fcg-case .fcg-swatch:hover .fcg-swatch-hex,
.fcg-case .fcg-swatch:focus-visible .fcg-swatch-hex {
	transform: translateY(-0.5rem);
}
.fcg-case .fcg-swatch.is-blue:hover,
.fcg-case .fcg-swatch.is-blue:focus-visible {
	flex-grow: 2.6;
}

.fcg-case .fcg-swatch-hex {
	display: block;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* a pointer that would rather not be bounced at */
@media (prefers-reduced-motion: reduce) {
	.fcg-case .fcg-swatch,
	.fcg-case .fcg-swatch-hex {
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}
	.fcg-case .fcg-swatch:hover .fcg-swatch-hex,
	.fcg-case .fcg-swatch:focus-visible .fcg-swatch-hex {
		transform: none;
	}
}

@media (max-width: 1099px) {
	.fcg-case .fcg-swatches-head {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.fcg-case .fcg-swatches-text {
		font-size: 2.6rem;
	}
	.fcg-case .fcg-swatch-bar {
		height: 40vh;
		min-height: 24rem;
	}
}

/* --- no cut corners where the media meets the edge of the screen ---------
   Every frame on the site gets a radius, which is right for a block sitting
   inside the page and wrong for one that runs to its edges: at the top of a
   project the hero's rounded corners let the page show through as two small
   notches. Anything full-bleed is squared. */
#project .hero,
#project .hero .hero-image,
#project .hero .hero-image .media-wrapper,
#project .hero .hero-image .media-inner,
#project .hero .hero-image .media,
#project .image-full:not(.padding) .media-wrapper,
#project .image-full:not(.padding) .media-inner,
#project .image-full:not(.padding) .media,
.fcg-case .fcg-swatch-bar,
.fcg-case .fcg-swatch {
	border-radius: 0 !important;
}

/* --- the scrollbar gutter down the right ---------------------------------
   The design hides the scrollbar on html and body, but neither of those is
   what scrolls: Lenis scrolls .page. On a Mac set to always show scrollbars,
   Safari gave that element a classic bar, which takes real width — the page
   narrowed and the black behind it showed as a strip down the right edge.
   scrollbar-width covers current browsers; WebKit needs its own rule, and it
   has to name the element that scrolls. */
.page,
.lenis,
.page-scroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.page::-webkit-scrollbar,
.lenis::-webkit-scrollbar,
.page-scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* --- Coffee Island -------------------------------------------------------
   A page of campaign work rather than a system: a band in the brand's own
   orange at the top, the two posters together on one panel, then the pieces
   stepping down the page, each on the side the deck puts it. */
.fcg-coffee {
	--ci-orange: #f6a31c;
}
.fcg-coffee .hero .hero-image {
	aspect-ratio: 1440 / 420;
	background: var(--ci-orange);
}
/* the band is a real picture so the router has something to wait on; the
   colour behind it keeps the edge clean while it loads */
.fcg-coffee .hero .hero-image .media-wrapper,
.fcg-coffee .hero .hero-image .media-inner {
	background: var(--ci-orange);
}

/* the two posters sit together on one ground, as a pair rather than two blocks */
.fcg-case .fcg-panel {
	padding: 10rem 2rem 4rem;
}
.fcg-case .fcg-panel-inner {
	display: flex;
	/* the ground is a mat: an even margin all round the pair and a gutter
	   between them, set as a share of the panel so it holds at any width */
	gap: 5%;
	align-items: flex-start;
	padding: 3.4%;
	border-radius: calc(var(--r-box, 1.6rem) * 1.6);
	background: #eef0f1;
}
.fcg-case .fcg-panel-inner img {
	display: block;
	/* the posters take the panel between them rather than sitting small in it */
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
	height: auto;
	border-radius: var(--r-box, 1.6rem);
}

/* the rest of the pieces, alternating side to side down the page */
.fcg-case .fcg-plates {
	padding: 4rem 2rem 8rem;
	display: flex;
	flex-direction: column;
	gap: 9rem;
}
.fcg-case .fcg-plate-item {
	width: 100%;
	display: flex;
}
.fcg-case .fcg-plate-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-media, 1.2rem);
}
/* the two bonus cards are die-cut: their rounded shape is the artwork itself,
   so cutting them again would shave the corners twice */
.fcg-case .fcg-plate-item.is-diecut img {
	border-radius: 0;
}
.fcg-case .fcg-plate-item.is-left  { justify-content: flex-start; }
.fcg-case .fcg-plate-item.is-right { justify-content: flex-end; }
.fcg-case .fcg-plate-item.is-mid  img { max-width: 58rem; }
.fcg-case .fcg-plate-item.is-wide img { max-width: 72rem; }

@media (max-width: 1099px) {
	.fcg-coffee .hero .hero-image {
		aspect-ratio: 16 / 10;
	}
	.fcg-case .fcg-panel-inner {
		flex-direction: column;
		align-items: center;
		padding: 2.4rem;
		gap: 2.4rem;
	}
	.fcg-case .fcg-plates {
		gap: 6rem;
	}
	.fcg-case .fcg-plate-item {
		justify-content: center !important;
	}
	.fcg-case .fcg-plate-item.is-mid img,
	.fcg-case .fcg-plate-item.is-wide img {
		max-width: 100%;
	}
}

/* --- All Work scrolls, it does not hold ----------------------------------
   The design pins the title and runs the grid up over it, which needs a
   spacer as tall as the hold — 1620px of it — and a matching padding under
   the grid. With the title simply in the flow, both of those are dead weight:
   the spacer collapses to the line it holds and the grid follows it down. */
#work .work-archive > .pin-spacer {
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
#work .work-archive > .pin-spacer > .work-title-wrapper {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	inset: auto !important;
}
#work .work-archive .work-grid {
	padding-top: 6rem !important;
}

/* --- a numbered block: the label left, its copy right, the media under ----
   The same head the palette uses, given a name of its own so any later
   section can take it without borrowing the palette's. */
.fcg-case .fcg-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	padding: 0 2rem 5rem;
}
.fcg-case .fcg-head-text {
	margin: 0;
	font-size: 3.2rem;
	line-height: 1.26;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

.fcg-case .fcg-combos {
	padding: 10rem 0 8rem;
}
/* the film keeps its own frame: the design scales media on scroll, and this
   one is a lockup being read rather than a picture being filled */
.fcg-case .fcg-combos-media {
	width: calc(100% - 4rem);
	margin: 0 2rem;
	height: auto !important;
	background: #000;
}
.fcg-case .fcg-combos-media,
.fcg-case .fcg-combos-media .media-inner {
	transform: none !important;
}
.fcg-case .fcg-combos-media .media-inner {
	position: absolute;
	inset: 0;
}
.fcg-case .fcg-combos-media .media {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 1099px) {
	.fcg-case .fcg-head {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.fcg-case .fcg-head-text {
		font-size: 2.6rem;
	}
}

/* --- effect 096: the pieces gather in the middle ------------------------- */
.mwg_effect096 {
	position: relative;
}
.mwg_effect096 .pin-height {
	/* the pin holds for the height less the container's own screen, so this is
	   120vh of scrolling for sixteen pieces — one every seven or so, which is
	   what makes them start arriving as soon as the page moves */
	height: 220vh;
}
.mwg_effect096 .container {
	height: 100vh;
	overflow: hidden;
}
.mwg_effect096 .media {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}
.mwg_effect096 .media img {
	width: 11vw;
	height: auto;
	display: block;
}
/* a wide piece is measured by its height, so the set keeps one visual weight
   however each one is proportioned */
.mwg_effect096 .media img.landscape {
	width: auto;
	height: 8vw;
}

/* --- the poster panel sits smaller on the page --------------------------- */
.fcg-case .fcg-panel-inner {
	/* it reads as a mat, not as a spread: held in from the page edges so the
	   pair inside can be taken in at a glance */
	max-width: 74%;
	margin: 0 auto;
}

/* --- three posters across ------------------------------------------------
   The set shares one proportion, so they are given equal columns and left to
   find their own height. */
.fcg-case .fcg-trio {
	padding: 8rem 2rem 10rem;
}
.fcg-case .fcg-trio-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	align-items: start;
	max-width: 86%;
	margin: 0 auto;
}
.fcg-case .fcg-trio-inner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-box, 1.6rem);
}

@media (max-width: 1099px) {
	.fcg-case .fcg-trio-inner {
		grid-template-columns: 1fr;
		gap: 3rem;
		max-width: 100%;
	}
}

/* --- the product clip ----------------------------------------------------
   Shot upright and turned a quarter to the left so it lies across the page,
   whole rather than cropped. The frame is landscape and the film is rotated
   inside it: the percentages are the frame's own proportion read the other
   way round — 56.25% of its width is its height, and 177.78% of its height is
   its width — so the turned film meets the frame exactly on all four sides. */
.fcg-case .fcg-band {
	/* room above it, so it lands clear of the posters */
	padding: 8rem 2rem 12rem;
	display: flex;
	justify-content: center;
}
.fcg-case .fcg-band-inner {
	position: relative;
	display: block;
	margin: 0;
	width: 100%;
	/* the film's long edge is 1280; kept under that it is never scaled up,
	   which is where the softness in the original would start to show */
	max-width: 62rem;
	aspect-ratio: 1280 / 720;
	overflow: hidden;
	border-radius: var(--r-box, 1.6rem);
}
.fcg-case .fcg-band-inner video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 56.25%;
	height: 177.7778%;
	object-fit: cover;
	transform: translate(-50%, -50%) rotate(-90deg);
}

@media (max-width: 1099px) {
	.fcg-case .fcg-band-inner {
		max-width: 100%;
	}
}

/* --- the two cards, side by side ----------------------------------------
   They share a proportion, so equal columns and the site's own corner. */
.fcg-case .fcg-pair {
	padding: 2rem 2rem 4rem;
}
.fcg-case .fcg-pair-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4rem;
	align-items: start;
	max-width: 86%;
	margin: 0 auto;
}
.fcg-case .fcg-pair-inner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-box, 1.6rem);
}

@media (max-width: 1099px) {
	.fcg-case .fcg-pair-inner {
		grid-template-columns: 1fr;
		gap: 3rem;
		max-width: 100%;
	}
}

/* --- BOX Delivery App ---------------------------------------------------- */
.fcg-box .hero .hero-image {
	aspect-ratio: 2400 / 700;
	background: #f87a1d;
}
.fcg-box .hero .hero-image .media-wrapper,
.fcg-box .hero .hero-image .media-inner {
	background: #f87a1d;
}

/* two campaign films side by side */
/* --- the reel: the About row, carrying clips --- */

/* The About page's hero row, brought over whole. Its own measurements come from
   the same two figures that page uses — the width the open piece reaches, and
   the gap between them — so the two rows are the same size on the same screen.
   The script works everything else out from the row's own width. */
.fcg-case .fcg-reel {
	/* Little room above. The row is as tall as the open piece, and the five
	   closed ones stand on its floor — so at rest the top of that box is empty
	   air, and any padding on top of it reads as the section having drifted
	   down the page away from the writing above it. */
	padding: 3vh 0 9vh;
}
.fcg-case .fcg-reel-row {
	position: relative;
	/* The row runs the whole width of the screen. Its own width is what the
	   script divides between the six, and the sum of the six and their gaps is
	   always exactly that — so however wide the screen, the row is full from
	   edge to edge and there is no space left over at either end. */
	width: 100%;
	/* tall enough for the open piece, so it grows into room already there
	   rather than pushing the sections below it about */
	height: calc(58rem * 9 / 16);
}
.fcg-case .fcg-reel-item {
	position: absolute;
	left: 0;
	/* Standing on the floor of the row and scaled from it, so a piece opens
	   upward and the bottom edges all stay on one line. */
	bottom: 0;
	width: calc((100vw - 58rem - 0.7rem * 5) / 5);
	aspect-ratio: 16 / 9;
	transform-origin: left bottom;
	will-change: transform;
}
.fcg-case .fcg-reel-item .media-wrapper,
.fcg-case .fcg-reel-item .media-inner {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}
.fcg-case .fcg-reel-item .media-wrapper {
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #f3f2ec;
}
.fcg-case .fcg-reel-item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1099px) {
	/* No pointer here, so no piece opens and the row would stand as six
	   thumbnails too small to read. It is laid out plainly instead. */
	.fcg-case .fcg-reel-row {
		height: auto;
		padding: 0 2rem;
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}
	.fcg-case .fcg-reel-item {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100% !important;
		transform: none !important;
	}
}

/* --- the one large piece under the reel --- */

/* The reel runs edge to edge, so this one sits inside the page's own margins
   instead — a single wide frame rather than a second full-bleed band, which
   would read as one continuous strip with the row above it. */
.fcg-case .fcg-big {
	padding: 0 0 10vh;
}
.fcg-case .fcg-big .media-wrapper {
	position: relative;
	width: 86%;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #f3f2ec;
}
.fcg-case .fcg-big .media-inner,
.fcg-case .fcg-big video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1099px) {
	.fcg-case .fcg-big .media-wrapper {
		width: calc(100% - 4rem);
	}
}

/* --- the labels that come up over a project card --- */

/* The design system draws these as frosted glass — a tenth of white with a blur
   behind it — which reads on a dark photograph and disappears on a bright one.
   Every cover on this site is bright, and half of them are film. So they are
   filled solid instead: white ground, black rule, black type, legible over
   anything moving underneath. */
#work .work-grid .project-content .project-text {
	background: transparent !important;
	color: var(--c-black, #020202) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	border: 1px solid var(--c-black, #020202);
	color: var(--c-black, #020202) !important;
	/* rounded, but not to a full stadium — the shape the design asks for */
	border-radius: 1.1rem !important;
	height: 2.8rem;
	padding: 0 1.2rem;
	font-style: normal !important;
	font-size: 1.4rem;
	letter-spacing: 0;
}
/* One row, not a stack. The design system lays these out in a column, which is
   what a list of five wanted; three read as a line. */
#work .work-grid .project-content {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}
/* They join. Each one after the first is pulled back by the width of a rule so
   the two outlines fall on the same line rather than sitting side by side as a
   double stroke — where a round end meets a squared one the curves leave a
   sliver between them, which is what the drawing shows. */
#work .work-grid .project-content .project-text {
	margin: 0 !important;
}
#work .work-grid .project-content .project-text + .project-text {
	margin-left: -1px !important;
}
/* The corners are not all the same, and that is deliberate: the two on the
   outside are softened rectangles and the one between them is a full round.
   It is the shape the design was drawn with. */
#work .work-grid .project-content .project-text:nth-child(1),
#work .work-grid .project-content .project-text:nth-child(3) {
	border-radius: 0.62rem !important;
}
#work .work-grid .project-content .project-text:nth-child(2) {
	border-radius: 999rem !important;
}

/* the first carries the arrow, the way the design has it */
#work .work-grid .project-content .project-text:first-child {
	padding-left: 1rem;
	gap: 0.5rem;
}
#work .work-grid .project-content .project-text:first-child:before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
}

/* --- about: no button for now, and the copy set whole and larger --- */

/* The Learn More button is out. It held the second row of the grid beside the
   picture, and with it gone the copy can take the whole height. */
#home .about .about-content > .btn,
#home .about .about-content .btn-block {
	display: none !important;
}
/* One paragraph, running the height of the picture, set well above body size —
   three short blocks spread down that height read as captions, not as writing.
   The measure is held near sixty characters so the lines stay readable at this
   size. */
#home .about .about-text {
	grid-row: 1 / -1 !important;
	align-self: start;
	/* The column beside the picture is the measure, so the writing runs to the
	   same right-hand edge everything else on the page ends at. The width is
	   overridden as well as the cap: the design system pins this paragraph to
	   49.3rem, which is what was holding it short of the edge. */
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	/* The writing starts on the page's own left margin with everything else
	   down the page, and stops short of the picture rather than running hard
	   against the column gap — so the two blocks read as two things side by
	   side and not as one butted pair. The inset is on the right now that the
	   picture has moved there. */
	padding-left: 0;
	padding-right: 4rem;
	font-size: 2.2rem;
	line-height: 1.5;
}

@media (max-width: 1099px) {
	/* One column. The two-column grid above is a desktop shape: on a phone it
	   left the writing in a strip a hundred and fifty pixels wide and nearly a
	   thousand tall — a column of two or three words a line. Stacked, the
	   photographs come first as the design had them, the writing under. */
	#home .about .about-content {
		grid-template-columns: 1fr;
		row-gap: 3rem;
	}
	#home .about .about-images,
	#home .about .about-text,
	#home .about .fcg-about-copy,
	#home .about .about-content > .btn {
		grid-column: 1;
		grid-row: auto;
	}
	#home .about .about-images {
		aspect-ratio: 16 / 10;
	}
	#home .about .about-text {
		font-size: 1.9rem;
		max-width: none !important;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   Showreel — the site's own player.

   Plyr came with the mirror and brought its own everything. It still runs the
   film — it keeps the seeking and the fullscreen call — but nothing it draws is
   shown, and the bar below is what this site would have had if the player had
   been drawn for it.

   The bar rides on a panel of dark glass, and that panel is the whole of its
   colour scheme. It replaces an arrangement that read the film underneath and
   turned the lettering black or white to match: that worked, and it was wrong.
   On a film cutting between white paper and black rooms the bar changed colour
   under your hand, and on the passages sitting near the middle it could not
   decide. The panel settles it once — white on dark glass, whatever is playing.
   ========================================================================== */

.showreel .plyr__controls {
	display: none !important;
}

.showreel .fcg-player {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	left: 2rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 0.8rem 1.2rem;
	border-radius: var(--r-btn, 999rem);
	/* Dense enough to carry white lettering over a white frame. At the two
	   fifths the smaller badges use, this panel came out mid-grey against paper
	   and the wording on it all but disappeared — the very thing the panel was
	   brought in to stop. Two thirds keeps the film showing through and still
	   reads on the brightest frame in the reel. */
	background: rgba(2, 2, 2, 0.66);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	/* one colour, and it does not change */
	color: var(--c-white, #fbfbf4);
	transition: opacity 0.3s ease;
}
/* the bar stands aside while the film plays untouched, and comes back the
   moment the pointer is anywhere near it */
.showreel .fcg-player.is-idle {
	opacity: 0;
	pointer-events: none;
}

.showreel .fcg-p-time {
	flex: 0 0 auto;
	min-width: 4.4rem;
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.showreel .fcg-p-dur {
	text-align: right;
}

/* --- the two sliders ------------------------------------------------------
   Both are real range inputs, so dragging, tapping and the keyboard all work
   without any of it being written here. Only the paint is ours: the track is a
   hairline with the played part drawn over it, and the handle is a small disc
   that grows under the pointer. */
.showreel .fcg-p-seek,
.showreel .fcg-p-vol {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	height: 1.6rem;
	margin: 0;
	cursor: pointer;
}
.showreel .fcg-p-seek {
	flex: 1 1 auto;
	min-width: 0;
}
.showreel .fcg-p-seek::-webkit-slider-runnable-track,
.showreel .fcg-p-vol::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background:
		linear-gradient(currentColor, currentColor) left / var(--p, 0%) 100% no-repeat,
		rgba(251, 251, 244, 0.34);
}
.showreel .fcg-p-seek::-webkit-slider-thumb,
.showreel .fcg-p-vol::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	margin-top: -0.4rem;
	border-radius: 50%;
	background: currentColor;
	transition: transform 0.18s ease;
}
.showreel .fcg-p-seek:hover::-webkit-slider-thumb,
.showreel .fcg-p-vol:hover::-webkit-slider-thumb {
	transform: scale(1.35);
}
.showreel .fcg-p-seek::-moz-range-track,
.showreel .fcg-p-vol::-moz-range-track {
	height: 2px;
	border-radius: 2px;
	background: rgba(251, 251, 244, 0.34);
}
.showreel .fcg-p-seek::-moz-range-progress,
.showreel .fcg-p-vol::-moz-range-progress {
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.showreel .fcg-p-seek::-moz-range-thumb,
.showreel .fcg-p-vol::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border: 0;
	border-radius: 50%;
	background: currentColor;
}

/* --- the two marks -------------------------------------------------------- */
.showreel .fcg-p-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	border: 0;
	border-radius: var(--r-btn, 999rem);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.24s ease;
}
/* a target appears under the pointer, and only then */
.showreel .fcg-p-btn:hover,
.showreel .fcg-p-btn:focus-visible {
	background: rgba(251, 251, 244, 0.16);
}
.showreel .fcg-p-btn::before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.showreel .fcg-p-mute::before {
	-webkit-mask-image: var(--fcg-sound);
	mask-image: var(--fcg-sound);
}
.showreel .fcg-p-mute.is-off::before {
	-webkit-mask-image: var(--fcg-sound-off);
	mask-image: var(--fcg-sound-off);
}
.showreel .fcg-p-full::before {
	-webkit-mask-image: var(--fcg-expand);
	mask-image: var(--fcg-expand);
}
/* the one at the head of the bar shows what pressing it will do next */
.showreel .fcg-p-play::before {
	-webkit-mask-image: var(--fcg-play);
	mask-image: var(--fcg-play);
}
.showreel .fcg-p-play.is-playing::before {
	-webkit-mask-image: var(--fcg-pause);
	mask-image: var(--fcg-pause);
}

/* the volume opens out of the speaker rather than sitting there taking room */
.showreel .fcg-p-sound {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.showreel .fcg-p-sound .fcg-p-vol {
	width: 0 !important;
	margin: 0 !important;
	opacity: 0;
	transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		margin 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.24s ease;
}
.showreel .fcg-p-sound:hover .fcg-p-vol,
.showreel .fcg-p-sound:focus-within .fcg-p-vol {
	width: 7rem !important;
	margin: 0 0.6rem 0 0.2rem !important;
	opacity: 1;
}

/* --- Close, in the same glass as the bar ---------------------------------
   It arrived as the design's glass button: a tenth of white with a hairline
   drawn on a canvas behind the wording — nearly invisible over a bright frame,
   and a different object from everything else on this screen. It is given the
   panel the control bar sits on, and a mark to go with its wording.

   Only its paint is touched. Its markup and its click are the mirror's own and
   are left exactly as they were; an earlier attempt to rebuild it as one of the
   site's ordinary buttons took both its visibility and its function with it. */
.showreel .showreel-close.glass-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	width: auto;
	height: auto;
	padding: 0.9rem 2rem 0.9rem 1.6rem;
	border: 0;
	border-radius: var(--r-btn, 999rem);
	background: rgba(2, 2, 2, 0.66);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--c-white, #fbfbf4);
}
/* the fill and the drawn hairline are what the panel above replaces; they stay
   in the page so whatever draws that hairline still finds what it expects */
.showreel .showreel-close .glass-btn-bg {
	background: none !important;
}
.showreel .showreel-close .border-canvas {
	display: none !important;
}
/* the mark, on its own layer — the glass fill behind it is positioned, and a
   positioned box paints over an ordinary one whatever the order in the markup */
.showreel .showreel-close::before {
	content: "";
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	background: currentColor;
	-webkit-mask: var(--fcg-close) center / contain no-repeat;
	mask: var(--fcg-close) center / contain no-repeat;
}
.showreel .showreel-close .glass-btn-text {
	position: relative;
	z-index: 1;
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-white, #fbfbf4);
}

@media (max-width: 1099px) {
	/* On a phone the bar cannot be one line. The parts that keep a set size —
	   the play mark, the two times, the speaker and the fullscreen mark — come
	   to 172 of the 300 available, and with the gaps between them the scrubber
	   was left thirty pixels wide: a control you cannot put a finger on.

	   So it wraps. The scrubber is pulled onto a line of its own at full width,
	   and everything else follows underneath — the two times beside the play
	   mark, the speaker and fullscreen pushed out to the right. */
	.showreel .fcg-player {
		flex-wrap: wrap;
		gap: 0.6rem 1.2rem;
		padding: 1.2rem 1.6rem;
	}
	.showreel .fcg-p-seek {
		order: -1;
		flex: 1 0 100%;
	}
	.showreel .fcg-p-sound {
		margin-left: auto;
	}
	/* a finger needs more of the line than a pointer does */
	.showreel .fcg-p-seek::-webkit-slider-thumb {
		width: 1.4rem;
		height: 1.4rem;
		margin-top: -0.6rem;
	}
	.showreel .fcg-p-seek::-moz-range-thumb {
		width: 1.4rem;
		height: 1.4rem;
	}
	/* the volume opens on tap rather than on hover, which a phone has not got */
	.showreel .fcg-p-sound:focus-within .fcg-p-vol {
		width: 6rem !important;
	}
}

/* --- the project chips are a hover affordance, and a phone has no hover ------
   The three services on a project card are meant to arrive when the pointer
   lands on it. Where there is no pointer they never leave: they sat across the
   top of every card, over the artwork, wrapped onto two lines, on every card in
   the grid at once. The work itself is what the grid is for, so on a touch
   screen the chips step aside — the project's name is still under the card, and
   the services are listed in full on the project's own page.

   Asked as "no hover" rather than as a width: a narrow window on a desktop
   still has a pointer and should still get them. */
@media (hover: none) {
	#work .work-grid .project-content,
	#home .fcg-work-card .project-content,
	.work-grid-project .project-content,
	.work-list-project .project-content {
		display: none !important;
	}
}

/* --- the project badges, on the landing's Featured Work --- */

/* The All Work page draws these already; everything above is scoped to #work,
   so the same drawing is extended here rather than a second version of it being
   written. The markup work-grid.js builds is identical — a .project-content of
   .project-text.fcg-chip pills — so only the selectors need widening.

   The base sizing comes from the design system and is repeated because that
   too is scoped to #work. */
#home .fcg-work-card .project-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	pointer-events: none;
}
#home .fcg-work-card .project-text {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: 0 1rem;
	margin: 0;
	font-size: 1.4rem;
	line-height: 120%;
	white-space: nowrap;
	/* Drawn, not filled: a black rule around an empty middle, so the picture
	   carries on through the shape.

	   The colour is forced. These are paragraphs inside a link, so the global
	   rule `a:not(...)…:hover p` would paint them blue and, on an empty ground,
	   leave them barely there. That rule carries !important, which beats
	   specificity however high, so this has to answer in kind. */
	color: var(--c-black, #020202) !important;
	background: transparent;
	border: 1px solid var(--c-black, #020202);
	opacity: 0;
	transform: translateY(1.8rem);
	transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	transition-property: opacity, transform;
}
/* joined: the neighbour's outline lands on this one */
#home .fcg-work-card .project-text + .project-text {
	margin-left: -1px;
}
/* The shapes alternate, as the drawing has them and as the All Work page
   already draws them: the outer two softened rectangles, the one between them
   taken all the way round so a short word reads as an oval. */
#home .fcg-work-card .project-text:nth-child(1),
#home .fcg-work-card .project-text:nth-child(3) {
	/* A softened rectangle, not a rounded one. Set as a share of the pill's own
	   height, which is what the drawing does: about a quarter of it. At 0.9rem
	   the corners came to a third and the shape read as another oval, losing the
	   contrast against the one in the middle. */
	border-radius: 0.62rem;
}
#home .fcg-work-card .project-text:nth-child(2) {
	border-radius: 999rem;
}
/* the first carries the arrow, as the design has it */
#home .fcg-work-card .project-text:first-child {
	padding-left: 1rem;
	gap: 0.5rem;
}
#home .fcg-work-card .project-text:first-child:before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
}
/* they rise as the pointer arrives, one after another */
#home .fcg-work-card:hover .project-text {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 1s;
}
#home .fcg-work-card:hover .project-text:nth-child(1) { transition-delay: 0.06s; }
#home .fcg-work-card:hover .project-text:nth-child(2) { transition-delay: 0.12s; }
#home .fcg-work-card:hover .project-text:nth-child(3) { transition-delay: 0.18s; }
#home .fcg-work-card:hover .project-text:nth-child(4) { transition-delay: 0.24s; }

/* a touch screen has no hover, so they simply show */
@media (hover: none) {
	#home .fcg-work-card .project-content {
		display: flex !important;
	}
	#home .fcg-work-card .project-text {
		opacity: 1;
		transform: none;
		transition: none;
	}
}