:root{--neon:0 0 1px #ffe2cc,0 0 5px #ff914c,0 0 12px #ff914c,0 0 24px #ff6a1a,0 0 44px #ff6a1a99;--font:Arial,'Helvetica Neue',Helvetica,'Segoe UI',Tahoma,sans-serif;--mono:Consolas,'Courier New',var(--mono);--navy:#061b2d;--orange:#ff914c;--cream:#f6f2eb;--cyan:#9edbdc;--muted:#9fabb4;--line:#ffffff24;color-scheme:dark;font-family:var(--font);background:var(--navy);color:var(--cream)}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button:disabled{cursor:wait;opacity:.5}button:hover{color:var(--orange)}.skip{position:fixed;z-index:100;top:-60px;background:var(--orange);color:var(--navy);padding:14px}.skip:focus{top:0}.masthead{height:106px;position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;background:linear-gradient(#031522ca,transparent);border-bottom:1px solid #ffffff17}.brand{display:flex;align-items:center;gap:8px;font:800 32px var(--font);letter-spacing:-1px}.brand-mark{height:55px;width:64px;position:relative;overflow:hidden;border-radius:3px}.brand-mark img{width:150px;max-width:none;position:absolute;left:-43px;top:-28px}.brand-sub{display:block;font:500 8px var(--font);letter-spacing:2px;margin-top:1px}.masthead nav{display:flex;align-items:center;gap:30px;font-size:13px}.nav-quote{border:1px solid #ffffff65;border-radius:3px;padding:13px 20px}.journey{height:500vh}.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--navy);isolation:isolate}.scene{position:absolute;width:max(100vw,177.6833svh);height:max(56.2800vw,100svh);left:50%;top:50%;margin:0;transform:translate(-50%,-50%);will-change:transform,opacity}.scene>img{width:100%;height:100%;display:block;object-fit:fill}.scene>video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .4s;pointer-events:none}.scene>video.ready{opacity:1}.ocean{transform-origin:26% 26%;z-index:-3}.bridge{opacity:0;z-index:-2;transform-origin:center}.cinema-shade{position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(0deg,#021321e8 0%,#03152469 24%,transparent 58%,#04142028 100%)}.study-label{position:absolute;top:129px;left:4.5vw;display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.6px;text-shadow:0 1px 5px #000}.orange-dot{height:5px;width:5px;background:var(--orange);border-radius:50%}.hero-copy{position:absolute;left:4.5vw;bottom:155px;max-width:510px;will-change:opacity,transform}.eyebrow{font-size:10px;font-weight:500;letter-spacing:2.5px;color:var(--orange);margin:0 0 16px}h1{font:500 clamp(48px,5.5vw,84px)/1.04 var(--font);letter-spacing:-4px;margin:0 0 17px;text-shadow:0 2px 35px #0315215c}.hero-description{font-size:13px;line-height:1.8;color:#dae0e3;margin:0 0 18px}.text-link{display:flex;align-items:center;gap:23px;padding:0;font-size:13px}.arrow-circle{border:1px solid #ffffff70;width:34px;height:34px;display:grid;place-items:center;border-radius:100%}.bridge-title{position:absolute;top:18%;width:100%;text-align:center;opacity:0;pointer-events:none;text-shadow:0 2px 18px #000}.bridge-title h2{font:500 clamp(24px,2.7vw,42px) var(--font);letter-spacing:-1px;margin:0 0 10px}.bridge-title p:last-child{font-size:12px;color:#eee}.bridge-title .eyebrow{margin-bottom:9px}.approach-label{position:absolute;left:50%;top:77%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:0;white-space:nowrap}.bottom-bar{position:absolute;bottom:50px;left:4.5vw;right:4.5vw;border-top:1px solid var(--line);padding-top:21px;display:flex;align-items:center;justify-content:space-between;gap:32px}.chapter-buttons{display:flex;align-items:center;gap:13px}.chapter-buttons button{display:flex;align-items:center;gap:9px;padding:0;color:#b9c5cc;font-size:11px;white-space:nowrap}.chapter-buttons button span{font-size:9px;color:#b7bec4}.chapter-buttons button b{font-weight:400}.chapter-buttons button.active,.chapter-buttons button.active span{color:var(--orange)}.chapter-line{height:1px;width:29px;background:#ffffff35}.journey-progress{display:flex;align-items:center;gap:13px;min-width:125px;width:21%;color:#9eaeb9;font-size:9px;font-variant-numeric:tabular-nums;direction:ltr}input[type=range]{width:100%;accent-color:var(--orange);height:2px;cursor:pointer}.plan-link{font-size:11px;white-space:nowrap}.motion-note{position:absolute;bottom:13px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:1.4px;color:#9aabb6;margin:0}.display{position:absolute;text-align:start;background:#03192ed9;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:1.1% 1.2%;color:#e2f3f7;border:1px solid #79cadd50;border-radius:2px;transition:background .2s,box-shadow .2s;overflow:hidden;opacity:var(--ui,1)}.display:hover{background:#082e46ed;color:white;box-shadow:0 0 25px #76d7ff4a}.display-left{left:17%;top:44.8%;width:19.5%;height:15.6%;transform:skewX(-7deg)}.display-center{left:39.5%;top:44.8%;width:20.6%;height:15.6%}.display-right{left:63.3%;top:44.8%;width:19.4%;height:15.6%;transform:skewX(7deg)}.display strong{font:600 clamp(13px,1.35vw,23px)/1.2 var(--font);letter-spacing:-.4px;margin:5% 0 3%}.screen-top{font:500 clamp(6px,.52vw,10px) var(--mono);letter-spacing:.7px;color:#9aadb9;display:flex;justify-content:space-between;align-items:center}.screen-top i{width:4px;height:4px;border-radius:50%;background:#8be4d3}.screen-small{font-size:clamp(7px,.65vw,12px);color:#99b4c6}.screen-action{font-size:clamp(7px,.56vw,11px);letter-spacing:1px;color:var(--orange);margin-top:7%;align-self:flex-start}.mini-route{height:24%;width:100%;margin:0}.mini-route path{stroke:#71c4ce;fill:none;stroke-width:1;stroke-dasharray:3 3}.mini-route circle{fill:var(--orange)}.demo-mini{color:var(--orange);font-size:8px}dialog{width:min(1060px,94vw);max-height:89svh;padding:0;border:1px solid #55718470;background:#061a2a;color:var(--cream);border-radius:8px;box-shadow:0 40px 120px #0009}dialog::backdrop{background:#020e19c9;backdrop-filter:blur(14px)}dialog[open]{animation:consoleIn .35s ease both}@keyframes consoleIn{from{opacity:0;transform:translateY(25px) scale(.95)}to{opacity:1;transform:none}}.console-header{padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;background:#071c2e;z-index:3}.console-brand{font:10px var(--mono);letter-spacing:1px;color:var(--orange)}#closeConsole{font-size:20px;line-height:24px;padding:4px 8px}#consoleBody{padding:30px 38px 38px}.panel-eyebrow{color:var(--orange);letter-spacing:2px;font-size:10px;margin:0 0 12px}.panel-title{font:500 clamp(27px,3vw,45px)/1.2 var(--font);letter-spacing:-1px;margin:0 0 14px}.panel-intro{font-size:14px;line-height:1.9;color:#b6c6cf;max-width:720px;margin:0 0 24px}.demo-banner{border:1px solid #ff914c50;background:#ff914c0b;padding:11px 15px;color:#e4bc9f;font-size:12px;line-height:1.7;margin-bottom:22px}.form-row{display:flex;align-items:end;gap:12px}.field{display:flex;flex-direction:column;gap:8px;flex:1;margin-bottom:18px;font-size:12px;color:#bacbd7}.field input,.field select,.field textarea{width:100%;border:1px solid #69829766;background:#0b253b;color:#f3f4f5;border-radius:3px;padding:13px;min-height:45px}.field textarea{resize:vertical;min-height:95px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--orange);border:1px solid var(--orange);border-radius:3px;color:#061b2d;font-size:12px;font-weight:700;padding:14px 20px;min-height:45px}.btn:hover{background:#ffae7c;color:var(--navy)}.btn.secondary{background:transparent;border-color:#708b9c78;color:#d6e3ea}.btn.secondary:hover{border-color:var(--orange);color:var(--orange)}.form-row>.btn{margin-bottom:18px}.notice{font-size:12px;line-height:1.7;color:#a9bfce}.error{color:#ffb99e;font-size:12px}.tracking-result[hidden]{display:none}.tracking-top{display:flex;align-items:start;justify-content:space-between;margin:24px 0 17px}.tracking-top h3{font:600 22px var(--font);margin:0 0 7px}.status-pill{padding:7px 11px;border:1px solid #73ced05c;border-radius:30px;font-size:10px;color:#8ee0dd}.route-map{border:1px solid var(--line);border-radius:5px;background:radial-gradient(ellipse at 40% 50%,#11374d,#071f32);overflow:hidden}.map-heading{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #ffffff12;font:9px var(--mono);color:#91b1c8;letter-spacing:1px}.route-map svg{width:100%;height:auto;display:block}.map-grid{stroke:#4c7c9428;stroke-width:1}.land{fill:#224759;stroke:#54768969;stroke-width:1}.route-path{fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7}.map-label{fill:#a9c7d8;font:12px sans-serif}.map-point{fill:#ffc093;stroke:#ff914c;stroke-width:2}.milestones{display:grid;grid-template-columns:repeat(5,1fr);margin-top:18px;gap:10px}.milestone{border-top:1px solid #71839350;padding-top:11px;color:#6f8c9f;font-size:11px;line-height:1.8}.milestone.done{border-color:var(--orange);color:#f0d1b9}.milestone strong{display:block;font-size:10px;font-weight:500;color:inherit}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}.service-item{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:30px 1fr;gap:8px}.service-index{font:10px var(--mono);color:var(--orange);padding-top:4px}.service-item h3{font:600 17px var(--font);margin:0 0 10px}.service-item p{font-size:12px;line-height:1.8;color:#9fb7c7;margin:0}.panel-footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;margin-top:25px;border-top:1px solid var(--line);padding-top:23px}.source-link{font-size:11px;color:#92b4cb;text-decoration:underline;text-underline-offset:4px}.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.quote-grid .full{grid-column:1/-1}.steps{counter-reset:steps}.step{display:grid;grid-template-columns:40px 1fr auto;gap:15px;padding:22px 0;border-top:1px solid var(--line)}.step-num{font:12px var(--mono);color:var(--orange)}.step h3{font-size:16px;margin:0 0 9px}.step p{font-size:12px;line-height:1.8;color:#9fb6c5;margin:0;max-width:660px}.step-status{font:9px var(--mono);letter-spacing:1px;color:#89d3ca;white-space:nowrap}.step-status.next{color:#9fabb4}.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.pill{padding:8px 12px;font:10px var(--mono);border:1px solid var(--line);border-radius:30px;color:#b3c4d1}.success{padding:20px;border:1px solid #88ccbb55;margin-top:16px;font-size:13px;line-height:1.8}.success p{margin-top:0}html[dir=rtl] .hero-copy{left:auto;right:4.5vw}html[dir=rtl] h1{letter-spacing:-2px;line-height:1.3;font-size:clamp(40px,4.5vw,68px)}html[dir=rtl] .brand{direction:ltr}html[dir=rtl] .scene{direction:ltr}html[dir=rtl] .display{direction:rtl}html[dir=rtl] .study-label{left:auto;right:4.5vw}html[dir=rtl] .chapter-buttons{direction:rtl}html[dir=rtl] .screen-top{direction:ltr}
@media(min-width:1800px){.display strong{font-size:25px}.screen-small{font-size:13px}.screen-action{font-size:12px}.screen-top{font-size:10px}}
@media(max-width:760px){.masthead{height:82px;padding:0 5vw}.brand{font-size:25px;gap:1px}.brand-mark{width:51px;transform:scale(.8);transform-origin:center}.brand-sub{font-size:6px;letter-spacing:1.2px}.masthead nav{gap:13px;font-size:11px}.masthead nav>button:first-child{display:none}.nav-quote{padding:9px}.study-label{top:101px;font-size:7px;letter-spacing:.7px}.hero-copy{bottom:174px;left:6vw;max-width:90vw}h1{font-size:56px;letter-spacing:-2.5px}.hero-description{font-size:12px}.eyebrow{font-size:9px}.bottom-bar{bottom:47px;left:6vw;right:6vw;gap:12px;flex-wrap:wrap;padding-top:17px}.chapter-buttons{width:100%;justify-content:space-between;gap:5px}.chapter-buttons button{font-size:10px}.chapter-line{width:15px}.journey-progress{width:55%;margin-top:6px}.plan-link{font-size:10px}.motion-note{font-size:6px;letter-spacing:.8px;bottom:17px}.bridge-title{top:21%}.bridge-title h2{font-size:23px;padding:0 20px;letter-spacing:-.5px}.bridge-title p:last-child{font-size:11px}.bridge-title .eyebrow{font-size:8px}.bridge .display{transform:none;top:44%;width:27%;height:13%;padding:1% 1.4%;background:#03192ef0}.display-left{left:8%}.display-center{left:36.5%}.display-right{left:65%}.display strong{font-size:17px}.screen-top{font-size:7px}.screen-small{font-size:9px}.screen-action{font-size:8px;letter-spacing:.5px}.demo-mini{font-size:7px}.bridge{width:max(100vw,115svh);height:max(56.28vw,64.7svh);top:49%}.bridge>img{object-fit:fill}.approach-label{top:70%;font-size:9px;letter-spacing:1px}dialog{width:95vw;max-height:92svh}.console-header{padding:14px 17px}#consoleBody{padding:24px 20px}.panel-title{font-size:29px}.panel-intro{font-size:12px}.form-row{flex-wrap:wrap;gap:0}.form-row .field{flex-basis:100%}.form-row .btn{width:100%}.milestones{grid-template-columns:repeat(3,1fr)}.milestone{font-size:10px}.service-grid{grid-template-columns:1fr}.quote-grid{grid-template-columns:1fr}.step{grid-template-columns:26px 1fr;gap:9px}.step-status{grid-column:2}.tracking-top h3{font-size:17px}.map-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}}
/* Revision 02: larger physical screens in the refined bridge keyframe. */
@media(min-width:761px){.display-left{left:12.8%;top:43.8%;width:23.5%;height:16.8%;transform:skewX(-6deg)}.display-center{left:38.4%;top:43.8%;width:23.4%;height:16.8%}.display-right{left:63.5%;top:43.8%;width:23.4%;height:16.8%;transform:skewX(6deg)}.display strong{font-size:clamp(15px,1.5vw,25px)}}
/* On narrow phones keep every console reachable rather than crop side screens. */
@media(max-width:760px){.bridge,.ocean{width:100vw;height:100svh;top:50%}.bridge>img,.ocean>img,.ocean>video{object-fit:cover}.bridge .display{top:57%;height:16%;width:28%;padding:12px 9px;border-color:#6dabc78c;border-radius:4px}.display-left{left:6%}.display-center{left:36%}.display-right{left:66%}.display strong{font-size:14px;line-height:1.4;letter-spacing:0}.screen-top{font-size:6px;letter-spacing:0}.screen-small{font-size:8px;line-height:1.6}.screen-action{font-size:7px;letter-spacing:0;line-height:1.6}.mini-route{margin:3px 0}.brand{flex-shrink:0}.masthead nav{gap:8px}.masthead nav>button:nth-child(2){display:none}html[dir=rtl] .bridge .display strong{font-size:13px}}
/* Revision 04: logo + language only, a large tagline before scrolling, and screens that carry their own page.
   Clicking a screen zooms the camera into the physical screen itself (no overlay box); ✕ inside it comes back. */
html.zoomed{overflow:hidden}
.masthead{height:136px;border-bottom:0;background:linear-gradient(#0315228c,transparent)}
.brand img{height:104px;width:auto;display:block;filter:drop-shadow(0 2px 12px #0009)}
.mast-right{display:flex;align-items:center}
#language{border:1px solid #ffffff65;border-radius:3px;padding:11px 18px;font-size:13px;background:#03152255}
.hero-tag{position:absolute;top:calc(16vh - 2.4vw);right:6vw;margin:0;white-space:nowrap;text-align:right;font:300 4.6vw/1.12 var(--font);letter-spacing:-.035em;padding-bottom:.09em;background:linear-gradient(180deg,#fff 26%,#93a9be 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 30px #051523b3);pointer-events:none;will-change:opacity,transform}
html[dir=rtl] .hero-tag{letter-spacing:0}
.scene>video#idle{transition:opacity .45s}
.bridge{transform-origin:50% 50%;will-change:auto}
.cinema-shade{transition:opacity .6s}html.zoomed .cinema-shade{opacity:0}
/* Desktop: app.js maps each screen exactly onto its glass in the photo (matrix3d), so the page sits in the glass
   itself: no border, no box, the photo's own bezel and cyan edge stay visible around it. */
.display,.display:hover,.radar{display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform-origin:0 0;overflow:hidden}
.screen-ui{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(#00305f,#00234c);color:var(--cream);text-align:start}
.screen-ui::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px #0007,inset 0 0 6px #000a}
.screen-hit{position:absolute;inset:0;z-index:2;padding:0;border:0;background:transparent;cursor:zoom-in;transition:background .2s,box-shadow .2s}
.screen-hit:hover{background:#7fd3e512;box-shadow:inset 0 0 30px #76d7ff40}
.active .screen-hit{display:none}
.ui-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 30px;border-bottom:1px solid #9edbdc1f;font:600 15px var(--mono);letter-spacing:1.6px;color:#ffa468;text-shadow:var(--neon)}
.ui-close{width:54px;height:54px;flex:none;display:grid;place-items:center;border:1px solid #ffffff55;border-radius:50%;font:300 28px/1 sans-serif;color:#eef6f8;background:#ffffff0d;visibility:hidden}
.ui-close:hover{border-color:var(--orange);color:var(--orange)}
.active .ui-close{visibility:visible}
.ui-body{flex:1;overflow:auto;padding:34px 44px 56px;overscroll-behavior:contain;scrollbar-color:#ff914c55 transparent}
.ui-body>.sv-title:first-of-type{font-size:60px;line-height:1.1}
.radar{position:absolute;top:47.6%;height:11.6%;width:7.8%;opacity:var(--ui,1)}
.radar .screen-ui{background:linear-gradient(#04160f,#020c09)}
.radar-left{left:0}.radar-right{right:0}
html[dir=rtl] .radar{direction:rtl}
.radar-tab{position:absolute;top:44.6%;font:700 13px var(--mono);letter-spacing:1.8px;color:#ffa468;white-space:nowrap;text-shadow:var(--neon);display:flex;align-items:center;gap:7px;padding:2px 0;opacity:var(--ui,1);transition:opacity .3s}
.radar-tab::before{content:'';width:6px;height:6px;border-radius:50%;background:#ffb27a;box-shadow:0 0 4px #ff914c,0 0 12px #ff914c,0 0 24px #ff6a1a;animation:ping 1.8s ease-in-out infinite}
@keyframes ping{50%{opacity:.25}}
.radar-tab-left{right:92.8%}.radar-tab-right{left:92.7%}
.bridge.docked .radar-tab{top:50%;padding:9px 12px;border:1px solid #ff914c99;border-radius:4px;background:#031522cc;box-shadow:0 0 14px #ff914c55,inset 0 0 10px #ff914c22}
html.zoomed .radar-tab{opacity:0;pointer-events:none}
.sv-eyebrow{font:12px var(--mono);letter-spacing:1.6px;color:var(--orange);margin:0 0 12px}
.sv-title{font:500 42px/1.2 var(--font);letter-spacing:-1px;margin:0 0 16px}
.sv-lead,.sv-p{font-size:15px;line-height:1.9;color:#b9cbd6;max-width:820px;margin:0 0 14px}
.sv-sub{margin:40px 0 18px;padding-top:26px;border-top:1px solid #ffffff1c}
.sv-sub h3{font:600 26px/1.3 var(--font);margin:0}
.sv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sv-card{border:1px solid #79cadd30;background:#06263f8c;border-radius:4px;padding:18px 18px 16px}
.sv-card h4{font:600 16px/1.4 var(--font);margin:6px 0 8px;color:#eef6f8}
.sv-card p,.sv-list li{font-size:13.5px;line-height:1.75;color:#a6bfcd;margin:0 0 6px}
a.sv-card:hover{border-color:var(--orange)}
.sv-idx{font:11px var(--mono);letter-spacing:1px;color:#8be4d3}
.sv-en{font:11px var(--mono);color:#7f9cad;margin-top:8px!important}
.sv-list{margin:6px 0;padding-inline-start:18px}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px}
.sv-chips span{padding:8px 13px;border:1px solid #ffffff24;border-radius:30px;font-size:13px;color:#d3e0e7}
.sv-note{font-size:13px;line-height:1.7;color:#9fb5c3;margin:12px 0 0}
.sv-group{font:600 16px var(--font);color:#eef6f8;margin:24px 0 8px}
.sv-faq details{border-top:1px solid #ffffff17;padding:13px 0}
.sv-faq summary{cursor:pointer;font-size:14.5px;color:#e2edf2}
.sv-faq details p{font-size:13.5px;line-height:1.8;color:#a6bfcd;margin:10px 0 0}
.sv-price{font:600 20px var(--font);color:#ffc093!important;margin:10px 0 2px!important}
.sv-big{font:600 36px var(--font);color:#ffc093!important;margin:10px 0 0!important}
.sv-meter{display:grid;grid-template-columns:96px 1fr 70px;align-items:center;gap:10px;font-size:13px;color:#c3d4dd;margin:9px 0}
.sv-meter i{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--orange) var(--w),#ffffff14 var(--w))}
.sv-meter b{font-weight:600;text-align:end}
.sv-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.sv-duo div{border:1px solid #ffffff1c;border-radius:4px;padding:12px}
.sv-duo b{display:block;font:600 22px var(--font);color:#ffc093}
.sv-duo span{font-size:12.5px;color:#a6bfcd}
.sv-stages{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:8px}
.sv-stages li{counter-increment:st;display:grid;grid-template-columns:36px 1fr;gap:4px 12px;border-inline-start:2px solid #ff914c66;padding:6px 0 6px 12px}
html[dir=rtl] .sv-stages li{padding:6px 12px 6px 0}
.sv-stages li::before{content:counter(st,decimal-leading-zero);grid-row:span 2;font:12px var(--mono);color:var(--orange);padding-top:3px}
.sv-stages b{font-size:15px;color:#eef6f8}.sv-stages span{font-size:13.5px;line-height:1.7;color:#a6bfcd}
.sv-form{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.sv-form .full{grid-column:1/-1}
.sv-field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;font-size:13px;color:#bacbd7}
.sv-field small{color:#7f9cad}
.sv-field input,.sv-field select,.sv-field textarea{width:100%;border:1px solid #69829766;background:#0b253b;color:#f3f4f5;border-radius:3px;padding:12px;min-height:46px}
.sv-field textarea{min-height:88px;resize:vertical}
.sv-foot{margin-top:28px;padding-top:20px;border-top:1px solid #ffffff1c}
.sv-success{margin-top:14px;padding:16px;border:1px solid #88ccbb55;font-size:14px}.sv-success p{margin-top:0}
.sv-error{margin-top:10px;color:#ffb99e;font-size:13px}
@media(max-width:760px){
 .masthead{height:92px}.brand img{height:70px}#language{padding:8px 11px;font-size:11px}
 .hero-tag{top:112px;right:6vw;max-width:84vw;font-size:40px;letter-spacing:-1px;background:linear-gradient(180deg,#fff 45%,#c2d3e2 100%);-webkit-background-clip:text;background-clip:text}
 .bridge .radar{top:75%;height:16%;width:28%;border-radius:4px}
 .radar-left{left:21%}.radar-right{right:21%}
 .radar-tab{display:none}
 .ui-top{padding:12px 16px;font-size:12px}.ui-body{padding:22px 20px 40px}.ui-body>.sv-title:first-of-type{font-size:40px}
 .sv-title{font-size:32px}.sv-form{grid-template-columns:1fr}.sv-cards{grid-template-columns:1fr}
}
/* Phones: the screens are cards, so the page is laid out at the zoomed size and scaled down by --k instead. */
@media(max-width:760px){.screen-ui{width:calc(100% * var(--k,4));height:calc(100% * var(--k,4));transform:scale(calc(1 / var(--k,4)));transform-origin:0 0}.bridge .display,.bridge .radar{border:1px solid #6dabc78c;border-radius:4px;transform-origin:center}.bridge .radar{border-color:#ff914c99;box-shadow:0 0 12px #ff914c44}.hero-tag{white-space:normal;text-align:right}}
/* While one screen is open, the others fade back into the photo's blank glass. */
.display,.radar{transition:opacity .4s}html.zoomed .display:not(.active),html.zoomed .radar:not(.active){opacity:0;pointer-events:none}
/* The bridge photo is the keyframe plus outpainted margins: size it so the keyframe part fills the scene exactly. */
@media(min-width:761px){#bridge>img{width:137.5%;max-width:none;margin-left:-18.66%}}
/* Shipping rates: neon button on the front windshield → clip into the orange container → shipping-mark labels on the cartons. */
.rates-btn{position:absolute;left:50%;top:27.5%;transform:translateX(-50%);z-index:3;padding:13px 28px;border:2px solid #ffa468;border-radius:4px;background:#140802b3;backdrop-filter:blur(3px);font:700 16px var(--mono);letter-spacing:3px;color:#ffb27a;text-shadow:var(--neon);box-shadow:0 0 6px #ff914c,0 0 18px #ff914caa,0 0 40px #ff6a1a66,inset 0 0 14px #ff914c55;opacity:var(--ui,1);animation:neon 2.6s ease-in-out infinite;white-space:nowrap}
.rates-btn:hover{color:#ffd2b0;background:#ff914c22}
@keyframes neon{50%{box-shadow:0 0 4px #ff914c,0 0 10px #ff914c88,0 0 22px #ff6a1a44,inset 0 0 8px #ff914c33}}
html.zoomed .rates-btn{opacity:0;pointer-events:none;transition:opacity .3s}
html.in-crate{overflow:hidden}
.crate-view{position:fixed;inset:0;z-index:15;background:#000;opacity:0;transition:opacity .35s}
.crate-view[hidden]{display:none}.crate-view.on{opacity:1}
#crateFilm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crate-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mark{position:absolute;left:0;top:0;width:420px;height:300px;transform-origin:0 0;display:flex;flex-direction:column;padding:14px 20px 12px;background:linear-gradient(170deg,#fbf6ea,#eadfc6);color:#161616;border:3px solid #161616;outline:6px solid #fbf6ea;box-shadow:0 10px 30px #0006,inset 0 0 26px #a07b4422;font-family:var(--mono);opacity:0;transition:opacity .6s;text-align:start}
.landed .mark{opacity:1}
.landed .mark:nth-child(2){transition-delay:.15s}.landed .mark:nth-child(3){transition-delay:.3s}.landed .mark:nth-child(4){transition-delay:.45s}
html[dir=rtl] .mark{direction:rtl}
.mark header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #161616;padding-bottom:6px;font-size:12px;letter-spacing:2px}
.mark header b{font:900 22px var(--font);letter-spacing:1px}
.mark-kind{margin:10px 0 0;font-size:13px;font-weight:700;letter-spacing:4px}
.mark h3{margin:2px 0 6px;font:700 22px/1.15 var(--font);text-transform:uppercase}
.mark-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px dashed #16161677;padding:6px 0}
.mark-row b{font:800 21px var(--font);white-space:nowrap}.mark-row span{font-size:12px;line-height:1.35;text-align:end}
.mark footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.mark-bars{width:150px;height:24px;background:repeating-linear-gradient(90deg,#161616 0 2px,transparent 2px 4px,#161616 4px 7px,transparent 7px 9px,#161616 9px 10px,transparent 10px 13px)}
.mark-icons{font-size:20px;letter-spacing:6px}
.crate-close{position:fixed;top:150px;right:4.5vw;z-index:16;width:56px;height:56px;border:2px solid #ff914c;border-radius:50%;font:300 26px/1 sans-serif;color:#ffa468;text-shadow:var(--neon);background:#1a0b0366;box-shadow:0 0 10px #ff914c,0 0 26px #ff914c88}
.crate-bar{position:absolute;left:0;right:0;bottom:4vh;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .5s .7s}
.landed .crate-bar{opacity:1;pointer-events:auto}
.crate-note{margin:0;font-size:12px;color:#c2d3e2;text-shadow:0 1px 6px #000;text-align:center;padding:0 16px}
.crate-quote{position:static;transform:none;animation:none}
@media(max-width:760px){.rates-btn{padding:10px 18px;font-size:12px;letter-spacing:2px}.crate-close{top:100px;right:5vw;width:46px;height:46px}}
/* Labels sized per carton face (JS sets width/height); once the clip lands the camera eases in so the rates read. */
.crate-stage{position:absolute;inset:0;transform-origin:50% 46%;transition:transform 1.8s cubic-bezier(.3,0,.2,1)}
.landed .crate-stage{transform:scale(1.14)}
.mark{padding:12px 18px 10px}
.mark-kind{margin:8px 0 0;font-size:12px;letter-spacing:2px}
.mark h3{margin:2px 0 4px;font-size:25px}
.mark-row{padding:5px 0}.mark-row b{font:800 40px/1.05 var(--font)}.mark-row span{font-size:14px}
.mark-eta{margin:4px 0 0;font-size:13px;font-weight:700}
.mark-brand{margin:auto 0 2px;font:900 66px/1 var(--font);letter-spacing:2px;text-align:center}
.mark-brand+.mark-kind{text-align:center;font-weight:700;margin-bottom:auto}
/* Phones: the labels become a readable list of paper cards over the darkened clip. */
.compact.landed .crate-stage{transform:none}
.compact #crateFilm{transition:filter .8s}.compact.landed #crateFilm{filter:brightness(.45)}
.compact .crate-labels{display:flex;flex-direction:column;align-items:center;gap:16px;overflow:auto;padding:160px 6vw 190px;pointer-events:none}
.compact.landed .crate-labels{pointer-events:auto}
.compact .mark{position:relative;flex:none;width:min(380px,88vw);height:auto;min-height:200px;transform:none}
.compact .mark-row b{font-size:32px}.compact .mark-brand{font-size:44px;margin:8px 0}
.compact .crate-bar{bottom:0;padding:44px 0 4vh;background:linear-gradient(transparent,#000d 45%)}
/* Revision 05: one layout at every window size. The bridge photo is always cover-sized with its screens on the real
   glass; when it is wider than the window the visitor pans sideways (drag, swipe, sideways scroll or the neon arrows). */
.masthead{pointer-events:none}.masthead a,.masthead button{pointer-events:auto}
#bridge{touch-action:pan-y;cursor:grab}#bridge.dragging{cursor:grabbing}#bridge.dragging .screen-hit{pointer-events:none}
html.zoomed #bridge{cursor:auto}
.pan-hint{position:absolute;top:50%;z-index:4;width:46px;height:64px;margin-top:-32px;border:2px solid #ffa468;border-radius:6px;background:#140802aa;font:300 40px/1 var(--font);color:#ffb27a;text-shadow:var(--neon);box-shadow:0 0 8px #ff914c,0 0 20px #ff914c66;opacity:var(--ui,1)}
.pan-hint[hidden]{display:none}.pan-left{left:14px}.pan-right{right:14px}
html.zoomed .pan-hint,html.in-crate .pan-hint{display:none}
@media(max-width:760px){
 .scene,.bridge,.ocean{width:max(100vw,177.6833svh);height:max(56.28vw,100svh);top:50%}
 .ocean>img,.ocean>video{object-fit:fill}
 .bridge .display,.bridge .radar{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform-origin:0 0}
 .screen-ui{width:100%;height:100%;transform:none}
 .radar-tab{display:flex;font-size:11px}
 .pan-hint{width:38px;height:54px;margin-top:-27px;font-size:32px}.pan-left{left:8px}.pan-right{right:8px}
}
#bridge>img{width:137.5%;max-width:none;margin-left:-18.66%;object-fit:fill}
html:not(.at-bridge) .pan-hint{display:none}
/* The chairs in front of the radars are cut out of the pages in app.js (CHAIRS), for the whole glass and for reading mode. */
.stage{overflow:clip} /* never scrolled sideways, not even by focusing a button that is off screen */
#bridge img{-webkit-user-drag:none;user-select:none}

/* ===== Revision 06: owner's button feedback =====
   The rates button sits higher in the sky and is lit by default (solid glowing orange, dark text); hovering turns it
   dark with neon text. The radar labels get a dark plate so they read clearly against the console. */
.rates-btn{top:20.5%;background:radial-gradient(ellipse at 50% 35%,#fff6ec 0%,#ffc796 38%,#ff8a3d 100%);color:#2a0f00;font-weight:800;text-shadow:0 1px 0 #fff3e680;border-color:#fff7ee;box-shadow:0 0 0 1px #fff7ee,0 0 14px 3px #ffe0c4,0 0 34px 10px #ff914cdd,0 0 80px 24px #ff6a1a88;animation:lit 2.6s ease-in-out infinite;transition:background .25s,color .25s,box-shadow .25s}
.rates-btn:hover,.rates-btn:focus-visible{background:#140802e6;color:#ffb27a;text-shadow:var(--neon);border-color:#ffa468;box-shadow:0 0 6px #ff914c,0 0 18px #ff914caa,inset 0 0 14px #ff914c55;animation:none}
@keyframes lit{50%{box-shadow:0 0 0 1px #fff7ee,0 0 10px 2px #ffe0c4,0 0 26px 6px #ff914cbb,0 0 56px 14px #ff6a1a66}}
.radar-tab{padding:7px 12px;border:1px solid #ff914c99;border-radius:4px;background:#030d16e6;box-shadow:0 0 12px #ff914c44,inset 0 0 10px #ff914c22}
.radar-tab:hover{background:#000000f2;border-color:#ffa468}
/* The container clip opens on the bridge exactly as it looks, so the view fades in over it with no black between. */
.crate-view{background:transparent}
.crate-view.back .crate-stage{transition-duration:.8s}
.crate-view.back .crate-close{opacity:0;pointer-events:none;transition:opacity .3s}

/* Container clip failed to load: dark backdrop instead of labels floating over the bridge */
.crate-view.novideo{background:#051523}.crate-view.novideo #crateFilm{display:none}

/* ===== Revision 07 (owner, 2026-11-02) =====
   1. Screens never vanish during a move: the other screens stay lit while one is open, and the screen you open keeps
      its page on the whole glass while the camera travels (app.js readingGlass pads the text instead of remapping).
   2. The rates button moves to the left windshield pane; the centre pane holds the see-through tracking portal. */
html.zoomed .display:not(.active),html.zoomed .radar:not(.active){opacity:var(--ui,1);pointer-events:none}
html.zoomed .radar-tab,html.zoomed .rates-btn,html.zoomed .pan-hint{transition:none}
.rates-btn{left:15.6%;top:22%}

/* The portal: a head-up display on the windshield glass. The sea and the sky stay visible through it. */
.display-portal .screen-ui{background:
  repeating-linear-gradient(0deg,#9edbdc0a 0 1px,transparent 1px 4px),
  linear-gradient(180deg,#0a3a6a4d 0%,#03182f8c 100%);
 box-shadow:inset 0 0 0 2px #9edbdc66,inset 0 0 0 6px #9edbdc14,inset 0 0 50px #4fb8ff2e}
.display-portal .screen-ui::after{box-shadow:inset 0 0 40px #0004}
.display-portal .screen-hit:hover{background:#7fd3e50d;box-shadow:inset 0 0 40px #76d7ff55}
.display-portal .ui-top{background:#00000033}
.display-portal .ui-body{text-shadow:0 1px 10px #000d,0 0 2px #000a}
.display-portal .sv-title{text-shadow:0 2px 20px #000,0 0 3px #000}
.display-portal .sv-lead{color:#d9e7ef}
.pt-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 16px;align-items:end;margin-top:22px}
.pt-form .sv-field{margin:0 0 12px;font-size:15px;color:#d7ecf4}
.pt-form input{min-height:62px;font-size:21px;background:#021426c4;border:1px solid #9edbdc77;color:#fff;letter-spacing:.5px}
.pt-form input:focus{outline:none;border-color:#ffa468;box-shadow:0 0 0 1px #ffa468,0 0 16px #ff914c66}
.pt-form .btn{min-height:62px;margin-bottom:12px;font-size:18px;border:2px solid #ffe2cc;box-shadow:0 0 8px #ff914c,0 0 22px #ff914c99}
.pt-form .btn:disabled{opacity:.5;cursor:wait}
.display-portal .sv-error{min-height:1em;font-size:15px}
.pt-switch{margin:6px 0 4px}
.pt-link{padding:0;font-size:16px;color:#8be4d3;text-decoration:underline;text-underline-offset:5px}
.pt-link:hover{color:#ffa468}
.pt-wa{color:#8be4d3;text-decoration:underline}
.pt-in-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}
.pt-in-head .sv-title{margin:0}
.pt-in-head .btn{flex:none}
/* The map is sized to fit the glass under the heading, so it is whole even before the screen is opened. */
.pt-map-wrap .sv-eyebrow{margin-bottom:8px}
.pt-map{position:relative;width:min(100%,calc((var(--gh,600px) - 230px) * 16 / 9));min-width:min(100%,520px);margin-inline:auto;border:1px solid #9edbdc66;border-radius:4px;box-shadow:0 0 0 4px #00000055,0 0 30px #4fb8ff33;direction:ltr}
.pt-map img{display:block;width:100%;height:auto;border-radius:3px}
.pt-pin{position:absolute;transform:translate(-50%,-50%);z-index:1}
.pt-pin b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffa468;color:#1a0800;font:800 16px var(--font);box-shadow:0 0 0 3px #fff7ee,0 0 14px #ff914c,0 0 30px #ff6a1a}
.pt-pin::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:2px solid #ffa468;animation:ptRipple 2.4s ease-out infinite}
@keyframes ptRipple{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.pt-tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border:1px solid #ffa468;border-radius:4px;background:#051523ee;color:#fff;font-size:14px;text-shadow:none}
html[dir=rtl] .pt-tip{direction:rtl}
#portalMapNote{text-align:center}
/* Shipment cards (track-render.js, the same renderer as tracking.html) in the portal's own look. */
.pt-cards{display:grid;gap:14px;margin-top:22px}
.pt-cards .track-card{border:1px solid #9edbdc44;border-radius:4px;background:#021426b3;padding:18px 20px}
.pt-cards .bracket{font-size:13px;color:#8be4d3}
.pt-cards .addr-big{margin:6px 0 10px;font:600 24px var(--font);color:#fff}
.pt-cards .segbar{display:flex;gap:6px;margin:0 0 12px}
.pt-cards .segbar span{flex:1;height:9px;border-radius:2px;background:#ffffff1c}
.pt-cards .segbar span.on{background:#ffa468;box-shadow:0 0 6px #ff914c,0 0 14px #ff914c88}
.pt-cards p{font-size:15px;line-height:1.7;color:#cfe0ea;margin:0 0 8px}
.pt-cards .note{font-size:13px;color:#9fb5c3}
.pt-cards .mini-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.pt-cards .mini-facts>div{display:flex;flex-direction:column;gap:4px;border:1px solid #ffffff1c;border-radius:4px;padding:10px}
.pt-cards .mini-facts strong{font:600 16px var(--mono);color:#ffc093;overflow-wrap:anywhere}
.pt-cards .tbl-wrap{overflow-x:auto}
.pt-cards .tbl{width:100%;border-collapse:collapse;font-size:14px}
.pt-cards .tbl th,.pt-cards .tbl td{padding:8px 10px;border-bottom:1px solid #ffffff1c;text-align:start}
.pt-cards .tbl th{color:#8be4d3;font-weight:600}
.pt-cards .track-map,.pt-cards .track-map-cap{display:none} /* the pins are on the big map above */
.pt-cards .page-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pt-cards .pill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #9edbdc66;border-radius:4px;color:#eef6f8}
.pt-cards .pill-accent{background:#ff914c;border-color:#ff914c;color:#061b2d;font-weight:700}
.rates-btn{transition:left .6s cubic-bezier(.3,0,.2,1),background .25s,color .25s,box-shadow .25s}
#bridge.dragging .rates-btn{transition:background .25s,color .25s,box-shadow .25s}
@media(max-width:760px){.rates-btn{left:50%;top:14.2%;padding:8px 16px;font-size:11px}}
/* Signed in: a compact heading line, then the map across the whole glass (the shipping band of the world map). */
.pt-in-head{margin-bottom:10px}.pt-in-head .sv-eyebrow{margin-bottom:4px}
.display-portal .pt-in-head .sv-title{font-size:34px;line-height:1.2}
.pt-map{width:100%;min-width:0;aspect-ratio:3.556;overflow:hidden}
.pt-map img{position:absolute;left:0;top:-50%;width:100%;height:200%;max-width:none}
.pt-map{width:min(100%,calc((var(--gh,600px) - 215px) * 3.556));margin-inline:auto}
.display-portal .ui-body{padding-top:22px}
#bridge.moving{will-change:transform}
.display-portal .btn.secondary{border:1px solid #9edbdc88;color:#e6f3f8;background:#02142699;min-height:48px;padding:0 22px}
.display-portal .btn.secondary:hover{border-color:#ffa468;color:#ffa468}
/* Owner: the windshield screen has no edges and no corners, only its colour. The tint fades out on all four sides
   (two masks intersected), and every frame line, inner border and top-bar rule is gone. */
.display-portal .screen-ui{
 background:radial-gradient(ellipse 75% 70% at 50% 50%,#0a3a6a73 0%,#06264a59 55%,#03182f26 100%);
 box-shadow:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
 mask-composite:intersect}
.display-portal .screen-ui::after{display:none}
.display-portal .ui-top{background:none;border-bottom:0}
.display-portal .screen-hit,.display-portal .screen-hit:hover{box-shadow:none}
.display-portal .screen-hit:hover{background:radial-gradient(ellipse 60% 60% at 50% 50%,#7fd3e514,transparent 75%)}
/* keep the text clear of the faded edges */
.display-portal .ui-top{padding-inline:9%}
.display-portal .ui-body{padding-inline:9%}
.pt-map-in{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.3,0,.2,1)}
.pt-map-in .pt-pin{transform:translate(-50%,-50%) scale(calc(1 / var(--z,1)))}
.display-portal .screen-ui[style*="padding-left"] .ui-top,.display-portal .screen-ui[style*="padding-left"] .ui-body{padding-inline:20px}
/* Owner: the rates button was too strong (solid yellow-orange). It is now glass like the windshield screen: a light
   orange tint you can see the sky through, a soft glow and neon text, so it still stands out without shouting. */
.rates-btn{background:linear-gradient(180deg,#ff914c38,#ff6a1a24);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
 border:1px solid #ffb27a99;color:#ffd9bd;font-weight:700;text-shadow:0 0 6px #ff914c,0 0 14px #ff6a1a99;
 box-shadow:0 0 10px #ff914c55,0 0 26px #ff6a1a33,inset 0 0 16px #ff914c33;animation:glassGlow 3s ease-in-out infinite}
.rates-btn:hover,.rates-btn:focus-visible{background:linear-gradient(180deg,#ff914c5c,#ff6a1a40);color:#fff;border-color:#ffd2b0;
 text-shadow:0 0 8px #ff914c,0 0 18px #ff6a1a;box-shadow:0 0 14px #ff914c88,0 0 34px #ff6a1a55,inset 0 0 18px #ff914c55;animation:none}
@keyframes glassGlow{50%{box-shadow:0 0 6px #ff914c33,0 0 16px #ff6a1a22,inset 0 0 10px #ff914c22}}
.crate-quote{background:linear-gradient(180deg,#ff914c38,#ff6a1a24)}
/* Owner: a bigger map, and only its background see-through (the pins and their labels stay solid). */
.display-portal .pt-in-head{margin-bottom:6px}
.display-portal .pt-in-head .sv-title{font-size:28px}
.display-portal .pt-in-head .btn.secondary{min-height:42px}
.pt-map{width:min(100%,calc((var(--gh,600px) - 150px) * 3.556));border:0;box-shadow:none;background:transparent}
.pt-map img{opacity:.55}
/* the image's edges fade into the glass; the mask is on the image only, so a pin near the edge stays solid */
.pt-map img{-webkit-mask-image:radial-gradient(ellipse 72% 40% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 40% at 50% 50%,#000 60%,transparent 100%)}
#portalMapNote{margin-top:6px}
/* Owner, round 2: the whole map at its full size (no zoom, no crop), and only a little see-through. */
.pt-map{aspect-ratio:16/9;width:min(100%,calc((var(--gh,600px) - 150px) * 16 / 9))}
.pt-map img{position:absolute;inset:0;top:0;width:100%;height:100%;opacity:.85;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 70%,transparent 100%)}
.pt-map-in{transform:none}
/* Owner, round 2: the rates button was too faint. Darker glass behind the text, a clearer border, still see-through. */
.rates-btn{background:linear-gradient(180deg,#2a0f02cc,#140802b3);border:1.5px solid #ffa468;color:#ffc69c;
 text-shadow:0 0 6px #ff914c,0 0 14px #ff6a1a99;box-shadow:0 0 10px #ff914c77,0 0 26px #ff6a1a44,inset 0 0 14px #ff914c40}
.rates-btn:hover,.rates-btn:focus-visible{background:linear-gradient(180deg,#3a1604e6,#1e0c03cc);color:#ffe2cc}
/* The name and Sign out sit in the top corners of the glass, so the whole map can use the full height under the top bar. */
.display-portal .ui-body{position:relative}
.display-portal .pt-in-head{position:absolute;top:14px;left:9%;right:9%;z-index:2;margin:0;pointer-events:none}
.display-portal .pt-in-head>*{pointer-events:auto}
.display-portal .pt-in-head .sv-title{font-size:24px}
.display-portal .pt-map-wrap{padding-top:58px}
.pt-map{width:min(100%,calc((var(--gh,600px) - 150px) * 16 / 9))}
/* reading mode (phones): the glass is tall and narrow, so the heading goes back above the map */
.display-portal .screen-ui[style*="padding-left"] .pt-in-head{position:static}
.display-portal .screen-ui[style*="padding-left"] .pt-map-wrap{padding-top:0}
.display-portal .ui-top{padding-block:10px}
.display-portal .ui-body{padding-top:10px}
.pt-map{width:min(100%,calc((var(--gh,600px) - 140px) * 16 / 9))}
.display-portal .pt-map-wrap{padding-top:0}
.pt-map{width:min(100%,calc((var(--gh,600px) - 96px) * 16 / 9))}
.display-portal .pt-in-head .sv-title{font-size:22px;max-width:30%}
/* Owner: the labels as big as the cartons and looking real: off-white paper with a faint grain, a soft contact
   shadow, slightly lifted corners, and a strip of clear tape across the top. */
.mark{background:
  radial-gradient(ellipse 140% 90% at 50% 40%,#fbf7ee 0%,#f1e8d6 70%,#e6dcc6 100%),
  repeating-linear-gradient(17deg,#0000 0 2px,#a07b440a 2px 3px);
 border:2px solid #1d1d1d;outline:0;border-radius:2px;
 box-shadow:0 1px 1px #0005,0 6px 14px -4px #0008,inset 0 0 30px #a07b4426,inset 0 -6px 10px -6px #a07b4455}
.mark::before{content:'';position:absolute;top:-14px;left:50%;width:34%;height:28px;transform:translateX(-50%) rotate(-1.2deg);
 background:linear-gradient(180deg,#ffffff55,#ffffff22 40%,#ffffff40);border-left:1px solid #ffffff55;border-right:1px solid #ffffff55;box-shadow:0 1px 2px #0002}
.mark::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff1a,transparent 30%,transparent 70%,#00000014)}
.compact .mark{box-shadow:0 8px 24px #0008}
/* Live copies of the windshield portal and the rates button that ride on the container clip (app.js buildGhost). */
.crate-ghost{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;pointer-events:none;overflow:hidden}
.ghost-plane{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.crate-ghost .display{opacity:1}
.crate-ghost .rates-btn{position:absolute;animation:none}
.landed .crate-ghost{opacity:0}
/* Nothing in the scene hides while a screen is open: the radar labels and the rates button stay, they just stop taking clicks. */
html.zoomed .radar-tab,html.zoomed .rates-btn{opacity:var(--ui,1);pointer-events:none}
/* The map pin is the tracking page's own pin (assets/img/track-pin.svg), its tip on the spot. */
.pt-pin{transform:translate(-50%,-100%)}
.pt-pin img{display:block;width:38px;height:52px;filter:drop-shadow(0 0 6px #ff914c) drop-shadow(0 2px 4px #000a)}
.pt-pin::before{inset:auto;left:50%;bottom:-10px;width:28px;height:28px;margin-left:-14px}
.pt-map-in .pt-pin{transform:translate(-50%,-100%)}
/* Pin card: hidden until the pin is hovered (or tapped/focused), like the tracking page. */
.pt-tip{display:flex;flex-direction:column;gap:4px;min-width:200px;padding:10px 12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;z-index:3;text-align:start}
.pt-pin:hover .pt-tip,.pt-pin:focus .pt-tip,.pt-pin.hover .pt-tip{opacity:1;visibility:visible}
.pt-tip-head{font-weight:700;color:#ffc093;margin-bottom:2px}
.pt-tip-row{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.pt-tip-row em{font-style:normal;color:#9fb5c3}
.pt-tip-row b{font-weight:600;color:#fff}
.pt-pin{cursor:pointer}
/* The card sits beside the pin (not above it) and may extend past the map's edge, so it is never cut off. */
.pt-map{overflow:visible}
.pt-tip{bottom:auto;top:-6px;left:calc(100% + 10px);transform:none;white-space:nowrap}
html[dir=rtl] .pt-tip{left:auto;right:calc(100% + 10px)}
.pt-pin.hover,.pt-pin:hover{z-index:4}
/* (the old numbered-circle rule `.pt-pin b` must not reach the card's values) */
.pt-tip-row b{display:inline;width:auto;height:auto;place-items:normal;background:none;box-shadow:none;border-radius:0;font:600 13px var(--font);color:#fff}
.pt-tip{top:50%;transform:translateY(-50%)}
/* The copies on the container clip are drawn once onto their own GPU layer and only moved after that, so their text is
   not redrawn (and re-snapped to pixels) every frame, which showed as a tremble. */
.ghost-plane{will-change:transform,opacity;backface-visibility:hidden}
.crate-ghost .display{will-change:transform}