:root{--paper:#ffffff;--ink:#131313;--muted:#777777;--line:#e1e1e1;--rail:6.85vw;--profile:39vw}.presentation{background:var(--paper);color:var(--ink);letter-spacing:-.025em}.presentation main{max-width:none;margin:0 0 0 calc(var(--rail) + var(--profile))}.presentation .rail{position:fixed;inset:0 auto 0 0;width:var(--rail);border-right:1px solid var(--line);z-index:10;background:var(--paper);display:flex;align-items:center;flex-direction:column}.home-logo{display:block;width:43%;max-width:51px;margin-top:44px}.home-logo img{width:100%;height:auto}.slide-nav{display:flex;flex-direction:column;gap:4px;position:absolute;top:50%;transform:translateY(-50%);padding:0}.slide-nav a{display:grid;place-items:center;width:30px;height:25px;border:0;padding:0}.slide-nav a span{width:5px;height:5px;background:#c3c3c3;border-radius:50%;transition:transform .25s,background .25s}.slide-nav a[aria-current=true] span{background:var(--ink);transform:scale(1.5)}.slide-nav a:hover span{background:var(--ink)}.rail-bottom{position:absolute;bottom:28px;display:flex;gap:26px;flex-direction:column;align-items:center}.slide-counter{display:flex;align-items:center;flex-direction:column;gap:8px;font-size:10px;color:#848484;letter-spacing:0}.slide-counter #current-slide{color:var(--ink)}.counter-divider{height:24px;width:1px;background:var(--line)}.rail-contact{font-size:22px;line-height:1}.profile{position:fixed;left:var(--rail);top:0;bottom:0;width:var(--profile);padding:5.15vh 10.9vw 4.8vh 4.1vw;z-index:3;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;gap:35px;border-right:1px solid var(--line)}.profile-details{width:100%}.identity{display:flex;gap:24px;align-items:center;margin-bottom:24px}.identity img{width:clamp(70px,6.9vw,132px);height:clamp(70px,6.9vw,132px);flex:0 0 auto;object-fit:cover;object-position:50% 32%;border-radius:12px}.identity h1{font-size:clamp(24px,1.95vw,38px);font-weight:400;line-height:1.25;letter-spacing:-.055em;margin:0}.profile-facts{margin:0}.profile-facts>div{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:clamp(12px,.85vw,16px);line-height:1.4;min-height:64px}.profile-facts>div:last-child{border-bottom:1px solid var(--line)}.profile-facts dt{color:#777777;white-space:nowrap}.profile-facts dd{margin:0;text-align:right;font-weight:400}.active-summary h2{font-size:clamp(26px,1.95vw,38px);font-weight:400;line-height:1.1;letter-spacing:-.055em;margin:0 0 23px}.active-summary p{font-size:clamp(13px,.87vw,17px);line-height:1.35;letter-spacing:-.025em;margin:0 0 19px}.summary-link{display:inline-flex;gap:23px;font-size:12px;line-height:1.4;border-bottom:1px solid #a4a4a4;padding-bottom:4px;margin-top:6px}.summary-link:hover{border-color:var(--ink)}.showcase-slide{height:100svh;min-height:650px;position:relative;scroll-margin-top:0;scroll-snap-align:start}.presentation{scroll-snap-type:y proximity}.showcase{scroll-snap-type:y proximity}.logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,1fr);height:100%;min-height:650px}.company-logo{border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden;gap:22px;transition:background .25s}.company-logo:hover{background:#f0f0f0}.company-logo>span:not(.company-arrow){font-size:11px;letter-spacing:-.01em;color:#777777}.logo-window{width:180px;height:130px;max-width:100%;position:relative;overflow:hidden}.logo-window img{width:750px;max-width:none;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:brightness(0)}.logo-window.ferries{width:240px}.logo-window.ferries img{width:650px}.company-arrow{position:absolute;right:22px;bottom:21px;font-size:20px;opacity:0;transform:translate(-3px,-3px);transition:.25s}.company-logo:hover .company-arrow{opacity:1;transform:none}.project-slide{padding:3.85vh 2.1vw 3.85vh 0}.project-board{height:100%;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;padding:24px;border-radius:13px;overflow:hidden;position:relative;background:#e3e3e3;transition:filter .3s}.board-image{overflow:hidden;border-radius:7px;background:#ffffff0d;min-width:0;min-height:0;box-shadow:0 9px 26px #00000012}.board-image img{height:100%;width:100%;object-fit:cover;transition:transform .7s}.board-image.image-0{grid-column:1/3}.board-image.image-1{grid-column:3;grid-row:1}.board-image.image-2{grid-column:1;grid-row:2}.board-image.image-3{grid-column:2/4;grid-row:2}.board-fifa{background:#292929}.board-lulu{background:#4e4e4e}.board-rival{background:#232323}.board-pattern{background:#d4d4d4}.board-ferries{background:#c4c4c4}.board-moments{background:#8f8f8f}.board-lulu .image-0{grid-column:1/-1;grid-row:1}.board-lulu .image-1{grid-column:1/3;grid-row:2}.board-lulu .image-2{grid-column:3;grid-row:2}.project-board:hover .board-image img{transform:scale(1.025)}.board-cta{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-radius:5px;padding:12px 16px;font-size:12px;opacity:0;transform:translateY(8px);transition:.25s}.board-cta>span{color:#676767}.project-board:hover .board-cta,.project-board:focus-visible .board-cta{opacity:1;transform:none}.mobile-summary,.mobile-about{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.presentation .skip{z-index:50}
@media(min-width:1550px){.profile{padding-right:10.9vw}.profile-facts>div{padding:23px 0}.project-board{gap:24px;padding:30px}}@media(max-width:1450px){.profile{padding-right:5.4vw}.identity{gap:19px}.profile-facts>div{padding:18px 0;min-height:58px}.active-summary h2{margin-bottom:18px}.active-summary p{font-size:14px}.project-board{padding:17px;gap:14px}.logo-window img{width:640px}.logo-window.ferries img{width:570px}}
@media(max-height:760px) and (min-width:901px){.profile{padding-top:30px;padding-bottom:25px;gap:20px}.identity{margin-bottom:18px}.identity img{width:72px;height:72px}.identity h1{font-size:28px}.profile-facts>div{padding:13px 0;min-height:49px}.active-summary h2{font-size:27px;margin-bottom:15px}.active-summary p{font-size:13px;margin-bottom:12px}.showcase-slide{min-height:620px}.logo-grid{min-height:620px}}
@media(max-width:1100px) and (min-width:901px){:root{--rail:65px;--profile:38vw}.profile{padding-left:3.5vw;padding-right:3.5vw}.profile-facts>div{gap:10px;font-size:12px}.identity img{width:70px;height:70px}.identity h1{font-size:25px}.active-summary p{font-size:13px}.logo-window img{width:580px}.logo-window.ferries img{width:480px}.company-logo>span:not(.company-arrow){font-size:10px}.project-board{gap:10px;padding:12px}}
@media(max-width:900px){:root{--rail:64px;--profile:0px}.presentation .rail{width:64px}.home-logo{width:32px;margin-top:26px}.profile{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin-left:64px;padding:35px 7% 38px;border-right:0;border-bottom:1px solid var(--line);gap:0}.profile-details{max-width:560px}.identity{gap:25px}.identity img{height:90px;width:90px}.identity h1{font-size:32px}.profile-facts>div{font-size:14px;padding:17px 0}.active-summary{display:none}.presentation main{margin-left:64px}.showcase-slide{height:auto;min-height:0;scroll-margin-top:20px}.overview-slide{padding:0}.logo-grid{height:480px;min-height:0}.logo-window{height:105px}.logo-window img{width:590px}.logo-window.ferries img{width:490px}.company-logo{gap:10px}.mobile-about{display:block;font-size:16px;line-height:1.5;margin:0;padding:30px 7% 40px;border-bottom:1px solid var(--line);max-width:650px}.mobile-summary{display:block;padding:40px 0 27px}.mobile-summary h2{font-size:31px;font-weight:400;letter-spacing:-.05em;line-height:1.1;margin:15px 0 20px}.mobile-summary p{font-size:15px;line-height:1.45;max-width:560px;margin:0 0 15px}.mobile-kicker{font-size:10px;color:var(--muted)}.project-slide{padding:0 7% 40px;border-bottom:1px solid var(--line)}.project-board{height:670px;border-radius:10px;gap:12px;padding:15px}.board-cta{display:none}.slide-nav{gap:8px}.rail-bottom{bottom:24px}.logo-window.ferries{width:190px}.company-logo .company-arrow{display:none}}
@media(max-width:560px){:root{--rail:48px}.presentation .rail{width:48px}.home-logo{width:27px;margin-top:22px}.profile,.presentation main{margin-left:48px}.profile{padding:26px 23px 30px}.identity{gap:20px;margin-bottom:25px}.identity img{width:77px;height:77px;border-radius:9px}.identity h1{font-size:28px}.profile-facts>div{font-size:12px;padding:16px 0;gap:10px}.profile-facts dd br{display:none}.profile-facts dd{max-width:170px}.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,1fr);height:570px}.logo-window{width:150px;height:93px}.logo-window img{width:500px}.logo-window.ferries{width:150px}.logo-window.ferries img{width:450px}.company-logo{gap:3px}.company-logo>span:not(.company-arrow){font-size:10px}.mobile-about{padding:30px 23px;font-size:15px}.project-slide{padding:0 17px 30px}.mobile-summary{padding-top:32px}.mobile-summary h2{font-size:28px}.mobile-summary p{font-size:14px}.project-board{height:490px;gap:9px;padding:10px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}.board-image.image-0{grid-column:1/-1;grid-row:1}.board-image.image-1{grid-column:1;grid-row:2}.board-image.image-2{grid-column:2;grid-row:2}.board-image.image-3{grid-column:1/-1;grid-row:3}.board-lulu .image-0{grid-column:1/-1;grid-row:1}.board-lulu .image-1{grid-column:1/-1;grid-row:2}.board-lulu .image-2{grid-column:1/-1;grid-row:3}.rail-contact{font-size:19px}.rail-bottom{gap:20px}.slide-nav{gap:6px}.slide-nav a{height:22px;width:25px}.slide-counter{font-size:9px}.board-image{border-radius:5px}.profile-facts{max-width:430px}}
@media(prefers-reduced-motion:reduce){.project-board:hover .board-image img{transform:none}}
/* Preserve the original logo artwork while framing its transparent canvas. */
.home-logo{height:48px;overflow:hidden}.home-logo img{width:333.333%;max-width:none;height:auto}.logo-window.ferries{width:90px}.logo-window.ferries img{width:570px;left:calc(50% + 40px)}
@media(max-width:900px){.home-logo{height:36px}}
@media(max-width:560px){.home-logo{height:30px}.logo-window.ferries{width:72px}.logo-window.ferries img{width:450px;left:calc(50% + 32px)}}
html:has(body.presentation){scroll-padding-top:0;scroll-snap-type:y proximity}

