/* Phone branch only. The desktop stylesheet and geometry are left intact.
   --mu is one design pixel at 393 CSS pixels; --mh is a stable viewport height. */
.sc-phone{--mu:1px;--mh:100svh;--m-light:#faf8f4;--m-dark:#111;--m-red:#c0392b;position:relative;isolation:isolate;color:#faf8f4;background:var(--m-light);width:100%}
.sc-phone *{box-sizing:border-box;min-width:0}
.sc-phone img{display:block;width:100%;height:auto;max-width:none}
.sc-phone svg{display:block;max-width:100%;overflow:visible}
.sc-phone .m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sc-phone .m-art{display:block;flex:none;max-width:100%;height:auto;color:inherit}
.sc-phone .m-intro{height:calc(var(--mh)*.65);padding:calc(36*var(--mu)) calc(16*var(--mu));display:flex;flex-direction:column;justify-content:center;color:#1e1e1e;gap:calc(24*var(--mu))}
.sc-phone .m-intro-logo{width:calc(100*var(--mu));margin-bottom:calc(25*var(--mu))}
.sc-phone .m-service{position:relative;z-index:2;contain:paint}
.sc-phone .m-grid{display:grid;grid-template-columns:0 repeat(4,minmax(0,1fr)) 0;column-gap:calc(16*var(--mu));align-content:start}
.sc-phone .m-first{grid-area:1/1/2/-1;position:relative}
.sc-phone .m-stick-wrap{background:var(--m-dark)}
.sc-phone .m-empty-first{height:var(--mh)}
.sc-phone .m-land{position:relative;width:100%;height:var(--mh);margin-bottom:calc(-2*var(--mh) - min(153*var(--mu),.214286*var(--mh)))}
.sc-phone .m-land-pos{position:relative;z-index:1}
.sc-phone .m-land-bg{position:absolute;z-index:2;bottom:calc(-10*var(--mu));left:0;width:100%;height:calc(var(--mh) + 10*var(--mu));background:var(--m-light)}
.sc-phone .m-label-stick{position:sticky;top:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-start;height:calc(3*var(--mh))}
.sc-phone .m-label{position:sticky;bottom:min(calc(100*var(--mu)),calc(.14*var(--mh)));height:min(calc(153*var(--mu)),calc(.214286*var(--mh)));width:max-content;margin-top:auto;padding:0 calc(16*var(--mu));color:#ffffff0f;clip-path:inset(170% 0 0 0)}
.sc-phone .m-label svg{height:100%;width:auto;max-width:none}
.sc-phone .m-sq-wrap{position:relative;z-index:2;grid-area:1/1/2/-1}
.sc-phone .m-sq-stick{position:sticky;top:0;height:var(--mh);display:flex;flex-direction:column}
.sc-phone .m-sq-inner{position:relative;width:100%}
.sc-phone .m-crane{position:relative;height:calc(344*var(--mu));aspect-ratio:1240/880;contain:paint;transform:translate(calc(-13*var(--mu)),calc(61*var(--mu)))}
.sc-phone .m-static,.sc-phone .m-frames{position:absolute;inset:0;width:100%;height:100%}
.sc-phone .m-static>img,.sc-phone .m-top img{width:100%;height:100%;object-fit:fill}
.sc-phone .m-car{z-index:1;clip-path:inset(0 0 17.8% 0);mix-blend-mode:multiply;filter:brightness(1.003938)}
.sc-phone .m-container{z-index:2;clip-path:inset(34.3% 62.5% 41.6% 23.1%);mix-blend-mode:multiply;filter:brightness(1.003938)}
.sc-phone .m-frames{z-index:1;opacity:0;transform-origin:0% 50%;pointer-events:none}
.sc-phone .m-top{z-index:3;opacity:0;pointer-events:none;transform-origin:0% 50%;transform:translate(-15%) scale(.95)}
.sc-phone .m-top-head{z-index:3}
.sc-phone .m-top-body,.sc-phone .m-top-container{z-index:2;transform-origin:30% 50%}
.sc-phone .m-stacks{position:absolute;bottom:0;left:calc(27*var(--mu));z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;transform-origin:0 100%;width:calc(142*var(--mu))}
.sc-phone .m-stacks.placeholder{opacity:0;pointer-events:none;bottom:calc(-10*var(--mu));overflow:hidden}
.sc-phone .m-stack{transform:scaleX(-1)}
.sc-phone .m-stack.white{opacity:0;pointer-events:none}
.sc-phone .m-sq-bg{position:absolute;z-index:3;top:100%;left:0;width:100%;height:calc(var(--mh) - 344*var(--mu));background:var(--m-dark)}
.sc-phone .m-second{grid-area:2/1/3/-1;position:relative;z-index:0;display:flex;flex-direction:column;gap:calc(96*var(--mu));background:var(--m-dark);padding:0 calc(16*var(--mu)) calc(.7*var(--mh)) calc((100% - 80*var(--mu))/4 + 32*var(--mu))}
.sc-phone .m-services-intro h2{margin:0 0 calc(36*var(--mu));display:flex;flex-direction:column;gap:calc(8*var(--mu));font:inherit}
.sc-phone .m-body{color:#b7b0a9;max-width:calc(250*var(--mu))}
.sc-phone .m-desc{margin-bottom:calc(40*var(--mu))}
.sc-phone .m-cards{display:flex;flex-direction:column;gap:calc(32*var(--mu))}
.sc-phone .m-card{position:relative;padding-bottom:calc(32*var(--mu));border-bottom:1px solid #ffffff14}
.sc-phone .m-icon{width:calc(40*var(--mu));height:calc(40*var(--mu));margin-bottom:calc(28*var(--mu));color:#faf8f4}
.sc-phone .m-card-label{color:var(--m-red);margin-bottom:calc(16*var(--mu))}
.sc-phone .m-card-title{margin:0 0 calc(14*var(--mu));font:inherit}
.sc-phone .m-route-title{display:flex;flex-direction:column;gap:calc(3*var(--mu));margin:0 0 calc(36*var(--mu));font:inherit}
.sc-phone .m-truck-wrap{grid-area:1/2/4/-2;position:relative;z-index:1;margin-top:calc(-1*var(--mh));pointer-events:none}
.sc-phone .m-truck-stick{position:sticky;top:0;left:0;display:grid;grid-template-columns:minmax(0,1fr);height:calc(321*var(--mu));aspect-ratio:76/321;margin-bottom:calc(-1*var(--mh));transform-origin:50% 50%}
.sc-phone .m-truck-head,.sc-phone .m-truck-body{grid-area:1/1;width:100%;height:100%}
.sc-phone .m-truck-head img,.sc-phone .m-truck-body img{width:100%;height:100%;object-fit:fill}
.sc-phone .m-truck-body{opacity:0}
.sc-phone .m-road{position:absolute;inset:0 calc(-20*var(--mu)) calc(-1*var(--mh));display:flex;justify-content:space-between;opacity:0;pointer-events:none}
.sc-phone .m-road-line{height:100%;width:calc(4*var(--mu));opacity:.7;background-size:100%;background-position:0 0;background-repeat:repeat-y}
/* Sea branch is the portrait image + additive wave video used by the phone reference. */
.sc-phone .m-marine{position:relative;z-index:1;margin-top:calc(-1*var(--mh));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;color:#faf8f4}
.sc-phone .m-sea-wrap{position:relative;z-index:1;grid-area:1/1/3/2}
.sc-phone .m-sea-stage{position:sticky;top:0;height:var(--mh);display:grid;grid-template-columns:minmax(0,1fr);contain:paint;overflow:hidden;background:#062f50}
.sc-phone .m-ocean,.sc-phone .m-ship,.sc-phone .m-overlay{grid-area:1/1/2/2;height:100%;width:100%;position:relative;min-height:0}
.sc-phone .m-ocean{z-index:1;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;align-items:center}
.sc-phone .m-ocean-image{grid-area:1/1;width:100%;height:100%;overflow:hidden;position:relative;z-index:2}
.sc-phone .m-ocean-image img{width:100%;height:100%;object-fit:cover}
.sc-phone .m-wave{position:absolute;left:-133%;width:calc(1400*var(--mu));aspect-ratio:9/16;z-index:2;display:flex;align-items:center;justify-content:center;mix-blend-mode:plus-lighter;pointer-events:none}
.sc-phone .m-wave-inner{width:100%;height:100%;position:relative;flex:none;overflow:hidden}
.sc-phone .m-wave video,.sc-phone .m-wave img{display:block;width:100%;height:100%;object-fit:cover}
.sc-phone .m-ship{z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.sc-phone .m-ship-image{position:absolute;width:var(--ship-width);display:flex;align-items:center;justify-content:center;transform-origin:50% 50%}
.sc-phone .m-ship-inner{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.sc-phone .m-ship-inner.bot{position:absolute;bottom:100%}
.sc-phone .m-overlay{position:relative;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(#0000,#0000008c)}
.sc-phone .m-sea-reserve{height:calc(4*var(--mh));grid-area:1/1/2/2}
.sc-phone .m-promises{position:relative;grid-area:2/1/3/2;margin-top:calc(-1*var(--mh));padding:0 calc(16*var(--mu)) calc(.7*var(--mh));z-index:2;overflow:hidden;pointer-events:none}
.sc-phone .m-ocean-heading{display:flex;align-items:center;justify-content:center;margin:0 0 calc(120*var(--mu));font:inherit;text-align:center}
.sc-phone .m-promise-list{display:flex;flex-direction:column;gap:calc(64*var(--mu));align-items:center}
.sc-phone .m-promise{display:flex;flex-direction:column;align-items:center;max-width:100%;text-align:center}
.sc-phone .m-promise .m-icon{width:calc(64*var(--mu));height:calc(64*var(--mu));margin-bottom:calc(24*var(--mu))}
.sc-phone .m-promise-title{margin:0 0 calc(12*var(--mu));font:inherit;max-width:calc(200*var(--mu))}
.sc-phone .m-promise-desc{color:#d1dce6;max-width:calc(256*var(--mu))}
.sc-phone .m-tail{height:var(--mh);position:relative;background:var(--m-light)}
.sc-phone .m-loading{position:absolute;z-index:10;top:calc(var(--mh)*.48);left:0;right:0;text-align:center;font:12px/1.7 monospace;color:#6b6560;padding:24px}
.sc-phone .m-loading[hidden]{display:none}
.sc-phone.is-static .m-service,.sc-phone.is-static .m-marine,.sc-phone.is-static .m-tail{display:none}
.sc-phone .m-static-accessible{display:none}
.sc-phone.is-static .m-static-accessible{display:block;padding:32px 24px;background:#111;color:#faf8f4;font:15px/1.7 Arial,sans-serif}
.sc-phone.is-static .m-static-accessible article{border-top:1px solid #fff2;padding:24px 0}
.sc-phone.is-static .m-static-accessible h3{font-size:25px;font-weight:400;white-space:pre-line}
.sc-phone.is-static .m-static-accessible p{color:#b7b0a9}
.sc-phone .m-wave-autoplay-note{display:none}
/* The invisible white cell occupies the upper-right slot of the stack. */
.sc-phone .m-stack.white{grid-area:1/2/2/3}
.sc-phone .m-stack.orange{grid-area:2/2/3/3}
.sc-phone .m-stack.blue{grid-area:2/1/3/2}
/* The source's last empty viewport is consumed by its next overlapping section.
   An independent section releases directly to the host page instead. */
.sc-phone .m-tail{display:none;height:0}

/* Final service copy stays alongside the truck before it moves into the sea. */
.sc-phone .m-second{padding-bottom:calc(1.05*var(--mh))}
/* Hull and wake share a fixed anchor and the same zoom curve. */
.sc-phone .m-wave{left:50%;top:50%;width:calc(var(--ship-width)*6.3);transform-origin:51% 70.2%;opacity:.46;will-change:transform;mix-blend-mode:screen;
 mask-image:linear-gradient(to bottom,transparent 0%,#0009 16%,#000 48%,#000 90%,transparent 100%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#0009 16%,#000 48%,#000 90%,transparent 100%)}
.sc-phone .m-wave-inner{transform:none}
.sc-phone .m-ship-image{will-change:transform}
/* Fit the complete hull in portrait and landscape, with room for navigation.
   Hull and wake retain their shared proportions throughout the zoom. */
.sc-phone{--ship-width:min(calc(230*var(--mu)),calc(.155*var(--mh)))}
.sc-phone .m-sea-stage{height:max(var(--mh),100svh)}
.sc-phone .m-sea-wrap{margin-bottom:calc(-1*var(--mh))}
.sc-phone .m-overlay{background:linear-gradient(180deg,#062f501a,#031725b3)}

/* Only this oversized texture moves: the hull and its wake keep one anchor.
   Compositor animation + the native video decoder require no JS frame loop. */
.sc-phone .m-water-drift{position:absolute;inset:-8%;animation:sc-water-drift 10s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.sc-phone.is-sea-active .m-water-drift{animation-play-state:running}
@keyframes sc-water-drift{from{transform:translate3d(-2%,3%,0) scale(1.02)}to{transform:translate3d(2%,-3%,0) scale(1.04)}}
/* Two overlapping currents flow towards the stern continuously. Their crossfade
   conceals the loop; only composited transforms/opacity run between scrolls. */
.sc-phone .m-water-current{position:absolute;inset:-12%;pointer-events:none;mix-blend-mode:screen;opacity:0;will-change:transform,opacity;animation:sc-water-current 12s linear infinite;animation-play-state:paused}
.sc-phone .m-water-current--second{animation-delay:-6s}
.sc-phone.is-sea-active .m-water-current{animation-play-state:running}
@keyframes sc-water-current{
 0%{transform:translate3d(-2%,8%,0) scale(1.03);opacity:0}
 25%{opacity:.24}
 75%{opacity:.24}
 100%{transform:translate3d(2%,-8%,0) scale(1.06);opacity:0}
}
@media(prefers-reduced-motion:reduce){.sc-phone .m-water-drift,.sc-phone .m-water-current{animation:none}}

/* One container crosses the road/sea boundary and lands on the same ship cell. */
.sc-phone .m-transfer{position:fixed;top:0;left:0;z-index:4;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}
.sc-phone .m-transfer[hidden]{display:none}
.sc-phone .m-transfer img{width:100%;height:100%}

/* Mer sur téléphone : le voile noir ayant été retiré (point 21), la houle et
   les courants doivent porter l'image seuls. Mouvements ralentis et élargis
   pour une mer plus calme, écume rendue plus lisible. */
.sc-phone .m-water-drift{animation-duration:16s}
@keyframes sc-water-drift{from{transform:translate3d(-3%,4%,0) scale(1.03)}to{transform:translate3d(3%,-4%,0) scale(1.06)}}
.sc-phone .m-water-current{animation-duration:18s}
.sc-phone .m-water-current--second{animation-delay:-9s}
@keyframes sc-water-current{
 0%{transform:translate3d(-3%,10%,0) scale(1.04);opacity:0}
 22%{opacity:.3}
 78%{opacity:.3}
 100%{transform:translate3d(3%,-10%,0) scale(1.08);opacity:0}
}
.sc-phone .m-wave{opacity:.58;filter:contrast(1.08) saturate(1.05)}
@media(prefers-reduced-motion:reduce){.sc-phone .m-water-drift,.sc-phone .m-water-current{animation:none}}

/* Mer sur téléphone : fluidité.
   Chaque plan de mer tient sa propre couche : plus de recomposition du fond à
   chaque image pendant le défilement. */
.sc-phone .m-ocean-image,.sc-phone .m-water-drift,.sc-phone .m-water-current,.sc-phone .m-wave-inner{transform:translateZ(0);backface-visibility:hidden}
.sc-phone .m-ocean-image img{image-rendering:auto}

/* Both parts share the exact transfer frame, clipped by the road/sea boundary. */
.sc-phone .m-transfer img{position:absolute;inset:0;width:100%;height:100%}

/* Native viewport and scroll geometry stay in sync when Safari's toolbar moves. */
.sc-phone .m-sea-stage{height:var(--mh)}
/* Foam has real alpha; no screen blending, filters or rectangular video backing. */
.sc-phone .m-wave{mix-blend-mode:normal;filter:none;mask-image:none;-webkit-mask-image:none}
.sc-phone .m-wave-inner{transform:none;backface-visibility:visible}
.sc-phone .m-wave video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sc-phone .m-wake-alpha{display:block;width:100%;height:100%}

/* Retain the ocean texture's detail: only a small overscan for the slow drift. */
.sc-phone .m-water-drift{inset:-4%}
@keyframes sc-water-drift{from{transform:translate3d(-1%,2%,0) scale(1.01)}to{transform:translate3d(1%,-2%,0) scale(1.02)}}

/* Safari: definite wake dimensions, persistent HD foam even without autoplay. */
.sc-phone .m-wave-inner{position:absolute;inset:0;width:100%;height:100%}
.sc-phone .m-wake-alpha{position:absolute;inset:0;width:100%;height:100%}
.sc-phone .m-wake-poster[hidden]{display:none}
.sc-phone .m-wave{opacity:.85}
/* Keep water behind the last promise until the clouds take over. */
.sc-phone .m-sea-wrap{margin-bottom:0}
.sc-phone .m-sea-stage{height:max(var(--mh),100lvh)}
.sc-phone .m-ship{height:var(--mh);align-self:start}
/* Same viewport reference as the hull, even while Safari expands its toolbar.
   Explicit dimensions avoid aspect-ratio/flex sizing differences in WebKit. */
.sc-phone .m-wave{top:calc(var(--mh)*.5);height:calc(var(--ship-width)*11.2);aspect-ratio:auto}

/* Continuous sternward flow: the bow points down the screen. Two offset
   currents dissolve into each other without reversing the ship's travel. */
.sc-phone .m-water-drift{inset:-6%;animation:sc-sea-swell 28s ease-in-out infinite alternate paused}
.sc-phone .m-water-current{inset:-15% -6%;mix-blend-mode:normal;animation:sc-sea-flow 32s linear infinite paused}
.sc-phone .m-water-current--second{animation-delay:-16s}
.sc-phone.is-sea-active .m-water-drift,.sc-phone.is-sea-active .m-water-current{animation-play-state:running}
@keyframes sc-sea-swell{
 from{transform:translate3d(-.15%,.25%,0)}
 to{transform:translate3d(.15%,-.25%,0)}
}
@keyframes sc-sea-flow{
 0%{transform:translate3d(-.15%,3%,0);opacity:0}
 25%{opacity:.32}
 75%{opacity:.32}
 100%{transform:translate3d(.15%,-3%,0);opacity:0}
}
/* Shared heave keeps both hull pieces and foam registered. The scroll zoom
   stays on the outer elements; sailing starts after the container transfer. */
.sc-phone .m-ship-inner,.sc-phone .m-wave-inner{animation:sc-cargo-heave 8s ease-in-out infinite paused}
.sc-phone.is-sea-active.is-underway .m-ship-inner,
.sc-phone.is-sea-active.is-underway .m-wave-inner{animation-play-state:running}
@keyframes sc-cargo-heave{
 0%,100%{transform:translate3d(0,0,0)}
 38%{transform:translate3d(calc(var(--ship-width)*.012),calc(var(--ship-width)*.035),0)}
 72%{transform:translate3d(calc(var(--ship-width)*-.009),calc(var(--ship-width)*-.016),0)}
}
.sc-phone .m-wave{opacity:.78}
/* Keep an actual on-screen media box for WebKit's inline video decoder. */
.sc-phone .m-wave video{inset:0;width:100%;height:100%;opacity:.001}
@media(prefers-reduced-motion:reduce){
 .sc-phone .m-water-drift,.sc-phone .m-water-current,
 .sc-phone .m-ship-inner,.sc-phone .m-wave-inner{animation:none}
}