@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#171817;--text:#f6f6ee;--muted:#a4a69e;--line:#363832;--accent:#d7fc70;font-family:'DM Sans',sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--bg);color:var(--text)}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{padding:24px 4.5% 0;border-bottom:1px solid var(--line)}.topbar{display:flex;align-items:center;gap:48px}.logo{text-decoration:none;display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;letter-spacing:-2px}.mark{display:grid;place-items:center;background:var(--accent);color:var(--bg);width:31px;height:34px;border-radius:2px;font-size:39px;line-height:1;overflow:hidden}.logo-dot{font-size:14px;align-self:flex-start;margin:6px 0 0 -6px;letter-spacing:0}.studio-label{font-size:12px;line-height:1.5;color:var(--muted)}.motion-toggle{margin-left:auto;border:1px solid #55584d;background:transparent;border-radius:30px;padding:10px 16px;font-size:14px;display:flex;gap:10px;align-items:center}.motion-toggle:hover{background:#303328}.headline{display:flex;justify-content:space-between;align-items:center;padding:28px 0 14px;gap:24px}.eyebrow{font-size:12px;letter-spacing:1.5px;margin:0 0 8px;color:var(--accent)}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,5.4vw,82px);letter-spacing:-.065em;line-height:1.08;font-weight:500;margin:0}h1 em{font-style:normal;color:var(--accent)}.header-art{display:flex;align-items:center;height:100px;padding-right:14px;gap:5px;transform:rotate(-12deg)}.header-art span{width:17px;height:40px;background:var(--accent);border-radius:50%;transform:rotate(25deg)}.header-art span:nth-child(2),.header-art span:nth-child(6){height:65px}.header-art span:nth-child(3),.header-art span:nth-child(5){height:85px}.header-art span:nth-child(4){height:100px}.intro-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0 18px;color:var(--muted)}.intro-line p{margin:0;font-size:14px}.intro-line>span{font-size:11px;letter-spacing:1.1px}.intro-line>span span{margin-left:15px;font-size:19px;color:var(--accent)}main{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#53574a transparent;overscroll-behavior-y:contain}.collection{padding:26px 0 4px 4.5%}.section-heading{display:flex;justify-content:space-between;align-items:center;padding-right:4.7%;margin-bottom:16px}.section-title{display:flex;align-items:baseline;gap:15px}.index{font-size:12px;color:var(--accent);font-family:'Space Grotesk',sans-serif}.section-title h2{font:500 24px 'Space Grotesk',sans-serif;margin:0;letter-spacing:-.6px}.count{font-size:12px;color:var(--muted)}.arrows{display:flex;gap:8px}.arrows button{width:34px;height:34px;border:1px solid #53564b;border-radius:50%;background:transparent;font-size:18px}.arrows button:hover:not(:disabled){background:var(--accent);color:var(--bg);border-color:var(--accent)}.arrows button:disabled{opacity:.3;cursor:default}.track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#45483e transparent;padding:0 4.7% 14px 0;overscroll-behavior-x:contain}.card{flex:0 0 clamp(230px,25.2vw,390px);scroll-snap-align:start;min-width:0}.visual{aspect-ratio:1.63;position:relative;overflow:hidden;border-radius:8px;background:#303328}.visual img{width:100%;height:100%;object-fit:cover;display:block}.gif-label{position:absolute;top:12px;left:12px;padding:4px 7px;border:1px solid #ffffff55;background:#15151533;backdrop-filter:blur(6px);border-radius:4px;font-size:10px;letter-spacing:1px;color:white}.card-info{display:flex;justify-content:space-between;gap:10px;padding:12px 0 0}.card h3{font-size:16px;font-weight:500;margin:0 0 4px}.card p{color:var(--muted);font-size:12px;margin:0}.card-number{color:#81857a;font:12px 'Space Grotesk',sans-serif;padding-top:4px}.endnote{margin:40px 4.5%;font:500 26px 'Space Grotesk',sans-serif;letter-spacing:-1px}.endnote span{color:#747a69}footer{display:grid;grid-template-columns:1.2fr 1.2fr 1.1fr auto;gap:24px;align-items:center;border-top:1px solid var(--line);padding:20px 4.5%;background:#141513;font-size:12px;color:var(--muted);line-height:1.65}.footer-brand{display:flex;flex-direction:column}.footer-brand strong{font:600 24px 'Space Grotesk',sans-serif;letter-spacing:-1px;color:var(--text)}address{font-style:normal}.company a{text-decoration:none;color:var(--text)}.company a:hover{text-decoration:underline}.copyright{text-align:right}.skip{position:fixed;left:20px;top:-100px;z-index:5;background:var(--accent);color:#171817;padding:12px}.skip:focus{top:10px}@media(min-width:1600px){header{padding-top:30px}.headline{padding-top:35px;padding-bottom:22px}.collection{padding-top:30px}}@media(max-width:700px){header{padding:18px 5% 0}.topbar{gap:16px}.logo{font-size:29px}.studio-label{display:none}.motion-toggle{font-size:12px;padding:9px 12px}.headline{padding-top:24px}.header-art{gap:2px;height:65px;padding:0}.header-art span{width:8px;max-height:60px}.eyebrow{font-size:10px;letter-spacing:1px}h1{font-size:clamp(32px,7.8vw,54px)}.intro-line>span{display:none}.intro-line{padding-top:0;padding-bottom:15px}.collection{padding-left:5%;padding-top:20px}.section-title{gap:9px}.section-title h2{font-size:20px}.count{font-size:10px}.track{gap:14px}.card{flex-basis:76vw}.arrows button{width:30px;height:30px}footer{padding:12px 5%;grid-template-columns:1fr 1.4fr;gap:6px 16px;font-size:10px}.footer-brand strong{font-size:20px}.footer-brand span,.company{display:none}.copyright{text-align:left;font-size:9px;grid-column:1/-1}.copyright br{display:none}.endnote{font-size:22px}}@media(max-height:650px) and (min-width:701px){.headline{padding-top:15px;padding-bottom:5px}h1{font-size:46px}.header-art{height:60px}.header-art span{max-height:60px}footer{padding-top:10px;padding-bottom:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Click-to-play gallery cards. Space around each card keeps enlargement unclipped. */
.track{padding-top:8px;padding-left:8px;margin-left:-8px;align-items:flex-start;padding-bottom:22px}
.card{transition:transform .2s ease;transform-origin:top center}
.card.is-active{transform:scale(1.4);transform-origin:top left;z-index:1;margin-right:calc(clamp(230px,25.2vw,390px) * .4);margin-bottom:160px}
.card-toggle{display:block;width:100%;padding:0;border:0;background:none;text-align:left;border-radius:8px}
.card-toggle .visual{display:block}
.card-toggle:hover .visual{box-shadow:0 0 0 1px #d7fc7080}
.card.is-active .visual{box-shadow:0 0 0 2px var(--accent)}
.card-title{display:block;font-size:16px;font-weight:500;margin-bottom:4px}
.card-subtitle{display:block;color:var(--muted);font-size:12px}
.card .card-details{font-size:14px;line-height:1.6;color:#c5c8bd;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.card-details[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.card{transition:none}}

@media(max-width:700px){.card.is-active{margin-right:30.4vw}}

/* Four-item circular galleries; center the selection before scaling it. */
.track{position:relative;scroll-snap-type:none;padding:10px 0 26px;margin-left:0;gap:24px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex-basis:calc((100% - 96px)/4);position:relative;transform-origin:top center}
.card.is-active{transform:scale(1.4);transform-origin:top center;margin:0;z-index:2}
.collection{padding-right:4.5%}
.section-heading{padding-right:0}
@media(max-width:700px){.card{flex-basis:60%}.card.is-active{margin:0}}
/* BP Solutions brand: red, black and white. */
:root{color-scheme:light;--bg:#f7f7f7;--text:#191919;--muted:#666;--line:#ddd;--accent:#b00000}
header{background:#fff;border-top:5px solid var(--accent);padding-top:14px}
.topbar{gap:32px}
.logo{gap:16px;letter-spacing:-.065em;font-weight:500;font-size:clamp(30px,3.5vw,52px)}
.brand-emblem{width:90px;height:92px;object-fit:contain;display:block}
.brand-wordmark{font-family:'Space Grotesk',sans-serif;line-height:1.08;white-space:nowrap}
.studio-label{margin-left:auto;text-align:right}
.headline{padding-top:12px}
main{scrollbar-color:#aaa transparent}
.arrows button{border-color:#bbb;background:#fff}
.arrows button:hover:not(:disabled){color:#fff}
.card-toggle:hover .visual{box-shadow:0 0 0 1px var(--accent)}
.card .card-details{color:#555}
.card-number,.endnote span{color:#777}
footer{background:#191919;border-top:3px solid var(--accent);color:#bdbdbd}
.footer-brand strong,.company a{color:#fff}
.skip{color:#fff}
@media(max-width:700px){.brand-emblem{width:65px;height:66px}.logo{gap:10px;font-size:32px}.headline{padding-top:12px}}
@media(max-height:650px) and (min-width:701px){.brand-emblem{width:60px;height:62px}.logo{font-size:36px}}

.brand-wordmark,.footer-brand strong{font-family:'Manrope','Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.045em}

/* Supplied marine-engineering artwork integrated in the header. */
.brand-banner{position:relative;display:block;padding:0;margin:8px 0 0;isolation:isolate}
.banner-image{display:block;width:100%;height:clamp(150px,18vw,250px);object-fit:cover;object-position:center}
.banner-copy{position:absolute;left:3%;top:50%;transform:translateY(-50%);max-width:45%;color:white}
.banner-copy .eyebrow{color:#fff;font-size:11px;letter-spacing:2px}
.banner-copy h1{font-size:clamp(26px,3.7vw,54px);line-height:1.05;text-wrap:balance}
.banner-copy h1 em{color:#fff}
@media(max-width:700px){.banner-image{height:135px}.banner-copy{max-width:44%;left:3%}.banner-copy h1{font-size:25px}.banner-copy .eyebrow{font-size:9px;letter-spacing:1px}}
@media(max-height:650px) and (min-width:701px){.banner-image{height:130px}.banner-copy h1{font-size:32px}}
/* Display all of the supplied banner; extend its edge colors across the header. */
header{background:#fff}
.brand-banner{margin-left:-4.945%;margin-right:-4.945%;background:linear-gradient(to bottom,#fff 0 15.1%,#990100 15.1% 86.1%,#F1F1F1 86.1% 100%)}
.banner-image{width:100%;max-width:1255px;height:auto;max-height:none;object-fit:contain;margin:0 auto}
.banner-copy{left:max(6%,calc((100% - 1255px)/2 + 38px));max-width:40%}
.intro-line{background:#F1F1F1;margin:0 -4.945%;padding:12px 4.945%}
@media(max-width:700px){.brand-banner{margin-left:-5.556%;margin-right:-5.556%}.banner-image{height:auto}.banner-copy{left:5%;max-width:42%}.banner-copy h1{font-size:clamp(17px,4.6vw,30px)}.banner-copy .eyebrow{display:none}.intro-line{margin:0 -5.556%;padding:10px 5.556%}}
@media(max-height:650px) and (min-width:701px){.banner-image{height:auto;max-width:700px}.banner-copy{left:max(6%,calc((100% - 700px)/2 + 20px));max-width:250px}.banner-copy h1{font-size:27px}}


/* Full-width collection introduction band. */
.scroll-header > .intro-line{background-color:#F1F1F1}

/* Blend the artwork's baked-in edge gradients into the surrounding bands. */
.brand-banner{background:linear-gradient(to bottom,#fff 0 15.24%,#990100 15.24% 86.24%,#ebebeb 88.76%,#f3f3f3 94.67%,#fbfbfb 100%)}
.banner-image{mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.brand-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4%;background:linear-gradient(to bottom,transparent,#F1F1F1);pointer-events:none}
.scroll-header > .intro-line{background:#F1F1F1}
/* Use the original artwork across the entire width: no synthetic side gradients. */
.scroll-header .brand-banner{background:none;margin-left:-4.945%;margin-right:-4.945%}
.scroll-header .brand-banner .banner-image{display:block;width:100%;max-width:none;height:auto;max-height:none;object-fit:contain;mask-image:none;-webkit-mask-image:none}
.scroll-header .brand-banner::after{content:none}
.scroll-header .brand-banner .banner-copy{left:6%;max-width:40%}
.scroll-header > .intro-line{background:linear-gradient(to bottom,#FBFBFB 0,#F1F1F1 12px,#F1F1F1 100%)}
@media(max-width:700px){.scroll-header .brand-banner{margin-left:-5.556%;margin-right:-5.556%}.scroll-header .brand-banner .banner-copy{left:5%;max-width:42%}}
/* Smaller complete banner, without synthetic color extensions. */
.scroll-header .brand-banner{width:100%;max-width:1000px;margin:8px auto 0;background:none}
.scroll-header .brand-banner .banner-image{width:100%;height:auto}
.scroll-header .brand-banner .banner-copy{left:4%;max-width:42%}
.scroll-header .brand-banner .banner-copy h1{font-size:clamp(22px,3vw,40px)}
@media(max-width:700px){.scroll-header .brand-banner{width:90%;margin:8px auto 0}.scroll-header .brand-banner .banner-copy h1{font-size:clamp(16px,4vw,26px)}}
/* Restore full-width color bands with a banner 30% larger than 1000px. */
.scroll-header .brand-banner{width:auto;max-width:none;margin:8px -4.945% 0;background:linear-gradient(to bottom,#fff 0 15.24%,#990100 15.24% 86.24%,#F1F1F1 86.24% 100%)}
.scroll-header .brand-banner .banner-image{width:100%;max-width:1300px;height:auto;margin:0 auto}
.scroll-header .brand-banner .banner-copy{left:max(6%,calc((100% - 1300px)/2 + 52px));max-width:40%}
.scroll-header .brand-banner .banner-copy h1{font-size:clamp(22px,3.9vw,52px)}
@media(max-width:700px){.scroll-header .brand-banner{width:auto;max-width:none;margin:8px -5.556% 0}.scroll-header .brand-banner .banner-copy{left:5%;max-width:42%}.scroll-header .brand-banner .banner-copy h1{font-size:clamp(17px,4.6vw,30px)}}
/* Repeat the exact leftmost two pixels, scaled to the banner height. */
.scroll-header .brand-banner{background-image:url('assets/marine-engineering-banner-edge.png');background-repeat:repeat-x;background-size:2px 100%;background-position:left top}

.scroll-header > .intro-line{background:#FAFAFA}

/* Requested reductions: branding 60%, artwork 70% of previous dimensions. */
header .topbar .logo{font-size:clamp(18px,2.1vw,31.2px);gap:9.6px}
header .topbar .brand-emblem{width:54px;height:55.2px}
.scroll-header .brand-banner .banner-image{width:70%;max-width:910px;height:auto}
.scroll-header .brand-banner .banner-copy{left:max(6%,calc((100% - 910px)/2 + 36px));max-width:32%}
.scroll-header .brand-banner .banner-copy h1{font-size:clamp(18px,2.73vw,36.4px)}
@media(max-width:700px){header .topbar .logo{font-size:19.2px;gap:6px}header .topbar .brand-emblem{width:39px;height:39.6px}.scroll-header .brand-banner .banner-copy{left:5%;max-width:35%}.scroll-header .brand-banner .banner-copy h1{font-size:clamp(14px,3.22vw,21px)}}
@media(max-height:650px) and (min-width:701px){header .topbar .logo{font-size:21.6px}header .topbar .brand-emblem{width:36px;height:37.2px}}

/* Only the compact logo bar and existing footer stay outside the scroll area. */
body > header{padding:8px 4.5%;position:relative;z-index:5;background:#fff}
.scroll-header{padding:0 4.5%}
@media(max-width:700px){body > header{padding:8px 5%}.scroll-header{padding:0 5%}}
/* Center galleries with generous side margins on large displays. */
#collections{width:91%;max-width:1300px;margin-inline:auto}
#collections .collection{padding-left:0;padding-right:0}
/* Allow for the existing 1.4x enlargement within the 500px visual limit. */
#collections .card{flex-basis:min(calc((100% - 96px)/4),357.142857px);max-width:357.142857px}
main > .endnote{width:91%;max-width:1300px;margin:40px auto}
@media(max-width:700px){#collections,main > .endnote{width:90%}#collections .card{flex-basis:60%}}