*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#071d30;color:white}.scene{position:relative;width:100%;min-height:100vh;background:url(assets/inspection.png) center/cover no-repeat}.tablet{position:absolute;left:calc(50% - 131px);top:21.5%;width:450px;min-height:63%;padding:35px 36px;background:linear-gradient(155deg,#254b70,#082a47);border-radius:8px;transform:rotate(.5deg);display:flex;flex-direction:column}.logo{width:100%;background:#fff;border-radius:8px;padding:12px;margin-bottom:14px}h1{text-align:center;font-size:22px;font-weight:500;margin:5px 0 18px}label{display:block;font-size:14px;margin:12px 0 6px}input{width:100%;height:48px;border:1px solid #b9c9d7;border-radius:6px;padding:12px;font-size:16px;background:#f7fafc;color:#122c43}.password{display:flex;position:relative}.password input{padding-right:62px}.password button{position:absolute;right:6px;top:6px;height:36px;background:transparent;color:#183b55;border:0;cursor:pointer}.submit,#logout{width:100%;margin-top:20px;border:0;border-radius:6px;padding:14px;background:#13a5aa;color:#fff;font-size:18px;cursor:pointer}button:disabled{opacity:.6;cursor:wait}input:focus-visible,button:focus-visible{outline:3px solid #efb84d;outline-offset:3px}#status{font-size:14px;line-height:1.5;min-height:42px}small{text-align:center;font-size:11px;color:#c4d5df;margin-top:auto}@media(min-aspect-ratio:1672/941){.tablet{left:39%;width:26.5%;top:21.5%;padding:2%}}@media(max-width:1000px){.tablet{left:38%;width:30%;padding:20px 18px}.logo{padding:8px}h1{font-size:19px}input{font-size:14px}}@media(max-width:700px),(max-height:650px){.scene{display:grid;place-items:center;padding:24px 16px;background-position:70% center}.tablet{position:relative;left:auto;top:auto;transform:none;width:min(420px,100%);min-height:560px;padding:28px;border:10px solid #242c32;box-shadow:0 12px 40px #0008}.logo{padding:10px}}
/* Keep the editable form aligned with the tablet at every desktop aspect ratio. */
@media(min-width:1001px) and (min-height:651px){body{min-height:100vh;display:grid;place-items:center}.scene{width:100%;min-height:0;aspect-ratio:1672/941;background-size:100% 100%}.tablet{left:37.5%;top:22%;width:28.3%;height:63%;min-height:0;padding:2%;transform:rotate(.5deg)}.logo{max-height:105px;object-fit:contain;padding:10px;margin-bottom:10px}h1{font-size:clamp(18px,1.35vw,24px);margin:5px 0 8px}label{margin:8px 0 5px}input{height:clamp(35px,3vw,48px);font-size:clamp(12px,1vw,16px)}.submit{margin-top:12px;padding:10px}#status{margin:10px 0;font-size:clamp(11px,.9vw,14px);min-height:30px}small{font-size:10px}}

/* Center the live sign-in form inside the supplied tablet photograph. */
@media(min-width:1001px) and (min-height:651px){.tablet{left:36.8%;top:22.1%;width:26.9%;height:62%;padding:2%;transform:none;border-radius:8px}.logo{margin-bottom:8px}}

/* Customer enquiries remain separate from the vessel sign-in form. */
.customer-enquiries{position:absolute;left:2.5%;bottom:3%;width:31%;max-width:470px;padding:20px 22px;background:rgba(7,29,48,.94);border:1px solid #92b9c366;border-radius:12px;box-shadow:0 8px 28px #0003;color:#f4f8fb}
.customer-enquiries h2{font-size:20px;margin:0 0 9px;font-weight:600}.customer-enquiries p{font-size:14px;line-height:1.6;margin:0 0 12px}.customer-enquiries a{display:inline-block;color:#75e4dc;font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}.customer-enquiries a:focus-visible{outline:3px solid #efb84d;outline-offset:5px}
@media(max-width:1000px),(max-height:650px){.scene{display:grid;justify-items:center;gap:20px;padding:24px 16px}.tablet{position:relative;left:auto;top:auto;transform:none;width:min(420px,100%);height:auto;min-height:560px;padding:28px;border:10px solid #242c32;box-shadow:0 12px 40px #0008}.customer-enquiries{position:relative;left:auto;bottom:auto;width:min(420px,100%);max-width:none;padding:20px}}

.brand-loading[hidden]{display:none}.brand-loading{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:radial-gradient(ellipse at 50% 40%,#1b4e67 0%,#071d30 65%);perspective:1000px;transition:opacity .3s ease;overflow:hidden}.brand-loading-emblem{width:min(420px,76vw);padding:24px;background:#fff;border-radius:18px;box-shadow:0 8px 0 #8fadb9,0 24px 65px #0007,0 0 55px #53d7c733;transform-style:preserve-3d;animation:brand-spin 2s cubic-bezier(.4,0,.2,1) forwards}.brand-loading-emblem img{display:block;width:100%;height:auto}.brand-loading p{font-size:14px;color:#d5e5ed;letter-spacing:.04em;margin:0}.brand-is-loading .scene{visibility:hidden}.brand-loading-finished{opacity:0;pointer-events:none}@keyframes brand-spin{0%{transform:rotateY(0deg) rotateX(8deg)}50%{transform:rotateY(180deg) rotateX(-8deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@media(prefers-reduced-motion:reduce){.brand-loading-emblem{animation:none}.brand-loading{transition:none}}

/* A stationary brand with a tanker making a two-second crossing. */
.brand-loading-emblem{animation:none;transform:none}.loading-sea{position:relative;width:100%;height:132px;overflow:hidden}.loading-tanker{position:absolute;left:0;bottom:5px;width:clamp(210px,26vw,360px);animation:tanker-crossing 2s linear forwards;will-change:transform}.loading-tanker svg{display:block;width:100%;height:auto}.loading-water{position:absolute;bottom:12px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#73bdc0aa,transparent)}@keyframes tanker-crossing{from{transform:translateX(-100%)}to{transform:translateX(100vw)}}@media(prefers-reduced-motion:reduce){.loading-tanker{animation:none;left:50%;transform:translateX(-50%)}}