@font-face{font-family:Meta;src:url('metabook.ttf') format('truetype');font-display:swap}@font-face{font-family:Meta;src:url('metabold.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:flex;flex-direction:column;font:13px Meta,Arial,sans-serif;color:#fff;background:#fff}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}button:disabled{cursor:default}a{color:inherit}
.info-panel{flex:none;background:white;color:#28303c;height:0;overflow:hidden;transition:height .45s ease}.info-panel.open{height:366px;overflow:auto}.info-inner{padding:28px 58px 8px;display:flex;gap:75px;max-width:1000px}.info-inner h2{font-size:16px;margin:0 0 20px}.info-inner p{margin:0 0 10px;line-height:1.45}.contact-copy{min-width:290px}.map-crop{width:350px;height:330px;overflow:hidden;margin-top:-28px;flex:none}.map-crop img{width:742px;height:366px;max-width:none;margin-left:-392px}.partners{display:grid;grid-template-columns:280px 280px;gap:0 45px;line-height:1.65}.partners h2{grid-column:1/-1}.partners ul{margin:0;padding:0;list-style:none}
.topbar{height:72px;flex:0 0 72px;display:flex;align-items:flex-end;gap:clamp(25px,12vw,180px);padding:0 58px 12px;background:linear-gradient(#fff 0%,#fff 72%,#ededed 100%);z-index:5;border-bottom:1px solid #d1d9da}.brand{display:block;flex:none}.brand img{width:180px;height:51px;display:block}.topbar nav{display:flex;gap:14px;align-items:center;white-space:nowrap;padding-bottom:5px}.nav-link{font:13px Meta,Arial,sans-serif;color:#29323c;border:0;background:none;padding:5px 0;text-decoration:none}.nav-link:hover,.nav-link.active{color:#007b9f}.separator{color:#7e8991}
.ocean{flex:1;min-height:0;position:relative;isolation:isolate;overflow:hidden;background:#005a80 url('ocean.svg') 0 0/100% 100% no-repeat}.bubble-layer{position:absolute;inset:0;overflow:hidden;z-index:1}.bubble{position:absolute;left:0;top:0;padding:0;border:0;background:transparent url('bubble.svg') center/contain no-repeat;will-change:transform;touch-action:manipulation}.bubble:hover,.bubble:focus-visible{filter:brightness(1.25);z-index:5}.bubble-tooltip{position:fixed;z-index:100;pointer-events:none;background:#003b5ac4;padding:5px 9px;font-size:12px;color:white;max-width:min(550px,95vw)}
.content{height:100%;overflow:auto;position:relative;z-index:2;scrollbar-width:thin;scrollbar-color:#b6e3ee70 transparent;padding:48px 30px 25px 58px;pointer-events:none}.content>*{pointer-events:auto}.content:empty{padding:0}.data-row{display:grid;grid-template-columns:57px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:8px}.row-label{padding-top:3px;text-align:right;font-size:12px}.bubble-track{display:grid;grid-template-columns:repeat(30,20px);gap:5px;max-width:100%}.project-dot{border:0;padding:0;width:20px;height:20px;background:transparent url('bubble.svg') center/contain no-repeat;transition:transform .15s}.project-dot:hover,.project-dot:focus-visible{transform:scale(1.35);filter:brightness(1.2)}.client-list .data-row,.category-list .data-row{grid-template-columns:160px minmax(0,1fr)}.category-heading{font-size:12px;font-weight:bold;margin:25px 0 10px;width:160px;text-align:right}.category-heading:first-child{margin-top:0}.status{padding:25px;pointer-events:auto}
.cards{position:absolute;inset:0;z-index:3;pointer-events:none}.project-card{position:absolute;pointer-events:auto;width:302px;padding:9px 10px 7px;border:1px solid #c9eff06b;box-shadow:6px 6px 0 #003f5b55;background:linear-gradient(130deg,#b5e7ee45,#76b4c738);color:#fff;animation:cardIn .2s ease-out;backdrop-filter:blur(2px)}@keyframes cardIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.card-head{position:relative;padding-right:26px;cursor:grab;touch-action:none;min-height:40px}.card-head:active{cursor:grabbing}.card-head h2{font:bold 20px/1.1 Meta,Arial,sans-serif;margin:0}.subtitle{font:13px/1.2 Meta,Arial,sans-serif;margin:0 0 6px}.close{position:absolute;right:-2px;top:0;border:0;width:22px;height:22px;background:#d1f0f05c;color:#e0f5fa;font:bold 23px/20px Arial;cursor:pointer;padding:0}.gallery{height:210px;display:flex;align-items:center;justify-content:center;position:relative}.gallery img{display:block;width:100%;height:100%;object-fit:contain}.gallery img[hidden]{display:none}.gallery-error{font-size:13px;text-align:center}.gallery-error[hidden]{display:none}.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:7px;min-height:29px}.gallery-count{display:flex;gap:3px;flex-wrap:wrap}.gallery-count button{padding:3px 6px;color:#fff;border:0;background:transparent;font-weight:bold;font-size:12px}.gallery-count button.active,.gallery-count button:hover{background:#ceeaf357}.image-link{width:30px;height:22px;background:#c8eff558;border:0;display:grid;place-items:center;color:white;flex:none}.image-link svg{width:25px;height:19px}.viewer{padding:35px 15px 15px;max-width:94vw;max-height:94vh;border:1px solid #b6dce0;background:#00455deF;color:white}.viewer::backdrop{background:#001e32aa}.viewer img{max-width:85vw;max-height:80vh;display:block;object-fit:contain}.viewer .close{top:6px;right:6px}.footer{height:18px;flex:0 0 18px;font:9px Meta,Arial,sans-serif;padding:3px 58px;background:linear-gradient(#eee,#fff);color:#768491}.footer span{padding:0 18px}
@media(max-width:1000px){.topbar{padding-left:30px;padding-right:25px;gap:30px}.brand img{width:150px;height:auto}.topbar nav{gap:10px;font-size:12px}.content{padding-left:30px}.bubble-track{grid-template-columns:repeat(auto-fill,20px)}.info-inner{padding-left:30px;gap:20px}}
@media(max-width:720px){.topbar{height:auto;flex:0 0 auto;min-height:95px;padding:8px 18px;align-items:center;flex-wrap:wrap;gap:4px}.brand img{width:133px;height:auto}.topbar nav{width:100%;white-space:normal;flex-wrap:wrap;gap:3px 12px;padding:0}.nav-link{font-size:12px;padding:5px 0}.content{padding:28px 12px 20px}.data-row{grid-template-columns:45px minmax(0,1fr);gap:8px}.client-list .data-row,.category-list .data-row{grid-template-columns:110px minmax(0,1fr)}.category-heading{width:110px}.project-card{width:min(302px,calc(100vw - 16px))}.info-panel.open{height:310px;max-height:48vh}.info-inner{padding:18px;flex-wrap:wrap}.partners{grid-template-columns:1fr 1fr;gap:0 20px}.map-crop{margin-top:0}.footer{padding-left:18px;font-size:8px}}
.content:not(:empty){pointer-events:auto}
/* Flash-style view and bubble transitions */
.content{overflow-y:scroll;overflow-x:hidden;scrollbar-width:auto;scrollbar-color:#fff #03445c}.content::-webkit-scrollbar{width:12px}.content::-webkit-scrollbar-track{background:#03445c}.content::-webkit-scrollbar-thumb{background:#fff;border:3px solid #03445c;border-radius:9px}.content::-webkit-scrollbar-thumb:hover{background:#fff}.bubble-layer{transition:opacity .52s cubic-bezier(.22,.61,.36,1)}.bubble-layer.layer-away{opacity:0;pointer-events:none}.data-row{animation:rowEnter .48s cubic-bezier(.2,.72,.25,1) both;animation-delay:calc(var(--row,0)*55ms)}.category-heading{animation:rowEnter .42s ease both;animation-delay:calc(var(--row,0)*55ms)}.project-dot{animation:bubblePop .42s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--dot,0)*20ms)}.view-entering>.category-list,.view-entering>.client-list,.view-entering>.timeline{will-change:transform,opacity}@keyframes rowEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes bubblePop{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.bubble-layer{transition:none}.data-row,.category-heading,.project-dot,.project-card{animation-duration:.01ms!important;animation-delay:0ms!important}}
/* Video-matched bubble flight and the original left-side white scroll marker */
.data-row,.category-heading,.project-dot{animation:none!important;animation-delay:0ms!important}
.project-dot{transition:filter .15s,transform .15s}
.list-scroll-rail{position:absolute;z-index:6;top:0;bottom:0;left:calc(58px + 160px + 7px);width:4px;display:none;pointer-events:none}
.list-scroll-rail.visible{display:block}
.list-scroll-rail.rail-chronology{left:calc(58px + 57px + 7px)}
.rail-track{position:absolute;left:1px;right:auto;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35);pointer-events:auto;touch-action:none}
.rail-thumb{position:absolute;left:-1px;width:4px;min-height:32px;border-radius:2px;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.55);cursor:grab;touch-action:none}
.rail-thumb:active{cursor:grabbing}
@media(max-width:1000px){.list-scroll-rail{left:calc(30px + 110px + 6px)}.list-scroll-rail.rail-chronology{left:calc(30px + 45px + 6px)}}
@media(max-width:720px){.list-scroll-rail{left:calc(12px + 110px + 5px)}.list-scroll-rail.rail-chronology{left:calc(12px + 45px + 5px)}}
@media(prefers-reduced-motion:reduce){.project-dot{transition:none}}

/* Keep the Flash-era left rail; the browser's right-hand scrollbar is hidden. */
.content{scrollbar-width:none}
.content::-webkit-scrollbar{display:none;width:0;height:0}
.rail-track{height:100%;bottom:auto}


/* Mobile layout: keep the legacy proportions and make controls easy to tap. */
@media (min-width:721px) and (max-width:1000px){.list-scroll-rail{left:calc(30px + 160px + 7px)}.list-scroll-rail.rail-chronology{left:calc(30px + 57px + 7px)}}
@media (max-width:720px){
  .topbar{min-height:0;padding:7px 12px 8px;align-items:flex-start;gap:3px}
  .brand{height:32px;align-self:flex-start}
  .brand img{width:133px;height:auto;max-height:32px;object-fit:contain;object-position:left center}
  .topbar nav{width:100%;padding:3px 0 0;gap:2px 3px;align-items:center}
  .nav-link,.topbar nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px 5px;font-size:11px;line-height:1.15;text-align:center;white-space:normal}
  .topbar nav .separator{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1px}
  .content{padding:18px 8px 18px 10px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  .data-row{grid-template-columns:45px minmax(0,1fr);gap:7px;margin-bottom:9px}
  .client-list .data-row,.category-list .data-row{grid-template-columns:100px minmax(0,1fr);gap:7px}
  .row-label{font-size:11px;line-height:1.2;overflow-wrap:anywhere}
  .category-heading{width:100px;font-size:12px;margin:19px 0 8px}
  .bubble-track{width:100%;grid-template-columns:repeat(auto-fill,24px);gap:2px}
  .project-dot{width:24px;height:24px;background-size:20px 20px;touch-action:manipulation}
  .list-scroll-rail{left:calc(10px + 100px + 3px)}
  .list-scroll-rail.rail-chronology{left:calc(10px + 45px + 3px)}
  .rail-thumb{left:-2px;width:6px;min-height:40px}
  .project-card{left:8px!important;right:8px;width:auto;max-width:none;max-height:calc(100% - 16px);overflow:auto;padding:10px}
  .card-head{min-height:46px;padding-right:44px}
  .card-head h2{font-size:18px}
  .card-head .close{width:40px;height:40px;right:-2px;top:-2px;font-size:28px;line-height:38px}
  .gallery{height:min(42vh,260px);min-height:150px}
  .gallery-controls{min-height:46px}
  .gallery-count{max-width:calc(100% - 48px);gap:2px}
  .gallery-count button{min-width:40px;min-height:40px;padding:8px;color:#fff}
  .image-link{width:40px;height:40px}
  .info-panel.open{height:min(42vh,340px);max-height:42vh;overflow:auto}
  .info-inner{width:100%;padding:14px 16px;gap:12px;flex-direction:column}
  .contact-copy{width:100%;min-width:0}
  .map-crop{width:min(100%,350px);height:180px;margin:0}
  .map-crop img{margin-left:-250px}
  .partners{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .partners ul{overflow-wrap:anywhere}
  .footer{padding:3px 10px;font-size:7px;white-space:nowrap}
}
@media(max-width:360px){.topbar nav{gap:1px}.nav-link,.topbar nav a{min-width:40px;padding-inline:3px;font-size:10.5px}.client-list .data-row,.category-list .data-row{grid-template-columns:88px minmax(0,1fr)}.category-heading{width:88px}.list-scroll-rail{left:calc(10px + 88px + 3px)}}