/* 2 Arrow Labs, variant fx2 ("Bold"). Loads after site.v1.css.
   Motion is opt in: every rule that hides or moves something is scoped to html.fx,
   which fx.v1.js sets only when the visitor has not asked for reduced motion.
   Without JavaScript, or with reduced motion, the page is the plain Swiss site. */

/* Page to page cross fade (Chromium, no script). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
}

/* ---------- Hero stage: live arrow field behind the hero ---------- */
.stage{position:relative;isolation:isolate}
.stage > .field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.stage .hero{position:relative}

/* The mark draws its outline, then fills. pathLength="1" on each path makes the dash math simple. */
html.fx .hero-logo path{fill-opacity:0;stroke:currentColor;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;
  animation:fx-draw 1.15s cubic-bezier(.65,0,.25,1) .15s forwards,fx-fill .55s ease-out 1.05s forwards}
html.fx .hero-logo path + path{animation-delay:.45s,1.2s}
@keyframes fx-draw{to{stroke-dashoffset:0}}
@keyframes fx-fill{to{fill-opacity:1;stroke-opacity:0}}

/* Headline flicker. Each letter keeps its real glyph for layout; a flickering one shows a random glyph on top. */
html.fx [data-scramble]:not(.ready){opacity:0;animation:fx-failsafe 0s 1s forwards}
@keyframes fx-failsafe{to{opacity:1}}
[data-scramble] .w{white-space:nowrap}
[data-scramble] .ch{position:relative}
[data-scramble] .ch.scr{color:transparent}
[data-scramble] .ch.scr::after{content:attr(data-g);position:absolute;left:0;top:0;color:var(--ink-2)}

/* ---------- Reveals on scroll ---------- */
html.fx .reveal{clip-path:inset(-20% -4% 100% -4%);transform:translateY(.35em);
  transition:clip-path .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1)}
html.fx .reveal.in{clip-path:inset(-20% -4% -30% -4%);transform:none}
html.fx .rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease-out,transform .8s cubic-bezier(.2,.75,.2,1)}
html.fx .rise.in{opacity:1;transform:none}

/* ---------- Services rows on the home page: each row links to its section ---------- */
.offer{display:block;padding:0}
.offer-link{position:relative;display:grid;gap:4px 24px;padding:20px 44px 20px 0;color:inherit;text-decoration:none}
.offer-link h3,.offer-link p{position:relative;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.offer-link::before{content:"";position:absolute;inset:0 -12px;background:var(--panel);opacity:0;transform:scaleY(.7);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
.offer-link::after{content:"";position:absolute;right:4px;top:50%;width:26px;height:20px;margin-top:-10px;background:var(--ink);
  clip-path:polygon(0 32.5%,61.5% 32.5%,61.5% 0,100% 51.4%,61.5% 100%,61.5% 72.2%,0 72.2%);
  opacity:.45;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
@media (min-width:900px){.offer-link{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:baseline}}
@media (hover:hover){
  .offer-link::after{opacity:0;transform:translateX(-18px)}
  .offer-link:hover::before,.offer-link:focus-visible::before{opacity:1;transform:none}
  .offer-link:hover::after,.offer-link:focus-visible::after{opacity:1;transform:none}
  .offer-link:hover h3,.offer-link:hover p,.offer-link:focus-visible h3,.offer-link:focus-visible p{transform:translateX(12px)}
}

/* ---------- Links, nav and buttons ---------- */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.nav a:last-child::after{right:0}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.link{transition:text-decoration-color .25s ease}
.foot a{transition:color .25s ease,text-decoration-color .25s ease}
/* The button stays a plain button: a quiet color change on hover, nothing that moves. */
.btn{transition:background-color .2s ease}
.btn:hover{background:#D9D9D9}

/* ---------- 404: arrows point home ---------- */
.stage.nf-stage{border-bottom:0}
.nf{position:relative}

@media (prefers-reduced-motion:reduce){
  .offer-link::before,.offer-link::after,.offer-link h3,.offer-link p,
  .nav a::after,.btn,.link,.foot a{transition:none}
}
@media (forced-colors:active){
  .offer-link::after,.principles ul.spot li::before{background:CanvasText}
}
@media (max-width:400px){.nav a::after{left:7px;right:7px}}
@media (max-width:359px){.nav a::after{left:5px;right:5px}}
/* Logo row: fade to the original colors on hover. */
@media (prefers-reduced-motion:no-preference){.marks img{transition:opacity .3s ease}}
.marks.prox img{transition-duration:.18s;transition-timing-function:linear}