/* Pleger Dynamics – mobile.css (phone mode)
   Linked on every page with media="(max-width: 760px), (pointer: coarse) and (max-width: 900px)",
   the same query site.js uses for its phone branch, so tablets and desktops never see these rules.
   Rules prefixed with .js need site.js; everything else also holds without JavaScript. */
:root{
  --gutter:20px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --hdr:calc(68px + var(--safe-t));
  --pill:calc(78px + var(--safe-b));
  --fs-h1:clamp(2.5rem,1.9rem + 3.2vw,2.875rem);
  --fs-h2:clamp(2rem,1.55rem + 2.2vw,2.375rem);
  --fs-h3:1.375rem;
  --fs-lead:1.0625rem;
  --fs-body:1rem;
}
@media (max-width:340px){:root{--gutter:16px}}
/* no vertical scroll snapping: native momentum scrolling has priority (the services carousel keeps x mandatory) */
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{font-size:1rem;line-height:1.6}
html:has(.hdr.open){overflow:hidden}
.wrap{padding-left:max(var(--gutter),var(--safe-l));padding-right:max(var(--gutter),var(--safe-r))}

/* canvas stays the size of the large viewport, so the browser toolbar never rescales it */
#gl,#cv2{bottom:auto;height:100vh;height:100lvh}
.pglow{width:340px;height:340px;margin:110px 0 0 110px}

/* ---------- header: one slim glass bar ---------- */
.hdr{padding-top:var(--safe-t)}
.bar-wrap{padding:8px max(12px,var(--safe-r)) 0 max(12px,var(--safe-l))}
.bar{height:52px;gap:8px;padding:0 4px 0 12px;border-radius:16px}
.bar.glass{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* the blur lives on a pseudo element, so the bar does not become the containing block of the full-screen menu */
.bar.glass::after{display:block;opacity:1;z-index:-1;transition:opacity .3s;
  background:linear-gradient(160deg,rgba(16,24,40,.7),rgba(4,7,14,.66));
  -webkit-backdrop-filter:blur(18px) saturate(165%);backdrop-filter:blur(18px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 40px -20px rgba(0,0,0,.9)}
.bar .lang{margin-left:auto;height:44px;padding:0 6px;border:0;gap:2px}
.bar .lang a,.bar .lang .cur{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:44px}
.rail{display:none}
.topbar{display:block;left:12px;right:12px;bottom:-5px}
.js .menu-btn{display:inline-flex;height:44px;padding:0 14px;gap:9px;border-radius:12px}
.js .hdr.open .menu-btn i{transform:translateY(0) scaleY(.25) scaleX(1.15)}

/* full-screen glass menu */
.js .nav{position:fixed;inset:0;z-index:-1;margin:0;display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:calc(var(--hdr) + 12px) max(28px,var(--safe-r)) calc(96px + var(--safe-b)) max(28px,var(--safe-l));
  border:0;border-radius:0;box-shadow:none;counter-reset:nv;overscroll-behavior:contain;overflow-y:auto;
  background:radial-gradient(120% 70% at 85% 0%,rgba(47,107,255,.2),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(60,240,255,.12),transparent 65%),rgba(3,6,12,.78);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  opacity:0;transform:none;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s .35s}
.js .hdr.open .nav{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .35s var(--ease)}
.js .nav a{counter-increment:nv;display:flex;align-items:baseline;gap:18px;min-height:64px;padding:14px 4px;border-radius:0;
  font-size:clamp(1.75rem,1.15rem + 3vw,2.25rem);font-weight:650;letter-spacing:-.03em;line-height:1.1;color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .45s var(--ease),transform .6s var(--ease),color .2s}
.js .nav a::before{content:counter(nv,decimal-leading-zero);flex:none;min-width:2.6ch;font:500 .75rem/1 var(--mono);letter-spacing:.12em;color:var(--cyan);transform:translateY(-.5em)}
.js .nav a:last-child{border-bottom:0}
.js .nav a.on{color:var(--cyan)}
.nav a.on::after{display:none}
.js .hdr.open .nav a{opacity:1;transform:none}
.js .hdr.open .nav a:nth-child(2){transition-delay:.05s}
.js .hdr.open .nav a:nth-child(3){transition-delay:.1s}
.js .hdr.open .nav a:nth-child(4){transition-delay:.15s}
.js .hdr.open .nav a:nth-child(5){transition-delay:.2s}
.js .hdr.open .bar.glass::after{opacity:0}
.js .hdr.open .bar.glass::before{opacity:0}
.js .hdr.open .topbar{opacity:0}

/* ---------- glass: lighter blur on phones (it is recomputed every frame over the moving canvas) ---------- */
.glass{-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  background:linear-gradient(160deg,rgba(16,24,40,.72),rgba(4,7,14,.7))}
.glass::after{display:none}
.caustic{filter:none;opacity:.4}

/* ---------- sections: full-screen scenes ---------- */
section{scroll-margin-top:0}
.sec{padding-block:calc(var(--hdr) + 28px) 64px}
.sec-label{margin-bottom:16px}
.intro{margin-top:14px;font-size:1.0625rem;line-height:1.55}
h2{max-width:14ch}

/* hero: content sits low, in thumb reach; the net owns the top of the screen */
.hero{min-height:100vh;min-height:100svh;align-items:flex-end;padding-top:calc(var(--hdr) + 32px);padding-bottom:calc(36px + var(--safe-b))}
.eyebrow{margin-bottom:18px;font-size:.6875rem}
.eyebrow::before{margin-right:6px}
h1{max-width:11ch;letter-spacing:-.04em}
.lead{margin-top:20px;font-size:1.0625rem;line-height:1.55}
.actions{margin-top:28px;gap:10px}
.actions .btn{flex:1 1 140px;justify-content:center;min-height:52px;padding:14px 16px;border-radius:14px}
.chips{margin-top:24px;gap:6px}
.chips li{font-size:.6875rem;padding:7px 10px}
.hero-cue{margin-top:30px}

/* services: native swipe carousel, 82 % cards, the next one peeks in */
.svc{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr) + 20px) 0 calc(var(--pill) - 10px)}
.svc .pin{width:100%}
.svc-head{grid-template-columns:minmax(0,1fr);gap:0}
.svc-head .intro{justify-self:start;margin-top:14px}
.svc-track{display:flex;grid-template-columns:none;gap:12px;margin-top:26px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),var(--safe-l));overscroll-behavior-x:contain;
  padding:6px max(var(--gutter),var(--safe-r)) 10px max(var(--gutter),var(--safe-l));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-track::-webkit-scrollbar{display:none}
