@font-face{font-family:'PP Neue Montreal';src:url('assets/neue.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Relative;src:url('assets/relative.otf') format('opentype');font-weight:400;font-display:swap}
*{box-sizing:border-box;border-width:0;border-style:solid}body,h1,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,.case-studies:focus-visible{outline:2px solid currentColor;outline-offset:4px}
:root{--home-edge:var(--pf-spacing-24);--card-width:min(634.513px,calc(100vw - 48px),calc((100svh - 260px)*634.513/482));--card-height:calc(var(--card-width)*482/634.513);--pf-font-body:'PP Neue Montreal',Arial,sans-serif;--pf-font-intro-size:38px;--pf-font-navigation-size:12px;--pf-tracking-tight:-.04em;--pf-control-height:34px}
body{background:var(--pf-color-bg-home);color:var(--pf-color-text-primary);font-family:var(--pf-font-body);min-height:100svh;overflow-x:hidden}
.navigation{display:flex;justify-content:space-between;align-items:center;padding:var(--home-edge);padding-bottom:0}
.navigation-actions{display:flex;gap:var(--pf-spacing-6);align-items:center}
.control{height:var(--pf-control-height);display:flex;align-items:center;justify-content:center;padding:var(--pf-spacing-10);background:var(--pf-color-bg-control);border-radius:var(--pf-radius-8);font-size:var(--pf-font-navigation-size);letter-spacing:var(--pf-tracking-tight);line-height:1;color:var(--pf-color-text-primary)}
.control{transition:background var(--pf-motion-component) ease-out,border-radius var(--pf-motion-component) ease-out}
.control:not(.logo):is(:hover,:focus-visible){background:var(--pf-color-bg-control-hover);border-radius:var(--pf-radius-12)}
@font-face{font-family:'PP Mori';src:url('assets/pp-mori-regular.otf') format('opentype');font-weight:400;font-display:swap}
.logo span{font-family:'PP Mori',Arial,sans-serif;font-size:12px;letter-spacing:-.04em;white-space:pre}
.colour-mode{width:34px;height:34px;padding:var(--pf-spacing-3);display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:var(--pf-radius-3);background:var(--pf-color-bg-control)}
.swatch{padding:0;border-radius:var(--pf-radius-3);opacity:.5}.swatch:hover,.swatch[aria-pressed=true]{opacity:1}.swatch[data-theme=dark]{background:var(--pf-color-swatch-charcoal)}.swatch[data-theme=light]{background:var(--pf-color-swatch-white)}.swatch[data-theme=purple]{background:var(--pf-color-swatch-plum)}.swatch[data-theme=green]{background:var(--pf-color-swatch-olive)}
.contact{position:relative}.contact-details{position:absolute;right:0;top:calc(100% + var(--pf-spacing-6));z-index:10;background:var(--pf-color-bg-control);padding:var(--pf-spacing-10);border-radius:var(--pf-radius-8);font-size:12px;white-space:nowrap}.contact-details a:hover{text-decoration:underline}
main{display:flex;flex-direction:column;min-height:calc(100svh - 58px)}
.intro{max-width:977px;font-size:var(--pf-font-intro-size);font-weight:400;letter-spacing:var(--pf-tracking-tight);line-height:1;color:var(--pf-color-text-intro);margin:var(--pf-spacing-20) var(--home-edge) var(--pf-spacing-44);white-space:pre-wrap}
.case-studies{margin-top:auto;width:100%;height:var(--card-height);flex:none;overflow:hidden;touch-action:pan-y;position:relative}
.case-study-track{display:flex;gap:var(--pf-spacing-20);width:max-content;will-change:transform;padding-left:var(--home-edge)}
.case-study-card{display:block;flex:none;width:var(--card-width);height:var(--card-height);position:relative;overflow:hidden;container-type:inline-size;background:var(--card-background)}
.case-study-card:focus-visible{outline-offset:-4px}.case-study-card .artwork{width:634.513px;height:482px;transform:scale(calc(100cqw / 634.513px));transform-origin:top left;pointer-events:none;overflow:hidden}.case-study-card .artwork>div{height:482px;width:634.513px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Additional theme mappings use the existing palette; the light mode matches Figma. */
html[data-theme=dark]{--pf-color-bg-home:var(--pf-color-swatch-charcoal);--pf-color-bg-control:#303236;--pf-color-bg-control-hover:#47494c;--pf-color-text-primary:#fff;--pf-color-text-intro:#aeb0b3}
html[data-theme=purple]{--pf-color-bg-home:var(--pf-color-swatch-plum);--pf-color-bg-control:#602c66;--pf-color-bg-control-hover:#77417d;--pf-color-text-primary:#fff;--pf-color-text-intro:#d4b7d8}
html[data-theme=green]{--pf-color-bg-home:var(--pf-color-swatch-olive);--pf-color-bg-control:#bdcf7b;--pf-color-bg-control-hover:#cfde9d;--pf-color-text-primary:#17191c;--pf-color-text-intro:#485127}
@media(max-width:700px){:root{--home-edge:var(--pf-spacing-16);--card-width:calc(100vw - 48px);--pf-font-intro-size:clamp(26px,5.5vw,38px)}.intro{margin-top:var(--pf-spacing-24);margin-bottom:var(--pf-spacing-44)}main{min-height:calc(100svh - 50px)}}
@media(prefers-reduced-motion:reduce){.case-study-track{will-change:auto}}

/* Keep the play affordance within the camera thumbnail when composing the preview. */
.artwork .preview-19{top:202.401px;bottom:auto}
.artwork .preview-20{left:214.832px;top:216.904px}

/* Shared component states, reconciled with Figma on 23 October 2026. */
/* Keep both initials in place while the remaining letters reveal between them. */
.logo{flex:none;justify-content:flex-start;gap:20px;overflow:hidden;transition:gap var(--pf-motion-component) ease-out,background var(--pf-motion-component) ease-out,border-radius var(--pf-motion-component) ease-out}
.logo-word{display:flex;align-items:baseline}
.logo .logo-reveal{display:block;width:0;overflow:hidden;opacity:0;transition:width var(--pf-motion-component) ease-out,opacity var(--pf-motion-component) ease-out}
.logo-reveal>span{display:block;width:max-content}
.logo:is(:hover,:focus-visible){gap:6px;background:var(--pf-color-bg-control-hover);border-radius:var(--pf-radius-12)}
.logo:is(:hover,:focus-visible) .logo-reveal{width:var(--logo-reveal-width,0px);opacity:1}
.contact{display:grid;align-items:center}
.contact>#contact-toggle,.contact>.contact-details{grid-area:1/1}
.contact>#contact-toggle{background:var(--pf-color-bg-control-hover);border-radius:var(--pf-radius-12)}
.contact[data-open=true]>#contact-toggle{visibility:hidden;pointer-events:none}
.contact-details{position:static;padding:0;background:transparent;line-height:1;letter-spacing:var(--pf-tracking-tight)}
.contact-details a{height:var(--pf-control-height);display:flex;align-items:center;padding:var(--pf-spacing-10);background:var(--pf-color-bg-control);border-radius:var(--pf-radius-8)}
.contact-details a:hover{text-decoration:none}
.case-study-card{border-radius:0;transition:border-radius var(--pf-motion-component) ease-out}
.case-study-card .artwork{transition:opacity var(--pf-motion-component) ease-out}
.case-study-card:is(:hover,:focus-visible){background:var(--pf-color-bg-card-hover);border-radius:0}
.case-study-card:is(:hover,:focus-visible) .artwork{opacity:var(--pf-card-hover-opacity)}
.card-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 20px);padding:var(--pf-spacing-10);background:var(--pf-color-bg-control);color:var(--pf-color-text-primary);border-radius:var(--pf-radius-8);font-size:var(--pf-font-navigation-size);line-height:1.2;letter-spacing:var(--pf-tracking-tight);text-align:center;opacity:0;pointer-events:none;transition:opacity var(--pf-motion-component) ease-out}
.case-study-card:is(:hover,:focus-visible) .card-label{opacity:1}
.content-title{width:fit-content;background:var(--pf-color-bg-control);color:var(--pf-color-text-primary);padding:var(--pf-spacing-8);border-radius:var(--pf-radius-8);font-size:10px;line-height:1;letter-spacing:var(--pf-tracking-tight)}
@media(max-width:420px){.navigation:has(.contact[data-open=true]) .logo{gap:20px}.navigation:has(.contact[data-open=true]) .logo .logo-reveal{width:0;opacity:0}}
@media(max-width:360px){.navigation .logo{gap:20px}.navigation .logo .logo-reveal{width:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.control,.logo,.logo .logo-reveal,.case-study-card,.case-study-card .artwork,.card-label{transition:none}}

.case-study-card .artwork>img{display:block;width:634.513px;height:482px;object-fit:contain}

.intro{transition:color var(--pf-motion-component) ease-out}
@media(hover:hover){.intro:hover{color:var(--pf-color-swatch-charcoal)}html[data-theme=dark] .intro:hover{color:var(--pf-color-text-primary)}}
@media(prefers-reduced-motion:reduce){.intro{transition:none}}

/* Navigation default and hover states match the current component kit. */
.contact>#contact-toggle{background:var(--pf-color-bg-control);border-radius:var(--pf-radius-8)}
.contact-details a{background:var(--pf-color-bg-control-hover);border-radius:var(--pf-radius-12)}
.case-menu{display:none;position:relative}
.case-menu>button[aria-expanded=true]{background:var(--pf-color-bg-control-hover);border-radius:var(--pf-radius-12)}
.case-menu-panel{position:absolute;z-index:30;top:38px;left:50%;transform:translateX(-50%);width:120px;padding:var(--pf-spacing-10);background:var(--pf-color-bg-panel);border-radius:var(--pf-radius-8);display:flex;flex-direction:column;gap:var(--pf-spacing-6);max-height:calc(100dvh - 90px);overflow:auto}
.case-menu-panel[hidden]{display:none}
.case-menu-panel a{position:relative;display:block;flex:none;width:100px;background:var(--pf-color-bg-card-hover)}
.case-menu-panel img{display:block;width:100px;height:auto;aspect-ratio:138/104.83;object-fit:contain;transition:opacity var(--pf-motion-component) ease-out}
.case-menu-panel span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:96px;padding:4px;background:var(--pf-color-bg-control);border-radius:3.3px;font-size:4.9px;letter-spacing:-.04em;line-height:1.2;text-align:center;opacity:0;pointer-events:none}
.case-menu-panel a:is(:hover,:focus-visible) img{opacity:var(--pf-card-hover-opacity)}
.case-menu-panel a:is(:hover,:focus-visible) span{opacity:1}
@media(max-width:700px){.case-menu{display:block}.navigation{position:relative;z-index:20}}
@media(prefers-reduced-motion:reduce){.case-menu-panel img{transition:none}}

/* Release-one theme switch. The four-colour palette remains parked. */
.theme-toggle{position:relative;flex:none;width:18px;height:34px;padding:3px;border-radius:var(--pf-radius-8);background:var(--pf-color-bg-control);cursor:pointer}
.theme-toggle span{position:absolute;left:3px;top:19px;width:12px;height:12px;border-radius:var(--pf-radius-3);background:var(--pf-color-toggle-thumb-light);transition:top var(--pf-motion-component) ease-out,background var(--pf-motion-component) ease-out}
.theme-toggle[aria-checked=true]{background:var(--pf-color-bg-toggle-dark)}
.theme-toggle[aria-checked=true] span{top:3px;background:var(--pf-color-toggle-thumb-dark)}
@media(prefers-reduced-motion:reduce){.theme-toggle span{transition:none}}

/* Shared overlays need the same dark surfaces on the homepage and case studies. */
html[data-theme=dark]{color-scheme:dark;--pf-color-bg-panel:#222428;--pf-color-border-metadata:#393b40;--pf-color-border-section:#393b40;--pf-color-text-secondary:#a8aaae}
html[data-theme=light]{color-scheme:light}

/* Raster and vector exports fill their cards directly, without fractional transform seams. */
.case-study-card .artwork--image{width:100%;height:100%;transform:none}
.case-study-card .artwork--image>img{width:100%;height:100%;object-fit:cover}

/* Crop the transparent outer pixels in the MMSG export so its dark card base cannot show through. */
.case-study-card[data-project="mmsg-design-system"] .artwork--image>img{position:relative;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none}