/* Original photographic series with a shared blue-hour / morning palette. */
.header.header--connected:not(.is-scrolled){height:112px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.header--connected:not(.is-scrolled) .header-inner{width:91.3%;max-width:none;padding:0;gap:64px}
.header--connected:not(.is-scrolled) .brand{gap:18px}
.header--connected:not(.is-scrolled) .logo{width:138px;height:38px}
.header--connected:not(.is-scrolled) .logo img{width:154px;left:-8px;top:-60px}
.header--connected:not(.is-scrolled) .brand-name{max-width:114px;font-size:12px;line-height:1.7;letter-spacing:1.1px}
html .header.header--connected nav{flex:1;gap:28px;font-family:system-ui,"PingFang SC",sans-serif;font-size:15px;font-weight:500;letter-spacing:-.025em}
.header.header--connected nav>a{font-size:15px;position:relative;line-height:1.4}
.header--connected:not(.is-scrolled) .connected-home-link:after{content:"";position:absolute;height:1px;left:0;right:0;bottom:-7px;background:white;display:block}
.header--connected .nav-dropdown summary{gap:9px}
.header.header--connected .contact-nav{margin-left:auto;padding:12px 21px;min-height:42px;border-radius:4px;background:#ffe15a;color:#07131a;font-weight:600;line-height:1.2}
.header.header--connected .contact-nav:hover{background:#ffe982}
.header--connected .language{border:1px solid #ffffff80;border-radius:4px;min-width:40px;height:42px;justify-content:center;padding:0 9px;font-size:12px}
.header--connected .language:before,.header--connected .language:after{display:none}
.header--connected.is-scrolled .language{border-color:#9aaab5}
.header--connected.is-scrolled .header-inner{gap:30px}
.header--connected.is-scrolled .contact-nav{background:var(--blue);color:white}
.hero.hero--connected{margin:0;height:auto;min-height:100svh;max-height:none;position:relative;isolation:isolate;overflow:hidden;border-radius:0;background:#071b28;color:white;scroll-margin-top:0}
/* A shallow curved shoulder connects the port image to the white services section. */
.hero.hero--connected::after{content:"";position:absolute;inset:auto 0 -1px;height:36px;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H215C245 0 252 20 285 20H1155C1188 20 1195 0 1225 0H1440V36H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.connected-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.connected-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translateY(var(--port-shift,0px)) scale(1.015);transform-origin:center center;will-change:transform;opacity:0;transition:opacity 1.6s ease-in-out}
.connected-media img.is-active{opacity:1}
.connected-media .connected-slide--port{object-position:62% 54%}
.connected-media .connected-slide--warehouse{object-position:57% 53%}
.connected-media .connected-slide--delivery{object-position:62% 56%}
/* Keep the photograph open and bright, with a little contrast at the controls. */
.connected-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(3,22,36,.18),rgba(3,22,36,.08) 28%,rgba(3,22,36,.08) 68%,rgba(3,22,36,.14))}
.connected-inner{width:82.6%;max-width:1800px;min-height:100svh;margin:0 auto;padding-top:29.5svh;padding-bottom:44px;position:relative;display:flex;flex-direction:column}
.connected-headline{border-top:1px solid #ffffff2e;border-bottom:1px solid #ffffff2e;padding:19px 0 25px}
/* Anchor the rules to the capitals, keeping their optical spacing balanced. */
.hero--connected .connected-headline{position:relative;border-top-color:transparent;border-bottom-color:transparent}
.hero--connected #hero-title{position:relative;--headline-rule-gap:clamp(14px,1.6vw,28px)}
.hero--connected #hero-title::before,.hero--connected #hero-title::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,#ffffff00,#ffffff24 8%,#ffffff24 92%,#ffffff00);pointer-events:none}
.hero--connected #hero-title::before{top:calc(.13em - var(--headline-rule-gap))}
.hero--connected #hero-title::after{bottom:calc(.14em - var(--headline-rule-gap))}
html .hero.hero--connected h1{display:flex;align-items:baseline;gap:.2em;font-family:system-ui,"Arial",sans-serif;font-size:clamp(64px,10.8vw,224px);font-weight:500;line-height:.98;letter-spacing:-.045em;white-space:normal;color:#f7fbff;mix-blend-mode:normal;opacity:1;text-shadow:0 2px 24px #031a2d26;margin:0;max-width:none}
.connected-title-brand{flex:none;white-space:nowrap}
.connected-title-descriptor{font-size:.7em;line-height:1.06;letter-spacing:-.025em;white-space:nowrap}
.connected-statements{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:460px;padding:26px 0 0}
.connected-copy-slide{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease,visibility 0s .6s;pointer-events:none}
.connected-copy-slide.is-active{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;pointer-events:auto}
.connected-main{font-size:clamp(20px,1.45vw,26px);font-weight:500;line-height:1.6;letter-spacing:0}
.connected-main>span{display:block}
.connected-main,.connected-support,.connected-scroll,.connected-playback{text-shadow:0 1px 8px #03162466}
.connected-support{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;font-size:12px;font-weight:400;line-height:1.7;letter-spacing:.2px;color:#edf4f8eb}
.connected-support>span{display:block}
.connected-support>span+span{border-left:1px solid #d6e3e94d;padding-left:14px}
.connected-bottom{margin-top:auto;padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.connected-scroll{display:inline-flex;align-items:center;gap:20px;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.15px;min-height:36px}
.connected-scroll svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .3s}.connected-scroll:hover svg{transform:translateY(5px)}
.connected-signature{font-family:system-ui,sans-serif;font-size:9px;letter-spacing:1.7px;color:#b2c4d285}
.connected-end{display:flex;align-items:center;gap:28px}
.connected-playback{display:flex;align-items:center;gap:6px}
.connected-playback[hidden]{display:none}
.connected-playback button{position:relative;display:grid;place-items:center;width:34px;height:36px;padding:0;border:0;border-radius:0;background:transparent;color:#ffffff8c;cursor:pointer;font-family:system-ui,sans-serif;font-size:10px;transition:color .25s}
.connected-playback button[data-hero-slide]::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:1px;background:currentColor;opacity:.55;transition:opacity .25s}
.connected-playback button[aria-pressed="true"],.connected-playback button:hover{color:white}
.connected-playback button[aria-pressed="true"]::after{height:2px;opacity:1}
.connected-playback button:focus-visible{outline:1px solid white;outline-offset:3px;border-radius:3px}
.connected-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.connected-pause svg [hidden]{display:none}
html[lang="en"] .connected-main{font-family:system-ui,sans-serif;font-size:clamp(19px,1.4vw,24px);font-weight:500;line-height:1.6;letter-spacing:-.2px}
html[lang="en"] .connected-support{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:0}
@media(min-width:1900px){.header--connected:not(.is-scrolled) .header-inner{gap:8vw}html .header.header--connected nav,.header.header--connected nav>a{font-size:20px}html .header.header--connected nav{gap:38px}.header.header--connected .contact-nav{padding:15px 26px;min-height:53px}.header--connected .language{height:53px;min-width:50px;font-size:16px}.header.header--connected:not(.is-scrolled){height:140px}.connected-statements{padding-top:30px}.connected-headline{padding:24px 0 31px}.connected-bottom{padding-top:38px}.connected-scroll{font-size:17px}}
@media(max-width:1250px) and (min-width:810px){.header--connected:not(.is-scrolled) .header-inner{gap:35px}.header--connected:not(.is-scrolled) .brand-name{display:none}.header--connected:not(.is-scrolled) .logo{width:113px;height:30px}.header--connected:not(.is-scrolled) .logo img{width:127px;left:-7px;top:-50px}html .header.header--connected nav{gap:22px;font-size:13px}.header.header--connected nav>a{font-size:13px}.header.header--connected .contact-nav{padding:12px 16px}.header--connected.is-scrolled .brand-name{display:none}.header--connected.is-scrolled .header-inner{gap:28px}.connected-inner{padding-top:31svh}}
@media(max-width:809px){
 .hero.hero--connected::after{height:24px}
 .header.header--connected:not(.is-scrolled){height:86px}.header--connected:not(.is-scrolled) .header-inner{width:88%;gap:15px}.header--connected:not(.is-scrolled) .logo{width:110px;height:30px}.header--connected:not(.is-scrolled) .logo img{width:123px;left:-6px;top:-48px}.header--connected:not(.is-scrolled) .brand{gap:12px}.header--connected:not(.is-scrolled) .brand-name{font-size:9px;max-width:112px;letter-spacing:.7px}.header.header--connected #site-nav{top:86px;gap:4px}.header.header--connected.is-scrolled #site-nav{top:76px}.header.header--connected nav>a{font-size:16px;padding:13px 0}.header--connected:not(.is-scrolled) .connected-home-link:after{display:none}.header.header--connected .contact-nav{margin:10px 0 4px;min-height:45px;border-radius:4px;background:#ffe15a;color:#07131a}.header--connected .language{align-self:flex-start;min-width:55px;margin:10px 0 0}.header--connected.is-scrolled .language{color:white;border-color:#ffffff80}
 .hero.hero--connected{min-height:100svh}.connected-inner{width:88%;padding-top:28svh;padding-bottom:36px}.connected-media img{object-position:57% center;transform:none}
 html .hero.hero--connected h1{flex-direction:column;align-items:flex-start;gap:10px;font-size:clamp(64px,19vw,116px);line-height:.98;letter-spacing:-.045em}.connected-title-descriptor{font-size:clamp(27px,8.3vw,56px);line-height:1.08;letter-spacing:.005em}.connected-headline{padding:18px 0 23px}.connected-statements{max-width:390px;padding-top:22px}.connected-main{font-size:clamp(17px,4.75vw,20px);letter-spacing:0;line-height:1.65}.connected-support{font-size:11px;line-height:1.7;margin:12px 0 0;padding:0;gap:4px 10px}.connected-support>span+span{padding-left:10px}.connected-bottom{padding-top:23px;gap:15px}.connected-scroll{font-size:10px;gap:17px;min-height:36px}.connected-scroll svg{height:16px;width:16px}.connected-signature{display:none}.connected-end{gap:0}.connected-playback{gap:2px}.connected-playback button{width:30px;height:36px}
 .connected-media .connected-slide--port{object-position:64% center}.connected-media .connected-slide--warehouse{object-position:86% center}.connected-media .connected-slide--delivery{object-position:86% center}
 html[lang="en"] .connected-main{font-size:clamp(15px,4.2vw,18px);line-height:1.6;letter-spacing:-.2px}html[lang="en"] .connected-support{font-size:11px;line-height:1.7;letter-spacing:0}
}
@media(max-width:360px){.connected-inner{padding-top:26svh}.connected-support{display:block}.connected-support>span+span{border:0;padding-left:0;margin-top:3px}.header--connected:not(.is-scrolled) .brand-name{max-width:95px;font-size:8px}.header--connected:not(.is-scrolled) .brand{gap:7px}html[lang="en"] .connected-main{font-size:15px}.connected-bottom{gap:15px}}
@media(prefers-reduced-motion:reduce){.connected-media img{transform:none;will-change:auto;transition:none}.connected-copy-slide{transform:none;transition:none}.connected-scroll svg,.connected-playback button,.connected-playback button::after{transition:none}}

.header.header--connected .contact-nav>span{font-size:inherit;line-height:inherit}

/* Overlay navigation keeps the hero's established screen-space alignment. */
.header--overlay+main .connected-inner{padding-top:29.5svh}
@media(max-width:809px){.header--overlay+main .connected-inner{padding-top:28svh}.header.header--overlay #site-nav{max-height:calc(100svh - 76px);overflow-y:auto}}

/* Move the bottom controls and curved edge down together by one CSS centimetre. */
.hero.hero--connected{--hero-bottom-offset:1cm;min-height:calc(100svh + var(--hero-bottom-offset))}
.hero--connected .connected-inner{min-height:calc(100svh + var(--hero-bottom-offset))}

/* One typographic system for every photograph, including short landscape views. */
@media(max-height:540px) and (min-width:601px) and (max-width:809px){
 .header--overlay+main .connected-inner{padding-top:120px}
 html .hero.hero--connected h1{flex-direction:row;align-items:baseline;gap:.2em;font-size:10.8vw}
 .connected-title-descriptor{font-size:.7em;letter-spacing:-.025em}
 .connected-headline{padding:14px 0 18px}
}