.svc-card{flex:0 0 min(82vw,440px);width:auto;scroll-snap-align:start;scroll-snap-stop:always;transform-origin:50% 50%}
.svc-win{height:clamp(140px,22svh,200px)}
.svc-card .glass{padding:20px 20px 24px}
.svc-card h3{font-size:1.3125rem}
.svc-card p{font-size:1rem;line-height:1.55;margin-top:10px}
.js .svc-card.rv{transform:none;transition:opacity .9s var(--ease) var(--d,0s)}
.js .svc-card .glass,.js .svc-card .svc-win{transition:opacity .45s var(--ease)}
.js .svc-card:not(.on) .glass{opacity:.62}
.js .svc-card.on .svc-win{box-shadow:inset 0 0 0 1px rgba(60,240,255,.16)}
.js .svc-track.hint{animation:nudge 1.5s var(--ease) .5s 1 both}
@keyframes nudge{0%,100%{transform:none}38%{transform:translate3d(-38px,0,0)}64%{transform:translate3d(5px,0,0)}}
.svc-foot{display:none}
.js .svc .svc-foot{display:flex;align-items:center;gap:14px;margin-top:16px;font:500 var(--fs-mono-s)/1 var(--mono);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--muted)}
.js .svc-foot .bar-line,.js .svc-foot > span:nth-child(4){display:none}
.svc-dots{display:flex;align-items:center;gap:6px}
.svc-dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.22);transition:width .4s var(--ease),background-color .4s}
.svc-dots i.on{width:24px;background:var(--cyan);box-shadow:0 0 10px rgba(60,240,255,.6)}
.swp{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.swp::after{content:"";width:16px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);animation:swp 1.8s var(--ease) infinite}
@keyframes swp{0%{transform:translateX(-4px);opacity:0}40%{opacity:1}100%{transform:translateX(8px);opacity:0}}

