:root{ --navy:#0d1535; /* deck deep navy */ --navy-2:#15205a; --navy-3:#1d2c72; --red:#c01825; /* deck red */ --red-2:#e02233; --paper:#ffffff; --mist:#f5f6fb; --mist-2:#eaecf5; --ink:#0d1535; --muted:#5b6080; --mint:#7df3c0; --line:rgba(13,21,53,.10); --line-2:rgba(13,21,53,.16); --glow:rgba(192,24,37,.5); --mono:'Libre Franklin',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif; --sans:'Sora',system-ui,sans-serif; --label:'Libre Franklin',system-ui,sans-serif; } /* ---- per-locale font stacks ----------------------------------------- Sora, Fraunces and Libre Franklin contain no CJK or Arabic glyphs at all. Without these overrides those locales fall back to whatever the operating system happens to supply and the visual identity collapses. The Latin family stays FIRST in each stack on purpose: Latin characters inside CJK or Arabic text — brand names, "FCL", vessel names, ETAs, B/L numbers — then keep rendering in Sora, and only the characters Sora lacks fall through to Noto. That is what stops a page reading as two different typefaces bolted together. Noto Sans SC/JP ship at 400 and 700 only, so the 300/500/600/800 weights used elsewhere in this stylesheet resolve to the nearest available. This is normal for CJK and saves ~25 MB of font files. */ html[lang^="zh"]{ --sans:'Sora','Noto Sans SC',system-ui,sans-serif; --head:'Sora','Noto Sans SC',system-ui,sans-serif; --label:'Libre Franklin','Noto Sans SC',system-ui,sans-serif; --mono:'Libre Franklin','Noto Sans SC',system-ui,sans-serif; --serif:'Fraunces','Noto Sans SC',Georgia,serif; } html[lang^="ja"]{ --sans:'Sora','Noto Sans JP',system-ui,sans-serif; --head:'Sora','Noto Sans JP',system-ui,sans-serif; --label:'Libre Franklin','Noto Sans JP',system-ui,sans-serif; --mono:'Libre Franklin','Noto Sans JP',system-ui,sans-serif; --serif:'Fraunces','Noto Sans JP',Georgia,serif; } /* Greek: Sora, Libre Franklin and Fraunces have no Greek glyphs at all. Noto Sans supplies them. Sora stays first so Latin runs inside Greek text keep the brand typeface. Turkish needs no override — ğ ı ş live in latin-ext, which the Latin core already ships. */ html[lang^="el"]{ --sans:'Sora','Noto Sans',system-ui,sans-serif; --head:'Sora','Noto Sans',system-ui,sans-serif; --label:'Libre Franklin','Noto Sans',system-ui,sans-serif; --mono:'Libre Franklin','Noto Sans',system-ui,sans-serif; --serif:'Fraunces','Noto Sans',Georgia,serif; } html[lang^="ar"]{ --sans:'Sora','Noto Sans Arabic',system-ui,sans-serif; --head:'Sora','Noto Sans Arabic',system-ui,sans-serif; --label:'Libre Franklin','Noto Sans Arabic',system-ui,sans-serif; --mono:'Libre Franklin','Noto Sans Arabic',system-ui,sans-serif; --serif:'Fraunces','Noto Sans Arabic',Georgia,serif; } /* CJK has no letter spacing convention and no lowercase, so the tracking and uppercasing used on Latin labels look wrong. Neutralise both. */ html[lang^="zh"] .kicker,html[lang^="ja"] .kicker, html[lang^="zh"] .lab,html[lang^="ja"] .lab, html[lang^="zh"] .nav-pill,html[lang^="ja"] .nav-pill, html[lang^="zh"] .langsw-btn,html[lang^="ja"] .langsw-btn{letter-spacing:0;text-transform:none} /* CJK glyphs are visually denser; a little extra line height reads better */ html[lang^="zh"] body,html[lang^="ja"] body{line-height:1.75} /* ---- Arabic: right-to-left -------------------------------------------- `dir="rtl"` on comes from the locale registry and flips the document by itself. These rules cover what direction alone does not. NOT flipped, deliberately: the tracking map and its route/progress strip. Route lines run west-to-east and the progress bar encodes direction as meaning, so mirroring them would be wrong rather than merely unusual. Client decision, Aug 2026. */ /* text-align, insets, margins, padding and borders are now all LOGICAL properties throughout this stylesheet (98 physical declarations were converted). They flip on their own, so RTL needs no override for any of them — including the language menu, which was previously overridden here and would now have been flipped twice. What remains below is only what direction alone cannot do. */ html[dir="rtl"] .arr{transform:scaleX(-1)} /* → becomes ← */ /* Latin runs inside RTL text — vessel names, B/L numbers, ETAs — must be isolated or the browser reorders them. in markup does this; these classes cover the values rendered from data. */ html[dir="rtl"] .tracknum,html[dir="rtl"] .vessel-name, html[dir="rtl"] .eta,html[dir="rtl"] code{unicode-bidi:isolate;direction:ltr;display:inline-block} /* The map, the timeline and the progress strip keep their LTR geometry. */ html[dir="rtl"] .tmap,html[dir="rtl"] .tprog,html[dir="rtl"] .tower, html[dir="rtl"] .wm,html[dir="rtl"] .orbit{direction:ltr;text-align:start} /* ---- what does NOT mirror in Arabic ------------------------------------- Mirroring the interface is correct for Arabic and is what every major Arabic site does — navigation, reading order and content all belong on the right. The LOGO moving to the right is part of that and is correct: in RTL the logo sits at the start of the line, which is the right-hand side. That is not a bug. Only ONE category is exempt: things that encode direction as MEANING — the tracking map, route strip, timeline and orbit graphic, handled above. Route lines run west-to-east and the progress bar reads as travel. */ /* The hero decoration MIRRORS with everything else — it is not pinned. An earlier attempt pinned it, and that was wrong twice over: `direction:ltr` held the globe on the right while the headline moved there too, so they overlapped; and `transform:none` destroyed the translateY(-50%) that centres the globe vertically. #globe already uses inset-inline-end, so it mirrors to the left on its own and the composition holds — text on the right, globe on the left, the exact reflection of the English layout. */ /* ---- Latin text inside an RTL page MUST be isolated --------------------- The brand line and the motto stay English in every locale. Dropped into an RTL paragraph without isolation, the browser applies the bidi algorithm to them and moves the trailing full stops to the front: "Moving logistics forward. Together." renders as ".forward. Together" and the motto as ".One stop. Three countries. Endless connections". The text is intact — only its display order is wrong, and only `dir="ltr"` fixes it. */ html[dir="rtl"] .hh, html[dir="rtl"] .h-motto-text, html[dir="rtl"] .h-foot .marq{direction:ltr;unicode-bidi:isolate} /* …but they still sit on the right, with the rest of the hero. */ html[dir="rtl"] .hh,html[dir="rtl"] .h-motto-text{text-align:right} /* The port marquee is a one-direction CSS animation over Latin place names. Left as LTR so the scroll direction stays consistent with the globe. */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px; line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.005em} a{color:inherit;text-decoration:none} ::selection{background:var(--red);color:#fff} .wrap{max-width:1280px;margin:0 auto;padding:0 32px} /* The container is fixed but the hero's decoration is sized in viewport units, so on a very wide screen the glows balloon past the content and the composition pulls apart. Let the container grow a little, and clamp the decoration in pixels — see the .hero rules below. */ @media(min-width:1700px){.wrap{max-width:1440px}} @media(min-width:2100px){.wrap{max-width:1560px;padding:0 48px}} .mono{font-family:var(--label);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .serif-em{font-family:var(--serif);font-style:italic;font-weight:400} /* nav */ header{position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;z-index:100;transition:background .4s,box-shadow .4s,backdrop-filter .4s} header.float{background:rgba(255,255,255,.84);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)} nav{display:flex;align-items:center;justify-content:space-between;height:108px;padding-top:14px} header.float nav{height:84px;padding-top:0;transition:height .4s,padding .4s} /* Logo corner: a soft white glow bleeds into the top-left over the hero, so the mark reads on the dark globe without a hard tile edge. When the header floats (scrolled) the glow fades out — the white bar takes over. */ .brand{position:relative;display:block;line-height:0;transition:transform .4s} .brand::before{content:"";position:absolute;top:-90px;inset-inline-start:-120px;width:680px;height:400px; background:radial-gradient(ellipse 500px 280px at 170px 155px, rgba(255,255,255,.82) 0%,rgba(255,255,255,.6) 20%,rgba(255,255,255,.36) 38%, rgba(255,255,255,.18) 56%,rgba(255,255,255,.07) 72%,rgba(255,255,255,0) 88%); pointer-events:none;z-index:-1;transition:opacity .45s;opacity:1} header.float .brand::before{opacity:0} .brand img{position:relative;height:106px;width:auto;display:block; transform-origin:left center;backface-visibility:hidden; animation:flagWave 4s ease-in-out infinite;will-change:transform;transition:height .4s} header.float .brand img{height:50px} @keyframes flagWave{ 0%,100%{transform:perspective(420px) rotateY(0deg) skewX(0deg) scaleX(1)} 25%{transform:perspective(420px) rotateY(5deg) skewX(-1.2deg) scaleX(0.995)} 50%{transform:perspective(420px) rotateY(0deg) skewX(0deg) scaleX(1)} 75%{transform:perspective(420px) rotateY(-5deg) skewX(1.2deg) scaleX(0.995)} } @media(prefers-reduced-motion:reduce){.brand img{animation:none}} .navlinks{display:flex;gap:34px;align-items:center} /* Nav items must never wrap onto a second line. This alone changes nothing about how the row is spaced. */ .navlinks a.nl,.nav-pill,.nav-pill-track,.langsw-btn{white-space:nowrap} /* Every locale uses the same gap:34px at normal widths. The Romanian labels were shortened ("Despre", "Parcurs"), so the two headers now measure within about 5px of each other — 1094px vs 1088px inside a 1216px container. An earlier version tightened Romanian to gap:26px, which was no longer needed and made the two languages visibly different for no reason. What remains is only a narrow-viewport safety net: between 981px and 1300px the Romanian pills ("Urmărire expediere") are ~40px wider than the English ones, so the row is given a little help before it can overflow. Add a locale here if its labels need the room; never make it global. */ @media(min-width:981px) and (max-width:1300px){ /* Nav width pressure, measured against English = 53 units: el 69 · es 63 · tr 60 · ja 59 · de 58 · nl 58 · zh 49 · ar 49 · ro 48 Every locale at or above English gets the tighter treatment. GREEK is the widest of the ten by a clear margin and was missing from this rule when it was added — it is the one most likely to collide with the buttons on a laptop-width screen. */ html[lang^="ro"] .navlinks,html[lang^="de"] .navlinks, html[lang^="nl"] .navlinks,html[lang^="es"] .navlinks, html[lang^="el"] .navlinks,html[lang^="tr"] .navlinks, html[lang^="ja"] .navlinks{gap:18px} html[lang^="ro"] .navlinks a.nl,html[lang^="de"] .navlinks a.nl, html[lang^="nl"] .navlinks a.nl,html[lang^="es"] .navlinks a.nl, html[lang^="el"] .navlinks a.nl,html[lang^="tr"] .navlinks a.nl, html[lang^="ja"] .navlinks a.nl{font-size:.8rem} html[lang^="ro"] .nav-pill,html[lang^="ro"] .nav-pill-track, html[lang^="de"] .nav-pill,html[lang^="de"] .nav-pill-track, html[lang^="nl"] .nav-pill,html[lang^="nl"] .nav-pill-track, html[lang^="es"] .nav-pill,html[lang^="es"] .nav-pill-track, html[lang^="el"] .nav-pill,html[lang^="el"] .nav-pill-track, html[lang^="tr"] .nav-pill,html[lang^="tr"] .nav-pill-track, html[lang^="ja"] .nav-pill,html[lang^="ja"] .nav-pill-track{padding-inline:16px;font-size:.78rem} /* Greek and Turkish need one more notch. Measured against English = 53: el 69 · tr 69 · es 63 · ja 59 · nl 58 Turkish grew from 60 to 69 at native review — "Belgelerimiz" became "Lisanslar ve Belgeler" — which is the better wording, so the layout accommodates it rather than the other way round. (German went to 71 in review but that document is being re-checked; when it lands, add html[lang^="de"] to this rule.) */ html[lang^="el"] .navlinks,html[lang^="tr"] .navlinks{gap:15px} html[lang^="el"] .navlinks a.nl,html[lang^="tr"] .navlinks a.nl{font-size:.775rem} } /* German labels run longer than Romanian, so it needs the tighter gap a step earlier — "Angebot anfordern" against "Cerere ofertă". */ @media(min-width:1301px) and (max-width:1460px){ html[lang^="de"] .navlinks,html[lang^="nl"] .navlinks, html[lang^="es"] .navlinks,html[lang^="el"] .navlinks, html[lang^="tr"] .navlinks,html[lang^="ja"] .navlinks{gap:24px} } .navlinks a.nl{font-size:.85rem;font-weight:500;position:relative;padding:6px 0;transition:color .25s} .navlinks a.nl::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:1.5px;background:var(--red);transition:width .3s cubic-bezier(.2,.7,.2,1)} .navlinks a.nl:hover::after{width:100%} .nav-pill{display:flex;align-items:center;gap:9px;background:var(--red);color:#fff!important;padding:12px 22px; border-radius:100px;font-size:.82rem;font-weight:500;transition:transform .3s,background .3s,box-shadow .3s} .nav-pill:hover{background:var(--navy);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(13,21,53,.5)} .nav-pill .d{width:6px;height:6px;border-radius:50%;background:#fff} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px} /* Mobile top-bar action buttons (icon-only, next to the hamburger) */ .mobile-actions{display:none;align-items:center;gap:9px;margin-inline-start:auto;margin-inline-end:12px} .mact{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;text-decoration:none;transition:all .18s;flex-shrink:0} .mact svg{width:19px;height:19px} .mact-track{background:rgba(125,243,192,.14);border:1.5px solid var(--mint);color:#0b8f63} .mact-quote{background:var(--red);border:1.5px solid var(--red);color:#fff} .mact-track:active{background:var(--mint);color:var(--navy)} .mact-quote:active{background:var(--navy);border-color:var(--navy)} .burger span{width:24px;height:2px;background:var(--navy);transition:.3s} /* mobile menu panel */ .mnav{display:none;position:fixed;top:84px;inset-inline-start:0;inset-inline-end:0;z-index:99; background:rgba(10,16,44,.97);backdrop-filter:blur(20px); flex-direction:column;padding:12px 24px 26px; border-bottom:1px solid rgba(255,255,255,.12); transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .32s} header.menu-open .mnav{transform:translateY(0);opacity:1;pointer-events:auto} .mnl{display:block;padding:15px 4px;color:#fff;font-size:1.02rem;font-weight:500; border-bottom:1px solid rgba(255,255,255,.08)} .mnl:last-child{border-bottom:none} .mnl-cta{margin-top:14px;background:var(--red);border-radius:100px;text-align:center; padding:14px 22px;border-bottom:none} /* burger → X when open */ header.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} header.menu-open .burger span:nth-child(2){opacity:0} header.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* burger lines white over dark hero, navy when header floats or menu open */ header.menu-open{background:rgba(10,16,44,.97)} header.menu-open .burger span{background:#fff} header:not(.float) .navlinks a.nl{color:rgba(255,255,255,.86)} header:not(.float) .nav-pill{background:var(--red)} header:not(.float) .burger span{background:#fff} /* hero */ .hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;min-height:100vh;display:flex;align-items:center} .hero .aura{position:absolute;inset:0;overflow:hidden} .hero .aura::before,.hero .aura::after{content:"";position:absolute;border-radius:50%;filter:blur(100px)} .hero .aura::before{width:min(62vw,1150px);height:min(62vw,1150px);inset-inline-start:-14vw;top:-24vw;background:radial-gradient(circle,#1d2c72,transparent 68%);opacity:.7} .hero .aura::after{width:min(54vw,1000px);height:min(54vw,1000px);inset-inline-end:-16vw;bottom:-26vw;background:radial-gradient(circle,rgba(192,24,37,.6),transparent 66%);opacity:.6} /* sweeping sunset band echoing the deck */ .hero .horizon{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:42%; background:linear-gradient(180deg,transparent,rgba(224,34,51,.08) 40%,rgba(255,150,80,.06) 70%,transparent); mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent)} #globe{position:absolute;top:50%;inset-inline-end:-4%;transform:translateY(-50%); width:min(104vh,1000px);height:min(104vh,1000px);z-index:2;opacity:1; pointer-events:none; /* static CSS fallback glow if WebGL never initialises */ background:radial-gradient(circle at 50% 50%,rgba(45,63,158,.22),rgba(192,24,37,.08) 55%,transparent 68%)} @media(max-width:1100px){#globe{inset-inline-end:-16%;width:min(88vh,780px);height:min(88vh,780px);opacity:.85}} @media(max-width:760px){#globe{inset-inline-end:-34%;top:40%;width:130vw;height:130vw;opacity:.5}} .hero .mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:clamp(66px,4.4vw,104px) clamp(66px,4.4vw,104px);mask-image:radial-gradient(125% 90% at 50% 28%,#000 28%,transparent 76%);-webkit-mask-image:radial-gradient(125% 90% at 50% 28%,#000 28%,transparent 76%)} .hero .wrap{position:relative;z-index:3;padding:128px 32px 96px;width:100%} .h-tag{display:inline-flex;align-items:center;gap:11px;padding:8px 16px;border:1px solid rgba(255,255,255,.2);border-radius:100px; background:rgba(255,255,255,.04);backdrop-filter:blur(6px);margin-bottom:32px} /* Hero motto — a brand statement, not a section label. Red accent bar + heritage serif, set apart from the eyebrow chips used elsewhere. */ .h-motto{display:flex;align-items:center;gap:18px;margin-bottom:34px} .h-motto-bar{flex:none;width:3px;height:38px;background:var(--red);border-radius:2px} .h-motto-text{font-family:var(--serif);font-style:italic;font-weight:400; font-size:1.5rem;line-height:1.25;letter-spacing:.005em;color:rgba(255,255,255,.94)} .h-tag .pp{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(125,243,192,.7);animation:ring 2.6s infinite} @keyframes ring{0%{box-shadow:0 0 0 0 rgba(125,243,192,.6)}70%{box-shadow:0 0 0 9px rgba(125,243,192,0)}100%{box-shadow:0 0 0 0 rgba(125,243,192,0)}} .h-tag span{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)} h1.hh{font-weight:300;font-size:clamp(2.9rem,7.6vw,6.6rem);line-height:.95;letter-spacing:-.045em;max-width:15ch} h1.hh b{font-weight:700} h1.hh .accent{color:transparent;background:linear-gradient(110deg,#fff 0%,#ff9aa2 45%,var(--red-2) 100%);-webkit-background-clip:text;background-clip:text;font-weight:700} .hero p.lead{max-width:52ch;margin-top:30px;font-size:1.18rem;font-weight:300;color:rgba(255,255,255,.8);line-height:1.6} .hero .actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap;align-items:center} .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;font-size:.88rem;font-weight:500;cursor:pointer;border:none;transition:.3s} .btn .arr{transition:transform .3s}.btn:hover .arr{transform:translateX(4px)} .btn-pri{background:#fff;color:var(--navy)} .btn-pri:hover{background:var(--red);color:#fff;box-shadow:0 14px 34px -12px var(--glow);transform:translateY(-2px)} /* quote submit — muted until T&C accepted, then lights up red */ /* Continue is disabled until a service is chosen — the picker step has nothing to advance to yet. Matches the existing disabled submit styling. */ .btn-navy[disabled]{background:var(--mist-2);color:var(--muted);cursor:not-allowed;box-shadow:none} .btn-navy[disabled]:hover{transform:none} .btn-submit{background:var(--mist-2);color:var(--muted);cursor:not-allowed;pointer-events:auto} .btn-submit .arr{transition:transform .3s} .btn-submit.is-ready{background:var(--red);color:#fff;cursor:pointer;box-shadow:0 14px 34px -12px var(--glow)} .btn-submit.is-ready:hover{background:var(--red-2);transform:translateY(-2px)} .btn-submit.is-ready:hover .arr{transform:translateX(3px)} .qterms span{color:var(--ink)} .qterms a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px} .btn-gho{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)} .btn-gho:hover{border-color:#fff;background:rgba(255,255,255,.06)} .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--red);box-shadow:0 14px 34px -12px var(--glow);transform:translateY(-2px)} .h-foot{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,transparent,rgba(13,21,53,.6));padding:0;overflow:hidden} .h-foot .inner{display:flex;align-items:stretch} .h-foot .tagline{flex:none;display:flex;align-items:center;gap:14px;padding:18px 32px;border-inline-end:1px solid rgba(255,255,255,.12); font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;white-space:nowrap} .h-foot .tagline i{color:var(--red-2);font-style:normal} .h-foot .marq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 100%);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 100%)} .h-foot .row{display:flex;gap:42px;width:max-content;align-items:center;padding:18px 32px;animation:slide 36s linear infinite; font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)} .h-foot .row i{color:var(--red-2);font-style:normal} @keyframes slide{to{transform:translateX(-50%)}} /* section scaffold */ section{padding:128px 0;position:relative} .lab{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff; font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; padding:8px 16px;border-radius:100px;margin-bottom:26px;line-height:1} .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none} .lab-light{background:rgba(255,255,255,.12);color:#fff}.lab-light::before{background:var(--mint)} h2.sh{font-weight:300;font-size:clamp(2.1rem,5vw,3.8rem);line-height:1.0;letter-spacing:-.04em;max-width:20ch} h2.sh b{font-weight:700} .sub{color:var(--muted);max-width:48ch;font-size:1.06rem;font-weight:300;margin-top:20px} /* ribbon */ .ribbon{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ribbon .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0} .rb{padding:50px 34px;border-inline-end:1px solid var(--line)} .rb:last-child{border-inline-end:none} .rb .big{font-weight:300;font-size:clamp(2.4rem,4vw,3.5rem);letter-spacing:-.04em;line-height:1;color:var(--navy);display:flex;align-items:baseline;gap:2px} .rb .big i{font-style:normal;color:var(--red);font-size:.6em;font-weight:600} .rb .l{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:13px} /* about */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center} .about-copy .body p{color:var(--muted);font-weight:300;margin-top:18px;font-size:1.05rem} .about-copy .body p.lede{color:var(--ink);font-weight:400;font-size:1.22rem} .about-copy .body p b{color:var(--ink);font-weight:600} .orbit{position:relative;aspect-ratio:1;max-width:470px;margin-inline-start:auto;width:100%} .orbit .ring{position:absolute;inset:0;border:1px solid var(--line-2);border-radius:50%} .orbit .ring.r2{inset:22%} .orbit .core{position:absolute;inset:36%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -20px rgba(13,21,53,.35);border:1px solid var(--line)} .orbit .core img{width:60%;height:auto;display:block} .orbit .node{position:absolute;width:84px;height:84px;margin:-42px;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;box-shadow:0 14px 30px -16px rgba(13,21,53,.4);color:var(--red);text-align:center;padding:5px} .orbit .node svg{width:24px;height:24px} .orbit .node span{font-family:var(--label);font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);font-weight:600;line-height:1.3} .orbit .spin{position:absolute;inset:0;animation:spin 60s linear infinite} .orbit .spin.rev{animation-duration:48s;animation-direction:reverse} @keyframes spin{to{transform:rotate(360deg)}} .orbit .spin .node{animation:counter 60s linear infinite} .orbit .spin.rev .node{animation-duration:48s;animation-direction:reverse} @keyframes counter{to{transform:rotate(-360deg)}} /* network / map */ .net{background:var(--navy);color:#fff} .net .lab{background:rgba(255,255,255,.1);color:#fff}.net .lab::before{background:var(--mint)} .net h2.sh{color:#fff}.net .sub{color:rgba(255,255,255,.7)} /* A regional map fitted a narrow column. A world map does not: at 1.2fr of a 1280px container the place labels render around 7px and become unreadable. So the cards sit in a row and the map spans the full width beneath them. */ .net-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:60px} .loc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .loccard{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px 26px;background:rgba(255,255,255,.03);transition:.3s;cursor:pointer} .loccard:hover,.loccard.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)} .loccard .ch{display:flex;align-items:center;gap:12px} .loccard .flag{width:26px;height:18px;border-radius:3px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;display:flex} .loccard .flag i{flex:1} .loccard h4{font-weight:700;font-size:1.05rem;letter-spacing:.02em} .loccard .cities{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:rgba(255,255,255,.7);margin-top:12px;padding-inline-start:38px;line-height:1.9} .loccard .cities b{color:var(--mint);font-weight:500} .mapbox{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;background:#0c1332;align-self:center;width:100%;aspect-ratio:1240/437} /* World map. Country fills are presentation attributes on the SVG, not CSS, because main.js overwrites those attributes on card hover and a CSS rule would win against them. */ .wm-land{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.13);stroke-width:.7} .wm-lane path{fill:none;stroke:#38bdf8;stroke-width:1.4;opacity:.5;stroke-dasharray:6 7} .wm-dest circle{fill:#7df3c0;opacity:.9} .wm-destlab text{fill:rgba(255,255,255,.72);font-family:var(--head,Sora,sans-serif);font-size:12px;font-weight:600} .wm-gate circle{fill:#e8404e} .wm-gate .wm-halo{fill:none;stroke:#e8404e;stroke-width:1.5;opacity:.45} .wm-gatelab{fill:#fff;font-family:var(--head,Sora,sans-serif);font-size:13.5px;font-weight:700;letter-spacing:.01em} .cty{transition:fill .3s,stroke .3s} .wm-dest circle{fill:#7df3c0;opacity:.9} .mapbox svg{position:absolute;inset:0;width:100%;height:100%;display:block} /* journey timeline */ .jrny .lab{} .tl{margin-top:64px;position:relative;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin} .tl::-webkit-scrollbar{height:6px}.tl::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .tl-track{display:flex;gap:0;min-width:max-content;position:relative;padding-top:8px} .tl-track::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:54px;height:2px;background:linear-gradient(90deg,var(--red),var(--navy-3))} .ms{flex:none;width:230px;padding:0 22px 8px 0;position:relative} .ms .yr{font-weight:700;font-size:1.15rem;color:var(--red);letter-spacing:.02em} .ms .dot{width:14px;height:14px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 0 0 2px var(--navy);margin:14px 0 22px} .ms h4{font-weight:600;font-size:.92rem;letter-spacing:.01em;margin-bottom:8px;text-transform:uppercase;line-height:1.3} .ms p{font-size:.84rem;color:var(--muted);font-weight:300;line-height:1.5} .ms.hl .dot{background:var(--red);box-shadow:0 0 0 2px var(--red),0 0 0 6px rgba(192,24,37,.18)} /* rotrac */ .rotrac{background:var(--mist);position:relative} .rot-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center} .rot-copy .rtag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:18px} .rot-copy h2{font-weight:300;font-size:clamp(2.4rem,5.4vw,4rem);line-height:.96;letter-spacing:-.04em} .rot-copy h2 b{font-weight:800} .rot-copy .rsub{font-weight:700;color:var(--red);font-size:1.3rem;letter-spacing:-.01em;margin-top:6px} .rot-copy p{color:var(--muted);font-weight:300;font-size:1.05rem;margin-top:22px;max-width:46ch} .rot-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px;max-width:430px} .rstat{border-inline-start:2px solid var(--red);padding:6px 0 6px 18px} .rstat .b{font-weight:300;font-size:1.9rem;letter-spacing:-.03em;color:var(--navy);line-height:1} .rstat .b i{font-style:normal;color:var(--red);font-weight:600} .rstat .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px} .rot-vis{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .rcap{border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:#fff;transition:.3s} .rcap:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(13,21,53,.35);border-color:var(--line-2)} .rcap .ic{width:42px;height:42px;color:var(--red);margin-bottom:16px} .rcap h4{font-weight:600;font-size:.98rem;margin-bottom:7px} .rcap p{font-size:.84rem;color:var(--muted);font-weight:300} /* services list */ .svc-wrap{margin-top:60px;border-top:1px solid var(--line)} .srow{display:grid;grid-template-columns:60px 1.2fr 2fr 40px;gap:28px;align-items:center;padding:28px 8px;border-bottom:1px solid var(--line);position:relative;transition:padding .35s,background .35s;cursor:pointer} .srow::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:0;background:var(--navy);transition:width .35s cubic-bezier(.2,.7,.2,1);z-index:-1;border-radius:0 8px 8px 0} .srow:hover{padding-inline-start:28px;padding-inline-end:22px;color:#fff} .srow:hover::before{width:100%} .srow .sn{font-family:var(--mono);font-size:.72rem;color:var(--muted);transition:color .3s} .srow:hover .sn{color:var(--mint)} .srow .st{font-weight:600;font-size:1.22rem;letter-spacing:-.02em} .srow .sd{color:var(--muted);font-weight:300;font-size:.95rem;transition:color .3s} .srow:hover .sd{color:rgba(255,255,255,.78)} .srow .sa{justify-self:end;color:var(--red);opacity:0;transform:translateX(-8px);transition:.3s;font-size:1.1rem} .srow:hover .sa{opacity:1;transform:translateX(0);color:#fff} /* vessel agency feature band */ .vessel{background:var(--navy);color:#fff;border-radius:30px;padding:64px 56px;position:relative;overflow:hidden} .vessel::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(192,24,37,.5),transparent 65%);filter:blur(60px)} .vessel .vhead{position:relative;z-index:2;max-width:52ch;margin-bottom:46px} .vessel .lab{background:rgba(255,255,255,.12);color:#fff}.vessel .lab::before{background:var(--mint)} .vessel h2{color:#fff}.vessel h2 .accent{color:var(--red-2);-webkit-text-fill-color:var(--red-2);background:none;font-weight:700} .vessel .vsub{color:rgba(255,255,255,.74);font-weight:300;margin-top:18px;font-size:1.05rem} .vg{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .vcell{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:28px 26px;background:rgba(255,255,255,.03);transition:.3s} .vcell:hover{background:rgba(255,255,255,.08);transform:translateY(-4px);border-color:rgba(255,255,255,.3)} .vcell .vic{width:40px;height:40px;color:var(--mint);margin-bottom:18px} .vcell h4{font-weight:600;font-size:1.05rem;margin-bottom:14px} .vcell ul{list-style:none;display:flex;flex-direction:column;gap:8px} .vcell li{font-size:.86rem;color:rgba(255,255,255,.72);font-weight:300;padding-inline-start:16px;position:relative} .vcell li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--red-2)} /* triptych */ .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:58px} .tcard{background:var(--mist);border:1px solid var(--line);border-radius:22px;padding:38px 34px;transition:.35s;position:relative;overflow:hidden} .tcard::before{content:"";position:absolute;top:0;inset-inline-start:34px;inset-inline-end:34px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s} .tcard:hover{background:#fff;transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(13,21,53,.35)} .tcard:hover::before{transform:scaleX(1)} .tcard .tt{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)} .tcard h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.9rem;margin:14px 0;letter-spacing:-.01em;line-height:1.05} .tcard p{color:var(--muted);font-weight:300;font-size:1rem} /* why grid */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px} .wcell{padding:34px 30px;border-radius:20px;border:1px solid var(--line);transition:.35s} .wcell:hover{border-color:var(--line-2);background:var(--mist);transform:translateY(-5px)} .wcell .wic{width:48px;height:48px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px} .wcell .wic svg{width:22px;height:22px} .wcell h4{font-weight:700;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:10px} .wcell p{color:var(--muted);font-weight:300;font-size:.92rem} /* credentials */ .creds{padding:72px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mist)} .creds .cl{text-align:center;color:var(--muted);font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:32px} .marq2{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marq2 .t{display:flex;gap:14px;width:max-content;animation:slide 40s linear infinite} .creds:hover .marq2 .t{animation-play-state:paused} .chip{flex:none;background:#fff;border:1px solid var(--line);border-radius:100px;padding:13px 22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;display:flex;align-items:center;gap:9px;white-space:nowrap;color:var(--navy)} .chip .b{width:7px;height:7px;border-radius:50%;background:var(--red)} /* contact / cta */ .cta-card{background:var(--navy);color:#fff;border-radius:32px;padding:72px 60px;position:relative;overflow:hidden} .cta-card .aura2{position:absolute;inset:0} .cta-card .aura2::before{content:"";position:absolute;width:46%;height:160%;inset-inline-start:58%;top:-30%;background:radial-gradient(circle,rgba(192,24,37,.55),transparent 60%);filter:blur(60px)} .cta-card .aura2::after{content:"";position:absolute;width:40%;height:140%;inset-inline-start:-10%;bottom:-30%;background:radial-gradient(circle,rgba(29,44,114,.95),transparent 65%);filter:blur(50px)} .cta-top{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:50px} .cta-top h2{font-weight:300;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1.0} .cta-top h2 b{font-weight:800} .cta-top p{color:rgba(255,255,255,.74);font-weight:300;margin-top:14px;max-width:38ch} .offices{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .off{border-top:1px solid rgba(255,255,255,.16);padding-top:22px} .off .oh{display:flex;align-items:center;gap:11px;margin-bottom:18px} .off .flag{width:24px;height:16px;border-radius:3px;overflow:hidden;display:flex;box-shadow:0 1px 2px rgba(0,0,0,.4)} .off .flag i{flex:1} .off h4{font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase} .off .o{margin-bottom:16px} .off .on{font-weight:600;font-size:.86rem;color:#fff;margin-bottom:5px} .off .oa{font-size:.82rem;color:rgba(255,255,255,.66);font-weight:300;line-height:1.5} .off a{display:block;font-size:.82rem;color:var(--mint);margin-top:5px;transition:color .2s} .off a:hover{color:#fff} /* footer */ footer{background:var(--navy);color:#fff;padding:84px 0 36px;border-top:1px solid rgba(255,255,255,.1)} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px} .fbrand-col p{font-size:.9rem;color:rgba(255,255,255,.66);margin-bottom:11px;font-weight:300;line-height:1.65} .fcreds{color:var(--mint)!important;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;margin-top:14px!important} .fbrand{display:inline-block;background:#fff;border-radius:12px;padding:8px 14px;line-height:0;margin-bottom:22px} .fbrand img{height:52px;width:auto;display:block} /* connect */ .fsocial{margin-top:24px} .fsocial-h{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:12px} .fsocial-row{display:flex;gap:12px} .soc{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;transition:transform .25s,background .25s,color .25s} .soc svg{width:20px;height:20px;display:block} .soc:hover{background:#fff;color:var(--navy);transform:translateY(-3px)} .soc[aria-label*="LinkedIn"]:hover{background:#0a66c2;color:#fff} .soc[aria-label*="Facebook"]:hover{background:#1877f2;color:#fff} /* locations pill */ .floc{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px; padding:12px 20px;border:1px solid rgba(255,255,255,.28);border-radius:100px;color:#fff; font-size:.9rem;font-weight:500;transition:.25s;min-width:230px} .floc svg{width:18px;height:18px;flex:none;color:var(--mint);transition:transform .25s} .floc:hover{border-color:var(--mint);background:rgba(125,243,192,.08)} .floc:hover svg{transform:translateX(4px)} /* link columns */ .fcol-h{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none; color:var(--mint);font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; margin-bottom:22px;padding:0;cursor:default;font-weight:500} .fcol-h svg{width:16px;height:16px;display:none} /* chevron hidden on desktop */ .fcol-links{display:flex;flex-direction:column} .fcol-links a,.fcol-txt{font-size:.9rem;color:rgba(255,255,255,.66);margin-bottom:11px;font-weight:300;transition:color .2s} .fcol-links a:hover{color:#fff} .fcol-mint{color:var(--mint)!important} .fcol-mint:hover{color:#fff!important} /* bottom bar */ /* ANPC consumer-protection badges (RO legal requirement, Order 449/2022) */ /* placed top-right in the footer bottom bar, above the legal links, no top rule */ .fbot-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px} .anpc-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end} @media(max-width:760px){.fbot-right{align-items:flex-start}.anpc-row{justify-content:flex-start}.fbot-legal{justify-content:flex-start}} .anpc-badge{display:inline-flex;line-height:0;transition:opacity .2s,transform .2s} .anpc-badge:hover{opacity:.88;transform:translateY(-1px)} .anpc-badge img{display:block;width:230px;height:46px;max-width:100%} @media(max-width:520px){.anpc-badge img{width:210px;height:42px}} .fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:rgba(255,255,255,.5)} .fbot-legal{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end} .fbot a:hover{color:var(--mint)} .rev{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} /* ---- door-delivery tracking ------------------------------------------- Two dates on screen that mean different things: a carrier-reported arrival (fact) and an inland door date (estimate that moves). The estimate must never read with the same weight as the fact, or we recreate the confusion upstream. The asterisk and the footnote carry that distinction. */ /* Per-container tally. Sits under the container summary in the facts grid, on its own line. Same amber/small register as the door-delivery footnote: it qualifies the status above it rather than competing with it. `display: block` is what puts it on its own line inside the value cell — the grid row is a flex pair and the value is a single . */ .tally-note{display:block;margin-top:3px;font-size:.74rem;line-height:1.35; color:var(--amber,#f59e0b);font-family:var(--label,sans-serif); letter-spacing:.01em;font-weight:500} html[lang^="zh"] .tally-note,html[lang^="ja"] .tally-note{letter-spacing:0} /* The tally is English prose from the ERP; keep it LTR inside the RTL page so the comma-separated counts are not reordered. */ html[dir="rtl"] .tally-note{direction:ltr;unicode-bidi:isolate;text-align:right} .eta-est{color:var(--amber,#f59e0b);font-weight:600} .eta-note{margin-top:6px;font-size:.72rem;line-height:1.35;opacity:.72; font-family:var(--label,sans-serif);letter-spacing:.01em;max-width:34ch} html[lang^="zh"] .eta-note,html[lang^="ja"] .eta-note{letter-spacing:0} .rev.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}.rev{opacity:1;transform:none;transition:none}} @media(max-width:980px){ .navlinks{display:none}.burger{display:flex}.mnav{display:flex}.mobile-actions{display:flex} .about-grid,.net-grid,.rot-grid{grid-template-columns:1fr;gap:50px}.orbit{margin:0 auto} .loc{grid-template-columns:1fr} .wm-destlab text{font-size:15px}.wm-gatelab{font-size:16px} .vg,.tri,.why-grid,.offices{grid-template-columns:1fr} .ribbon .wrap{grid-template-columns:repeat(2,1fr)}.rb:nth-child(2){border-inline-end:none} .fgrid{grid-template-columns:1fr 1fr} .fbrand-col{grid-column:1/-1} .srow{grid-template-columns:40px 1fr;gap:14px}.srow .sd,.srow .sa{display:none} .h-foot .tagline{display:none} } @media(max-width:560px){ .wrap{padding:0 20px}section{padding:84px 0} .hero .wrap{padding:112px 20px 88px} .hero h1.hh{font-size:clamp(2.5rem,11.5vw,3.4rem)} .h-tag{max-width:100%;padding:8px 14px} .h-motto{gap:14px;margin-bottom:26px} .h-motto-bar{height:auto;align-self:stretch} .h-motto-text{font-size:1.15rem;line-height:1.3} .h-tag span{white-space:normal;letter-spacing:.12em;font-size:.58rem;line-height:1.7} .actions{flex-direction:column;align-items:stretch} .actions .btn{justify-content:center;text-align:center;padding:16px 24px} .brand img{height:48px} header.float .brand img{height:38px} .brand::before{top:-24px;inset-inline-start:-30px;width:230px;height:140px; background:radial-gradient(ellipse 190px 110px at 70px 55px, rgba(255,255,255,.95) 0%,rgba(255,255,255,.75) 28%,rgba(255,255,255,.3) 54%,rgba(255,255,255,0) 80%)} nav{height:80px;padding-top:8px}.mnav{top:80px} .vessel{padding:46px 26px}.cta-card{padding:48px 26px} .rot-vis{grid-template-columns:1fr}.rot-stats{grid-template-columns:1fr} .ribbon .wrap{grid-template-columns:1fr}.rb{border-inline-end:none} .fgrid{grid-template-columns:1fr;gap:0}.creds{padding:52px 0} .fbrand-col{margin-bottom:20px} .floc{width:100%} /* accordion: each column collapses */ .fcol{border-top:1px solid rgba(255,255,255,.12)} .fcol-h{cursor:pointer;padding:20px 0;margin-bottom:0;font-size:.9rem;letter-spacing:.05em;text-transform:none;color:#fff} .fcol-h svg{display:block;transition:transform .3s} .fcol-h[aria-expanded="true"] svg{transform:rotate(180deg)} .fcol-links{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0} .fcol-h[aria-expanded="true"] + .fcol-links{max-height:560px;padding:0 0 20px} .fcol-links a,.fcol-txt{padding:5px 0} } /* ============================================================ * * INNER PAGES (page.php) — matches the homepage design system * ============================================================ */ /* inner hero — compact navy band echoing the homepage hero */ .phero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:150px 0 76px} .phero .aura{position:absolute;inset:0;overflow:hidden} .phero .aura::before,.phero .aura::after{content:"";position:absolute;border-radius:50%;filter:blur(100px)} .phero .aura::before{width:44vw;height:44vw;inset-inline-start:-12vw;top:-20vw;background:radial-gradient(circle,#1d2c72,transparent 68%);opacity:.6} .phero .aura::after{width:38vw;height:38vw;inset-inline-end:-12vw;bottom:-24vw;background:radial-gradient(circle,rgba(192,24,37,.5),transparent 66%);opacity:.5} .phero .mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:66px 66px;mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 78%)} .phero .wrap{position:relative;z-index:3} .pcrumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:30px} .pcrumb a{color:rgba(255,255,255,.6);transition:color .2s}.pcrumb a:hover{color:var(--mint)} .pcrumb span{margin:0 8px;color:rgba(255,255,255,.3)} .pcrumb b{color:#fff;font-weight:500} .picon{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center;color:var(--mint);margin-bottom:26px} .picon svg{width:32px;height:32px} h1.ph{font-weight:300;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.04em;max-width:16ch} .plead{max-width:60ch;margin-top:24px;font-size:1.18rem;font-weight:300;color:rgba(255,255,255,.82);line-height:1.6} /* inner body */ .pbody{padding:96px 0 120px} .pgrid{display:grid;grid-template-columns:1.55fr .95fr;gap:64px;align-items:start} .pcopy p{color:var(--muted);font-weight:300;font-size:1.12rem;line-height:1.75;margin-bottom:22px} .pcopy p:first-child{color:var(--ink);font-size:1.24rem;font-weight:400} .pactions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap} .btn-gho-d{background:transparent;color:var(--navy);border:1px solid var(--line-2)} .btn-gho-d:hover{border-color:var(--navy);background:var(--mist)} /* sidebar cards */ .pside{display:flex;flex-direction:column;gap:20px;position:sticky;top:110px} .pcard{border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:var(--mist)} .pcard-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:20px} .pfeat{list-style:none;display:flex;flex-direction:column;gap:14px} .pfeat li{font-size:.96rem;color:var(--ink);font-weight:400;padding-inline-start:24px;position:relative;line-height:1.45} .pfeat li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(125,243,192,.2)} .pcard-cta{background:var(--navy);color:#fff;border-color:transparent} .pcard-cta .pcard-h{color:var(--mint)} .pcard-cta p{color:rgba(255,255,255,.72);font-weight:300;font-size:.96rem;margin-bottom:18px;line-height:1.55} .pcontact{display:block;font-family:var(--mono);font-size:.9rem;color:#fff;margin-top:10px;letter-spacing:.02em;transition:color .2s} .pcontact:hover{color:var(--mint)} /* other services */ /* ---- Service hero with integrated stats (right column) ---- */ .phero-grid{display:grid;grid-template-columns:1fr;gap:0} .phero-stats .phero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center} .phero-main{min-width:0} /* stats sit natively on the navy — 2x2, divided, no card */ .phero-stats-col{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px; padding-inline-start:52px;border-inline-start:1px solid rgba(255,255,255,.14);position:relative;z-index:2} .hstat{min-width:0} .hstat-n{font-family:var(--sans);font-weight:200;font-size:2.5rem;line-height:1;color:#fff; letter-spacing:-.03em;display:flex;align-items:baseline;gap:1px} .hstat-n i{font-style:normal;color:var(--red);font-weight:600;font-size:.58em;margin-inline-start:1px} .hstat-l{margin-top:10px;font-family:var(--label);font-size:.66rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.58);line-height:1.35} @media(max-width:960px){ .phero-stats .phero-grid{grid-template-columns:1fr;gap:44px} .phero-stats-col{padding-inline-start:0;border-inline-start:none;padding-top:36px; border-top:1px solid rgba(255,255,255,.14);gap:28px 30px} .hstat-n{font-size:2.2rem} } @media(max-width:480px){ .phero-stats-col{grid-template-columns:1fr 1fr;gap:24px 20px} .hstat-n{font-size:1.85rem} } .pother{margin-top:96px;padding-top:70px;border-top:1px solid var(--line)} .pother-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px} .poth{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px;border:1px solid var(--line);border-radius:14px; font-weight:500;font-size:1rem;transition:.3s;background:#fff} .poth i{color:var(--red);font-style:normal;transition:transform .3s} .poth:hover{border-color:var(--navy);background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(13,21,53,.4)} .poth:hover i{color:var(--mint);transform:translateX(4px)} .phero-404{padding:170px 0 120px;text-align:center} .phero-404 .picon{margin:0 auto 26px;color:var(--red-2)} .phero-404 h1.ph,.phero-404 .plead{margin-inline-start:auto;margin-inline-end:auto} .phero-404 .plead{max-width:44ch} @media(max-width:980px){ .pgrid{grid-template-columns:1fr;gap:44px} .pside{position:static} .pother-grid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .phero{padding:120px 0 56px} .pbody{padding:60px 0 80px} .pother-grid{grid-template-columns:1fr} } /* ============================================================ * * QUOTE WIZARD (quote.php) * ============================================================ */ .phero-quote{padding:150px 0 60px} .wrap-narrow{max-width:860px} .qsec{padding:0 0 110px;margin-top:-40px;position:relative;z-index:5} .qform{background:#fff;border:1px solid var(--line);border-radius:22px;padding:40px;box-shadow:0 40px 90px -50px rgba(13,21,53,.4)} /* progress */ .qprog{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px;gap:4px} .qstep-dot{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative;cursor:default} .qstep-dot .n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:.82rem;font-weight:500;background:var(--mist);color:var(--muted);border:1px solid var(--line);transition:.3s;z-index:2} .qstep-dot .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:.3s} .qstep-dot::after{content:"";position:absolute;top:17px;inset-inline-start:50%;width:100%;height:2px;background:var(--line);z-index:1} .qstep-dot:last-child::after{display:none} .qstep-dot.active .n{background:var(--navy);color:#fff;border-color:var(--navy)} .qstep-dot.active .l{color:var(--navy)} .qstep-dot.done .n{background:var(--mint);color:var(--navy);border-color:var(--mint);cursor:pointer} .qstep-dot.done .l{color:var(--ink)} .qstep-dot.done{cursor:pointer} /* panels */ .qpanel{display:none;animation:qfade .35s ease} .qpanel.active{display:block} @keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .qh{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px} .qsub{color:var(--muted);font-size:.98rem;margin-bottom:26px} /* service cards */ .qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px} .qcard{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border:1px solid var(--line); border-radius:14px;background:#fff;cursor:pointer;transition:.25s;text-align:start;font:inherit} .qcard svg{width:26px;height:26px;color:var(--red)} .qcard span{font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3} .qcard:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 16px 34px -22px rgba(13,21,53,.4)} .qcard.sel{border-color:var(--navy);background:var(--navy)} .qcard.sel svg{color:var(--mint)}.qcard.sel span{color:#fff} /* fields */ .qfield{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .qfield>span{font-size:.82rem;font-weight:600;color:var(--ink)} .qfield>span em{font-weight:400;color:var(--muted);font-style:normal} .qfield input,.qfield select,.qfield textarea{font:inherit;font-size:.96rem;padding:13px 15px;border:1px solid var(--line-2); border-radius:11px;background:var(--mist);color:var(--ink);transition:.2s;width:100%} .qfield input:focus,.qfield select:focus,.qfield textarea:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(13,21,53,.08)} .qfield textarea{resize:vertical;min-height:96px} .qgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .qgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .qerr{color:var(--red);font-size:.78rem;font-style:normal;font-weight:500} /* checkboxes */ .qchecks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px} .qcheck{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:.2s} .qcheck:hover{border-color:var(--navy);background:var(--mist)} .qcheck input{width:18px;height:18px;accent-color:var(--red);flex:none} .qcheck span{font-size:.94rem;color:var(--ink);font-weight:500} .qconsent{display:flex;align-items:center;gap:11px;margin:6px 0 4px;cursor:pointer} .qconsent input{width:18px;height:18px;accent-color:var(--red)} .qconsent span{font-size:.9rem;color:var(--muted)} /* nav row */ .qnav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;gap:12px} .qnav .btn:only-child{margin-inline-start:auto} /* trust + errors */ .qtrust{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--line); font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)} .qerr-global{background:#fdecee;border:1px solid #f5c2c7;color:#b02a37;padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:.92rem} /* success */ .qdone{background:#fff;border:1px solid var(--line);border-radius:22px;padding:64px 44px;text-align:center;box-shadow:0 40px 90px -50px rgba(13,21,53,.4)} .qtick{width:72px;height:72px;border-radius:50%;background:rgba(125,243,192,.18);color:#0a8f5b;display:flex;align-items:center;justify-content:center;margin:0 auto 24px} .qtick svg{width:34px;height:34px} .qdone h2{font-size:1.7rem;font-weight:500;letter-spacing:-.02em;margin-bottom:14px} .qdone p{color:var(--muted);max-width:48ch;margin:0 auto 30px;line-height:1.6} .qdone .qactions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} @media(max-width:680px){ .qform{padding:26px 20px} .qcards{grid-template-columns:1fr 1fr} .qgrid2,.qgrid3,.qchecks{grid-template-columns:1fr} .qstep-dot .l{display:none} .qprog{margin-bottom:30px} .qnav{flex-direction:column-reverse}.qnav .btn{width:100%;justify-content:center} .qh{font-size:1.3rem} } /* ---- quote wizard: config-driven additions ---- */ .qcards-2{grid-template-columns:1fr 1fr} .qcard-wide{flex-direction:column;align-items:flex-start;gap:6px;padding:22px} .qcard-k{font-weight:700;font-size:1.05rem;color:var(--ink)} .qcard-b{font-size:.85rem;color:var(--muted)} .qcard-wide.sel .qcard-k,.qcard-wide.sel .qcard-b{color:#fff} .qgrid-auto{display:grid;grid-template-columns:1fr 1fr;gap:16px} .qnote{background:var(--mist);border-inline-start:3px solid var(--mint);padding:11px 15px;border-radius:8px;font-size:.85rem;color:var(--muted);margin-bottom:18px} /* repeatable lines */ .qlines{display:flex;flex-direction:column;gap:16px;margin-bottom:6px} .qline{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--mist)} .qline-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)} .qline-del{background:none;border:none;color:var(--red);font:inherit;font-size:.72rem;cursor:pointer;text-decoration:underline} .qline-add{align-self:flex-start;background:none;border:1px dashed var(--line-2);color:var(--navy);font:inherit;font-size:.86rem;font-weight:500;padding:11px 18px;border-radius:10px;cursor:pointer;transition:.2s} .qline-add:hover{border-color:var(--navy);background:var(--mist)} /* toggle switch */ .qfield-tog{flex-direction:row;align-items:center;justify-content:space-between;gap:14px} .qtog{position:relative;display:inline-block;width:44px;height:24px;flex:none;cursor:pointer} .qtog input{opacity:0;width:0;height:0;position:absolute} .qtog-tr{position:absolute;inset:0;background:var(--line-2);border-radius:100px;transition:.25s} .qtog-tr::before{content:"";position:absolute;inset-inline-start:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.25s} .qtog input:checked + .qtog-tr{background:var(--mint)} .qtog input:checked + .qtog-tr::before{transform:translateX(20px)} /* DG block */ .qdg{margin-top:6px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:10px;background:#fff} .qdg-row{display:flex;align-items:center;gap:12px} .qdg-label{font-size:.86rem;font-weight:600;color:var(--ink)} .qdg-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} @media(max-width:680px){.qgrid-auto,.qdg-fields{grid-template-columns:1fr}.qcards-2{grid-template-columns:1fr}} /* ============================================================ * * LEGAL PAGES (legal.php) * ============================================================ */ .phero-legal{padding:150px 0 60px} .lg-sec{padding:70px 0 110px;background:var(--paper)} .lg-grid{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start} .lg-side{position:sticky;top:104px} .lg-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:28px} .lg-nav-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .lg-nav a{padding:10px 14px;border-radius:10px;font-size:.92rem;color:var(--muted);transition:.2s;border-inline-start:2px solid transparent} .lg-nav a:hover{background:var(--mist);color:var(--ink)} .lg-nav a.active{background:var(--mist);color:var(--navy);font-weight:600;border-inline-start-color:var(--red)} .lg-meta{font-size:.8rem;color:var(--muted);line-height:1.7;padding:14px 16px;background:var(--mist);border-radius:10px;margin-bottom:16px} .lg-meta b{color:var(--ink);font-weight:600} .lg-dl{display:flex;flex-direction:column;gap:8px} .lg-dl a{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--navy);font-weight:500;padding:11px 14px;border:1px solid var(--line);border-radius:10px;transition:.2s;line-height:1.3} .lg-dl a:hover{border-color:var(--navy);background:var(--mist)} .lg-dl svg{width:16px;height:16px;flex:none;color:var(--red)} .lg-body{max-width:760px} .lg-section{margin-bottom:38px;padding-bottom:34px;border-bottom:1px solid var(--line)} .lg-section:last-of-type{border-bottom:none} .lg-h{font-size:1.32rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px;scroll-margin-top:100px} .lg-subh{font-size:1rem;font-weight:600;color:var(--ink);margin:22px 0 10px} .lg-body p{color:var(--muted);line-height:1.75;margin-bottom:14px;font-size:.96rem} .lg-ul{list-style:none;margin:0 0 16px;padding:0} .lg-ul li{position:relative;padding-inline-start:22px;margin-bottom:10px;color:var(--muted);line-height:1.7;font-size:.95rem} .lg-ul li::before{content:"";position:absolute;inset-inline-start:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--red)} .lg-note{background:var(--mist);border-inline-start:3px solid var(--mint);padding:14px 18px;border-radius:8px;color:var(--ink);font-size:.92rem;line-height:1.65;margin:8px 0 16px} .lg-note-lg{border-inline-start-color:var(--red);margin:24px 0} .lg-links{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px} .lg-extlink{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;font-size:.94rem;padding:11px 16px;background:var(--mist);border-radius:10px;transition:.2s;width:fit-content} .lg-extlink:hover{background:var(--navy);color:#fff} .lg-foot{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .lg-foot p{font-size:.9rem} @media(max-width:900px){ .lg-grid{grid-template-columns:1fr;gap:34px} .lg-side{position:static} .lg-nav{flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:18px} .lg-nav-h{width:100%} .lg-nav a{border-inline-start:none;border:1px solid var(--line)} .lg-nav a.active{border-color:var(--navy)} } /* ---- footer social icons (circular, like "Connect") ---- */ .fsocial{margin-top:24px} .fsocial-h{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:12px} .fsocial-row{display:flex;gap:12px} .soc{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.08);color:#fff;transition:transform .25s,background .25s,color .25s} .soc svg{width:20px;height:20px;display:block} .soc:hover{background:#fff;color:var(--navy);transform:translateY(-3px)} /* brand-tint on hover per network */ .soc[aria-label*="LinkedIn"]:hover{background:#0a66c2;color:#fff} .soc[aria-label*="Facebook"]:hover{background:#1877f2;color:#fff} /* ---- typography refresh: label + serif roles ---- */ /* All former-mono labels now use Libre Franklin; give them weight so tiny uppercase text reads crisply (a proportional sans needs more weight than a monospace did), and slightly tighten the wide mono-era tracking. */ .lab,.h-tag span,.net .lab,.vessel .lab,.rb .l,.orbit .node span,.rot-copy .rtag, .rstat .l,.tcard .tt,.creds .cl,.fcreds,.fsocial-h,.fcol-h,.fbot,.pcrumb,.pcard-h, .qstep-dot .l,.qline-head,.lg-nav-h,.chip,.srow .sn{font-weight:600!important;letter-spacing:.13em!important} .loccard .cities,.pcontact,.qstep-dot,.srow .sn{font-weight:500!important;letter-spacing:.02em!important} /* Heritage serif for statement / tagline moments. */ .serif-line{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:.005em} .hero-serif{font-family:var(--serif);font-style:italic;font-weight:400} /* ---- Licenses & certificates page ---- */ .cred-body{padding:84px 0 110px;background:var(--mist)} .cred-note{max-width:70ch;color:var(--muted);font-weight:300;font-size:1.02rem;line-height:1.7; padding:16px 20px;background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--red);border-radius:10px;margin-bottom:56px} .cred-note a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px} .cred-group{margin-bottom:64px} .cred-gh{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--navy);padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:30px} .cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px} .cred-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px; display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s,border-color .25s} .cred-card:hover{box-shadow:0 22px 44px -26px rgba(13,21,53,.36);transform:translateY(-2px);border-color:var(--line-2)} .cred-mark{height:58px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:18px} .cred-mark img{max-height:52px;max-width:170px;width:auto;height:auto;object-fit:contain} .cred-mark.is-text span{font-family:var(--sans);font-size:1.32rem;font-weight:800;letter-spacing:-.02em;color:var(--navy); padding:9px 15px;border:2px solid var(--navy);border-radius:9px;line-height:1} .cred-name{font-family:var(--sans);font-size:1.12rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px} .cred-full{font-size:.84rem;color:var(--muted);font-weight:300;line-height:1.5;margin-bottom:12px} .cred-ref{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; font-weight:600;color:var(--red);background:rgba(192,24,37,.07);border:1px solid rgba(192,24,37,.18); padding:5px 11px;border-radius:999px;margin-bottom:14px} .cred-what{font-size:.94rem;color:var(--ink);font-weight:400;line-height:1.6;margin-bottom:16px} .cred-means{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line-2)} .cred-means-lab{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--navy);opacity:.62;margin-bottom:7px} .cred-means p{font-size:.92rem;color:var(--muted);font-weight:300;line-height:1.65} .cred-cta{background:var(--navy);color:#fff;border-radius:20px;padding:38px 40px;display:flex; align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:16px} .cred-cta h3{font-family:var(--sans);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-bottom:7px} .cred-cta p{color:rgba(255,255,255,.72);font-weight:300;font-size:1rem;line-height:1.6;max-width:56ch} @media(max-width:760px){ .cred-body{padding:60px 0 84px} .cred-grid{grid-template-columns:1fr;gap:18px} .cred-cta{padding:30px 26px;flex-direction:column;align-items:flex-start} } /* ---- Leadership / CEO statement (within About) ---- */ .leadership{margin-top:90px;display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center; padding-top:64px;border-top:1px solid var(--line)} .ld-photo{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--navy); box-shadow:0 40px 80px -40px rgba(13,21,53,.55)} .ld-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .ld-photo-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center; font-family:var(--sans);font-size:2.6rem;font-weight:800;letter-spacing:.04em;color:rgba(255,255,255,.9)} .ld-photo.ld-noimg{} .ld-photo.ld-noimg .ld-photo-fallback{display:flex} .ld-copy .lab{margin-bottom:22px} .ld-quote{margin:0;position:relative;padding-inline-start:26px} .ld-quote::before{content:'\201C';position:absolute;inset-inline-start:-6px;top:-18px;font-family:var(--serif); font-size:4.2rem;line-height:1;color:var(--red);opacity:.5} .ld-quote p{font-family:var(--serif);font-size:1.28rem;line-height:1.66;color:var(--ink); font-weight:400;margin-bottom:18px;font-style:italic} .ld-quote p:last-child{margin-bottom:0} .ld-sign{margin-top:26px;padding-inline-start:26px;display:flex;flex-direction:column;gap:2px} .ld-name{font-family:var(--sans);font-size:1.05rem;font-weight:700;color:var(--navy);letter-spacing:-.01em} .ld-role{font-family:var(--label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600} .ld-team-link{display:inline-flex;align-items:center;gap:7px;margin-top:22px;margin-inline-start:26px; font-family:var(--label);font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--red); text-decoration:none;transition:gap .25s} .ld-team-link:hover{gap:12px} .ld-team-link .arr{transition:transform .25s} @media(max-width:820px){ .leadership{grid-template-columns:1fr;gap:34px;margin-top:64px;padding-top:48px} .ld-photo{max-width:240px} .ld-quote p{font-size:1.14rem} } /* ---- Meet the Team page ---- */ .team-body{padding:84px 0 110px;background:var(--mist)} .team-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:52px} .tchip{cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:100px; padding:12px 22px;font-family:var(--label);font-size:.76rem;font-weight:600;letter-spacing:.06em; color:var(--navy);display:inline-flex;align-items:center;gap:9px;transition:all .22s;line-height:1} .tchip:hover{border-color:var(--line-2);transform:translateY(-1px)} .tchip.is-active{background:var(--navy);color:#fff;border-color:var(--navy); box-shadow:0 10px 26px -10px rgba(13,21,53,.45)} .tchip.is-active::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint); display:inline-block;margin-inline-end:2px} .team-group{margin-bottom:72px} .team-dept{margin-bottom:44px} .team-dept:last-child{margin-bottom:0} .team-dept-h{font-family:var(--label);font-size:.76rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--red);margin-bottom:26px;padding-bottom:12px; border-bottom:1px solid var(--line-2)} /* Leadership band — slightly elevated: larger photos, own accent */ .team-dept.is-lead{background:linear-gradient(180deg,rgba(13,21,53,.03),transparent); border-radius:20px;padding:34px 30px 30px;margin:-6px -30px 50px;border:1px solid var(--line-2)} .team-dept.is-lead .team-dept-h{color:var(--navy);border-bottom-color:var(--line)} .team-grid-lead{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:34px 26px} .team-grid-lead .team-photo{width:146px;height:146px;border-width:4px} .team-grid-lead .team-name{font-size:1.14rem} @media(max-width:640px){ .team-dept.is-lead{padding:24px 18px;margin:0 0 40px} .team-grid-lead{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} .team-grid-lead .team-photo{width:110px;height:110px} } /* ---- 'we're growing / join us' banner (per office) ---- */ .team-hiring{margin-top:44px} .team-hiring-in{background:var(--navy);border-radius:20px;padding:40px 44px; display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; position:relative;overflow:hidden} .team-hiring-in::before{content:'';position:absolute;inset-inline-end:-60px;top:-60px;width:240px;height:240px; border-radius:50%;background:radial-gradient(circle,rgba(125,243,192,.16),transparent 70%);pointer-events:none} .th-copy{max-width:640px;position:relative;z-index:1} .th-eyebrow{display:inline-block;font-family:var(--label);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--mint);font-weight:700;margin-bottom:12px} .th-copy h3{font-family:var(--sans);font-size:1.4rem;font-weight:700;letter-spacing:-.02em; color:#fff;margin-bottom:10px;line-height:1.25} .th-copy p{font-family:var(--sans);font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.72)} .th-cta{position:relative;z-index:1;flex-shrink:0;display:inline-flex;align-items:center;gap:9px; background:var(--red);color:#fff;text-decoration:none;font-family:var(--label);font-size:.82rem; font-weight:600;letter-spacing:.02em;padding:15px 26px;border-radius:100px;transition:all .25s} .th-cta:hover{background:var(--red-2);transform:translateY(-2px);box-shadow:0 16px 34px -14px var(--glow)} .th-cta .arr{transition:transform .25s} .th-cta:hover .arr{transform:translateX(3px)} @media(max-width:640px){ .team-hiring-in{padding:30px 26px;flex-direction:column;align-items:flex-start;gap:22px} .th-copy h3{font-size:1.2rem} .th-cta{width:100%;justify-content:center} } .team-group:last-child{margin-bottom:0} .team-gh{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; padding-bottom:18px;border-bottom:1px solid var(--line-2);margin-bottom:40px} .team-gh h2{font-family:var(--sans);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--navy)} .team-note{font-family:var(--label);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);font-weight:600} .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:30px 20px} .team-card{text-align:center;display:flex;flex-direction:column;align-items:center} .team-photo{width:116px;height:116px;border-radius:50%;overflow:hidden;background:var(--navy); display:flex;align-items:center;justify-content:center;margin-bottom:18px; box-shadow:0 20px 40px -22px rgba(13,21,53,.5);border:3px solid #fff;outline:1px solid var(--line)} .team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .team-photo.is-initials span{font-family:var(--sans);font-size:1.85rem;font-weight:700; color:rgba(255,255,255,.92);letter-spacing:.02em} .team-card:hover .team-photo{transform:translateY(-3px);transition:transform .28s} .team-name{font-family:var(--sans);font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:4px} .team-role{font-family:var(--label);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase; color:var(--red);font-weight:600;line-height:1.4} @media(max-width:760px){ .team-body{padding:60px 0 84px} .team-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:24px 14px} .team-photo{width:96px;height:96px} .team-photo.is-initials span{font-size:1.9rem} } /* ---- Essential-cookies notice ---- */ .ck-notice{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:1200; background:rgba(13,21,53,.97);backdrop-filter:blur(8px); border-top:1px solid rgba(125,243,192,.28); transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1)} .ck-notice.is-in{transform:translateY(0)} .ck-inner{max-width:1200px;margin:0 auto;padding:16px 32px; display:flex;align-items:center;gap:24px;justify-content:space-between;flex-wrap:wrap} .ck-text{margin:0;font-family:var(--sans);font-size:.82rem;line-height:1.5; color:rgba(255,255,255,.8);max-width:820px} .ck-text strong{color:#fff;font-weight:600} .ck-text a{color:var(--mint);text-decoration:underline;text-underline-offset:2px;font-weight:500} .ck-ok{flex-shrink:0;cursor:pointer;border:none;background:var(--mint);color:var(--navy); font-family:var(--label);font-size:.76rem;font-weight:700;letter-spacing:.04em; padding:12px 30px;border-radius:100px;transition:all .2s} .ck-ok:hover{background:#fff;transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(125,243,192,.5)} @media(max-width:640px){ .ck-inner{padding:16px 20px;gap:14px} .ck-text{font-size:.78rem} .ck-ok{width:100%;padding:14px 20px} } /* ============================================================ TRACKING PAGE (sea-only, Leaflet + status panel) append to assets/css/main.css ============================================================ */ .phero-track .plead{max-width:640px} .tsec{padding:40px 0 90px;background:var(--bg,#f5f6fb)} /* ---- Search card (stays on page) ---- */ .tsearch{background:#fff;border:1px solid var(--line,#e6e7ee);border-radius:20px;padding:22px 26px; box-shadow:0 24px 60px -44px rgba(13,21,53,.4);margin-bottom:22px} .tsearch-head{display:flex;align-items:center;gap:10px;color:var(--navy);font-family:var(--label,'Libre Franklin'); font-weight:700;font-size:.95rem;margin-bottom:16px} .tsearch-head svg{width:22px;height:22px;color:var(--red)} .tsearch-row{display:flex;gap:14px;align-items:flex-end} .tform{display:flex;flex-direction:column} .tfield{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0} .tfield > span{font-family:var(--label,'Libre Franklin');font-size:.6rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#98a0b8} .tfield input{width:100%;font-family:var(--mono,monospace);font-size:.92rem;color:var(--navy); padding:13px 15px;border:1px solid var(--line,#dcdee8);border-radius:12px;background:#fbfbfd; transition:border-color .15s,box-shadow .15s} .tfield input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(125,243,192,.25);background:#fff} .tbtn{display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:none;height:48px; background:var(--red);color:#fff;border-radius:12px;padding:0 26px;font-family:var(--label,'Libre Franklin'); font-weight:700;font-size:.88rem;transition:all .2s;white-space:nowrap;flex-shrink:0} .tbtn:hover{background:#a5121f;transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(192,24,37,.5)} .tbtn-arr{width:17px;height:17px} .tnote{margin:12px 0 0;font-family:var(--sans,'Sora');font-size:.76rem;line-height:1.5;color:#98a0b8} /* ---- Control tower ---- */ /* position+z-index give the tower its own stacking context, so Leaflet's internal layers (panes 400, tooltips 650, zoom control 800) and our map overlays (550) are contained inside it instead of competing with the fixed header (z-index 100) at the root. Without this the map paints over the header on scroll. Do not remove. */ .tower{position:relative;z-index:0; background:#fff;border:1px solid var(--line,#e6e7ee);border-radius:24px;overflow:hidden; box-shadow:0 44px 90px -55px rgba(13,21,53,.55)} /* Status strip */ .tstrip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:22px 30px; border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfcff,#fff)} .strip-status{display:flex;flex-direction:column;gap:9px} .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-weight:700;font-size:.76rem; letter-spacing:.03em;text-transform:uppercase;padding:7px 15px;border-radius:100px;width:max-content} .badge .dot{width:9px;height:9px;border-radius:50%} .strip-ref{font-family:var(--mono);font-size:.74rem;color:#6b7290;font-weight:500} .strip-route{display:flex;flex-direction:column;gap:9px;min-width:0} .sr-ports{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .sr-p{display:flex;align-items:center;gap:8px;font-family:var(--label);font-weight:700;font-size:1.12rem;color:var(--navy)} .sr-p.r{flex-direction:row-reverse} .sr-track{position:relative;height:22px;display:flex;align-items:center} .sr-line{position:absolute;inset-inline-start:0;inset-inline-end:0;height:3px;background:#e2e5ef;border-radius:3px} .sr-fill{position:absolute;inset-inline-start:0;height:3px;background:linear-gradient(90deg,var(--mint),#0284c7);border-radius:3px; transition:width 1.3s cubic-bezier(.4,0,.2,1)} .sr-node{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;border:2.5px solid #ccd2e0; transform:translateX(-50%);z-index:2} .sr-node.done{background:var(--mint);border-color:var(--mint)} .sr-ship{position:absolute;transform:translateX(-50%);z-index:3;width:30px;height:30px;background:var(--navy);color:#fff; border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -3px rgba(13,21,53,.55); border:2px solid #fff;transition:left 1.3s cubic-bezier(.4,0,.2,1)} .sr-ship svg{width:17px;height:17px} .strip-eta{text-align:end;padding-inline-start:28px;border-inline-start:1px solid var(--line)} .eta-k{font-family:var(--label);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#98a0b8} .eta-v{font-family:var(--sans);font-weight:700;font-size:1.65rem;color:var(--navy);line-height:1.1;margin:3px 0 5px;white-space:nowrap} .eta-sub{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap} .eta-countdown{font-family:var(--label);font-weight:600;font-size:.72rem;color:#6b7290} .eta-countdown b{color:var(--red);font-weight:800} /* Exception banner */ /* .texc sets display:flex, which overrides the [hidden] attribute — without this rule every shipment with no exception still painted an empty amber bar between the strip and the map. */ .texc[hidden]{display:none} .texc{display:flex;align-items:center;gap:11px;padding:12px 30px;background:#fef6ec;border-bottom:1px solid #f6e2c3; font-family:var(--sans);font-size:.84rem;line-height:1.5;color:#8a5a10} .texc svg{width:18px;height:18px;color:#d97706;flex-shrink:0} /* Dashboard: map hero + tabbed detail */ .tdash{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);height:520px} .tdash-map{position:relative;background:#eef0f5;min-width:0} .tmap{position:absolute;inset:0;width:100%;height:100%} .tmap-vtag{position:absolute;inset-inline-start:16px;top:16px;z-index:550;background:rgba(13,21,53,.92);color:#fff; border-radius:12px;padding:10px 14px;max-width:240px;box-shadow:0 8px 24px -10px rgba(13,21,53,.6)} .mvt-k{font-family:var(--label);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8891b4} .mvt-v{font-family:var(--sans);font-weight:600;font-size:.82rem;margin-top:2px} .tmap-legend{position:absolute;inset-inline-end:16px;bottom:16px;z-index:550;display:flex;gap:14px;background:rgba(255,255,255,.95); border:1px solid var(--line,#e2e5ee);border-radius:10px;padding:8px 13px;font-family:var(--label);font-size:.68rem; font-weight:600;color:#4a5070;box-shadow:0 4px 16px -6px rgba(13,21,53,.3)} .tmap-legend .lg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px;vertical-align:middle} .tev-ago{color:#9aa0b4;font-weight:500} /* ---- language switcher --------------------------------------------- Sits with the utility nav, BEFORE the two calls to action — wedged between "Track shipment" and "Get a quote" it split the CTA pair and read as a third button competing with them. A plain white glyph didn't say "this opens something", so: a mint globe (the accent already used for interactive elements), a caret, and a filled rest state. The caret is the part that actually signals a menu. */ .langsw{position:relative;display:flex;align-items:center;margin-inline-end:4px} .langsw-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); color:#fff;border-radius:100px;padding:8px 10px 8px 11px; font-family:var(--label,sans-serif);font-size:.72rem;font-weight:700;letter-spacing:.06em; transition:border-color .25s,background .25s} .langsw-btn:hover,.langsw-btn[aria-expanded="true"]{background:rgba(125,243,192,.13);border-color:rgba(125,243,192,.55)} .langsw-btn svg{width:15px;height:15px;flex:none;color:#7df3c0} .langsw-caret{width:12px!important;height:12px!important;opacity:.75;transition:transform .25s} .langsw-btn[aria-expanded="true"] .langsw-caret{transform:rotate(180deg)} .langsw-code{line-height:1} .langsw-menu{position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:60;margin:0;padding:6px;list-style:none; min-width:172px;background:#111a3d;border:1px solid rgba(255,255,255,.14);border-radius:12px; box-shadow:0 18px 44px -18px rgba(0,0,0,.7)} .langsw-menu[hidden]{display:none} .langsw-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 12px;border-radius:8px;color:rgba(255,255,255,.82);text-decoration:none; font-size:.86rem;font-weight:500;transition:background .2s,color .2s} .langsw-menu a:hover{background:rgba(255,255,255,.08);color:#fff} .langsw-menu a[aria-current="true"]{color:#7df3c0} .langsw-menu a[aria-current="true"]::after{content:"✓";opacity:.9} /* The pill switcher is desktop-only; below 980px the mobile menu carries its own language row instead (see .mnav-lang). Hiding this without that replacement left a ten-language site with no way to change language on a phone — which is where most of the traffic is. */ @media(max-width:980px){.langsw{display:none}} /* ---- network map: cross-border corridors ---- Hidden until a country card is clicked, then the lanes draw outward from the port using stroke-dashoffset so they read as movement rather than blinking on. The global routes dim while a region is zoomed, so the corridor being shown is the only thing competing for attention. */ .wm-cross{opacity:0;pointer-events:none;transition:opacity .3s ease} .wm-cross.is-on{opacity:1} /* non-scaling-stroke: the viewBox zoom would otherwise multiply the stroke width by the magnification and turn these lines into ribbons. With it the lanes stay the same visual weight zoomed in or out. */ .wmx-lane path{fill:none;stroke:#7df3c0;stroke-width:1.6; stroke-linecap:round;opacity:.9;vector-effect:non-scaling-stroke; stroke-dasharray:200;stroke-dashoffset:200} .wm-cross.is-on .wmx-lane path{animation:wmxDraw .75s ease forwards} @keyframes wmxDraw{to{stroke-dashoffset:0}} /* Endpoint dots only — no city labels. At this zoom a dozen place names crowd the region, collide with the existing continental labels and turn a clean gesture into a diagram. The lanes already say "we reach outward from this port", which is the point being made. */ .wmx-dot circle{fill:#7df3c0;opacity:0} .wm-cross.is-on .wmx-dot circle{animation:wmxPop .4s ease .45s forwards} @keyframes wmxPop{from{opacity:0}to{opacity:1}} /* Global routes, the gateway caption and the pin halos all step back while a region is in focus — at 3.2x they are drawn far larger than intended and would sit on top of the corridors. */ .wm-lane.is-dim,.wm-dest.is-dim,.wm-destlab.is-dim, .wm-gatelab.is-dim,.wm-halo.is-dim{opacity:.08;transition:opacity .45s ease} .wm-lane,.wm-dest,.wm-destlab,.wm-gatelab,.wm-halo{transition:opacity .5s ease} /* The cards are interactive now, so they must look and behave like it. */ .loccard{cursor:pointer} .loccard:focus-visible{outline:2px solid var(--mint,#7df3c0);outline-offset:3px} @media(prefers-reduced-motion:reduce){ .wmx-lane path{stroke-dashoffset:0;animation:none!important} .wm-cross.is-on .wmx-dot circle{animation:none!important;opacity:1} } /* ---- globe language picker in the mobile action bar ---- Native
/, so no JavaScript is involved. Sits beside the track and quote buttons, where someone looking to change language will actually look — rather than only inside the hamburger. */ .mlangsw{position:relative;display:none} .mlangsw > summary{list-style:none;cursor:pointer;gap:3px} .mlangsw > summary::-webkit-details-marker{display:none} .mlangsw > summary::marker{content:""} /* .mact supplies no colour of its own — each modifier does (.mact-track is mint, .mact-quote is red). This one had none, so it inherited the header text colour: dark navy, invisible against the dark hero, and only appearing once the header turned white on scroll. It now carries its own colours for BOTH header states. */ .mact-lang{flex-direction:column;gap:2px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.42); color:#fff} .mact-lang svg{width:17px;height:17px} .mact-lang-code{font-size:.58rem;font-weight:700;letter-spacing:.04em; line-height:1;font-family:var(--label,sans-serif)} /* Scrolled: the bar goes white, so the button flips to navy on tinted navy. */ header.float .mact-lang{background:rgba(13,21,53,.07); border-color:rgba(13,21,53,.28);color:var(--navy,#0d1535)} .mact-lang:active{background:#fff;border-color:#fff;color:var(--navy,#0d1535)} header.float .mact-lang:active{background:var(--navy,#0d1535); border-color:var(--navy,#0d1535);color:#fff} .mlangsw[open] > summary{background:rgba(255,255,255,.18)} .mlangsw-menu{position:absolute;inset-block-start:calc(100% + 8px); inset-inline-end:0;z-index:70;margin:0;padding:6px;list-style:none; min-width:172px;max-height:60vh;overflow-y:auto;border-radius:14px; background:#0d1535;border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 44px rgba(0,0,0,.45)} .mlangsw-menu a{display:block;padding:9px 12px;border-radius:9px; color:#fff;text-decoration:none;font-size:.9rem;white-space:nowrap} .mlangsw-menu a:hover,.mlangsw-menu a:focus-visible{background:rgba(255,255,255,.1)} .mlangsw-menu a[aria-current="true"]{background:#fff;color:#0d1535;font-weight:600} @media(max-width:980px){.mlangsw{display:block}} /* ---- language switcher inside the mobile menu ---- */ .mnav-lang{margin-top:18px;padding-top:18px; border-top:1px solid rgba(255,255,255,.14)} .mnav-lang-h{display:block;margin-bottom:10px;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;opacity:.6; font-family:var(--label,sans-serif)} html[lang^="zh"] .mnav-lang-h,html[lang^="ja"] .mnav-lang-h{ letter-spacing:0;text-transform:none} .mnav-lang-row{display:flex;flex-wrap:wrap;gap:8px} .mlang{display:inline-flex;align-items:center;padding:7px 13px; border-radius:100px;font-size:.86rem;line-height:1;text-decoration:none; color:#fff;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16)} .mlang:hover,.mlang:focus-visible{background:rgba(255,255,255,.14)} /* The current language is marked, not removed — a switcher that hides where you already are makes people wonder if they mis-tapped. */ .mlang.is-on{background:#fff;color:#0d1535;border-color:#fff;font-weight:600} .lg-vessel{background:#c01825}.lg-port{background:#22c55e}.lg-route{background:#38bdf8} /* line swatches — a dot can't show the difference between a route already covered and one still only planned, so the legend uses short rules */ .tmap-legend .lgl{display:inline-block;width:17px;height:0;border-top:2px solid #38bdf8; margin-inline-end:6px;vertical-align:middle} .tmap-legend .lgl-dash{border-top-style:dashed} .tdash-detail{display:flex;flex-direction:column;border-inline-start:1px solid var(--line);min-height:0;min-width:0} .tdash-empty[hidden]{display:none} .tdash-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; padding:40px;text-align:center;color:#98a0b8} .tdash-empty svg{width:40px;height:40px;color:var(--red);opacity:.85} .tdash-empty p{font-family:var(--sans);font-size:.88rem;line-height:1.55;max-width:260px} .ttabs{display:flex;padding:0 24px;border-bottom:1px solid var(--line);flex-shrink:0} .ttab{font-family:var(--label);font-weight:600;font-size:.82rem;color:#6b7290;background:none;border:none; padding:15px 2px;margin-inline-end:24px;cursor:pointer;position:relative;transition:color .15s} .ttab:hover{color:var(--navy)} .ttab.active{color:var(--navy)} .ttab.active::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:-1px;height:2.5px;background:var(--red);border-radius:2px} .ttab-body{padding:18px 24px 24px} #tstatus{flex:1;min-height:0;display:flex;flex-direction:column} #tstatus .ttab-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin} #tstatus .ttab-body::-webkit-scrollbar{width:6px}#tstatus .ttab-body::-webkit-scrollbar-thumb{background:rgba(13,21,53,.16);border-radius:3px} .tstatus-rows{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line,#eceef4); border:1px solid var(--line,#eceef4);border-radius:13px;overflow:hidden} .tstatus-row{display:flex;flex-direction:column;gap:3px;padding:11px 14px;background:#fff} .tstatus-row.tspan{grid-column:1 / -1} .tstatus-row span:first-child{color:#98a0b8;font-family:var(--label);font-size:.6rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase} .tstatus-row span:last-child{color:var(--navy);font-weight:600;font-size:.88rem;text-align:start;word-break:break-word} .tstatus-row .mono{font-family:var(--mono,monospace);font-size:.8rem} .tco2{display:inline-flex;align-items:center;gap:6px;color:#16a34a;font-weight:700} .tco2-leaf{width:15px;height:15px;flex-shrink:0} .tco2-est{font-family:var(--label,sans-serif);font-weight:700;font-size:.56rem;letter-spacing:.05em; text-transform:uppercase;color:#8a90a8;background:#eef0f5;padding:2px 6px;border-radius:100px;margin-inline-start:2px} .tco2-sub{display:block;margin-top:4px;font-family:var(--label,sans-serif);font-weight:600; font-size:.62rem;letter-spacing:.03em;color:#8a90a8} .tstatus-remarks{margin-top:14px;font-family:var(--sans);font-size:.83rem;line-height:1.55;color:#4a5070; background:#f7f8fc;border-inline-start:3px solid var(--mint);border-radius:0 10px 10px 0;padding:11px 15px} .tstatus-msg{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:#4a5070;padding:24px} .tstatus-msg a{color:var(--red);font-weight:600;text-decoration:none} .tstatus-msg a:hover{text-decoration:underline} .tev-list{display:flex;flex-direction:column} .tev-empty{font-family:var(--sans);font-size:.85rem;color:#98a0b8} .tev{display:flex;gap:13px;padding-bottom:16px;position:relative} .tev:not(:last-child)::before{content:"";position:absolute;inset-inline-start:5px;top:14px;bottom:0;width:2px;background:#e7e9f1} .tev--done:not(:last-child)::before{background:var(--mint)} .tev-dot{width:12px;height:12px;border-radius:50%;background:#d3d7e3;flex-shrink:0;margin-top:2px;position:relative;z-index:1} .tev--done .tev-dot{background:var(--mint)} .tev--here .tev-dot{background:var(--navy);box-shadow:0 0 0 4px rgba(13,21,53,.13)} .tev-desc{font-family:var(--sans);font-size:.86rem;color:var(--navy);font-weight:500} .tev--future .tev-desc{color:#98a0b8;font-weight:400} .tev-port{color:#8a90a8;font-weight:400} .tev-now{font-family:var(--label);font-size:.54rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--navy);background:var(--mint);padding:2px 7px;border-radius:100px;margin-inline-start:7px} .tflag{width:18px;height:13px;object-fit:cover;border-radius:2px;vertical-align:baseline;margin-inline-end:5px; box-shadow:0 0 0 1px rgba(13,21,53,.12)} .tev-date{font-family:var(--sans);font-size:.75rem;color:#98a0b8;margin-top:2px} .tmap-tip{background:rgba(13,21,53,.92)!important;border:1px solid rgba(255,255,255,.14)!important; color:#fff!important;font-family:var(--label,sans-serif)!important;font-size:11px!important; font-weight:700!important;padding:4px 9px!important;border-radius:7px!important; box-shadow:0 3px 10px rgba(0,0,0,.4)!important;white-space:nowrap!important} .tmap-tip::before{display:none!important} .tmap-tip--port{color:#bff3d6!important} .tmap-tip--vessel{background:rgba(192,24,37,.95)!important;border-color:rgba(255,255,255,.2)!important;color:#fff!important} /* ---- Pulsing "heartbeat" position marker (navy = sailing, distinct from every status colour so red only ever means the Unknown status) ---- */ .tvessel-pulse{position:relative} .tvessel-dot{position:absolute;top:50%;inset-inline-start:50%;width:12px;height:12px;margin:-6px 0 0 -6px; background:#c01825;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 5px rgba(0,0,0,.5);z-index:2} .tvessel-ring{position:absolute;top:50%;inset-inline-start:50%;width:12px;height:12px;margin:-6px 0 0 -6px; border-radius:50%;background:rgba(192,24,37,.5);z-index:1;animation:tvessel-beat 1.8s ease-out infinite} /* at a port: green docked marker (steady) */ .tvessel-port .tvessel-dot{background:#22c55e} .tvessel-port .tvessel-ring{background:rgba(34,197,94,.4)} @keyframes tvessel-beat{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(3.4);opacity:0} 100%{transform:scale(3.4);opacity:0} } @media(prefers-reduced-motion:reduce){.tvessel-ring{animation:none;opacity:0}} /* ---- Nav: tracking pill (outline, next to Get a quote) ---- */ .nav-pill-track{display:flex;align-items:center;gap:8px;background:rgba(125,243,192,.12);color:#fff!important;padding:12px 20px; border-radius:100px;border:1.5px solid var(--mint);font-family:var(--label,'Libre Franklin');font-weight:700; font-size:.86rem;text-decoration:none;transition:all .2s} .nav-pill-track svg{width:17px;height:17px;color:var(--mint)} .nav-pill-track:hover{background:var(--mint);color:var(--navy)!important;transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(125,243,192,.55)} .nav-pill-track:hover svg{color:var(--navy)} header.float .nav-pill-track{color:var(--navy)!important;background:rgba(125,243,192,.16);border-color:var(--mint)} header.float .nav-pill-track:hover{background:var(--mint);color:var(--navy)!important} @media(max-width:960px){ .tsearch-row{flex-direction:column;align-items:stretch} .tbtn{width:100%} .tstrip{grid-template-columns:1fr;gap:18px} .strip-eta{text-align:start;padding-inline-start:0;border-inline-start:none;border-top:1px solid var(--line);padding-top:16px} .eta-sub{justify-content:flex-start} .tdash{grid-template-columns:1fr;height:auto} .tdash-map{height:340px;order:1} .tdash-detail{border-inline-start:none;border-top:1px solid var(--line);order:2} #tstatus{max-height:460px} } @media(max-width:560px){ .tsec{padding:26px 0 56px} .strip{padding:18px 20px} .tstrip{padding:18px 20px} .eta-v{font-size:1.4rem} }