/*--------------------------------------------------------------
# Landing page (/welcome): the new public homepage blueprint.
# Everything is nested under .alma-landing (native CSS nesting) so none of it reaches the rest of
# the site, and the site's own header sits above it unchanged. The blueprint's own header, top line
# and bottom section navigation are gone: the site header (Views/Shared/_HeaderPartial) replaces the
# first, the topbar partial is dropped, and sections are reached from the header menu, the in-page
# buttons, the arrow keys and the address hash (landing.js).
--------------------------------------------------------------*/
.alma-landing{
--navy:#172b45;--blue:#304f7f;--surface:#1e3553;--ice:#e6f1fc;--muted:#a4b7cf;--aqua:#7bddd9;--header:72px;--label-font:monospace;
background:var(--navy);color:var(--ice);font-family:Arial,Helvetica,sans-serif;
*{box-sizing:border-box}
/* The site's own element rules (section padding, Roboto headings, link colours) stop at the wrapper. */
section{padding:0}
h1,h2,h3,h4{font-family:inherit}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--aqua);outline-offset:6px}
.stage{height:calc(100svh - var(--header));min-height:0;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 55% 45% at 78% 62%,var(--lp-glow),#0000 70%),linear-gradient(180deg,var(--lp-sky-0) 0%,var(--lp-sky-1) 16%,var(--lp-sky-2) 46%,var(--lp-sky-3) 62%,var(--lp-sky-4) 76%,var(--lp-sky-5) 86%,var(--lp-sky-6) 100%)}
.sea{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.chart-label{font:12px var(--label-font);letter-spacing:2px;fill:#b5c8df;opacity:.55}
.panels{position:absolute;left:7vw;top:18%;width:min(580px,45vw);bottom:72px}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .5s,transform .65s cubic-bezier(.16,1,.3,1),visibility .5s;pointer-events:none}
.panel.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.eyebrow{font:12px var(--label-font);letter-spacing:3px;color:var(--aqua);margin:0 0 22px;text-transform:uppercase}
h1,h2{font-weight:500;letter-spacing:normal;line-height:1.02;margin:0 0 24px;font-size:clamp(42px,5.4vw,86px);color:inherit}
h1 em,h2 em{font-style:normal}
p{font-size:17px;line-height:1.7;color:#bacbdf;max-width:430px;margin:0 0 26px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.primary,.secondary{padding:14px 21px;border-radius:4px;font-size:14px;transition:background .2s}
.primary{border:1px solid #839cbe;background:var(--blue);color:white}
.primary:hover{background:#3e6397;color:white}
.secondary{border:1px solid #8198b14d;background:#172b4544;color:var(--ice)}
.secondary:hover{background:#304f7f55}
.mini{margin-top:32px;display:flex;gap:24px;color:var(--muted);font:12px var(--label-font);letter-spacing:1px}
.mini span{border-top:1px solid #758aa44d;padding-top:12px}
.hint{position:absolute;right:7vw;bottom:112px;font:12px var(--label-font);letter-spacing:1px;color:#acc6df}
.hint span{color:var(--aqua)}
.service-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.service{border-top:1px solid #a2bad64d;padding:16px 0}
.service b{font-weight:500;display:block;font-size:17px;margin:0 0 8px}
.service p{font-size:14px;line-height:1.5;margin:0}
.service .num{font:11px var(--label-font);color:var(--aqua);display:block;margin-bottom:10px}
.panel:not(#home) h2,#home h1{font-size:clamp(36px,4vw,60px)}
.history-line{display:flex;align-items:center;gap:20px;margin:8px 0 24px;font:14px var(--label-font)}
.history-line i{height:1px;flex:1;background:linear-gradient(90deg,var(--aqua),#91b7df22)}
.history-line span:first-child{color:var(--aqua)}
.portal-features{display:flex;gap:8px;margin:0 0 28px;flex-wrap:wrap}
.portal-features span{border:1px solid #8bacc53d;padding:9px 12px;font-size:13px;background:#172b454d}
.contact-links{display:grid;gap:14px}
.contact-links a{font-size:22px;letter-spacing:-.02em;border-bottom:1px solid #8bacc54d;padding-bottom:12px;width:fit-content}
.contact-links a:hover{color:var(--aqua)}
.address{font-size:14px;margin-top:22px}
.landing-footer{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:flex-start;padding:0 4vw;height:52px;color:#d6e8f4;font-size:13px;letter-spacing:.02em}
/* The strip: on the left, for everyone, the copyright mark and the year, the email, the phone, the language switch and
   the terms; on the right, for a signed-in user only, who they are, the bell and the cogwheel (Welcome.cshtml). Every
   icon is teal. The bell's panel lives in the strip too, so these rules stop at it (:not(.notif-panel *)). */
.landing-footer .contacts{display:flex;align-items:center;gap:24px;min-width:0}
.landing-footer :is(a,button):not(.notif-panel *){color:#d6e8f4}
.landing-footer :is(a,button):not(.notif-panel *):hover{color:#fff}
.landing-footer :is(.contacts>a,.landing-user){display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.landing-footer .contacts i,.landing-footer .landing-user>i,.landing-footer .landing-cog-btn>i{font-size:15px;color:var(--aqua)}
.landing-footer #notifBell>i{font-size:13px}
.landing-footer .landing-cog-btn:is(:hover,[aria-expanded="true"])>i{color:#fff}
.landing-footer .lang-switch{margin:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.landing-footer .lang-switch .lang-globe{display:inline-flex;margin-right:2px;padding:0;border:0;background:none;line-height:1}
.landing-footer .lang-switch .lang-globe:hover>i{color:#fff}
.landing-footer .lang-switch .lang-code{padding:0 2px;border:0;background:none;font-weight:700;color:#d6e8f4;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.landing-footer .lang-switch .lang-code:hover{color:#fff}
.landing-footer .terms:hover span{text-decoration:underline}
.landing-footer .copyright{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.landing-footer .copyright i{cursor:default;outline-offset:3px}
.landing-footer .copyright-narrow{display:none}
@media(max-width:1023px){.landing-footer .copyright-text,.landing-footer .copyright-wide{display:none}.landing-footer .copyright-narrow{display:inline}}
.landing-footer .landing-tools{margin-left:auto;padding-left:16px;display:flex;align-items:center;gap:18px;min-width:0}
.landing-footer .landing-user{min-width:0}
.landing-footer .landing-user-name{overflow:hidden;text-overflow:ellipsis}
.landing-footer .landing-user b{font-weight:600;color:var(--aqua)}
.landing-footer .landing-user:hover .landing-user-name{text-decoration:underline}
/* The bell: as in the footer of the grid pages (v3-shell.css, #footer #notifBell), a small pill holding the bell and, while
   anything is unread, its count in a red pill (notifications.js shows it). site.css dresses
   #notifBell as a round header button and #notifBadge as a dot on its corner, so both start from nothing here. */
.landing-footer .landing-bell{position:relative;display:inline-flex}
.landing-footer #notifBell{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:#ffffff1f;color:#dcebf7;font-size:12px;line-height:1;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.landing-footer #notifBell:hover,.landing-footer #notifBell:focus-visible{background:#ffffff47;color:#fff}
.landing-footer #notifBell:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.landing-footer #notifBadge{position:static;transform:none;width:auto;height:auto;min-width:16px;padding:0 5px;border-radius:999px;background:#106eea;color:#fff;font-size:10.5px;font-weight:600;line-height:16px;text-align:center}
/* The panel keeps its own type (the strip's tracking and font stop here). */
.landing-footer .notif-panel{font-family:var(--bs-body-font-family);letter-spacing:normal;text-align:left}
/* A signed-in user's strip on a small screen: the icons only, the language as its globe ("Switch to …"); each one's
   title says what it is. */
@media(max-width:1023px){
.landing-footer.is-signed-in :is(.contacts>a>span,.lang-switch>span,.lang-code,.landing-user-name,.landing-user b){display:none}
.landing-footer.is-signed-in .contacts{gap:18px}
.landing-footer.is-signed-in .landing-tools{gap:14px}
}
/* Phones: the right side's icons as large as the left's (the phone rule further down sets those). */
@media(max-width:600px){.landing-footer .landing-user>i,.landing-footer .landing-cog-btn>i{font-size:17px}.landing-footer.is-signed-in .contacts{gap:14px}.landing-footer.is-signed-in .landing-tools{gap:12px;padding-left:12px}
/* a visitor's phone strip: the language is the globe alone too */
.landing-footer .lang-switch :is(span,.lang-code){display:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media(min-width:1500px){.panels{left:10vw}}
@media(max-width:850px){.panels{left:6vw;width:53vw}.hint{right:5vw}.mini{gap:14px}}
@media(max-width:600px){.panels{left:7vw;top:70px;width:86vw;bottom:172px}.panel{justify-content:flex-start}h1{font-size:clamp(43px,11vw,65px);max-width:320px;margin-bottom:18px}.panel:not(#home) h2{font-size:38px;margin-bottom:18px}.eyebrow{margin-bottom:16px;font-size:11px}p{font-size:15px;line-height:1.55;max-width:330px;margin-bottom:19px}.primary,.secondary{padding:12px 15px;font-size:13px}.mini{display:none}.hint{right:6vw;bottom:77px;font-size:10px;max-width:175px;text-align:right}.service-list{gap:8px 18px}.service{padding:10px 0}.service b{font-size:15px}.service p{font-size:13px}.service .num{margin-bottom:7px}.contact-links a{font-size:21px}.address{max-width:230px}.history-line{margin-top:0}.portal-features{gap:6px;margin-bottom:18px}.portal-features span{font-size:12px}}
@media(max-height:700px) and (min-width:601px){.panels{top:16%;bottom:72px}h1{font-size:62px}.eyebrow{margin-bottom:14px}p{margin-bottom:18px;font-size:15px}.mini{display:none}.panel:not(#home) h2,#home h1{font-size:42px}.service{padding:10px 0}}
@media(max-height:680px) and (max-width:600px){.panels{top:55px;bottom:125px}h1{font-size:42px}.panel:not(#home) h2,#home h1{font-size:31px}.eyebrow{margin-bottom:12px}p{font-size:14px}.service p{font-size:12px}.service b{font-size:14px}.history-line{margin-bottom:12px}.portal-features span{padding:7px}.contact-links{gap:9px}.address{margin-top:12px}.hint{display:none}}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}

.logistics-scene{position:absolute;right:2vw;top:9%;width:48vw;height:76%;pointer-events:none;z-index:-1}
.logistics-scene>svg{width:100%;height:100%;overflow:visible}
.route-line{fill:none;stroke:#729ac0;stroke-width:1.1;opacity:.4}
.route-main{fill:none;stroke:#8acdcf;stroke-width:1.5;opacity:.42}
.route-track{fill:none;stroke:#99d4df;stroke-width:.8;stroke-dasharray:2 9;opacity:.35}
.hub-ring{fill:#18324ed9;stroke:#91bcd0;stroke-opacity:.45;stroke-width:1}
.hub .hub-core{fill:#7394b3;transition:fill .4s}
.hub.lit .hub-core{fill:#c3fff0}
.hub.lit .hub-ring{stroke:#a9e9dd;stroke-opacity:.9}
.network-label{font:12px var(--label-font);letter-spacing:2px;fill:#b9cfe0}
.network-caption{font:11px var(--label-font);letter-spacing:2px;fill:#7998b5}
.delivery-label{font:22px Arial,sans-serif;letter-spacing:3px;fill:#d8f5f4}
.orbit{fill:none;stroke:#9ec9d4;stroke-width:.6;opacity:.22}
.cargo-marker{fill:#c2ede6;stroke:#eafff8;stroke-width:1;filter:url(#cargo-glow)}
.arrival-ring{fill:none;stroke:#a0e4d9;stroke-width:1}
.panels{width:min(580px,43vw)}
h1{font-size:clamp(42px,5vw,80px)}
@media(max-width:1000px) and (min-width:601px){.hint{right:4vw}.logistics-scene{right:0;width:50vw}.panels{width:47vw}}
@media(max-width:600px){.logistics-scene{right:-9vw;top:auto;bottom:65px;width:66vw;height:33%;opacity:.55}.panels{width:86vw}.hint{max-width:180px;bottom:80px}.network-label{font-size:15px;letter-spacing:1px}.network-caption{display:none}h1{font-size:clamp(43px,11vw,65px)}.delivery-label{font-size:23px}}
@media(max-height:700px) and (min-width:601px){h1{font-size:54px}.hint{display:none}.logistics-scene{top:7%;height:70%}}
@media(max-height:680px) and (max-width:600px){h1{font-size:39px;line-height:1}.logistics-scene{height:30%;bottom:66px}}

/* Header, open sky and deep sea share one continuous colour field. Its colours are the scene's --lp-* tokens (the
   "Scenes" blocks at the end of this file): day, sunset or night (v3-scene.js), always day in the classic look. */
.stage{color:var(--lp-ink)}
.panels .eyebrow,.service .num,.history-line span:first-child{color:var(--lp-accent)}
h1 em,h2 em{color:var(--lp-accent)}
.panels p{color:var(--lp-ink-body)}
.panels .secondary{color:var(--lp-ink);background:var(--lp-soft-2);border-color:color-mix(in srgb,var(--lp-accent) 33.3%,transparent)}
.panels .secondary:hover{background:var(--lp-soft-3)}
.mini{color:var(--lp-ink-body)}
.mini span,.service{border-color:color-mix(in srgb,var(--lp-accent) 25.1%,transparent)}
.history-line i{background:linear-gradient(90deg,var(--lp-accent),color-mix(in srgb,var(--lp-accent) 20%,transparent))}
.portal-features span{background:var(--lp-soft-1);color:var(--lp-ink);border-color:color-mix(in srgb,var(--lp-accent) 25.1%,transparent)}
.contact-links a{border-color:color-mix(in srgb,var(--lp-accent) 31.4%,transparent)}
.contact-links a:hover{color:var(--lp-accent)}
.route-line{stroke:var(--lp-route);opacity:.42}
.route-main{stroke:var(--lp-route);opacity:.55;stroke-dasharray:2 7;stroke-width:1.4}
.route-track{stroke:var(--lp-route);opacity:.4}
.network-label{fill:var(--lp-label)}
.network-caption{fill:var(--lp-caption)}
.orbit{stroke:var(--lp-route);opacity:.3}
.hub-ring{fill:#304f7fe0;stroke:var(--lp-hub-rim);stroke-opacity:.5}
.hint{color:#d6e8f4}
@media(max-width:600px){.stage{background:radial-gradient(ellipse 55% 45% at 78% 62%,var(--lp-glow),#0000 70%),linear-gradient(180deg,var(--lp-sky-0) 0%,var(--lp-sky-1) 16%,var(--lp-sky-2) 52%,var(--lp-sky-3) 70%,var(--lp-sky-4) 83%,var(--lp-sky-5) 92%,var(--lp-sky-6) 100%)}.logistics-scene{opacity:.65}}

@media(min-width:851px){.panels{top:max(78px,calc(18% - 72px));transform:none}.panel{justify-content:flex-start}.panels p{margin-bottom:18px}.mini{margin-top:22px}}
@media(max-width:850px){.extended-copy{display:none}.service p{font-size:13px;line-height:1.45}}
@media(max-height:740px){.extended-copy{display:none}}
@media(max-width:600px){.panels{top:36px}.panels p{margin-bottom:15px}.panel:not(#home) h2,#home h1{font-size:34px}html[lang=el] & h1{font-size:clamp(36px,10vw,52px)}.service{padding:8px 0}.service p{font-size:12px}.eyebrow{letter-spacing:2px}}
@media(max-height:700px) and (min-width:851px){.panels{top:66px}}
@media(max-height:680px) and (max-width:600px){.panels{top:24px}.panel:not(#home) h2,#home h1{font-size:29px}.service .num{margin-bottom:4px}.service b{margin-bottom:5px}.panels p{font-size:13px;line-height:1.45;margin-bottom:12px}}

/* Multi-path delivery diagram and the alternate contact surface. */
.logistics-scene{top:2%;right:1vw;width:51vw;height:82%;transition:opacity .35s,visibility .35s}
.network-label{font-size:13px;letter-spacing:1.3px}
.network-caption{font-size:10px;letter-spacing:1.3px}
.node-icon{fill:none;stroke:#e6f1fc;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hub-vendor .hub-ring{fill:#304f7f;stroke:#7bddd9;stroke-width:1.5}
/* The three whole routes, one per mode: lit while a shipment is on it (landing.js, updateOrders), in the mode's
   colour: air bright blue, road grey, sea darker blue. Where routes share a leg they lie on top of each other, each
   narrower than the one below (air, road, sea in document order), so every lit route still shows. */
.journey-path{fill:none;stroke-width:2.2;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 1px #172b4560)}
.journey-path.active-route{opacity:.9}
#cargo-route-1{stroke:var(--lp-mode-air);stroke-width:4.2}
#cargo-route-2{stroke:var(--lp-mode-road);stroke-width:2.8}
#cargo-route-3{stroke:var(--lp-mode-sea);stroke-width:1.6}
.freight-leg{stroke-dasharray:2 7;stroke-linecap:round;stroke-width:1.4;opacity:.55}
.contact-draft{position:absolute;right:5vw;top:78px;bottom:110px;width:min(580px,44vw);padding:25px 28px;overflow-y:auto;scrollbar-width:thin;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .35s,transform .35s,visibility .35s;z-index:3}
.stage.contact-active .contact-draft{opacity:1;visibility:visible;transform:none}
.stage.contact-active .logistics-scene{opacity:0;visibility:hidden}
.stage.contact-active .hint{display:none}
.draft-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.draft-header h3{margin:0;font-size:24px;font-weight:500;letter-spacing:normal}
.form-tabs{display:flex;gap:5px;margin-bottom:20px}
.form-tabs button{flex:1;border:0;border-bottom:2px solid transparent;background:none;color:var(--lp-ink-muted);padding:12px 5px;font-size:14px}
.form-tabs button[aria-selected=true]{font-weight:700}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.contact-draft label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--lp-ink-body);margin:0}
.contact-draft input,.contact-draft select,.contact-draft textarea{width:100%;min-width:0;border:1px solid var(--lp-field-rim);border-radius:7px;background:var(--lp-field);color:var(--lp-field-ink);font:16px Arial,sans-serif;padding:10px 11px}
.contact-draft textarea{resize:vertical;min-height:72px}
.contact-draft input:focus,.contact-draft select:focus,.contact-draft textarea:focus{outline:2px solid var(--lp-accent);outline-offset:1px}
.contact-draft .wide{margin-top:16px}
.draft-submit{margin-top:17px}
.contact-draft p{font-size:12px;line-height:1.5;margin:13px 0 0;color:var(--lp-ink-muted);max-width:none}
.contact-draft .form-status{color:var(--lp-accent);font-weight:600}
.contact-draft .form-status.is-error{color:var(--lp-error)}
/* The forms' honeypot: off screen for people, still in the form for bots. */
.contact-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Google's wording, required in place of its badge (hidden at the end of this file): in each form, under the
   message and above the button. */
.contact-draft .captcha-note{font-size:10px;line-height:1.4;margin-top:8px;color:var(--lp-ink-soft)}
.contact-draft .captcha-note a{color:inherit;text-decoration:underline}
/* A send's outcome takes the heading's place (landing.js setContactState). */
.draft-header h3.is-success{color:var(--lp-success)}
.draft-header h3.is-error{color:var(--lp-error)}
/* After a send: ✓ Email sent, until the visitor starts another message. */
.draft-submit.is-sent,.draft-submit.is-sent:hover{background:#1d7a4a;border-color:#1d7a4a;color:#fff;opacity:1;cursor:default}
.draft-submit.is-sent .bi{margin-right:6px}
/* While sending, a soft blue glow breathes around the card: faint, then brighter and wider, and back, with a
   light inner bloom. It is a shadow, drawn outside the card's box, so the card's own scrolling never clips it.
   The keyframes are at the end of this file, outside the nesting; they repeat the card's own shadows (the
   last .contact-draft rule) under the glow. */
.contact-draft.is-sending{border-color:#cfe3f8;animation:contact-glow 1.3s ease-in-out infinite alternate}
/* A sent message: one quick green blink with the heading's thanks (landing.js): on, a short hold, off. */
.contact-draft.is-sent-glow{animation:contact-glow-sent .6s ease-in-out}
@media(prefers-reduced-motion:reduce){.contact-draft.is-sent-glow{animation:none}}
@media(prefers-reduced-motion:reduce){.contact-draft.is-sending{animation:none;box-shadow:var(--lp-glass-shadow),0 0 0 1px #6fa3dc80,0 0 26px 3px #6fa3dc59}}
.form-panel[hidden]{display:none}
@media(max-height:740px) and (min-width:601px){.contact-draft{top:55px;bottom:93px;padding:18px 23px}.form-grid{gap:10px 13px}.contact-draft input,.contact-draft select{padding:8px 10px}.form-tabs{margin-bottom:13px}.draft-header{margin-bottom:10px}}
@media(max-width:850px) and (min-width:601px){.contact-draft{width:45vw;right:3vw;padding:20px}.logistics-scene{width:51vw;right:0}}
@media(max-width:600px){.logistics-scene{right:-14vw;top:auto;bottom:70px;width:80vw;height:34%;opacity:.65}.contact-draft{top:117px;left:6vw;right:6vw;bottom:125px;width:auto;padding:17px 18px;border-radius:10px}.stage.contact-active #contact .eyebrow,.stage.contact-active #contact p,.stage.contact-active #contact .contact-links{display:none}.stage.contact-active #contact h2{font-size:25px;line-height:1.1;max-width:100%;margin:0}.stage.contact-active .panels{top:28px}.form-tabs{margin-bottom:15px}.draft-header{margin-bottom:10px}.draft-header h3{font-size:20px}.form-grid{gap:11px}.contact-draft label{font-size:12px}.contact-draft input,.contact-draft select{padding:8px;font-size:16px}.contact-draft .wide{margin-top:12px}.draft-submit{margin-top:12px;padding:11px 15px}.contact-draft textarea{min-height:65px}.network-label{font-size:15px;letter-spacing:1px}.network-caption{display:none}}
@media(prefers-reduced-motion:reduce){.logistics-scene,.contact-draft,.journey-path{transition:none}}

/* Compact frosted-glass contact surface. */
.contact-draft{width:min(540px,42vw);height:auto;bottom:auto;max-height:calc(100% - 188px);padding:20px 23px}
.draft-header{margin-bottom:11px}
.draft-header h3{font-size:22px}
.form-tabs{margin-bottom:15px;gap:8px;border-bottom:0;padding:4px;background:var(--lp-tabs);border:1px solid var(--lp-tabs-rim);border-radius:9px}
.form-tabs button{padding:9px 5px;border:0;border-radius:6px}
.form-tabs button[aria-selected=true]{background:var(--lp-tab-on);box-shadow:var(--lp-tab-on-shadow);color:var(--lp-accent)}
.form-grid{gap:10px 14px}
.contact-draft label{gap:5px;font-size:13px}
.contact-draft input,.contact-draft select,.contact-draft textarea{padding:8px 10px;box-shadow:inset 0 1px 2px #172b4505}
.contact-draft .wide{margin-top:12px}
.contact-draft textarea{min-height:65px}
.draft-submit{margin-top:13px;padding:11px 17px;border-radius:7px}
.contact-draft p{margin-top:10px}
@media(max-width:850px) and (min-width:601px){.contact-draft{width:45vw;padding:17px 19px}}
@media(max-height:740px) and (min-width:601px){.contact-draft{max-height:calc(100% - 148px);padding:16px 20px}.form-tabs{margin-bottom:12px}}
@media(max-width:600px){.contact-draft{width:auto;bottom:auto;max-height:calc(100% - 242px);padding:15px 17px}.draft-header h3{font-size:20px}.form-grid{gap:9px 11px}.contact-draft input,.contact-draft select{font-size:16px}.contact-draft textarea{min-height:60px}}

.moving-vehicle{fill:none;stroke:#f5fffd;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.vehicle-halo{fill:#304f7fe0;stroke:#c6e9ed66;stroke-width:.7}
@media(max-width:600px){.hint{display:block;right:6vw;bottom:77px;font-size:10px;max-width:175px}}
@media(max-height:680px){.hint{display:none}}
.route-main,.freight-leg,.journey-path{stroke-linecap:round;stroke-linejoin:round}
.moving-vehicle{stroke:#172b45;stroke-width:2;filter:drop-shadow(0 1px 1px #ffffff88)}
.moving-vehicle[data-vehicle="package"]{stroke:#f5fffd;filter:none}
.vehicle-halo{fill:#304f7fe0;stroke:#c6e9ed66}
#vendor-order{pointer-events:none}

.route-metric{fill:none;stroke:none;opacity:0}
.hub .hub-ring{fill:#304f7f}
.working-dots{fill:#b3ece6;pointer-events:none}
.hub.processing .hub-core{opacity:0}
.hub.processing .node-icon{opacity:.55}
.hub .node-icon,.hub .hub-core{transition:opacity .2s}
.moving-vehicle{stroke:#172b45;stroke-width:1.4;filter:drop-shadow(1px 2px 1px #172b4528)}
.moving-vehicle[data-vehicle="package"]{stroke:#e8f3fd}

.station-label .network-label{fill:var(--lp-label);stroke:none;paint-order:normal}
.station-label .network-caption{fill:var(--lp-caption)}
.station-label:is([data-label-hub="1"],[data-label-hub="2"],[data-label-hub="7"]) .network-label{fill:var(--lp-label-strong)}
/* ON BOARD and its caption sit low, over the darker sea and the Services photo's ship: light letters with a
   soft navy shadow, like the labels inside the hubs, rather than dark ones with a halo. */
.station-label[data-label-hub="8"] .delivery-label{fill:#f4f9ff;font-weight:600;filter:drop-shadow(0 1px 2px #172b45a0)}
.station-label[data-label-hub="8"] .network-caption{fill:#e2eef9;filter:drop-shadow(0 1px 1.5px #172b45b0)}

/* Give the diagram its own desktop Services view. */
.logistics-scene,.hint{display:none}
@media(min-width:1024px){.stage.services-active .logistics-scene,.stage.services-active .hint{display:block}}
@media(min-width:601px){.stage.wide-panel .panels{width:min(1100px,80vw)}.stage.wide-panel .panel p{max-width:760px}.stage.wide-panel .history-line{max-width:760px}.stage.wide-panel #home h1{max-width:1050px}}
@media(min-width:601px) and (max-width:1023px){.stage.services-active .panels{width:86vw}}
.mobile-break{display:none}
.desktop-space{display:inline}
@media(max-width:600px){.mobile-break{display:inline}.desktop-space{display:none}}

#home .mini{width:345px;max-width:100%;gap:12px;justify-content:space-between;font-size:9px;letter-spacing:.65px}
#home .mini span{white-space:nowrap}
#history{overflow-y:auto;scrollbar-width:thin;padding-right:12px}
#history p{font-size:16px;line-height:1.55}
@media(max-width:600px){#home .extended-copy{display:block}#home,#history{overflow-y:auto;scrollbar-width:thin}#history p{font-size:14px;line-height:1.55}}

.portal-preview{position:absolute;left:calc(100% + 3vw);top:50%;transform:translateY(-50%);width:44vw;max-width:740px;pointer-events:auto}
.preview-caption{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font-size:14px;color:#304f7f}
.preview-caption small{font-size:12px}
.preview-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 12px}
.preview-tabs button{font-size:12px;border:1px solid #304f7f30;border-radius:6px;background:#ffffff66;color:#304f7f;padding:8px 10px}
.preview-tabs button[aria-selected=true]{background:#304f7f;color:white;border-color:#304f7f}
.preview-window{background:#f7faff;border:1px solid #ffffffb0;border-radius:12px;overflow:hidden;box-shadow:0 22px 70px #172b4530;transform:perspective(1500px) rotateY(-3deg)}
.preview-chrome{display:flex;gap:18px;align-items:center;background:#304f7f;color:white;padding:15px 20px;font-size:12px}
.preview-wordmark{font-size:20px;font-weight:800;letter-spacing:-1px}
.preview-avatar{margin-left:auto;border:1px solid #ffffff66;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:10px}
.preview-screen{padding:22px;min-height:345px}
.preview-screen[hidden]{display:none}
.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px}
.preview-heading h3{font-size:20px;font-weight:500;letter-spacing:-.5px;margin:0}
.preview-heading>span{font-size:11px;color:#64768d}
.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.preview-stat{padding:14px;background:#eaf0f7;border:1px solid #dde6f0;border-radius:7px;display:flex;flex-direction:column;gap:10px}
.preview-stat>span{font-size:11px;color:#63758d}
.preview-stat strong{font-size:23px;font-weight:500}
.preview-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.preview-screen h4{font-size:12px;font-weight:600;margin:0 0 12px}
.preview-bars{height:80px;display:flex;gap:8px;align-items:flex-end;border-bottom:1px solid #dce5ee;padding:0 8px}
.preview-bars i{flex:1;height:var(--bar);background:linear-gradient(#6e97c8,#304f7f);border-radius:3px 3px 0 0}
.preview-axis{display:flex;justify-content:space-between;font-size:9px;color:#64768d;margin-top:6px}
.preview-event{font-size:11px;display:grid;grid-template-columns:1fr auto;gap:5px;margin:10px 0}
.preview-event>span{grid-column:1}
.preview-event .preview-status{grid-column:2;grid-row:1 / span 2;align-self:center}
.preview-table-wrap{overflow-x:auto}
.preview-screen table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}
.preview-screen th{color:#63758d;text-align:left;font-weight:500;padding:11px 8px;border-bottom:1px solid #cfdbe7;background:#edf2f8}
.preview-screen td{padding:13px 8px;border-bottom:1px solid #e4ebf2}
.preview-screen td small{display:block;color:#6b7b90;font-size:10px;margin-top:4px}
.preview-status{display:inline-block;background:#d9eee9;color:#296959;font-size:10px;padding:5px 7px;border-radius:4px}
.preview-filter{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:12px}
.preview-filter>span{border:1px solid #d9e3ee;border-radius:5px;padding:8px;color:#7a899c;font-size:10px}
.preview-note{font-size:11px;line-height:1.5;color:#6b7b90;margin-top:14px}
.preview-journey{padding:16px;border:1px solid #dce6f0;border-radius:7px;margin-bottom:16px}
.preview-progress{display:flex;justify-content:space-between;position:relative;font-size:10px;margin:24px 0 8px}
.preview-progress:before{content:'';position:absolute;left:15px;right:15px;top:-11px;height:2px;background:#c9d7e6}
.preview-progress span{position:relative}
.preview-progress span:before{content:'';position:absolute;top:-15px;left:50%;width:10px;height:10px;border-radius:50%;background:#c9d7e6}
.preview-progress .done:before{background:#304f7f}
.preview-document{margin-top:22px;padding:14px;border:1px solid #dce6f0;border-radius:7px;display:flex;align-items:center;gap:12px;font-size:11px}
.preview-file{padding:10px 7px;background:#e2ebf5;color:#304f7f;font-weight:600}
.preview-document small{display:block;color:#6b7b90;margin-top:5px;font-size:10px}
.preview-document>span:last-child{margin-left:auto;white-space:nowrap}
.preview-costs{margin-top:20px}
.preview-costs>div{display:flex;align-items:center;gap:12px;font-size:10px;margin:9px 0}
.preview-costs span{width:65px}
.preview-costs i{width:var(--cost);max-width:70%;height:7px;background:#658dc6;border-radius:2px}
@media(max-width:1023px){.stage.portal-active .panels{width:86vw}#portal{display:block;overflow-y:auto;scrollbar-width:thin;padding-right:10px}.portal-preview{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:720px;margin:24px 0}.preview-window{transform:none}.preview-screen{min-height:0}}
@media(max-width:600px){.preview-screen{padding:14px}.preview-tabs button{font-size:11px;padding:7px 8px}.preview-stats{gap:6px}.preview-stat{padding:10px}.preview-stat strong{font-size:19px}.preview-stat>span{font-size:10px}.preview-two{gap:10px}.preview-heading h3{font-size:18px}.preview-caption{font-size:12px}.preview-chrome{padding:12px 14px}.preview-heading>span{font-size:10px}}
#history{justify-content:flex-start}
#home .extended-copy{display:block}
@media(max-height:740px){#home{justify-content:flex-start;overflow-y:auto;scrollbar-width:thin}}

/* Compact, equally sized desktop portal illustrations. */
.portal-preview{width:37vw;max-width:600px;left:calc(100% + 4vw)}
.preview-window{height:390px;transform:none}
.preview-screen{height:390px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:18px}
.preview-heading{margin-bottom:14px}
.preview-heading h3{font-size:18px}
.preview-stats{margin-bottom:14px}
.preview-stat{padding:11px;gap:7px}
.preview-stat strong{font-size:21px}
.preview-two{margin-bottom:12px;gap:12px}
.preview-screen th{padding:8px}
.preview-screen td{padding:10px 8px}
.preview-tabs{gap:5px}
.preview-tabs button{padding:7px 9px;font-size:11px}
@media(max-width:1023px){.portal-preview{display:none}}

.preview-window,.preview-screen{height:360px}
.preview-screen{overflow:visible;padding:15px}
.preview-tabs{flex-wrap:nowrap;gap:4px}
.preview-tabs button{white-space:nowrap;font-size:10px;padding:7px 8px}
.preview-heading{margin-bottom:10px}
.preview-heading h3{font-size:17px}
.preview-heading>span{font-size:10px}
.preview-stats{gap:7px;margin-bottom:10px}
.preview-stat{padding:9px;gap:5px}
.preview-stat>span{font-size:10px}
.preview-stat strong{font-size:20px}
.preview-two{gap:10px;margin-bottom:8px}
.preview-screen h4{margin-bottom:8px;font-size:11px}
.preview-bars{height:48px;gap:6px}
.preview-axis{margin-top:4px}
.preview-event{margin:5px 0;gap:3px;font-size:10px}
.preview-status{padding:4px 5px;font-size:9px}
.preview-screen table{font-size:10px}
.preview-screen th{padding:7px 6px}
.preview-screen td{padding:8px 6px}
.preview-screen td small{font-size:9px}
.preview-table-wrap{overflow:visible}
.preview-filter{margin-bottom:10px;font-size:11px}
.preview-filter>span{padding:7px;font-size:9px}
.preview-note{margin-top:10px;font-size:10px}
.preview-journey{padding:12px;margin-bottom:10px}
.preview-progress{margin-top:20px}
.preview-costs{margin-top:12px}
.preview-costs>div{margin:7px 0}

/* Stable top anchors and a shared glass surface for Contact and Portal. */
.stage{--panel-top:44px;--surface-top:156px;--surface-height:430px;--surface-width:min(540px,42vw)}
.stage .panels,.stage.contact-active .panels{top:var(--panel-top);transform:none}
.panel{justify-content:flex-start;overflow-y:auto;scrollbar-width:thin;padding-bottom:16px}
.contact-draft,.portal-preview{position:absolute;left:auto;right:7vw;top:var(--surface-top);bottom:auto;width:var(--surface-width);height:var(--surface-height);max-width:none;max-height:none;padding:20px;border:1px solid var(--lp-glass-rim);border-radius:14px;background:var(--lp-glass);-webkit-backdrop-filter:var(--lp-glass-filter);backdrop-filter:var(--lp-glass-filter);box-shadow:var(--lp-glass-shadow);transform:none;color:var(--lp-ink)}
.portal-preview{display:none;flex-direction:column;z-index:3}
.preview-window{flex:1;min-height:0;height:auto;background:transparent;border:0;box-shadow:none;transform:none;border-radius:0}
.preview-screen{height:100%;padding:0;overflow:visible}
.preview-tabs{flex-shrink:0;margin:12px 0 0;padding-top:10px;border-top:1px solid #ffffff80;gap:4px;flex-wrap:nowrap}
.preview-tabs button{background:#ffffff45;border-color:#ffffff80}
.preview-tabs button[aria-selected=true]{background:#ffffffa6;color:#304f7f;box-shadow:0 2px 8px #172b4510}
.preview-stat,.preview-screen th{background:#ffffff55;border-color:#ffffff88}
.preview-screen td{border-color:#ffffff66}
.preview-journey,.preview-filter>span{background:#ffffff30;border-color:#ffffff80}
.contact-draft .form-status:empty{display:none}
.contact-draft textarea{height:72px;min-height:72px;resize:vertical}
.contact-draft .draft-header{margin-bottom:11px}
@media(min-width:1024px){.stage.portal-active .portal-preview{display:flex}}
/* The contact card is as tall as its form (the portal preview keeps the fixed height), capped to the room below it. */
@media(min-width:1024px){.contact-draft{height:auto;max-height:calc(100% - var(--surface-top) - 76px)}}
/* On large screens both surfaces are drawn larger, grown from their top-right corner (landing.js, alignStageSurfaces). */
@media(min-width:1024px){.stage .contact-draft,.stage.contact-active .contact-draft,.stage .portal-preview{transform:scale(var(--surface-scale,1));transform-origin:top right}}
@media(max-width:1023px){.stage{--panel-top:48px}.stage .panels,.stage.wide-panel .panels,.stage.services-active .panels,.stage.portal-active .panels{width:86vw;left:7vw}.portal-preview{display:none}.stage.contact-active #contact .eyebrow,.stage.contact-active #contact p,.stage.contact-active #contact .contact-links{display:none}.stage.contact-active #contact h2{font-size:32px}.contact-draft{left:6vw;right:6vw;width:auto;height:auto;max-height:calc(100% - 230px);padding:18px 20px;overflow-y:auto}}
@media(max-width:600px){.stage{--panel-top:36px}.stage.contact-active #contact h2{font-size:25px}.stage .panels{bottom:140px}.contact-draft{padding:17px 18px}}

/* Retain the right-hand diagram on tablets; stack Services on narrower screens. */
@media(min-width:601px) and (max-width:1023px){.stage.services-active .logistics-scene{display:block;width:49vw;right:1vw;opacity:1}.stage.services-active .panels{width:43vw;left:6vw}}
@media(max-width:767px){.service-list{grid-template-columns:1fr;gap:6px}.service{padding:10px 0}.service p{font-size:13px;line-height:1.5}}
@media(max-width:600px){.stage.services-active .logistics-scene{display:none}.stage.services-active .panels{width:86vw;left:7vw}.service-list{grid-template-columns:1fr}}
.portal-preview .preview-tabs{border-top:0;padding-top:0}
.portal-preview .preview-screen{width:calc(100% / var(--preview-scale,1));height:calc(100% / var(--preview-scale,1));transform:scale(var(--preview-scale,1));transform-origin:top left}

@media(max-width:767px){.stage.services-active .logistics-scene{display:none}.stage.services-active .panels{width:86vw;left:7vw}}
@media(max-width:1023px){.stage.contact-active #contact h2{margin-bottom:20px}.stage.contact-active #contact .contact-links{display:grid;gap:12px;margin:0}.stage.contact-active #contact .contact-links a{font-size:18px;line-height:1.3;border:0;padding:0}.contact-draft{margin:0}}

.stage #contact .contact-links{max-width:430px;gap:12px}
.stage #contact .contact-links a.contact-card{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:14px 16px;border:1px solid var(--lp-card-rim);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-card-shadow);backdrop-filter:blur(10px);color:var(--lp-ink);letter-spacing:normal;transition:background .2s,border-color .2s}
.stage #contact .contact-links a.contact-card:hover{background:var(--lp-card-hover);border-color:var(--lp-card-rim-hover);color:var(--lp-accent)}
.contact-card svg{width:28px;height:28px;fill:none;stroke:var(--lp-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-card-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.contact-card-label{font-size:12px;line-height:1.2;color:var(--lp-ink-muted)}
.contact-card-value{font-size:17px;line-height:1.4}
.contact-card-address .contact-card-value{font-size:15px}
@media(max-width:1023px){.stage.contact-active #contact .contact-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:600px}.stage #contact .contact-links a.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:12px}.contact-card-value{font-size:14px;white-space:nowrap}.stage #contact .contact-links a.contact-card-address{grid-column:1 / -1;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}.contact-card-address .contact-card-value{font-size:14px;white-space:normal}.contact-card svg{width:24px;height:24px}.contact-card-body{gap:5px}}
@media(max-width:380px){.contact-card-value{font-size:13px}}

@media(max-width:1023px){.stage #contact .contact-links a.contact-card{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:10px;padding:12px}.contact-card-value{white-space:normal;overflow-wrap:anywhere}}
@media(max-width:600px){.stage #contact .contact-links a.contact-card-address{display:none}}
@media(max-width:380px){.stage #contact .contact-links a.contact-card{grid-template-columns:18px minmax(0,1fr);gap:6px;padding:10px 8px}.contact-card svg{width:18px;height:18px}.contact-card-value{font-size:13px}}
.contact-card-address .contact-card-value{white-space:nowrap}
@media(max-width:1023px){.contact-draft{min-height:420px;overflow-y:auto}.stage.contact-address-hidden #contact .contact-links a.contact-card-address{display:none}}

/* Consistent breathing room from headings to copy and calls to action. */
.stage{--copy-space:32px;--paragraph-pad:4px}
.panel:not(#services):not(#history)>h1,.panel:not(#services):not(#history)>h2,.stage.contact-active #contact h2{margin-bottom:calc(var(--copy-space) - var(--paragraph-pad))}
.panel:not(#services):not(#history)>p{padding:var(--paragraph-pad) 0;margin:0 0 calc(var(--copy-space) - 2 * var(--paragraph-pad))}
.panel:not(#services):not(#history)>p:last-of-type{margin-bottom:calc(var(--copy-space) - var(--paragraph-pad))}
#history h2{margin-bottom:0}
/* The two rows of every section heading, the home heading's included, stand a little apart. */
.panel>h1,.panel>h2{line-height:1.2}
#history h2 br{display:inline}
#history h2 em:before{content:none}
#history .history-line{margin:24px 0 28px;flex-shrink:0}
#history>p{padding:6px 0;margin:0 0 22px}
@media(max-width:600px){.landing-footer{padding:0 6vw;height:48px}.landing-footer .contacts{gap:16px;font-size:12px}.landing-footer .contacts>a span{display:none}.landing-footer .contacts i{font-size:17px}.stage{--copy-space:24px}#history .history-line{margin:20px 0 22px}#history>p{padding:5px 0;margin-bottom:18px}}
@media(max-width:600px){.stage .panels{bottom:68px}#history>p{max-width:none;padding:2px 0;margin-bottom:7px;line-height:1.45}#history .history-line{margin:12px 0 14px}}
@media(max-width:600px) and (max-height:700px){#history>p{font-size:12.5px;line-height:1.4;padding:1px 0;margin-bottom:5px}#history .history-line{margin:10px 0 12px}}

/* Shorter windows: tighter copy, so the panels keep fitting without a scrollbar of their own. */
@media(max-height:820px) and (min-width:601px){#history>p{font-size:15px;line-height:1.5;padding:3px 0;margin-bottom:12px}#history .history-line{margin:16px 0 18px}.stage #contact .contact-links a.contact-card{padding:10px 14px}.stage #contact .contact-links{gap:8px}}
@media(max-height:700px) and (min-width:601px){.panel:not(#home) h2,#home h1{font-size:34px}h1{font-size:50px}#history>p{font-size:14px;line-height:1.45;margin-bottom:8px}.panels p{font-size:14px}.service{padding:8px 0}.service p{font-size:13px}.stage{--copy-space:22px}}
@media(max-height:640px) and (min-width:601px){.panel:not(#home) h2,#home h1{font-size:30px}.stage{--copy-space:16px}.eyebrow{margin-bottom:10px}.service{padding:6px 0}.service b{margin-bottom:4px}.service p{font-size:12px;line-height:1.4}.service .num{margin-bottom:4px}.stage #contact .contact-links a.contact-card{padding:7px 12px}.contact-card svg{width:22px;height:22px}}
@media(max-height:640px) and (min-width:601px){.contact-draft{padding:14px 20px}.contact-draft textarea{height:48px;min-height:48px}.contact-draft .form-grid{gap:8px 12px}.contact-draft .form-tabs{margin-bottom:8px}.contact-draft .draft-header{margin-bottom:6px}.contact-draft .wide{margin-top:8px}.contact-draft .draft-submit{margin-top:8px}}

/* The Terms of Use panel (the footer link): laid out like About, plain text under the header. The text
   scrolls in its own region with a button per section underneath that scrolls to it, and the button of the
   section in view is marked. */
#legal{overflow:hidden}
.stage #legal{justify-content:flex-start}
.stage #legal>h2{margin-bottom:18px}
/* The legal sheet spans the stage, with the same margin on the right as on the left (landing.js marks .legal-active). */
@media(min-width:601px){.stage.legal-active .panels{width:86vw}}
@media(min-width:1500px){.stage.legal-active .panels{width:80vw}}
.stage.legal-active .legal-section p{max-width:none}
.legal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:14px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--lp-accent) 50.2%,transparent) transparent;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 28px),transparent)}
.legal-body:focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}
.legal-section{padding:0 0 26px;margin:0 0 26px}
.legal-section:last-child{margin-bottom:0}
.legal-section h3{font-size:22px;font-weight:500;letter-spacing:normal;margin:0 0 12px;color:var(--lp-ink)}
.legal-section h5{font-size:14px;font-weight:700;margin:16px 0 6px;letter-spacing:0;color:var(--lp-accent)}
.legal-section p{font-size:14px;line-height:1.65;max-width:none;margin:0 0 12px;color:var(--lp-ink-body)}
.legal-section ol{margin:0 0 12px;padding:0;list-style:none;counter-reset:legal-item;font-size:14px;line-height:1.65;color:var(--lp-ink-body)}
.legal-section li{margin:0 0 8px;padding-left:26px;text-indent:-26px;counter-increment:legal-item}
.legal-section li::before{content:counter(legal-item) ".";display:inline-block;width:26px;text-indent:0}
.legal-section dl{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:8px 18px;margin:0;font-size:14px;line-height:1.5;color:var(--lp-ink-body)}
.legal-section dt{font-weight:600}
.legal-section dd{margin:0}
.legal-tabs{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.legal-tabs button{flex:1 1 auto;padding:10px 12px;border:1px solid color-mix(in srgb,var(--lp-accent) 25.1%,transparent);border-radius:4px;background:var(--lp-soft-2);color:var(--lp-ink);font-size:13px;transition:background .2s,color .2s,border-color .2s}
.legal-tabs button:hover{background:var(--lp-soft-3)}
.legal-tabs button[aria-current=true]{background:#304f7f;border-color:#839cbe;color:#fff}
@media(max-width:1023px){.legal-tabs button{padding:8px 10px;font-size:12px}}
@media(max-height:700px){.legal-tabs button{padding:7px 10px}.legal-tabs{margin-top:10px}.stage #legal>h2{margin-bottom:12px}}

/* Panels sit in the middle of the room between the header and the footer. "safe" keeps the top of a tall
   panel reachable instead of clipping it. */
.stage{--panel-top:40px;--panel-bottom:92px}
.stage .panel{padding-bottom:0}
.stage .panels{top:var(--panel-top);bottom:var(--panel-bottom)}
.stage .panel:is(#home,#history,#services,#portal,#contact){justify-content:flex-start}
@media(max-height:700px){.stage{--panel-top:32px;--panel-bottom:84px}}
@media(max-width:600px){.stage{--panel-top:36px;--panel-bottom:88px}}

/* Photos: licensed shots of Piraeus port behind the sea, one per section (wwwroot/img/landing, -sm for phones),
   cross-fading as the section changes (landing.js keeps .stage's data-photo; not data-section, which landing.js
   wires as a section link that cancels every click inside it). The layer sits between the stage's
   gradient and the waves, and is blended into the gradient rather than laid over it: soft-light on a grey copy,
   so the photo only shades the page's own blues, adds no colour of its own, and leaves the white top white. Each
   photo fills the lower part of the stage, its water and quays meeting the darkening waves; a mask fades it out
   towards the top and under the text column on the left. The blend is on the layer: on the photos themselves it
   would only meet the layer's own empty backdrop. Only the current section's photo is fetched at first; the rest
   follow once the page has loaded (.photos-ready). --strength is how much of each photo shows: the busiest
   scenes least. The files are saved grey (the page shows them grey anyway), 1600px and 800px wide at JPEG
   quality 30: faint as they are, the loss does not show. File names say their section. */
.photo-layer{position:absolute;inset:0;z-index:-3;pointer-events:none;mix-blend-mode:var(--lp-photo-blend)}
.photo{position:absolute;left:0;right:0;bottom:0;height:80%;background:no-repeat center bottom/cover;filter:grayscale(1) contrast(1.1);opacity:0;--strength:.7;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#0000 18%,#000 62%),linear-gradient(90deg,#0004 0%,#0004 40%,#000 68%);mask-image:linear-gradient(180deg,transparent 0%,#0000 18%,#000 62%),linear-gradient(90deg,#0004 0%,#0004 40%,#000 68%);-webkit-mask-composite:source-in;mask-composite:intersect}
.photo-home{--img:url(../img/landing/home-ship-at-sea.jpg);background-position:82% 60%;--strength:.85}
/* Welcome: the ship's bridge stands high in the photo, where the shared fade is still nearly clear. So on the right,
   away from the text, an ellipse from the bottom-right corner is added to the usual fade: mask layers composite
   from the bottom up, the shared two intersected, then the ellipse added. Anchored at 82% across, the ship (the
   photo's right third) stays in view as the window narrows instead of being cropped off first. */
.photo-home{-webkit-mask-image:radial-gradient(ellipse 50% 130% at 100% 100%,#000 60%,transparent 100%),linear-gradient(180deg,transparent 0%,#0000 18%,#000 62%),linear-gradient(90deg,#0004 0%,#0004 40%,#000 68%);mask-image:radial-gradient(ellipse 50% 130% at 100% 100%,#000 60%,transparent 100%),linear-gradient(180deg,transparent 0%,#0000 18%,#000 62%),linear-gradient(90deg,#0004 0%,#0004 40%,#000 68%);-webkit-mask-composite:source-over,source-in;mask-composite:add,intersect}
.photo-history{--img:url(../img/landing/about-ferry-harbour-v2.jpg);background-position:center 75%;--strength:.55}
.photo-services{--img:url(../img/landing/services-harbour-crane.jpg);background-position:center 85%;--strength:.6}
.photo-portal{--img:url(../img/landing/portal-air-cargo.jpg);background-position:center 65%;--strength:.55}
.photo-contact{--img:url(../img/landing/contact-port-panorama.jpg);background-position:center bottom;--strength:.5}
@media(max-width:700px){
.photo-home{--img:url(../img/landing/home-ship-at-sea-sm.jpg)}
.photo-history{--img:url(../img/landing/about-ferry-harbour-v2-sm.jpg)}
.photo-services{--img:url(../img/landing/services-harbour-crane-sm.jpg)}
.photo-portal{--img:url(../img/landing/portal-air-cargo-sm.jpg)}
.photo-contact{--img:url(../img/landing/contact-port-panorama-sm.jpg)}
/* The text runs the full width here: the photo stays in the lower part only. */
.photo{height:60%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 70%);mask-image:linear-gradient(180deg,transparent 0%,#000 70%)}
}
.stage.photos-ready .photo,.stage[data-photo=home] .photo-home,.stage[data-photo=history] .photo-history,.stage[data-photo=services] .photo-services,.stage[data-photo=portal] .photo-portal,.stage[data-photo=contact] .photo-contact{background-image:var(--img)}
/* The Services photo once landing.js has fitted it to the network (fitServicesPhoto): placed at --fit-x/-y,
   --fit-w wide. 50% grey is soft-light's neutral, so the room the photo leaves (its top edge, either side) blends
   to nothing; a grey band fades the photo's top edge into it. */
.stage.services-fitted .photo-services{background-color:#808080;background-repeat:no-repeat;background-size:var(--fit-w) auto;background-position:var(--fit-x) var(--fit-y)}
.stage.services-fitted:is(.photos-ready,[data-photo=services]) .photo-services{background-image:linear-gradient(180deg,#808080 var(--fit-y),#80808000 calc(var(--fit-y) + 160px)),var(--img);background-size:100% 100%,var(--fit-w) auto;background-position:0 0,var(--fit-x) var(--fit-y)}
.stage[data-photo=home] .photo-home,.stage[data-photo=history] .photo-history,.stage[data-photo=services] .photo-services,.stage[data-photo=portal] .photo-portal,.stage[data-photo=contact] .photo-contact{opacity:calc(var(--strength) * var(--lp-photo-gain))}
@media(prefers-reduced-motion:reduce){.photo{transition:none}}

/* Greek label glyphs use the same coherent sans-serif family as the body. */
html[lang=el] &{--label-font:Arial,Helvetica,sans-serif}
html[lang=el] & :is(.eyebrow,.chart-label,.network-label,.network-caption,.hint,.landing-footer,.history-line,.mini){letter-spacing:.04em}
html[lang=el] & #home .mini{letter-spacing:.04em}
html[lang=el] & :is(.eyebrow,.network-label,.network-caption){font-weight:500}
html[lang=el] & .delivery-label{letter-spacing:.04em}
html[lang=el] & svg [font-family="monospace"]{font-family:var(--label-font);letter-spacing:.04em}

/* The home heading is upright Arial at normal tracking, as every heading here is, the name included
   (option C of the 2026-10-20 font mockup). It starts where the other sections' headings do: an empty eyebrow above
   it (.home-spacer) takes the eyebrow's height and margin at every size. Its second row, "We are AL-MA",
   is the other headings' blue second row, about three quarters the size, set as far below the first as the
   paragraph is below it (both follow --copy-space, the room between a heading and its copy); the name
   never breaks at its hyphen. Its size is the section headings' (".panel:not(#home) h2,#home h1" in their
   size rules above), not the shared h1 sizes, which run up to 80px. On phones it takes the panel's full
   width: the 320px cap above was for the old three-line heading. The name echoes the header logo: heavy, in a deep blue gradient down to the logo's #061a4f at the bottom, with a
   light band near the top of the letters for shine. */
/* The other sections' headings are tracked in a little, so the longest ("Το επόμενο λιμάνι σας.") stays on one row. */
& .panel:not(#home)>h2{letter-spacing:-.03em}
& #home .home-spacer{visibility:hidden}
& #home h1{font-weight:400;font-style:normal}
@media(max-width:600px){& #home h1{max-width:none}}
& #home h1 .home-lead{display:block;margin-top:var(--copy-space);font-size:.76em}
& #home h1 .home-lead b{white-space:nowrap;font-weight:900;background:var(--lp-name);-webkit-background-clip:text;background-clip:text;color:transparent}

/* A signed-in user's welcome (_WelcomeGreeting): the greeting for the time of day landing.js marks on the heading
   (data-greet-now, by the user's clock whatever the scene), their first name in the "AL-MA" row; then one paragraph of lines (last visit, unread
   notifications, the dashboard), and their pages as buttons, "Alternatively:" above them when the dashboard is
   offered. Its links and the two notification buttons are text in the accent colour. */
& #home-title [data-greet]{display:none}
& #home-title[data-greet-now="day"] [data-greet="day"],& #home-title[data-greet-now="sunset"] [data-greet="sunset"],& #home-title[data-greet-now="night"] [data-greet="night"]{display:inline}
/* Its colours, by the page's scene (data-greet-scene; in the classic look, which has none, by the clock): the greeting
   light blue by day, peach at sunset, a deeper blue at night; the name, in the greeting's own type, alternates with it:
   AL-MA blue by day and at sunset, white at night. */
& #home-title[data-greet-scene]{--greet:#4f86c6;--greet-name:#304f7f;color:var(--greet)}
& #home-title[data-greet-scene="sunset"]{--greet:#d9774f}
& #home-title[data-greet-scene="night"]{--greet:#5f8fd6;--greet-name:#fff}
& #home .greet-name{color:var(--greet-name)}
& #home .greet-line{display:block}
/* the dashboard's line has a blank row above it */
& #home .greet-dash{margin-top:1.7em}
& #home .greet-line[hidden]{display:none}
& #home .greet-link{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--lp-accent);text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;white-space:nowrap}
& #home .greet-link:hover{text-decoration-style:solid}
& #home .greet-alt{margin:0 0 12px;font-size:14px;color:var(--lp-ink-muted)}
& #home .greet-pages :is(a,button){display:inline-flex;align-items:center;gap:8px}
& #home .greet-more{cursor:pointer}
& #home .greet-pages i{font-size:15px}
& #home .greet-alt-tools{margin-top:18px}
}

/* The site header above the stage is 72px tall, 60px on a narrow screen (site.css #header). */
@media(max-width:768px){.alma-landing{--header:60px}}

/* A signed-in user's settings cogwheel in the strip (Welcome.cshtml), and the site's dropdown it opens: the strip's
   light text and the page's inherited fonts stop at the menu. */
.alma-landing .landing-cog{display:inline-flex;align-items:center}
.alma-landing .landing-cog-btn{display:inline-flex;align-items:center;padding:0 2px;border:0;background:none;font-size:15px;line-height:1;color:var(--aqua)}
.alma-landing .landing-cog-btn:hover,.alma-landing .landing-cog-btn[aria-expanded="true"]{color:#fff}
.alma-landing .landing-cog-btn .bi-gear{display:inline-block;transition:transform .4s ease}
.alma-landing .landing-cog-btn:hover .bi-gear,.alma-landing .landing-cog-btn[aria-expanded="true"] .bi-gear{transform:rotate(60deg)}
.alma-landing .landing-footer .settings-menu{font-family:var(--bs-body-font-family);letter-spacing:normal;margin-bottom:12px}
.alma-landing .landing-footer .settings-menu .dropdown-item{color:var(--bs-dropdown-link-color,#212529)}
.alma-landing .landing-footer .settings-menu .dropdown-item:hover,.alma-landing .landing-footer .settings-menu .dropdown-item:focus{color:var(--bs-dropdown-link-hover-color,#1e2125)}
.alma-landing .landing-footer .settings-menu .dropdown-header{color:var(--bs-dropdown-header-color,#6c757d)}
@media(prefers-reduced-motion:reduce){.alma-landing .landing-cog-btn .bi-gear{transition:none}}

/* The landing header: the shared header's layout, without its border and shadow. Login is drawn like the
   page's primary button; the section links and the menu button have no border or background. */
#header.header-landing{box-shadow:none;border-bottom:0;background:var(--lp-sky-0)}
.header-landing .lh-login,.header-landing .lh-menu,.header-landing .lh-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;font:14px Arial,Helvetica,sans-serif;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
.header-landing .lh-login{padding:0 18px;border:1px solid color-mix(in srgb,var(--lp-accent) 33.3%,transparent);border-radius:5px;background:none;color:var(--lp-ink);margin:0}
.header-landing .lh-login:hover{background:color-mix(in srgb,var(--lp-accent) 7.1%,transparent);border-color:var(--lp-accent);color:var(--lp-accent)}
/* The section links (the app header's .vh-link has the same rules, v3-shell.css): Alma blue by day and at sunset, silver
   at night, never another colour under the pointer; the underline is drawn in from the left (and leaves to the right),
   and stays on a link being pressed and on the current section's. Below 992px only Login and the menu button show; a
   swipe on the page moves between the sections (landing.js). */
#header.header-landing{--lh-link-ink:#304f7f}
html[data-v3-scene="night"] #header.header-landing{--lh-link-ink:#dfe6ee}
.header-landing .lh-nav{display:none;align-items:center;gap:2px;margin-right:14px}
.header-landing .lh-link{flex:none;padding:0 14px;border:0;background:none;color:var(--lh-link-ink);position:relative}
.header-landing .lh-link:hover,.header-landing .lh-link:focus-visible,.header-landing .lh-link:active,.header-landing .lh-link.is-current{color:var(--lh-link-ink);outline:none}
.header-landing .lh-link::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:1px;background:var(--lh-link-ink);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.header-landing .lh-link:hover::after,.header-landing .lh-link:focus-visible::after,.header-landing .lh-link:active::after,.header-landing .lh-link.is-current::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.header-landing .lh-link::after{transition:none}}
.header-landing .lh-menu{width:40px;margin-left:10px;padding:0;font-size:28px;border:0;background:none;color:var(--lp-ink);line-height:1}
.header-landing .lh-menu:hover{background:none;color:var(--lp-accent)}
@media(min-width:992px){.header-landing .lh-nav{display:flex}.header-landing .lh-menu{display:none}}
@media(max-width:768px){.header-landing .lh-login{padding:0 14px;height:36px;font-size:13px}.header-landing .lh-menu{height:36px;width:36px;margin-left:4px;font-size:26px}}

/* reCAPTCHA v3 (the contact forms, landing.js): Google's floating badge would sit over the page's corner, so it is
   hidden and its required notice is the .captcha-note under the forms instead. Outside .alma-landing: Google adds
   the badge to <body>. */
.grecaptcha-badge{visibility:hidden}

/* The contact card's glows: blue, breathing, while a message is sent (.is-sending); green, a single blink, when it
   has gone (.is-sent-glow). Every frame repeats the card's own shadows, and the same list of shadows, so they blend. */
@keyframes contact-glow-sent{
0%,100%{border-color:var(--lp-glass-rim);box-shadow:var(--lp-glass-shadow),inset 0 0 0 0 #ffffff00,0 0 0 1px #3fae7400,0 0 0 0 #3fae7400}
15%,45%{border-color:#bfe6cf;box-shadow:var(--lp-glass-shadow),inset 0 0 30px 0 #ffffffb3,0 0 0 1px #3fae74d9,0 0 46px 10px #3fae7499}}
@keyframes contact-glow{
from{box-shadow:var(--lp-glass-shadow),inset 0 0 0 0 #ffffff00,0 0 0 1px #6fa3dc26,0 0 8px 0 #6fa3dc1f}
to{box-shadow:var(--lp-glass-shadow),inset 0 0 30px 0 #ffffffcc,0 0 0 1px #6fa3dcd9,0 0 46px 10px #5b95d6a6}}

/* Account modal (_AccountModal.cshtml, landing-account.js): sign in, register, forgot password, resend confirmation.
   A Bootstrap modal, outside .alma-landing (Bootstrap's backdrop is in <body>, and the field-validation bubble must
   stay above it), drawn as the contact card's frosted glass over a dimmed sea. */
.account-modal{--am-ink:var(--lp-ink);--am-blue:var(--lp-accent);--am-muted:var(--lp-ink-muted);font-family:Arial,Helvetica,sans-serif}
.account-modal .modal-dialog{max-width:420px;padding:0 16px;margin-left:auto;margin-right:auto}
.account-modal:has([data-pane="register"]:not([hidden])) .modal-dialog{max-width:560px}
/* The card: the contact card's frosted glass (its "Compact frosted-glass contact surface" rule), a little whiter so
   it holds over the blurred page. */
.account-modal .modal-content{padding:22px 26px 20px;color:var(--am-ink);background:var(--lp-modal);-webkit-backdrop-filter:var(--lp-modal-filter);backdrop-filter:var(--lp-modal-filter);border:1px solid var(--lp-modal-rim);border-radius:16px;box-shadow:var(--lp-modal-shadow)}
/* The page behind: tinted and blurred, as behind the main site's modals (modal.css). Opacity stays 1,
   since a backdrop-filter is painted through its element's opacity; the tint's alpha dims instead, and fades in. */
body:has(#account-modal) > .modal-backdrop{background-color:#0f1c2e38;opacity:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:none;animation:am-dim-in .25s ease-out both}
@keyframes am-dim-in{from{background-color:#0f1c2e00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@media(prefers-reduced-motion:reduce){body:has(#account-modal) > .modal-backdrop{animation:none}}
.account-modal .am-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.account-modal .am-title{margin:0;font-size:24px;font-weight:500;letter-spacing:normal;color:var(--am-ink)}
.account-modal .am-close{flex:none;width:36px;height:36px;margin-right:-8px;border:0;border-radius:50%;background:none;color:var(--am-muted);font-size:18px;line-height:1}
.account-modal .am-close:hover{background:color-mix(in srgb,var(--lp-accent) 7.8%,transparent);color:var(--am-blue)}
.account-modal .am-status{margin:-4px 0 12px;font-size:13px;line-height:1.45;font-weight:600;color:var(--am-blue)}
.account-modal .am-status.is-error{color:var(--lp-error)}
.account-modal .am-status[hidden]{display:none}
.account-modal .am-pane{display:flex;flex-direction:column;gap:13px}
.account-modal .am-pane[hidden]{display:none}
.account-modal .am-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.account-modal label{display:flex;flex-direction:column;gap:7px;margin:0;font-size:13px;color:var(--lp-ink-body)}
.account-modal input[type=email],.account-modal input[type=text],.account-modal input[type=password]{width:100%;min-width:0;border:1px solid var(--lp-modal-field-rim);border-radius:5px;background:var(--lp-modal-field);color:var(--am-ink);font:16px Arial,sans-serif;padding:10px 11px}
.account-modal input:focus{outline:2px solid var(--am-blue);outline-offset:1px}
.account-modal .am-secret{position:relative;display:block}
.account-modal .am-secret input{padding-right:42px}
.account-modal .am-eye{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--am-muted);font-size:16px}
.account-modal .am-eye:hover{color:var(--am-blue)}
.account-modal .am-check{flex-direction:row;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.account-modal .am-check input{width:17px;height:17px;margin:0;accent-color:var(--am-blue)}
.account-modal .am-challenge{min-height:78px}
.account-modal .am-challenge[hidden]{display:none}
.account-modal p{margin:0;font-size:12px;line-height:1.5;color:var(--am-muted)}
.account-modal .am-lead{font-size:14px;color:var(--lp-ink-body)}
.account-modal .captcha-note{font-size:10px;line-height:1.4;color:var(--lp-ink-soft)}
.account-modal .captcha-note a,.account-modal .am-terms a{color:inherit;text-decoration:underline}
.account-modal .primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 21px;border:1px solid #839cbe;border-radius:4px;background:#304f7f;color:#fff;font-size:15px;transition:background .2s}
.account-modal .primary:hover{background:#3e6397;color:#fff}
.account-modal .am-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:13px}
.account-modal .am-switch{padding-top:12px;border-top:1px solid color-mix(in srgb,var(--lp-accent) 13.3%,transparent);text-align:center;font-size:14px}
.account-modal .am-links a,.account-modal .am-switch a{color:var(--am-blue);text-decoration:none}
.account-modal .am-links a:hover,.account-modal .am-switch a:hover{text-decoration:underline}
.account-modal .am-done{align-items:center;text-align:center;padding:6px 0 2px}
.account-modal .am-done .bi-envelope-check{font-size:44px;line-height:1;color:var(--lp-success)}
.account-modal .am-done-text{font-size:15px;color:var(--lp-ink-body)}
@media(max-width:600px){.account-modal .am-grid{grid-template-columns:1fr}.account-modal .modal-content{padding:18px 18px 16px}.account-modal .am-title{font-size:21px}.account-modal .modal-dialog{padding:0 10px}}

/*--------------------------------------------------------------
# Scenes: day, sunset and night, as the dashboard has them. v3-scene.js sets html[data-v3-scene] by the visitor's own clock
# (day 06-14, sunset 14-19, night 19-06) or the cogwheel's pick: _Layout_landing loads it for visitors and _Layout for
# everyone signed in. Without the attribute (the script did not run) the page stays on day, the defaults below.
# Every colour above comes from these --lp-* tokens; a scene is one block of values, plus the few rules a token can't carry
# (the logo, the portal preview's mock app). The sky's stops are v3-shell.css's scene skies, run down into a deep sea.
# The page, the visitors' header and the account modal (in <body>, outside the page) all read them.
--------------------------------------------------------------*/
:is(.alma-landing,#header.header-landing,.account-modal){
--lp-sky-0:#fff;--lp-sky-1:#f0f7fd;--lp-sky-2:#cee3f4;--lp-sky-3:#a3c4dd;--lp-sky-4:#6a93b5;--lp-sky-5:#2f5379;--lp-sky-6:#172b45;--lp-glow:#fff0;
/* Text: headings, body copy, secondary, the faintest; the accent is the headings' second row, the eyebrows and the rules.
   The text and the glass below are tokens.css's "Glass and ink" (one set per scene, shared with the v3 look), so a scene
   block here only sets what is the page's own. */
--lp-ink:var(--ink);--lp-ink-body:var(--ink-body);--lp-ink-muted:var(--ink-muted);--lp-ink-soft:var(--ink-soft);--lp-accent:var(--ink-accent);
--lp-error:#a3352b;--lp-success:#1d7a4a;
/* The delivery network: its route lines, labels, captions and hub rims; each mode's lit route */
--lp-route:#304f7f;--lp-label:#233e5c;--lp-label-strong:#172b45;--lp-caption:#496585;--lp-hub-rim:#304f7f;
--lp-mode-air:#2fa8ff;--lp-mode-road:#9aa5b1;--lp-mode-sea:#1f5aa8;
/* The sea's lines: the grid, the swells' two colours and strengths, their edge, the currents, the network's particles */
--lp-grid:#a8c3df;--lp-wave-a:#558ec4;--lp-wave-a-o:.07;--lp-wave-b:#75cad0;--lp-wave-b-o:.16;--lp-wave-edge:#83bdcf;--lp-current:#7badcc;--lp-particle:#a1e0dc;
/* Glass: the contact card and portal preview; the contact cards; the account modal */
--lp-glass:var(--glass-bg);--lp-glass-rim:var(--glass-rim);--lp-glass-shadow:var(--glass-shadow);--lp-glass-filter:var(--glass-filter);
--lp-card:var(--glass-card);--lp-card-rim:var(--glass-card-rim);--lp-card-shadow:var(--glass-card-shadow);--lp-card-hover:var(--glass-card-hover);--lp-card-rim-hover:var(--glass-card-rim-hover);
--lp-modal:var(--glass-modal);--lp-modal-rim:var(--glass-modal-rim);--lp-modal-shadow:var(--glass-modal-shadow);--lp-modal-filter:var(--glass-modal-filter);
--lp-modal-field:var(--glass-modal-field);--lp-modal-field-rim:var(--glass-modal-field-rim);
/* Light fills on the sky (faint, normal, hover), the contact form's tab strip, its fields */
--lp-soft-1:#ffffff50;--lp-soft-2:#ffffff70;--lp-soft-3:#ffffffa6;
--lp-tabs:#ffffff35;--lp-tabs-rim:#ffffff66;--lp-tab-on:#ffffff80;--lp-tab-on-shadow:0 2px 8px #172b4510;
--lp-field:var(--glass-field);--lp-field-rim:var(--glass-field-rim);--lp-field-ink:var(--glass-field-ink);
/* "AL-MA" on the home heading: the header logo's own colours */
--lp-name:linear-gradient(180deg,#1f4888 0%,#1f4888 14%,#4677bb 23%,#26528f 34%,#14336c 55%,#061a4f 82%);
/* The photos: how they meet the sky, and how much of each shows (times its own --strength) */
--lp-photo-blend:soft-light;--lp-photo-gain:1;
}

/* Sunset: the site's warm sky, down into a plum sea; plum text with a rose accent. The glass stays light, warmed. The hubs and
   buttons keep the AL-MA blue. */
html[data-v3-scene="sunset"] :is(.alma-landing,#header.header-landing,.account-modal){
--lp-sky-0:#fff8ef;--lp-sky-1:#fde7d0;--lp-sky-2:#f6c9a6;--lp-sky-3:#e5a98f;--lp-sky-4:#b98aa5;--lp-sky-5:#6e4a72;--lp-sky-6:#42284a;--lp-glow:#ffb06080;
--lp-route:#5b3a5f;--lp-label:#4b3651;--lp-label-strong:#3a2740;--lp-caption:#6b5470;--lp-hub-rim:#5b3a5f;
--lp-grid:#e9b9a0;--lp-wave-a:#b86a8a;--lp-wave-a-o:.08;--lp-wave-b:#ee9f74;--lp-wave-b-o:.12;--lp-wave-edge:#f0b27c;--lp-current:#e9a27e;--lp-particle:#ffd9b0;
--lp-tab-on-shadow:0 2px 8px #42284a12;
/* the photos take the warm sky's colours strongly under soft-light: a little less of each */
--lp-photo-gain:.75;
}

/* Night: the site's night sky (its header's colour at the top) down into a near-black sea, with a pale moon glow. Light text,
   the night's light blue for the accent. Every surface is the dashboard's slate glass (v3-night.css): what
   shows through it is dimmed and greyed, so the sea's brighter bands can't wash it out. */
html[data-v3-scene="night"] :is(.alma-landing,#header.header-landing,.account-modal){
--lp-sky-0:#0d1a2f;--lp-sky-1:#11213a;--lp-sky-2:#172d4d;--lp-sky-3:#1b375b;--lp-sky-4:#183150;--lp-sky-5:#0f2039;--lp-sky-6:#070f1d;--lp-glow:#78a0e62e;
--lp-error:#ff8f86;--lp-success:#5fd39a;
--lp-route:#8cb4f0;--lp-label:#c3d2e5;--lp-label-strong:#e6eef9;--lp-caption:#8fa3bd;--lp-hub-rim:#8cb4f0;
--lp-mode-air:#4fb6ff;--lp-mode-road:#b6c0cb;--lp-mode-sea:#6c9be6;
--lp-grid:#4f6f9e;--lp-wave-a:#3d5f94;--lp-wave-a-o:.1;--lp-wave-b:#5d8fc4;--lp-wave-b-o:.1;--lp-wave-edge:#7fa6d8;--lp-current:#9ec0f0;--lp-particle:#a9e6ff;
--lp-soft-1:#ffffff0d;--lp-soft-2:#ffffff12;--lp-soft-3:#ffffff24;
--lp-tabs:#0000002e;--lp-tabs-rim:#a0acbe2e;--lp-tab-on:#ffffff1a;--lp-tab-on-shadow:0 2px 8px #00000040;
/* the header logo's night silver (v3-shell.css --v3-logo-night-0..3) */
--lp-name:linear-gradient(180deg,#fff 0%,#e6eaef 48%,#e0e5eb 52%,#aab4c0 100%);
--lp-photo-blend:soft-light;--lp-photo-gain:1;
/* the browser's own parts (scrollbars, the message box's resize grip) dark too */
color-scheme:dark;
}

/* The sea's lines take the scene's colours (Welcome.cshtml's <svg class="sea">, landing.js draws the swells and currents). */
.alma-landing .sea-grid{stroke:var(--lp-grid)}
.alma-landing .sea-grid-dot{fill:var(--lp-grid)}
.alma-landing .swell-a{stop-color:var(--lp-wave-a);stop-opacity:var(--lp-wave-a-o)}
.alma-landing .swell-b{stop-color:var(--lp-wave-b);stop-opacity:var(--lp-wave-b-o)}
.alma-landing #swells path{stroke:var(--lp-wave-edge)}
.alma-landing #currents{stroke:var(--lp-current)}
.alma-landing #route-particles circle{fill:var(--lp-particle)}

/* Night: the Welcome photo's ellipse (its "Photos" mask) reaches the top of the photo on the right, where its sky is a
   light grey: on the pale day sky that blends to nothing, on the night sky it drew a hard line. A fade from the top is
   intersected with the whole mask (mask layers composite from the bottom up). Phones keep their own mask. */
@media(min-width:701px){html[data-v3-scene="night"] .alma-landing .photo-home{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%),radial-gradient(ellipse 50% 130% at 100% 100%,#000 60%,transparent 100%),linear-gradient(180deg,transparent 0%,#0000 18%,#000 62%),linear-gradient(90deg,#0004 0%,#0004 40%,#000 68%);mask-image:linear-gradient(180deg,transparent 0,#000 22%),radial-gradient(ellipse 50% 130% at 100% 100%,#000 60%,transparent 100%),linear-gradient(180deg,transparent 0%,#0000 18%,#000 62%),linear-gradient(90deg,#0004 0%,#0004 40%,#000 68%);-webkit-mask-composite:source-in,source-over,source-in;mask-composite:intersect,add,intersect}}

/* Night: the visitors' header logo turns silver, as the site header's does (_HeaderLogo.cshtml). */
html[data-v3-scene="night"] #header.header-landing .logo-img .logo-night{opacity:1}
html[data-v3-scene="night"] #header.header-landing .logo-img .logo-day{opacity:0}

/* Night: the visitors' menu panel (_HeaderLanding's .custom-panel, site.css's white panel; v3-night.css only darkens it
   under body.shell-v3, which this page doesn't have) is the sign-in window's slate glass. Its links take the night's
   light blue and keep the AL-MA blue fill on hover; the dividers are the glass's rim. */
html[data-v3-scene="night"] #header.header-landing{
.custom-panel{background:var(--lp-modal);-webkit-backdrop-filter:var(--lp-modal-filter);backdrop-filter:var(--lp-modal-filter);border-left:1px solid var(--lp-modal-rim);box-shadow:-8px 0 30px #00000066;color:var(--lp-ink)}
.custom-panel-header{background:#ffffff08;border-color:var(--lp-modal-rim)}
.custom-panel-header h5{color:var(--lp-ink)}
.custom-panel-header .close-panel{color:var(--lp-ink-muted)}
.custom-panel-header .close-panel:hover{color:var(--lp-ink)}
.custom-panel-body ul li a{color:var(--lp-accent);border-color:var(--lp-modal-rim)}
.custom-panel-body ul li a:hover{background-color:#304f7f;color:#fff}
.menu-footer{border-color:var(--lp-modal-rim)}
.menu-footer .btn-outline-primary{--bs-btn-color:var(--lp-accent);--bs-btn-border-color:var(--lp-accent);--bs-btn-hover-bg:#304f7f;--bs-btn-hover-border-color:#304f7f;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#304f7f;--bs-btn-active-border-color:#304f7f}
.menu-footer .btn-outline-secondary{--bs-btn-color:var(--lp-ink-body);--bs-btn-border-color:#a0acbe66;--bs-btn-hover-bg:#ffffff1a;--bs-btn-hover-border-color:#a0acbe99;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#ffffff24;--bs-btn-active-border-color:#a0acbe99}
}

/* Night: the portal preview's mock app is drawn as the portal looks at night, on the slate glass. */
html[data-v3-scene="night"] .alma-landing .portal-preview{
.preview-heading>span,.preview-stat>span,.preview-axis,.preview-screen th,.preview-note,.preview-screen td small,.preview-document small{color:#93a6bf}
.preview-stat,.preview-screen th{background:#ffffff0d;border-color:#a0acbe2e}
.preview-screen td{border-color:#a0acbe24}
.preview-journey,.preview-filter>span{background:#ffffff08;border-color:#a0acbe2e}
.preview-filter>span{color:#8396b0}
.preview-bars{border-color:#a0acbe2e}
.preview-bars i{background:linear-gradient(#8cb4f0,#3e6db5)}
.preview-costs i{background:#6f9ce0}
.preview-status{background:#14352a;color:#7fd8b0}
.preview-progress:before,.preview-progress span:before{background:#3c4251}
.preview-progress .done:before{background:#8cb4f0}
.preview-tabs button{background:#ffffff0d;border-color:#a0acbe2e;color:#bccbde}
.preview-tabs button:hover{background:#ffffff1a}
.preview-tabs button[aria-selected=true]{background:#304f7f;border-color:#304f7f;color:#fff;box-shadow:none}
}

/* The site's night rules (v3-night.css) leave the page alone (their headings and links skip
   .alma-landing); the strip's settings menu is the site's own dropdown and takes their night look. */