/* principles: pinned terrain, the four rules as a card deck that is dealt off to the left */
.pr-copy::before{inset:-28px -14px}
.js .pr.on{height:360vh;height:360svh}
.js .pr.on .pr-stage{height:100vh;height:100svh;padding:calc(var(--hdr) + 14px) 0 var(--pill)}
.js .pr.on .pr-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;align-items:stretch}
.js .pr.on .pr-count{display:flex;margin-top:16px;font-size:3.25rem}
.js .pr.on .pr-prog{display:block;width:132px;margin-top:14px}
.js .pr.on .pr-list{display:grid;align-self:end;min-height:0;height:auto;padding-top:30px}
.js .pr.on .pr-item{grid-area:1/1;position:relative;top:auto;left:auto;right:auto;padding:22px 20px 24px;transform-origin:50% 0;
  transform:translate3d(0,-36px,0) scale(.84);opacity:0;z-index:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(14,21,36,.94),rgba(5,8,15,.94))}
.js .pr.on .pr-item.cur{transform:none;opacity:1;z-index:3;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  background:linear-gradient(160deg,rgba(16,24,40,.74),rgba(4,7,14,.72))}
.js .pr.on .pr-item.cur + .pr-item{transform:translate3d(0,-14px,0) scale(.94);opacity:.7;z-index:2}
.js .pr.on .pr-item.cur + .pr-item + .pr-item{transform:translate3d(0,-26px,0) scale(.88);opacity:.38;z-index:1}
.js .pr.on .pr-item.past{transform:translate3d(-112%,-8px,0) rotate(-10deg);opacity:0;z-index:4}
.js .pr.on .pr-item h3{font-size:1.3125rem}
.js .pr.on .pr-item p{margin-top:10px;line-height:1.55}
@media (max-height:700px){
  .js .pr.on .pr-count{font-size:2.5rem;margin-top:10px}
  .js .pr.on .pr-prog{display:none}
  .js .pr.on .intro{display:block;font-size:1rem;margin-top:10px}
  .js .pr.on .pr-list{padding-top:24px}
}

/* lab: pinned; the field rolls into a tunnel you fall through, then closes into one large central sphere */
.lab-grid{gap:20px}
.lab-panel{padding:26px 22px 28px;border-radius:22px}
.lab-panel p{margin-top:14px}
.lab-panel .chips{margin-top:20px}
.pill{margin-bottom:16px}
.orbit-slot{max-width:min(78vw,320px)}
.js .lab.on{height:330vh;height:330svh}
.js .lab.on .lab-stage{height:100vh;height:100svh;align-items:flex-end;padding:calc(var(--hdr) + 12px) 0 var(--pill)}
.js .lab.on .lab-grid{width:100%}
.js .lab.on .lab-orbit{position:absolute;left:0;right:0;top:var(--hdr);height:56%;display:grid;place-items:center;pointer-events:none}
.js .lab.on .orbit-slot{width:min(90vw,52svh);max-width:none}
@media (max-height:700px){.js .lab.on .lab-orbit{height:46%}.js .lab.on .lab-panel{padding:20px 20px 22px}}
/* The panel's glass fades on its own (--lg, set by site.js; default 1 = the normal glass), so the content can stand in
   the scene without an empty surface. Platform chips: 13 px, on a denser ground, so they stay legible on the particle ring. */
.js .lab.on .lab-panel{
  background:linear-gradient(160deg,rgba(16,24,40,calc(.72 * var(--lg,1))),rgba(4,7,14,calc(.7 * var(--lg,1))));
  -webkit-backdrop-filter:blur(calc(12px * var(--lg,1))) saturate(calc(100% + 50% * var(--lg,1)));
  backdrop-filter:blur(calc(12px * var(--lg,1))) saturate(calc(100% + 50% * var(--lg,1)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.09 * var(--lg,1))),0 24px 60px -24px rgba(0,0,0,calc(.85 * var(--lg,1)))}
.js .lab.on .lab-panel::before{opacity:var(--lg,1)}
.js .lab.on .lab-panel .caustic{opacity:calc(.4 * var(--lg,1))}
.lab-panel .chips li{font-size:.8125rem;padding:8px 12px;color:var(--ink);background:rgba(6,10,18,.78);border-color:rgba(160,190,230,.24)}