.logo-window.microsoft img{width:82px;height:82px}.microsoft-board{height:100%;width:100%;border:1px solid var(--line);border-radius:13px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}.microsoft-board img{width:110px;height:110px}.microsoft-board>span{font-size:12px;color:var(--muted)}
@media(max-width:900px){.microsoft-board{height:550px}}@media(max-width:560px){.logo-window.microsoft img{width:64px;height:64px}.microsoft-board{height:390px}.microsoft-board img{width:90px;height:90px}}

.summary-link[hidden]{display:none}

/* Three-image composition: a single lead image and two supporting images. */
.project-board{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.project-board .board-image.image-0{grid-column:1/-1;grid-row:1}
.project-board .board-image.image-1{grid-column:1;grid-row:2}
.project-board .board-image.image-2{grid-column:2;grid-row:2}
.rail-contact{display:grid;place-items:center;min-width:30px;min-height:30px}.rail-contact .arrow-icon{width:17px!important;height:17px!important}.summary-link{align-items:center;gap:7px}.company-arrow .arrow-icon{width:14px!important;height:14px!important}
.microsoft-media{display:grid;grid-template-rows:1fr 1fr;gap:18px;padding:18px;background:#eaeaea;align-items:stretch}
.microsoft-media figure{min-width:0;min-height:0;margin:0;overflow:hidden;border-radius:7px;background:#f7f7f7;display:flex;flex-direction:column}
.microsoft-media .ms-image img{width:100%;height:100%;object-fit:contain}
.microsoft-media video{width:100%;height:calc(100% - 28px);min-height:0;object-fit:contain;background:#ededed;display:block}
.microsoft-media figcaption{font-size:10px;line-height:1.3;color:#777777;padding:7px 10px;background:#f7f7f7}
@media(max-width:900px){.microsoft-media{height:700px}.rail-contact .arrow-icon{width:16px!important;height:16px!important}}
@media(max-width:560px){.project-board{height:490px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.microsoft-media{height:500px;padding:10px;gap:10px}.microsoft-media figcaption{font-size:9px}}
/* Reduce the desktop profile column to 75% of its previous width. */
@media(min-width:901px){
 :root{--profile:29.25vw}
 .profile{padding-left:3.075vw;padding-right:3.075vw}
 .identity{gap:18px}
 .identity img{width:clamp(60px,5.175vw,99px);height:clamp(60px,5.175vw,99px)}
 .identity h1{font-size:clamp(22px,1.7vw,32px)}
}
@media(min-width:901px) and (max-width:1450px){.profile{padding-right:3.075vw}.identity{gap:14px}}
@media(min-width:901px) and (max-width:1100px){:root{--profile:28.5vw}.profile{padding-left:2.625vw;padding-right:2.625vw}.identity img{width:54px;height:54px}.identity h1{font-size:22px}.identity{gap:12px}}

/* Original mockups: one wide lead image with two supporting images below. */
.project-board{height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;padding:16px}
.project-board .board-image.image-0{grid-column:1/-1;grid-row:1}
.project-board .board-image.image-1{grid-column:1;grid-row:2}
.project-board .board-image.image-2{grid-column:2;grid-row:2}
.project-board .board-image img{object-fit:cover;object-position:center}
.board-fifa .image-0 img{object-position:90% 0%}
.board-pattern .image-0 img{object-position:50% 0%}
.board-ferries .image-0 img{object-position:49% 19%}
.board-rival{background:#313131}.board-fifa{background:#e7e7e7}.board-lulu{background:#f0f0f0}.board-pattern{background:#eaeaea}.board-ferries{background:#efefef}
@media(max-width:900px){.project-board{height:670px}}
@media(max-width:560px){.project-board{height:490px;gap:10px;padding:10px}}
/* Edge-to-edge covers with a restrained zoom on the hovered image. */
.project-slide{padding:0}
.project-board{padding:0;gap:0;border-radius:0}
.project-board .board-image{border-radius:0;box-shadow:none;isolation:isolate}
.project-board .board-image img{transform:scale(1);transition:transform 850ms cubic-bezier(.19,1,.22,1);transform-origin:center}
.project-board:hover .board-image img{transform:scale(1)}
@media(hover:hover) and (pointer:fine){
 .project-board .board-image:hover img{transform:scale(1.055)}
}
.microsoft-media{padding:0;gap:0;border:0;border-radius:0}
.microsoft-media figure{border-radius:0}
.microsoft-media .ms-image{overflow:hidden}
.microsoft-media .ms-image img{transition:transform 850ms cubic-bezier(.19,1,.22,1)}
@media(hover:hover) and (pointer:fine){.microsoft-media .ms-image:hover img{transform:scale(1.055)}}
#summary-link{border-bottom:0;padding-bottom:0}
@media(max-width:900px){.project-slide{padding:0}.mobile-summary{padding:40px 7% 27px}}
@media(max-width:560px){.mobile-summary{padding:32px 17px 27px}}
@media(prefers-reduced-motion:reduce){.project-board .board-image:hover img,.microsoft-media .ms-image:hover img{transform:none}}

/* Original screenshot plus a sky-only extension; original interface stays intact. */
.microsoft-media{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr)}
.microsoft-media .ms-sky-cover{grid-column:1/-1;grid-row:1;display:block;aspect-ratio:2923/1640;background:#747474}
.ms-sky-frame{position:relative;width:100%;height:100%;background-image:url("assets/microsoft-sky-optimized-v1.webp");background-size:100% auto;background-position:center top;background-repeat:no-repeat;transition:transform 850ms cubic-bezier(.19,1,.22,1)}
.microsoft-media .ms-sky-original{position:absolute;left:0;bottom:0;width:100%;height:87.37804878%;object-fit:fill;mask-image:linear-gradient(to bottom,transparent,black 16px)}
.microsoft-media .ms-image{grid-column:1;grid-row:2}.microsoft-media .ms-video{grid-column:2;grid-row:2}
@media(hover:hover) and (pointer:fine){.ms-sky-cover:hover .ms-sky-frame{transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){.ms-sky-cover:hover .ms-sky-frame{transform:none}}
/* A white gallery frame with discrete vertical project pages. */
html:has(body.is-paginated){scroll-snap-type:none;scroll-padding:0}
body.is-paginated{overflow:hidden}
.is-paginated .showcase{--gallery-frame:clamp(22px,2.1vw,40px);position:fixed;left:calc(var(--rail) + var(--profile));top:0;right:0;bottom:0;margin:0;max-width:none;background:#ffffff;overflow:hidden;isolation:isolate;touch-action:pan-x pinch-zoom}
.is-paginated .showcase-slide{position:absolute;inset:var(--gallery-frame);height:auto;min-height:0;padding:0;overflow:hidden;border-radius:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(105%);transition:transform 650ms cubic-bezier(.22,.8,.22,1),opacity 400ms ease,visibility 0s 650ms;scroll-margin:0;scroll-snap-align:none}
.is-paginated .showcase-slide.is-before{transform:translateY(-105%)}
.is-paginated .showcase-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.is-paginated .logo-grid{height:100%;min-height:0;background:var(--paper)}
.is-paginated .project-board,.is-paginated .microsoft-media{height:100%;min-height:0;border-radius:12px;overflow:hidden}
.is-paginated .pagination-controls{position:absolute;right:var(--gallery-frame);bottom:2px;display:flex;gap:7px;padding:0;z-index:5;align-items:center}
.pagination-controls button{display:grid;place-items:center;width:28px;height:24px;background:transparent;border:0;border-radius:5px;padding:0;transition:background .2s,opacity .2s}
.pagination-controls button:hover:not(:disabled){background:#eeeeee}
.pagination-controls button:disabled{opacity:.2;cursor:default}
.pagination-controls .arrow-icon{width:15px!important;height:15px!important}
@media(max-width:900px){
 body.is-paginated{overflow-y:auto}
 .is-paginated .showcase{--gallery-frame:20px;position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-left:var(--rail);height:85svh;min-height:600px}
 .is-paginated .showcase-slide{display:flex;flex-direction:column}
 .is-paginated .overview-slide{display:block}
 .is-paginated .mobile-summary{padding:0 0 17px;flex:0 0 auto}
 .is-paginated .mobile-summary h2{font-size:26px;margin:10px 0 12px}
 .is-paginated .mobile-summary p{font-size:13px;line-height:1.4;margin-bottom:10px}
 .is-paginated .mobile-summary p+p{display:none}
 .is-paginated .mobile-summary .summary-link{font-size:11px;margin-top:0}
 .is-paginated .project-board,.is-paginated .microsoft-media{flex:1;min-height:0;height:auto}
 .is-paginated .mobile-about{display:none}
}
@media(max-width:560px){.is-paginated .showcase{--gallery-frame:16px;height:82svh;min-height:570px}.is-paginated .pagination-controls{bottom:0}.pagination-controls button{height:16px}}
@media(prefers-reduced-motion:reduce){.is-paginated .showcase-slide{transition:none!important}}

.is-paginated .showcase::after{content:"";position:absolute;inset:0;border:var(--gallery-frame) solid #ffffff;pointer-events:none;z-index:4}
/* Clipping prevents hash navigation from scrolling the carousel internally. */
.is-paginated .showcase,.is-paginated .showcase-slide{overflow:clip}

/* Seamless white profile and balanced horizontal spacing. */
.profile{border-right:0}
.microsoft-media .ms-copilot-cover{grid-column:2;grid-row:2}

/* Coordinated dusk palette belongs to the project artwork, not the UI. */
.microsoft-media .ms-product-stage{display:grid;place-items:center;background-color:#b8bfce;background-image:radial-gradient(ellipse at 24% 8%,#b6c7db 0%,transparent 60%),linear-gradient(130deg,#96a8c4 0%,#b9bbd0 52%,#c3aebd 100%);background-size:200% 100%;background-position:left center}
.microsoft-media .ms-copilot-cover{background-position:right center}
.microsoft-media .ms-product-stage img{display:block;width:94%;height:88%;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 20px #18223824)}
.microsoft-media .ms-suite-stage img{width:100%;height:88%}

.home-logo{transform:scale(.82);transform-origin:center top}

/* Supplied Microsoft screenshots, shown in full without recolouring. */
.microsoft-media .ms-supplied{display:flex;background-image:none}
.microsoft-media .ms-settings-cover{background:#0d0c0b}
.microsoft-media .ms-input-cover{background:#242321}
.microsoft-media .ms-supplied img{width:100%;height:100%;object-fit:contain;object-position:center;filter:none}

/* Centred floating project actions. */
.is-paginated .pagination-controls{left:50%;right:auto;bottom:calc(var(--gallery-frame) + 18px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 2 * var(--gallery-frame) - 20px);padding:0;gap:10px;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;z-index:6}
.is-paginated .pagination-controls button,.is-paginated .pagination-controls a{display:inline-flex;align-items:center;justify-content:center;height:38px;width:auto;min-height:38px;padding:0 19px;border:0;border-radius:999px;font-size:12px;line-height:1;letter-spacing:-.015em;white-space:nowrap;transition:background 180ms ease,color 180ms ease,transform 180ms ease}
.is-paginated .pagination-controls button{background:#171717;color:#ffffff}
.is-paginated .pagination-controls button:hover{background:#333333}
.is-paginated .pagination-controls a{background:#ffffff;color:#171717}
.is-paginated .pagination-controls a:hover{background:#eeeeee}
.is-paginated .pagination-controls a[hidden]{display:none}
.is-paginated .pagination-controls button:active,.is-paginated .pagination-controls a:active{transform:scale(.97)}
@media(max-width:560px){.is-paginated .pagination-controls{bottom:calc(var(--gallery-frame) + 12px)}.is-paginated .pagination-controls button,.is-paginated .pagination-controls a{padding:0 15px}}

.is-paginated .overview-slide::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;pointer-events:none;z-index:2}

.is-paginated .pagination-controls button,.is-paginated .pagination-controls a{box-shadow:0 3px 16px #00000020}

/* Company marks stay anchored to the lead artwork while individual images zoom. */
.microsoft-media{position:relative}
.project-company-mark{position:absolute;left:clamp(20px,2.4vw,36px);top:clamp(20px,2.4vw,36px);width:54px;height:54px;border-radius:0;background:none;box-shadow:none;z-index:2;pointer-events:none;overflow:hidden}
.project-company-mark .brand-crop{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.project-company-mark .brand-crop img{position:absolute;left:50%;top:50%;width:300px;max-width:none;height:auto;object-fit:initial;transform:translate(-50%,-50%);filter:brightness(0);transition:none}
.project-company-mark.mark-ferries img{left:calc(50% + 21px)}
.project-company-mark.mark-microsoft img{width:29px;height:29px}
@media(max-width:560px){.project-company-mark{left:16px;top:16px;width:46px;height:46px}.project-company-mark .brand-crop img{width:250px}.project-company-mark.mark-ferries img{left:calc(50% + 17.5px)}.project-company-mark.mark-microsoft img{width:25px;height:25px}}

.project-company-mark.mark-fifa img,.project-company-mark.mark-rival img,.project-company-mark.mark-microsoft img,.project-company-mark.mark-pattern img{filter:brightness(0) invert(1)}

.project-company-mark{transform:scale(.85);transform-origin:top left}
.is-paginated .pagination-controls[hidden]{display:none}

/* Two full-width lululemon animations, with their original proportions. */
.project-board.board-lulu{grid-template-columns:minmax(0,1fr);grid-template-rows:369fr 450fr;background:#eeeeee}
.project-board.board-lulu .board-image.image-1{grid-column:1;grid-row:1}
.project-board.board-lulu .board-image.image-2{grid-column:1;grid-row:2}
.project-board.board-lulu .board-image{background:#eeeeee}
.project-board .board-image video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transform:scale(1);transition:transform 850ms cubic-bezier(.19,1,.22,1)}
@media(hover:hover) and (pointer:fine){.project-board .board-image:hover video{transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){.project-board .board-image:hover video{transform:none}}

/* Both floating actions follow the monochrome company mark. */
.pagination-controls{--action-bg:#171717;--action-text:#ffffff;--action-hover:#333333}
.pagination-controls[data-logo-tone="light"]{--action-bg:#ffffff;--action-text:#171717;--action-hover:#eeeeee}
.is-paginated .pagination-controls button,.is-paginated .pagination-controls a{background:var(--action-bg);color:var(--action-text)}
.is-paginated .pagination-controls button:hover,.is-paginated .pagination-controls a:hover{background:var(--action-hover)}

/* Mobile uses the full width, with the brand above the profile instead of a rail. */
.mobile-header{display:none}
@media(max-width:900px){
 :root{--rail:0px}
 .presentation .rail{display:none}
 .presentation .mobile-header{display:flex;align-items:center;max-width:none;margin:0;padding:24px 7%;height:78px;background:#ffffff}
 .mobile-header .home-logo{width:32px;height:36px;margin:0;transform:none}
 .presentation .profile{margin-left:0;padding-top:12px}
 .presentation main,.is-paginated .showcase{margin-left:0}
}
@media(max-width:560px){
 .presentation .mobile-header{height:74px;padding:20px 23px}
 .mobile-header .home-logo{width:28px;height:32px}
}

/* Keep the final-page return arrow comfortably spaced from its label. */
.is-paginated .pagination-controls button{gap:7px}

/* Tight vector assets replace enlarged, cropped PNG strips on the overview. */
.logo-grid .logo-window{width:180px;height:130px;display:grid;place-items:center}
.logo-grid .logo-window img{position:static;transform:none;width:72px;height:72px;max-width:100%;object-fit:contain;filter:none}
@media(max-width:900px){.logo-grid .logo-window{width:140px;height:105px}.logo-grid .logo-window img{width:64px;height:64px}}
@media(max-width:560px){.logo-grid .logo-window{width:120px;height:93px}.logo-grid .logo-window img{width:56px;height:56px}}

.mobile-profile-contact{display:none}
@media(max-width:900px){.mobile-profile-contact{display:inline-block;margin-top:22px;font-size:13px}}

/* Explicit tracks avoid a collapsed auto row in Safari's intrinsic grid sizing. */
.microsoft-media{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.microsoft-media .ms-launch-cover{grid-column:1/-1;grid-row:1;display:block;min-width:0;min-height:0;background:#edf7ff;overflow:hidden}
.microsoft-media .ms-launch-video{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#edf7ff;pointer-events:none;transition:transform 850ms cubic-bezier(.19,1,.22,1)}
.microsoft-media .mark-microsoft img{filter:brightness(0)}
@media(hover:hover) and (pointer:fine){.ms-launch-cover:hover .ms-launch-video{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.ms-launch-cover:hover .ms-launch-video{transform:none}}