/* stack: the constellation stays on top (sticky, native scrolling), the entries glide over it */
.st-grid{display:block}
.const-slot{position:sticky;top:calc(var(--hdr) + 2px);z-index:0;height:36vh;height:36svh;margin:20px calc(-1 * max(var(--gutter),var(--safe-l))) 0;border-radius:0;background:none}
.const-slot::before,.const-slot::after{display:none}
.st-list{position:relative;z-index:1;padding:4px 0 24px;gap:12px}
.st-item{padding:20px 20px 22px;background:linear-gradient(160deg,rgba(10,16,28,.56),rgba(4,7,14,.46));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.st-item.on{background:linear-gradient(160deg,rgba(12,20,34,.66),rgba(4,8,16,.56))}
.st-item p{font-size:1.0625rem;margin-top:10px}

/* contact */
.contact{min-height:calc(100vh - var(--foot-h,150px));min-height:calc(100svh - var(--foot-h,150px));padding:calc(var(--hdr) + 28px) 0 32px}
.beacon-slot{width:150px;height:116px;margin-bottom:4px}
.beacon-slot::before{width:340px;height:340px;margin:-170px 0 0 -170px}
.contact h2{max-width:12ch}
.mail{display:flex;width:100%;justify-content:center;min-height:56px;margin-top:24px;padding:16px 18px;font-size:1rem}
address{margin-top:20px;font-size:.6875rem;line-height:1.9}

/* footer: 44 px targets */
footer{padding-bottom:calc(20px + var(--safe-b))}
.foot{gap:4px 20px;padding-top:16px}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot > span:first-child{flex-basis:100%;padding-top:6px}
.foot .sp{margin-left:0;padding:0 6px}
.foot .lang a,.foot .lang .cur{display:inline-flex;align-items:center;min-height:40px;min-width:30px;justify-content:center}

/* legal pages */
.legal-main{padding:calc(var(--hdr) + 24px) 0 56px}
.legal{padding:26px 20px 30px;border-radius:20px}
.legal h1{font-size:2rem;-webkit-hyphens:auto;hyphens:auto}

/* ---------- fixed contact pill (created by site.js from the hero CTA) ---------- */
.cta-pill{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));z-index:40;display:inline-flex;align-items:center;height:48px;
  padding:0 20px 0 18px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  background:linear-gradient(160deg,rgba(18,28,46,.7),rgba(6,10,18,.66));-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px -12px rgba(0,0,0,.9),0 0 34px -14px rgba(60,240,255,.7);
  transform:translate3d(-50%,calc(100% + 30px),0);opacity:0;pointer-events:none;transition:transform .55s var(--ease),opacity .35s var(--ease)}
.cta-pill.show{transform:translate3d(-50%,0,0);opacity:1;pointer-events:auto}
.cta-pill::before{content:"";width:7px;height:7px;margin-right:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none}
.cta-pill .mi{display:inline-flex;align-items:center;gap:10px}
.cta-pill .arr{font-family:var(--mono);color:var(--cyan)}
.cta-pill:active{transform:translate3d(-50%,0,0) scale(.97)}

/* ---------- tap feedback: a ring in the particle layer ---------- */
.tap-ring{position:fixed;left:0;top:0;z-index:1;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid rgba(60,240,255,.75);box-shadow:0 0 26px rgba(60,240,255,.35),inset 0 0 20px rgba(60,240,255,.22);
  transform:translate3d(var(--x,0),var(--y,0),0) scale(.1)}
.tap-ring.go{animation:tapr .95s var(--ease) forwards}
@keyframes tapr{0%{opacity:.95;transform:translate3d(var(--x,0),var(--y,0),0) scale(.12)}100%{opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(4.2)}}

/* ---------- landscape phones ---------- */
@media (orientation:landscape){
  .hero{align-items:center}
  .const-slot{height:60vh;height:60svh}
  .svc-win{height:120px}
}

/* ---------- without JavaScript: the inline nav stays reachable ---------- */
html:not(.js) .bar{height:auto;flex-wrap:wrap;padding:8px 10px 8px 14px;row-gap:4px}
html:not(.js) .nav{order:3;flex-basis:100%;margin:0;flex-wrap:wrap}
html:not(.js) .nav a{padding:10px 9px}
html:not(.js) .bar .lang{margin-left:auto}
html:not(.js) .hero,html:not(.js) .legal-main{padding-top:190px}